fix

package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "webfe",
-  "version": "0.0.0",
+  "name": "webpreview",
+  "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "webfe",
-      "version": "0.0.0",
+      "name": "webpreview",
+      "version": "0.1.0",
       "dependencies": {
         "@codemirror/lang-css": "^6.3.1",
         "@codemirror/lang-html": "^6.4.9",
@@ -20,6 +20,7 @@
       },
       "devDependencies": {
         "@codemirror/state": "^6.5.2",
+        "@iconify/vue": "^4.3.0",
         "@rsbuild/core": "^1.2.11",
         "@rsbuild/plugin-vue": "^1.0.6",
         "@vue/tsconfig": "^0.7.0",
@@ -222,6 +223,29 @@
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
       "license": "MIT"
     },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@iconify/vue": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.3.0.tgz",
+      "integrity": "sha512-Xq0h6zMrHBbrW8jXJ9fISi+x8oDQllg5hTDkDuxnWiskJ63rpJu9CvJshj8VniHVTbsxCg9fVoPAaNp3RQI5OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "webfe",
+  "name": "webpreview",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "start": "rsbuild dev",
@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@codemirror/state": "^6.5.2",
+    "@iconify/vue": "^4.3.0",
     "@rsbuild/core": "^1.2.11",
     "@rsbuild/plugin-vue": "^1.0.6",
     "@vue/tsconfig": "^0.7.0",

src/components/Editor.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
 import { EditorView } from "@codemirror/view"
 import { Codemirror } from "vue-codemirror"
-import { oneDark } from "../themes/oneDark.ts"
 import { smoothy } from "../themes/smoothy.ts"
-import { useDark } from "@vueuse/core"
 import { computed } from "vue"
 import { css } from "@codemirror/lang-css"
 import { javascript } from "@codemirror/lang-javascript"
@@ -33,8 +31,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const code = defineModel<string>("value")
 
-const isDark = useDark()
-
 const lang = computed(() => {
   if (props.language === "html") {
     return html()
@@ -49,7 +45,7 @@ const lang = computed(() => {
   <Codemirror
     v-model="code"
     indentWithTab
-    :extensions="[styleTheme, lang, isDark ? oneDark : smoothy]"
+    :extensions="[styleTheme, lang, smoothy]"
     :tabSize="4"
     :style="{ height: '100%', fontSize: props.fontSize + 'px' }"
   />

src/components/Editors.vue

@@ -1,27 +1,41 @@
 <template>
-  <n-config-provider
-    :locale="zhCN"
-    :date-locale="dateZhCN"
-    :theme="null"
-  >
+  <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
     <n-tabs pane-class="pane" default-value="html" type="segment">
       <n-tab-pane name="html" tab="HTML">
+        <template #tab>
+          <n-flex align="center">
+            <Icon icon="skill-icons:html" :width="20" :height="20"></Icon>
+            <span>HTML5</span>
+          </n-flex>
+        </template>
         <Editor language="html" :font-size="size" v-model:value="html" />
       </n-tab-pane>
       <n-tab-pane name="css" tab="CSS">
+        <template #tab>
+          <n-flex align="center">
+            <Icon icon="skill-icons:css" :width="20" :height="20"></Icon>
+            <span>CSS3</span>
+          </n-flex>
+        </template>
         <Editor language="css" :font-size="size" v-model:value="css" />
       </n-tab-pane>
-      <n-tab-pane name="js" tab="JS">
+      <n-tab-pane disabled name="js" tab="JS(未完成)">
+        <template #tab>
+          <n-flex align="center">
+            <Icon icon="skill-icons:javascript" :width="20" :height="20"></Icon>
+            <span>JS(未完成)</span>
+          </n-flex>
+        </template>
         <Editor language="js" :font-size="size" v-model:value="js" />
       </n-tab-pane>
       <n-tab-pane name="actions" tab="选项">
+        <template #tab>
+          <n-flex align="center">
+            <Icon icon="solar:settings-bold" :width="20" :height="20"></Icon>
+            <span>选项</span>
+          </n-flex>
+        </template>
         <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>
@@ -46,13 +60,10 @@
   </n-config-provider>
 </template>
 <script lang="ts" setup>
-import { darkTheme, dateZhCN, zhCN } from "naive-ui"
-import { useDark, useToggle } from "@vueuse/core"
+import { dateZhCN, zhCN } from "naive-ui"
+import { Icon } from "@iconify/vue"
 import Editor from "./Editor.vue"
 import { html, css, js, reset, size, changeSize } from "../store.ts"
-
-const isDark = useDark()
-const toggleDark = useToggle(isDark)
 </script>
 <style scoped>
 .pane {

src/components/Preview.vue

@@ -13,20 +13,19 @@ function preview() {
   const doc = iframe.value.contentDocument!
   doc.open()
   doc.write(`<!DOCTYPE html>
-  <html lang="zh-Hans-CN">
+<html lang="zh-Hans-CN">
   <head>
     <meta charset="UTF-8" />
     <title>预览</title>
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>${css.value}</style>
   </head>
   <body>
     ${html.value}
   </body>
-  </html>`)
+</html>`)
   doc.close()
 }
-
 watch([html, css], preview)
 onMounted(preview)
 </script>