feat: 优化路径加载和主题切换

Author: Flex-7746

frontend/src/App.vue

@@ -65,32 +65,31 @@ const { open, like, resetLike } = useLike()
 
 const defInfo = reactive({ path: '' })
 
-onBeforeMount(async () => {
-  defInfo.path = await getPath()
-})
-
-const getPath = async (): Promise<string> => {
+onBeforeMount(() => {
   const query = new URLSearchParams(window.location.search).get('path') || ''
   if (query) {
-    return query
+    defInfo.path = query
+  } else {
+    inputPath(true)
   }
+})
 
-  return inputPath()
-}
-
-const inputPath = async () => {
+const inputPath = async (force?: boolean) => {
   return await ElMessageBox.prompt(
     '部分文件可在文件管理中双击文件进行编辑，详见应用介绍',
     '请输入文件路径',
     {
+      showClose: false,
+      closeOnClickModal: false,
+      closeOnPressEscape: false,
+      closeOnHashChange: false,
+      showCancelButton: !force,
       confirmButtonText: '确认',
       cancelButtonText: '取消',
     },
   ).then(({ value }) => {
     if (value) {
-      return defInfo.path = value
-    } else {
-      return value
+      defInfo.path = value
     }
   })
 }
@@ -103,6 +102,17 @@ body,
   height: 100%;
 }
 
+html {
+  &.dark {
+    #app {
+      > .header,
+      > .footer {
+        background-color: #1c1c1c;
+      }
+    }
+  }
+}
+
 #app {
   height: 100%;
   display: flex;
@@ -114,7 +124,6 @@ body,
     display: flex;
     align-items: center;
     gap: 4px;
-    background-color: #1c1c1c;
     padding: 0 12px;
 
     > * {
@@ -123,22 +132,22 @@ body,
   }
 
   > .header {
-    border-bottom: solid 1px rgba(255, 255, 255, 0.2);
+    border-bottom: solid 1px var(--el-border-color);
 
     > .title {
       font-size: 14px;
       line-height: 32px;
-      color: #fff;
+      color: var(--el-text-color-primary);
     }
   }
 
   > .footer {
-    border-top: solid 1px rgba(255, 255, 255, 0.2);
+    border-top: solid 1px var(--el-border-color);
 
     > .developed {
       font-size: 12px;
       line-height: 32px;
-      color: gray;
+      color: var(--el-text-color-placeholder);
     }
   }
 

frontend/src/hooks/useLike.ts

@@ -1,6 +1,7 @@
-import { reactive, ref, toRaw, watch } from 'vue'
+import { onMounted, reactive, ref, toRaw, watch, watchEffect } from 'vue'
 
 import localStorage from '@/utils/localStorage'
+import { THEME_OPTIONS } from '@/utils/option'
 
 export interface LikeModel {
   theme: string
@@ -25,9 +26,16 @@ export default function useCode() {
     localStorage.set(key, toRaw(like))
   })
 
+  watchEffect(() => {
+    const dark = THEME_OPTIONS.find((i) => i.value === like.theme)?.dark
+    document.documentElement.className = dark ? 'dark' : ''
+  })
+
   const resetLike = () => {
     Object.assign(like, { ...defLike })
   }
 
+  onMounted(() => {})
+
   return { open, like, resetLike }
 }

frontend/src/main.ts

@@ -8,6 +8,7 @@ import 'normalize.css'
 import 'element-plus/theme-chalk/el-input.css'
 import 'element-plus/theme-chalk/el-message.css'
 import 'element-plus/theme-chalk/el-message-box.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
 
 import '@/utils/monaco'
 ;(window as any).Buffer = Buffer

frontend/src/utils/option.ts

@@ -37,11 +37,11 @@ export const LANG_OPTIONS = [...new Set(Object.values(LANG_MAP))].map((t) => ({
   value: t,
 }))
 
-export const THEME_OPTIONS: { label: string; value: string }[] = [
-  { label: 'VS Light', value: 'vs' },
-  { label: 'VS Dark', value: 'vs-dark' },
-  { label: 'High Contrast Black', value: 'hc-black' },
-  { label: 'High Contrast Light', value: 'hc-light' },
+export const THEME_OPTIONS: { label: string; value: string; dark: boolean }[] = [
+  { label: 'VS Light', value: 'vs', dark: false },
+  { label: 'VS Dark', value: 'vs-dark', dark: true },
+  { label: 'High Contrast Light', value: 'hc-light', dark: false },
+  { label: 'High Contrast Black', value: 'hc-black', dark: true },
 ]
 
 export const ENCODING_OPTIONS = [