refactor(projects): 动态路由权限完善

src/config/regexp.ts

@@ -5,9 +5,9 @@ export const REGEXP_PHONE =
 /** 邮箱正则 */
 export const REGEXP_EMAIL = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
 
-/** 密码正则(密码为8-18位数字/字符/符号的组合) */
+/** 密码正则(密码为6-18位数字/字符/符号的组合) */
 export const REGEXP_PWD =
-  /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
+  /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){6,18}$/;
 
 /** 6位数字验证码正则 */
 export const REGEXP_CODE_SIX = /^\d{6}$/;

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

@@ -50,7 +50,7 @@ const activeComponent = computed(() => (isChromeMode.value ? ChromeTab : ButtonT
 const tabRef = ref<HTMLElement>();
 async function getActiveTabClientX() {
   await nextTick();
-  if (tabRef.value) {
+  if (tabRef.value && tabRef.value.children.length && tabRef.value.children[tab.activeTabIndex]) {
     const activeTabElement = tabRef.value.children[tab.activeTabIndex];
     const { x, width } = activeTabElement.getBoundingClientRect();
     const clientX = x + width / 2;

src/service/adapter/index.ts

@@ -1,4 +1,6 @@
-export function adapterOfDataWithAdapter(res: Service.RequestResult<ApiDemo.DataWithAdapter>): Demo.DataWithAdapter {
+export function adapterOfFetchDataWithAdapter(
+  res: Service.RequestResult<ApiDemo.DataWithAdapter>
+): Demo.DataWithAdapter {
   const { dataId, dataName } = res.data!;
 
   const result: Demo.DataWithAdapter = {

src/service/api/auth.ts

@@ -11,15 +11,11 @@ export function fetchSmsCode(phone: string) {
 
 /**
  * 登录
- * @param phone - 手机号
- * @param pwdOrCode - 密码或验证码
- * @param type - 登录方式: pwd - 密码登录; sms - 验证码登录
+ * @param userName - 用户名
+ * @param password - 密码
  */
-export function fetchLogin(phone: string, pwdOrCode: string, type: 'pwd' | 'sms') {
-  if (type === 'pwd') {
-    return mockRequest.post<ApiAuth.Token>('/loginByPwd', { phone, pwd: pwdOrCode });
-  }
-  return mockRequest.post<ApiAuth.Token>('/loginByCode', { phone, code: pwdOrCode });
+export function fetchLogin(userName: string, password: string) {
+  return mockRequest.post<ApiAuth.Token>('/login', { userName, password });
 }
 
 /** 获取用户信息 */

src/service/api/demo.ts

@@ -1,9 +1,14 @@
-import { adapterOfServiceResult } from '@/utils';
-import { mockRequest } from '../request';
-import { adapterOfDataWithAdapter } from '../adapter';
+import { serviceAdapter } from '@/utils';
+import { request, mockRequest } from '../request';
+import { adapterOfFetchDataWithAdapter } from '../adapter';
 
 /** 带有适配器的请求(将请求结果进行数据处理) */
 export async function fetchDataWithAdapter() {
   const res = await mockRequest.post<ApiDemo.DataWithAdapter>('/apiDemoWithAdapter');
-  return adapterOfServiceResult(adapterOfDataWithAdapter, res);
+  return serviceAdapter(adapterOfFetchDataWithAdapter, res);
+}
+
+/** 测试代理后的请求 */
+export function testRequestWithProxy() {
+  return request.get('/test-proxy'); // 确保.env-config的url和当前地址组成的 `${url}/test-proxy` 是有效的后端接口
 }

src/store/modules/auth/index.ts

@@ -1,9 +1,11 @@
-import { unref } from 'vue';
+import { unref, nextTick } from 'vue';
 import { defineStore } from 'pinia';
 import { router as globalRouter } from '@/router';
 import { useRouterPush } from '@/composables';
 import { fetchLogin, fetchUserInfo } from '@/service';
 import { getUserInfo, getToken, setUserInfo, setToken, setRefreshToken, clearAuthStorage } from '@/utils';
+import { useTabStore } from '../tab';
+import { useRouteStore } from '../route';
 
 interface AuthState {
   /** 用户信息 */
@@ -30,6 +32,8 @@ export const useAuthStore = defineStore('auth-store', {
     /** 重置auth状态 */
     resetAuthStore() {
       const { toLogin } = useRouterPush(false);
+      const { resetTabStore } = useTabStore();
+      const { resetRouteStore } = useRouteStore();
       const route = unref(globalRouter.currentRoute);
 
       clearAuthStorage();
@@ -38,6 +42,11 @@ export const useAuthStore = defineStore('auth-store', {
       if (route.meta.requiresAuth) {
         toLogin();
       }
+
+      nextTick(() => {
+        resetTabStore();
+        resetRouteStore();
+      });
     },
     /**
      * 根据token进行登录
@@ -46,7 +55,7 @@ export const useAuthStore = defineStore('auth-store', {
     async loginByToken(backendToken: ApiAuth.Token) {
       const { toLoginRedirect } = useRouterPush(false);
 
-      // 先把token存储到缓存中
+      // 先把token存储到缓存中(后面接口的请求头需要token)
       const { token, refreshToken } = backendToken;
       setToken(token);
       setRefreshToken(refreshToken);
@@ -76,13 +85,12 @@ export const useAuthStore = defineStore('auth-store', {
     },
     /**
      * 登录
-     * @param phone - 手机号
-     * @param pwdOrCode - 密码或验证码
-     * @param type - 登录方式: pwd - 密码登录; sms - 验证码登录
+     * @param userName - 用户名
+     * @param password - 密码
      */
-    async login(phone: string, pwdOrCode: string, type: 'pwd' | 'sms') {
+    async login(userName: string, password: string) {
       this.loginLoading = true;
-      const { data } = await fetchLogin(phone, pwdOrCode, type);
+      const { data } = await fetchLogin(userName, password);
       if (data) {
         await this.loginByToken(data);
       }

src/store/modules/route/index.ts

@@ -43,6 +43,9 @@ export const useRouteStore = defineStore('route-store', {
     cacheRoutes: []
   }),
   actions: {
+    resetRouteStore() {
+      this.$reset();
+    },
     /**
      * 处理权限路由
      * @param routes - 权限路由
@@ -53,6 +56,7 @@ export const useRouteStore = defineStore('route-store', {
       this.searchMenus = transformAuthRoutesToSearchMenus(routes);
 
       const vueRoutes = transformAuthRoutesToVueRoutes(routes);
+
       vueRoutes.forEach(route => {
         router.addRoute(route);
       });

src/store/modules/tab/index.ts

@@ -1,7 +1,7 @@
 import type { Router, RouteLocationNormalizedLoaded } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useRouterPush } from '@/composables';
-import { getTabRoutes } from '@/utils';
+import { getTabRoutes, clearTabRoutes } from '@/utils';
 import { useThemeStore } from '../theme';
 import { getTabRouteByVueRoute, isInTabRoutes, getIndexInTabRoutes } from './helpers';
 
@@ -38,6 +38,11 @@ export const useTabStore = defineStore('tab-store', {
     }
   },
   actions: {
+    /** 重置Tab状态 */
+    resetTabStore() {
+      clearTabRoutes();
+      this.$reset();
+    },
     /**
      * 设置当前路由对应的页签为激活状态
      * @param path - 路由path

src/store/modules/theme/helpers.ts

@@ -71,18 +71,3 @@ export function getNaiveThemeOverrides(colors: Record<ColorType, string>): Globa
     }
   };
 }
-
-/** windicss 暗黑模式 */
-export function handleWindicssDarkMode() {
-  const DARK_CLASS = 'dark';
-  function addDarkClass() {
-    document.documentElement.classList.add(DARK_CLASS);
-  }
-  function removeDarkClass() {
-    document.documentElement.classList.remove(DARK_CLASS);
-  }
-  return {
-    addDarkClass,
-    removeDarkClass
-  };
-}

src/store/subscribe/theme.ts

@@ -11,7 +11,7 @@ export default function subscribeThemeStore() {
   const theme = useThemeStore();
   const osTheme = useOsTheme();
   const { width } = useElementSize(document.documentElement);
-  const { addDarkClass, removeDarkClass } = handleWindicssDarkMode();
+  const { addDarkClass, removeDarkClass } = handleCssDarkMode();
 
   // 监听主题颜色
   const stopThemeColor = watch(
@@ -76,8 +76,8 @@ export default function subscribeThemeStore() {
   });
 }
 
-/** windicss 暗黑模式 */
-function handleWindicssDarkMode() {
+/** css 暗黑模式 */
+function handleCssDarkMode() {
   const DARK_CLASS = 'dark';
   function addDarkClass() {
     document.documentElement.classList.add(DARK_CLASS);

src/typings/business.d.ts

@@ -15,8 +15,6 @@ declare namespace Auth {
     userId: string;
     /** 用户名 */
     userName: string;
-    /** 用户手机号 */
-    userPhone: string;
     /** 用户角色类型 */
     userRole: RoleType;
   }

src/typings/env.d.ts

@@ -8,9 +8,9 @@ type EnvType = 'dev' | 'test' | 'prod';
 
 /** env环境配置 */
 interface EnvConfig {
-  /** 请求地址 */
+  /** 后端的请求地址 */
   url: string;
-  /** 代理地址 */
+  /** 代理标识, 用于拦截地址转发代理(如："/api"，这个和后端路径有无 "/api" 路径没有任何关系) */
   proxy: string;
 }
 

src/utils/auth/user.ts

@@ -36,7 +36,6 @@ export function getUserInfo() {
   const emptyInfo: Auth.UserInfo = {
     userId: '',
     userName: '',
-    userPhone: '',
     userRole: 'user'
   };
   const userInfo: Auth.UserInfo = getLocal<Auth.UserInfo>(EnumStorageKey['user-info']) || emptyInfo;

src/utils/form/rule.ts

@@ -22,7 +22,7 @@ export const formRules: CustomFormRules = {
   ],
   pwd: [
     { required: true, message: '请输入密码' },
-    { pattern: REGEXP_PWD, message: '密码为8-18位数字/字符/符号，至少2种组合', trigger: 'input' }
+    { pattern: REGEXP_PWD, message: '密码为6-18位数字/字符/符号，至少2种组合', trigger: 'input' }
   ],
   code: [
     { required: true, message: '请输入验证码' },

src/utils/service/handler.ts

@@ -21,7 +21,7 @@ type Adapter<T = any> = (...args: Service.RequestResult[]) => T;
  * @param adapter - 适配器函数
  * @param args - 适配器函数的参数
  */
-export function adapterOfServiceResult<T extends Adapter>(adapter: T, ...args: TypeUtil.GetFunArgs<T>) {
+export function serviceAdapter<T extends Adapter>(adapter: T, ...args: TypeUtil.GetFunArgs<T>) {
   let result: Service.RequestResult | undefined;
 
   const hasError = args.some(item => {

src/views/about/components/ProjectIntroduction.vue

@@ -1,6 +1,6 @@
 <template>
   <n-card title="关于" :bordered="false" size="large" class="rounded-16px shadow-sm">
-    <p class="leading-24px">
+    <p class="leading-24px text-primary">
       Soybean Admin 是一个基于 Vue3、Vite、Naive UI、TypeScript
       的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你。
     </p>

src/views/dashboard/workbench/components/WorkbenchMain/index.vue

@@ -106,11 +106,11 @@ const technology: Technology[] = [
   },
   {
     id: 4,
-    name: 'WindiCSS',
+    name: 'UnoCSS',
     description: '下一代实用优先的CSS框架',
-    author: 'Windicss',
-    site: 'https://windicss.org/',
-    icon: 'file-icons:windi',
+    author: 'Anthony Fu',
+    site: 'https://uno.antfu.me/?s=',
+    icon: 'logos:unocss',
     iconColor: '#48b0f1'
   },
   {

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

@@ -50,9 +50,9 @@ function handleSubmit(e: MouseEvent) {
 
   formRef.value.validate(errors => {
     if (!errors) {
-      window.$message?.success('验证成功');
+      window.$message?.success('验证成功!');
     } else {
-      window.$message?.error('验证失败');
+      window.$message?.error('验证失败!');
     }
   });
 }

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

@@ -43,7 +43,6 @@ import { useSmsCode } from '@/hooks';
 import { formRules, getImgCodeRule } from '@/utils';
 
 const auth = useAuthStore();
-const { login } = useAuthStore();
 const { toLoginModule } = useRouterPush();
 const { label, isCounting, loading: smsLoading, getSmsCode } = useSmsCode();
 
@@ -70,8 +69,9 @@ function handleSubmit(e: MouseEvent) {
 
   formRef.value.validate(errors => {
     if (!errors) {
-      const { phone, code } = model;
-      login(phone, code, 'sms');
+      window.$message?.success('验证通过!');
+    } else {
+      window.$message?.error('验证失败');
     }
   });
 }

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

@@ -0,0 +1,46 @@
+<template>
+  <n-space :vertical="true">
+    <n-divider class="!mb-0 text-14px text-[#666]">其他账户登录</n-divider>
+    <n-space justify="center">
+      <n-button
+        v-for="item in accounts"
+        :key="item.userName"
+        type="primary"
+        @click="login(item.userName, item.password)"
+      >
+        {{ item.label }}
+      </n-button>
+    </n-space>
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+interface Emits {
+  (e: 'login', param: { userName: string; password: string }): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const accounts = [
+  {
+    label: '超级管理员',
+    userName: 'Super',
+    password: 'super123'
+  },
+  {
+    label: '管理员',
+    userName: 'Admin',
+    password: 'admin123'
+  },
+  {
+    label: '普通用户',
+    userName: 'User01',
+    password: 'user01123'
+  }
+];
+
+function login(userName: string, password: string) {
+  emit('login', { userName, password });
+}
+</script>
+<style scoped></style>

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

@@ -1,3 +1,4 @@
 import OtherLogin from './OtherLogin.vue';
+import OtherAccount from './OtherAccount.vue';
 
-export { OtherLogin };
+export { OtherLogin, OtherAccount };

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

@@ -1,10 +1,10 @@
 <template>
   <n-form ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
-    <n-form-item path="phone">
-      <n-input v-model:value="model.phone" placeholder="请输入手机号码" />
+    <n-form-item path="userName">
+      <n-input v-model:value="model.userName" placeholder="请输入用户名" />
     </n-form-item>
-    <n-form-item path="pwd">
-      <n-input v-model:value="model.pwd" type="password" show-password-on="click" placeholder="请输入密码" />
+    <n-form-item path="password">
+      <n-input v-model:value="model.password" type="password" show-password-on="click" placeholder="请输入密码" />
     </n-form-item>
     <n-space :vertical="true" :size="24">
       <div class="flex-y-center justify-between">
@@ -31,7 +31,7 @@
         </n-button>
       </div>
     </n-space>
-    <other-login />
+    <other-account @login="handleLoginOtherAccount" />
   </n-form>
 </template>
 
@@ -42,7 +42,7 @@ import { EnumLoginModule } from '@/enum';
 import { useAuthStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { formRules } from '@/utils';
-import { OtherLogin } from './components';
+import { OtherAccount } from './components';
 
 const auth = useAuthStore();
 const { login } = useAuthStore();
@@ -50,12 +50,11 @@ const { toLoginModule } = useRouterPush();
 
 const formRef = ref<(HTMLElement & FormInst) | null>(null);
 const model = reactive({
-  phone: '15170283876',
-  pwd: 'abc123456'
+  userName: 'Soybean',
+  password: 'soybean123'
 });
 const rules: FormRules = {
-  phone: formRules.phone,
-  pwd: formRules.pwd
+  password: formRules.pwd
 };
 const rememberMe = ref(false);
 
@@ -65,10 +64,15 @@ function handleSubmit(e: MouseEvent) {
 
   formRef.value.validate(errors => {
     if (!errors) {
-      const { phone, pwd } = model;
-      login(phone, pwd, 'pwd');
+      const { userName, password } = model;
+      login(userName, password);
     }
   });
 }
+
+function handleLoginOtherAccount(param: { userName: string; password: string }) {
+  const { userName, password } = param;
+  login(userName, password);
+}
 </script>
 <style scoped></style>

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

@@ -63,9 +63,9 @@ function handleSubmit(e: MouseEvent) {
   formRef.value.validate(errors => {
     if (!errors) {
       if (!agreement.value) return;
-      window.$message?.success('验证成功');
+      window.$message?.success('验证成功!');
     } else {
-      window.$message?.error('验证失败');
+      window.$message?.error('验证失败!');
     }
   });
 }