refactor(projects): 细节优化

.env-config.ts

@@ -1,13 +1,5 @@
 /** 请求环境配置 */
-type ServiceEnv = Record<
+type ServiceEnv = Record<EnvType, EnvConfig>;
-  EnvType,
-  {
-    /** 请求地址 */
-    url: string;
-    /** 代理地址 */
-    proxy: string;
-  }
->;
 
 /** 环境配置 */
 const serviceEnvConfig: ServiceEnv = {
@@ -31,8 +23,8 @@ const serviceEnvConfig: ServiceEnv = {
  */
 export function getEnvConfig(env: ImportMetaEnv) {
   const { VITE_ENV_TYPE = 'dev' } = env;
-  const envConfig = {
+
-    http: serviceEnvConfig[VITE_ENV_TYPE]
+  const envConfig = serviceEnvConfig[VITE_ENV_TYPE];
-  };
+
   return envConfig;
 }

build/config/proxy.ts

@@ -1,21 +1,18 @@
 import type { ProxyOptions } from 'vite';
-import { getEnvConfig } from '../../.env-config';
 
 /**
  * 设置网络代理
- * @param viteEnv - vite环境描述
+ * @param isOpenProxy - 是否开启代理
+ * @param envConfig - env环境配置
  */
-export function createViteProxy(viteEnv: ImportMetaEnv) {
+export function createViteProxy(isOpenProxy: boolean, envConfig: EnvConfig) {
-  const isOpenProxy = viteEnv.VITE_HTTP_PROXY === 'true';
   if (!isOpenProxy) return undefined;
 
-  const { http } = getEnvConfig(viteEnv);
-
   const proxy: Record<string, string | ProxyOptions> = {
-    [http.proxy]: {
+    [envConfig.proxy]: {
-      target: http.url,
+      target: envConfig.url,
       changeOrigin: true,
-      rewrite: path => path.replace(new RegExp(`^${http.proxy}`), '')
+      rewrite: path => path.replace(new RegExp(`^${envConfig.proxy}`), '')
     }
   };
 

package.json

@@ -28,6 +28,8 @@
   "dependencies": {
     "@antv/g2plot": "^2.4.16",
     "@better-scroll/core": "^2.4.2",
+    "@soybeanjs/vue-admin-layout": "^1.0.2",
+    "@soybeanjs/vue-admin-tab": "^1.0.1",
     "@vueuse/core": "^8.3.1",
     "axios": "^0.27.2",
     "clipboard": "^2.0.10",
@@ -40,8 +42,6 @@
     "pinia": "^2.0.13",
     "print-js": "^1.6.0",
     "qs": "^6.10.3",
-    "soybean-admin-layout": "^1.0.4",
-    "soybean-admin-tab": "^1.2.3",
     "swiper": "^8.1.4",
     "ua-parser-js": "^1.0.2",
     "vditor": "^3.8.13",
@@ -67,7 +67,6 @@
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/tsconfig": "^0.1.3",
     "commitizen": "^4.2.4",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",

pnpm-lock.yaml

@@ -8,6 +8,8 @@ specifiers:
   '@commitlint/config-conventional': ^16.2.1
   '@iconify/json': ^2.1.33
   '@iconify/vue': ^3.2.1
+  '@soybeanjs/vue-admin-layout': ^1.0.2
+  '@soybeanjs/vue-admin-tab': ^1.0.1
   '@types/bmapgl': ^0.0.5
   '@types/crypto-js': ^4.1.1
   '@types/node': ^17.0.29
@@ -19,7 +21,6 @@ specifiers:
   '@vitejs/plugin-vue-jsx': ^1.3.10
   '@vue/eslint-config-prettier': ^7.0.0
   '@vue/eslint-config-typescript': ^10.0.0
-  '@vue/tsconfig': ^0.1.3
   '@vueuse/core': ^8.3.1
   axios: ^0.27.2
   clipboard: ^2.0.10
@@ -50,8 +51,6 @@ specifiers:
   qs: ^6.10.3
   rollup-plugin-visualizer: ^5.6.0
   sass: ^1.51.0
-  soybean-admin-layout: ^1.0.4
-  soybean-admin-tab: ^1.2.3
   swiper: ^8.1.4
   typescript: ^4.6.3
   ua-parser-js: ^1.0.2
@@ -76,6 +75,8 @@ specifiers:
 dependencies:
   '@antv/g2plot': 2.4.16
   '@better-scroll/core': registry.nlark.com/@better-scroll/core/2.4.2
+  '@soybeanjs/vue-admin-layout': 1.0.2_vue@3.2.33
+  '@soybeanjs/vue-admin-tab': 1.0.1_vue@3.2.33
   '@vueuse/core': 8.3.1_vue@3.2.33
   axios: 0.27.2
   clipboard: 2.0.10
@@ -88,8 +89,6 @@ dependencies:
   pinia: 2.0.13_typescript@4.6.3+vue@3.2.33
   print-js: 1.6.0
   qs: 6.10.3
-  soybean-admin-layout: 1.0.4_vue@3.2.33
-  soybean-admin-tab: 1.2.3_vue@3.2.33
   swiper: 8.1.4
   ua-parser-js: 1.0.2
   vditor: 3.8.13
@@ -115,7 +114,6 @@ devDependencies:
   '@vitejs/plugin-vue-jsx': 1.3.10
   '@vue/eslint-config-prettier': 7.0.0_eslint@8.14.0+prettier@2.6.2
   '@vue/eslint-config-typescript': 10.0.0_f5d04023b0e9c1203fb3ac493367e3ca
-  '@vue/tsconfig': 0.1.3_@types+node@17.0.29
   commitizen: 4.2.4
   cross-env: registry.nlark.com/cross-env/7.0.3
   cz-conventional-changelog: registry.nlark.com/cz-conventional-changelog/3.3.0
@@ -1031,6 +1029,37 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /@soybeanjs/vue-admin-layout/1.0.2_vue@3.2.33:
+    resolution: {integrity: sha512-6OnBEpabV121ChT1SHiSXhyv1QN+rkkdZt4pflrg8vOAmy2hbx935KtCsgXjw5ObGO/tYPkfQSs4gi0ZVgmpUw==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.6
+      vue: ^2.0.0 || >=3.0.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      '@unocss/reset': 0.31.17
+      colord: 2.9.2
+      css-render: 0.15.9
+      vue: 3.2.33
+      vue-demi: 0.12.5_vue@3.2.33
+    dev: false
+
+  /@soybeanjs/vue-admin-tab/1.0.1_vue@3.2.33:
+    resolution: {integrity: sha512-hy2xs1+Rb5/UkB1Fpm9Y4BeBO6jI92irh/BXq+rfivUMhWC0uJQpNs4eEhM8dqT2n/bWyU6dtCDJjfxETjqljA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.6
+      vue: ^2.0.0 || >=3.0.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      colord: 2.9.2
+      css-render: 0.15.9
+      vue: 3.2.33
+      vue-demi: 0.12.5_vue@3.2.33
+    dev: false
+
   /@tsconfig/node10/1.0.8:
     resolution: {integrity: sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg==}
     dev: true
@@ -1108,10 +1137,6 @@ packages:
     resolution: {integrity: sha1-5waVHV4ztPCku3Ox+LEk4m8IHeA=, registry: http://registry.npm.taobao.org/, tarball: http://registry.npm.taobao.org/@types/mockjs/download/@types/mockjs-1.0.4.tgz}
     dev: true
 
-  /@types/node/14.14.45:
-    resolution: {integrity: sha512-DssMqTV9UnnoxDWu959sDLZzfvqCF0qDNRjaWeYSui9xkFe61kKo4l1TWNTQONpuXEm+gLMRvdlzvNHBamzmEw==}
-    dev: false
-
   /@types/node/17.0.29:
     resolution: {integrity: sha512-tx5jMmMFwx7wBwq/V7OohKDVb/JwJU5qCVkeLMh1//xycAJ/ESuw9aJ9SEtlCZDYi2pBfe4JkisSoAtbOsBNAA==}
 
@@ -1360,7 +1385,6 @@ packages:
 
   /@unocss/reset/0.31.17:
     resolution: {integrity: sha512-g3+bqtM6LetSEJ5NYhi2P4vdP8yVLUQLbNZUdMtggcmHXTY08ISWaJKWmnHptrO13rtRoQ+l9gFc4Y7kRpD7NA==}
-    dev: true
 
   /@unocss/scope/0.31.17:
     resolution: {integrity: sha512-X6V62OKexnhePLuVj9FtrpAJYUCpIedIieogvl6gHDZMnTnJPNaW9jJ7/e6r21F3u9IrqOzlikgCicFSm4J/TA==}
@@ -1583,17 +1607,6 @@ packages:
   /@vue/shared/3.2.33:
     resolution: {integrity: sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg==}
 
-  /@vue/tsconfig/0.1.3_@types+node@17.0.29:
-    resolution: {integrity: sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg==}
-    peerDependencies:
-      '@types/node': '*'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-    dependencies:
-      '@types/node': 17.0.29
-    dev: true
-
   /@vueuse/core/8.3.1_vue@3.2.33:
     resolution: {integrity: sha512-WiXUgVyPG9elGx3G8UV8g+zqbEJ2hYacrPICogAxDdW6hnxxcUFdF7FtvDroJ/DxWmo2pg8XNNz07ybfnZyJbw==}
     peerDependencies:
@@ -2270,14 +2283,6 @@ packages:
     resolution: {integrity: sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==, registry: http://registry.npm.taobao.org/, tarball: http://registry.npm.taobao.org/crypto-js/download/crypto-js-4.1.1.tgz}
     dev: false
 
-  /css-render/0.15.8:
-    resolution: {integrity: sha512-k1gp1MgYDPrFZhzheQkSwm6dmP6nPe2XE6WYpJBPwEc3GbMANPJZfxl7ofZlTl8/+tpMRiGTTgUkTlXaVbLxog==}
-    dependencies:
-      '@emotion/hash': 0.8.0
-      '@types/node': 14.14.45
-      csstype: 3.0.10
-    dev: false
-
   /css-render/0.15.9:
     resolution: {integrity: sha512-FMVcWsVipKEBR/mVf1+pIjCRQdztILVKxbp8TN5/Vf0Q/fdTq0OIb8JRW/pk7PP1eeWnB/ejQ0MNBe7ELjLblg==}
     dependencies:
@@ -5035,35 +5040,6 @@ packages:
   /sourcemap-codec/1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
 
-  /soybean-admin-layout/1.0.4_vue@3.2.33:
-    resolution: {integrity: sha512-kBfRnzPBZt+jUVO0ZEnfOWbNbenAdwdscie0GgAxZsY70faxbjhTcSH/HXHFlW8f4G4vMge+vNuux+GIGMa4/g==}
-    peerDependencies:
-      '@vue/composition-api': ^1.4.6
-      vue: ^2.0.0 || >=3.0.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-    dependencies:
-      css-render: 0.15.8
-      vue: 3.2.33
-      vue-demi: 0.12.1_vue@3.2.33
-    dev: false
-
-  /soybean-admin-tab/1.2.3_vue@3.2.33:
-    resolution: {integrity: sha512-jxAJzX15+eQQkZCJM6tG9HO697SiVEU4BfAwXC6q1W0R1Ys9xyOvT33c9fqxpUwQXxKn5HcJzF4q1ZxTrfWsog==}
-    peerDependencies:
-      '@vue/composition-api': ^1.4.6
-      vue: ^2.0.0 || >=3.0.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-    dependencies:
-      colord: 2.9.2
-      css-render: 0.15.8
-      vue: 3.2.33
-      vue-demi: 0.12.1_vue@3.2.33
-    dev: false
-
   /spdx-correct/3.1.1:
     resolution: {integrity: sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==}
     dependencies:
@@ -5440,7 +5416,7 @@ packages:
     dev: false
 
   /uglify-to-browserify/1.0.2:
-    resolution: {integrity: sha512-vb2s1lYx2xBtUgy+ta+b2J/GLVUR+wmpINwHePmPRhOsIVCG2wDzKJ0n14GslH1BifsqVzSOwQhRaCAsZ/nI4Q==}
+    resolution: {integrity: sha1-bgkk1r2mta/jSeOabWMoUKD4grc=}
     requiresBuild: true
     dev: false
     optional: true
@@ -5797,6 +5773,21 @@ packages:
       vue: 3.2.33
     dev: false
 
+  /vue-demi/0.12.5_vue@3.2.33:
+    resolution: {integrity: sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.2.33
+    dev: false
+
   /vue-eslint-parser/8.0.1_eslint@8.14.0:
     resolution: {integrity: sha512-lhWjDXJhe3UZw2uu3ztX51SJAPGPey1Tff2RK3TyZURwbuI4vximQLzz4nQfCv8CZq4xx7uIiogHMMoSJPr33A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/vue-eslint-parser/-/vue-eslint-parser-8.0.1.tgz}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}

src/layouts/BasicLayout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <soybean-admin-layout
+  <admin-layout
     :mode="mode"
     :min-width="theme.layout.minWidth"
     :fixed-header-and-tab="theme.fixedHeaderAndTab"
@@ -25,12 +25,12 @@
     <template #footer>
       <global-footer />
     </template>
-  </soybean-admin-layout>
+  </admin-layout>
   <setting-drawer />
 </template>
 
 <script setup lang="ts">
-import SoybeanAdminLayout from 'soybean-admin-layout';
+import AdminLayout from '@soybeanjs/vue-admin-layout';
 import { useAppStore, useThemeStore } from '@/store';
 import { useBasicLayout } from '@/composables';
 import { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter } from '../common';

src/layouts/common/GlobalTab/components/TabDetail/index.vue

@@ -28,7 +28,7 @@
 <script setup lang="ts">
 import { ref, reactive, computed, nextTick, watch } from 'vue';
 import { useEventListener } from '@vueuse/core';
-import { ChromeTab, ButtonTab } from 'soybean-admin-tab';
+import { ChromeTab, ButtonTab } from '@soybeanjs/vue-admin-tab';
 import { Icon } from '@iconify/vue';
 import { useThemeStore, useTabStore } from '@/store';
 import { setTabRoutes } from '@/utils';

src/service/request/index.ts

@@ -1,9 +1,9 @@
 import { createRequest } from './request';
 import { getEnvConfig } from '~/.env-config';
 
-const { http } = getEnvConfig(import.meta.env);
+const envConfig = getEnvConfig(import.meta.env);
 const isHttpProxy = import.meta.env.VITE_HTTP_PROXY === 'true';
 
-export const request = createRequest({ baseURL: isHttpProxy ? http.proxy : http.url });
+export const request = createRequest({ baseURL: isHttpProxy ? envConfig.proxy : envConfig.url });
 
 export const mockRequest = createRequest({ baseURL: '/mock' });

src/typings/components.d.ts

@@ -18,6 +18,9 @@ declare module '@vue/runtime-core' {
     IconCustomBanner: typeof import('~icons/custom/banner')['default']
     IconCustomLogo: typeof import('~icons/custom/logo')['default']
     IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default']
+    IconCustomNoPermission: typeof import('~icons/custom/no-permission')['default']
+    IconCustomNotFound: typeof import('~icons/custom/not-found')['default']
+    IconCustomServiceError: typeof import('~icons/custom/service-error')['default']
     IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
     IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
     IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default']

src/typings/env.d.ts

@@ -6,6 +6,16 @@
  */
 type EnvType = 'dev' | 'test' | 'prod';
 
+/**
+ * env环境配置
+ */
+interface EnvConfig {
+  /** 请求地址 */
+  url: string;
+  /** 代理地址 */
+  proxy: string;
+}
+
 interface ImportMetaEnv {
   /** 项目基本地址 */
   readonly VITE_BASE_URL: string;

vite.config.ts

@@ -1,6 +1,7 @@
 import { fileURLToPath } from 'url';
 import { defineConfig, loadEnv } from 'vite';
 import { viteDefine, setupVitePlugins, createViteProxy } from './build';
+import { getEnvConfig } from './.env-config';
 
 export default defineConfig(configEnv => {
   const viteEnv = loadEnv(configEnv.mode, process.cwd()) as ImportMetaEnv;
@@ -8,6 +9,9 @@ export default defineConfig(configEnv => {
   const rootPath = fileURLToPath(new URL('./', import.meta.url));
   const srcPath = `${rootPath}src`;
 
+  const isOpenProxy = viteEnv.VITE_HTTP_PROXY === 'true';
+  const envConfig = getEnvConfig(viteEnv);
+
   return {
     base: viteEnv.VITE_BASE_URL,
     resolve: {
@@ -29,7 +33,7 @@ export default defineConfig(configEnv => {
       host: '0.0.0.0',
       port: 3200,
       open: true,
-      proxy: createViteProxy(viteEnv)
+      proxy: createViteProxy(isOpenProxy, envConfig)
     },
     build: {
       brotliSize: false