From 3b3db22231070a627b4dfdc1a62fb76ed14c54e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E8=89=AF?= <841369634@qq.com>
Date: Mon, 22 Jan 2024 10:22:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=97=E8=89=B2=E4=B8=BB=E9=A2=98=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BB=A3=E7=A0=81=EF=BC=8C=E8=BD=AC=E7=A7=BB=E5=88=B0?=
 =?UTF-8?q?=20dark.scss=20=E4=B8=AD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/gui/src/main.js                      |   1 +
 .../gui/src/view/components/container.vue     | 171 -----------------
 packages/gui/src/view/style/index.scss        |  13 +-
 packages/gui/src/view/style/theme/dark.scss   | 177 ++++++++++++++++++
 4 files changed, 185 insertions(+), 177 deletions(-)
 create mode 100644 packages/gui/src/view/style/theme/dark.scss

diff --git a/packages/gui/src/main.js b/packages/gui/src/main.js
index 29f2ad24..14e34d1d 100644
--- a/packages/gui/src/main.js
+++ b/packages/gui/src/main.js
@@ -7,6 +7,7 @@ import VueRouter from 'vue-router'
 import routes from './view/router'
 import DsContainer from './view/components/container'
 import './view/style/index.scss'
+import './view/style/theme/dark.scss' // 暗色主题
 
 Vue.config.productionTip = false
 Vue.use(antd)
diff --git a/packages/gui/src/view/components/container.vue b/packages/gui/src/view/components/container.vue
index 7d0f5f7a..f1a7437e 100644
--- a/packages/gui/src/view/components/container.vue
+++ b/packages/gui/src/view/components/container.vue
@@ -15,177 +15,6 @@ export default {
 </script>
 
 <style lang="scss">
-/* 暗色主题 */
-$dark-logo: url("/logo/logo-lang-light.svg");
-$dark-bg: #1e1f22; //背景
-$dark-bg-highlight: #333; //高亮块：背景
-$dark-text: #ddd; //字体颜色
-$dark-menu-selected: #1890ff; //菜单选中：字体颜色
-$dark-bd: #333; //边框和分隔线
-$dark-bd2: #929292; //边框和分隔线
-$dark-btn: #444; //按钮：边框和背景颜色
-.theme-dark{
-  /* 背景色和字体颜色 */
-  .ds_layout, .ant-layout,
-  .ds-container, .ds-container .container-header,
-  .ant-layout-footer{
-    background: $dark-bg;
-    color: $dark-text;
-  }
-  div, span, label {
-    color: $dark-text;
-  }
-  .form-help {
-    color: #999
-  }
-
-  /* 高亮块：背景色和字体颜色 */
-  .ant-alert-warning{
-    background: $dark-bg-highlight;
-    border-color: $dark-bg-highlight;
-    color: $dark-text;
-    /* 关闭图标颜色 */
-    .ant-alert-close-icon .anticon-close {
-      color: $dark-text;
-    }
-  }
-  .ant-alert-info{
-    background: $dark-bg-highlight;
-    border-color: $dark-bg-highlight;
-    color: $dark-text;
-  }
-
-  /* 边框和分隔线 */
-  .ant-layout-has-sider,
-  .ant-layout-sider-children,
-  .ds-container .container-header,
-  .logo,
-  .footer-bar,
-  .ant-layout-footer,
-  .ant-tabs .ant-tabs-left-bar,
-  .ant-tabs .ant-tabs-left-content{
-    border-color: $dark-bd;
-  }
-
-  /* 左侧 */
-  /** 背景色 **/
-  .ant-layout-sider{
-    background: $dark-bg;
-  }
-  /** Logo **/
-  .logo{
-    background-image: $dark-logo; /* logo使用亮色的 */
-  }
-  /** 菜单 **/
-  .ant-menu{
-    background: $dark-bg;
-    color: $dark-text;
-  }
-  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
-    background: $dark-bg-highlight;
-    color: $dark-menu-selected;
-    span{ color: $dark-menu-selected; }
-  }
-
-  /* 输入框、下拉框 */
-  .ant-input, .ant-input-number-input, .ant-input-number, .ant-select-selection,
-  .ant-input-group-addon{
-    background: #777;
-    border-color: #aaa;
-    color: $dark-text;
-    &:hover, &:focus{
-      border-color: #fff;
-    }
-  }
-
-  /* 卡片消息：IP测速 */
-  .ant-card{
-    background: #777;
-    border-color: #777;
-    .ant-card-head{
-      border-bottom-color: $dark-bd2;
-    }
-  }
-
-  /* 标签：未启用 */
-  .ant-tag-red{
-    background: #4f4749;
-    border-color: #4f4749;
-    color: #bf8285;
-  }
-  /* 标签：已启用 */
-  .ant-tag-green{
-    background: #505f5f;
-    border-color: #505f5f;
-    color: #90cb9f;
-  }
-
-  /* 按钮 */
-  .ant-btn:not(.ant-btn-danger, .ant-btn-primary){
-    background: $dark-btn;
-    border-color: $dark-btn;
-    color: $dark-text;
-    &:hover{
-      opacity: 0.8;
-    }
-  }
-
-  /* 单选框：开关式 */
-  .ant-switch:not(.ant-switch-checked){
-    background: $dark-btn;
-    border-color: $dark-btn;
-    &:hover{
-      opacity: 0.8;
-    }
-  }
-  /* 单选框：按钮式 */
-  .ant-radio-button-wrapper{
-    background: $dark-btn;
-    border-color: $dark-btn;
-    color: $dark-text;
-    &:hover{
-      opacity: 0.8;
-    }
-  }
-
-  /* JSON编辑器：应用于拦截设置 */
-  .jsoneditor-vue{
-    /* 头部和边框  */
-    div.jsoneditor-menu, div.jsoneditor{
-      background: $dark-bg;
-      border-color: $dark-bd;
-    }
-    /* 内容区域：背景和字体颜色 */
-    .ace_gutter, .ace_scroller{
-      background: #555;
-      color: #eee;
-    }
-    /* key的颜色 */
-    .ace_variable, .ace_text-layer{
-      color: #eee;
-    }
-    /* 字符串值的颜色 */
-    .ace_string, .ace_cjk{
-      color: #a6eaa6;
-    }
-    .ace_constant{
-      /* 数字的颜色 */
-      &.ace_numeric{
-        color: #ec9999;
-      }
-      /* 布尔值的颜色 */
-      &.ace_language{
-        color: #f4c995;
-      }
-    }
-    /* 当前行高亮样式 */
-    .ace_gutter-active-line,
-    .ace_marker-layer .ace_active-line{
-      background: #838774;
-    }
-  }
-}
-
 .ds-container{
   height:100%;
   background: #fff;
diff --git a/packages/gui/src/view/style/index.scss b/packages/gui/src/view/style/index.scss
index bd5d99d3..91ccedbb 100644
--- a/packages/gui/src/view/style/index.scss
+++ b/packages/gui/src/view/style/index.scss
@@ -8,12 +8,13 @@
   align-content:  center;
   display: flex;
   justify-content: flex-end;
-  align-items: center
-}
-.flex-l-r>a{
-  align-content:  center;
-  display: flex;
-  align-items: center
+  align-items: center;
+
+  &>a{
+    align-content:  center;
+    display: flex;
+    align-items: center;
+  }
 }
 
 .md-mr-5{margin-right: 5px;}
diff --git a/packages/gui/src/view/style/theme/dark.scss b/packages/gui/src/view/style/theme/dark.scss
new file mode 100644
index 00000000..6edeeed2
--- /dev/null
+++ b/packages/gui/src/view/style/theme/dark.scss
@@ -0,0 +1,177 @@
+/* 暗色主题 */
+$dark-logo: url("../../../../public/logo/logo-lang-light.svg");
+$dark-bg: #1e1f22; //背景
+$dark-bg-highlight: #333; //高亮块：背景
+$dark-text: #ddd; //字体颜色
+$dark-menu-selected: #1890ff; //菜单选中：字体颜色
+$dark-bd: #333; //边框和分隔线
+$dark-bd2: #929292; //边框和分隔线
+$dark-btn: #444; //按钮：边框和背景颜色
+.theme-dark{
+  /* 背景色和字体颜色 */
+  .ds_layout, .ant-layout,
+  .ds-container, .ds-container .container-header,
+  .ant-layout-footer{
+    background: $dark-bg;
+    color: $dark-text;
+  }
+  div, span, label {
+    color: $dark-text;
+  }
+  .form-help {
+    color: #999
+  }
+
+  /* 高亮块：背景色和字体颜色 */
+  /* 警告类型 */
+  .ant-alert-warning{
+    background: $dark-bg-highlight;
+    border-color: $dark-bg-highlight;
+    color: $dark-text;
+    /* 关闭图标颜色 */
+    .ant-alert-close-icon .anticon-close {
+      color: $dark-text;
+    }
+  }
+  /* 消息类型 */
+  .ant-alert-info{
+    background: $dark-bg-highlight;
+    border-color: $dark-bg-highlight;
+    color: $dark-text;
+  }
+
+  /* 边框和分隔线 */
+  .ant-layout-has-sider,
+  .ant-layout-sider-children,
+  .ds-container .container-header,
+  .logo,
+  .footer-bar,
+  .ant-layout-footer,
+  .ant-tabs .ant-tabs-left-bar,
+  .ant-tabs .ant-tabs-left-content{
+    border-color: $dark-bd;
+  }
+
+  /* 左侧 */
+  /** 背景色 **/
+  .ant-layout-sider{
+    background: $dark-bg;
+  }
+  /** Logo **/
+  .logo{
+    background-image: $dark-logo; /* logo使用亮色的 */
+  }
+  /** 菜单 **/
+  .ant-menu{
+    background: $dark-bg;
+    color: $dark-text;
+  }
+  /* 菜单选中时，或鼠标移到菜单上时的样式 */
+  .ant-menu-item:hover,
+  .ant-menu-submenu .ant-menu-submenu-title:hover,
+  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
+    background: $dark-bg-highlight;
+    color: $dark-menu-selected;
+    span{ color: $dark-menu-selected; }
+  }
+
+  /* 输入框、下拉框 */
+  .ant-input,
+  .ant-input-number-input, .ant-input-number,
+  .ant-select-selection,
+  .ant-input-group-addon{
+    background: #777;
+    border-color: #aaa;
+    color: $dark-text;
+    &:hover, &:focus{
+      border-color: #fff;
+    }
+  }
+
+  /* 卡片消息：IP测速 */
+  .ant-card{
+    background: #777;
+    border-color: #777;
+    .ant-card-head{
+      border-bottom-color: $dark-bd2;
+    }
+  }
+
+  /* 标签：未启用 */
+  .ant-tag-red{
+    background: #4f4749;
+    border-color: #4f4749;
+    color: #bf8285;
+  }
+  /* 标签：已启用 */
+  .ant-tag-green{
+    background: #505f5f;
+    border-color: #505f5f;
+    color: #90cb9f;
+  }
+
+  /* 按钮 */
+  .ant-btn:not(.ant-btn-danger, .ant-btn-primary){
+    background: $dark-btn;
+    border-color: $dark-btn;
+    color: $dark-text;
+    &:hover{
+      opacity: 0.8;
+    }
+  }
+
+  /* 单选框：开关式 */
+  .ant-switch:not(.ant-switch-checked){
+    background: $dark-btn;
+    border-color: $dark-btn;
+    &:hover{
+      opacity: 0.8;
+    }
+  }
+  /* 单选框：按钮式 */
+  .ant-radio-button-wrapper{
+    background: $dark-btn;
+    border-color: $dark-btn;
+    color: $dark-text;
+    &:hover{
+      opacity: 0.8;
+    }
+  }
+
+  /* JSON编辑器：应用于拦截设置 */
+  .jsoneditor-vue{
+    /* 头部和边框  */
+    div.jsoneditor-menu, div.jsoneditor{
+      background: $dark-bg;
+      border-color: $dark-bd;
+    }
+    /* 内容区域：背景和字体颜色 */
+    .ace_gutter, .ace_scroller{
+      background: #555;
+      color: #eee;
+    }
+    /* key的颜色 */
+    .ace_variable, .ace_text-layer{
+      color: #eee;
+    }
+    /* 字符串值的颜色 */
+    .ace_string, .ace_cjk{
+      color: #a6eaa6;
+    }
+    .ace_constant{
+      /* 数字的颜色 */
+      &.ace_numeric{
+        color: #ec9999;
+      }
+      /* 布尔值的颜色 */
+      &.ace_language{
+        color: #f4c995;
+      }
+    }
+    /* 当前行高亮样式 */
+    .ace_gutter-active-line,
+    .ace_marker-layer .ace_active-line{
+      background: #838774;
+    }
+  }
+}
\ No newline at end of file