feat(app): 生产环境mock、功能组件、路由完善

Author: JS-banana

config/constant.ts

@@ -21,7 +21,8 @@ export const MOCK_API_BASE_URL = '/mock/api';
 export const MOCK_API_TARGET_URL = 'http://localhost:3000';
 
 // iconfontUrl
-export const ICONFONTURL = '//at.alicdn.com/t/font_2927003_tz5qryon1k.js';
+// export const ICONFONTURL = '//at.alicdn.com/t/font_2927003_tz5qryon1k.js';
+export const ICONFONTURL = '//at.alicdn.com/t/font_3004192_9jmc1z9neiw.js'; // 去色版
 
 // 包依赖分析
 export const ANALYSIS = false;

config/vite/plugin/mock.ts

@@ -9,9 +9,13 @@ export function configMockPlugin(isBuild: boolean) {
     ignore: /^\_/,
     mockPath: 'mock',
     localEnabled: !isBuild,
-    prodEnabled: true,
+    prodEnabled: isBuild, // 为了演示，线上开启 mock
+    // 开发环境无需关系
+    // injectCode 只受prodEnabled影响
+    // https://github.com/anncwb/vite-plugin-mock/issues/9
+    // 下面这段代码会被注入 main.ts
     injectCode: `
-       import { setupProdMockServer } from '../mock/_createProductionServer';
+       import { setupProdMockServer } from '../mock/_createProdMockServer';
  
        setupProdMockServer();
        `,

src/App.vue

@@ -9,5 +9,12 @@
   import zhCN from 'ant-design-vue/es/locale/zh_CN';
   import { useTitle } from '/@/hooks/useTitle';
 
+  // date-picker 国际化失效问题
+  // 引入dist下的文件：import 'moment/dist/locale/zh-cn'
+  // 确保 moment版本一致
+  import moment from 'moment';
+  import 'moment/dist/locale/zh-cn';
+  moment.locale('zh_CN');
+
   useTitle();
 </script>

src/components.d.ts

@@ -20,6 +20,7 @@ declare module 'vue' {
     AMenu: typeof import('ant-design-vue/es')['Menu'];
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem'];
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm'];
+    ARangePicker: typeof import('ant-design-vue/es')['RangePicker'];
     AResult: typeof import('ant-design-vue/es')['Result'];
     ARow: typeof import('ant-design-vue/es')['Row'];
     ASelect: typeof import('ant-design-vue/es')['Select'];

src/components/Table/index.vue

@@ -19,6 +19,7 @@
       :pagination="pagination"
       :loading="loading"
       @change="handleTableChange"
+      :scroll="scroll"
     >
       <!-- slot 写法自定义 操作列 -->
       <!-- <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
@@ -71,6 +72,7 @@
       'items' /* Filter筛选列组件：包含的项 */,
       'model' /* Filter筛选列组件：form model */,
       'resKey',
+      'scroll',
     ],
     // emits: ['onSearch'],
     setup(props) {

src/enums/authEnum.ts

@@ -24,20 +24,4 @@ export enum AuthEnum {
   role_update = '/v1/role/update',
   // 删除角色
   role_delete = '/v1/role/delete',
-
-  /**
-   * 合约管理
-   */
-  // 新增合约
-  contract_create = '/v1/contract/deploy',
-  // 查看详情
-  contract_detail = '/v1/contract/detail',
-
-  /**
-   * 浏览器
-   */
-  // 区块信息
-  explorer_blockList = '/v1/explorer/block',
-  // 交易信息
-  explorer_transactionList = '/v1/explorer/transactionListByAllBlock',
 }

src/layouts/BasicLayout.vue

@@ -78,7 +78,7 @@
   import { usePermissioStore } from '/@/store/modules/permission';
   import { useBreadcrumbTitle } from '../hooks/useBreadcrumbTitle';
   import { APP_TITLE } from '../../config/constant';
-  import prolayoutSetting from './constant';
+  import prolayoutSetting, { onlySideMenuPath } from './constant';
 
   import type { BasicLayoutProps } from '@ant-design-vue/pro-layout';
   import type { RouteContextProps } from '@ant-design-vue/pro-layout';
@@ -96,8 +96,11 @@
   onUnmounted(() => {
     permissioStore.resetState();
   });
-
-  const menuData = clearMenuItem(router.getRoutes()).filter((n) => n.path.startsWith('/app/'));
+  // 标准写法参考官方文档 https://github.com/vueComponent/pro-layout
+  // 这里我是根据自身需求在导航栏菜单只展示指定路由
+  const menuData = clearMenuItem(router.getRoutes()).filter((n) =>
+    onlySideMenuPath.includes(n.path),
+  );
 
   const state = reactive<Omit<RouteContextProps, 'menuData'>>({
     collapsed: false, // default value

src/layouts/constant.ts

@@ -31,3 +31,5 @@ const prolayoutSetting: Omit<BasicLayoutProps, 'menuData'> = {
   iconfontUrl: ICONFONTURL,
 };
 export default prolayoutSetting;
+
+export const onlySideMenuPath = ['/app/home', '/app/website', '/app/others'];

src/router/README.md

@@ -2,7 +2,7 @@ import BasicLayout from '/@/layouts/BasicLayout.vue';
 import BlankLayout from '/@/layouts/BlankLayout.vue';
 import type { RouteRecordRaw } from 'vue-router';
 
-export const accessRoutes = [
+export const accessRoutes: RouteRecordRaw[] = [
   {
     path: '/app',
     name: 'app',
@@ -32,16 +32,29 @@ export const accessRoutes = [
         },
       },
       {
-        path: '/app/page2',
-        name: 'page2',
-        component: () => import('/@/views/page2/index.vue'),
-        redirect: '/app/page2/index',
+        path: '/app/others',
+        name: 'others',
+        component: BlankLayout,
+        // redirect: '/app/others/index',
         meta: {
           title: '其他菜单',
-          keepAlive: true,
-          icon: 'heyueguanli',
-          auth: ['page2'],
+          icon: 'xitongrizhi',
+          auth: ['others'],
         },
+        children: [
+          {
+            path: '/app/others/about',
+            name: 'about',
+            component: () => import('/@/views/others/about/index.vue'),
+            meta: { title: '关于', keepAlive: true, breadcrumb: true },
+          },
+          {
+            path: '/app/others/antdv',
+            name: 'antdv',
+            component: () => import('/@/views/others/antdv/index.vue'),
+            meta: { title: '组件', keepAlive: true, breadcrumb: true },
+          },
+        ],
       },
       {
         path: '/sys/account',