feat: 提取 css 变量

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v3-admin-vite",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "description": "一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element-Plus、Pinia 和 Vite 等主流技术.",
   "author": {
     "name": "pany",

src/layout/components/AppMain.vue

@@ -22,26 +22,24 @@ const key = computed(() => {
 
 <style lang="scss" scoped>
 .app-main {
-  /* 50 = navbar height  */
+  min-height: calc(100vh - var(--v3-navigationbar-height));
-  min-height: calc(100vh - 50px);
   width: 100%;
   position: relative;
   overflow: hidden;
 }
 
 .fixed-header + .app-main {
-  padding-top: 50px;
+  padding-top: var(--v3-navigationbar-height);
   height: 100vh;
   overflow: auto;
 }
 
 .hasTagsView {
   .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
+    min-height: calc(100vh - var(--v3-header-height));
-    min-height: calc(100vh - 84px);
   }
   .fixed-header + .app-main {
-    padding-top: 84px;
+    padding-top: var(--v3-header-height);
   }
 }
 </style>

src/layout/components/BreadCrumb/index.vue

@@ -73,7 +73,7 @@ onBeforeMount(() => {
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
   font-size: 14px;
-  line-height: 50px;
+  line-height: var(--v3-navigationbar-height);
   margin-left: 8px;
   .no-redirect {
     color: #97a8be;

src/layout/components/NavigationBar/index.vue

@@ -82,7 +82,7 @@ const state = reactive({
 
 <style lang="scss" scoped>
 .navbar {
-  height: 50px;
+  height: var(--v3-navigationbar-height);
   overflow: hidden;
   background: #fff;
   .hamburger {

src/layout/components/RightPanel/index.vue

@@ -27,7 +27,7 @@ const show = ref(false)
 .handle-button {
   width: 48px;
   height: 48px;
-  background-color: #152d3d;
+  background-color: var(--v3-rightpanel-button-bg-color);
   position: absolute;
   right: 0px;
   text-align: center;

src/layout/components/Sidebar/SidebarLogo.vue

@@ -34,9 +34,9 @@ defineProps({
 .sidebar-logo-container {
   position: relative;
   width: 100%;
-  height: 84px;
+  height: var(--v3-header-height);
-  line-height: 84px;
+  line-height: var(--v3-header-height);
-  background: #0c202b;
+  background-color: var(--v3-sidebarlogo-bg-color);
   text-align: center;
   overflow: hidden;
   .sidebar-logo {
@@ -49,16 +49,6 @@ defineProps({
       height: 100%;
       vertical-align: middle;
     }
-    & .sidebar-title {
-      display: inline-block;
-      margin: 0;
-      color: #fff;
-      font-weight: 600;
-      line-height: 50px;
-      font-size: 16px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-      vertical-align: middle;
-    }
   }
   &.collapse {
     .sidebar-logo {

src/layout/components/Sidebar/index.vue

@@ -6,6 +6,11 @@ import { usePermissionStore } from "@/store/modules/permission"
 import { useSettingsStore } from "@/store/modules/settings"
 import SidebarItem from "./SidebarItem.vue"
 import SidebarLogo from "./SidebarLogo.vue"
+import { getCssVariableValue } from "@/utils"
+
+const v3SidebarMenuBgColor = getCssVariableValue("--v3-sidebar-menu-bg-color")
+const v3SidebarMenuTextColor = getCssVariableValue("--v3-sidebar-menu-text-color")
+const v3SidebarMenuActiveTextColor = getCssVariableValue("--v3-sidebar-menu-active-text-color")
 
 const route = useRoute()
 
@@ -40,9 +45,9 @@ const isCollapse = computed(() => {
         :collapse="isCollapse"
         :unique-opened="true"
         :default-active="activeMenu"
-        background-color="#152d3d"
+        :background-color="v3SidebarMenuBgColor"
-        text-color="#C0C4CC"
+        :text-color="v3SidebarMenuTextColor"
-        active-text-color="#fff"
+        :active-text-color="v3SidebarMenuActiveTextColor"
         mode="vertical"
       >
         <SidebarItem
@@ -89,7 +94,7 @@ const isCollapse = computed(() => {
     left: 0;
     width: 4px;
     height: 100%;
-    background-color: #66b1ff;
+    background-color: var(--v3-sidebar-menu-tip-line-bg-color);
   }
 }
 
@@ -99,8 +104,7 @@ const isCollapse = computed(() => {
 
 .has-logo {
   .el-scrollbar {
-    // 84px 是 logo 区域的 height
+    height: calc(100% - var(--v3-header-height));
-    height: calc(100% - 84px);
   }
 }
 
@@ -113,10 +117,10 @@ const isCollapse = computed(() => {
 ::v-deep(.el-menu-item),
 ::v-deep(.el-sub-menu__title),
 ::v-deep(.el-sub-menu .el-menu-item) {
-  height: 60px;
+  height: var(--v3-sidebar-menu-item-height);
-  line-height: 60px;
+  line-height: var(--v3-sidebar-menu-item-height);
   &:hover {
-    background-color: #ffffff10;
+    background-color: var(--v3-sidebar-menu-hover-bg-color);
   }
   display: block;
   * {
@@ -134,7 +138,7 @@ const isCollapse = computed(() => {
   ::v-deep(.el-sub-menu) {
     &.is-active {
       .el-sub-menu__title {
-        color: #fff !important;
+        color: var(--v3-sidebar-menu-active-text-color) !important;
         @include tip-line;
       }
     }

src/layout/components/TagsView/index.vue

@@ -210,9 +210,9 @@ onBeforeMount(() => {
 
 <style lang="scss" scoped>
 .tags-view-container {
-  height: 34px;
+  height: var(--v3-tagsview-height);
   width: 100%;
-  background: #fff;
+  background-color: #fff;
   border-bottom: 1px solid #d8dce5;
   box-shadow: 0 1px 3px 0 #00000010, 0 0 3px 0 #00000010;
   .tags-view-wrapper {
@@ -222,9 +222,9 @@ onBeforeMount(() => {
       cursor: pointer;
       height: 26px;
       line-height: 26px;
-      border: 1px solid #d8dce5;
+      border: 1px solid var(--v3-tagsview-tag-border-color);
-      color: #495060;
+      color: var(--v3-tagsview-tag-text-color);
-      background: #fff;
+      background-color: var(--v3-tagsview-tag-bg-color);
       padding: 0 8px;
       font-size: 12px;
       margin-left: 5px;
@@ -236,12 +236,12 @@ onBeforeMount(() => {
         margin-right: 15px;
       }
       &.active {
-        background-color: #409eff;
+        background-color: var(--v3-tagsview-tag-active-bg-color);
-        color: #fff;
+        color: var(--v3-tagsview-tag-active-text-color);
-        border-color: #409eff;
+        border-color: var(--v3-tagsview-tag-active-border-color);
         &::before {
           content: "";
-          background: #fff;
+          background-color: var(--v3-tagsview-tag-active-before-color);
           display: inline-block;
           width: 8px;
           height: 8px;
@@ -255,15 +255,15 @@ onBeforeMount(() => {
         vertical-align: middle;
         border-radius: 50%;
         &:hover {
-          background-color: #00000030;
+          background-color: var(--v3-tagsview-tag-icon-hover-bg-color);
-          color: #fff;
+          color: var(--v3-tagsview-tag-icon-hover-color);
         }
       }
     }
   }
   .contextmenu {
     margin: 0;
-    background: #fff;
+    background-color: #fff;
     z-index: 3000;
     position: absolute;
     list-style-type: none;
@@ -278,7 +278,7 @@ onBeforeMount(() => {
       padding: 7px 16px;
       cursor: pointer;
       &:hover {
-        background: #eee;
+        background-color: #eee;
       }
     }
   }

src/layout/index.vue

@@ -63,7 +63,6 @@ onBeforeUnmount(() => {
 
 <style lang="scss" scoped>
 @import "@/styles/mixins.scss";
-$sideBarWidth: 220px;
 
 .app-wrapper {
   @include clearfix;
@@ -72,7 +71,7 @@ $sideBarWidth: 220px;
 }
 
 .drawer-bg {
-  background: #000;
+  background-color: #000;
   opacity: 0.3;
   width: 100%;
   top: 0;
@@ -84,13 +83,13 @@ $sideBarWidth: 220px;
 .main-container {
   min-height: 100%;
   transition: margin-left 0.28s;
-  margin-left: $sideBarWidth;
+  margin-left: var(--v3-sidebar-width);
   position: relative;
 }
 
 .sidebar-container {
   transition: width 0.28s;
-  width: $sideBarWidth !important;
+  width: var(--v3-sidebar-width) !important;
   height: 100%;
   position: fixed;
   font-size: 0;
@@ -106,19 +105,19 @@ $sideBarWidth: 220px;
   top: 0;
   right: 0;
   z-index: 9;
-  width: calc(100% - #{$sideBarWidth});
+  width: calc(100% - var(--v3-sidebar-width));
   transition: width 0.28s;
 }
 
 .hideSidebar {
   .main-container {
-    margin-left: 54px;
+    margin-left: var(--v3-sidebar-hide-width);
   }
   .sidebar-container {
-    width: 54px !important;
+    width: var(--v3-sidebar-hide-width) !important;
   }
   .fixed-header {
-    width: calc(100% - 54px);
+    width: calc(100% - var(--v3-sidebar-hide-width));
   }
 }
 
@@ -129,7 +128,7 @@ $sideBarWidth: 220px;
   }
   .sidebar-container {
     transition: transform 0.28s;
-    width: $sideBarWidth !important;
+    width: var(--v3-sidebar-width) !important;
   }
   &.openSidebar {
     position: fixed;
@@ -139,7 +138,7 @@ $sideBarWidth: 220px;
     .sidebar-container {
       pointer-events: none;
       transition-duration: 0.3s;
-      transform: translate3d(-$sideBarWidth, 0, 0);
+      transform: translate3d(calc(0px - var(--v3-sidebar-width)), 0, 0);
     }
   }
 

src/styles/index.scss

@@ -1,7 +1,11 @@
-@import "./mixins.scss"; // mixins
+// 全局 css 变量
-@import "./transition.scss"; // transition
+@import "variables.css";
-@import "./theme/register.scss"; // 注册主题
+// transition
+@import "./transition.scss";
+// 注册主题
+@import "./theme/register.scss";
 
+// 业务页面几乎都应该在根元素上挂载 class="app-container"，以保持页面美观
 .app-container {
   padding: 20px;
 }
@@ -12,7 +16,7 @@ html {
 
 body {
   height: 100%;
-  background-color: #f0f2f5; // 全局背景色
+  background-color: var(--v3-body-bg-color);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,

src/styles/variables.css

@@ -0,0 +1,34 @@
+/** 全局 css 变量，这种变量不仅可以在 css 和 scss 中使用，还可以导入到 js 中使用 */
+
+:root {
+  /** 全局背景色 */
+  --v3-body-bg-color: #f0f2f5;
+  /** Header 区域 = NavigationBar 组件 + TagsView 组件 */
+  --v3-header-height: calc(var(--v3-navigationbar-height) + var(--v3-tagsview-height));
+  /** NavigationBar 组件 */
+  --v3-navigationbar-height: 50px;
+  /** Sidebar 组件 */
+  --v3-sidebar-width: 220px;
+  --v3-sidebar-hide-width: 54px;
+  --v3-sidebar-menu-item-height: 60px;
+  --v3-sidebar-menu-tip-line-bg-color: #66b1ff;
+  --v3-sidebar-menu-bg-color: #152d3d;
+  --v3-sidebar-menu-hover-bg-color: #ffffff10;
+  --v3-sidebar-menu-text-color: #c0c4cc;
+  --v3-sidebar-menu-active-text-color: #ffffff;
+  /** SidebarLogo 组件 */
+  --v3-sidebarlogo-bg-color: #0c202b;
+  /** TagsView 组件 */
+  --v3-tagsview-height: 34px;
+  --v3-tagsview-tag-text-color: #495060;
+  --v3-tagsview-tag-active-text-color: #ffffff;
+  --v3-tagsview-tag-bg-color: #ffffff;
+  --v3-tagsview-tag-active-bg-color: #409eff;
+  --v3-tagsview-tag-border-color: #d8dce5;
+  --v3-tagsview-tag-active-border-color: #409eff;
+  --v3-tagsview-tag-active-before-color: #ffffff;
+  --v3-tagsview-tag-icon-hover-bg-color: #00000030;
+  --v3-tagsview-tag-icon-hover-color: #ffffff;
+  /** RightPanel 组件  */
+  --v3-rightpanel-button-bg-color: #152d3d;
+}

src/utils/index.ts

@@ -8,3 +8,15 @@ export const formatDateTime = (time: any) => {
   const date = new Date(time)
   return dayjs(date).format("YYYY-MM-DD HH:mm:ss")
 }
+
+/** 将全局 css 导入 js 中使用 */
+export const getCssVariableValue = (cssVariableName: string) => {
+  let cssVariableValue = ""
+  try {
+    // 没有拿到值时，会返回空串
+    cssVariableValue = getComputedStyle(document.documentElement).getPropertyValue(cssVariableName)
+  } catch (error) {
+    console.error(error)
+  }
+  return cssVariableValue
+}