refactor(BasicLayout): 重构布局组件，删除pro-layout依赖，fix主题变量问题，包优化

Author: sunss

config/vite/optimizer.ts

@@ -1,8 +1,12 @@
 const vendorLibs: { match: string[]; output: string }[] = [
-  // {
-  //   match: ['xlsx'],
-  //   output: 'xlsx',
-  // },
+  {
+    match: ['ant-design-vue'],
+    output: 'antdv',
+  },
+  {
+    match: ['echarts'],
+    output: 'echarts',
+  },
 ];
 
 // @ts-ignore

package.json

@@ -27,8 +27,8 @@
     "serve": "npm run dev",
     "dev": "vite",
     "build": "vite build",
-    "build:check":"vue-tsc --noEmit && vite build",
-    "build:github":"vite build --base=/vite-vue3-ts/",
+    "build:check": "vue-tsc --noEmit && vite build",
+    "build:github": "vite build --base=/vite-vue3-ts/",
     "build:no-cache": "yarn clean:cache && npm run build",
     "preview": "vite preview",
     "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
@@ -40,7 +40,6 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@ant-design-vue/pro-layout": "^3.1.3",
     "@ant-design/icons-vue": "^6.0.1",
     "@vueuse/core": "^6.8.0",
     "@vueuse/head": "^0.6.0",

pnpm-lock.yaml

@@ -5,7 +5,6 @@
 declare module 'vue' {
   export interface GlobalComponents {
     AAlert: typeof import('ant-design-vue/es')['Alert'];
-    AAvatar: typeof import('ant-design-vue/es')['Avatar'];
     ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb'];
     AButton: typeof import('ant-design-vue/es')['Button'];
     ACard: typeof import('ant-design-vue/es')['Card'];
@@ -18,18 +17,17 @@ declare module 'vue' {
     AFormItem: typeof import('ant-design-vue/es')['FormItem'];
     AInput: typeof import('ant-design-vue/es')['Input'];
     AInputSearch: typeof import('ant-design-vue/es')['InputSearch'];
+    ALayout: typeof import('ant-design-vue/es')['Layout'];
+    ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent'];
+    ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader'];
     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'];
     ASpace: typeof import('ant-design-vue/es')['Space'];
-    ASpin: typeof import('ant-design-vue/es')['Spin'];
     ATable: typeof import('ant-design-vue/es')['Table'];
-    ATabPane: typeof import('ant-design-vue/es')['TabPane'];
-    ATabs: typeof import('ant-design-vue/es')['Tabs'];
     Icon: typeof import('./components/Icon/index.vue')['default'];
     Modal: typeof import('./components/Modal/index.vue')['default'];
     Table: typeof import('./components/Table/index.vue')['default'];

src/components.d.ts

@@ -0,0 +1,49 @@
+<template>
+  <a-layout-header class="header">
+    <div class="logo-wrap">
+      <router-link :to="{ path: '/' }">
+        <img :src="logo" class="logo" />
+        <h1 class="title"> SimpleChain联盟链 </h1>
+        <!-- <span class="subTitle">基础版</span> -->
+      </router-link>
+    </div>
+    <div>
+      <RightContent />
+    </div>
+  </a-layout-header>
+</template>
+<script setup lang="ts">
+  import RightContent from './RightContent.vue';
+  import logo from '/@/assets/images/logo.png';
+</script>
+<style lang="less" scoped>
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    height: 80px;
+    padding: 0 16px;
+    background: #ffffff;
+    box-shadow: 0 1px 4px #00152914;
+    z-index: 1;
+    .logo-wrap {
+      height: 100%;
+      a {
+        display: flex;
+        align-items: center;
+        height: 100%;
+      }
+      .title {
+        margin: 0;
+        margin-left: 12px;
+        font-size: 18px;
+        color: #000000;
+      }
+      .logo {
+        width: 48px;
+        height: 48px;
+      }
+    }
+  }
+</style>

src/layouts/BasicLayout.vue

@@ -11,7 +11,7 @@
           </a-menu-item>
         </a-menu>
       </template>
-      <Space class="rowCC" align="baseline" direction="horizontal">
+      <Space class="wrap" align="baseline" direction="horizontal">
         <Icon align="2px" type="xitongshezhi" />
         <span class="setting">系统设置</span>
         <Icon align="2px" type="xialajiantou" />
@@ -24,13 +24,22 @@
   import { Space } from 'ant-design-vue';
   import { useUserStore } from '/@/store/modules/user';
   import { navs as myNavs } from './constant';
+  import { usePermissioStore } from '/@/store/modules/permission';
 
   const store = useUserStore();
+  const permissioStore = usePermissioStore();
   const router = useRouter();
 
   const navs = ref(myNavs);
   const selectedKeys = ref<string[]>([]);
 
+  watchEffect(() => {
+    const modules = permissioStore.getModules;
+    if (modules.length && permissioStore.getIsAdmin === 0) {
+      navs.value = unref(navs).filter((n) => (n.auth ? modules.includes(n.auth) : true));
+    }
+  });
+
   watchEffect(() => {
     if (router.currentRoute) {
       const matched = router.currentRoute.value.matched.concat();
@@ -51,7 +60,7 @@
     display: flex;
     justify-content: center;
     padding-right: 16px;
-    .rowCC {
+    .wrap {
       height: 55px;
 
       .setting {