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

更新

Browse Source
This commit is contained in:
Your Name
2026-07-06 15:00:10 +08:00
parent eb0efba739
commit e76f16193b
889 changed files with 4758 additions and 3046 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
@@ -1,5 +1,5 @@
<template>
<el-breadcrumb class="app-breadcrumb">
<el-breadcrumb class="app-breadcrumb" separator="/">
<el-breadcrumb-item v-for="item in breadcrumbs" :key="item.path">
{{ item.meta.title }}
</el-breadcrumb-item>
@@ -21,22 +21,24 @@ useWatchRoute((route) => {
})
</script>
<style scoped lang="scss">
.app-breadcrumb {
:deep(.el-breadcrumb__item) {
.el-breadcrumb__inner {
color: #303133;
color: var(--el-text-color-secondary);
font-weight: 500;
font-size: var(--el-font-size-small);
}
&:last-child .el-breadcrumb__inner {
color: #303133;
color: var(--el-text-color-primary);
font-weight: 600;
}
}
:deep(.el-breadcrumb__separator) {
color: #606266;
color: var(--el-text-color-placeholder);
font-weight: 400;
}
}
</style>
admin/src/layout/default/components/header/index.vue
+17 -11
View File
@@ -1,7 +1,7 @@
<template>
<header class="header">
<div class="navbar">
<div class="flex-1 flex">
<div class="flex-1 flex items-center gap-1 min-w-0">
<div class="navbar-item">
<el-tooltip
class="box-item"
@@ -17,11 +17,14 @@
<refresh />
</el-tooltip>
</div>
<div class="flex items-center px-2" v-if="!isMobile && settingStore.showCrumb">
<div
class="hidden md:flex items-center min-w-0 px-2"
v-if="settingStore.showCrumb && breadcrumbs.length"
>
<breadcrumb />
</div>
</div>
<div class="flex">
<div class="flex items-center gap-1">
<div class="navbar-item" v-if="!isMobile">
<el-tooltip
class="box-item"
@@ -36,12 +39,7 @@
<user-drop-down />
</div>
<div class="navbar-item">
<el-tooltip
class="box-item"
effect="dark"
content="主题设置"
placement="bottom"
>
<el-tooltip class="box-item" effect="dark" content="主题设置" placement="bottom">
<setting />
</el-tooltip>
</div>
@@ -52,8 +50,10 @@
</template>
<script setup lang="ts">
import type { RouteLocationMatched } from 'vue-router'
import { useFullscreen } from '@vueuse/core'
import { useWatchRoute } from '@/hooks/useWatchRoute'
import useAppStore from '@/stores/modules/app'
import useSettingStore from '@/stores/modules/setting'
@@ -70,14 +70,20 @@ const isMobile = computed(() => appStore.isMobile)
const isCollapsed = computed(() => appStore.isCollapsed)
const settingStore = useSettingStore()
const { isFullscreen } = useFullscreen()
const breadcrumbs = ref<RouteLocationMatched[]>([])
useWatchRoute((route) => {
breadcrumbs.value = route.matched.filter((item) => item.meta && item.meta.title)
})
</script>
<style lang="scss">
.navbar {
height: var(--navbar-height);
@apply flex px-2 bg-body;
@apply flex px-3 bg-body;
.navbar-item {
@apply h-full flex justify-center items-center hover:bg-page;
@apply h-full flex justify-center items-center;
}
}
</style>
admin/src/layout/default/components/header/multiple-tabs.vue
+52 -29
View File
@@ -1,6 +1,6 @@
<template>
<div class="app-tabs pl-4 flex bg-body">
<div class="flex-1 min-w-0">
<div class="app-tabs flex bg-body">
<div class="flex-1 min-w-0 pl-3">
<el-tabs
:model-value="currentTab"
:closable="tabsLists.length > 1"
@@ -13,7 +13,7 @@
</el-tabs>
</div>
<el-dropdown @command="handleCommand">
<span class="flex items-center px-3">
<span class="tabs-more-btn flex items-center px-3">
<icon :size="16" name="el-icon-arrow-down" />
</span>
<template #dropdown>
@@ -60,61 +60,84 @@ const handleCommand = (command: any) => {
</script>
<style lang="scss" scoped>
.app-tabs {
@apply border-t border-br;
height: var(--tabs-height);
border-top: 1px solid var(--admin-header-border);
background: var(--admin-surface-glass);
backdrop-filter: blur(12px);
.tabs-more-btn {
height: var(--tabs-height);
color: var(--el-text-color-secondary);
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease;
&:hover {
color: var(--admin-brand-primary-dark);
background: var(--admin-brand-gradient-soft);
}
}
:deep(.el-tabs) {
height: 40px;
height: var(--tabs-height);
.el-tabs {
&__header {
margin-bottom: 0;
}
&__content {
display: none;
}
&__nav-next,
&__nav-prev {
@apply text-xl;
@apply text-lg;
}
&__nav-wrap::after {
height: 0;
}
&__item {
font-weight: normal;
padding: 0 15px !important;
font-weight: 600;
font-size: var(--el-font-size-small);
padding: 0 16px !important;
height: calc(var(--tabs-height) - 8px);
margin-top: 4px;
border-radius: var(--admin-radius-md) var(--admin-radius-md) 0 0;
box-sizing: border-box;
color: var(--el-text-color-secondary);
transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
&:hover {
color: var(--admin-brand-primary-dark);
}
&.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;
}
color: var(--admin-brand-primary-dark);
background: var(--el-bg-color);
border: 1px solid var(--el-border-color-lighter);
border-bottom-color: transparent;
box-shadow: var(--el-box-shadow-lighter);
&::before,
&::after {
position: absolute;
content: '';
display: block;
top: 0;
height: 2px;
left: 0;
width: 100%;
background-color: var(--el-color-primary);
display: none;
}
}
.is-icon-close {
color: var(--el-text-color-regular);
color: var(--el-text-color-placeholder);
vertical-align: -2px;
border-radius: var(--admin-radius-sm);
&:hover {
color: var(--color-white);
background-color: var(--el-color-danger);
}
}
}
&__active-bar {
display: none;
}
admin/src/layout/default/components/header/user-drop-down.vue
+17 -5
View File
@@ -1,9 +1,11 @@
<template>
<el-dropdown class="px-2" @command="handleCommand">
<div class="flex items-center">
<el-avatar :size="34" :src="userInfo.avatar" />
<div class="ml-3 mr-1">{{ userInfo.name }}</div>
<icon name="el-icon-ArrowDown" />
<el-dropdown class="user-dropdown px-1" @command="handleCommand">
<div class="user-trigger flex items-center gap-2.5 px-2 py-1 rounded-md cursor-pointer">
<el-avatar :size="32" :src="userInfo.avatar" />
<span class="user-name max-w-[120px] truncate text-sm font-medium text-tx-primary">{{
userInfo.name
}}</span>
<icon name="el-icon-ArrowDown" :size="14" />
</div>
<template #dropdown>
@@ -41,3 +43,13 @@ const handleCommand = async (command: string) => {
}
}
</script>
<style scoped lang="scss">
.user-trigger {
transition: background-color 0.2s ease;
&:hover {
background: var(--el-fill-color-light);
}
}
</style>
admin/src/layout/default/components/main.vue
+37 -8
View File
@@ -1,27 +1,56 @@
<template>
<main class="main-wrap h-full bg-page">
<main class="main-wrap h-full">
<el-scrollbar>
<div class="px-2 py-4">
<router-view v-if="isRouteShow" v-slot="{ Component, route }">
<keep-alive :include="includeList" :max="20">
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</router-view>
<div class="main-stage">
<page-shell v-if="isRouteShow">
<router-view v-slot="{ Component, route }">
<keep-alive :include="includeList" :max="20">
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</router-view>
</page-shell>
</div>
</el-scrollbar>
</main>
</template>
<script setup lang="ts">
import PageShell from '@/components/page-shell/index.vue'
import useAppStore from '@/stores/modules/app'
import useTabsStore from '@/stores/modules/multipleTabs'
import useSettingStore from '@/stores/modules/setting'
const appStore = useAppStore()
const tabsStore = useTabsStore()
const settingStore = useSettingStore()
const isRouteShow = computed(() => appStore.isRouteShow)
const includeList = computed(() => (settingStore.openMultipleTabs ? tabsStore.getCacheTabList : []))
</script>
<style></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(['#06b6d4', '#10b981', '#0891b2', '#6366f1', '#f59e0b', '#ef4444', '#64748b'])
const sideThemeList = [
{
type: 'dark',
admin/src/layout/default/components/sidebar/menu.vue
+12 -2
View File
@@ -68,32 +68,42 @@ const themeClass = computed(() => `theme-${props.theme}`)
.el-menu {
:deep(.el-menu-item) {
&.is-active {
@apply bg-primary border-primary;
@apply bg-primary;
box-shadow: inset 3px 0 0 var(--el-color-primary-light-3);
}
}
}
:deep(.el-menu--collapse) {
.el-sub-menu.is-active .el-sub-menu__title {
@apply bg-primary #{!important};
}
}
}
&.theme-light {
:deep(.el-menu) {
.el-menu-item {
border-color: transparent;
&.is-active {
@apply bg-primary-light-9 border-r-2 border-primary;
@apply bg-primary-light-9;
color: var(--el-color-primary);
font-weight: 600;
box-shadow: inset 3px 0 0 var(--el-color-primary);
}
}
.el-menu-item:hover,
.el-sub-menu__title:hover {
color: var(--el-color-primary);
}
}
}
.el-menu {
border-right: none;
&:not(.el-menu--collapse) {
width: var(--aside-width);
}
admin/src/layout/default/components/sidebar/side.vue
+19 -4
View File
@@ -1,5 +1,15 @@
<template>
<div class="side" :style="sideStyle">
<div v-if="showBrandStrip" class="sidebar-brand">
<div class="sidebar-brand__mark">ZY</div>
<overflow-tooltip
class="sidebar-brand__name"
:content="config.web_name"
:teleported="true"
placement="bottom"
overflo-type="unset"
/>
</div>
<side-logo v-if="settingStore.showLogo" :show-title="!isCollapsed" :theme="sideTheme" />
<side-menu
:routes="routes"
@@ -25,17 +35,19 @@ const appStore = useAppStore()
const isCollapsed = computed(() => {
if (appStore.isMobile) {
return false
} else {
return appStore.isCollapsed
}
return appStore.isCollapsed
})
const settingStore = useSettingStore()
const sideTheme = computed(() => settingStore.sideTheme)
const userStore = useUserStore()
const config = computed(() => appStore.config)
const routes = computed(() => userStore.routes)
const showBrandStrip = computed(() => !settingStore.showLogo && !isCollapsed.value)
const sideStyle = computed(() => {
return sideTheme.value == 'dark'
? {
@@ -43,6 +55,7 @@ const sideStyle = computed(() => {
}
: ''
})
const menuProp = computed(() => {
return {
backgroundColor: sideTheme.value == 'dark' ? settingStore.sideDarkColor : '',
@@ -50,6 +63,7 @@ const menuProp = computed(() => {
activeTextColor: sideTheme.value == 'dark' ? 'var(--el-color-white)' : ''
}
})
const handleSelect = () => {
if (appStore.isMobile) {
appStore.toggleCollapsed(true)
@@ -61,7 +75,8 @@ const handleSelect = () => {
.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));
@apply h-full flex flex-col;
border-right: 1px solid var(--admin-sidebar-border);
background-color: var(--side-dark-color, var(--sidebar-dark-bg));
}
</style>