refactor(projects): 代码优化

README.md

@@ -135,12 +135,8 @@ pnpm i -g commitizen
 - 本人微信号：honghuangdc，欢迎来技术交流，业务咨询。
 
 - 微信交流群：
-  <div style="text-align:left">
-    <img src="https://s2.loli.net/2022/03/30/VpmnTMsgXJH72B9.jpg" style="width:200px" />
-  </div>
-
   **微信群的人数已经满200个了，无法扫码，可以添加本人的微信再邀请进入**
-  
+
 - QQ交流群 `711301266`
 
   <div style="text-align:left">

components.d.ts

@@ -10,11 +10,71 @@ declare module 'vue' {
     DarkModeSwitch: typeof import('./src/components/common/DarkModeSwitch.vue')['default']
     GithubLink: typeof import('./src/components/custom/GithubLink.vue')['default']
     HoverContainer: typeof import('./src/components/common/HoverContainer.vue')['default']
+    IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default']
+    IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
+    IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
+    IconCustomAvatar: typeof import('~icons/custom/avatar')['default']
+    IconCustomBanner: typeof import('~icons/custom/banner')['default']
+    IconCustomLogo: typeof import('~icons/custom/logo')['default']
+    IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default']
+    IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
+    IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
+    IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default']
+    IconLineMdMenuFoldLeft: typeof import('~icons/line-md/menu-fold-left')['default']
+    IconLineMdMenuUnfoldLeft: typeof import('~icons/line-md/menu-unfold-left')['default']
+    IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
+    IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
+    IconMdiClose: typeof import('~icons/mdi/close')['default']
+    IconMdiGithub: typeof import('~icons/mdi/github')['default']
+    IconMdiMoonWaningCrescent: typeof import('~icons/mdi/moon-waning-crescent')['default']
+    IconMdiPin: typeof import('~icons/mdi/pin')['default']
+    IconMdiPinOff: typeof import('~icons/mdi/pin-off')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
+    IconMdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default']
+    IconPhCaretDoubleLeftBold: typeof import('~icons/ph/caret-double-left-bold')['default']
+    IconPhCaretDoubleRightBold: typeof import('~icons/ph/caret-double-right-bold')['default']
     IconSelect: typeof import('./src/components/custom/IconSelect.vue')['default']
+    IconUilSearch: typeof import('~icons/uil/search')['default']
     ImageVerify: typeof import('./src/components/custom/ImageVerify.vue')['default']
     LoadingEmptyWrapper: typeof import('./src/components/business/LoadingEmptyWrapper.vue')['default']
     LoginAgreement: typeof import('./src/components/business/LoginAgreement.vue')['default']
     NaiveProvider: typeof import('./src/components/common/NaiveProvider.vue')['default']
+    NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
+    NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
+    NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDataTable: typeof import('naive-ui')['NDataTable']
+    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+    NDivider: typeof import('naive-ui')['NDivider']
+    NDrawer: typeof import('naive-ui')['NDrawer']
+    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
+    NDropdown: typeof import('naive-ui')['NDropdown']
+    NEmpty: typeof import('naive-ui')['NEmpty']
+    NGradientText: typeof import('naive-ui')['NGradientText']
+    NGrid: typeof import('naive-ui')['NGrid']
+    NGridItem: typeof import('naive-ui')['NGridItem']
+    NInput: typeof import('naive-ui')['NInput']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
+    NList: typeof import('naive-ui')['NList']
+    NListItem: typeof import('naive-ui')['NListItem']
+    NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
+    NMenu: typeof import('naive-ui')['NMenu']
+    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NModal: typeof import('naive-ui')['NModal']
+    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
+    NSpace: typeof import('naive-ui')['NSpace']
+    NStatistic: typeof import('naive-ui')['NStatistic']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTabPane: typeof import('naive-ui')['NTabPane']
+    NTabs: typeof import('naive-ui')['NTabs']
+    NThing: typeof import('naive-ui')['NThing']
+    NTimeline: typeof import('naive-ui')['NTimeline']
+    NTimelineItem: typeof import('naive-ui')['NTimelineItem']
+    NTooltip: typeof import('naive-ui')['NTooltip']
     SystemLogo: typeof import('./src/components/common/SystemLogo.vue')['default']
     WebSiteLink: typeof import('./src/components/custom/WebSiteLink.vue')['default']
   }

public/resource/loading.js

@@ -1,6 +1,6 @@
 /**
  * 初始化加载效果的svg格式logo
- * @param { string }id - 元素id
+ * @param {string} id - 元素id
  */
 function initSvgLogo(id) {
   const svgStr = `<svg width="128px" height="128px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
@@ -22,8 +22,7 @@ function initSvgLogo(id) {
 	<path style="fill:currentColor" d="M77.9,126.6c0,3.9-2.8,7.2-6.7,7.9c-7.8,1.5-14.8,5.9-19.7,12.2c-2.7,3.5-7.6,4.2-11.2,1.6
 	c-3.6-2.6-4.3-7.6-1.7-11.2c0.1-0.1,0.2-0.3,0.3-0.4c4.1-5.2,9.3-9.6,15.1-12.8c4.4-2.5,9.1-4.2,14-5.1
 	C73.3,117.7,77.9,121.3,77.9,126.6z" />
-</svg>
+	</svg>`;
-`;
   const appEl = document.querySelector(id);
   const div = document.createElement('div');
   div.innerHTML = svgStr;
@@ -34,11 +33,12 @@ function initSvgLogo(id) {
 
 function addThemeColorCssVars() {
   const key = '__THEME_COLOR__';
-  const themeColor = window.localStorage.getItem(key) || '#1890ff';
+  const defaultColor = '#1890ff';
+  const themeColor = window.localStorage.getItem(key) || defaultColor;
   const cssVars = `--primary-color: ${themeColor}`;
   document.documentElement.style.cssText = cssVars;
 }
 
-initSvgLogo('#loadingLogo');
-
 addThemeColorCssVars();
+
+initSvgLogo('#loadingLogo');

src/App.vue

@@ -13,6 +13,7 @@
 </template>
 
 <script setup lang="ts">
+import { RouterView } from 'vue-router';
 import { zhCN, dateZhCN } from 'naive-ui';
 import { useThemeStore, subscribeStore } from '@/store';
 

src/directives/index.ts

@@ -2,6 +2,7 @@ import type { App } from 'vue';
 import setupNetworkDirective from './network';
 import setupLoginDirective from './login';
 
+/** setup custom vue directives. - [安装自定义的vue指令] */
 export function setupDirectives(app: App) {
   setupNetworkDirective(app);
   setupLoginDirective(app);

src/layouts/common/GlobalContent/index.vue

@@ -14,6 +14,7 @@
 </template>
 
 <script setup lang="ts">
+import { RouterView } from 'vue-router';
 import { useAppStore, useThemeStore, useRouteStore } from '@/store';
 
 interface Props {

src/main.ts

@@ -1,26 +1,21 @@
 import { createApp } from 'vue';
-import { setupAssets } from '@/plugins';
+import { setupImportAssets } from './plugins';
-import { setupRouter } from '@/router';
+import { setupStore } from './store';
-import { setupStore } from '@/store';
+import { setupDirectives } from './directives';
-import { setupDirectives } from '@/directives';
+import { setupRouter } from './router';
 import App from './App.vue';
 
 async function setupApp() {
-  // 引入静态资源
+  setupImportAssets();
-  setupAssets();
 
   const app = createApp(App);
 
-  // 挂载pinia状态
   setupStore(app);
 
-  // 挂载自定义vue指令
   setupDirectives(app);
 
-  // 挂载路由
   await setupRouter(app);
 
-  // 路由准备就绪后挂载 App
   app.mount('#app');
 }
 

src/plugins/assets.ts

@@ -4,7 +4,7 @@ import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import '../styles/css/global.css';
 
-/** 引入静态资源(全局引入css、字体等) */
+/** import static assets: css, js , font and so on. - [引入静态资源，css、js和字体文件等] */
-export default function setupAssets() {
+export default function setupImportAssets() {
   //
 }

src/plugins/index.ts

@@ -1,3 +1,3 @@
-import setupAssets from './assets';
+import setupImportAssets from './assets';
 
-export { setupAssets };
+export { setupImportAssets };

src/router/index.ts

@@ -6,14 +6,14 @@ import { scrollBehavior } from './helpers';
 import { createRouterGuard } from './guard';
 
 const { VITE_HASH_ROUTE = 'false', VITE_BASE_URL } = import.meta.env;
-const history = VITE_HASH_ROUTE === 'true' ? createWebHashHistory(VITE_BASE_URL) : createWebHistory(VITE_BASE_URL);
 
 export const router = createRouter({
-  history,
+  history: VITE_HASH_ROUTE === 'true' ? createWebHashHistory(VITE_BASE_URL) : createWebHistory(VITE_BASE_URL),
   routes: transformAuthRoutesToVueRoutes(constantRoutes),
   scrollBehavior
 });
 
+/** setup vue router. - [安装vue路由] */
 export async function setupRouter(app: App) {
   app.use(router);
   createRouterGuard(router);

src/store/index.ts

@@ -1,6 +1,7 @@
 import type { App } from 'vue';
 import { createPinia } from 'pinia';
 
+/** setup vue store plugin: pinia. - [安装vue状态管理插件：pinia] */
 export function setupStore(app: App) {
   const store = createPinia();
   app.use(store);

src/store/modules/auth/index.ts

@@ -11,14 +11,14 @@ interface AuthState {
   /** 用户token */
   token: string;
   /** 登录的加载状态 */
-  loginLoding: boolean;
+  loginLoading: boolean;
 }
 
 export const useAuthStore = defineStore('auth-store', {
   state: (): AuthState => ({
     userInfo: getUserInfo(),
     token: getToken(),
-    loginLoding: false
+    loginLoading: false
   }),
   getters: {
     /** 是否登录 */
@@ -81,12 +81,12 @@ export const useAuthStore = defineStore('auth-store', {
      * @param type - 登录方式: pwd - 密码登录; sms - 验证码登录
      */
     async login(phone: string, pwdOrCode: string, type: 'pwd' | 'sms') {
-      this.loginLoding = true;
+      this.loginLoading = true;
       const { data } = await fetchLogin(phone, pwdOrCode, type);
       if (data) {
         await this.loginByToken(data);
       }
-      this.loginLoding = false;
+      this.loginLoading = false;
     }
   }
 });

src/views/system-view/login/components/CodeLogin/index.vue

@@ -24,7 +24,7 @@
         size="large"
         :block="true"
         :round="true"
-        :loading="auth.loginLoding"
+        :loading="auth.loginLoading"
         @click="handleSubmit"
       >
         确定

src/views/system-view/login/components/PwdLogin/index.vue

@@ -16,7 +16,7 @@
         size="large"
         :block="true"
         :round="true"
-        :loading="auth.loginLoding"
+        :loading="auth.loginLoading"
         @click="handleSubmit"
       >
         确定