Skip to content

P
poc-fe
Commit 9c225b33 authored by nick zheng's avatar nick zheng
Browse files
Options

chore: 首页侧边栏

parent ebb5a855
Hide whitespace changes
Inline Side-by-side
Showing with 77 additions and 37 deletions
index.html
View file @ 9c225b33
...@@ -6,7 +6,8 @@ ...@@ -6,7 +6,8 @@
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>POC-FE</title> <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4711453_xv7qlvxz82a.css">
<title>SuperLink</title>
</head> </head>
<body> <body>
......
src/config/theme-config.ts
View file @ 9c225b33
...@@ -9,8 +9,44 @@ export const themeOverrides: GlobalThemeOverrides = { ...@@ -9,8 +9,44 @@ export const themeOverrides: GlobalThemeOverrides = {
heightMedium: '32px', heightMedium: '32px',
borderRadius: '5px', borderRadius: '5px',
tableHeaderColor: '#F7F7FA', tableHeaderColor: '#F7F7FA',
textColor1: '#333333',
fontFamily: 'SourceHanSansCN-Regular',
}, },
LoadingBar: { LoadingBar: {
colorLoading: '#000DFF', colorLoading: '#000DFF',
}, },
DataTable: {
thTextColor: '#333333',
tdTextColor: '#333333',
},
Button: {
colorInfo: '#FFFFFF',
colorHoverInfo: '#EFF0FF',
colorPressedInfo: '#EFF0FF',
colorFocusInfo: '#EFF0FF',
colorDisabledInfo: '#FFFFFF',
textColorInfo: '#575FFF',
textColorHoverInfo: '#575FFF',
textColorPressedInfo: '#575FFF',
textColorFocusInfo: '#575FFF',
textColorDisabledInfo: '#999999',
textColorGhostInfo: '#575FFF',
textColorGhostHoverInfo: '#6F7FFF',
textColorGhostPressedInfo: '#6F7FFF',
textColorGhostFocusInfo: '#6F7FFF',
borderInfo: '1px solid #575FFF',
borderHoverInfo: '1px solid #575FFF',
borderPressedInfo: '1px solid #575FFF',
borderFocusInfo: '1px solid #575FFF',
borderDisabledInfo: '1px solid #CCCCCC',
rippleColorInfo: '#6F7FFF',
},
Menu: {
itemColorHover: '#EFF0FF',
itemHeight: '40px',
},
} }
src/layout/components/sidebar/sidebar.vue
View file @ 9c225b33
<script setup lang="ts"> <script setup lang="ts">
import { h, readonly, ref, watch } from 'vue' import { h, readonly, ref, shallowReadonly, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { Plus } from '@icon-park/vue-next' import { Plus } from '@icon-park/vue-next'
import { sidebarMenus } from '@/router/index' import type { MenuOption } from 'naive-ui'
import { type MenuOption } from '@/router/utils'
import CustomIcon from '@/components/custom-icon/custom-icon.vue' import CustomIcon from '@/components/custom-icon/custom-icon.vue'
import { useUserStore } from '@/store/modules/user' import { useUserStore } from '@/store/modules/user'
...@@ -15,16 +14,24 @@ const router = useRouter() ...@@ -15,16 +14,24 @@ const router = useRouter()
const userStore = useUserStore() const userStore = useUserStore()
const menuValue = ref(currentRoute.meta.belong)
const defaultAvatar = 'https://gsst-poe-sit.gz.bcebos.com/data/20240910/1725952917468.png' const defaultAvatar = 'https://gsst-poe-sit.gz.bcebos.com/data/20240910/1725952917468.png'
const currentMenuValue = ref('')
const menuOptions = shallowReadonly<MenuOption[]>([
{
label: () => h('div', {}, t('router_title_module.home')),
key: 'Home',
icon: () => h('i', { class: 'iconfont icon-home' }),
},
{
label: () => h('div', {}, t('router_title_module.personal')),
key: 'PersonalSpace',
icon: () => h('i', { class: 'iconfont icon-personal' }),
},
])
const avatarOptions = readonly([ const avatarOptions = readonly([
// {
// label: '我的',
// key: 'My',
// icon: () => h(CustomIcon, { icon: 'bx:user' }),
// },
{ {
label: () => h('div', {}, t('common_module.logout')), label: () => h('div', {}, t('common_module.logout')),
key: 'logout', key: 'logout',
...@@ -32,16 +39,9 @@ const avatarOptions = readonly([ ...@@ -32,16 +39,9 @@ const avatarOptions = readonly([
}, },
]) ])
watch( watchEffect(() => {
() => currentRoute.fullPath, currentMenuValue.value = (currentRoute.meta.belong as string) || ''
() => { })
menuValue.value = currentRoute.meta.belong
},
)
function handleUpdateValue(_key: string, menuItemOption: MenuOption) {
router.push({ name: menuItemOption.routeName })
}
function handleToPersonAppSettingPage() { function handleToPersonAppSettingPage() {
router.push({ name: 'PersonalAppSetting' }) router.push({ name: 'PersonalAppSetting' })
...@@ -64,13 +64,17 @@ function handleToLogin() { ...@@ -64,13 +64,17 @@ function handleToLogin() {
query: { redirect: encodeURIComponent(router.currentRoute.value.fullPath) }, query: { redirect: encodeURIComponent(router.currentRoute.value.fullPath) },
}) })
} }
function handleMenuValueChange(key: string) {
router.push({ name: key })
}
</script> </script>
<template> <template>
<div class="flex h-full flex-col justify-between"> <div class="flex h-full flex-col justify-between overflow-hidden">
<div> <div class="flex flex-1 flex-col overflow-hidden">
<div <div
class="mx-auto flex h-[50px] w-full bg-[url('@/assets/images/page-logo.png')] bg-contain bg-center bg-no-repeat" class="mx-auto flex h-[50px] w-full shrink-0 bg-[url('@/assets/images/page-logo.png')] bg-contain bg-center bg-no-repeat"
/> />
<div class="px-3 py-5"> <div class="px-3 py-5">
...@@ -83,21 +87,20 @@ function handleToLogin() { ...@@ -83,21 +87,20 @@ function handleToLogin() {
</button> </button>
</div> </div>
<ul class="px-3"> <n-scrollbar>
<li <div class="px-1">
v-for="sidebarMenuItem in sidebarMenus" <n-menu
:key="sidebarMenuItem.key" :value="currentMenuValue"
class="hover:bg-active-color my-1 flex h-10 cursor-pointer items-center rounded-md pl-3" :options="menuOptions"
:class="[menuValue === sidebarMenuItem.routeName ? 'bg-active-color text-theme-color' : 'text-font-color']" :root-indent="18"
@click="handleUpdateValue(sidebarMenuItem.routeName, sidebarMenuItem)" :indent="0"
> :on-update:value="handleMenuValueChange"
<CustomIcon :icon="sidebarMenuItem.icon" class="mr-2 text-base" /> />
<span class="line-clamp-1 max-w-[150px]">{{ t(sidebarMenuItem.label) }}</span> </div>
</li> </n-scrollbar>
</ul>
</div> </div>
<div class="mb-7 px-3"> <div class="my-7 px-3">
<NDropdown <NDropdown
v-if="userStore.isLogin" v-if="userStore.isLogin"
trigger="click" trigger="click"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment