youzitree/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
youzi
2025-12-23 15:35:07 +08:00
parent 192357af79
commit fc420ad4eb
7 changed files with 97 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/components/Login.vue Normal file
View File

@ -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>

61
src/components/menuH.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="nav" v-show="whiteList.includes(route.name)" class="main-nav flex justify-between bg-white">
<div ref="nav" class="main-nav flex justify-between bg-white">
<!-- 网站Logo -->
<div class="px-5 flex items-center" slot="brand" @click="goHome">
<img :src="logo" alt="柚子的网站" class="h-9 align-middle" />
@ -44,11 +44,35 @@
</div>
<div class="flex items-center mr-8">
<d-avatar v-if="userinfo" :img-src="userinfo.ava_url" @contextmenu="logout" class="cursor-pointer" alt="用户的头" />
<d-avatar v-else class="cursor-pointer" @click="toLogin"></d-avatar>
<div class="cursor-pointer ml-2 text-gray text-sm" v-if="userinfo">{{ userinfo.nickname }}</div>
<div class="cursor-pointer ml-2 text-gray text-sm" v-else @click="toLogin">登录</div>
<d-dropdown class="cursor-pointer w-[100px]" v-if="userinfo" trigger="hover">
<div class="flex items-center">
<d-avatar :img-src="userinfo.ava_url" class="cursor-pointer" alt="用户的头" />
<div class="cursor-pointer ml-2 text-gray text-sm">{{ userinfo.nickname }}</div>
</div>
<template #menu>
<ul class="list-menu">
<!-- hover为淡粉色 -->
<li class="w-full p-2 text-center hover:text-primary hover:bg-[#f5f0f0] cursor-pointer" @click="logout">
登出
</li>
<li class="w-full p-2 text-center hover:text-primary hover:bg-[#f5f0f0] cursor-pointer" @click="">
控制台
</li>
<li class="w-full p-2 text-center hover:text-primary hover:bg-[#f5f0f0] cursor-pointer" @click="">
设置
</li>
</ul>
</template>
</d-dropdown>
<div v-else class="flex items-center">
<d-avatar class="cursor-pointer" @click="toLogin"></d-avatar>
<div class="cursor-pointer ml-2 text-gray text-sm" @click="toLogin">登录</div>
</div>
</div>
<!-- 登录弹窗 -->
<d-modal class="!w-120" v-model="visible">
<login-modal v-model:visible="visible"></login-modal>
</d-modal>
</div>
</template>
@ -62,6 +86,7 @@ import homeSvg from '@/icon/menu/home.svg';
import linkSvg from '@/icon/menu/link.svg';
import picSvg from '@/icon/menu/pic.svg';
import settingSvg from '@/icon/menu/setting.svg';
import loginModal from '@/components/Login.vue'
import { onMounted, ref, watch } from 'vue';
@ -69,7 +94,7 @@ import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const visible = ref(false);
const router = useRouter();
const key = ref("home");
const locationInfo = ref("获取位置中...");
@ -83,8 +108,6 @@ const userinfo: any = ref(null)
const nav: any = useTemplateRef('nav')
const navx = $store.nav.useNavStore()
const usrLog = $store.log.useLogStore()
// 白名单
const whiteList = ['home', 'appshare', 'plink', 'widget', 'gallery', 'article'];
console.log('>>> --> route:', route)
// 获取地理位置
const getLocation = () => {
@ -173,7 +196,7 @@ function toLogin() {
console.log('>>> --> toLogin --> toLogin:', 'toLogin')
if ($cookies.get('token')) return
router.push('/login');
visible.value = true
}
function logout() {
@ -182,22 +205,6 @@ function logout() {
$cookies.remove('userinfo');
usrLog.setIsLogin(false)
userinfo.value = null;
$modal({
title: "退出登录",
content: "返回首页吗？",
submitText: "去登录",
cancelText: "返回首页",
handdleSubmit: () => {
router.push('/login');
},
handdleCancel: () => {
if (route.name == 'home') return
router.push('/home');
}
})
//
}
function gotoHf() {
@ -214,7 +221,7 @@ onMounted(() => {
getLocation(); // 组件挂载时获取位置
const h: number = nav.value.clientHeight
if(h>0) navx.setNavH(h)
if (h > 0) navx.setNavH(h)
@ -225,7 +232,7 @@ onBeforeUpdate(() => {
const h: number = nav.value.clientHeight
// console.log('******>>> --> nav.value:', nav.value)
// console.log('()()()()()>>> --> h:', h)
if(h>0) navx.setNavH(h)
if (h > 0) navx.setNavH(h)
})
</script>