✨ Added settings window

frontend/src/App.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import {onMounted} from 'vue';
-import Editor from '@/editor/Editor.vue';
-import Toolbar from '@/components/toolbar/Toolbar.vue';
 import {useConfigStore} from "@/stores/configStore";
 
 const configStore = useConfigStore();
+
 onMounted(async () => {
   await configStore.loadConfigFromBackend();
 })
@@ -12,10 +11,7 @@ onMounted(async () => {
 
 <template>
   <div class="app-container">
-    <div class="editor-wrapper">
-      <Editor/>
-    </div>
-    <Toolbar/>
+    <router-view/>
   </div>
 </template>
 
@@ -25,12 +21,5 @@ onMounted(async () => {
   height: 100vh;
   margin: 0;
   padding: 0;
-  display: flex;
-  flex-direction: column;
-
-  .editor-wrapper {
-    flex: 1;
-    overflow: hidden;
-  }
 }
 </style>

frontend/src/components/toolbar/Toolbar.vue

@@ -5,7 +5,7 @@ import {useLogStore} from '@/stores/logStore';
 import { useI18n } from 'vue-i18n';
 import { ref, onMounted, watch } from 'vue';
 import {SUPPORTED_LOCALES, setLocale, SupportedLocaleType} from '@/i18n';
-import * as wails from '@wailsio/runtime';
+import * as runtime from '@wailsio/runtime';
 const editorStore = useEditorStore();
 const configStore = useConfigStore();
 const logStore = useLogStore();
@@ -30,18 +30,32 @@ const toggleAlwaysOnTop = () => {
   configStore.toggleAlwaysOnTop();
   // 使用Window.SetAlwaysOnTop方法设置窗口置顶状态
   try {
-    wails.Window.SetAlwaysOnTop(configStore.config.alwaysOnTop);
+    runtime.Window.SetAlwaysOnTop(configStore.config.alwaysOnTop);
   } catch (error) {
     console.error('Failed to set window always on top:', error);
     logStore.error(t('config.alwaysOnTopFailed'));
   }
 };
 
+// 打开设置窗口
+const openSettingsWindow = () => {
+  try {
+    // 直接操作窗口对象
+    runtime.Events.Emit({
+      name: "show_settings_window",
+      data: {},
+    });
+  } catch (error) {
+    console.error('Failed to open settings window:', error);
+    logStore.error('Failed to open settings window');
+  }
+};
+
 // 在组件挂载时根据配置设置窗口置顶状态
 onMounted(() => {
   if (configStore.configLoaded && configStore.config.alwaysOnTop) {
     try {
-      wails.Window.SetAlwaysOnTop(true);
+      runtime.Window.SetAlwaysOnTop(true);
     } catch (error) {
       console.error('Failed to set window always on top:', error);
     }
@@ -52,7 +66,7 @@ onMounted(() => {
 watch(() => configStore.configLoaded, (isLoaded) => {
   if (isLoaded && configStore.config.alwaysOnTop) {
     try {
-      wails.Window.SetAlwaysOnTop(true);
+      runtime.Window.SetAlwaysOnTop(true);
     } catch (error) {
       console.error('Failed to set window always on top:', error);
     }
@@ -127,7 +141,7 @@ watch(() => configStore.configLoaded, (isLoaded) => {
         </div>
       </div>
       
-      <button class="settings-btn" :title="t('toolbar.settings')">
+      <button class="settings-btn" :title="t('toolbar.settings')" @click="openSettingsWindow">
         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <circle cx="12" cy="12" r="3"></circle>

frontend/src/editor/Editor.vue

@@ -18,6 +18,7 @@ import {
 } from './extensions';
 import { useI18n } from 'vue-i18n';
 import { DocumentService } from '@/../bindings/voidraft/internal/services';
+import Toolbar from '@/components/toolbar/Toolbar.vue';
 
 const editorStore = useEditorStore();
 const configStore = useConfigStore();
@@ -188,6 +189,7 @@ onBeforeUnmount(() => {
 <template>
   <div class="editor-container">
     <div ref="editorElement" class="editor"></div>
+    <Toolbar />
   </div>
 </template>
 
@@ -196,10 +198,13 @@ onBeforeUnmount(() => {
   width: 100%;
   height: 100%;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 
   .editor {
     width: 100%;
-    height: 100%;
+    flex: 1;
+    overflow: hidden;
   }
 }
 

frontend/src/i18n/locales/en-US.ts

@@ -43,5 +43,10 @@ export default {
       saveSuccess: 'Save settings updated',
       saveFailed: 'Failed to update save settings'
     }
+  },
+  settings: {
+    title: 'Settings',
+    general: 'General Settings',
+    comingSoon: 'More settings coming soon...'
   }
 }; 

frontend/src/i18n/locales/zh-CN.ts

@@ -43,5 +43,10 @@ export default {
       saveSuccess: '保存设置已更新',
       saveFailed: '保存设置更新失败'
     }
+  },
+  settings: {
+    title: '设置',
+    general: '通用设置',
+    comingSoon: '敬请期待更多设置选项...'
   }
 }; 

frontend/src/main.ts

@@ -3,9 +3,12 @@ import App from './App.vue';
 import '@/assets/styles/index.css';
 import {createPinia} from 'pinia';
 import i18n from './i18n';
+import router from './router';
+
 const pinia = createPinia()
 
 const app = createApp(App);
 app.use(pinia)
 app.use(i18n);
+app.use(router);
 app.mount('#app');

frontend/src/router/index.ts

@@ -0,0 +1,23 @@
+import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router';
+import Editor from '@/editor/Editor.vue';
+import SettingsPage from '@/settings/SettingsPage.vue';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'Editor',
+    component: Editor
+  },
+  {
+    path: '/settings',
+    name: 'Settings',
+    component: SettingsPage
+  }
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: routes
+});
+
+export default router; 

frontend/src/settings/SettingsPage.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useConfigStore } from '@/stores/configStore';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const configStore = useConfigStore();
+</script>
+
+<template>
+  <div class="settings-container">
+    <div class="settings-header">
+      <h1>{{ t('settings.title') }}</h1>
+    </div>
+    <div class="settings-content">
+      <!-- 设置内容将在此处添加 -->
+      <div class="settings-section">
+        <h2>{{ t('settings.general') }}</h2>
+        <div class="settings-placeholder">
+          {{ t('settings.comingSoon') }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.settings-container {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  padding: 20px;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  .settings-header {
+    margin-bottom: 20px;
+    
+    h1 {
+      font-size: 24px;
+      font-weight: 600;
+    }
+  }
+
+  .settings-content {
+    flex: 1;
+    
+    .settings-section {
+      margin-bottom: 20px;
+      
+      h2 {
+        font-size: 18px;
+        margin-bottom: 12px;
+      }
+      
+      .settings-placeholder {
+        padding: 20px;
+        background-color: var(--bg-secondary);
+        border-radius: 6px;
+        text-align: center;
+        color: var(--text-muted);
+      }
+    }
+  }
+}
+</style>