Merge remote-tracking branch 'origin/master' into master

src/views/diy/pcEdit.vue

@@ -184,7 +184,7 @@
 import { pcAddDiy, pcEditDiy, pcLookDiy } from '@/api/diy/index';
 import icon from '@/components/icon/index.vue';
 import draggable from 'vuedraggable';
-import { loadDiyComponents, getComponentGroups } from '@/views/diy/pccomponents/index';
+import { getComponentGroups } from '@/views/diy/pccomponents/index';
 import usePcdiyStore from '@/store/modules/pcdiy';
 
 import pagesEdit from '@/views/diy/pccomponents/edit/pages-edit.vue';
@@ -201,7 +201,6 @@ const siteId = ref<any>(null);
 const clientId = ref<any>(null);
 
 onMounted(() => {
-  loadComponents();
   if (query.id) {
     id.value = query.id;
   } else {
@@ -213,12 +212,12 @@ onMounted(() => {
     if (query.siteId) siteId.value = query.siteId;
     if (query.clientId) clientId.value = query.clientId;
   }
+  loadComponents();
 });
 
 // 加载组件
 const loadComponents = async () => {
-  const components = await loadDiyComponents();
-  collapse.value = getComponentGroups(components);
+  collapse.value = getComponentGroups();
   if (id.value) {
     pcLookDiy(id.value).then((res) => {
       if (res.code == 200) {

src/views/diy/pccomponents/edit/head-edit.vue

@@ -107,7 +107,7 @@
             <el-form-item label="样式选择">
               <el-radio-group v-model="diyStore.editComponent.leftStyle">
                 <el-radio :value="1">样式1</el-radio>
-                <el-radio :value="2">样式2</el-radio>
+                <!-- <el-radio :value="2">样式2</el-radio> -->
               </el-radio-group>
             </el-form-item>
           </el-form>

src/views/diy/pccomponents/index.ts

@@ -1,16 +1,90 @@
 import type { Component } from 'vue';
 import { markRaw } from 'vue';
-// 辅助函数：自动导入展示组件和编辑组件
-// const createComponentMap = (name: string) => ({
-//   pages: defineAsyncComponent(() => import(`@/views/diy/pccomponents/pages/${name}.vue`)),
-//   edit: defineAsyncComponent(() => import(`@/views/diy/pccomponents/edit/${name}-edit.vue`))
-// });
-
-const createComponentMap = (name: string) => ({
-  pagePath: `./pages/${name}.vue`,
-  editPath: `./edit/${name}-edit.vue`,
-  fid: 1
-});
+
+import head from './pages/head.vue';
+const headRef = shallowRef(head);
+import headEdit from './edit/head-edit.vue';
+const headEditRef = shallowRef(headEdit);
+
+import textTitle from './pages/textTitle.vue';
+const textTitleRef = shallowRef(textTitle);
+import textTitleEdit from './edit/textTitle-edit.vue';
+const textTitleEditRef = shallowRef(textTitleEdit);
+
+import navigation from './pages/navigation.vue';
+const navigationRef = shallowRef(navigation);
+import navigationEdit from './edit/navigation-edit.vue';
+const navigationEditRef = shallowRef(navigationEdit);
+
+import imageCube from './pages/imageCube.vue';
+const imageCubeRef = shallowRef(imageCube);
+import imageCubeEdit from './edit/imageCube-edit.vue';
+const imageCubeEditRef = shallowRef(imageCubeEdit);
+
+import activity from './pages/activity.vue';
+const activityRef = shallowRef(activity);
+import activityEdit from './edit/activity-edit.vue';
+const activityEditRef = shallowRef(activityEdit);
+
+import carousel from './pages/carousel.vue';
+const carouselRef = shallowRef(carousel);
+import carouselEdit from './edit/carousel-edit.vue';
+const carouselEditRef = shallowRef(carouselEdit);
+
+import article from './pages/article.vue';
+const articleRef = shallowRef(article);
+import articleEdit from './edit/article-edit.vue';
+const articleEditRef = shallowRef(articleEdit);
+
+import brand from './pages/brand.vue';
+const brandRef = shallowRef(brand);
+import brandEdit from './edit/brand-edit.vue';
+const brandEditRef = shallowRef(brandEdit);
+
+import advert from './pages/advert.vue';
+const advertRef = shallowRef(advert);
+import advertEdit from './edit/advert-edit.vue';
+const advertEditRef = shallowRef(advertEdit);
+
+import floor from './pages/floor.vue';
+const floorRef = shallowRef(floor);
+import floorEdit from './edit/floor-edit.vue';
+const floorEditRef = shallowRef(floorEdit);
+
+import goods from './pages/goods.vue';
+const goodsRef = shallowRef(goods);
+import goodsEdit from './edit/goods-edit.vue';
+const goodsEditRef = shallowRef(goodsEdit);
+
+import goodsList from './pages/goodsList.vue';
+const goodsListRef = shallowRef(goodsList);
+import goodsListEdit from './edit/goodsList-edit.vue';
+const goodsListEditRef = shallowRef(goodsListEdit);
+
+import discover from './pages/discover.vue';
+const discoverRef = shallowRef(discover);
+import discoverEdit from './edit/discover-edit.vue';
+const discoverEditRef = shallowRef(discoverEdit);
+
+import hot from './pages/hot.vue';
+const hotRef = shallowRef(hot);
+import hotEdit from './edit/hot-edit.vue';
+const hotEditRef = shallowRef(hotEdit);
+
+import editordiy from './pages/editordiy.vue';
+const editordiyRef = shallowRef(editordiy);
+import editordiyEdit from './edit/editordiy-edit.vue';
+const editordiyEditRef = shallowRef(editordiyEdit);
+
+import blank from './pages/blank.vue';
+const blankRef = shallowRef(blank);
+import blankEdit from './edit/blank-edit.vue';
+const blankEditRef = shallowRef(blankEdit);
+
+import border from './pages/border.vue';
+const borderRef = shallowRef(border);
+import borderEdit from './edit/border-edit.vue';
+const borderEditRef = shallowRef(borderEdit);
 
 // 组件列表配置
 export const componentImportConfigs: any = [
@@ -19,161 +93,166 @@ export const componentImportConfigs: any = [
     icon: 'iconfont iconfuwenbenpc',
     id: 1,
     enabled: true,
-    ...createComponentMap('head')
+    components: markRaw(headRef.value),
+    edit: markRaw(headEditRef.value),
+    fid: 1
   },
   {
     name: '文本标题',
     icon: 'iconfont iconbiaotipc',
     id: 2,
     enabled: true,
-    ...createComponentMap('textTitle')
+    components: markRaw(textTitleRef.value),
+    edit: markRaw(textTitleEditRef.value),
+    fid: 1
   },
   {
     name: '图文导航',
     icon: 'iconfont icontuwendaohangpc',
     id: 3,
     enabled: true,
-    ...createComponentMap('navigation')
+    components: markRaw(navigationRef.value),
+    edit: markRaw(navigationEditRef.value),
+    fid: 1
   },
   {
     name: '图片魔方',
     icon: 'iconfont iconmofangpc',
     id: 4,
     enabled: true,
-    ...createComponentMap('imageCube')
+    components: markRaw(imageCubeRef.value),
+    edit: markRaw(imageCubeEditRef.value),
+    fid: 1
   },
   {
     name: '活动魔方',
     icon: 'iconfont iconmofangpc',
     enabled: true,
     id: 5,
-    ...createComponentMap('activity')
+    components: markRaw(activityRef.value),
+    edit: markRaw(activityEditRef.value),
+    fid: 1
   },
   {
     name: '轮播图',
     icon: 'iconfont icona-tupianzhanbopc302',
     enabled: true,
     id: 6,
-    ...createComponentMap('carousel')
+    components: markRaw(carouselRef.value),
+    edit: markRaw(carouselEditRef.value),
+    fid: 1
   },
   {
     name: '文章咨询',
     icon: 'iconfont icongonggaopc',
     enabled: true,
     id: 7,
-    ...createComponentMap('article')
+    components: markRaw(articleRef.value),
+    edit: markRaw(articleEditRef.value),
+    fid: 1
   },
   {
     name: '品牌组件',
     icon: 'iconfont iconmiaoshashangpin',
     enabled: true,
     id: 8,
-    ...createComponentMap('brand')
+    components: markRaw(brandRef.value),
+    edit: markRaw(brandEditRef.value),
+    fid: 1
   },
   {
     name: '图文广告',
     icon: 'iconfont icontupiandaohangpc',
     enabled: true,
     id: 9,
-    ...createComponentMap('advert')
+    components: markRaw(advertRef.value),
+    edit: markRaw(advertEditRef.value),
+    fid: 1
   },
   {
     name: '楼层组件',
     icon: 'iconfont iconshangpinliebiaopc',
     enabled: true,
     id: 10,
-    ...createComponentMap('floor')
+    components: markRaw(floorRef.value),
+    edit: markRaw(floorEditRef.value),
+    fid: 1
   },
   {
     name: '商品组件',
     icon: 'iconfont icona-shangpintuijianpc30',
     enabled: true,
     id: 11,
-    ...createComponentMap('goods')
+    components: markRaw(goodsRef.value),
+    edit: markRaw(goodsEditRef.value),
+    fid: 1
   },
   {
     name: '多商品组',
     icon: 'iconfont iconduoshangpinzupc',
     enabled: true,
     id: 12,
-    ...createComponentMap('goodsList')
+    components: markRaw(goodsListRef.value),
+    edit: markRaw(goodsListEditRef.value),
+    fid: 1
   },
   {
     name: '发现组件',
     icon: 'iconfont iconjifenshangpinpc',
     enabled: true,
     id: 13,
-    ...createComponentMap('discover')
+    components: markRaw(discoverRef.value),
+    edit: markRaw(discoverEditRef.value),
+    fid: 1
   },
   {
     name: '热区',
     icon: 'iconfont iconrequpc',
     enabled: true,
     id: 14,
-    ...createComponentMap('hot')
+    components: markRaw(hotRef.value),
+    edit: markRaw(hotEditRef.value),
+    fid: 1
   },
   {
     name: '富文本',
     icon: 'iconfont iconfuwenbenpc',
     enabled: true,
     id: 15,
-    ...createComponentMap('editordiy')
+    components: markRaw(editordiyRef.value),
+    edit: markRaw(editordiyEditRef.value),
+    fid: 1
   },
   {
     name: '辅助空白',
     icon: 'iconfont iconfuzhukongbaipc',
     enabled: true,
     id: 16,
-    ...createComponentMap('blank')
+    components: markRaw(blankRef.value),
+    edit: markRaw(blankEditRef.value),
+    fid: 1
   },
   {
     name: '辅助线',
     icon: 'iconfont iconfuzhuxianpc',
     enabled: true,
     id: 17,
-    ...createComponentMap('border')
+    components: markRaw(borderRef.value),
+    edit: markRaw(borderEditRef.value),
+    fid: 1
   }
 ];
 
-/**
- * 加载所有组件
- * @returns 组件配置列表
- */
-export async function loadDiyComponents(): Promise<any[]> {
-  const loadPromises = componentImportConfigs
-    .filter((config: any) => config.enabled !== false)
-    .map(async (config: any) => {
-      try {
-        const [pageModule, editModule] = await Promise.all([import(/* @vite-ignore */ config.pagePath), import(/* @vite-ignore */ config.editPath)]);
-        return {
-          name: config.name,
-          icon: config.icon,
-          fid: config.fid,
-          id: config.id,
-          components: markRaw(pageModule.default),
-          edit: markRaw(editModule.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/diy/pccomponents/pages/head.vue

@@ -629,7 +629,7 @@ const warpCss = computed(() => {
 
   // 头部
   .head-pages {
-    width: 1200px;
+    width: 100%;
     margin: 0 auto;
     background-size: 100% 100%;
     background-repeat: no-repeat;

src/views/diy/pcdiy.vue

@@ -8,7 +8,7 @@
 
 <script setup name="Index" lang="ts">
 import { pcLookDiy } from '@/api/diy/index';
-import { loadDiyComponents, getComponentGroups } from '@/views/diy/pccomponents/index';
+import { getComponentGroups } from '@/views/diy/pccomponents/index';
 
 const componentList = ref<any>([]);
 const collapse = ref<any>([]);
@@ -18,16 +18,15 @@ const query = route.query;
 const formData = ref<any>({});
 
 onMounted(() => {
-  loadComponents();
   if (query.id) {
     id.value = query.id;
   }
+  loadComponents();
 });
 
 // 加载组件
 const loadComponents = async () => {
-  const components = await loadDiyComponents();
-  collapse.value = getComponentGroups(components);
+  collapse.value = getComponentGroups();
   if (id.value) {
     pcLookDiy(id.value).then((res) => {
       if (res.code == 200) {