✨ Frameless Window

frontend/bindings/voidraft/internal/models/models.ts

@@ -0,0 +1,630 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as time$0 from "../../../time/models.js";
+
+/**
+ * AppConfig 应用配置 - 按照前端设置页面分类组织
+ */
+export class AppConfig {
+    /**
+     * 通用设置
+     */
+    "general": GeneralConfig;
+
+    /**
+     * 编辑设置
+     */
+    "editing": EditingConfig;
+
+    /**
+     * 外观设置
+     */
+    "appearance": AppearanceConfig;
+
+    /**
+     * 快捷键设置
+     */
+    "keyBindings": KeyBindingsConfig;
+
+    /**
+     * 更新设置
+     */
+    "updates": UpdatesConfig;
+
+    /**
+     * 配置元数据
+     */
+    "metadata": ConfigMetadata;
+
+    /** Creates a new AppConfig instance. */
+    constructor($$source: Partial<AppConfig> = {}) {
+        if (!("general" in $$source)) {
+            this["general"] = (new GeneralConfig());
+        }
+        if (!("editing" in $$source)) {
+            this["editing"] = (new EditingConfig());
+        }
+        if (!("appearance" in $$source)) {
+            this["appearance"] = (new AppearanceConfig());
+        }
+        if (!("keyBindings" in $$source)) {
+            this["keyBindings"] = (new KeyBindingsConfig());
+        }
+        if (!("updates" in $$source)) {
+            this["updates"] = (new UpdatesConfig());
+        }
+        if (!("metadata" in $$source)) {
+            this["metadata"] = (new ConfigMetadata());
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new AppConfig instance from a string or object.
+     */
+    static createFrom($$source: any = {}): AppConfig {
+        const $$createField0_0 = $$createType0;
+        const $$createField1_0 = $$createType1;
+        const $$createField2_0 = $$createType2;
+        const $$createField3_0 = $$createType3;
+        const $$createField4_0 = $$createType4;
+        const $$createField5_0 = $$createType5;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("general" in $$parsedSource) {
+            $$parsedSource["general"] = $$createField0_0($$parsedSource["general"]);
+        }
+        if ("editing" in $$parsedSource) {
+            $$parsedSource["editing"] = $$createField1_0($$parsedSource["editing"]);
+        }
+        if ("appearance" in $$parsedSource) {
+            $$parsedSource["appearance"] = $$createField2_0($$parsedSource["appearance"]);
+        }
+        if ("keyBindings" in $$parsedSource) {
+            $$parsedSource["keyBindings"] = $$createField3_0($$parsedSource["keyBindings"]);
+        }
+        if ("updates" in $$parsedSource) {
+            $$parsedSource["updates"] = $$createField4_0($$parsedSource["updates"]);
+        }
+        if ("metadata" in $$parsedSource) {
+            $$parsedSource["metadata"] = $$createField5_0($$parsedSource["metadata"]);
+        }
+        return new AppConfig($$parsedSource as Partial<AppConfig>);
+    }
+}
+
+/**
+ * AppearanceConfig 外观设置配置
+ */
+export class AppearanceConfig {
+    /**
+     * 界面语言
+     */
+    "language": LanguageType;
+
+    /**
+     * 编辑器主题
+     */
+    "theme": ThemeType;
+
+    /** Creates a new AppearanceConfig instance. */
+    constructor($$source: Partial<AppearanceConfig> = {}) {
+        if (!("language" in $$source)) {
+            this["language"] = ("" as LanguageType);
+        }
+        if (!("theme" in $$source)) {
+            this["theme"] = ("" as ThemeType);
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new AppearanceConfig instance from a string or object.
+     */
+    static createFrom($$source: any = {}): AppearanceConfig {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new AppearanceConfig($$parsedSource as Partial<AppearanceConfig>);
+    }
+}
+
+/**
+ * ConfigMetadata 配置元数据
+ */
+export class ConfigMetadata {
+    /**
+     * 配置版本
+     */
+    "version": string;
+
+    /**
+     * 最后更新时间
+     */
+    "lastUpdated": time$0.Time;
+
+    /** Creates a new ConfigMetadata instance. */
+    constructor($$source: Partial<ConfigMetadata> = {}) {
+        if (!("version" in $$source)) {
+            this["version"] = "";
+        }
+        if (!("lastUpdated" in $$source)) {
+            this["lastUpdated"] = null;
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new ConfigMetadata instance from a string or object.
+     */
+    static createFrom($$source: any = {}): ConfigMetadata {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new ConfigMetadata($$parsedSource as Partial<ConfigMetadata>);
+    }
+}
+
+/**
+ * Document 表示一个文档
+ */
+export class Document {
+    /**
+     * 元数据
+     */
+    "meta": DocumentMeta;
+
+    /**
+     * 文档内容
+     */
+    "content": string;
+
+    /** Creates a new Document instance. */
+    constructor($$source: Partial<Document> = {}) {
+        if (!("meta" in $$source)) {
+            this["meta"] = (new DocumentMeta());
+        }
+        if (!("content" in $$source)) {
+            this["content"] = "";
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new Document instance from a string or object.
+     */
+    static createFrom($$source: any = {}): Document {
+        const $$createField0_0 = $$createType6;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("meta" in $$parsedSource) {
+            $$parsedSource["meta"] = $$createField0_0($$parsedSource["meta"]);
+        }
+        return new Document($$parsedSource as Partial<Document>);
+    }
+}
+
+/**
+ * DocumentMeta 文档元数据
+ */
+export class DocumentMeta {
+    /**
+     * 文档唯一标识
+     */
+    "id": string;
+
+    /**
+     * 文档标题
+     */
+    "title": string;
+
+    /**
+     * 最后更新时间
+     */
+    "lastUpdated": time$0.Time;
+
+    /**
+     * 创建时间
+     */
+    "createdAt": time$0.Time;
+
+    /** Creates a new DocumentMeta instance. */
+    constructor($$source: Partial<DocumentMeta> = {}) {
+        if (!("id" in $$source)) {
+            this["id"] = "";
+        }
+        if (!("title" in $$source)) {
+            this["title"] = "";
+        }
+        if (!("lastUpdated" in $$source)) {
+            this["lastUpdated"] = null;
+        }
+        if (!("createdAt" in $$source)) {
+            this["createdAt"] = null;
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new DocumentMeta instance from a string or object.
+     */
+    static createFrom($$source: any = {}): DocumentMeta {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new DocumentMeta($$parsedSource as Partial<DocumentMeta>);
+    }
+}
+
+/**
+ * EditingConfig 编辑设置配置
+ */
+export class EditingConfig {
+    /**
+     * 字体设置
+     * 字体大小
+     */
+    "fontSize": number;
+
+    /**
+     * 字体族
+     */
+    "fontFamily": string;
+
+    /**
+     * 字体粗细
+     */
+    "fontWeight": string;
+
+    /**
+     * 行高
+     */
+    "lineHeight": number;
+
+    /**
+     * Tab设置
+     * 是否启用Tab缩进
+     */
+    "enableTabIndent": boolean;
+
+    /**
+     * Tab大小
+     */
+    "tabSize": number;
+
+    /**
+     * Tab类型（空格或Tab）
+     */
+    "tabType": TabType;
+
+    /**
+     * 保存选项
+     * 自动保存延迟（毫秒）
+     */
+    "autoSaveDelay": number;
+
+    /** Creates a new EditingConfig instance. */
+    constructor($$source: Partial<EditingConfig> = {}) {
+        if (!("fontSize" in $$source)) {
+            this["fontSize"] = 0;
+        }
+        if (!("fontFamily" in $$source)) {
+            this["fontFamily"] = "";
+        }
+        if (!("fontWeight" in $$source)) {
+            this["fontWeight"] = "";
+        }
+        if (!("lineHeight" in $$source)) {
+            this["lineHeight"] = 0;
+        }
+        if (!("enableTabIndent" in $$source)) {
+            this["enableTabIndent"] = false;
+        }
+        if (!("tabSize" in $$source)) {
+            this["tabSize"] = 0;
+        }
+        if (!("tabType" in $$source)) {
+            this["tabType"] = ("" as TabType);
+        }
+        if (!("autoSaveDelay" in $$source)) {
+            this["autoSaveDelay"] = 0;
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new EditingConfig instance from a string or object.
+     */
+    static createFrom($$source: any = {}): EditingConfig {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new EditingConfig($$parsedSource as Partial<EditingConfig>);
+    }
+}
+
+/**
+ * GeneralConfig 通用设置配置
+ */
+export class GeneralConfig {
+    /**
+     * 窗口是否置顶
+     */
+    "alwaysOnTop": boolean;
+
+    /**
+     * 数据存储路径
+     */
+    "dataPath": string;
+
+    /**
+     * 是否启用系统托盘
+     */
+    "enableSystemTray": boolean;
+
+    /**
+     * 全局热键设置
+     * 是否启用全局热键
+     */
+    "enableGlobalHotkey": boolean;
+
+    /**
+     * 全局热键组合
+     */
+    "globalHotkey": HotkeyCombo;
+
+    /** Creates a new GeneralConfig instance. */
+    constructor($$source: Partial<GeneralConfig> = {}) {
+        if (!("alwaysOnTop" in $$source)) {
+            this["alwaysOnTop"] = false;
+        }
+        if (!("dataPath" in $$source)) {
+            this["dataPath"] = "";
+        }
+        if (!("enableSystemTray" in $$source)) {
+            this["enableSystemTray"] = false;
+        }
+        if (!("enableGlobalHotkey" in $$source)) {
+            this["enableGlobalHotkey"] = false;
+        }
+        if (!("globalHotkey" in $$source)) {
+            this["globalHotkey"] = (new HotkeyCombo());
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new GeneralConfig instance from a string or object.
+     */
+    static createFrom($$source: any = {}): GeneralConfig {
+        const $$createField4_0 = $$createType7;
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        if ("globalHotkey" in $$parsedSource) {
+            $$parsedSource["globalHotkey"] = $$createField4_0($$parsedSource["globalHotkey"]);
+        }
+        return new GeneralConfig($$parsedSource as Partial<GeneralConfig>);
+    }
+}
+
+/**
+ * HotkeyCombo 热键组合定义
+ */
+export class HotkeyCombo {
+    /**
+     * Ctrl键
+     */
+    "ctrl": boolean;
+
+    /**
+     * Shift键
+     */
+    "shift": boolean;
+
+    /**
+     * Alt键
+     */
+    "alt": boolean;
+
+    /**
+     * Win键
+     */
+    "win": boolean;
+
+    /**
+     * 主键（如 'X', 'F1' 等）
+     */
+    "key": string;
+
+    /** Creates a new HotkeyCombo instance. */
+    constructor($$source: Partial<HotkeyCombo> = {}) {
+        if (!("ctrl" in $$source)) {
+            this["ctrl"] = false;
+        }
+        if (!("shift" in $$source)) {
+            this["shift"] = false;
+        }
+        if (!("alt" in $$source)) {
+            this["alt"] = false;
+        }
+        if (!("win" in $$source)) {
+            this["win"] = false;
+        }
+        if (!("key" in $$source)) {
+            this["key"] = "";
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new HotkeyCombo instance from a string or object.
+     */
+    static createFrom($$source: any = {}): HotkeyCombo {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new HotkeyCombo($$parsedSource as Partial<HotkeyCombo>);
+    }
+}
+
+/**
+ * KeyBindingsConfig 快捷键设置配置
+ */
+export class KeyBindingsConfig {
+
+    /** Creates a new KeyBindingsConfig instance. */
+    constructor($$source: Partial<KeyBindingsConfig> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new KeyBindingsConfig instance from a string or object.
+     */
+    static createFrom($$source: any = {}): KeyBindingsConfig {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new KeyBindingsConfig($$parsedSource as Partial<KeyBindingsConfig>);
+    }
+}
+
+/**
+ * LanguageType 语言类型定义
+ */
+export enum LanguageType {
+    /**
+     * The Go zero value for the underlying type of the enum.
+     */
+    $zero = "",
+
+    /**
+     * LangZhCN 中文简体
+     */
+    LangZhCN = "zh-CN",
+
+    /**
+     * LangEnUS 英文-美国
+     */
+    LangEnUS = "en-US",
+};
+
+/**
+ * TabType 定义了制表符类型
+ */
+export enum TabType {
+    /**
+     * The Go zero value for the underlying type of the enum.
+     */
+    $zero = "",
+
+    /**
+     * TabTypeSpaces 使用空格作为制表符
+     */
+    TabTypeSpaces = "spaces",
+
+    /**
+     * TabTypeTab 使用Tab作为制表符
+     */
+    TabTypeTab = "tab",
+};
+
+/**
+ * ThemeType 主题类型定义
+ */
+export enum ThemeType {
+    /**
+     * The Go zero value for the underlying type of the enum.
+     */
+    $zero = "",
+
+    /**
+     * ThemeDefaultDark 默认深色主题
+     */
+    ThemeDefaultDark = "default-dark",
+
+    /**
+     * ThemeDracula Dracula主题
+     */
+    ThemeDracula = "dracula",
+
+    /**
+     * ThemeAura Aura主题
+     */
+    ThemeAura = "aura",
+
+    /**
+     * ThemeGithubDark GitHub深色主题
+     */
+    ThemeGithubDark = "github-dark",
+
+    /**
+     * ThemeGithubLight GitHub浅色主题
+     */
+    ThemeGithubLight = "github-light",
+
+    /**
+     * ThemeMaterialDark Material深色主题
+     */
+    ThemeMaterialDark = "material-dark",
+
+    /**
+     * ThemeMaterialLight Material浅色主题
+     */
+    ThemeMaterialLight = "material-light",
+
+    /**
+     * ThemeSolarizedDark Solarized深色主题
+     */
+    ThemeSolarizedDark = "solarized-dark",
+
+    /**
+     * ThemeSolarizedLight Solarized浅色主题
+     */
+    ThemeSolarizedLight = "solarized-light",
+
+    /**
+     * ThemeTokyoNight Tokyo Night主题
+     */
+    ThemeTokyoNight = "tokyo-night",
+
+    /**
+     * ThemeTokyoNightStorm Tokyo Night Storm主题
+     */
+    ThemeTokyoNightStorm = "tokyo-night-storm",
+
+    /**
+     * ThemeTokyoNightDay Tokyo Night Day主题
+     */
+    ThemeTokyoNightDay = "tokyo-night-day",
+};
+
+/**
+ * UpdatesConfig 更新设置配置
+ */
+export class UpdatesConfig {
+
+    /** Creates a new UpdatesConfig instance. */
+    constructor($$source: Partial<UpdatesConfig> = {}) {
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new UpdatesConfig instance from a string or object.
+     */
+    static createFrom($$source: any = {}): UpdatesConfig {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new UpdatesConfig($$parsedSource as Partial<UpdatesConfig>);
+    }
+}
+
+// Private type creation functions
+const $$createType0 = GeneralConfig.createFrom;
+const $$createType1 = EditingConfig.createFrom;
+const $$createType2 = AppearanceConfig.createFrom;
+const $$createType3 = KeyBindingsConfig.createFrom;
+const $$createType4 = UpdatesConfig.createFrom;
+const $$createType5 = ConfigMetadata.createFrom;
+const $$createType6 = DocumentMeta.createFrom;
+const $$createType7 = HotkeyCombo.createFrom;

frontend/bindings/voidraft/internal/services/index.ts

@@ -7,13 +7,15 @@ import * as DocumentService from "./documentservice.js";
 import * as HotkeyService from "./hotkeyservice.js";
 import * as MigrationService from "./migrationservice.js";
 import * as SystemService from "./systemservice.js";
+import * as TrayService from "./trayservice.js";
 export {
     ConfigService,
     DialogService,
     DocumentService,
     HotkeyService,
     MigrationService,
-    SystemService
+    SystemService,
+    TrayService
 };
 
 export * from "./models.js";

frontend/bindings/voidraft/internal/services/trayservice.ts

@@ -0,0 +1,63 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * TrayService 系统托盘服务
+ * @module
+ */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Call as $Call, Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as application$0 from "../../../github.com/wailsapp/wails/v3/pkg/application/models.js";
+
+/**
+ * HandleWindowClose 处理窗口关闭事件
+ */
+export function HandleWindowClose(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1824247204) as any;
+    return $resultPromise;
+}
+
+/**
+ * HandleWindowMinimize 处理窗口最小化事件
+ */
+export function HandleWindowMinimize(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(178686624) as any;
+    return $resultPromise;
+}
+
+/**
+ * MinimizeButtonClicked 处理标题栏最小化按钮点击
+ */
+export function MinimizeButtonClicked(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(2477618539) as any;
+    return $resultPromise;
+}
+
+/**
+ * SetAppReferences 设置应用引用
+ */
+export function SetAppReferences(app: application$0.App | null, mainWindow: application$0.WebviewWindow | null): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3544515719, app, mainWindow) as any;
+    return $resultPromise;
+}
+
+/**
+ * ShouldMinimizeToTray 检查是否应该最小化到托盘
+ */
+export function ShouldMinimizeToTray(): Promise<boolean> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3403884012) as any;
+    return $resultPromise;
+}
+
+/**
+ * ShowWindow 显示主窗口
+ */
+export function ShowWindow(): Promise<void> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(1315913255) as any;
+    return $resultPromise;
+}

frontend/components.d.ts

@@ -12,5 +12,6 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Toolbar: typeof import('./src/components/toolbar/Toolbar.vue')['default']
+    WindowTitleBar: typeof import('./src/components/titlebar/WindowTitleBar.vue')['default']
   }
 }

frontend/src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { useConfigStore } from '@/stores/configStore';
+import WindowTitleBar from '@/components/titlebar/WindowTitleBar.vue';
 
 const configStore = useConfigStore();
 
@@ -14,7 +15,10 @@ onMounted(async () => {
 
 <template>
   <div class="app-container">
-    <router-view/>
+    <WindowTitleBar />
+    <div class="app-content">
+      <router-view/>
+    </div>
   </div>
 </template>
 
@@ -24,5 +28,14 @@ onMounted(async () => {
   height: 100vh;
   margin: 0;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-content {
+  flex: 1;
+  margin-top: 32px;
+  overflow: hidden;
+  position: relative;
 }
 </style>

frontend/src/components/titlebar/WindowTitleBar.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="windows-titlebar" style="--wails-draggable:drag" @contextmenu.prevent @mouseenter="checkMaximizedState" @mouseup="checkMaximizedState">
+    <div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
+      <div class="titlebar-icon">
+        <img src="/appicon.png" alt="voidraft" />
+      </div>
+      <div class="titlebar-title">voidraft</div>
+    </div>
+    
+    <div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
+      <button 
+        class="titlebar-button minimize-button" 
+        @click="minimizeWindow"
+        :title="t('titlebar.minimize')"
+      >
+        <span class="titlebar-icon">&#xE921;</span>
+      </button>
+      
+      <button 
+        class="titlebar-button maximize-button" 
+        @click="toggleMaximize"
+        :title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
+      >
+        <span class="titlebar-icon" v-html="maximizeIcon"></span>
+      </button>
+      
+      <button 
+        class="titlebar-button close-button" 
+        @click="closeWindow"
+        :title="t('titlebar.close')"
+      >
+        <span class="titlebar-icon">&#xE8BB;</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import * as runtime from '@wailsio/runtime';
+
+const { t } = useI18n();
+const isMaximized = ref(false);
+
+// 计算属性用于图标，减少重复渲染
+const maximizeIcon = computed(() => isMaximized.value ? '&#xE923;' : '&#xE922;');
+
+const minimizeWindow = async () => {
+  try {
+    await runtime.Window.Minimise();
+  } catch (error) {
+ 
+  }
+};
+
+const toggleMaximize = async () => {
+  try {
+    // 立即更新UI状态，提供即时反馈
+    const newState = !isMaximized.value;
+    isMaximized.value = newState;
+    
+    // 然后执行实际操作
+    if (newState) {
+      await runtime.Window.Maximise();
+    } else {
+      await runtime.Window.UnMaximise();
+    }
+    
+    // 操作完成后再次确认状态（防止操作失败时状态不一致）
+    setTimeout(async () => {
+      await checkMaximizedState();
+    }, 100);
+  } catch (error) {
+    // 如果操作失败，恢复原状态
+    isMaximized.value = !isMaximized.value;
+  }
+};
+
+const closeWindow = async () => {
+  try {
+    // 使用Window的Close方法，会触发窗口关闭事件
+    await runtime.Window.Close();
+  } catch (error) {
+  }
+};
+
+const checkMaximizedState = async () => {
+  try {
+    isMaximized.value = await runtime.Window.IsMaximised();
+  } catch (error) {
+  }
+};
+
+onMounted(async () => {
+  // 检查初始最大化状态
+  await checkMaximizedState();
+  
+  // 监听窗口状态变化事件
+  runtime.Events.On('window:maximised', () => {
+    isMaximized.value = true;
+  });
+  
+  runtime.Events.On('window:unmaximised', () => {
+    isMaximized.value = false;
+  });
+
+  // 监听窗口焦点事件，确保状态同步
+  runtime.Events.On('window:focus', async () => {
+    await checkMaximizedState();
+  });
+
+  onUnmounted(() => {
+    // 清理事件监听器
+    runtime.Events.Off('window:maximised');
+    runtime.Events.Off('window:unmaximised');
+    runtime.Events.Off('window:focus');
+  });
+});
+</script>
+
+<style scoped lang="scss">
+.windows-titlebar {
+  display: flex;
+  height: 32px;
+  background: #202020;
+  user-select: none;
+  -webkit-user-select: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+  
+  /* 禁用右键菜单 */
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding-left: 8px;
+  gap: 8px;
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 400;
+  cursor: default;
+  
+  /* 禁用右键菜单 */
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-content .titlebar-icon {
+  width: 16px;
+  height: 16px;
+  
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.titlebar-title {
+  font-size: 12px;
+  color: #ffffff;
+}
+
+.titlebar-controls {
+  display: flex;
+  height: 100%;
+  
+  /* 禁用右键菜单 */
+  -webkit-context-menu: none;
+  -moz-context-menu: none;
+  context-menu: none;
+}
+
+.titlebar-button {
+  width: 46px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: #ffffff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.1s ease;
+  padding: 0;
+  margin: 0;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.0605);
+  }
+  
+  &:active {
+    background: rgba(255, 255, 255, 0.0837);
+  }
+}
+
+.titlebar-button .titlebar-icon {
+  font-family: 'Segoe MDL2 Assets', 'Segoe UI Symbol', 'Segoe UI', system-ui;
+  font-size: 9px;
+  line-height: 1;
+  display: inline-block;
+  opacity: 0.9;
+  transition: opacity 0.1s ease;
+  
+  .titlebar-button:hover & {
+    opacity: 1;
+  }
+}
+
+.minimize-button:hover,
+.maximize-button:hover {
+  background: rgba(255, 255, 255, 0.0605);
+}
+
+.minimize-button:active,
+.maximize-button:active {
+  background: rgba(255, 255, 255, 0.0837);
+}
+
+.close-button:hover {
+  background: #c42b1c;
+  color: #ffffff;
+  
+  .titlebar-icon {
+    opacity: 1;
+  }
+}
+
+.close-button:active {
+  background: #a93226;
+  
+  .titlebar-icon {
+    opacity: 1;
+  }
+}
+</style> 

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

@@ -1,4 +1,10 @@
 export default {
+  titlebar: {
+    minimize: 'Minimize',
+    maximize: 'Maximize',
+    restore: 'Restore Down',
+    close: 'Close'
+  },
   toolbar: {
     editor: {
       lines: 'Ln',

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

@@ -1,4 +1,10 @@
 export default {
+  titlebar: {
+    minimize: '最小化',
+    maximize: '最大化',
+    restore: '向下还原',
+    close: '关闭'
+  },
   toolbar: {
     editor: {
       lines: 'Ln',