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

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) => {