feat(AppGuide): 新增应用指南组件
This commit is contained in:
chengcheng
parent
68d0048393
commit
368c90f327
@ -7,7 +7,8 @@
|
||||
## 功能描述
|
||||
|
||||
- 支持扩展绘画组件库
|
||||
- 支持扩展首页组件库（即将上线）
|
||||
- 支持扩展首页组件库
|
||||
- 支持应用指导组件库
|
||||
|
||||
## 组件开发
|
||||
|
||||
@ -123,4 +124,4 @@ http://localhost:3200
|
||||
## 使用
|
||||
|
||||
- 维护 EasyAI 远程组件项目
|
||||
|
||||
|
||||
|
||||
3
app.vue
3
app.vue
@ -5,6 +5,9 @@
|
||||
<ImageUpload />
|
||||
<!-- 首页-所有应用组件-->
|
||||
<AllApps/>
|
||||
|
||||
<!-- 应用指导-款式融合-->
|
||||
<StyleFusionGuide/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
||||
@ -19,7 +19,7 @@ export function createInjectClassPlugin(prefix = "remote-ui") {
|
||||
// 已经有 class -> 合并
|
||||
return `<${tag}${attrs.replace(
|
||||
/class\s*=\s*["']([^"']*)["']/,
|
||||
(_, cls) => `class="${prefix} ${cls}"`,
|
||||
(_: string, cls: string) => `class="${prefix} ${cls}"`,
|
||||
)}>`;
|
||||
} else {
|
||||
// 没有 class -> 直接加
|
||||
|
||||
@ -94,7 +94,7 @@ const handleAccessUrl = () => {
|
||||
<!-- 操作按钮 -->
|
||||
<div class="w-full flex justify-center mt-2">
|
||||
<button
|
||||
class="w-4/5 rounded-full px-4 py-0.5 border-gray-300 bg-blue-500"
|
||||
class="w-4/5 rounded-full px-4 py-0.5 border-gray-300 bg-theme-primary"
|
||||
@click.stop.prevent="handleAccessUrl"
|
||||
>
|
||||
一键使用
|
||||
|
||||
59
components/StyleFusionGuide/index.vue
Normal file
59
components/StyleFusionGuide/index.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
const steps = [
|
||||
{ label: '原图', image: 'https://cos.51easyai.com/2025-08-30/663e19cd4fa9d8078385c7c9/upload/20250830145049956-original.png' },
|
||||
{ label: '参考图', image: 'https://cos.51easyai.com/2025-08-30/663e19cd4fa9d8078385c7c9/upload/20250830145102503-reference.png' },
|
||||
{ label: '生成结果', image: 'https://cos.51easyai.com/2025-08-30/663e19cd4fa9d8078385c7c9/upload/20250830145112076-result.png' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="h-full flex flex-col gap-3 justify-center items-center">
|
||||
<div class="text-xl font-bold">
|
||||
款式融合
|
||||
</div>
|
||||
<div class="text-sm font-light">
|
||||
将原图与参照图,在设计风格上进行自由融合,生成全新款式图
|
||||
</div>
|
||||
<!-- 第一行：文本 -->
|
||||
<div class="flex items-center gap-2">
|
||||
<template
|
||||
v-for="(step, index) in steps"
|
||||
:key="index"
|
||||
>
|
||||
<div class="text-sm">
|
||||
{{ step.label }}
|
||||
</div>
|
||||
<icon
|
||||
v-if="index < steps.length - 1"
|
||||
name="material-symbols-light:keyboard-double-arrow-right-rounded"
|
||||
class="text-xl"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 第二行：图片 -->
|
||||
<div class="flex items-center gap-2">
|
||||
<template
|
||||
v-for="(step, index) in steps"
|
||||
:key="index"
|
||||
>
|
||||
<img
|
||||
:src="step.image"
|
||||
alt=""
|
||||
class="w-24 h-24 object-cover rounded-lg"
|
||||
>
|
||||
<icon
|
||||
v-if="index < steps.length - 1"
|
||||
name="material-symbols-light:keyboard-double-arrow-right-rounded"
|
||||
class="text-xl"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@ -8,6 +8,7 @@ export const ComponentSceneConst = {
|
||||
DynamicPage: "dynamicPage", // 自定义页面
|
||||
Workflow: "workflow", // 工作流
|
||||
DrawPanne: "drawPanne", // 绘画面板
|
||||
AppGuide: "appGuide" // 应用引导
|
||||
} as const;
|
||||
|
||||
export type ComponentSceneType =
|
||||
@ -24,12 +25,13 @@ export interface IComponentMateInfo<
|
||||
path: string; // 组件路径
|
||||
description: string; // 描述
|
||||
scenes: T; // 所属场景
|
||||
data?: ComponentDataMap[T]; // 组件数据
|
||||
data: ComponentDataMap[T]; // 组件数据
|
||||
}
|
||||
|
||||
export type ComponentDataMap = {
|
||||
[ComponentSceneConst.DrawPanne]: IDrawPanneData;
|
||||
[ComponentSceneConst.DynamicPage]: IDynamicPageData;
|
||||
[ComponentSceneConst.AppGuide]: undefined;
|
||||
[ComponentSceneConst.Workflow]?: never;
|
||||
};
|
||||
|
||||
|
||||
@ -10,5 +10,5 @@ export default {
|
||||
label: "全部应用", // 组件标签
|
||||
group: BuilderComponentGroupConst.HomeTemplate
|
||||
}
|
||||
} satisfies IComponentMateInfo<ComponentSceneType>;
|
||||
} satisfies IComponentMateInfo<typeof ComponentSceneConst.DynamicPage>;
|
||||
|
||||
|
||||
@ -14,4 +14,4 @@ export default {
|
||||
group: ComponentGroupConst.IMAGE, // 针对组件
|
||||
isRefComponent: true, // 是否为引用组件 （引用组件，在执行绘画的时候会执行参数赋值操作）
|
||||
},
|
||||
} satisfies IComponentMateInfo;
|
||||
} satisfies IComponentMateInfo<typeof ComponentSceneConst.DrawPanne>;
|
||||
|
||||
9
manifest/StyleFusionGuide.ts
Normal file
9
manifest/StyleFusionGuide.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { ComponentSceneConst, type IComponentMateInfo } from "~/composables";
|
||||
|
||||
export default {
|
||||
name: "StyleFusionGuide", // 组件名称
|
||||
path: "./components/StyleFusionGuide/index.vue", // 组件路径
|
||||
scenes: ComponentSceneConst.AppGuide, // 组件场景
|
||||
description: "应用引导-款式融合", // 组件描述
|
||||
data: undefined
|
||||
} satisfies IComponentMateInfo<typeof ComponentSceneConst.AppGuide>;
|
||||
@ -40,6 +40,26 @@ export default defineNuxtConfig({
|
||||
return ""; // 删除该选择器
|
||||
}
|
||||
}
|
||||
|
||||
//reset，不要加前缀
|
||||
const resetTags = [
|
||||
"button",
|
||||
"input",
|
||||
"select",
|
||||
"textarea",
|
||||
"fieldset",
|
||||
"legend",
|
||||
"progress",
|
||||
"optgroup",
|
||||
"option",
|
||||
"label",
|
||||
"output",
|
||||
"meter"
|
||||
];
|
||||
if (resetTags.some(tag => selector.includes(tag))) {
|
||||
return selector
|
||||
}
|
||||
|
||||
return prefixedSelector;
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user