修改bug

src/views/home/diy.vue

@@ -8,7 +8,7 @@
 
 <script setup name="Index" lang="ts">
 import { getBigCustomerPlatformIndexDiyPcPage } from '@/api/home/diy';
-import { loadDiyComponents, getComponentGroups } from '@/views/home/pccomponents/index';
+import { getComponentGroups } from '@/views/home/pccomponents/index';
 import { stationStore } from '@/store/modules/station';
 
 const props = defineProps<{
@@ -29,8 +29,7 @@ onMounted(() => {
 
 // 加载组件
 const loadComponents = async () => {
-  const components = await loadDiyComponents();
-  collapse.value = getComponentGroups(components);
+  collapse.value = getComponentGroups();
   getBigCustomerPlatformIndexDiyPcPage({ siteId: station.stationData.id }).then((res) => {
     if (res.code == 200) {
       formData.value = res.data;

src/views/home/pccomponents/index.ts

@@ -1,9 +1,56 @@
 import type { Component } from 'vue';
 import { markRaw } from 'vue';
-const createComponentMap = (name: string) => ({
-  pagePath: `./pages/${name}.vue`,
-  fid: 1
-});
+
+import head from './pages/head.vue';
+const headRef = shallowRef(head);
+
+import textTitle from './pages/textTitle.vue';
+const textTitleRef = shallowRef(textTitle);
+
+import navigation from './pages/navigation.vue';
+const navigationRef = shallowRef(navigation);
+
+import imageCube from './pages/imageCube.vue';
+const imageCubeRef = shallowRef(imageCube);
+
+import activity from './pages/activity.vue';
+const activityRef = shallowRef(activity);
+
+import carousel from './pages/carousel.vue';
+const carouselRef = shallowRef(carousel);
+
+import article from './pages/article.vue';
+const articleRef = shallowRef(article);
+
+import brand from './pages/brand.vue';
+const brandRef = shallowRef(brand);
+
+import advert from './pages/advert.vue';
+const advertRef = shallowRef(advert);
+
+import floor from './pages/floor.vue';
+const floorRef = shallowRef(floor);
+
+import goods from './pages/goods.vue';
+const goodsRef = shallowRef(goods);
+
+import goodsList from './pages/goodsList.vue';
+const goodsListRef = shallowRef(goodsList);
+
+import discover from './pages/discover.vue';
+const discoverRef = shallowRef(discover);
+
+import hot from './pages/hot.vue';
+const hotRef = shallowRef(hot);
+
+import editordiy from './pages/editordiy.vue';
+const editordiyRef = shallowRef(editordiy);
+
+import blank from './pages/blank.vue';
+const blankRef = shallowRef(blank);
+
+import border from './pages/border.vue';
+const borderRef = shallowRef(border);
 
 // 组件列表配置
 export const componentImportConfigs: any = [
@@ -12,162 +59,149 @@ export const componentImportConfigs: any = [
     icon: 'iconfont iconfuwenbenpc',
     id: 1,
     enabled: true,
-    ...createComponentMap('head')
+    components: markRaw(headRef.value),
+    fid: 1
   },
   {
     name: '文本标题',
     icon: 'iconfont iconbiaotipc',
     id: 2,
     enabled: true,
-    ...createComponentMap('textTitle')
+    components: markRaw(textTitleRef.value),
+    fid: 1
   },
   {
     name: '图文导航',
     icon: 'iconfont icontuwendaohangpc',
     id: 3,
     enabled: true,
-    ...createComponentMap('navigation')
+    components: markRaw(navigationRef.value),
+    fid: 1
   },
   {
     name: '图片魔方',
     icon: 'iconfont iconmofangpc',
     id: 4,
     enabled: true,
-    ...createComponentMap('imageCube')
+    components: markRaw(imageCubeRef.value),
+    fid: 1
   },
   {
     name: '活动魔方',
     icon: 'iconfont iconmofangpc',
     enabled: true,
     id: 5,
-    ...createComponentMap('activity')
+    components: markRaw(activityRef.value),
+    fid: 1
   },
   {
     name: '轮播图',
     icon: 'iconfont icona-tupianzhanbopc302',
     enabled: true,
     id: 6,
-    ...createComponentMap('carousel')
+    components: markRaw(carouselRef.value),
+    fid: 1
   },
   {
     name: '文章咨询',
     icon: 'iconfont icongonggaopc',
     enabled: true,
     id: 7,
-    ...createComponentMap('article')
+    components: markRaw(articleRef.value),
+    fid: 1
   },
   {
     name: '品牌组件',
     icon: 'iconfont iconmiaoshashangpin',
     enabled: true,
     id: 8,
-    ...createComponentMap('brand')
+    components: markRaw(brandRef.value),
+    fid: 1
   },
   {
     name: '图文广告',
     icon: 'iconfont icontupiandaohangpc',
     enabled: true,
     id: 9,
-    ...createComponentMap('advert')
+    components: markRaw(advertRef.value),
+    fid: 1
   },
   {
     name: '楼层组件',
     icon: 'iconfont iconshangpinliebiaopc',
     enabled: true,
     id: 10,
-    ...createComponentMap('floor')
+    components: markRaw(floorRef.value),
+    fid: 1
   },
   {
     name: '商品组件',
     icon: 'iconfont icona-shangpintuijianpc30',
     enabled: true,
     id: 11,
-    ...createComponentMap('goods')
+    components: markRaw(goodsRef.value),
+    fid: 1
   },
   {
     name: '多商品组',
     icon: 'iconfont iconduoshangpinzupc',
     enabled: true,
     id: 12,
-    ...createComponentMap('goodsList')
+    components: markRaw(goodsListRef.value),
+    fid: 1
   },
   {
     name: '发现组件',
     icon: 'iconfont iconjifenshangpinpc',
     enabled: true,
     id: 13,
-    ...createComponentMap('discover')
+    components: markRaw(discoverRef.value),
+    fid: 1
   },
   {
     name: '热区',
     icon: 'iconfont iconrequpc',
     enabled: true,
     id: 14,
-    ...createComponentMap('hot')
+    components: markRaw(hotRef.value),
+    fid: 1
   },
   {
     name: '富文本',
     icon: 'iconfont iconfuwenbenpc',
     enabled: true,
     id: 15,
-    ...createComponentMap('editordiy')
+    components: markRaw(editordiyRef.value),
+    fid: 1
   },
   {
     name: '辅助空白',
     icon: 'iconfont iconfuzhukongbaipc',
     enabled: true,
     id: 16,
-    ...createComponentMap('blank')
+    components: markRaw(blankRef.value),
+    fid: 1
   },
   {
     name: '辅助线',
     icon: 'iconfont iconfuzhuxianpc',
     enabled: true,
     id: 17,
-    ...createComponentMap('border')
+    components: markRaw(borderRef.value),
+    fid: 1
   }
 ];
 
-/**
- * 加载所有组件
- * @returns 组件配置列表
- */
-export async function loadDiyComponents(): Promise<any[]> {
-  const components: any[] = [];
-
-  const loadPromises = componentImportConfigs
-    .filter((config: any) => config.enabled !== false)
-    .map(async (config: any) => {
-      try {
-        const [pageModule] = await Promise.all([import(/* @vite-ignore */ config.pagePath)]);
-        return {
-          name: config.name,
-          icon: config.icon,
-          fid: config.fid,
-          id: config.id,
-          components: markRaw(pageModule.default),
-          enabled: true
-        } as any;
-      } catch (error) {
-        console.warn(`加载组件失败：${config.name}`, error);
-        return null;
-      }
-    });
-
-  const results = await Promise.all(loadPromises);
-  return results.filter((item): item is any => item !== null);
-}
-
 /**
  * 获取组件分组配置
  * @param components 组件列表
  * @returns 分组后的组件配置
  */
-export function getComponentGroups(components: any[]): any[] {
+export function getComponentGroups(): any[] {
   return [
     {
       name: '基础组件',
-      list: components,
+      list: componentImportConfigs,
       id: 1
     }
     // 后续可扩展多个分组，如：营销组件、商品组件等

src/views/home/pccomponents/index.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup name="Index" lang="ts">
-import { loadDiyComponents, getComponentGroups } from '@/views/home/pccomponents/index';
+import { getComponentGroups } from '@/views/home/pccomponents/index';
 const componentList = ref<any>([]);
 const collapse = ref<any>([]);
 
@@ -21,8 +21,7 @@ onMounted(() => {
 
 // 加载组件
 const loadComponents = async () => {
-  const components = await loadDiyComponents();
-  collapse.value = getComponentGroups(components);
+  collapse.value = getComponentGroups();
   document.documentElement.style.setProperty('--hover-color', props.dataInfo.hoverColor ? props.dataInfo.hoverColor : '#E7000B');
   const datas = JSON.parse(props.dataInfo.property);
   collapse.value.forEach((item1: any) => {