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

3
src/App.vue
View File

@ -1,10 +1,7 @@
<template>
<div>
<PerfectScrollbar>
<!-- <login v-if="route.path == '/login'"></login> -->
<!-- <router-view></router-view> -->
<lay-index></lay-index>
</PerfectScrollbar>
</div>

14
src/Index.vue
View File

@ -1,8 +1,8 @@
<template>
<d-layout>
<!-- <d-header class="dheader-1"> -->
<d-header class="dheader-1">
<menu-h />
<!-- </d-header> -->
</d-header>
<d-content class="dcontent-1">
<router-view />
</d-content>
@ -10,23 +10,13 @@
<div class="beian" ref="footer">
<a class="text-primary" href="https://beian.miit.gov.cn" target="_blank">皖ICP备2021017362号-1</a>
<a class="swag text-primary" target="_blank" href="https://www.hxyouzi.com/swag">api文档</a>
<!-- <div class="flex text-[#409eff] text-[12px] ml-[20px]">
<div>今日访问：{{ ips?.todayIp }}</div>
<div class="ml-2">总访问：{{ ips?.allIp }}</div>
</div> -->
</div>
</d-footer>
</d-layout>
</template>
<script setup lang="ts">
// 空白项目入口
// definePage({
// path:"/",
// })
const route = useRoute()
</script>
<style scoped>

95
src/views/Login.vue → src/components/Login.vue
View File

@ -1,50 +1,44 @@
<template>
<div class="login-page w-[100vw] h-[100vh] relative">
<d-card class="w-120 !absolute top-[12%] right-8 bg-[#ffffff60] rounded-[10px]">
<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>
</div>
<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">
definePage({
name:'login',
meta: {
title: '登录',
}
})
const router = useRouter()
const emit = defineEmits<{
(e: 'update:visible', value: boolean): void
}>()
// 登录注册逻辑
const tid = ref("tab1");
const formLogin: any = ref(null);
@ -73,7 +67,7 @@ const rules: any = reactive({
]
})
const rrules: any = reactive({
username: [
username: [
{ validator: validateUsername, trigger: 'blur' },
],
password: [
@ -83,7 +77,7 @@ const rrules: any = reactive({
})
function login() {
console.log('>>> --> login --> formLogin.value:', usrLog.isLogin)
formLogin.value.validate(async (is: boolean,b: any) => {
formLogin.value.validate(async (is: boolean, b: any) => {
if (!is) {
$msg.error('信息填写不正确，请检查后再提交')
} else {
@ -96,13 +90,14 @@ function login() {
$cookies.set('userinfo', res.data.userinfo, '1d')
$msg.success(res.msg)
usrLog.setIsLogin(true)
router.push({ path: "/" })
// router.push({ path: "/" })
emit("update:visible",false)
}
})
}
function register() {
formReg.value.validate(async (is: boolean,b: any) => {
formReg.value.validate(async (is: boolean, b: any) => {
if (!is) {
$msg.error('信息填写不正确，请检查后再提交')
} else {
@ -131,12 +126,6 @@ function validatePassword(rule: any, value: string, callback: Function) {
</script>
<style scoped lang="less">
/* 登录页面样式 */
.login-page {
background: transparent url("@/assets/images/05.jpeg") 0 0/cover no-repeat;
}
:deep(.devui-tabs__nav) {
display: flex;
justify-content: center;

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>

27
src/views/Home.vue
View File

@ -13,13 +13,13 @@
</d-input>
</div>
<!-- 标签组 -->
<div v-if="navlist.length" class="flex gap-6 px-12 my-6 overflow-x-auto">
<div v-if="navlist.length" class="flex gap-6 px-12 mt-6 mb-3 overflow-x-auto">
<d-tag hideBeyondTags v-for="tag in tagList" :checked="tag.checked" :color="tag.color"
@click="handdleTagClick(tag)">{{ tag.name }}</d-tag>
</div>
<!-- 图片网格展示区域 -->
<PerfectScrollbar class="" :style="navStyle">
<div class="navcard grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-5 pb-6 px-12">
<div class="navcard grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-5 pt-3 pb-6 px-12">
<d-card class="bg-[#ffffff80] h-24" v-for="(item, index) in navlist" :key="index"
@click="goExtra(item.menu_link)">
<template #content>
@ -27,7 +27,7 @@
<div :style="{ background: item.color }"
class="w-8 h-8 rounded-full text-white flex items-center justify-center" v-if="item.icon_error">
{{ item.first }}</div>
<img class="grid-image w-8 h-8 rounded-full" v-else :src="item.menu_icon" @error="imgErr(index)" />
<img class="grid-image w-8 h-8 rounded-full" v-else :src="item.menu_icon" @error="imgErr(index as number)" />
<div class="mt-2 w-full text-center text-lg truncate">{{ item.menu_name || "" }}</div>
<em class="absolute rounded-md top-0 left-0 px-2 text-white text-center text-sm" :style="{ background: getItemColor(item) }">{{ item.tag }}</em>
</div>
@ -53,14 +53,16 @@
<!-- 新增导航弹窗 -->
<d-modal class="!w-120" v-model="visible" title="新增导航">
<d-form ref="formNav" layout="vertical" :data="navData">
<d-form-item field="username">
<d-form-item class="h-8" field="username">
<d-input @blur="getIcon" v-model="navData.menu_link" placeholder="请输入单行链接(必填)" />
</d-form-item>
<d-form-item field="password">
<d-form-item class="h-8" field="password">
<d-input v-model="navData.menu_name" placeholder="请输入导航名称(必填)" />
</d-form-item>
<d-form-item class="form-operation-wrap">
<d-form-item class="h-8" field="tag">
<d-input v-model="navData.tag" placeholder="请自定义一个标签(必填，只取前四字)" />
</d-form-item>
<d-form-item class="h-8 form-operation-wrap">
<div class="flex">
<d-input v-model="navData.menu_icon" placeholder="请输入图标链接" />
<img class="ml-5" v-if="navData.menu_icon" width="30" height="30" :src="navData.menu_icon" alt="">
@ -68,7 +70,7 @@
</div>
</d-form-item>
</d-form>
<div class="mt-10 w-full flex justify-between">
<div class="mt-14 w-full flex justify-between">
<d-button @click="navCancel" variant="text" class="w-[49%] hover:bg-[#8a6684] hover:!text-white">取消</d-button>
<span class="text-[20px]"> | </span>
<d-button @click="navSubmit" variant="text" class="w-[49%] hover:bg-[#5c866a] hover:!text-white"
@ -98,6 +100,7 @@ const visible: any = ref(false)
const navData: any = reactive({
menu_link: '',
menu_name: '',
tag: '',
menu_icon: ''
})
const formNav: any = ref(null)
@ -268,10 +271,11 @@ function navCancel() {
async function navSubmit() {
console.log('>>> --> navSubmit --> navData:', navData)
if (!navData.menu_link || !navData.menu_name) {
$msg.error('请输入链接和名称')
if (!navData.menu_link || !navData.menu_name || !navData.tag) {
$msg.error('请输入链接、标签和名称')
return
}
navData.tag = navData.tag.slice(0, 4)
const res = await $http.nav.addNav(navData)
console.log('>>> --> navSubmit --> res:', res)
@ -281,9 +285,6 @@ async function navSubmit() {
formNav.value.resetFields()
getNavList()
}
}
// 监听store的登录状态
watch(() => usrLog.isLogin, (newVal) => {