wip: 重构多主题模块

un-pany · Mar 28, 2024 · 20f9ba8 · 20f9ba8
1 parent 246fca2
commit 20f9ba8
Show file tree

Hide file tree

Showing 27 changed files with 101 additions and 284 deletions.
diff --git a/src/components/Notify/NotifyList.vue b/src/components/Notify/NotifyList.vue
@@ -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;

diff --git a/src/components/Notify/index.vue b/src/components/Notify/index.vue
@@ -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;

diff --git a/src/components/SearchMenu/SearchResult.vue b/src/components/SearchMenu/SearchResult.vue
@@ -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" : ""
  }
 }
 

diff --git a/src/layouts/LeftMode.vue b/src/layouts/LeftMode.vue
@@ -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 {

diff --git a/src/layouts/LeftTopMode.vue b/src/layouts/LeftTopMode.vue
@@ -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 {

diff --git a/src/layouts/TopMode.vue b/src/layouts/TopMode.vue
@@ -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 {

diff --git a/src/layouts/components/Breadcrumb/index.vue b/src/layouts/components/Breadcrumb/index.vue
@@ -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>
diff --git a/src/layouts/components/Footer/index.vue b/src/layouts/components/Footer/index.vue
@@ -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>
diff --git a/src/layouts/components/Hamburger/index.vue b/src/layouts/components/Hamburger/index.vue
@@ -31,5 +31,6 @@ const toggleClick = () => {
 <style lang="scss" scoped>
 .icon {
  vertical-align: middle;
+ color: var(--v3-hamburger-text-color);
 }
 </style>
diff --git a/src/layouts/components/Logo/index.vue b/src/layouts/components/Logo/index.vue
@@ -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 {

diff --git a/src/layouts/components/NavigationBar/index.vue b/src/layouts/components/NavigationBar/index.vue
@@ -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;

diff --git a/src/layouts/components/RightPanel/index.vue b/src/layouts/components/RightPanel/index.vue
@@ -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;

diff --git a/src/layouts/components/Settings/SelectLayoutMode.vue b/src/layouts/components/Settings/SelectLayoutMode.vue
@@ -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>
diff --git a/src/layouts/components/TagsView/ScrollPane.vue b/src/layouts/components/TagsView/ScrollPane.vue
@@ -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 {

diff --git a/src/layouts/components/TagsView/index.vue b/src/layouts/components/TagsView/index.vue
@@ -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);
  }
  }
  }

diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
@@ -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);
 }
 
 // 分页

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -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;

diff --git a/src/styles/theme/core/layouts.scss b/src/styles/theme/core/layouts.scss
@@ -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;
 }