✨ Added settings window

build/config.yml

@@ -5,12 +5,12 @@ version: '3'
 
 # This information is used to generate the build assets.
 info:
-  companyName: "My Company" # The name of the company
+  companyName: "Voidraft" # The name of the company
-  productName: "My Product" # The name of the application
+  productName: "Voidraftt" # The name of the application
-  productIdentifier: "com.mycompany.myproduct" # The unique product identifier
+  productIdentifier: "landaiqing" # The unique product identifier
-  description: "A program that does X" # The application description
+  description: "Your Inspiration Catcher - Instant thought-capturing tool with minimalist design" # The application description
-  copyright: "(c) 2024, My Company" # Copyright text
+  copyright: "© 2025 Voidraft. All rights reserved." # Copyright text
-  comments: "Some Product Comments" # Comments
+  comments: "Effortlessly capture and organize fleeting ideas with minimal design" # Comments
   version: "v0.0.1" # The application version
 
 # Dev mode configuration

build/linux/nfpm/nfpm.yaml

@@ -10,9 +10,9 @@ version: "0.1.0"
 section: "default"
 priority: "extra"
 maintainer: ${GIT_COMMITTER_NAME} <${GIT_COMMITTER_EMAIL}>
-description: "My Product Description"
+description: "Voidraft: Your Inspiration Catcher - Instant thought-capturing tool with minimalist design"
-vendor: "My Company"
+vendor: "Voidraft"
-homepage: "https://wails.io"
+homepage: "https://voidraft.app"
 license: "MIT"
 release: "1"
 

build/windows/info.json

@@ -5,11 +5,11 @@
 	"info": {
 		"0000": {
 			"ProductVersion": "0.1.0",
-			"CompanyName": "My Company",
+			"CompanyName": "Voidraft",
-			"FileDescription": "My Product Description",
+			"FileDescription": "Voidraft: Your Inspiration Catcher - Instant thought-capturing tool with minimalist design",
-			"LegalCopyright": "© now, My Company",
+			"LegalCopyright": "© 2025 Voidraft. All rights reserved.",
-			"ProductName": "My Product",
+			"ProductName": "Voidraft",
-			"Comments": "This is a comment"
+			"Comments": "Effortlessly capture and organize fleeting ideas with minimal design"
 		}
 	}
 }

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">
+    <router-view/>
-      <Editor/>
-    </div>
-    <Toolbar/>
   </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> 

internal/systray/systray.go

@@ -9,7 +9,7 @@ import (
 )
 
 // SetupSystemTray 设置系统托盘及其功能
-func SetupSystemTray(app *application.App, mainWindow *application.WebviewWindow, assets embed.FS) {
+func SetupSystemTray(app *application.App, mainWindow *application.WebviewWindow, settingsWindow *application.WebviewWindow, assets embed.FS) {
 	// 创建系统托盘
 	systray := app.NewSystemTray()
 
@@ -22,9 +22,12 @@ func SetupSystemTray(app *application.App, mainWindow *application.WebviewWindow
 
 	// 创建托盘菜单
 	menu := app.NewMenu()
-	menu.Add("显示主窗口").OnClick(func(data *application.Context) {
+	menu.Add("主窗口").OnClick(func(data *application.Context) {
 		mainWindow.Show()
 	})
+	menu.Add("设置").OnClick(func(data *application.Context) {
+		settingsWindow.Show()
+	})
 	menu.AddSeparator()
 	menu.Add("退出").OnClick(func(data *application.Context) {
 		app.Quit()
@@ -51,4 +54,16 @@ func SetupSystemTray(app *application.App, mainWindow *application.WebviewWindow
 		mainWindow.Hide()
 	})
 
+	// 设置窗口关闭事件处理
+	settingsWindow.RegisterHook(events.Common.WindowClosing, func(event *application.WindowEvent) {
+		// 取消默认关闭行为
+		event.Cancel()
+		// 隐藏窗口
+		settingsWindow.Hide()
+	})
+
+	// 注册事件监听器，用于处理前端发送的显示设置窗口事件
+	app.OnEvent("show_settings_window", func(event *application.CustomEvent) {
+		settingsWindow.Show()
+	})
 }

main.go

@@ -60,9 +60,26 @@ func main() {
 		BackgroundColour: application.NewRGB(27, 38, 54),
 		URL:              "/",
 	})
+	mainWindow.Center()
+	settingsWindow := app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{
+		Title:       "voidraft设置",
+		Width:       500,
+		Height:      600,
+		Hidden:      true, // 初始时隐藏设置窗口
+		AlwaysOnTop: true,
+		Mac: application.MacWindow{
+			Backdrop:                application.MacBackdropTranslucent,
+			TitleBar:                application.MacTitleBarHiddenInset,
+			InvisibleTitleBarHeight: 50,
+		},
+		Windows:          application.WindowsWindow{},
+		BackgroundColour: application.NewRGB(27, 38, 54),
+		URL:              "/settings",
+	})
+	settingsWindow.Center()
 
 	// 设置系统托盘
-	systray.SetupSystemTray(app, mainWindow, assets)
+	systray.SetupSystemTray(app, mainWindow, settingsWindow, assets)
 
 	// Create a goroutine that emits an event containing the current time every second.
 	// The frontend can listen to this event and update the UI accordingly.