feat(AppGuide): 新增应用指南组件

README.md

@@ -7,7 +7,8 @@
 ## 功能描述
 
 - 支持扩展绘画组件库
-- 支持扩展首页组件库（即将上线）
+- 支持扩展首页组件库
+- 支持应用指导组件库
 
 ## 组件开发
 
@@ -123,4 +124,4 @@ http://localhost:3200
 ## 使用
 
 - 维护 EasyAI 远程组件项目
-  ![远程组件管理](remote-ui-kit/docs/images/RemoteComponentManage.png)
+  ![远程组件管理](./docs/images/RemoteComponentManage.png)

app.vue

@@ -5,6 +5,9 @@
     <ImageUpload />
     <!--    首页-所有应用组件-->
     <AllApps/>
+
+    <!--    应用指导-款式融合-->
+    <StyleFusionGuide/>
   </div>
 </template>
 <script lang="ts" setup>

build/vite-plugins/injectClassPlugin.ts

@@ -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 -> 直接加

components/AllApps/AppCard.vue

@@ -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"
           >
             一键使用

components/StyleFusionGuide/index.vue

@@ -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>

composables/meta/interface/meta.interface.ts

@@ -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;
 };
 

manifest/AllApps.ts

@@ -10,5 +10,5 @@ export default {
         label: "全部应用",   // 组件标签
         group: BuilderComponentGroupConst.HomeTemplate
     }
-} satisfies IComponentMateInfo<ComponentSceneType>;
+} satisfies IComponentMateInfo<typeof ComponentSceneConst.DynamicPage>;
 

manifest/ImageUpload.ts

@@ -14,4 +14,4 @@ export default {
     group: ComponentGroupConst.IMAGE, // 针对组件
     isRefComponent: true, // 是否为引用组件 （引用组件，在执行绘画的时候会执行参数赋值操作）
   },
-} satisfies IComponentMateInfo;
+} satisfies IComponentMateInfo<typeof ComponentSceneConst.DrawPanne>;

manifest/StyleFusionGuide.ts

@@ -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>;

nuxt.config.ts

@@ -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;
         },
       },