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 @@
<link rel="icon" href="/favicon.ico" />
<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">
<title>POC-FE</title>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4711453_xv7qlvxz82a.css">
<title>SuperLink</title>
</head>
<body>
......
src/config/theme-config.ts
View file @ 9c225b33
......@@ -9,8 +9,44 @@ export const themeOverrides: GlobalThemeOverrides = {
heightMedium: '32px',
borderRadius: '5px',
tableHeaderColor: '#F7F7FA',
textColor1: '#333333',
fontFamily: 'SourceHanSansCN-Regular',
},
LoadingBar: {
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">
import { h, readonly, ref, watch } from 'vue'
import { h, readonly, ref, shallowReadonly, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { Plus } from '@icon-park/vue-next'
import { sidebarMenus } from '@/router/index'
import { type MenuOption } from '@/router/utils'
import type { MenuOption } from 'naive-ui'
import CustomIcon from '@/components/custom-icon/custom-icon.vue'
import { useUserStore } from '@/store/modules/user'
......@@ -15,16 +14,24 @@ const router = useRouter()
const userStore = useUserStore()
const menuValue = ref(currentRoute.meta.belong)
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([
// {
// label: '我的',
// key: 'My',
// icon: () => h(CustomIcon, { icon: 'bx:user' }),
// },
{
label: () => h('div', {}, t('common_module.logout')),
key: 'logout',
......@@ -32,16 +39,9 @@ const avatarOptions = readonly([
},
])
watch(
() => currentRoute.fullPath,
() => {
menuValue.value = currentRoute.meta.belong
},
)
function handleUpdateValue(_key: string, menuItemOption: MenuOption) {
router.push({ name: menuItemOption.routeName })
}
watchEffect(() => {
currentMenuValue.value = (currentRoute.meta.belong as string) || ''
})
function handleToPersonAppSettingPage() {
router.push({ name: 'PersonalAppSetting' })
......@@ -64,13 +64,17 @@ function handleToLogin() {
query: { redirect: encodeURIComponent(router.currentRoute.value.fullPath) },
})
}
function handleMenuValueChange(key: string) {
router.push({ name: key })
}
</script>
<template>
<div class="flex h-full flex-col justify-between">
<div>
<div class="flex h-full flex-col justify-between overflow-hidden">
<div class="flex flex-1 flex-col overflow-hidden">
<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">
......@@ -83,21 +87,20 @@ function handleToLogin() {
</button>
</div>
<ul class="px-3">
<li
v-for="sidebarMenuItem in sidebarMenus"
:key="sidebarMenuItem.key"
class="hover:bg-active-color my-1 flex h-10 cursor-pointer items-center rounded-md pl-3"
:class="[menuValue === sidebarMenuItem.routeName ? 'bg-active-color text-theme-color' : 'text-font-color']"
@click="handleUpdateValue(sidebarMenuItem.routeName, sidebarMenuItem)"
>
<CustomIcon :icon="sidebarMenuItem.icon" class="mr-2 text-base" />
<span class="line-clamp-1 max-w-[150px]">{{ t(sidebarMenuItem.label) }}</span>
</li>
</ul>
<n-scrollbar>
<div class="px-1">
<n-menu
:value="currentMenuValue"
:options="menuOptions"
:root-indent="18"
:indent="0"
:on-update:value="handleMenuValueChange"
/>
</div>
</n-scrollbar>
</div>
<div class="mb-7 px-3">
<div class="my-7 px-3">
<NDropdown
v-if="userStore.isLogin"
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