From c83b5ab6c066e582ea0b7e8bf54ad087e41c113f Mon Sep 17 00:00:00 2001
From: tone <3341154833@qq.com>
Date: Sun, 13 Oct 2024 14:31:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tonecn/src/components/Console/FileOnline.vue | 83 +++++++++++++-------
 tonecn/src/views/Console/Login.vue           |  4 +-
 2 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/tonecn/src/components/Console/FileOnline.vue b/tonecn/src/components/Console/FileOnline.vue
index a3f9d1c..2efa4e3 100644
--- a/tonecn/src/components/Console/FileOnline.vue
+++ b/tonecn/src/components/Console/FileOnline.vue
@@ -15,7 +15,8 @@ import 'ace-builds/src-noconflict/mode-typescript'
 import 'ace-builds/src-noconflict/mode-html'
 import 'ace-builds/src-noconflict/mode-css'
 import 'ace-builds/src-noconflict/mode-vue'
-import 'ace-builds/src-noconflict/theme-chrome';
+import 'ace-builds/src-noconflict/theme-github';
+import 'ace-builds/src-noconflict/theme-github_dark'
 import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url';
 ace.config.setModuleUrl('ace/mode/json', modeJsonUrl);
 import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url';
@@ -56,6 +57,24 @@ onMounted(async () => {
 
     await loadFullFileList();
     loadFileListShow();
+
+    // aceEditor 深色模式监听
+    // 监听主题变化
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', checkTheme);
+    // 初始检查
+    checkTheme();
+})
+
+const checkTheme = () => {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        aceEditorTheme.value = 'github_dark'
+    } else {
+        aceEditorTheme.value = 'github'
+    }
+};
+
+onMounted(() => {
+    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', checkTheme);
 })
 
 // 当前目录
@@ -340,6 +359,7 @@ const saveAceEditorContent = async () => {
         saveAceEditorContentLoading.value = false;
     }
 }
+const aceEditorTheme = ref('github');
 </script>
 <template>
     <div class="container w-full">
@@ -358,9 +378,10 @@ const saveAceEditorContent = async () => {
             <el-icon @click="Dirto(0)" class="cursor-pointer hover:text-[#222] mr-[5px]">
                 <House />
             </el-icon>
-            <span v-for="i, key of prefix.split('/')" class="text-[#666]">
+            <span v-for="i, key of prefix.split('/')" class="text-[#666] dark:text-[#bbb]">
                 <span v-if="i != ''" class="mx-[3px]">/</span>
-                <span @click="Dirto(key + 1)" class="cursor-pointer hover:text-[#222]">{{ i }}</span>
+                <span @click="Dirto(key + 1)" class="cursor-pointer hover:text-[#222] dark:hover:text-[#fff]">{{ i
+                    }}</span>
             </span>
             <span class="mx-[3px] text-[#666]">/</span>
         </div>
@@ -420,33 +441,35 @@ const saveAceEditorContent = async () => {
         <el-button @click="uploadFile" :loading="isUploading" class="mt-[10px]">开始上传</el-button>
     </el-dialog>
     <!-- 在线文本编辑 -->
-    <div v-if="aceEditorShow"
-        class="fixed w-full h-full inset-0 z-[2000] bg-[#00000066] flex justify-center items-center"
-        @click="closeAceEditor">
-        <div class="w-3/4 h-3/4 bg-white p-[15px] rounded-[5px] flex flex-col" @click.stop>
-            <div class="w-full flex items-center justify-between">
-                <span>正在编辑 - /{{ aceEditorFileInfo.name }}</span>
-                <el-button circle text @click="closeAceEditor">
-                    <el-icon>
-                        <Close />
-                    </el-icon>
-                </el-button>
-            </div>
-            <div class="w-full flex items-center gap-[15px] pb-[15px]">
-                <span>语言
-                    <el-select v-model="aceEditorConfig.lang" style="width: 130px;margin-left: 8px;">
-                        <el-option v-for="[key, value] of editableFileTypes" :key="value" :label="value"
-                            :value="value"></el-option>
-                    </el-select>
-                </span>
-            </div>
-            <v-ace-editor v-model:value="aceEditorContent.text" :lang="aceEditorConfig.lang" theme="chrome"
-                class="w-full flex-1" />
-            <div class="flex justify-end">
-                <el-button @click="resetAceEditorContent">重置</el-button>
-                <el-button @click="saveAceEditorContent" :loading="saveAceEditorContentLoading"
-                    type="primary">保存</el-button>
+    <transition name="el-fade-in-linear">
+        <div v-if="aceEditorShow"
+            class="fixed w-full h-full inset-0 z-[2000] bg-[#00000066] flex justify-center items-center"
+            @click="closeAceEditor">
+            <div class="w-3/4 h-3/4 bg-white dark:bg-[#141414] p-[15px] rounded-[5px] flex flex-col" @click.stop>
+                <div class="w-full flex items-center justify-between">
+                    <span>正在编辑 - /{{ aceEditorFileInfo.name }}</span>
+                    <el-button circle text @click="closeAceEditor">
+                        <el-icon>
+                            <Close />
+                        </el-icon>
+                    </el-button>
+                </div>
+                <div class="w-full flex items-center gap-[15px] pb-[15px]">
+                    <span>语言
+                        <el-select v-model="aceEditorConfig.lang" style="width: 130px;margin-left: 8px;">
+                            <el-option v-for="[key, value] of editableFileTypes" :key="value" :label="value"
+                                :value="value"></el-option>
+                        </el-select>
+                    </span>
+                </div>
+                <v-ace-editor v-model:value="aceEditorContent.text" :lang="aceEditorConfig.lang" :theme="aceEditorTheme"
+                    class="w-full flex-1" />
+                <div class="flex justify-end mt-[10px]">
+                    <el-button @click="resetAceEditorContent">重置</el-button>
+                    <el-button @click="saveAceEditorContent" :loading="saveAceEditorContentLoading"
+                        type="primary">保存</el-button>
+                </div>
             </div>
         </div>
-    </div>
+    </transition>
 </template>
\ No newline at end of file
diff --git a/tonecn/src/views/Console/Login.vue b/tonecn/src/views/Console/Login.vue
index 1017fb2..6b31eda 100644
--- a/tonecn/src/views/Console/Login.vue
+++ b/tonecn/src/views/Console/Login.vue
@@ -62,12 +62,12 @@ onMounted(async () => {
     <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
     <div
         class="flex flex-col items-center justify-center mx-auto sm:h-[calc(100vh-90px)] h-[calc(100vh-77px)] px-[20px] max-w-[280px] min-h-[400px]">
-        <h1 class="text-center text-[36px] font-medium cursor-default dark:text-white">登录到控制台</h1>
+        <h1 class="text-center text-[36px] font-medium cursor-default text-black dark:text-white">登录到控制台</h1>
         <el-popover placement="bottom" :width="300" trigger="click">
             <p>控制台是特恩(TONE)网页中的一个控制器界面，如果您是管理员，可通过登录后编辑本网页中的内容（资源、工具、日记等），详情请见<strong style="cursor: pointer;"
                     @click="">《特恩(TONE)控制台使用协议》</strong></p>
             <template #reference>
-                <h3 class="text-center cursor-pointer font-semibold mt-[10px] dark:text-[#ccc]">控制台是什么？</h3>
+                <h3 class="text-center cursor-pointer font-semibold mt-[10px] text-[#333] dark:text-[#ccc]">控制台是什么？</h3>
             </template>
         </el-popover>
         <div class="w-full flex flex-col items-center">