From 2b0c75a6490324c2b485a23d53939bd53b4beede Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Fri, 11 Mar 2022 11:29:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lang/en-us.json                           |  1 +
 src/lang/zh-cn.json                           |  1 +
 src/lang/zh-tw.json                           |  1 +
 .../setting/components/ThemeSelectorModal.vue | 21 +++++++++++++++++++
 .../views/setting/components/UserApiModal.vue |  4 ++++
 5 files changed, 28 insertions(+)

diff --git a/src/lang/en-us.json b/src/lang/en-us.json
index ac967261..eaac944f 100644
--- a/src/lang/en-us.json
+++ b/src/lang/en-us.json
@@ -429,6 +429,7 @@
   "theme_selector_modal__dark_title": "dark theme",
   "theme_selector_modal__light_title": "Bright theme",
   "theme_selector_modal__title": "Follow system theme settings",
+  "theme_selector_modal__title_tip": "Note: You can set a light theme and a dark theme in advance, and then it will automatically switch to the corresponding theme you set in advance according to the light and dark theme colors of the system.",
   "theme_yellow": "Yellow",
   "user_api__allow_show_update_alert": "Allow update popup to show",
   "user_api__btn_export": "Export",
diff --git a/src/lang/zh-cn.json b/src/lang/zh-cn.json
index 63bd81cd..ea331d6a 100644
--- a/src/lang/zh-cn.json
+++ b/src/lang/zh-cn.json
@@ -429,6 +429,7 @@
   "theme_selector_modal__dark_title": "暗色主题",
   "theme_selector_modal__light_title": "亮色主题",
   "theme_selector_modal__title": "跟随系统主题设置",
+  "theme_selector_modal__title_tip": "注：你可以预先设置一个亮色主题及暗色主题，此后将根据系统的亮、暗主题色自动切换为你预先设置的相应主题。",
   "theme_yellow": "信口雌黄",
   "user_api__allow_show_update_alert": "允许显示更新弹窗",
   "user_api__btn_export": "导出",
diff --git a/src/lang/zh-tw.json b/src/lang/zh-tw.json
index 27f54799..a15c4d84 100644
--- a/src/lang/zh-tw.json
+++ b/src/lang/zh-tw.json
@@ -429,6 +429,7 @@
   "theme_selector_modal__dark_title": "暗色主題",
   "theme_selector_modal__light_title": "亮色主題",
   "theme_selector_modal__title": "跟隨系統主題設置",
+  "theme_selector_modal__title_tip": "注：你可以預先設置一個亮色主題及暗色主題，此後將根據系統的亮、暗主題色自動切換為你預先設置的相應主題。",
   "theme_yellow": "信口雌黃",
   "user_api__allow_show_update_alert": "允許顯示更新彈窗",
   "user_api__btn_export": "導出",
diff --git a/src/renderer/views/setting/components/ThemeSelectorModal.vue b/src/renderer/views/setting/components/ThemeSelectorModal.vue
index ea9a360a..f495209e 100644
--- a/src/renderer/views/setting/components/ThemeSelectorModal.vue
+++ b/src/renderer/views/setting/components/ThemeSelectorModal.vue
@@ -15,6 +15,8 @@ material-modal(:show="modelValue" bg-close @close="$emit('update:modelValue', fa
           li(v-for="theme in themeDarks" :key="theme.id" :tips="$t('theme_' + theme.className)" @click="currentStting.theme.darkId = theme.id" :class="[theme.className, {[$style.active]: darkId == theme.id}]")
             span
             label {{$t('theme_' + theme.className)}}
+    div(:class="$style.note")
+      p {{$t('theme_selector_modal__title_tip')}}
 </template>
 
 <script>
@@ -57,6 +59,10 @@ export default {
   min-height: 0;
   // max-height: 100%;
   // overflow: hidden;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  min-height: 0;
   h2 {
     flex: none;
     font-size: 16px;
@@ -142,6 +148,18 @@ export default {
   }
 }
 
+.note {
+  padding: 8px 15px;
+  font-size: 13px;
+  line-height: 1.25;
+  color: @color-theme_2-font;
+  // p {
+  //   + p {
+  //     margin-top: 5px;
+  //   }
+  // }
+}
+
 each(@themes, {
   .theme {
     li {
@@ -155,6 +173,9 @@ each(@themes, {
       }
     }
   }
+  .note {
+    color: ~'@{color-@{value}-theme_2-font}';
+  }
 })
 
 </style>
diff --git a/src/renderer/views/setting/components/UserApiModal.vue b/src/renderer/views/setting/components/UserApiModal.vue
index 37030acb..2b24caf0 100644
--- a/src/renderer/views/setting/components/UserApiModal.vue
+++ b/src/renderer/views/setting/components/UserApiModal.vue
@@ -247,6 +247,10 @@ each(@themes, {
     .noitem {
       color: ~'@{color-@{value}-theme_2-font-label}';
     }
+
+    .note {
+      color: ~'@{color-@{value}-theme_2-font}';
+    }
   }
 })