fix: router push

apps/web-antd/src/views/mall/home/modules/operation-data-card.vue

@@ -19,39 +19,59 @@ const router = useRouter();
 interface DataItem {
   name: string;
   value: number;
-  routerName: string;
+  routerPath: string;
   prefix?: string;
   decimals?: number;
 }
 
 /** 数据 */
 const data = reactive({
-  orderUndelivered: { name: '待发货订单', value: 0, routerName: 'TradeOrder' },
+  orderUndelivered: {
+    name: '待发货订单',
+    value: 0,
+    routerPath: '/mall/trade/order',
+  },
   orderAfterSaleApply: {
     name: '退款中订单',
     value: 0,
-    routerName: 'TradeAfterSale',
+    routerPath: '/mall/trade/after-sale',
+  },
+  orderWaitePickUp: {
+    name: '待核销订单',
+    value: 0,
+    routerPath: '/mall/trade/delivery/pick-up-store/pick-up-order',
+  },
+  productAlertStock: {
+    name: '库存预警',
+    value: 0,
+    routerPath: '/mall/product/spu',
+  },
+  productForSale: {
+    name: '上架商品',
+    value: 0,
+    routerPath: '/mall/product/spu',
+  },
+  productInWarehouse: {
+    name: '仓库商品',
+    value: 0,
+    routerPath: '/mall/product/spu',
   },
-  orderWaitePickUp: { name: '待核销订单', value: 0, routerName: 'TradeOrder' },
-  productAlertStock: { name: '库存预警', value: 0, routerName: 'ProductSpu' },
-  productForSale: { name: '上架商品', value: 0, routerName: 'ProductSpu' },
-  productInWarehouse: { name: '仓库商品', value: 0, routerName: 'ProductSpu' },
   withdrawAuditing: {
     name: '提现待审核',
     value: 0,
-    routerName: 'TradeBrokerageWithdraw',
+    routerPath: '/mall/trade/brokerage/brokerage-withdraw',
   },
   rechargePrice: {
     name: '账户充值',
     value: 0,
     prefix: '￥',
     decimals: 2,
-    routerName: 'PayWalletRecharge',
+    routerPath: '/pay/wallet/wallet-balance',
   },
 });
 
 /** 查询订单数据 */
-const getOrderData = async () => {
+async function getOrderData() {
   const orderCount = await TradeStatisticsApi.getOrderCount();
   if (orderCount.undelivered) {
     data.orderUndelivered.value = orderCount.undelivered;
@@ -65,27 +85,26 @@ const getOrderData = async () => {
   if (orderCount.auditingWithdraw) {
     data.withdrawAuditing.value = orderCount.auditingWithdraw;
   }
-};
+}
 
 /** 查询商品数据 */
-const getProductData = async () => {
+async function getProductData() {
   const productCount = await ProductSpuApi.getTabsCount();
   data.productForSale.value = productCount['0'] || 0;
   data.productInWarehouse.value = productCount['1'] || 0;
   data.productAlertStock.value = productCount['3'] || 0;
-};
+}
 
 /** 查询钱包充值数据 */
-const getWalletRechargeData = async () => {
+async function getWalletRechargeData() {
   const paySummary = await PayStatisticsApi.getWalletRechargePrice();
   data.rechargePrice.value = paySummary.rechargePrice;
-};
+}
 
 /** 跳转到对应页面 */
-// TODO @xingyu：貌似通过 name 的方式，都无法跳转，找不到路由？
+function handleClick(routerPath: string) {
-const handleClick = (routerName: string) => {
+  router.push({ path: routerPath });
-  router.push({ name: routerName });
+}
-};
 
 /** 激活时 */
 onActivated(() => {
@@ -109,7 +128,7 @@ onMounted(() => {
         v-for="(item, key) in data"
         :key="key"
         class="flex h-20 w-[20%] cursor-pointer flex-col items-center justify-center gap-2"
-        @click="handleClick(item.routerName)"
+        @click="handleClick(item.routerPath)"
       >
         <CountTo
           :decimals="(item as DataItem).decimals ?? 0"

apps/web-ele/package.json

@@ -44,6 +44,7 @@
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vueuse/core": "catalog:",
+    "@vueuse/integrations": "catalog:",
     "cropperjs": "catalog:",
     "dayjs": "catalog:",
     "element-plus": "catalog:",

apps/web-ele/src/components/diy-editor/index.vue

@@ -7,6 +7,7 @@ import { IFrame } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep, isEmpty, isString } from '@vben/utils';
 
+import { useQRCode } from '@vueuse/integrations/useQRCode';
 import {
   ElAside,
   ElButtonGroup,
@@ -32,7 +33,6 @@ import ComponentContainer from './components/component-container.vue';
 import ComponentLibrary from './components/component-library.vue';
 import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/navigation-bar/config';
 import { component as TAB_BAR_COMPONENT } from './components/mobile/tab-bar/config';
-
 /** 页面装修详情页 */
 defineOptions({
   name: 'DiyPageDetail',
@@ -58,6 +58,11 @@ const props = defineProps({
 // 工具栏操作
 const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue']);
 
+const qrcode = useQRCode(props.previewUrl, {
+  errorCorrectionLevel: 'H',
+  margin: 4,
+});
+
 // 左侧组件库
 const componentLibrary = ref();
 // 页面设置组件
@@ -497,7 +502,8 @@ onMounted(() => {
         />
         <div class="flex flex-col">
           <ElText>手机扫码预览</ElText>
-          <Qrcode :text="previewUrl" logo="/logo.gif" />
+          <img :src="qrcode" alt="qrcode" class="w-1/2" />
+          <!-- <Qrcode :text="previewUrl" logo="/logo.gif" /> -->
         </div>
       </div>
     </ElDialog>

apps/web-ele/src/router/routes/modules/diy.ts

@@ -1,41 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-// TODO @chihuo：这个合并到 mall.ts 里
-const routes: RouteRecordRaw[] = [
-  {
-    path: '/diy',
-    name: 'DiyCenter',
-    meta: {
-      title: '营销中心',
-      icon: 'lucide:shopping-bag',
-      keepAlive: true,
-      hideInMenu: true,
-    },
-    children: [
-      {
-        path: String.raw`template/decorate/:id(\d+)`,
-        name: 'DiyTemplateDecorate',
-        meta: {
-          title: '模板装修',
-          activePath: '/mall/promotion/diy-template/diy-template',
-        },
-        component: () =>
-          import('#/views/mall/promotion/diy/template/modules/decorate.vue'),
-      },
-      {
-        path: 'page/decorate/:id',
-        name: 'DiyPageDecorate',
-        meta: {
-          title: '页面装修',
-          noCache: false,
-          hidden: true,
-          activePath: '/mall/promotion/diy-template/diy-page',
-        },
-        component: () =>
-          import('#/views/mall/promotion/diy/page/modules/decorate.vue'),
-      },
-    ],
-  },
-];
-
-export default routes;

apps/web-ele/src/router/routes/modules/mall.ts

@@ -80,6 +80,40 @@ const routes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    path: '/diy',
+    name: 'DiyCenter',
+    meta: {
+      title: '营销中心',
+      icon: 'lucide:shopping-bag',
+      keepAlive: true,
+      hideInMenu: true,
+    },
+    children: [
+      {
+        path: String.raw`template/decorate/:id(\d+)`,
+        name: 'DiyTemplateDecorate',
+        meta: {
+          title: '模板装修',
+          activePath: '/mall/promotion/diy-template/diy-template',
+        },
+        component: () =>
+          import('#/views/mall/promotion/diy/template/modules/decorate.vue'),
+      },
+      {
+        path: 'page/decorate/:id',
+        name: 'DiyPageDecorate',
+        meta: {
+          title: '页面装修',
+          noCache: false,
+          hidden: true,
+          activePath: '/mall/promotion/diy-template/diy-page',
+        },
+        component: () =>
+          import('#/views/mall/promotion/diy/page/modules/decorate.vue'),
+      },
+    ],
+  },
 ];
 
 export default routes;

apps/web-ele/src/views/mall/home/modules/operation-data-card.vue

@@ -19,39 +19,59 @@ const router = useRouter();
 interface DataItem {
   name: string;
   value: number;
-  routerName: string;
+  routerPath: string;
   prefix?: string;
   decimals?: number;
 }
 
 /** 数据 */
 const data = reactive({
-  orderUndelivered: { name: '待发货订单', value: 0, routerName: 'TradeOrder' },
+  orderUndelivered: {
+    name: '待发货订单',
+    value: 0,
+    routerPath: '/mall/trade/order',
+  },
   orderAfterSaleApply: {
     name: '退款中订单',
     value: 0,
-    routerName: 'TradeAfterSale',
+    routerPath: '/mall/trade/after-sale',
+  },
+  orderWaitePickUp: {
+    name: '待核销订单',
+    value: 0,
+    routerPath: '/mall/trade/delivery/pick-up-store/pick-up-order',
+  },
+  productAlertStock: {
+    name: '库存预警',
+    value: 0,
+    routerPath: '/mall/product/spu',
+  },
+  productForSale: {
+    name: '上架商品',
+    value: 0,
+    routerPath: '/mall/product/spu',
+  },
+  productInWarehouse: {
+    name: '仓库商品',
+    value: 0,
+    routerPath: '/mall/product/spu',
   },
-  orderWaitePickUp: { name: '待核销订单', value: 0, routerName: 'TradeOrder' },
-  productAlertStock: { name: '库存预警', value: 0, routerName: 'ProductSpu' },
-  productForSale: { name: '上架商品', value: 0, routerName: 'ProductSpu' },
-  productInWarehouse: { name: '仓库商品', value: 0, routerName: 'ProductSpu' },
   withdrawAuditing: {
     name: '提现待审核',
     value: 0,
-    routerName: 'TradeBrokerageWithdraw',
+    routerPath: '/mall/trade/brokerage/brokerage-withdraw',
   },
   rechargePrice: {
     name: '账户充值',
     value: 0,
     prefix: '￥',
     decimals: 2,
-    routerName: 'PayWalletRecharge',
+    routerPath: '/pay/wallet/wallet-balance',
   },
 });
 
 /** 查询订单数据 */
-const getOrderData = async () => {
+async function getOrderData() {
   const orderCount = await TradeStatisticsApi.getOrderCount();
   if (orderCount.undelivered) {
     data.orderUndelivered.value = orderCount.undelivered;
@@ -65,27 +85,26 @@ const getOrderData = async () => {
   if (orderCount.auditingWithdraw) {
     data.withdrawAuditing.value = orderCount.auditingWithdraw;
   }
-};
+}
 
 /** 查询商品数据 */
-const getProductData = async () => {
+async function getProductData() {
   const productCount = await ProductSpuApi.getTabsCount();
   data.productForSale.value = productCount['0'] || 0;
   data.productInWarehouse.value = productCount['1'] || 0;
   data.productAlertStock.value = productCount['3'] || 0;
-};
+}
 
 /** 查询钱包充值数据 */
-const getWalletRechargeData = async () => {
+async function getWalletRechargeData() {
   const paySummary = await PayStatisticsApi.getWalletRechargePrice();
   data.rechargePrice.value = paySummary.rechargePrice;
-};
+}
 
 /** 跳转到对应页面 */
-// TODO @xingyu：貌似通过 name 的方式，都无法跳转，找不到路由？
+function handleClick(routerPath: string) {
-const handleClick = (routerName: string) => {
+  router.push({ path: routerPath });
-  router.push({ name: routerName });
+}
-};
 
 /** 激活时 */
 onActivated(() => {
@@ -112,7 +131,7 @@ onMounted(() => {
         v-for="(item, key) in data"
         :key="key"
         class="flex h-20 w-[20%] cursor-pointer flex-col items-center justify-center gap-2"
-        @click="handleClick(item.routerName)"
+        @click="handleClick(item.routerPath)"
       >
         <CountTo
           :decimals="(item as DataItem).decimals ?? 0"

apps/web-ele/src/views/mall/promotion/diy/page/index.vue

@@ -39,7 +39,6 @@ function handleEdit(row: MallDiyPageApi.DiyPage) {
   formModalApi.setData(row).open();
 }
 
-// TODO @霖：貌似跳转不过去；
 /** 装修页面 */
 function handleDecorate(row: MallDiyPageApi.DiyPage) {
   push({ name: 'DiyPageDecorate', params: { id: row.id } });

apps/web-ele/src/views/mall/promotion/diy/page/modules/decorate.vue

@@ -7,6 +7,7 @@ import { useRoute } from 'vue-router';
 import { ElMessage } from 'element-plus';
 
 import * as DiyPageApi from '#/api/mall/promotion/diy/page';
+import DiyEditor from '#/components/diy-editor/index.vue';
 import { PAGE_LIBS } from '#/components/diy-editor/util';
 
 /** 装修页面表单 */
@@ -17,17 +18,17 @@ const formData = ref<MallDiyPageApi.DiyPage>();
 const formRef = ref(); // 表单 Ref
 
 // 获取详情
-const getPageDetail = async (id: any) => {
+async function getPageDetail(id: any) {
   formLoading.value = true;
   try {
     formData.value = await DiyPageApi.getDiyPageProperty(id);
   } finally {
     formLoading.value = false;
   }
-};
+}
 
 // 提交表单
-const submitForm = async () => {
+async function submitForm() {
   // 校验表单
   if (!formRef.value) return;
   // 提交请求
@@ -38,10 +39,10 @@ const submitForm = async () => {
   } finally {
     formLoading.value = false;
   }
-};
+}
 
 // 重置表单
-const resetForm = () => {
+function resetForm() {
   formData.value = {
     id: undefined,
     templateId: undefined,
@@ -51,7 +52,7 @@ const resetForm = () => {
     property: '',
   } as MallDiyPageApi.DiyPage;
   formRef.value?.resetFields();
-};
+}
 
 /** 初始化 */
 const route = useRoute();

pnpm-lock.yaml

@@ -911,6 +911,9 @@ importers:
       '@vueuse/core':
         specifier: 'catalog:'
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+      '@vueuse/integrations':
+        specifier: 'catalog:'
+        version: 13.9.0(async-validator@4.2.5)(axios@1.12.2)(focus-trap@7.6.5)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.22(typescript@5.9.3))
       cropperjs:
         specifier: 'catalog:'
         version: 1.6.2