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

wip: 重构多主题模块

Browse Source
This commit is contained in:
pany 2024-03-28 21:34:24 +08:00
parent 246fca2692
commit 20f9ba8595
27 changed files with 102 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Notify/NotifyList.vue
View File

@ -44,7 +44,7 @@ const props = defineProps<Props>()
}
.card-time {
font-size: 12px;
color: grey;
color: var(--el-text-color-secondary);
}
.card-avatar {
display: flex;

2
src/components/Notify/index.vue
View File

@ -85,8 +85,8 @@ const handleHistory = () => {
<style lang="scss" scoped>
.notify {
margin-right: 10px;
color: var(--el-text-color-regular);
}
.notify-history {
text-align: center;
padding-top: 12px;

2
src/components/SearchMenu/SearchResult.vue
View File

@ -19,7 +19,7 @@ const itemStyle = (item: RouteRecordRaw) => {
const flag = item.name === modelValue.value
return {
background: flag ? "var(--el-color-primary)" : "",
color: flag ? "#fff" : ""
color: flag ? "#ffffff" : ""
}
}

7
src/layouts/LeftMode.vue
View File

@ -57,8 +57,7 @@ $transition-time: 0.35s;
}
.drawer-bg {
background-color: #000;
opacity: 0.3;
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
top: 0;
height: 100%;
@ -98,7 +97,9 @@ $transition-time: 0.35s;
.layout-header {
position: relative;
z-index: 9;
box-shadow: var(--el-box-shadow-lighter);
background-color: var(--v3-header-bg-color);
box-shadow: var(--v3-header-box-shadow);
border-bottom: var(--v3-header-border-bottom);
}
.app-main {

3
src/layouts/LeftTopMode.vue
View File

@ -63,7 +63,8 @@ $transition-time: 0.35s;
.layout-header {
background-color: var(--v3-header-bg-color);
box-shadow: var(--el-box-shadow-lighter);
box-shadow: var(--v3-header-box-shadow);
border-bottom: var(--v3-header-border-bottom);
}
.main-container {

4
src/layouts/TopMode.vue
View File

@ -46,14 +46,14 @@ $transition-time: 0.35s;
display: flex;
.navigation-bar {
flex: 1;
background: transparent;
}
}
}
.layout-header {
background-color: var(--v3-header-bg-color);
box-shadow: var(--el-box-shadow-lighter);
box-shadow: var(--v3-header-box-shadow);
border-bottom: var(--v3-header-border-bottom);
}
.main-container {

18
src/layouts/components/Breadcrumb/index.vue
View File

@ -40,7 +40,7 @@ listenerRouteChange((route) => {
</script>
<template>
<el-breadcrumb class="app-breadcrumb">
<el-breadcrumb>
<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
<span v-if="item.redirect === 'noRedirect' || index === breadcrumbs.length - 1" class="no-redirect">
{{ item.meta.title }}
@ -53,19 +53,13 @@ listenerRouteChange((route) => {
</template>
<style lang="scss" scoped>
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
}
.app-breadcrumb.el-breadcrumb {
display: inline-block;
font-size: 14px;
.el-breadcrumb {
line-height: var(--v3-navigationbar-height);
margin-left: 8px;
.no-redirect {
color: #97a8be;
cursor: text;
color: var(--el-text-color-placeholder);
}
a {
font-weight: normal;
}
}
</style>

2
src/layouts/components/Footer/index.vue
View File

@ -13,6 +13,6 @@ const VITE_APP_TITLE = import.meta.env.VITE_APP_TITLE
display: flex;
align-items: center;
justify-content: center;
color: #c0c4cc;
color: var(--el-text-color-placeholder);
}
</style>

1
src/layouts/components/Hamburger/index.vue
View File

@ -31,5 +31,6 @@ const toggleClick = () => {
<style lang="scss" scoped>
.icon {
vertical-align: middle;
color: var(--v3-hamburger-text-color);
}
</style>

1
src/layouts/components/Logo/index.vue
View File

@ -34,7 +34,6 @@ const { isLeft, isTop } = useLayoutMode()
width: 100%;
height: var(--v3-header-height);
line-height: var(--v3-header-height);
background-color: transparent;
text-align: center;
overflow: hidden;
.layout-logo {

3
src/layouts/components/NavigationBar/index.vue
View File

@ -77,7 +77,7 @@ const logout = () => {
.navigation-bar {
height: var(--v3-navigationbar-height);
overflow: hidden;
background: var(--v3-header-bg-color);
color: var(--v3-navigationbar-text-color);
display: flex;
justify-content: space-between;
.hamburger {
@ -114,7 +114,6 @@ const logout = () => {
height: 100%;
display: flex;
align-items: center;
color: #606266;
.right-menu-item {
padding: 0 10px;
cursor: pointer;

2
src/layouts/components/RightPanel/index.vue
View File

@ -37,7 +37,7 @@ const show = ref(false)
z-index: 10;
cursor: pointer;
pointer-events: auto;
color: #fff;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;

12
src/layouts/components/Settings/SelectLayoutMode.vue
View File

@ -50,7 +50,7 @@ const { isLeft, isTop, isLeftTop, setLayoutMode } = useLayoutMode()
overflow: hidden;
cursor: pointer;
border-radius: 6px;
border: 2px solid #00000000;
border: 2px solid transparent;
&:hover {
border: 2px solid var(--el-color-primary);
}
@ -70,13 +70,13 @@ const { isLeft, isTop, isLeftTop, setLayoutMode } = useLayoutMode()
.left {
.el-header {
background-color: var(--el-border-color);
background-color: var(--el-fill-color-darker);
}
.el-aside {
background-color: var(--el-color-primary);
}
.el-main {
background-color: var(--el-fill-color);
background-color: var(--el-fill-color-lighter);
}
}
@ -85,19 +85,19 @@ const { isLeft, isTop, isLeftTop, setLayoutMode } = useLayoutMode()
background-color: var(--el-color-primary);
}
.el-main {
background-color: var(--el-fill-color);
background-color: var(--el-fill-color-lighter);
}
}
.left-top {
.el-header {
background-color: var(--el-border-color);
background-color: var(--el-fill-color-darker);
}
.el-aside {
background-color: var(--el-color-primary);
}
.el-main {
background-color: var(--el-fill-color);
background-color: var(--el-fill-color-lighter);
}
}
</style>

5
src/layouts/components/TagsView/ScrollPane.vue
View File

@ -127,12 +127,13 @@ listenerRouteChange(() => {
.arrow {
width: 40px;
height: 100%;
font-size: 18px;
cursor: pointer;
&.left {
box-shadow: 5px 0 5px -6px #ccc;
box-shadow: 5px 0 5px -6px var(--el-border-color-darker);
}
&.right {
box-shadow: -5px 0 5px -6px #ccc;
box-shadow: -5px 0 5px -6px var(--el-border-color-darker);
}
}
.el-scrollbar {

24
src/layouts/components/TagsView/index.vue
View File

@ -194,8 +194,7 @@ onMounted(() => {
.tags-view-container {
height: var(--v3-tagsview-height);
width: 100%;
background-color: var(--v3-header-bg-color);
box-shadow: 0 0 3px 0 #00000010;
color: var(--v3-tagsview-text-color);
overflow: hidden;
.tags-view-wrapper {
.tags-view-item {
@ -206,7 +205,6 @@ onMounted(() => {
line-height: 26px;
border: 1px solid var(--v3-tagsview-tag-border-color);
border-radius: var(--v3-tagsview-tag-border-radius);
color: var(--v3-tagsview-tag-text-color);
background-color: var(--v3-tagsview-tag-bg-color);
padding: 0 8px;
font-size: 12px;
@ -222,16 +220,6 @@ onMounted(() => {
background-color: var(--v3-tagsview-tag-active-bg-color);
color: var(--v3-tagsview-tag-active-text-color);
border-color: var(--v3-tagsview-tag-active-border-color);
&::before {
content: "";
background-color: var(--v3-tagsview-tag-active-before-color);
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
margin-right: 2px;
}
}
.el-icon {
margin: 0 2px;
@ -246,22 +234,22 @@ onMounted(() => {
}
.contextmenu {
margin: 0;
background-color: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 #00000030;
color: var(--v3-tagsview-contextmenu-text-color);
background-color: var(--v3-tagsview-contextmenu-bg-color);
box-shadow: var(--v3-tagsview-contextmenu-box-shadow);
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
&:hover {
background-color: #eee;
color: var(--v3-tagsview-contextmenu-hover-text-color);
background-color: var(--v3-tagsview-contextmenu-hover-bg-color);
}
}
}

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

@ -1,15 +1,8 @@
/** 自定义 Element Plus 样式 */
// 表格
.el-table {
// 表头
th.el-table__cell {
background-color: var(--el-fill-color-light) !important;
}
// 行元素
tr {
background-color: var(--el-bg-color-overlay);
}
// 卡片
.el-card {
background-color: var(--el-bg-color);
}
// 分页

1
src/styles/index.scss
View File

@ -24,6 +24,7 @@ html {
body {
height: 100%;
color: var(--v3-body-text-color);
background-color: var(--v3-body-bg-color);
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;

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

@ -1,17 +1,5 @@
/** Layout 相关 */
body {
background-color: $theme-bg-color;
}
#app {
color: $font-color;
// 右侧设置面板
.handle-button {
background-color: lighten($theme-bg-color, 20%) !important;
}
}
.app-wrapper {
// 侧边栏
.sidebar-container {
@ -38,44 +26,9 @@ body {
}
}
}
// Header
.layout-header {
background-color: $theme-bg-color;
border-bottom: 1px solid lighten($theme-bg-color, 10%) !important;
}
// 顶部导航栏
.navigation-bar {
background-color: $theme-bg-color;
.right-menu {
.svg-icon {
color: $font-color;
}
}
}
// TagsView
.tags-view-container {
background-color: $theme-bg-color !important;
.tags-view-item {
background-color: $theme-bg-color !important;
color: $font-color !important;
border: 1px solid $border-color !important;
&.active {
background-color: $theme-color !important;
color: $active-font-color !important;
border-color: $border-color !important;
}
}
// 右键菜单
.contextmenu {
background-color: lighten($theme-bg-color, 8%);
color: $font-color;
li:hover {
background-color: lighten($theme-bg-color, 16%);
color: $active-font-color;
}
}
}
}
// 右侧设置面板
.handle-button {
background-color: lighten($theme-bg-color, 20%) !important;
}

45
src/styles/theme/dark-blue/element-plus.css
View File

@ -6,33 +6,40 @@
html.dark-blue {
/** color */
--el-color-primary: #01efb7bb;
--el-color-primary-light-3: rgba(1, 147, 127, 0.8133333333);
--el-color-primary-light-5: rgba(2, 102, 99, 0.8666666667);
--el-color-primary-light-7: rgba(2, 65, 77, 0.92);
--el-color-primary-light-8: rgba(2, 49, 68, 0.9466666667);
--el-color-primary-light-9: rgba(2, 35, 59, 0.9733333333);
--el-color-primary-dark-2: rgba(1, 167, 128, 0.7866666667);
--el-color-success: #01efb7bb;
--el-color-primary: #00bb99;
--el-color-primary-light-3: #00bb99a2;
--el-color-primary-light-7: #00bb9948;
--el-color-primary-light-8: #00bb9932;
--el-color-primary-light-9: #00bb9916;
--el-color-primary-dark-2: #00bb99;
/** text-color */
--el-text-color-primary: rgba(255, 255, 255, 0.8);
--el-text-color-regular: rgba(255, 255, 255, 0.8);
--el-text-color-secondary: rgba(255, 255, 255, 0.8);
--el-text-color-placeholder: rgba(255, 255, 255, 0.8);
--el-text-color-disabled: rgba(255, 255, 255, 0.3);
--el-text-color-primary: #e5eaf3;
--el-text-color-regular: #cfd3dc;
--el-text-color-secondary: #a3a6ad;
--el-text-color-placeholder: #8d9095;
--el-text-color-disabled: #6c6e72;
/** border-color */
--el-border-color: #01efb755;
--el-border-color-light: #01efb755;
--el-border-color-lighter: #01efb755;
--el-border-color-darker: #003380;
--el-border-color-dark: #003380;
--el-border-color: #003380;
--el-border-color-light: #003380;
--el-border-color-lighter: #003380;
--el-border-color-extra-light: #003380;
/** fill-color */
--el-fill-color: #032659;
--el-fill-color-darker: #042d6b;
--el-fill-color-dark: #042d6b;
--el-fill-color: #042d6b;
--el-fill-color-light: #032659;
--el-fill-color-lighter: #032659;
--el-fill-color-blank: #031e47;
--el-fill-color-extra-light: #031e47;
/** bg-color */
--el-bg-color: #021633;
--el-bg-color-overlay: #031e47;
--el-bg-color-page: #001535;
--el-bg-color: #031e47;
--el-bg-color-overlay: #032659;
/** mask */
--el-mask-color: rgba(0, 0, 0, 0.5);
--el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
}
/** button */

127
src/styles/theme/dark-blue/element-plus.scss
View File

@ -1,127 +0,0 @@
/**
* dark-blue 主题下的 Element Plus SCSS 变量
* 在此查阅所有可自定义的变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
*/
@use "sass:map";
@use "sass:math";
@use "element-plus/theme-chalk/src/mixins/function.scss" as *;
@use "element-plus/theme-chalk/src/mixins/_var.scss" as *;
@use "element-plus/theme-chalk/src/mixins/mixins.scss" as *;
@use "./variables.scss" as *;
// 生成指定颜色的明亮/黑暗颜色
@mixin set-color-mix-level($type, $number, $mode: "light", $mix-color: $color-white) {
$colors: map.deep-merge(
(
$type: (
"#{$mode}-#{$number}": mix($mix-color, map.get($colors, $type, "base"), math.percentage(math.div($number, 10)))
)
),
$colors
) !global;
}
$types: primary, success, warning, danger, error, info;
$color: $theme-color;
$success: #01efb7bb;
$colors: () !default;
$colors: map.deep-merge(
(
"white": #ffffff,
"primary": (
"base": $color
),
"success": (
"base": $success
)
),
$colors
);
// text
$text-color-base: #fff;
$text-color: () !default;
$text-color: map.merge(
(
"primary": rgba($text-color-base, 0.8),
"regular": rgba($text-color-base, 0.8),
"secondary": rgba($text-color-base, 0.8),
"placeholder": rgba($text-color-base, 0.8),
"disabled": rgba($text-color-base, 0.3)
),
$text-color
);
// 生成 --el-color-${type}-light-i
@each $type in (primary) {
@for $i from 1 through 9 {
@include set-color-mix-level($type, $i, "light", #021633);
}
// --el-color-${type}-dark-2
@include set-color-mix-level($type, 2, "dark", #000);
}
// border
$border: () !default;
$border: map.merge(
(
"": #01efb755,
"light": #01efb755,
"lighter": #01efb755
),
$border
);
// fill
$fill-color: () !default;
$fill-color: map.merge(
(
"": #032659,
"light": #032659,
"blank": #031e47
),
$fill-color
);
// background
$bg-color: () !default;
$bg-color: map.merge(
(
"": #021633,
"overlay": #031e47
),
$bg-color
);
// mask
$mask-color: () !default;
$mask-color: map.merge(
(
"": rgba(0, 0, 0, 0.5)
),
$mask-color
);
// button
$button: () !default;
$button: map.merge(
(
"disabled-text-color": rgba(255, 255, 255, 0.5)
),
$button
);
html.dark-blue {
@include set-css-color-type($colors, "primary");
@include set-component-css-var("text-color", $text-color);
@include set-component-css-var("border-color", $border);
@include set-component-css-var("fill-color", $fill-color);
@include set-component-css-var("bg-color", $bg-color);
@include set-component-css-var("mask-color", $mask-color);
@include b(button) {
@include set-component-css-var("button", $button);
}
}

3
src/styles/theme/dark-blue/index.scss
View File

@ -1,4 +1,3 @@
@use "./element-plus.css"; // 方案一
// @use "./element-plus.scss"; // 方案二
@use "./element-plus.css";
@import "./variables.scss";
@import "../core/index.scss";

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

@ -3,14 +3,12 @@
// 主题名称
$theme-name: "dark-blue";
// 主题背景颜色
$theme-bg-color: #021633;
$theme-bg-color: #031e47;
// 主题色
$theme-color: #01efb7bb;
$theme-color: #00bb99;
// 默认文字颜色
$font-color: rgba(255, 255, 255, 0.8);
$font-color: #cfd3dc;
// active 状态下文字颜色
$active-font-color: #fff;
// hover 状态下文字颜色
$hover-color: #fff;
$active-font-color: #ffffff;
// 边框颜色
$border-color: #01efb755;
$border-color: #003380;

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

@ -3,14 +3,12 @@
// 主题名称
$theme-name: "dark";
// 主题背景颜色
$theme-bg-color: #151515;
$theme-bg-color: #141414;
// 主题色
$theme-color: #409eff;
// 默认文字颜色
$font-color: #c0c4cc;
$font-color: #cfd3dc;
// active 状态下文字颜色
$active-font-color: #fff;
// hover 状态下文字颜色
$hover-color: #fff;
$active-font-color: #ffffff;
// 边框颜色
$border-color: #303133;
$border-color: #4c4d4f;

26
src/styles/variables.css
View File

@ -1,12 +1,16 @@
/** 全局 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
:root {
/** 全局背景色 */
--v3-body-bg-color: #f2f3f5;
/** Body */
--v3-body-text-color: var(--el-text-color-primary);
--v3-body-bg-color: var(--el-bg-color-page);
/** Header 区域 = NavigationBar 组件 + TagsView 组件 */
--v3-header-height: calc(var(--v3-navigationbar-height) + var(--v3-tagsview-height));
--v3-header-bg-color: #ffffff;
--v3-header-bg-color: var(--el-bg-color);
--v3-header-box-shadow: var(--el-box-shadow-lighter);
--v3-header-border-bottom: 1px solid var(--el-fill-color);
/** NavigationBar 组件 */
--v3-navigationbar-height: 50px;
--v3-navigationbar-text-color: var(--el-text-color-regular);
/** Sidebar 组件（左侧模式全部生效、顶部模式全部不生效、混合模式非颜色部分生效） */
--v3-sidebar-width: 220px;
--v3-sidebar-hide-width: 58px;
@ -14,20 +18,26 @@
--v3-sidebar-menu-tip-line-bg-color: var(--el-color-primary);
--v3-sidebar-menu-bg-color: #001428;
--v3-sidebar-menu-hover-bg-color: #409eff10;
--v3-sidebar-menu-text-color: #c0c4cc;
--v3-sidebar-menu-text-color: #cfd3dc;
--v3-sidebar-menu-active-text-color: #ffffff;
/** TagsView 组件 */
--v3-tagsview-height: 34px;
--v3-tagsview-tag-text-color: #495060;
--v3-tagsview-text-color: var(--el-text-color-regular);
--v3-tagsview-tag-active-text-color: #ffffff;
--v3-tagsview-tag-bg-color: #ffffff;
--v3-tagsview-tag-bg-color: var(--el-bg-color);
--v3-tagsview-tag-active-bg-color: var(--el-color-primary);
--v3-tagsview-tag-border-radius: 2px;
--v3-tagsview-tag-border-color: #d8dce5;
--v3-tagsview-tag-border-color: var(--el-border-color-lighter);
--v3-tagsview-tag-active-border-color: var(--el-color-primary);
--v3-tagsview-tag-active-before-color: #ffffff;
--v3-tagsview-tag-icon-hover-bg-color: #00000030;
--v3-tagsview-tag-icon-hover-color: #ffffff;
--v3-tagsview-contextmenu-text-color: var(--el-text-color-regular);
--v3-tagsview-contextmenu-hover-text-color: var(--el-text-color-primary);
--v3-tagsview-contextmenu-bg-color: var(--el-bg-color-overlay);
--v3-tagsview-contextmenu-hover-bg-color: var(--el-fill-color);
--v3-tagsview-contextmenu-box-shadow: var(--el-box-shadow);
/** Hamburger 组件 */
--v3-hamburger-text-color: var(--el-text-color-primary);
/** RightPanel 组件 */
--v3-rightpanel-button-bg-color: #001428;
}

2
src/views/login/index.vue
View File

@ -157,7 +157,7 @@ createCode()
max-width: 90%;
border-radius: 20px;
box-shadow: 0 0 10px #dcdfe6;
background-color: var(--el-bg-color-overlay);
background-color: var(--el-bg-color);
overflow: hidden;
.title {
display: flex;

1
src/views/permission/directive.vue
View File

@ -49,6 +49,7 @@ import SwitchRoles from "./components/SwitchRoles.vue"
.margin-top-15 {
margin-top: 15px;
}
.margin-top-30 {
margin-top: 30px;
}

2
src/views/table/vxe-table/index.vue
View File

@ -317,7 +317,7 @@ const crudStore = reactive({
},
/** 删除 */
onDelete: (row: RowMeta) => {
const tip = `确定 <strong style="color: red"> 删除 </strong> 用户 <strong style="color: #409eff"> ${row.username} </strong> ？`
const tip = `确定 <strong style="color: var(--el-color-danger);"> 删除 </strong> 用户 <strong style="color: var(--el-color-primary);"> ${row.username} </strong> ？`
const config: ElMessageBoxOptions = {
type: "warning",
showClose: true,