feat: 提取 css 变量

src/styles/index.scss

@@ -1,7 +1,11 @@
-@import "./mixins.scss"; // mixins
-@import "./transition.scss"; // transition
-@import "./theme/register.scss"; // 注册主题
+// 全局 css 变量
+@import "variables.css";
+// 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;
+}