wzp/v3-admin-vite
Template
1
0
Fork 0
mirror of https://github.com/un-pany/v3-admin-vite.git synced 2025-04-21 11:29:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 完成多主题模块的重构

Browse Source
This commit is contained in:
pany 2024-03-29 21:14:11 +08:00
parent 5b531e75db
commit 82b5bd81ef
10 changed files with 20 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/layouts/LeftMode.vue
View File

@ -76,6 +76,7 @@ $transition-time: 0.35s;
left: 0;
z-index: 1001;
overflow: hidden;
border-right: var(--v3-sidebar-border-right);
}
.main-container {

1
src/layouts/LeftTopMode.vue
View File

@ -79,6 +79,7 @@ $transition-time: 0.35s;
left: 0;
z-index: 1001;
overflow: hidden;
border-right: var(--v3-sidebar-border-right);
padding-top: var(--v3-navigationbar-height);
}

13
src/styles/theme/core/element-plus.scss
View File

@ -2,24 +2,23 @@
// 侧边栏的 item 的 popper
.el-popper {
border: none !important;
.el-menu {
background-color: lighten($theme-bg-color, 2%) !important;
background-color: var(--el-bg-color);
.el-menu-item {
background-color: lighten($theme-bg-color, 2%) !important;
background-color: var(--el-bg-color);
&.is-active,
&:hover {
background-color: lighten($theme-bg-color, 6%) !important;
color: $active-font-color !important;
background-color: var(--el-bg-color-overlay);
color: #ffffff;
}
}
.el-sub-menu__title {
background-color: lighten($theme-bg-color, 2%) !important;
background-color: var(--el-bg-color);
}
.el-sub-menu {
&.is-active {
> .el-sub-menu__title {
color: $active-font-color !important;
color: #ffffff;
}
}
}

14
src/styles/theme/core/layouts.scss
View File

@ -3,25 +3,25 @@
.app-wrapper {
// 侧边栏
.sidebar-container {
background-color: lighten($theme-bg-color, 2%);
background-color: var(--el-bg-color);
.el-menu {
background-color: lighten($theme-bg-color, 2%) !important;
background-color: var(--el-bg-color);
.el-menu-item {
background-color: lighten($theme-bg-color, 2%) !important;
background-color: var(--el-bg-color);
&.is-active,
&:hover {
background-color: lighten($theme-bg-color, 6%) !important;
color: $active-font-color !important;
background-color: var(--el-bg-color-overlay);
color: #ffffff;
}
}
}
.el-sub-menu__title {
background-color: lighten($theme-bg-color, 2%) !important;
background-color: var(--el-bg-color);
}
.el-sub-menu {
&.is-active {
> .el-sub-menu__title {
color: $active-font-color !important;
color: #ffffff !important;
}
}
}

2
src/styles/theme/dark-blue/variables.scss
View File

@ -4,5 +4,3 @@
$theme-name: "dark-blue";
// 主题背景颜色
$theme-bg-color: #001b44;
// active 状态下文字颜色
$active-font-color: #ffffff;

2
src/styles/theme/dark/variables.scss
View File

@ -4,5 +4,3 @@
$theme-name: "dark";
// 主题背景颜色
$theme-bg-color: #141414;
// active 状态下文字颜色
$active-font-color: #ffffff;

1
src/styles/variables.css
View File

@ -15,6 +15,7 @@
/** Sidebar 组件（左侧模式全部生效、顶部模式全部不生效、混合模式非颜色部分生效） */
--v3-sidebar-width: 220px;
--v3-sidebar-hide-width: 58px;
--v3-sidebar-border-right: 1px solid var(--el-fill-color);
--v3-sidebar-menu-item-height: 60px;
--v3-sidebar-menu-tip-line-bg-color: var(--el-color-primary);
--v3-sidebar-menu-bg-color: #001428;

4
src/styles/vxe-table.css
View File

@ -46,7 +46,7 @@
/*table*/
--vxe-table-header-font-color: var(--el-text-color-regular);
--vxe-table-footer-font-color: var(--el-text-color-regular);
--vxe-table-border-color: var(--el-border-color);
--vxe-table-border-color: var(--el-border-color-lighter);
--vxe-table-header-background-color: var(--el-bg-color);
--vxe-table-body-background-color: var(--el-bg-color);
--vxe-table-footer-background-color: var(--el-bg-color);
@ -70,7 +70,7 @@
/*toolbar*/
--vxe-toolbar-background-color: var(--el-bg-color);
--vxe-toolbar-custom-active-background-color: var(--el-bg-color-overlay);
--vxe-toolbar-panel-background-color: var(--el-bg-color);
--vxe-toolbar-panel-background-color: var(--el-bg-color-overlay);
/*pager*/
--vxe-pager-background-color: var(--el-bg-color);

2
src/views/table/element-plus/index.vue
View File

@ -148,7 +148,7 @@ watch([() => paginationData.currentPage, () => paginationData.pageSize], getTabl
<el-table-column prop="username" label="用户名" align="center" />
<el-table-column prop="roles" label="角色" align="center">
<template #default="scope">
<el-tag v-if="scope.row.roles === 'admin'" effect="plain">admin</el-tag>
<el-tag v-if="scope.row.roles === 'admin'" type="primary" effect="plain">admin</el-tag>
<el-tag v-else type="warning" effect="plain">{{ scope.row.roles }}</el-tag>
</template>
</el-table-column>

2
src/views/table/vxe-table/tsx/RoleColumnSolts.tsx
View File

@ -3,7 +3,7 @@ import { type VxeColumnPropTypes } from "vxe-table/types/column"
const solts: VxeColumnPropTypes.Slots = {
default: ({ row, column }) => {
const cellValue = row[column.field]
const type = cellValue === "admin" ? "" : "warning"
const type = cellValue === "admin" ? "primary" : "warning"
return [<span class={`el-tag el-tag--${type} el-tag--plain`}>{cellValue}</span>]
}
}