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

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('验证失败!');
     }
   });
 }