修改优化

This commit is contained in:
chenhaodong
2026-06-24 23:47:49 +08:00
parent 3116d3bf8b
commit 6393b0fb5c
21 changed files with 467 additions and 176 deletions
+11 -26
View File
@@ -8,12 +8,13 @@
<div>
<svg-icon class-name="size-icon" icon-class="size" />
</div>
<el-dropdown-menu #dropdown>
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
{{
item.label }}
</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
{{ item.label }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
@@ -23,9 +24,8 @@ export default {
return {
sizeOptions: [
{ label: '默认', value: 'default' },
{ label: '中等', value: 'medium' },
{ label: '小', value: 'small' },
{ label: '极小', value: 'mini' }
{ label: '大号', value: 'large' },
{ label: '小', value: 'small' }
]
}
},
@@ -37,23 +37,8 @@ export default {
methods: {
handleSetSize(size) {
this.$store.dispatch('app/setSize', size)
this.refreshView()
this.$message({
message: '字体切换成功!',
type: 'success'
})
},
refreshView() {
// In order to make the cached page re-rendered
this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
const { fullPath } = this.$route
this.$nextTick(() => {
this.$router.replace({
path: '/redirect' + fullPath
})
})
// Element Plus size is set at app init, need full reload to apply
window.location.reload()
}
}
+3 -6
View File
@@ -5,11 +5,11 @@
-->
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<router-view v-slot="{ Component, route }">
<keep-alive :include="cachedViews">
<router-view :key="key" />
<component :is="Component" :key="route.path" />
</keep-alive>
</transition>
</router-view>
</section>
</template>
@@ -19,9 +19,6 @@ export default {
computed: {
cachedViews() {
return this.$store.state.tagsView.cachedViews
},
key() {
return this.$route.path
}
}
}
+16 -15
View File
@@ -17,25 +17,23 @@
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<el-tooltip content="字体大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
<size-select id="size-select" class="right-menu-item hover-effect" />
</template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" @command="handleCommand">
<div class="avatar-wrapper">
{{ realName }}
<el-icon class="el-icon-caret-bottom"><ArrowDown /></el-icon>
</div>
<el-dropdown-menu #dropdown>
<router-link to="/profile/index">
<el-dropdown-item>个人资料</el-dropdown-item>
</router-link>
<el-dropdown-item divided>
<span style="display:block;" @click="logout">退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<router-link to="/profile/index">
<el-dropdown-item>个人资料</el-dropdown-item>
</router-link>
<el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
@@ -73,9 +71,12 @@ export default {
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},
async logout() {
await this.$store.dispatch('user/logout')
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
handleCommand(command) {
if (command === 'logout') {
this.$store.dispatch('user/logout').finally(() => {
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
})
}
}
}
}
@@ -82,6 +82,10 @@ export default {
.sidebar-logo {
margin-right: 0px;
}
.sidebar-title {
display: none;
}
}
}
</style>
@@ -13,7 +13,7 @@
</app-link>
</template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
<template #title>
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
</template>
@@ -25,7 +25,7 @@
:base-path="resolvePath(child.path)"
class="nest-menu"
/>
</el-submenu>
</el-sub-menu>
</div>
</template>
@@ -4,7 +4,7 @@
@date 20260616
-->
<template>
<div :class="{'has-logo':showLogo}">
<div :class="{'has-logo':showLogo}" :style="isCollapse ? { width: '54px', overflow: 'hidden', flex: '0 0 54px' } : {}">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
@@ -15,6 +15,7 @@
:unique-opened="false"
:active-text-color="variables.menuActiveText"
:collapse-transition="false"
:style="isCollapse ? { width: '54px' } : {}"
mode="vertical"
>
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
+13 -9
View File
@@ -273,15 +273,19 @@ const router = createRouter({
})
export function resetRouter() {
const newRouter = createRouter({
history: createWebHashHistory(),
scrollBehavior: () => ({ top: 0 }),
routes: constantRoutes
})
// 注意:Vue Router 4 没有 matcher,通过移除所有路由再重新添加来重置
const currentRoutes = router.getRoutes()
currentRoutes.forEach(route => {
if (route.name && !constantRoutes.find(cr => cr.name === route.name)) {
// 递归收集 constantRoutes 中所有路由名称(含嵌套子路由),避免误删 Login 等常量子路由
const constantNames = new Set()
const collectNames = (routes) => {
routes.forEach(route => {
if (route.name) constantNames.add(route.name)
if (route.children) collectNames(route.children)
})
}
collectNames(constantRoutes)
// 仅移除动态添加的路由(asyncRoutes),保留 constantRoutes 中的全部路由
router.getRoutes().forEach(route => {
if (route.name && !constantNames.has(route.name)) {
router.removeRoute(route.name)
}
})
+1 -1
View File
@@ -4,7 +4,7 @@
* @date 20260615
*/
export default {
title: '校园藏图书数字化运维系统',
title: '校园藏图书数字化运维系统',
/**
* @type {boolean} true | false
+1 -1
View File
@@ -11,7 +11,7 @@ const state = {
withoutAnimation: false
},
device: 'desktop',
size: Cookies.get('size') || 'medium'
size: Cookies.get('size') || 'default'
}
const mutations = {
+3 -5
View File
@@ -122,19 +122,17 @@ const actions = {
// user logout
logout({ commit, state, dispatch }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
return new Promise((resolve) => {
logout(state.token).finally(() => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
removeToken()
resetRouter()
// reset visited views and cached views
dispatch('tagsView/delAllViews', null, { root: true })
dispatch('tagsView/delAllViews', null, { root: true })
resolve()
}).catch(error => {
reject(error)
})
})
},
+31 -57
View File
@@ -27,11 +27,6 @@
z-index: 1001;
overflow: hidden;
// reset element-ui css
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
}
.scrollbar-wrapper {
overflow-x: hidden !important;
}
@@ -67,23 +62,22 @@
.el-menu {
border: none;
height: 100%;
width: 100% !important;
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
.el-menu-item,
.el-sub-menu__title {
&:hover {
background-color: v.$menuHover !important;
}
}
.is-active>.el-submenu__title {
.is-active > .el-sub-menu__title {
color: v.$subMenuActiveText !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
& .nest-menu .el-sub-menu > .el-sub-menu__title,
& .el-sub-menu .el-menu-item {
min-width: v.$sideBarWidth !important;
background-color: v.$subMenuBg !important;
@@ -93,61 +87,42 @@
}
}
// ===== 侧边栏收缩状态 =====
.hideSidebar {
.sidebar-container {
width: 54px !important;
max-width: 54px !important;
min-width: 54px !important;
}
.main-container {
margin-left: 54px;
}
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
.el-tooltip {
padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
}
}
.el-submenu {
overflow: hidden;
&>.el-submenu__title {
padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
.el-submenu__icon-arrow {
display: none;
}
}
// Element Plus el-scrollbar 在收缩时也要限制宽度
.sidebar-container .el-scrollbar {
width: 54px !important;
max-width: 54px !important;
}
// 通过 CSS 变量覆盖 Element Plus 默认的 64px 收缩宽度,并用 !important 强制 54px
.el-menu--collapse {
.el-submenu {
&>.el-submenu__title {
&>span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
}
}
--el-menu-icon-width: 24px;
--el-menu-base-level-padding: 15px;
width: 54px !important;
max-width: 54px !important;
overflow: hidden;
}
}
.el-menu--collapse .el-menu .el-submenu {
min-width: v.$sideBarWidth !important;
// 覆盖 Element Plus 的 .el-menu .el-sub-menu { min-width: 200px },防止子菜单撑开收缩后的侧边栏
.sidebar-container .el-sub-menu {
min-width: 54px !important;
}
// 收缩时图标居中,去掉右边距
.el-menu--collapse .svg-icon {
margin-right: 0;
}
}
// mobile responsive
@@ -180,24 +155,23 @@
}
}
// when menu collapsed
// when menu collapsed, submenu popup styles
.el-menu--vertical {
&>.el-menu {
& > .el-menu {
.svg-icon {
margin-right: 16px;
}
}
.nest-menu .el-submenu>.el-submenu__title,
.nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item {
&:hover {
// you can use v.$subMenuHover
background-color: v.$menuHover !important;
}
}
// the scroll bar appears when the subMenu is too long
>.el-menu--popup {
> .el-menu--popup {
max-height: 100vh;
overflow-y: auto;
+3 -5
View File
@@ -50,18 +50,16 @@
<el-card class="box">
<template #header>
<div class="clearfix">
<span>支持信息</span>
<span>系统信息</span>
</div>
</template>
<div>
<div class="title" style="padding-top: 0px">商业咨询</div>
<div style="display: flex;">
<div style="flex-grow: 1;">
<div>校园管藏图书数字化运维系统</div>
<div>校园藏图书数字化运维系统</div>
<div>校园管藏图书数字化运维系统</div>
<div>墨韵智枢</div>
<div>校园藏图书数字化运维系统</div>
</div>
</div>
@@ -18,7 +18,7 @@
</div>
</div>
<app-main />
<router-view />
</div>
@@ -30,11 +30,10 @@
<script>
import { mapGetters } from 'vuex'
import AppMain from '@/layout/components/AppMain.vue'
export default {
name: 'LoginLayout',
components: { AppMain },
components: {},
computed: {
...mapGetters([
'siteData'
@@ -1,5 +1,5 @@
<!--
@description 用户信息卡片组件展示头像昵称等个人资料摘要
@description 用户信息卡片组件展示头像昵称等个人资料摘要 效果不好 暂时删除
@author D吕贺034244311
@date 20260620
-->
@@ -13,10 +13,10 @@
<div class="user-profile">
<div class="box-center">
<pan-thumb :image="user.avatar" :height="'100px'" :width="'100px'" :hoverable="false">
<div>欢迎</div>
{{ user.role }}
</pan-thumb>
<!-- <pan-thumb :image="user.avatar" :height="'100px'" :width="'100px'" :hoverable="false">-->
<!-- <div>欢迎</div>-->
<!-- {{ user.role }}-->
<!-- </pan-thumb>-->
</div>
<div class="box-center">
<div class="user-name text-center">{{ user.name }}</div>
+5 -5
View File
@@ -8,11 +8,11 @@
<div v-if="user">
<el-row :gutter="20">
<el-col :span="6" :xs="24">
<user-card :user="user" />
</el-col>
<!-- <el-col :span="6" :xs="24">-->
<!-- <user-card :user="user" />-->
<!-- </el-col>-->
<el-col :span="18" :xs="24">
<el-col :span="6" :xs="24">
<el-card>
<el-tabs v-model="activeTab">
<el-tab-pane label="修改资料" name="account">
@@ -34,7 +34,7 @@ import Account from './components/Account.vue'
export default {
name: 'Profile',
components: { UserCard, Account },
components: { Account },
data() {
return {
user: {},
-7
View File
@@ -14,7 +14,6 @@
@multi-actions="handleMultiAction"
>
<template #filter-content>
<el-input v-model="listQuery.params.id" style="width: 200px" placeholder="搜索公告编码" class="filter-item"/>
<el-input v-model="listQuery.params.title" style="width: 200px" placeholder="搜索公告标题" class="filter-item"/>
<el-input v-model="listQuery.params.text" style="width: 200px" placeholder="搜索公告内容" class="filter-item" />
<label>开始时间</label>
@@ -35,12 +34,6 @@
</template>
<template #data-columns>
<el-table-column align="center" label="公告编号" prop="id">
<template #default="scope">
<a style="color: #1890ff" @click="handleUpdate(scope.row)">{{ scope.row.id }}</a>
</template>
</el-table-column>
<el-table-column align="center" label="公告标题" prop="title"/>
<el-table-column align="center" label="公告内容" prop="text"/>
@@ -14,7 +14,6 @@
@multi-actions="handleMultiAction"
>
<template #filter-content>
<el-input v-model="listQuery.params.id" style="width: 200px" placeholder="搜索留言编码" class="filter-item"/>
<el-input v-model="listQuery.params.itemname" style="width: 200px" placeholder="搜索发布人昵称" class="filter-item"/>
<el-input v-model="listQuery.params.text" style="width: 200px" placeholder="搜索留言内容" class="filter-item" />
<label>开始时间</label>
@@ -38,11 +37,6 @@
</template>
<template #data-columns>
<el-table-column align="center" label="留言编号" prop="id">
<template #default="scope">
<a style="color: #1890ff" @click="handleUpdate(scope.row)">{{ scope.row.id }}</a>
</template>
</el-table-column>
<el-table-column align="center" label="留言人昵称" prop="itemname"/>
<el-table-column align="center" label="留言内容" prop="text"/>