From fc2126f364411589d1a07402fc1393ba96dcf1fe Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Sun, 23 Feb 2025 23:36:22 +0800
Subject: [PATCH] fix

---
 src/App.vue                | 27 +++++--------
 src/components/Editors.vue | 79 +++++++++++++++++++++-----------------
 src/main.ts                |  2 +-
 3 files changed, 53 insertions(+), 55 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 84d2a9a..c485f9f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import { darkTheme, dateZhCN, zhCN } from "naive-ui"
-import { useDark, useMagicKeys, whenever } from "@vueuse/core"
+import { useMagicKeys, whenever } from "@vueuse/core"
 import Editors from "./components/Editors.vue"
 import Preview from "./components/Preview.vue"
 
-const isDark = useDark()
-
 const { ctrl_s } = useMagicKeys({
   passive: false,
   onEventFired(e) {
@@ -24,18 +21,12 @@ whenever(ctrl_r, () => {})
 </script>
 
 <template>
-  <n-config-provider
-    :locale="zhCN"
-    :date-locale="dateZhCN"
-    :theme="isDark ? darkTheme : null"
-  >
-    <n-split :max="0.75" :min="0.25">
-      <template #1>
-        <Editors />
-      </template>
-      <template #2>
-        <Preview />
-      </template>
-    </n-split>
-  </n-config-provider>
+  <n-split :max="0.75" :min="0.25">
+    <template #1>
+      <Editors />
+    </template>
+    <template #2>
+      <Preview />
+    </template>
+  </n-split>
 </template>
diff --git a/src/components/Editors.vue b/src/components/Editors.vue
index 2ea40cd..90ea773 100644
--- a/src/components/Editors.vue
+++ b/src/components/Editors.vue
@@ -1,45 +1,52 @@
 <template>
-  <n-tabs pane-class="pane" default-value="html" type="segment">
-    <n-tab-pane name="html" tab="HTML">
-      <Editor language="html" :font-size="size" v-model:value="html" />
-    </n-tab-pane>
-    <n-tab-pane name="css" tab="CSS">
-      <Editor language="css" :font-size="size" v-model:value="css" />
-    </n-tab-pane>
-    <n-tab-pane name="js" tab="JS">
-      <Editor language="js" :font-size="size" v-model:value="js" />
-    </n-tab-pane>
-    <n-tab-pane name="actions" tab="选项">
-      <n-flex vertical class="wrapper">
-        <n-flex align="center">
-          <span class="label">主题</span>
-          <n-button @click="toggleDark()">
-            {{ isDark ? "浅色" : "深色" }}
-          </n-button>
-        </n-flex>
-        <n-flex align="center">
-          <span class="label">重置</span>
-          <n-button @click="reset('html')">HTML</n-button>
-          <n-button @click="reset('css')">CSS</n-button>
-          <n-button @click="reset('js')">JS</n-button>
-        </n-flex>
-        <n-flex align="center">
-          <span class="label">字号</span>
+  <n-config-provider
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+    :theme="null"
+  >
+    <n-tabs pane-class="pane" default-value="html" type="segment">
+      <n-tab-pane name="html" tab="HTML">
+        <Editor language="html" :font-size="size" v-model:value="html" />
+      </n-tab-pane>
+      <n-tab-pane name="css" tab="CSS">
+        <Editor language="css" :font-size="size" v-model:value="css" />
+      </n-tab-pane>
+      <n-tab-pane name="js" tab="JS">
+        <Editor language="js" :font-size="size" v-model:value="js" />
+      </n-tab-pane>
+      <n-tab-pane name="actions" tab="选项">
+        <n-flex vertical class="wrapper">
+          <!-- <n-flex align="center">
+            <span class="label">主题</span>
+            <n-button @click="toggleDark()">
+              {{ isDark ? "浅色" : "深色" }}
+            </n-button>
+          </n-flex> -->
           <n-flex align="center">
-            <span :style="{ 'font-size': size + 'px' }">{{ size }}</span>
-            <n-button @click="changeSize(size - 2)" :disabled="size === 20">
-              调小
-            </n-button>
-            <n-button @click="changeSize(size + 2)" :disabled="size === 40">
-              调大
-            </n-button>
+            <span class="label">重置</span>
+            <n-button @click="reset('html')">HTML</n-button>
+            <n-button @click="reset('css')">CSS</n-button>
+            <n-button @click="reset('js')">JS</n-button>
+          </n-flex>
+          <n-flex align="center">
+            <span class="label">字号</span>
+            <n-flex align="center">
+              <span :style="{ 'font-size': size + 'px' }">{{ size }}</span>
+              <n-button @click="changeSize(size - 2)" :disabled="size === 20">
+                调小
+              </n-button>
+              <n-button @click="changeSize(size + 2)" :disabled="size === 40">
+                调大
+              </n-button>
+            </n-flex>
           </n-flex>
         </n-flex>
-      </n-flex>
-    </n-tab-pane>
-  </n-tabs>
+      </n-tab-pane>
+    </n-tabs>
+  </n-config-provider>
 </template>
 <script lang="ts" setup>
+import { darkTheme, dateZhCN, zhCN } from "naive-ui"
 import { useDark, useToggle } from "@vueuse/core"
 import Editor from "./Editor.vue"
 import { html, css, js, reset, size, changeSize } from "../store.ts"
diff --git a/src/main.ts b/src/main.ts
index 51c0666..661351b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,7 +8,7 @@ import {
   NTabPane,
   NConfigProvider,
 } from "naive-ui"
-import "normalize.css"
+import "normalize.css" 
 import App from "./App.vue"
 
 const app = createApp(App)