ZYT/zyt
2
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
Your Name
2026-06-15 09:12:15 +08:00
parent 8ae5b4eead
commit 4ba75e5a94
304 changed files with 382 additions and 510 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/src/layout/default/components/header/breadcrumb.vue
+9 -7
View File
@@ -26,17 +26,19 @@ useWatchRoute((route) => {
.app-breadcrumb {
:deep(.el-breadcrumb__item) {
.el-breadcrumb__inner {
color: #303133;
color: var(--el-text-color-regular);
font-weight: 400;
transition: color 0.2s ease;
}
&:last-child .el-breadcrumb__inner {
color: var(--health-primary-dark, var(--el-color-primary));
font-weight: 500;
}
&:last-child .el-breadcrumb__inner {
color: #303133;
}
}
:deep(.el-breadcrumb__separator) {
color: #606266;
color: var(--el-text-color-secondary);
}
}
</style>
admin/src/layout/default/components/header/index.vue
+37 -9
View File
@@ -1,8 +1,14 @@
<template>
<header class="header">
<div class="navbar">
<div class="flex-1 flex">
<div class="navbar-item">
<div class="navbar-left flex-1 flex items-center min-w-0">
<side-logo
v-if="settingStore.showLogo"
class="navbar-logo shrink-0"
:show-title="!isCollapsed || isMobile"
theme="light"
/>
<div class="navbar-item shrink-0">
<el-tooltip
class="box-item"
effect="dark"
@@ -12,16 +18,19 @@
<fold />
</el-tooltip>
</div>
<div class="navbar-item">
<div class="navbar-item shrink-0">
<el-tooltip class="box-item" effect="dark" content="刷新" placement="bottom">
<refresh />
</el-tooltip>
</div>
<div class="flex items-center px-2" v-if="!isMobile && settingStore.showCrumb">
<div
class="flex items-center px-2 min-w-0"
v-if="!isMobile && settingStore.showCrumb"
>
<breadcrumb />
</div>
</div>
<div class="flex">
<div class="navbar-right flex shrink-0">
<div class="navbar-item" v-if="!isMobile">
<el-tooltip
class="box-item"
@@ -47,7 +56,6 @@
</div>
</div>
</div>
<multiple-tabs v-if="settingStore.openMultipleTabs" />
</header>
</template>
@@ -57,11 +65,11 @@ import { useFullscreen } from '@vueuse/core'
import useAppStore from '@/stores/modules/app'
import useSettingStore from '@/stores/modules/setting'
import SideLogo from '../sidebar/logo.vue'
import Setting from '../setting/index.vue'
import Breadcrumb from './breadcrumb.vue'
import Fold from './fold.vue'
import FullScreen from './full-screen.vue'
import MultipleTabs from './multiple-tabs.vue'
import Refresh from './refresh.vue'
import UserDropDown from './user-drop-down.vue'
@@ -73,11 +81,31 @@ const { isFullscreen } = useFullscreen()
</script>
<style lang="scss">
.header {
background: var(--el-bg-color);
border-bottom: 1px solid var(--health-border, var(--el-border-color-lighter));
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.navbar {
height: var(--navbar-height);
@apply flex px-2 bg-body;
@apply flex px-4;
.navbar-logo {
margin-right: 4px;
border-bottom: none !important;
padding-right: 8px !important;
}
.navbar-item {
@apply h-full flex justify-center items-center hover:bg-page;
@apply h-10 flex justify-center items-center cursor-pointer;
min-width: 40px;
border-radius: 8px;
transition: background-color 0.2s ease;
&:hover {
background-color: var(--el-fill-color);
}
}
}
</style>
admin/src/layout/default/components/header/multiple-tabs.vue
+27 -28
View File
@@ -1,5 +1,5 @@
<template>
<div class="app-tabs pl-4 flex bg-body">
<div class="app-tabs flex bg-body">
<div class="flex-1 min-w-0">
<el-tabs
:model-value="currentTab"
@@ -13,7 +13,7 @@
</el-tabs>
</div>
<el-dropdown @command="handleCommand">
<span class="flex items-center px-3">
<span class="flex items-center px-3 cursor-pointer tab-dropdown">
<icon :size="16" name="el-icon-arrow-down" />
</span>
<template #dropdown>
@@ -58,9 +58,22 @@ const handleCommand = (command: any) => {
}
}
</script>
<style lang="scss" scoped>
.app-tabs {
@apply border-t border-br;
padding: 0 16px;
background: var(--el-bg-color);
border-bottom: 1px solid var(--health-border, var(--el-border-color-lighter));
.tab-dropdown {
height: 40px;
border-radius: 6px;
transition: background-color 0.2s ease;
&:hover {
background-color: var(--el-fill-color);
}
}
:deep(.el-tabs) {
height: 40px;
.el-tabs {
@@ -80,35 +93,19 @@ const handleCommand = (command: any) => {
}
&__item {
font-weight: normal;
padding: 0 15px !important;
padding: 0 16px !important;
box-sizing: border-box;
color: var(--el-text-color-secondary);
transition: color 0.2s ease;
&.is-active {
color: var(--el-text-color-primary);
background-color: var(--el-color-primary-light-9);
&::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background-color: var(--el-color-primary);
margin-right: 6px;
border-radius: 50%;
vertical-align: 2px;
}
&::after {
position: absolute;
content: '';
display: block;
top: 0;
height: 2px;
left: 0;
width: 100%;
background-color: var(--el-color-primary);
}
color: var(--health-primary-dark, var(--el-color-primary));
font-weight: 500;
}
.is-icon-close {
color: var(--el-text-color-regular);
color: var(--el-text-color-secondary);
vertical-align: -2px;
border-radius: 50%;
transition: all 0.2s ease;
&:hover {
color: var(--color-white);
background-color: var(--el-color-danger);
@@ -116,7 +113,9 @@ const handleCommand = (command: any) => {
}
}
&__active-bar {
display: none;
height: 2px;
border-radius: 2px;
background-color: var(--health-primary, var(--el-color-primary));
}
}
}
admin/src/layout/default/components/main.vue
+13 -3
View File
@@ -1,7 +1,7 @@
<template>
<main class="main-wrap h-full bg-page">
<main class="main-wrap h-full">
<el-scrollbar>
<div class="px-2 py-4">
<div class="main-content">
<router-view v-if="isRouteShow" v-slot="{ Component, route }">
<keep-alive :include="includeList" :max="20">
<component :is="Component" :key="route.fullPath" />
@@ -24,4 +24,14 @@ const isRouteShow = computed(() => appStore.isRouteShow)
const includeList = computed(() => (settingStore.openMultipleTabs ? tabsStore.getCacheTabList : []))
</script>
<style></style>
<style lang="scss" scoped>
.main-wrap {
height: 100%;
background: var(--el-bg-color);
}
.main-content {
padding: 16px 20px 24px;
min-height: 100%;
}
</style>
admin/src/layout/default/components/setting/drawer.vue
+1 -1
View File
@@ -100,7 +100,7 @@ import theme_light from '@/assets/images/theme_white.png'
import useSettingStore from '@/stores/modules/setting'
const settingStore = useSettingStore()
const predefineColors = ref(['#409EFF', '#28C76F', '#EA5455', '#FF9F43', '#01CFE8', '#4A5DFF'])
const predefineColors = ref(['#0EA5E9', '#38BDF8', '#0284C7', '#16A34A', '#DC2626', '#0369A1'])
const sideThemeList = [
{
type: 'dark',
admin/src/layout/default/components/sidebar/logo.vue
+4 -2
View File
@@ -44,11 +44,13 @@ const handleClick = () => {
overflow: hidden;
cursor: pointer;
user-select: none;
@apply flex items-center p-2 relative;
@apply flex items-center px-3 relative;
.logo-title {
width: 70%;
position: absolute;
@apply text-xl;
@apply text-base font-medium;
color: var(--el-text-color-primary);
}
.title-width-enter-active {
admin/src/layout/default/components/sidebar/menu.vue
+25 -5
View File
@@ -67,33 +67,53 @@ const themeClass = computed(() => `theme-${props.theme}`)
&.theme-dark {
.el-menu {
:deep(.el-menu-item) {
margin: 2px 10px;
border-radius: 6px;
&.is-active {
@apply bg-primary border-primary;
background-color: rgba(255, 255, 255, 0.12);
color: #fff;
font-weight: 500;
}
}
:deep(.el-sub-menu__title) {
margin: 2px 10px;
border-radius: 6px;
}
}
:deep(.el-menu--collapse) {
.el-sub-menu.is-active .el-sub-menu__title {
@apply bg-primary #{!important};
background-color: rgba(255, 255, 255, 0.12) !important;
}
}
}
&.theme-light {
:deep(.el-menu) {
.el-menu-item {
border-color: transparent;
margin: 2px 10px;
border-radius: 6px;
color: var(--el-text-color-regular);
&.is-active {
@apply bg-primary-light-9 border-r-2 border-primary;
background-color: var(--health-primary-light, var(--el-color-primary-light-9));
color: var(--health-primary-dark, var(--el-color-primary));
font-weight: 500;
}
}
.el-sub-menu__title {
margin: 2px 10px;
border-radius: 6px;
color: var(--el-text-color-regular);
}
.el-menu-item:hover,
.el-sub-menu__title:hover {
color: var(--el-color-primary);
background-color: var(--el-fill-color);
color: var(--el-text-color-primary);
}
}
}
.el-menu {
border-right: none;
background: transparent;
padding: 10px 0;
&:not(.el-menu--collapse) {
width: var(--aside-width);
}
admin/src/layout/default/components/sidebar/side.vue
+11 -7
View File
@@ -1,6 +1,10 @@
<template>
<div class="side" :style="sideStyle">
<side-logo v-if="settingStore.showLogo" :show-title="!isCollapsed" :theme="sideTheme" />
<side-logo
v-if="settingStore.showLogo && appStore.isMobile"
:show-title="!isCollapsed"
:theme="sideTheme"
/>
<side-menu
:routes="routes"
:is-collapsed="isCollapsed"
@@ -45,9 +49,9 @@ const sideStyle = computed(() => {
})
const menuProp = computed(() => {
return {
backgroundColor: sideTheme.value == 'dark' ? settingStore.sideDarkColor : '',
textColor: sideTheme.value == 'dark' ? 'var(--el-color-white)' : '',
activeTextColor: sideTheme.value == 'dark' ? 'var(--el-color-white)' : ''
backgroundColor: sideTheme.value == 'dark' ? settingStore.sideDarkColor : 'transparent',
textColor: sideTheme.value == 'dark' ? 'rgba(255,255,255,0.85)' : '',
activeTextColor: sideTheme.value == 'dark' ? '#ffffff' : ''
}
})
const handleSelect = () => {
@@ -60,8 +64,8 @@ const handleSelect = () => {
<style lang="scss" scoped>
.side {
position: relative;
z-index: 999;
@apply border-r border-br-light h-full flex flex-col;
background-color: var(--side-dark-color, var(--el-bg-color));
z-index: 10;
@apply h-full flex flex-col;
background-color: var(--side-dark-color, var(--health-bg-sidebar, var(--el-bg-color)));
}
</style>