添加登录组件，优化导航逻辑，更新路由类型声明，调整样式和结构

2025-12-23 15:35:07 +08:00
parent 192357af79
commit fc420ad4eb
7 changed files with 97 additions and 115 deletions
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@ -0,0 +1,143 @@
+<template>
+  <d-card class="mt-10 bg-[#ffffff60] rounded-[10px]" shadow="never">
+    <d-tabs v-model="tid" type="pills">
+      <d-tab id="tab1" title="登录">
+        <d-form ref="formLogin" layout="vertical" :data="loginData" :rules="rules">
+          <d-form-item field="username">
+            <d-input v-model="loginData.username" placeholder="请输入用户名" />
+          </d-form-item>
+          <d-form-item field="password">
+            <d-input v-model="loginData.password" show-password placeholder="请输入密码" />
+          </d-form-item>
+          <d-form-item class="form-operation-wrap">
+            <d-button class="w-full" variant="solid" @click="login">登 录</d-button>
+          </d-form-item>
+        </d-form>
+      </d-tab>
+      <d-tab id="tab2" title="注册">
+        <d-form ref="formReg" layout="vertical" :data="regData" :rules="rrules">
+          <d-form-item field="username">
+            <d-input v-model="regData.username" placeholder="请输入用户名" />
+          </d-form-item>
+          <d-form-item field="password">
+            <d-input v-model="regData.password" show-password placeholder="请输入用密码" />
+          </d-form-item>
+          <d-form-item field="nickname">
+            <d-input v-model="regData.nickname" placeholder="请输入昵称" />
+          </d-form-item>
+          <d-form-item class="form-operation-wrap">
+            <d-button class="w-full" variant="solid" @click="register">注册</d-button>
+          </d-form-item>
+        </d-form>
+      </d-tab>
+    </d-tabs>
+  </d-card>
+</template>
+
+<script setup lang="ts">
+const router = useRouter()
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+}>()
+// 登录注册逻辑
+const tid = ref("tab1");
+const formLogin: any = ref(null);
+const loginData = reactive({
+  username: "",
+  password: ""
+});
+
+const formReg: any = ref(null);
+const regData = reactive({
+  username: "",
+  password: "",
+  nickname: ""
+});
+
+const usrLog = $store.log.useLogStore()
+
+const rules: any = reactive({
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { validator: validateUsername, trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { validator: validatePassword, trigger: 'blur' }
+  ]
+})
+const rrules: any = reactive({
+  username: [
+    { validator: validateUsername, trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { validator: validatePassword, trigger: 'blur' }
+  ]
+})
+function login() {
+  console.log('>>> --> login --> formLogin.value:', usrLog.isLogin)
+  formLogin.value.validate(async (is: boolean, b: any) => {
+    if (!is) {
+      $msg.error('信息填写不正确，请检查后再提交')
+    } else {
+      const res = await $http.user.login(loginData)
+      if (res?.code !== 200) {
+        $msg.error('登录失败')
+        return
+      }
+      $cookies.set('token', res.data.token, '1d')
+      $cookies.set('userinfo', res.data.userinfo, '1d')
+      $msg.success(res.msg)
+      usrLog.setIsLogin(true)
+      // router.push({ path: "/" })
+      emit("update:visible",false)
+    }
+  })
+
+}
+function register() {
+  formReg.value.validate(async (is: boolean, b: any) => {
+    if (!is) {
+      $msg.error('信息填写不正确，请检查后再提交')
+    } else {
+      const res = await $http.user.register(regData)
+      if (res?.code !== 200) {
+        $msg.error('注册失败')
+        return
+      }
+      $msg.success(res.msg)
+      tid.value = 'tab1'
+      formReg.value.resetForm()
+      loginData.username = regData.username
+    }
+  })
+}
+
+function validateUsername(rule: any, value: string, callback: Function) {
+  if (/^[a-zA-Z][a-zA-Z0-9]{3,15}$/.test(value)) return callback()
+  else return callback(new Error('请输入4-16位字母或数字,且以字母开头'))
+}
+function validatePassword(rule: any, value: string, callback: Function) {
+  if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/.test(value)) return callback()
+  else return callback(new Error('密码长度为6-12位，且必须包含数字和字母'))
+}
+
+</script>
+
+<style scoped lang="less">
+:deep(.devui-tabs__nav) {
+  display: flex;
+  justify-content: center;
+
+  li a span {
+    // width: 20%;
+    font-size: 18px !important;
+    font-weight: 500;
+  }
+}
+
+:deep(.devui-form__item--horizontal) {
+  margin-top: 30px;
+}
+</style>