feat: 优化代码结构，修复偏好重置不生效的问题

Author: Flex-7746

frontend/src/App.vue

@@ -13,7 +13,7 @@
         ref="editorRef"
         :path="item.path"
         :like="like"
-        @like="() => (open = !open)"
+        @like="() => (likeOpen = true)"
         @diff="(v) => (item.diff = v)"
       />
     </el-tab-pane>
@@ -36,61 +36,20 @@
     保存
   </el-button>
 
-  <el-dialog v-model="open" title="偏好设置" width="300">
-    <div class="like-dialog">
-      <div class="item">
-        <div class="label">保存确认</div>
-        <div class="value">
-          <el-switch v-model="like.confirm" inline-prompt />
-        </div>
-      </div>
-
-      <div class="item">
-        <div class="label">主题样式</div>
-        <div class="value">
-          <el-select v-model="like.theme" size="small">
-            <el-option
-              v-for="item in THEME_OPTIONS"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </div>
-      </div>
-
-      <div class="item">
-        <div class="label">字体大小</div>
-        <div class="value">
-          <el-input-number v-model="like.fontSize" :min="8" :max="100" size="small" />
-        </div>
-      </div>
-    </div>
-
-    <template #footer>
-      <div style="display: flex; align-items: center; margin-top: 32px">
-        <el-button size="small" type="danger" @click="resetLike()">恢复默认</el-button>
-
-        <div style="flex: 1"></div>
-
-        <div style="font-size: 12px; color: #999">修改实时生效，且进行缓存</div>
-      </div>
-    </template>
-  </el-dialog>
+  <LikeDialog v-model:open="likeOpen" v-model:like="like" @reset="resetLike()" />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import { Plus } from '@element-plus/icons-vue'
 
-import MonacoEditor from './components/MonacoEditor.vue'
-
-import { THEME_OPTIONS } from '@/utils/option'
+import MonacoEditor from '@/components/MonacoEditor.vue'
+import LikeDialog from '@/components/LikeDialog.vue'
 
 import useLike from '@/hooks/useLike'
 import usePath from '@/hooks/usePath'
 
-const { open, like, resetLike } = useLike()
+const { open: likeOpen, like, resetLike } = useLike()
 const { view, active, add, remove } = usePath()
 
 const editorRef = ref<any[]>([])

frontend/src/components/LikeDialog.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-dialog v-model="open" title="偏好设置" width="300">
+    <div class="like-dialog" v-if="like">
+      <div class="item">
+        <div class="label">保存确认</div>
+        <div class="value">
+          <el-switch v-model="like.confirm" inline-prompt />
+        </div>
+      </div>
+
+      <div class="item">
+        <div class="label">主题样式</div>
+        <div class="value">
+          <el-select v-model="like.theme" size="small">
+            <el-option
+              v-for="item in THEME_OPTIONS"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+      </div>
+
+      <div class="item">
+        <div class="label">字体大小</div>
+        <div class="value">
+          <el-input-number v-model="like.fontSize" :min="8" :max="100" size="small" />
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div style="display: flex; align-items: center; margin-top: 32px">
+        <el-button size="small" type="danger" @click="emit('reset')">恢复默认</el-button>
+
+        <div style="flex: 1"></div>
+
+        <div style="font-size: 12px; color: #999">修改实时生效，且进行缓存</div>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { THEME_OPTIONS } from '@/utils/option'
+
+import { type LikeModel } from '@/hooks/useLike'
+
+const emit = defineEmits<{ (e: 'reset'): void }>()
+
+const open = defineModel('open')
+
+const like = defineModel<LikeModel>('like')
+</script>

frontend/src/hooks/useLike.ts

@@ -1,4 +1,4 @@
-import { onMounted, reactive, ref, toRaw, watch, watchEffect } from 'vue'
+import { reactive, ref, toRaw, watch, watchEffect } from 'vue'
 
 import localStorage from '@/utils/localStorage'
 import { THEME_OPTIONS } from '@/utils/option'
@@ -20,7 +20,7 @@ const key = 'like_v1'
 export default function useCode() {
   const open = ref(false)
 
-  const like = reactive<LikeModel>(Object.assign(defLike, localStorage.get(key)))
+  const like = reactive<LikeModel>(Object.assign({}, defLike, localStorage.get(key)))
 
   watch(like, () => {
     localStorage.set(key, toRaw(like))
@@ -35,7 +35,5 @@ export default function useCode() {
     Object.assign(like, { ...defLike })
   }
 
-  onMounted(() => {})
-
   return { open, like, resetLike }
 }