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

迁移UI框架至naive-ui，重构组件和样式，添加Gallery和Mask组件

Browse Source
This commit is contained in:
youzi
2025-12-28 16:45:58 +08:00
parent 4c097e4c40
commit 96edada2ff
54 changed files with 2482 additions and 2979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/components/menuH.vue
View File

@ -5,36 +5,15 @@
<img :src="logo" alt="柚子的网站" class="h-9 align-middle" />
</div>
<!-- 主导航菜单 -->
<d-menu mode="horizontal" router class="ml-5 h-14 text-[16px] " :default-select-keys="[key]">
<d-menu-item key="home">
<d-icon :component="homeSvg" class="w-5 mr-1"></d-icon>
首页
</d-menu-item>
<d-menu-item key="gallery">
<d-icon :component="picSvg" class="w-5 mr-1"></d-icon>
画廊
</d-menu-item>
<d-menu-item key="article">
<d-icon :component="artiSvg" class="w-5 mr-1 "></d-icon>
文章
</d-menu-item>
<d-menu-item key="widget">
<d-icon :component="settingSvg" class="w-5 mr-1 "></d-icon>
工具
</d-menu-item>
<d-menu-item key="appshare">
<d-icon :component="downSvg" class="w-5 mr-1 "></d-icon>
软件分享
</d-menu-item>
<d-menu-item key="plink">
<d-icon :component="linkSvg" class="w-5 mr-1 "></d-icon>
友链
</d-menu-item>
</d-menu>
<div>
<n-menu :icon-size="12" v-model:value="activeKey" class="" mode="horizontal" :options="menuOptions" />
</div>
<!-- 用户区域 -->
<div class="!text-[#ec66ab] flex items-center" @click="gotoHf">
<span class="flex items-center location-info truncate">
<d-icon color="#ec66ab" class="mr-1" name="location-new"></d-icon>
<n-icon class="mr-1">
<icon-loc class="w-[26px] h-[26px]"></icon-loc>
</n-icon>
{{ locationInfo }}
</span>
<span class="mx-3 text-gray-300">|</span>
@ -44,47 +23,35 @@
</div>
<div class="flex items-center mr-8">
<d-dropdown class="cursor-pointer w-[100px]" v-if="userinfo" trigger="hover">
<n-dropdown class="cursor-pointer w-[100px]" v-if="userinfo" :options="oprOp" @select="handleSelect"
trigger="hover">
<div class="flex items-center">
<d-avatar :img-src="userinfo.ava_url" class="cursor-pointer" alt="用户的头" />
<n-avatar round :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>
</n-dropdown>
<div v-else class="flex items-center" @click="toLogin">
<n-avatar round class="cursor-pointer"></n-avatar>
<div class="cursor-pointer ml-2 text-gray text-sm" >登录</div>
</div>
</div>
<!-- 登录弹窗 -->
<d-modal class="!w-120" v-model="visible">
<login-modal v-model:visible="visible"></login-modal>
</d-modal>
<masked :visible="visible" :setVisible="setVisible">
<loginModal :setVisible="setVisible" />
</masked>
</div>
<div class="flex justify-between bg-white lg:hidden">
<div class="pl-2 items-centerflex" slot="brand" @click="">
<img :src="logo" alt="柚子的网站" class="h-9 align-middle" />
</div>
<div class="flex items-center mr-2">
<div v-if="userinfo" 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>
<div v-if="userinfo" class="flex items-center">
<n-avatar :src="userinfo.ava_url" round class="cursor-pointer" alt="用户的头" />
<div class="cursor-pointer ml-2 text-gray text-sm">{{ userinfo.nickname }}</div>
</div>
<div v-else class="flex items-center">
<d-avatar class="cursor-pointer" @click="toLogin"></d-avatar>
<n-avatar round class="cursor-pointer" @click="toLogin"></n-avatar>
<div class="cursor-pointer ml-2 text-gray text-sm" @click="toLogin">登录</div>
</div>
</div>
@ -101,16 +68,16 @@ 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 masked from '@/components/mask.vue'
import { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useRoute, useRouter, RouterLink } from 'vue-router';
const activeKey = ref('home')
const route = useRoute();
const visible = ref(false);
const router = useRouter();
const key = ref("home");
const locationInfo = ref("获取位置中...");
const latitude = ref<number | null>(null);
const longitude = ref<number | null>(null);
@ -122,7 +89,69 @@ const userinfo: any = ref(null)
const nav: any = useTemplateRef('nav')
const navx = $store.nav.useNavStore()
const usrLog = $store.log.useLogStore()
console.log('>>> --> route:', route)
const menuOptions = ref([
{
label: () => h(RouterLink, { to: '/home', class: 'flex items-center justify-center' }, { default: () => '首页' }),
key: "home",
icon: () => h(homeSvg)
},
{
label: () => h(RouterLink, { to: '/gallery', class: 'flex items-center justify-center' }, { default: () => '画廊管理' }),
key: "gallery",
icon: () => h(picSvg)
},
{
label: () => h(RouterLink, { to: '/blog', class: 'flex items-center justify-center' }, { default: () => '文章管理' }),
key: "blog",
icon: () => h(artiSvg)
},
{
label: () => h(RouterLink, { to: '/widget', class: 'flex items-center justify-center' }, { default: () => '工具管理' }),
key: "widget",
icon: () => h(downSvg)
},
{
label: () => h(RouterLink, { to: '/apps', class: 'flex items-center justify-center' }, { default: () => '软件管理' }),
key: "apps",
icon: () => h(settingSvg)
},
{
label: () => h(RouterLink, { to: '/plink', class: 'flex items-center justify-center' }, { default: () => '友链管理' }),
key: "plink",
icon: () => h(linkSvg)
},
]);
const oprOp = ref([
{
key: 'logout',
label: '退出登录',
},
{
key: 'console',
label: '控制台',
},
{
key: 'setting',
label: '设置',
}
])
function setVisible(v: any) {
visible.value = v
}
function handleSelect(key: string) {
console.log('>>> --> handleSelect --> key:', key)
if (key == 'logout') {
logout()
return
}
if (key == 'console') {
router.push('/console')
return
}
}
// 获取地理位置
const getLocation = () => {
if (!navigator.geolocation) {
@ -198,7 +227,7 @@ async function handdleJw(jw: string) {
}
watch(() => route.name, (newVal) => {
key.value = newVal as string
activeKey.value = newVal as string
})
function goHome() {
@ -220,6 +249,9 @@ function logout() {
usrLog.setIsLogin(false)
userinfo.value = null;
}
function gotoConsole() {
window.open("https://www.hxyouzi.com/console/home", "_BLACK")
}
function gotoHf() {
console.log('>>> --> gotoHf --> fxlink:', fxlink)
@ -230,7 +262,10 @@ onMounted(() => {
userinfo.value = $cookies.get('userinfo');
console.log('>>>>>>>>>>', userinfo.value);
key.value = route.name as string;
setTimeout(() => {
console.log('>>>>>>>>>>', route)
activeKey.value = route.name as string;
}, 20);
console.log('>>> --> route.name:', route.name)
getLocation(); // 组件挂载时获取位置
@ -242,7 +277,7 @@ onMounted(() => {
});
onBeforeUpdate(() => {
userinfo.value = $cookies.get('userinfo');
key.value = route.name as string;
activeKey.value = route.name as string;
const h: number = nav.value.clientHeight
// console.log('******>>> --> nav.value:', nav.value)
// console.log('()()()()()>>> --> h:', h)
@ -257,32 +292,10 @@ onBeforeUpdate(() => {
margin-bottom: 1px;
}
:deep(.devui-menu-horizontal .devui-menu-item:hover span .icon) {
color: var(--devui-brand, #5e7ce0) !important;
fill: var(--devui-brand, #5e7ce0) !important;
:deep(.n-menu-item-content__icon) {
width: 16px !important;
height: 16px !important;
}
:deep(.devui-menu-item-select span svg) {
color: var(--devui-brand, #5e7ce0) !important;
fill: var(--devui-brand, #5e7ce0) !important;
line-height: 100% !important;
}
:deep(.devui-menu-item-select span) {
color: var(--devui-brand, #5e7ce0) !important;
}
:deep(.devui-menu-horizontal) {
padding: 14px 20px 6px;
}
:deep(.devui-menu-item span) {
display: flex;
align-items: center;
.devui-icon__container {
display: flex;
align-items: center;
}
}
</style>