添加设置页面

src/components/DirectorySidebar.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import {ref, computed} from "vue";
+import {ref, computed, watch} from "vue";
+import SettingsModal from "./SettingsModal.vue";
 import TreeEntry from "./TreeEntry.vue";
 
+type SettingsPage = "about" | "editor";
+type DocumentMode = "preview" | "edit" | "mixed";
+
 interface DirEntry {
   name: string;
   path: string;
@@ -14,9 +18,15 @@ const props = withDefaults(
       folderPath: string;
       entries: DirEntry[];
       currentFilePath?: string | null;
+      settingsRequest?: number;
+      settingsInitialPage?: SettingsPage;
+      defaultDocumentMode?: DocumentMode;
     }>(),
     {
       currentFilePath: null,
+      settingsRequest: 0,
+      settingsInitialPage: "about",
+      defaultDocumentMode: "edit",
     },
 );
 
@@ -26,6 +36,7 @@ const emit = defineEmits<{
   openFile: [path: string];
   createFile: [];
   createFolder: [];
+  updateDefaultDocumentMode: [mode: DocumentMode];
 }>();
 
 // Wrap the workspace root as a top-level tree node
@@ -56,6 +67,17 @@ function switchView(view: ViewMode) {
 
 // ---- settings modal ----
 const showSettings = ref(false);
+const settingsPage = ref<SettingsPage>("about");
+
+watch(() => props.settingsRequest, (request) => {
+  if (request <= 0) return;
+  openSettings(props.settingsInitialPage);
+});
+
+function openSettings(page: SettingsPage) {
+  settingsPage.value = page;
+  showSettings.value = true;
+}
 </script>
 
 <template>
@@ -85,9 +107,9 @@ const showSettings = ref(false);
       <!-- ===== Settings ===== -->
       <button
           class="px-2 py-1 cursor-pointer rounded-md transition-colors mt-auto"
-          :class="activeView === 'setting' ? 'text-[#bf6a3b] bg-[#ede8de]' : 'text-[#b8b3a8] hover:text-[#5c574e] hover:bg-[#ede8de]'"
+          :class="showSettings ? 'text-[#bf6a3b] bg-[#ede8de]' : 'text-[#b8b3a8] hover:text-[#5c574e] hover:bg-[#ede8de]'"
           title="设置"
-          @click="showSettings = true"
+          @click="openSettings('about')"
       >
         <i class="ri-settings-line text-sm"></i>
       </button>
@@ -147,26 +169,10 @@ const showSettings = ref(false);
     </div>
   </aside>
 
-  <!-- ===== SETTINGS MODAL ===== -->
-  <Teleport to="body">
-    <div
-        v-if="showSettings"
-        class="fixed inset-0 z-50 flex items-center justify-center bg-[#38342e]/25 backdrop-blur-sm"
-        @click.self="showSettings = false"
-    >
-      <div class="bg-white border border-[#e0dbcf] rounded-xl shadow-2xl w-80 max-h-[70vh] overflow-y-auto">
-        <div class="flex items-center justify-between px-4 py-3 border-b border-[#e8e4da]">
-          <span class="text-sm font-semibold text-[#38342e]">设置</span>
-          <button
-              class="p-1 rounded-md text-[#8c877d] hover:text-[#38342e] hover:bg-[#e0dbcf] transition-colors"
-              @click="showSettings = false"
-          >
-            <i class="ri-close-line text-base"></i>
-          </button>
-        </div>
-        <div class="px-4 py-6 space-y-5">
-        </div>
-      </div>
-    </div>
-  </Teleport>
+  <SettingsModal
+      v-model:show="showSettings"
+      :initial-page="settingsPage"
+      :default-document-mode="defaultDocumentMode"
+      @update-default-document-mode="(mode: DocumentMode) => emit('updateDefaultDocumentMode', mode)"
+  />
 </template>