diy位子

src/api/diy/index.ts

@@ -70,3 +70,11 @@ export function pcDelDiy(id: any) {
     method: 'delete'
   });
 }
+
+// pc自定义详情
+export function pcLookDiy(id: any) {
+  return request({
+    url: '/mall/diyPcPage/' + id,
+    method: 'get'
+  });
+}

src/views/diy/pcEdit.vue

@@ -182,186 +182,28 @@
 import { pcAddDiy } from '@/api/diy/index';
 import icon from '@/components/icon/index.vue';
 import draggable from 'vuedraggable';
+import { loadDiyComponents, getComponentGroups } from '@/views/diy/pccomponents/index';
 
 import usePcdiyStore from '@/store/modules/pcdiy';
 const diyStore = usePcdiyStore();
 const route = useRoute();
 const query = route.query;
-// 头部组件
-import head from '@/views/diy/pcPages/head.vue';
-const headRef = shallowRef(head);
-import headEdit from '@/views/diy/pcEdit/head-edit.vue';
-const headEditRef = shallowRef(headEdit);
-//文本标题
-import textTitle from '@/views/diy/pcPages/textTitle.vue';
-const ctextTitleRef = shallowRef(textTitle);
-import textTitleEdit from '@/views/diy/pcEdit/textTitle-edit.vue';
-const textTitleEditRef = shallowRef(textTitleEdit);
-//图文导航
-import navigation from '@/views/diy/pcPages/navigation.vue';
-const navigationRef = shallowRef(navigation);
-import navigationEdit from '@/views/diy/pcEdit/navigation-edit.vue';
-const navigationEditRef = shallowRef(navigationEdit);
-//图片魔方
-import imageCube from '@/views/diy/pcPages/imageCube.vue';
-const imageCubeRef = shallowRef(imageCube);
-import imageCubeEdit from '@/views/diy/pcEdit/imageCube-edit.vue';
-const imageCubeEditRef = shallowRef(imageCubeEdit);
-//活动魔方
-import activity from '@/views/diy/pcPages/activity.vue';
-const activityRef = shallowRef(activity);
-import activityEdit from '@/views/diy/pcEdit/activity-edit.vue';
-const activityEditRef = shallowRef(activityEdit);
-//轮播图
-import carousel from '@/views/diy/pcPages/carousel.vue';
-const carouselRef = shallowRef(carousel);
-import carouselEdit from '@/views/diy/pcEdit/carousel-edit.vue';
-const carouselEditRef = shallowRef(carouselEdit);
-//文章咨询
-import article from '@/views/diy/pcPages/article.vue';
-const articleRef = shallowRef(article);
-import articleEdit from '@/views/diy/pcEdit/article-edit.vue';
-const articleEditRef = shallowRef(articleEdit);
-//品牌组件
-import brand from '@/views/diy/pcPages/brand.vue';
-const brandeRef = shallowRef(brand);
-import brandEdit from '@/views/diy/pcEdit/brand-edit.vue';
-const brandEditRef = shallowRef(brandEdit);
-//图文广告
-import advert from '@/views/diy/pcPages/advert.vue';
-const advertRef = shallowRef(advert);
-import advertEdit from '@/views/diy/pcEdit/advert-edit.vue';
-const advertEditRef = shallowRef(advertEdit);
-//楼层组件
-import floor from '@/views/diy/pcPages/floor.vue';
-const floorRef = shallowRef(floor);
-import floorEdit from '@/views/diy/pcEdit/floor-edit.vue';
-const floorEditRef = shallowRef(floorEdit);
-//商品组件
-import goods from '@/views/diy/pcPages/goods.vue';
-const goodsRef = shallowRef(goods);
-import goodsEdit from '@/views/diy/pcEdit/goods-edit.vue';
-const goodsEditRef = shallowRef(goodsEdit);
-//多商品组
-import goodsList from '@/views/diy/pcPages/goodsList.vue';
-const goodsListRef = shallowRef(goodsList);
-import goodsListEdit from '@/views/diy/pcEdit/goodsList-edit.vue';
-const goodsListEditRef = shallowRef(goodsListEdit);
-//发现组件
-import discover from '@/views/diy/pcPages/discover.vue';
-const discoverRef = shallowRef(discover);
-import discoverEdit from '@/views/diy/pcEdit/discover-edit.vue';
-const discoverEditRef = shallowRef(discoverEdit);
+
+onMounted(() => {
+  loadComponents();
+});
+
+// 加载组件
+const loadComponents = async () => {
+  const components = await loadDiyComponents();
+  collapse.value = getComponentGroups(components);
+};
 
 const itemKey = ref<any>(0);
 //左边得组件
 const uniqueIdCounter = ref<any>(0);
 const activeNames = ref<any>([0]);
-
-const collapse = ref<any>([
-  {
-    name: '基础组件',
-    list: [
-      {
-        name: '头部组件',
-        icon: 'iconfont iconfuwenbenpc',
-        id: 1,
-        components: markRaw(headRef.value),
-        edit: markRaw(headEditRef.value)
-      },
-      {
-        name: '文本标题',
-        icon: 'iconfont iconbiaotipc',
-        id: 2,
-        components: markRaw(ctextTitleRef.value),
-        edit: markRaw(textTitleEditRef.value)
-      },
-      {
-        name: '图文导航',
-        icon: 'iconfont icontuwendaohangpc',
-        id: 3,
-        components: markRaw(navigationRef.value),
-        edit: markRaw(navigationEditRef.value)
-      },
-      {
-        name: '图片魔方',
-        icon: 'iconfont iconmofangpc',
-        id: 4,
-        components: markRaw(imageCubeRef.value),
-        edit: markRaw(imageCubeEditRef.value)
-      },
-      {
-        name: '活动魔方',
-        icon: 'iconfont iconmofangpc',
-        id: 5,
-        // components: markRaw(activityRef.value),
-        // edit: markRaw(activityEditRef.value)
-      },
-      {
-        name: '轮播图',
-        icon: 'iconfont icona-tupianzhanbopc302',
-        id: 6,
-        components: markRaw(carouselRef.value),
-        edit: markRaw(carouselEditRef.value)
-      },
-      {
-        name: '文章咨询',
-        icon: 'iconfont icongonggaopc',
-        id: 7,
-        components: markRaw(articleRef.value),
-        edit: markRaw(articleEditRef.value)
-      },
-      {
-        name: '品牌组件',
-        icon: 'iconfont iconmiaoshashangpin',
-        id: 8,
-        components: markRaw(brandeRef.value),
-        edit: markRaw(brandEditRef.value)
-      },
-      {
-        name: '图文广告',
-        icon: 'iconfont icontupiandaohangpc',
-        id: 9,
-        components: markRaw(advertRef.value),
-        edit: markRaw(advertEditRef.value)
-      },
-      {
-        name: '楼层组件',
-        icon: 'iconfont iconshangpinliebiaopc',
-        id: 10,
-        components: markRaw(floorRef.value),
-        edit: markRaw(floorEditRef.value)
-      },
-      {
-        name: '商品组件',
-        icon: 'iconfont icona-shangpintuijianpc30',
-        id: 11,
-        components: markRaw(goodsRef.value),
-        edit: markRaw(goodsEditRef.value)
-      },
-      {
-        name: '多商品组',
-        icon: 'iconfont iconduoshangpinzupc',
-        id: 12,
-        components: markRaw(goodsListRef.value),
-        edit: markRaw(goodsListEditRef.value)
-      },
-      {
-        name: '发现组件',
-        icon: 'iconfont iconrequpc',
-        id: 13,
-        components: markRaw(discoverRef.value),
-        edit: markRaw(discoverEditRef.value)
-      }
-    ]
-  }
-]);
-
-const componentList = ref<any>([
-  // {
-  //   components: ctextTitleRef
-  // }
-]);
+const collapse = ref<any>([]);
 const handleChange = (val: string[]) => {};
 // 返回上一页
 const goBack = () => {};
@@ -385,6 +227,10 @@ const save = () => {
   api(datas)
     .then((res: any) => {
       if (res.code == 200) {
+        ElMessage({
+          message: '保存成功~',
+          type: 'success'
+        });
       }
     })
     .catch(() => {});

src/views/diy/pccomponents/index.ts

@@ -1,89 +1,151 @@
-// @/config/diy-components.ts
-import { defineAsyncComponent, type Component } from 'vue';
-
+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) => ({
-  pages: defineAsyncComponent(() => import(`@/views/diy/pccomponents/pages/${name}.vue`)),
-  edit: defineAsyncComponent(() => import(`@/views/diy/pccomponents/edit/${name}-edit.vue`))
+  pagePath: `./pages/${name}.vue`,
+  editPath: `./edit/${name}-edit.vue`
 });
 
 // 组件列表配置
-export const componentRegistry: any[] = [
+export const componentImportConfigs: any = [
   {
     name: '头部组件',
     icon: 'iconfont iconfuwenbenpc',
     id: 1,
+    enabled: true,
     ...createComponentMap('head')
   },
   {
     name: '文本标题',
     icon: 'iconfont iconbiaotipc',
     id: 2,
+    enabled: true,
     ...createComponentMap('textTitle')
   },
   {
     name: '图文导航',
     icon: 'iconfont icontuwendaohangpc',
     id: 3,
+    enabled: true,
     ...createComponentMap('navigation')
   },
   {
     name: '图片魔方',
     icon: 'iconfont iconmofangpc',
     id: 4,
+    enabled: true,
     ...createComponentMap('imageCube')
   },
   {
     name: '活动魔方',
     icon: 'iconfont iconmofangpc',
+    enabled: true,
     id: 5
   },
   {
     name: '轮播图',
     icon: 'iconfont icona-tupianzhanbopc302',
+    enabled: true,
     id: 6,
     ...createComponentMap('carousel')
   },
   {
     name: '文章咨询',
     icon: 'iconfont icongonggaopc',
+    enabled: true,
     id: 7,
     ...createComponentMap('article')
   },
   {
     name: '品牌组件',
     icon: 'iconfont iconmiaoshashangpin',
+    enabled: true,
     id: 8,
     ...createComponentMap('brand')
   },
   {
     name: '图文广告',
     icon: 'iconfont icontupiandaohangpc',
+    enabled: true,
     id: 9,
     ...createComponentMap('advert')
   },
   {
     name: '楼层组件',
     icon: 'iconfont iconshangpinliebiaopc',
+    enabled: true,
     id: 10,
     ...createComponentMap('floor')
   },
   {
     name: '商品组件',
     icon: 'iconfont icona-shangpintuijianpc30',
+    enabled: true,
     id: 11,
     ...createComponentMap('goods')
   },
   {
     name: '多商品组',
     icon: 'iconfont iconduoshangpinzupc',
+    enabled: true,
     id: 12,
     ...createComponentMap('goodsList')
   },
   {
     name: '发现组件',
     icon: 'iconfont iconrequpc',
+    enabled: true,
     id: 13,
     ...createComponentMap('discover')
   }
 ];
+
+/**
+ * 加载所有组件
+ * @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, editModule] = await Promise.all([import(/* @vite-ignore */ config.pagePath), import(/* @vite-ignore */ config.editPath)]);
+        return {
+          name: config.name,
+          icon: config.icon,
+          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[] {
+  return [
+    {
+      name: '基础组件',
+      list: components
+    }
+    // 后续可扩展多个分组，如：营销组件、商品组件等
+  ];
+}