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

Compare commits

base: youzitree:3cd1b10b0f4ba537ab277f6a1587d349be3d26e9
Branches Tags
youzitree:main
..
compare: youzitree:fc420ad4eb645a7f9489531add997930604f4f26
Branches Tags
youzitree:main

2 Commits
3cd1b10b0f ... fc420ad4eb

Author SHA1 Message Date
youzi
fc420ad4eb 添加登录组件，优化导航逻辑，更新路由类型声明，调整样式和结构 2025-12-23 15:35:07 +08:00
youzi
192357af79 添加标签组件类型声明，优化导航组件逻辑，更新样式，调整配置文件 2025-12-23 11:14:04 +08:00
10 changed files with 185 additions and 125 deletions
Expand all files Collapse all files

6
components.d.ts vendored
View File

@ -12,11 +12,15 @@ declare module 'vue' {
DAside: typeof import('vue-devui/layout/index.es.js')['Aside']
DAvatar: typeof import('vue-devui/avatar/index.es.js')['Avatar']
DButton: typeof import('vue-devui/button/index.es.js')['Button']
DButtonGroup: typeof import('vue-devui/button-group/index.es.js')['ButtonGroup']
DCard: typeof import('vue-devui/card/index.es.js')['Card']
DContent: typeof import('vue-devui/layout/index.es.js')['Content']
DDropdown: typeof import('vue-devui/dropdown/index.es.js')['Dropdown']
DDropdownItem: typeof import('vue-devui/dropdown-item/index.es.js')['DropdownItem']
DFooter: typeof import('vue-devui/layout/index.es.js')['Footer']
DForm: typeof import('vue-devui/form/index.es.js')['Form']
DFormItem: typeof import('vue-devui/form/index.es.js')['FormItem']
DHeader: typeof import('vue-devui/layout/index.es.js')['Header']
DIcon: typeof import('vue-devui/icon/index.es.js')['Icon']
DInput: typeof import('vue-devui/input/index.es.js')['Input']
DLayout: typeof import('vue-devui/layout/index.es.js')['Layout']
@ -28,7 +32,9 @@ declare module 'vue' {
DSelect: typeof import('vue-devui/select/index.es.js')['Select']
DTab: typeof import('vue-devui/tabs/index.es.js')['Tab']
DTabs: typeof import('vue-devui/tabs/index.es.js')['Tabs']
DTag: typeof import('vue-devui/tag/index.es.js')['Tag']
HomeSide: typeof import('./src/components/homeSide.vue')['default']
Login: typeof import('./src/components/Login.vue')['default']
MenuH: typeof import('./src/components/menuH.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']

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>

91
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);
@ -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;

69
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 = () => {
@ -117,9 +140,9 @@ const getLocation = () => {
break;
}
const res = await $http.mix.getIp();
latitude.value = res.data.lat;
longitude.value = res.data.lon;
const jw = `${longitude.value?.toFixed(2)},${latitude.value?.toFixed(2)}`;
latitude.value = Number(res.data.data.lat);
longitude.value = Number(res.data.data.lng);
const jw = `${longitude.value?.toFixed(4)},${latitude.value?.toFixed(4)}`;
// 这里可以添加调用后端API获取具体位置名称的逻辑
handdleJw(jw);
@ -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
navx.setNavH(h)
if (h > 0) navx.setNavH(h)
@ -223,7 +230,9 @@ onBeforeUpdate(() => {
userinfo.value = $cookies.get('userinfo');
key.value = route.name as string;
const h: number = nav.value.clientHeight
navx.setNavH(h)
// console.log('******>>> --> nav.value:', nav.value)
// console.log('()()()()()>>> --> h:', h)
if (h > 0) navx.setNavH(h)
})
</script>

2
src/stores/nav.ts
View File

@ -1,5 +1,5 @@
export const useNavStore = defineStore('nav', () => {
const navH:Ref<number,number> = ref(0)
const navH:Ref<number,number> = ref(56)
function setNavH(v:number) {
navH.value = v

2
src/util/index.ts
View File

@ -159,3 +159,5 @@ export function resetObject<T extends Record<string, any>>(obj: T): void {
(obj as Record<string, any>)[key] = null;
});
}

110
src/views/Home.vue
View File

@ -12,18 +12,24 @@
</template>
</d-input>
</div>
<!-- 标签组 -->
<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-6 p-12">
<d-card class="bg-[#ffffff80] h-25" v-for="(item, index) in navlist" :key="index"
<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>
<div class="mt-1 w-full flex flex-col items-center cursor-pointer hover:!text-primary">
<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>
</template>
</d-card>
@ -47,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="">
@ -62,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"
@ -78,10 +86,10 @@
</template>
<script setup lang="ts">
import { getDictValue } from '@/util/index.ts'
import { deepclone, getDictValue } from '@/util/index.ts'
definePage({
name:'home',
name: 'home',
meta: {
title: '首页',
}
@ -92,6 +100,7 @@ const visible: any = ref(false)
const navData: any = reactive({
menu_link: '',
menu_name: '',
tag: '',
menu_icon: ''
})
const formNav: any = ref(null)
@ -127,8 +136,18 @@ const options = ref([
])
// 图片数据
const navlist: any = ref([])
let cloneNavlist: any = []
const tagList: any = ref([
{
name: '全部',
color: '',
checked: true
}
])
const usrLog = $store.log.useLogStore()
async function getNavList() {
const res = await $http.nav.getNavList()
@ -138,9 +157,55 @@ async function getNavList() {
i.color = getRandomDarkColor()
});
navlist.value = res.data
console.log("&&&&&&&&&&&&&&", navlist.value);
res.data.forEach((i: any) => {
if (!tagList.value.find((t: any) => t.name == i.tag))
tagList.value.push({ name: i.tag, color: getRandomDarkColor(30, 128), checked: false })
})
cloneNavlist = deepclone(res.data)
}
function getItemColor(item: any) {
const tag = tagList.value.find((t: any) => t.name == item.tag)
return tag ? tag.color : getRandomDarkColor(30, 128)
}
function handdleTagClick(tag: any) {
tag.checked = !tag.checked
if (tag.name == '全部') {
// 全部标签被点击，重置其他标签状态
tagList.value.forEach((t: any) => {
if (t.name !== '全部') {
t.checked = false
}
})
// navlist.value = cloneNavlist
navlist.value = cloneNavlist
return
} else {
// 其他标签被点击，取消“全部”标签状态
const allTag = tagList.value.find((t: any) => t.name == '全部')
if (allTag) allTag.checked = false
}
const selectedTags = tagList.value.filter((t: any) => t.checked && t.name !== '全部').map((t: any) => t.name)
if (selectedTags.length === 0) {
// 如果没有选中任何标签，默认选中“全部”
const allTag = tagList.value.find((t: any) => t.name == '全部')
if (allTag) allTag.checked = true
// 数据从cloneNavlist中过滤
navlist.value = cloneNavlist
return
}
console.log('>>> --> handdleTagClick --> selectedTags:', selectedTags)
// 根据选中的标签过滤导航列表
navlist.value = cloneNavlist.filter((item: any) => selectedTags.includes(item.tag))
}
function imgErr(index: number) {
navlist.value[index].icon_error = true
}
@ -206,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)
@ -219,16 +285,13 @@ async function navSubmit() {
formNav.value.resetFields()
getNavList()
}
}
// 监听store的登录状态
watch(() => usrLog.isLogin, (newVal) => {
console.log('********** --> watch --> newVal:', newVal)
if (newVal) {
getNavList()
}else {
} else {
navlist.value = []
}
})
@ -236,14 +299,23 @@ watch(() => usrLog.isLogin, (newVal) => {
onMounted(() => {
// console.log("&&&&&&&&&&&&&&", nav.navH);
console.log("&&&&&&&&&&&&&&", nav.navH);
contentStyle.value = {
height: `calc(100vh - ${nav.navH}px)`
}
navStyle.value = {
height: `calc(100vh - ${nav.navH}px - 110px)`
height: `calc(100vh - ${nav.navH}px - 153px)`
}
tagList.value = [
{
name: '全部',
color: getRandomDarkColor(30, 128),
checked: true
}
]
getNavList()
})
</script>

5
typed-router.d.ts vendored
View File

@ -23,7 +23,6 @@ declare module 'vue-router/auto-routes' {
'/console/home': RouteRecordInfo<'/console/home', '/console/home', Record<never, never>, Record<never, never>>,
'gallery': RouteRecordInfo<'gallery', '/Gallery', Record<never, never>, Record<never, never>>,
'home': RouteRecordInfo<'home', '/Home', Record<never, never>, Record<never, never>>,
'login': RouteRecordInfo<'login', '/Login', Record<never, never>, Record<never, never>>,
'404': RouteRecordInfo<'404', '/NotFound', Record<never, never>, Record<never, never>>,
'plink': RouteRecordInfo<'plink', '/Plink', Record<never, never>, Record<never, never>>,
'widget': RouteRecordInfo<'widget', '/Widget', Record<never, never>, Record<never, never>>,
@ -60,10 +59,6 @@ declare module 'vue-router/auto-routes' {
routes: 'home'
views: never
}
'src/views/Login.vue': {
routes: 'login'
views: never
}
'src/views/NotFound.vue': {
routes: '404'
views: never

4
vite.config.ts
View File

@ -8,7 +8,7 @@ import Components from "unplugin-vue-components/vite";
import { VueRouterAutoImports } from 'unplugin-vue-router';
import VueRouter from 'unplugin-vue-router/vite';
import { defineConfig } from "vite";
import vueDevTools from "vite-plugin-vue-devtools";
// import vueDevTools from "vite-plugin-vue-devtools";
import svgLoader from "vite-svg-loader";
// https://vite.dev/config/
export default defineConfig({
@ -29,7 +29,7 @@ export default defineConfig({
}),
UnoCSS(),
svgLoader(),
vueDevTools(),
// vueDevTools(),
],
esbuild: {
pure: ["console.log"], // 删除 console.log