样式优化
This commit is contained in:
BianLzhaoMin
parent
ada7408941
commit
fb1e359e2d
|
|
@ -1,8 +1,46 @@
|
|||
// cover some element-ui styles
|
||||
// cover some element-ui styles - 现代化蓝色主题
|
||||
|
||||
// Element Plus 全局样式优化
|
||||
:root {
|
||||
--el-color-primary: #1677ff;
|
||||
--el-color-primary-light-3: #91caff;
|
||||
--el-color-primary-light-5: #d6e4ff;
|
||||
--el-color-primary-light-7: #f0f7ff;
|
||||
--el-color-primary-light-8: #f5f9ff;
|
||||
--el-color-primary-light-9: #fafcff;
|
||||
--el-color-primary-dark-2: #0958d9;
|
||||
|
||||
// 按钮样式优化
|
||||
--el-button-border-radius: 6px;
|
||||
--el-button-hover-bg-color: #4096ff;
|
||||
--el-button-active-bg-color: #0958d9;
|
||||
|
||||
// 输入框样式优化
|
||||
--el-input-border-radius: 6px;
|
||||
--el-input-focus-border-color: #1677ff;
|
||||
|
||||
// 表格样式优化
|
||||
--el-table-border-color: #f0f0f0;
|
||||
--el-table-header-bg-color: #fafafa;
|
||||
--el-table-row-hover-bg-color: #f5f9ff;
|
||||
|
||||
// 标签页样式优化
|
||||
--el-tabs-header-height: 48px;
|
||||
--el-tabs-active-color: #1677ff;
|
||||
|
||||
// 卡片样式优化
|
||||
--el-card-border-radius: 8px;
|
||||
--el-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.el-breadcrumb__inner,
|
||||
.el-breadcrumb__inner a {
|
||||
font-weight: 400 !important;
|
||||
color: #666;
|
||||
|
||||
&:hover {
|
||||
color: #1677ff;
|
||||
}
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
|
|
|
|||
|
|
@ -160,11 +160,12 @@ aside {
|
|||
|
||||
.link-type,
|
||||
.link-type:focus {
|
||||
color: #337ab7;
|
||||
color: #1677ff;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: rgb(32, 160, 255);
|
||||
color: #4096ff;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@
|
|||
left: 0;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||||
-webkit-box-shadow: 2px 0 8px rgba(22, 119, 255, 0.15);
|
||||
box-shadow: 2px 0 8px rgba(22, 119, 255, 0.15);
|
||||
|
||||
// reset element-ui css
|
||||
.horizontal-collapse-transition {
|
||||
|
|
@ -80,24 +80,44 @@
|
|||
display: inline-block !important;
|
||||
}
|
||||
|
||||
// menu hover
|
||||
// menu hover - 现代化蓝色主题
|
||||
.sub-menu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .theme-dark .is-active > .el-sub-menu__title {
|
||||
color: vars.$base-menu-color-active !important;
|
||||
background-color: rgba(255, 255, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
& .theme-dark .el-menu-item.is-active {
|
||||
background-color: rgba(255, 255, 255, 0.15) !important;
|
||||
color: vars.$base-menu-color-active !important;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
& .nest-menu .el-sub-menu>.el-sub-menu__title,
|
||||
& .el-sub-menu .el-menu-item {
|
||||
min-width: vars.$base-sidebar-width !important;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,31 +8,31 @@ $tiffany: #4AB7BD;
|
|||
$yellow: #FEC171;
|
||||
$panGreen: #30B08F;
|
||||
|
||||
// 默认主题变量
|
||||
$menuText: #bfcbd9;
|
||||
$menuActiveText: #409eff;
|
||||
$menuBg: #304156;
|
||||
$menuHover: #263445;
|
||||
// 默认主题变量 - 现代化蓝色主题
|
||||
$menuText: #e8f4ff;
|
||||
$menuActiveText: #ffffff;
|
||||
$menuBg: #1677ff;
|
||||
$menuHover: #0958d9;
|
||||
|
||||
// 浅色主题theme-light
|
||||
$menuLightBg: #ffffff;
|
||||
$menuLightHover: #f0f1f5;
|
||||
$menuLightHover: #f0f7ff;
|
||||
$menuLightText: #303133;
|
||||
$menuLightActiveText: #409EFF;
|
||||
$menuLightActiveText: #1677ff;
|
||||
|
||||
// 基础变量
|
||||
$base-sidebar-width: 200px;
|
||||
$sideBarWidth: 200px;
|
||||
|
||||
// 菜单暗色变量
|
||||
$base-menu-color: #bfcbd9;
|
||||
$base-menu-color-active: #f4f4f5;
|
||||
$base-menu-background: #304156;
|
||||
$base-sub-menu-background: #1f2d3d;
|
||||
$base-sub-menu-hover: #001528;
|
||||
// 菜单暗色变量 - 现代化蓝色主题
|
||||
$base-menu-color: #e8f4ff;
|
||||
$base-menu-color-active: #ffffff;
|
||||
$base-menu-background: #1677ff;
|
||||
$base-sub-menu-background: #0958d9;
|
||||
$base-sub-menu-hover: #003eb3;
|
||||
|
||||
// 组件变量
|
||||
$--color-primary: #409EFF;
|
||||
// 组件变量 - 现代化蓝色主题
|
||||
$--color-primary: #1677ff;
|
||||
$--color-success: #67C23A;
|
||||
$--color-warning: #E6A23C;
|
||||
$--color-danger: #F56C6C;
|
||||
|
|
@ -67,17 +67,31 @@ $--color-info: #909399;
|
|||
|
||||
// CSS变量定义
|
||||
:root {
|
||||
/* 亮色模式变量 */
|
||||
/* 亮色模式变量 - 现代化蓝色主题 */
|
||||
--sidebar-bg: #{$menuBg};
|
||||
--sidebar-text: #{$menuText};
|
||||
--menu-hover: #{$menuHover};
|
||||
--menu-active-bg: rgba(255, 255, 255, 0.15);
|
||||
|
||||
--navbar-bg: #ffffff;
|
||||
--navbar-text: #303133;
|
||||
--navbar-border: #f0f0f0;
|
||||
|
||||
/* Element Plus 主题色 */
|
||||
--el-color-primary: #1677ff;
|
||||
--el-color-primary-light-1: #4096ff;
|
||||
--el-color-primary-light-2: #69b1ff;
|
||||
--el-color-primary-light-3: #91caff;
|
||||
--el-color-primary-light-4: #bae0ff;
|
||||
--el-color-primary-light-5: #d6e4ff;
|
||||
--el-color-primary-light-6: #e6f4ff;
|
||||
--el-color-primary-light-7: #f0f7ff;
|
||||
--el-color-primary-light-8: #f5f9ff;
|
||||
--el-color-primary-light-9: #fafcff;
|
||||
--el-color-primary-dark-2: #0958d9;
|
||||
|
||||
/* splitpanes default-theme 变量 */
|
||||
--splitpanes-default-bg: #ffffff;
|
||||
|
||||
}
|
||||
|
||||
// 暗黑模式变量
|
||||
|
|
|
|||
|
|
@ -1,56 +1,72 @@
|
|||
<template>
|
||||
<div class="navbar">
|
||||
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
<breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
|
||||
<top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
|
||||
<div class="navbar">
|
||||
<hamburger
|
||||
id="hamburger-container"
|
||||
:is-active="appStore.sidebar.opened"
|
||||
class="hamburger-container"
|
||||
@toggleClick="toggleSideBar"
|
||||
/>
|
||||
<breadcrumb
|
||||
v-if="!settingsStore.topNav"
|
||||
id="breadcrumb-container"
|
||||
class="breadcrumb-container"
|
||||
/>
|
||||
<top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
|
||||
|
||||
<div class="right-menu">
|
||||
<template v-if="appStore.device !== 'mobile'">
|
||||
<header-search id="header-search" class="right-menu-item" />
|
||||
<div class="right-menu">
|
||||
<template v-if="appStore.device !== 'mobile'">
|
||||
<header-search id="header-search" class="right-menu-item" />
|
||||
|
||||
<el-tooltip content="源码地址" effect="dark" placement="bottom">
|
||||
<!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
|
||||
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="文档地址" effect="dark" placement="bottom">
|
||||
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
</el-tooltip> -->
|
||||
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
|
||||
<el-tooltip content="主题模式" effect="dark" placement="bottom">
|
||||
<div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
|
||||
<svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
|
||||
<svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="主题模式" effect="dark" placement="bottom">
|
||||
<div
|
||||
class="right-menu-item hover-effect theme-switch-wrapper"
|
||||
@click="toggleTheme"
|
||||
>
|
||||
<svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
|
||||
<svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="userStore.avatar" class="user-avatar" />
|
||||
<span class="user-nickname"> {{ userStore.nickName }} </span>
|
||||
<el-dropdown
|
||||
@command="handleCommand"
|
||||
class="avatar-container right-menu-item hover-effect"
|
||||
trigger="hover"
|
||||
>
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="userStore.avatar" class="user-avatar" />
|
||||
<span class="user-nickname"> {{ userStore.nickName }} </span>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<router-link to="/user/profile">
|
||||
<el-dropdown-item>个人中心</el-dropdown-item>
|
||||
</router-link>
|
||||
<el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
|
||||
<span>布局设置</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided command="logout">
|
||||
<span>退出登录</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<router-link to="/user/profile">
|
||||
<el-dropdown-item>个人中心</el-dropdown-item>
|
||||
</router-link>
|
||||
<el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
|
||||
<span>布局设置</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided command="logout">
|
||||
<span>退出登录</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -72,62 +88,67 @@ const userStore = useUserStore()
|
|||
const settingsStore = useSettingsStore()
|
||||
|
||||
function toggleSideBar() {
|
||||
appStore.toggleSideBar()
|
||||
appStore.toggleSideBar()
|
||||
}
|
||||
|
||||
function handleCommand(command) {
|
||||
switch (command) {
|
||||
case "setLayout":
|
||||
setLayout()
|
||||
break
|
||||
case "logout":
|
||||
logout()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
switch (command) {
|
||||
case 'setLayout':
|
||||
setLayout()
|
||||
break
|
||||
case 'logout':
|
||||
logout()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function logout() {
|
||||
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
userStore.logOut().then(() => {
|
||||
location.href = '/index'
|
||||
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
}).catch(() => { })
|
||||
.then(() => {
|
||||
userStore.logOut().then(() => {
|
||||
location.href = '/index'
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const emits = defineEmits(['setLayout'])
|
||||
function setLayout() {
|
||||
emits('setLayout')
|
||||
emits('setLayout')
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
settingsStore.toggleTheme()
|
||||
settingsStore.toggleTheme()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: var(--navbar-bg);
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
border-bottom: 1px solid var(--navbar-border, #f0f0f0);
|
||||
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
|
||||
backdrop-filter: blur(12px);
|
||||
|
||||
.hamburger-container {
|
||||
line-height: 46px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
transition: background 0.25s ease, transform 0.2s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.025);
|
||||
background: rgba(22, 119, 255, 0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -150,75 +171,94 @@ function toggleTheme() {
|
|||
height: 100%;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 12px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.right-menu-item {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
margin: 0 2px;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
color: #5a5e66;
|
||||
vertical-align: text-bottom;
|
||||
color: #4b5563;
|
||||
vertical-align: middle;
|
||||
border-radius: 999px;
|
||||
transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.025);
|
||||
background: rgba(22, 119, 255, 0.08);
|
||||
color: #1677ff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
&.theme-switch-wrapper {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
transition: transform 0.3s;
|
||||
|
||||
transition: transform 0.25s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.15);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 0px;
|
||||
padding-right: 0px;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-top: 10px;
|
||||
right: 8px;
|
||||
position: relative;
|
||||
right: 0;
|
||||
margin-top: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(17, 24, 39, 0.02);
|
||||
transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
|
||||
}
|
||||
|
||||
.user-nickname{
|
||||
position: relative;
|
||||
left: 0px;
|
||||
bottom: 10px;
|
||||
.user-nickname {
|
||||
position: static;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .avatar-wrapper {
|
||||
background: rgba(22, 119, 255, 0.1);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ const showSettings = ref(false)
|
|||
const theme = ref(settingsStore.theme)
|
||||
const sideTheme = ref(settingsStore.sideTheme)
|
||||
const storeSettings = computed(() => settingsStore)
|
||||
const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"])
|
||||
const predefineColors = ref(["#1677ff", "#4096ff", "#0958d9", "#722ed1", "#eb2f96", "#f5222d", "#fa8c16", "#52c41a"])
|
||||
|
||||
/** 是否需要topnav */
|
||||
function topNavChange(val) {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<el-scrollbar
|
||||
ref="scrollContainer"
|
||||
:vertical="false"
|
||||
class="scroll-container"
|
||||
@wheel.prevent="handleScroll"
|
||||
>
|
||||
<slot />
|
||||
</el-scrollbar>
|
||||
<el-scrollbar
|
||||
ref="scrollContainer"
|
||||
:vertical="false"
|
||||
class="scroll-container"
|
||||
@wheel.prevent="handleScroll"
|
||||
>
|
||||
<slot />
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -18,90 +18,119 @@ const { proxy } = getCurrentInstance()
|
|||
const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrapRef)
|
||||
|
||||
onMounted(() => {
|
||||
scrollWrapper.value.addEventListener('scroll', emitScroll, true)
|
||||
scrollWrapper.value.addEventListener('scroll', emitScroll, true)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
scrollWrapper.value.removeEventListener('scroll', emitScroll)
|
||||
scrollWrapper.value.removeEventListener('scroll', emitScroll)
|
||||
})
|
||||
|
||||
function handleScroll(e) {
|
||||
const eventDelta = e.wheelDelta || -e.deltaY * 40
|
||||
const $scrollWrapper = scrollWrapper.value
|
||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
|
||||
const eventDelta = e.wheelDelta || -e.deltaY * 40
|
||||
const $scrollWrapper = scrollWrapper.value
|
||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
|
||||
}
|
||||
|
||||
const emits = defineEmits()
|
||||
const emitScroll = () => {
|
||||
emits('scroll')
|
||||
emits('scroll')
|
||||
}
|
||||
|
||||
const tagsViewStore = useTagsViewStore()
|
||||
const visitedViews = computed(() => tagsViewStore.visitedViews)
|
||||
|
||||
function moveToTarget(currentTag) {
|
||||
const $container = proxy.$refs.scrollContainer.$el
|
||||
const $containerWidth = $container.offsetWidth
|
||||
const $scrollWrapper = scrollWrapper.value
|
||||
const $container = proxy.$refs.scrollContainer.$el
|
||||
const $containerWidth = $container.offsetWidth
|
||||
const $scrollWrapper = scrollWrapper.value
|
||||
|
||||
let firstTag = null
|
||||
let lastTag = null
|
||||
let firstTag = null
|
||||
let lastTag = null
|
||||
|
||||
// find first tag and last tag
|
||||
if (visitedViews.value.length > 0) {
|
||||
firstTag = visitedViews.value[0]
|
||||
lastTag = visitedViews.value[visitedViews.value.length - 1]
|
||||
}
|
||||
|
||||
if (firstTag === currentTag) {
|
||||
$scrollWrapper.scrollLeft = 0
|
||||
} else if (lastTag === currentTag) {
|
||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
|
||||
} else {
|
||||
const tagListDom = document.getElementsByClassName('tags-view-item')
|
||||
const currentIndex = visitedViews.value.findIndex(item => item === currentTag)
|
||||
let prevTag = null
|
||||
let nextTag = null
|
||||
for (const k in tagListDom) {
|
||||
if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
|
||||
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
|
||||
prevTag = tagListDom[k]
|
||||
}
|
||||
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
|
||||
nextTag = tagListDom[k]
|
||||
}
|
||||
}
|
||||
// find first tag and last tag
|
||||
if (visitedViews.value.length > 0) {
|
||||
firstTag = visitedViews.value[0]
|
||||
lastTag = visitedViews.value[visitedViews.value.length - 1]
|
||||
}
|
||||
|
||||
// the tag's offsetLeft after of nextTag
|
||||
const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value
|
||||
if (firstTag === currentTag) {
|
||||
$scrollWrapper.scrollLeft = 0
|
||||
} else if (lastTag === currentTag) {
|
||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
|
||||
} else {
|
||||
const tagListDom = document.getElementsByClassName('tags-view-item')
|
||||
const currentIndex = visitedViews.value.findIndex((item) => item === currentTag)
|
||||
let prevTag = null
|
||||
let nextTag = null
|
||||
for (const k in tagListDom) {
|
||||
if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
|
||||
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
|
||||
prevTag = tagListDom[k]
|
||||
}
|
||||
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
|
||||
nextTag = tagListDom[k]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// the tag's offsetLeft before of prevTag
|
||||
const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value
|
||||
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
|
||||
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
|
||||
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
|
||||
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
|
||||
// the tag's offsetLeft after of nextTag
|
||||
const afterNextTagOffsetLeft =
|
||||
nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value
|
||||
|
||||
// the tag's offsetLeft before of prevTag
|
||||
const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value
|
||||
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
|
||||
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
|
||||
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
|
||||
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
moveToTarget,
|
||||
moveToTarget,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.scroll-container {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
:deep(.el-scrollbar__bar) {
|
||||
bottom: 0px;
|
||||
}
|
||||
:deep(.el-scrollbar__wrap) {
|
||||
height: 39px;
|
||||
}
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
// 让标签在垂直方向完全居中
|
||||
:deep(.el-scrollbar__wrap) {
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
// 优化横向滚动条样式（更细）
|
||||
:deep(.el-scrollbar__bar.is-horizontal) {
|
||||
bottom: 2px;
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background-color: transparent;
|
||||
transition: opacity 0.2s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:deep(.el-scrollbar__thumb) {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background-color: rgba(148, 163, 184, 0.7); /* slate 灰 */
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
// hover 时显示更明显的滚动条，并用主题色
|
||||
&:hover {
|
||||
:deep(.el-scrollbar__bar.is-horizontal) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:deep(.el-scrollbar__thumb) {
|
||||
background-color: var(--el-color-primary, #1677ff);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,51 @@
|
|||
<template>
|
||||
<div id="tags-view-container" class="tags-view-container">
|
||||
<scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
|
||||
<router-link
|
||||
v-for="tag in visitedViews"
|
||||
:key="tag.path"
|
||||
:data-path="tag.path"
|
||||
:class="{ 'active': isActive(tag), 'has-icon': tagsIcon }"
|
||||
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
|
||||
class="tags-view-item"
|
||||
:style="activeStyle(tag)"
|
||||
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
|
||||
@contextmenu.prevent="openMenu(tag, $event)"
|
||||
>
|
||||
<svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon" />
|
||||
{{ tag.title }}
|
||||
<span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
|
||||
<close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
|
||||
</span>
|
||||
</router-link>
|
||||
</scroll-pane>
|
||||
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
|
||||
<li @click="refreshSelectedTag(selectedTag)">
|
||||
<refresh-right style="width: 1em; height: 1em;" /> 刷新页面
|
||||
</li>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
|
||||
<close style="width: 1em; height: 1em;" /> 关闭当前
|
||||
</li>
|
||||
<li @click="closeOthersTags">
|
||||
<circle-close style="width: 1em; height: 1em;" /> 关闭其他
|
||||
</li>
|
||||
<li v-if="!isFirstView()" @click="closeLeftTags">
|
||||
<back style="width: 1em; height: 1em;" /> 关闭左侧
|
||||
</li>
|
||||
<li v-if="!isLastView()" @click="closeRightTags">
|
||||
<right style="width: 1em; height: 1em;" /> 关闭右侧
|
||||
</li>
|
||||
<li @click="closeAllTags(selectedTag)">
|
||||
<circle-close style="width: 1em; height: 1em;" /> 全部关闭
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="tags-view-container" class="tags-view-container">
|
||||
<scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
|
||||
<router-link
|
||||
v-for="tag in visitedViews"
|
||||
:key="tag.path"
|
||||
:data-path="tag.path"
|
||||
:class="{ active: isActive(tag), 'has-icon': tagsIcon }"
|
||||
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
|
||||
class="tags-view-item"
|
||||
:style="activeStyle(tag)"
|
||||
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
|
||||
@contextmenu.prevent="openMenu(tag, $event)"
|
||||
>
|
||||
<svg-icon
|
||||
v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'"
|
||||
:icon-class="tag.meta.icon"
|
||||
/>
|
||||
{{ tag.title }}
|
||||
<span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
|
||||
<close
|
||||
class="el-icon-close"
|
||||
style="width: 1em; height: 1em; vertical-align: middle"
|
||||
/>
|
||||
</span>
|
||||
</router-link>
|
||||
</scroll-pane>
|
||||
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
|
||||
<li @click="refreshSelectedTag(selectedTag)">
|
||||
<refresh-right style="width: 1em; height: 1em" /> 刷新页面
|
||||
</li>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
|
||||
<close style="width: 1em; height: 1em" /> 关闭当前
|
||||
</li>
|
||||
<li @click="closeOthersTags">
|
||||
<circle-close style="width: 1em; height: 1em" /> 关闭其他
|
||||
</li>
|
||||
<li v-if="!isFirstView()" @click="closeLeftTags">
|
||||
<back style="width: 1em; height: 1em" /> 关闭左侧
|
||||
</li>
|
||||
<li v-if="!isLastView()" @click="closeRightTags">
|
||||
<right style="width: 1em; height: 1em" /> 关闭右侧
|
||||
</li>
|
||||
<li @click="closeAllTags(selectedTag)">
|
||||
<circle-close style="width: 1em; height: 1em" /> 全部关闭
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -66,306 +72,335 @@ const theme = computed(() => useSettingsStore().theme)
|
|||
const tagsIcon = computed(() => useSettingsStore().tagsIcon)
|
||||
|
||||
watch(route, () => {
|
||||
addTags()
|
||||
moveToCurrentTag()
|
||||
addTags()
|
||||
moveToCurrentTag()
|
||||
})
|
||||
|
||||
watch(visible, (value) => {
|
||||
if (value) {
|
||||
document.body.addEventListener('click', closeMenu)
|
||||
} else {
|
||||
document.body.removeEventListener('click', closeMenu)
|
||||
}
|
||||
if (value) {
|
||||
document.body.addEventListener('click', closeMenu)
|
||||
} else {
|
||||
document.body.removeEventListener('click', closeMenu)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
initTags()
|
||||
addTags()
|
||||
initTags()
|
||||
addTags()
|
||||
})
|
||||
|
||||
function isActive(r) {
|
||||
return r.path === route.path
|
||||
return r.path === route.path
|
||||
}
|
||||
|
||||
function activeStyle(tag) {
|
||||
if (!isActive(tag)) return {}
|
||||
return {
|
||||
"background-color": theme.value,
|
||||
"border-color": theme.value
|
||||
}
|
||||
if (!isActive(tag)) return {}
|
||||
return {
|
||||
'background-color': theme.value,
|
||||
'border-color': theme.value,
|
||||
}
|
||||
}
|
||||
|
||||
function isAffix(tag) {
|
||||
return tag.meta && tag.meta.affix
|
||||
return tag.meta && tag.meta.affix
|
||||
}
|
||||
|
||||
function isFirstView() {
|
||||
try {
|
||||
return selectedTag.value.fullPath === '/index' || selectedTag.value.fullPath === visitedViews.value[1].fullPath
|
||||
} catch (err) {
|
||||
return false
|
||||
}
|
||||
try {
|
||||
return (
|
||||
selectedTag.value.fullPath === '/index' ||
|
||||
selectedTag.value.fullPath === visitedViews.value[1].fullPath
|
||||
)
|
||||
} catch (err) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
function isLastView() {
|
||||
try {
|
||||
return selectedTag.value.fullPath === visitedViews.value[visitedViews.value.length - 1].fullPath
|
||||
} catch (err) {
|
||||
return false
|
||||
}
|
||||
try {
|
||||
return (
|
||||
selectedTag.value.fullPath ===
|
||||
visitedViews.value[visitedViews.value.length - 1].fullPath
|
||||
)
|
||||
} catch (err) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
function filterAffixTags(routes, basePath = '') {
|
||||
let tags = []
|
||||
routes.forEach(route => {
|
||||
if (route.meta && route.meta.affix) {
|
||||
const tagPath = getNormalPath(basePath + '/' + route.path)
|
||||
tags.push({
|
||||
fullPath: tagPath,
|
||||
path: tagPath,
|
||||
name: route.name,
|
||||
meta: { ...route.meta }
|
||||
})
|
||||
}
|
||||
if (route.children) {
|
||||
const tempTags = filterAffixTags(route.children, route.path)
|
||||
if (tempTags.length >= 1) {
|
||||
tags = [...tags, ...tempTags]
|
||||
}
|
||||
}
|
||||
})
|
||||
return tags
|
||||
let tags = []
|
||||
routes.forEach((route) => {
|
||||
if (route.meta && route.meta.affix) {
|
||||
const tagPath = getNormalPath(basePath + '/' + route.path)
|
||||
tags.push({
|
||||
fullPath: tagPath,
|
||||
path: tagPath,
|
||||
name: route.name,
|
||||
meta: { ...route.meta },
|
||||
})
|
||||
}
|
||||
if (route.children) {
|
||||
const tempTags = filterAffixTags(route.children, route.path)
|
||||
if (tempTags.length >= 1) {
|
||||
tags = [...tags, ...tempTags]
|
||||
}
|
||||
}
|
||||
})
|
||||
return tags
|
||||
}
|
||||
|
||||
function initTags() {
|
||||
const res = filterAffixTags(routes.value)
|
||||
affixTags.value = res
|
||||
for (const tag of res) {
|
||||
// Must have tag name
|
||||
if (tag.name) {
|
||||
useTagsViewStore().addVisitedView(tag)
|
||||
const res = filterAffixTags(routes.value)
|
||||
affixTags.value = res
|
||||
for (const tag of res) {
|
||||
// Must have tag name
|
||||
if (tag.name) {
|
||||
useTagsViewStore().addVisitedView(tag)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addTags() {
|
||||
const { name } = route
|
||||
if (name) {
|
||||
useTagsViewStore().addView(route)
|
||||
}
|
||||
const { name } = route
|
||||
if (name) {
|
||||
useTagsViewStore().addView(route)
|
||||
}
|
||||
}
|
||||
|
||||
function moveToCurrentTag() {
|
||||
nextTick(() => {
|
||||
for (const r of visitedViews.value) {
|
||||
if (r.path === route.path) {
|
||||
scrollPaneRef.value.moveToTarget(r)
|
||||
// when query is different then update
|
||||
if (r.fullPath !== route.fullPath) {
|
||||
useTagsViewStore().updateVisitedView(route)
|
||||
nextTick(() => {
|
||||
for (const r of visitedViews.value) {
|
||||
if (r.path === route.path) {
|
||||
scrollPaneRef.value.moveToTarget(r)
|
||||
// when query is different then update
|
||||
if (r.fullPath !== route.fullPath) {
|
||||
useTagsViewStore().updateVisitedView(route)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function refreshSelectedTag(view) {
|
||||
proxy.$tab.refreshPage(view)
|
||||
if (route.meta.link) {
|
||||
useTagsViewStore().delIframeView(route)
|
||||
}
|
||||
proxy.$tab.refreshPage(view)
|
||||
if (route.meta.link) {
|
||||
useTagsViewStore().delIframeView(route)
|
||||
}
|
||||
}
|
||||
|
||||
function closeSelectedTag(view) {
|
||||
proxy.$tab.closePage(view).then(({ visitedViews }) => {
|
||||
if (isActive(view)) {
|
||||
toLastView(visitedViews, view)
|
||||
}
|
||||
})
|
||||
proxy.$tab.closePage(view).then(({ visitedViews }) => {
|
||||
if (isActive(view)) {
|
||||
toLastView(visitedViews, view)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function closeRightTags() {
|
||||
proxy.$tab.closeRightPage(selectedTag.value).then(visitedViews => {
|
||||
if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
|
||||
toLastView(visitedViews)
|
||||
}
|
||||
})
|
||||
proxy.$tab.closeRightPage(selectedTag.value).then((visitedViews) => {
|
||||
if (!visitedViews.find((i) => i.fullPath === route.fullPath)) {
|
||||
toLastView(visitedViews)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function closeLeftTags() {
|
||||
proxy.$tab.closeLeftPage(selectedTag.value).then(visitedViews => {
|
||||
if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
|
||||
toLastView(visitedViews)
|
||||
}
|
||||
})
|
||||
proxy.$tab.closeLeftPage(selectedTag.value).then((visitedViews) => {
|
||||
if (!visitedViews.find((i) => i.fullPath === route.fullPath)) {
|
||||
toLastView(visitedViews)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function closeOthersTags() {
|
||||
router.push(selectedTag.value).catch(() => { })
|
||||
proxy.$tab.closeOtherPage(selectedTag.value).then(() => {
|
||||
moveToCurrentTag()
|
||||
})
|
||||
router.push(selectedTag.value).catch(() => {})
|
||||
proxy.$tab.closeOtherPage(selectedTag.value).then(() => {
|
||||
moveToCurrentTag()
|
||||
})
|
||||
}
|
||||
|
||||
function closeAllTags(view) {
|
||||
proxy.$tab.closeAllPage().then(({ visitedViews }) => {
|
||||
if (affixTags.value.some(tag => tag.path === route.path)) {
|
||||
return
|
||||
}
|
||||
toLastView(visitedViews, view)
|
||||
})
|
||||
proxy.$tab.closeAllPage().then(({ visitedViews }) => {
|
||||
if (affixTags.value.some((tag) => tag.path === route.path)) {
|
||||
return
|
||||
}
|
||||
toLastView(visitedViews, view)
|
||||
})
|
||||
}
|
||||
|
||||
function toLastView(visitedViews, view) {
|
||||
const latestView = visitedViews.slice(-1)[0]
|
||||
if (latestView) {
|
||||
router.push(latestView.fullPath)
|
||||
} else {
|
||||
// now the default is to redirect to the home page if there is no tags-view,
|
||||
// you can adjust it according to your needs.
|
||||
if (view.name === 'Dashboard') {
|
||||
// to reload home page
|
||||
router.replace({ path: '/redirect' + view.fullPath })
|
||||
const latestView = visitedViews.slice(-1)[0]
|
||||
if (latestView) {
|
||||
router.push(latestView.fullPath)
|
||||
} else {
|
||||
router.push('/')
|
||||
// now the default is to redirect to the home page if there is no tags-view,
|
||||
// you can adjust it according to your needs.
|
||||
if (view.name === 'Dashboard') {
|
||||
// to reload home page
|
||||
router.replace({ path: '/redirect' + view.fullPath })
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function openMenu(tag, e) {
|
||||
const menuMinWidth = 105
|
||||
const offsetLeft = proxy.$el.getBoundingClientRect().left // container margin left
|
||||
const offsetWidth = proxy.$el.offsetWidth // container width
|
||||
const maxLeft = offsetWidth - menuMinWidth // left boundary
|
||||
const l = e.clientX - offsetLeft + 15 // 15: margin right
|
||||
const menuMinWidth = 105
|
||||
const offsetLeft = proxy.$el.getBoundingClientRect().left // container margin left
|
||||
const offsetWidth = proxy.$el.offsetWidth // container width
|
||||
const maxLeft = offsetWidth - menuMinWidth // left boundary
|
||||
const l = e.clientX - offsetLeft + 15 // 15: margin right
|
||||
|
||||
if (l > maxLeft) {
|
||||
left.value = maxLeft
|
||||
} else {
|
||||
left.value = l
|
||||
}
|
||||
if (l > maxLeft) {
|
||||
left.value = maxLeft
|
||||
} else {
|
||||
left.value = l
|
||||
}
|
||||
|
||||
top.value = e.clientY
|
||||
visible.value = true
|
||||
selectedTag.value = tag
|
||||
top.value = e.clientY
|
||||
visible.value = true
|
||||
selectedTag.value = tag
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
visible.value = false
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
function handleScroll() {
|
||||
closeMenu()
|
||||
closeMenu()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tags-view-container {
|
||||
height: 34px;
|
||||
width: 100%;
|
||||
background: var(--tags-bg, #fff);
|
||||
border-bottom: 1px solid var(--tags-item-border, #d8dce5);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
background: var(--tags-bg, #f9fafb);
|
||||
border-bottom: 1px solid var(--tags-item-border, #e5e7eb);
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tags-view-wrapper {
|
||||
.tags-view-item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border: 1px solid var(--tags-item-border, #d8dce5);
|
||||
color: var(--tags-item-text, #495060);
|
||||
background: var(--tags-item-bg, #fff);
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
margin-top: 4px;
|
||||
.tags-view-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.tags-view-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #e5e7eb;
|
||||
color: var(--tags-item-text, #4b5563);
|
||||
background: #ffffff;
|
||||
padding: 0 14px;
|
||||
font-size: 12px;
|
||||
margin-left: 6px;
|
||||
margin-top: 0;
|
||||
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
|
||||
transform 0.2s ease, box-shadow 0.2s ease;
|
||||
max-width: 180px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 15px;
|
||||
}
|
||||
&:first-of-type {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #42b983;
|
||||
color: #fff;
|
||||
border-color: #42b983;
|
||||
&:last-of-type {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-right: 5px;
|
||||
&.active {
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
border-color: #1677ff;
|
||||
box-shadow: 0 3px 10px rgba(22, 119, 255, 0.25);
|
||||
transform: translateY(-1px);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(.active) {
|
||||
background-color: #f3f6ff;
|
||||
color: #1677ff;
|
||||
border-color: #d6e4ff;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags-view-item.active.has-icon::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
.contextmenu {
|
||||
margin: 0;
|
||||
background: var(--el-bg-color-overlay, #fff);
|
||||
z-index: 3000;
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
padding: 5px 0;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--tags-item-text, #333);
|
||||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
|
||||
border: 1px solid var(--el-border-color-light, #e4e7ed);
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 7px 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--tags-item-hover, #eee);
|
||||
}
|
||||
.tags-view-item.active.has-icon::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
.contextmenu {
|
||||
margin: 0;
|
||||
background: var(--el-bg-color-overlay, #fff);
|
||||
z-index: 3000;
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
padding: 5px 0;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--tags-item-text, #333);
|
||||
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
|
||||
border: 1px solid var(--el-border-color-light, #e4e7ed);
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 7px 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--tags-item-hover, #f3f4ff);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
//reset element css of el-icon-close
|
||||
.tags-view-wrapper {
|
||||
.tags-view-item {
|
||||
.el-icon-close {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: 2px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
||||
transform-origin: 100% 50%;
|
||||
.tags-view-item {
|
||||
.el-icon-close {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: 2px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
transform-origin: 100% 50%;
|
||||
|
||||
&:before {
|
||||
transform: scale(.6);
|
||||
display: inline-block;
|
||||
vertical-align: -3px;
|
||||
}
|
||||
&:before {
|
||||
transform: scale(0.6);
|
||||
display: inline-block;
|
||||
vertical-align: -3px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--tags-close-hover, #b4bccc);
|
||||
color: #fff;
|
||||
width: 12px !important;
|
||||
height: 12px !important;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--tags-close-hover, #b4bccc);
|
||||
color: #fff;
|
||||
width: 12px !important;
|
||||
height: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ import '@/assets/styles/index.scss' // global css
|
|||
import App from './App'
|
||||
import store from './store'
|
||||
import router from './router'
|
||||
import { handleThemeStyle } from '@/utils/theme'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import directive from './directive' // directive
|
||||
|
||||
// 注册指令
|
||||
|
|
@ -81,4 +83,8 @@ app.use(ElementPlus, {
|
|||
size: Cookies.get('size') || 'default'
|
||||
})
|
||||
|
||||
// 初始化主题色
|
||||
const settingsStore = useSettingsStore()
|
||||
handleThemeStyle(settingsStore.theme)
|
||||
|
||||
app.mount('#app')
|
||||
|
|
|
|||
|
|
@ -1,57 +1,56 @@
|
|||
export default {
|
||||
/**
|
||||
* 网页标题
|
||||
*/
|
||||
title: import.meta.env.VITE_APP_TITLE,
|
||||
/**
|
||||
* 网页标题
|
||||
*/
|
||||
title: import.meta.env.VITE_APP_TITLE,
|
||||
|
||||
/**
|
||||
* 侧边栏主题 深色主题theme-dark，浅色主题theme-light
|
||||
*/
|
||||
sideTheme: 'theme-dark',
|
||||
/**
|
||||
* 侧边栏主题 深色主题theme-dark，浅色主题theme-light
|
||||
*/
|
||||
sideTheme: 'theme-dark',
|
||||
|
||||
/**
|
||||
* 是否系统布局配置
|
||||
*/
|
||||
showSettings: true,
|
||||
/**
|
||||
* 是否系统布局配置
|
||||
*/
|
||||
showSettings: true,
|
||||
|
||||
/**
|
||||
* 是否显示顶部导航
|
||||
*/
|
||||
topNav: false,
|
||||
/**
|
||||
* 是否显示顶部导航
|
||||
*/
|
||||
topNav: false,
|
||||
|
||||
/**
|
||||
* 是否显示 tagsView
|
||||
*/
|
||||
tagsView: true,
|
||||
|
||||
/**
|
||||
* 显示页签图标
|
||||
*/
|
||||
tagsIcon: false,
|
||||
/**
|
||||
* 是否显示 tagsView
|
||||
*/
|
||||
tagsView: true,
|
||||
|
||||
/**
|
||||
* 是否固定头部
|
||||
*/
|
||||
fixedHeader: false,
|
||||
/**
|
||||
* 显示页签图标
|
||||
*/
|
||||
tagsIcon: false,
|
||||
|
||||
/**
|
||||
* 是否显示logo
|
||||
*/
|
||||
sidebarLogo: true,
|
||||
/**
|
||||
* 是否固定头部
|
||||
*/
|
||||
fixedHeader: true,
|
||||
|
||||
/**
|
||||
* 是否显示动态标题
|
||||
*/
|
||||
dynamicTitle: false,
|
||||
/**
|
||||
* 是否显示logo
|
||||
*/
|
||||
sidebarLogo: true,
|
||||
|
||||
/**
|
||||
* 是否显示底部版权
|
||||
*/
|
||||
footerVisible: false,
|
||||
/**
|
||||
* 是否显示动态标题
|
||||
*/
|
||||
dynamicTitle: false,
|
||||
|
||||
/**
|
||||
* 底部版权文本内容
|
||||
*/
|
||||
footerContent: 'Copyright © 2018-2025 RuoYi. All Rights Reserved.'
|
||||
/**
|
||||
* 是否显示底部版权
|
||||
*/
|
||||
footerVisible: false,
|
||||
|
||||
/**
|
||||
* 底部版权文本内容
|
||||
*/
|
||||
footerContent: 'Copyright © 2025 计划管理平台. All Rights Reserved.',
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const useSettingsStore = defineStore(
|
|||
{
|
||||
state: () => ({
|
||||
title: '',
|
||||
theme: storageSetting.theme || '#409EFF',
|
||||
theme: storageSetting.theme || '#1677ff',
|
||||
sideTheme: storageSetting.sideTheme || sideTheme,
|
||||
showSettings: showSettings,
|
||||
topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
export default {
|
||||
formColumns: [
|
||||
{
|
||||
type: 'input',
|
||||
prop: 'name',
|
||||
placeholder: '请输入运检站名称',
|
||||
},
|
||||
],
|
||||
tableColumns: [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '运检站名称',
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '备注',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
@ -1,9 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>运检站管理</h1>
|
||||
<div class="app-container">
|
||||
<ComTable :form-columns="formColumns" :table-columns="tableColumns" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="InspectionStation"></script>
|
||||
<script setup name="InspectionStation">
|
||||
import { ref } from 'vue'
|
||||
import config from './config'
|
||||
import ComTable from '@/components/ComTable/index.vue'
|
||||
|
||||
<style></style>
|
||||
const { formColumns, tableColumns } = config
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,429 +1,221 @@
|
|||
<template>
|
||||
<div class="dashboard">
|
||||
<section class="intro">
|
||||
<p class="eyebrow">欢迎使用 · Dashboard</p>
|
||||
<h1>运检站管理系统</h1>
|
||||
<p class="subtitle">
|
||||
基于若依框架和Element
|
||||
Plus组件库构建的企业级运检站管理系统，提供丰富的组件展示和系统管理功能。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="stats-grid">
|
||||
<el-card v-for="stat in stats" :key="stat.id" shadow="hover" class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon" :style="{ background: stat.color }">
|
||||
<svg-icon :icon-class="stat.icon" class="icon" />
|
||||
<div class="home">
|
||||
<section class="home-hero">
|
||||
<div class="home-hero-main">
|
||||
<p class="home-tag">计划管理平台 · 占位首页</p>
|
||||
<h1 class="home-title">
|
||||
欢迎进入<br />
|
||||
运检站计划管理平台
|
||||
</h1>
|
||||
<p class="home-subtitle">
|
||||
这里将展示整体经营概况、计划执行情况等关键信息。当前为静态占位页，后续可根据产品设计替换为正式首页。
|
||||
</p>
|
||||
</div>
|
||||
<div class="home-hero-panel">
|
||||
<div class="panel-header">今日概览</div>
|
||||
<div class="panel-body">
|
||||
<div class="panel-item">
|
||||
<span class="panel-label">计划任务</span>
|
||||
<span class="panel-value">—</span>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ stat.value }}</div>
|
||||
<div class="stat-label">{{ stat.label }}</div>
|
||||
<div class="panel-item">
|
||||
<span class="panel-label">已完成</span>
|
||||
<span class="panel-value">—</span>
|
||||
</div>
|
||||
<div class="panel-item">
|
||||
<span class="panel-label">预警事项</span>
|
||||
<span class="panel-value">—</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">数据接入后将在此区域展示核心指标。</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="home-grid">
|
||||
<el-card shadow="hover" class="home-card">
|
||||
<h3>基础管理</h3>
|
||||
<p>用于维护人员、岗位、站点等基础资料，为后续计划和统计提供统一数据源。</p>
|
||||
</el-card>
|
||||
<el-card shadow="hover" class="home-card">
|
||||
<h3>计划管理</h3>
|
||||
<p>支撑月度、日常计划的编制与执行过程管理，后续可在此接入进度看板等内容。</p>
|
||||
</el-card>
|
||||
<el-card shadow="hover" class="home-card">
|
||||
<h3>作业与月报</h3>
|
||||
<p>用于记录实际作业与月报数据，实现计划与执行结果的对比分析。</p>
|
||||
</el-card>
|
||||
</section>
|
||||
|
||||
<section class="card-grid">
|
||||
<el-card
|
||||
v-for="card in featureCards"
|
||||
:key="card.id"
|
||||
shadow="hover"
|
||||
class="feature-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h3>{{ card.title }}</h3>
|
||||
<span>{{ card.caption }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<p class="card-description">{{ card.description }}</p>
|
||||
<div class="card-actions">
|
||||
<ComButton v-if="card.route" type="primary" @click="handleNavigate(card.route)">
|
||||
{{ card.actionText }}
|
||||
</ComButton>
|
||||
<ComButton v-else type="info" plain disabled>
|
||||
{{ card.actionText }}
|
||||
</ComButton>
|
||||
</div>
|
||||
</el-card>
|
||||
</section>
|
||||
|
||||
<section class="card-full">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h3>快速开始</h3>
|
||||
<span>快速了解系统功能和使用方法</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="quick-start">
|
||||
<div v-for="(item, index) in quickStartItems" :key="index" class="quick-item">
|
||||
<div class="quick-number">{{ index + 1 }}</div>
|
||||
<div class="quick-content">
|
||||
<h4>{{ item.title }}</h4>
|
||||
<p>{{ item.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</section>
|
||||
|
||||
<section class="card-full guide-card">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h3>系统说明</h3>
|
||||
<span>了解系统架构和技术栈</span>
|
||||
</div>
|
||||
</template>
|
||||
<ul class="guide-list">
|
||||
<li v-for="tip in systemTips" :key="tip">
|
||||
{{ tip }}
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
<section class="home-footer-note">
|
||||
<p>当前首页仅展示静态占位信息，后续根据实际需求替换为正式大屏或经营驾驶舱。</p>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Index">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import ComButton from '@/components/ComButton/index.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const stats = ref([
|
||||
{
|
||||
id: 'components',
|
||||
label: '组件数量',
|
||||
value: '12+',
|
||||
icon: 'component',
|
||||
color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
},
|
||||
{
|
||||
id: 'users',
|
||||
label: '在线用户',
|
||||
value: '128',
|
||||
icon: 'user',
|
||||
color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
|
||||
},
|
||||
{
|
||||
id: 'modules',
|
||||
label: '功能模块',
|
||||
value: '8',
|
||||
icon: 'tree-table',
|
||||
color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
|
||||
},
|
||||
{
|
||||
id: 'performance',
|
||||
label: '系统性能',
|
||||
value: '98%',
|
||||
icon: 'monitor',
|
||||
color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
|
||||
},
|
||||
])
|
||||
|
||||
const featureCards = ref([
|
||||
{
|
||||
id: 'components',
|
||||
title: '组件展示',
|
||||
caption: 'Component Showcase',
|
||||
description:
|
||||
'浏览和体验基于Element Plus二次封装的各类组件，包括按钮、表单、表格等常用组件。',
|
||||
actionText: '查看组件',
|
||||
route: '/showComponents/showButton',
|
||||
},
|
||||
{
|
||||
id: 'system',
|
||||
title: '系统管理',
|
||||
caption: 'System Management',
|
||||
description: '管理用户、角色、菜单、部门等系统基础数据，配置系统参数和权限。',
|
||||
actionText: '进入管理',
|
||||
route: '/system/user',
|
||||
},
|
||||
{
|
||||
id: 'monitor',
|
||||
title: '系统监控',
|
||||
caption: 'System Monitor',
|
||||
description: '实时监控系统运行状态，查看在线用户、操作日志、服务监控等信息。',
|
||||
actionText: '查看监控',
|
||||
route: '/monitor/online',
|
||||
},
|
||||
{
|
||||
id: 'tools',
|
||||
title: '系统工具',
|
||||
caption: 'System Tools',
|
||||
description: '使用表单构建、代码生成等工具提升开发效率，快速构建业务功能。',
|
||||
actionText: '使用工具',
|
||||
route: '/tool/build',
|
||||
},
|
||||
])
|
||||
|
||||
const quickStartItems = ref([
|
||||
{
|
||||
title: '浏览组件',
|
||||
description: '访问组件展示页面，查看和体验各种封装的组件，了解组件的使用方法和最佳实践。',
|
||||
},
|
||||
{
|
||||
title: '系统配置',
|
||||
description: '在系统管理模块中配置用户权限、菜单结构、系统参数等基础信息。',
|
||||
},
|
||||
{
|
||||
title: '监控运维',
|
||||
description: '通过系统监控模块实时了解系统运行状态，查看日志和性能指标。',
|
||||
},
|
||||
{
|
||||
title: '开发工具',
|
||||
description: '使用系统提供的表单构建和代码生成工具，快速开发业务功能。',
|
||||
},
|
||||
])
|
||||
|
||||
const systemTips = ref([
|
||||
'系统基于Vue 3 + Vite + Element Plus构建，采用组合式API开发模式。',
|
||||
'使用Pinia进行状态管理，支持模块化的store设计。',
|
||||
'路由采用动态加载方式，根据用户权限动态生成菜单和路由。',
|
||||
'组件库基于Element Plus进行二次封装，保持API一致性的同时增强功能。',
|
||||
'支持Mock数据模拟，可在无后端的情况下进行前端开发和测试。',
|
||||
'采用响应式设计，支持多端适配和暗色主题切换。',
|
||||
])
|
||||
|
||||
const handleNavigate = (route) => {
|
||||
router.push(route)
|
||||
}
|
||||
</script>
|
||||
<script setup name="Index"></script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard {
|
||||
.home {
|
||||
min-height: 100%;
|
||||
padding: 32px 40px 48px;
|
||||
background: radial-gradient(circle at top left, #e6f4ff 0, #ffffff 50%, #f5f7fb 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
padding: 32px 40px 48px;
|
||||
background: linear-gradient(160deg, #f6f8ff 0%, #ffffff 55%, #f9fbff 100%);
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.intro {
|
||||
max-width: 720px;
|
||||
text-align: left;
|
||||
.home-hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 2fr) minmax(280px, 1.4fr);
|
||||
gap: 32px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font-size: 14px;
|
||||
.home-hero-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.home-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: #5c6aff;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
color: #1677ff;
|
||||
background: rgba(22, 119, 255, 0.08);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.intro h1 {
|
||||
.home-title {
|
||||
font-size: 32px;
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
margin: 0 0 12px;
|
||||
color: #1f2a56;
|
||||
color: #1f2937;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
color: #4c5a7a;
|
||||
.home-subtitle {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
border-radius: 18px;
|
||||
.home-hero-panel {
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(145deg, #1677ff 0%, #4096ff 45%, #bae0ff 100%);
|
||||
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-card :deep(.el-card__body) {
|
||||
padding: 24px;
|
||||
.panel-header {
|
||||
padding: 16px 20px 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
.panel-body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding: 12px 20px 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.panel-item {
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-icon .icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.stat-info {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #1f2a56;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 4px;
|
||||
.panel-label {
|
||||
font-size: 13px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #8792b0;
|
||||
.panel-value {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
.panel-footer {
|
||||
padding: 12px 20px 16px;
|
||||
font-size: 13px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.home-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
.home-card {
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
.home-card :deep(.el-card__body) {
|
||||
padding: 20px 22px 22px;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
.home-card h3 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1f2a56;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.card-header span {
|
||||
font-size: 14px;
|
||||
color: #8792b0;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #4c5a7a;
|
||||
margin-bottom: 20px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.quick-start {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.quick-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.quick-number {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.quick-content h4 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2a56;
|
||||
}
|
||||
|
||||
.quick-content p {
|
||||
.home-card p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #4c5a7a;
|
||||
line-height: 1.7;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.card-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.guide-card :deep(.el-card__body) {
|
||||
padding: 20px 28px 28px;
|
||||
}
|
||||
|
||||
.guide-list {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
color: #4c5a7a;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.guide-list li {
|
||||
list-style: disc;
|
||||
.home-footer-note {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.dashboard {
|
||||
.home {
|
||||
padding: 24px 24px 36px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
.home-hero {
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.intro h1 {
|
||||
@media (max-width: 768px) {
|
||||
.home {
|
||||
padding: 20px 16px 28px;
|
||||
}
|
||||
|
||||
.home-hero {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.home-hero-panel {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.home-title {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quick-start {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>人员管理123</h1>
|
||||
</div>
|
||||
<div class="app-container">人员管理</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Person"></script>
|
||||
|
||||
<style></style>
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue