From 336b65a887126f60262ae755fe3cb141a791437d Mon Sep 17 00:00:00 2001
From: DanielSong <liucan01234@gmail.com>
Date: Sat, 9 May 2026 12:25:47 +0800
Subject: [PATCH] feat(titlebar): add current file actions

---
 src/main/ipcBridge.ts                         |  25 ++
 src/preload.ts                                |   3 +
 src/renderer/components/menu/MenuDropDown.vue |  99 ++++---
 src/renderer/components/menu/TitleBar.vue     | 272 ++++++++++++++++--
 src/renderer/components/workspace/TabBar.vue  |  96 ++++++-
 src/renderer/global.d.ts                      |   2 +
 6 files changed, 430 insertions(+), 67 deletions(-)

diff --git a/src/main/ipcBridge.ts b/src/main/ipcBridge.ts
index 8f993b7..dfb9893 100644
--- a/src/main/ipcBridge.ts
+++ b/src/main/ipcBridge.ts
@@ -593,6 +593,27 @@ export function registerIpcOnHandlers() {
       await shell.openExternal(externalUrl);
     }
   });
+  ipcMain.handle("shell:revealFileInFolder", async (_event, filePath: string) => {
+    if (!filePath) return false;
+
+    try {
+      const normalizedPath = path.normalize(filePath);
+      if (fs.existsSync(normalizedPath)) {
+        shell.showItemInFolder(normalizedPath);
+        return true;
+      }
+
+      const directoryPath = path.dirname(normalizedPath);
+      if (!fs.existsSync(directoryPath)) {
+        return false;
+      }
+
+      const openResult = await shell.openPath(directoryPath);
+      return openResult === "";
+    } catch {
+      return false;
+    }
+  });
   ipcMain.on("change-save-status", (event, isSavedStatus) => {
     const targetWin = BrowserWindow.fromWebContents(event.sender);
     if (!targetWin) return;
@@ -1050,6 +1071,10 @@ export function registerIpcHandleHandlers() {
 }
 // 无需 win 的 ipc 处理
 export function registerGlobalIpcHandlers() {
+  ipcMain.handle("clipboard:writeText", async (_event, text: string): Promise<boolean> => {
+    clipboard.writeText(text ?? "");
+    return true;
+  });
   ipcMain.handle(
     "image:openPreview",
     async (event, payload: ImagePreviewPayload): Promise<void> => {
diff --git a/src/preload.ts b/src/preload.ts
index 189896c..2bc14cc 100644
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -62,12 +62,15 @@ contextBridge.exposeInMainWorld("electronAPI", {
   openExternal: (url: string) => ipcRenderer.send("shell:openExternal", url),
   openLink: (href: string, currentFilePath?: string | null) =>
     ipcRenderer.invoke("shell:openLink", href, currentFilePath),
+  revealFileInFolder: (filePath: string) =>
+    ipcRenderer.invoke("shell:revealFileInFolder", filePath),
   openImagePreview: (
     src: string,
     alt?: string,
     options?: { items?: Array<{ src: string; alt?: string }>; index?: number }
   ) => ipcRenderer.invoke("image:openPreview", { src, alt, ...options }),
   getFilePathInClipboard: () => ipcRenderer.invoke("clipboard:getFilePath"),
+  writeTextToClipboard: (text: string) => ipcRenderer.invoke("clipboard:writeText", text),
   writeTempImage: (
     file: Uint8Array,
     targetPath: string,
diff --git a/src/renderer/components/menu/MenuDropDown.vue b/src/renderer/components/menu/MenuDropDown.vue
index 69ce06b..47337bb 100644
--- a/src/renderer/components/menu/MenuDropDown.vue
+++ b/src/renderer/components/menu/MenuDropDown.vue
@@ -4,15 +4,18 @@ import emitter from "@/renderer/events";
 import MenuBar from "./MenuBar.vue";
 
 const isOpen = ref(false);
+function closeMenu() {
+  isOpen.value = false;
+}
 
 // 事件处理器
 function handleFileChange() {
-  isOpen.value = false;
+  closeMenu();
 }
 
 function handleKeydown(event: KeyboardEvent) {
   if (event.key === "Escape" && isOpen.value) {
-    isOpen.value = false;
+    closeMenu();
   }
 }
 
@@ -29,11 +32,10 @@ onUnmounted(() => {
 
 <template>
   <div class="MenuDropDownBox">
-    <div class="dropdown-header">
+    <button class="dropdown-header" type="button" @click="isOpen = !isOpen">
       <svg
         class="logo"
         :class="{ active: isOpen }"
-        @click="isOpen = !isOpen"
         width="13"
         height="18"
         viewBox="13.5 11.5 11 15"
@@ -54,63 +56,86 @@ onUnmounted(() => {
           fill="currentColor"
         />
       </svg>
-    </div>
-    <Transition name="menu-slide">
-      <div v-show="isOpen" class="dropdown-content">
-        <MenuBar />
-      </div>
-    </Transition>
+    </button>
+    <Teleport to="body">
+      <Transition name="menu-fade">
+        <div v-if="isOpen" class="menu-overlay" @click="closeMenu">
+          <div class="dropdown-content" @click.stop>
+            <MenuBar />
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
   </div>
 </template>
 
 <style lang="less" scoped>
 .MenuDropDownBox {
   height: 100%;
+  flex-shrink: 0;
+
   .dropdown-header {
     display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
-    padding: 0 0 3px 10px;
-    height: 100%;
-    -webkit-app-region: no-drag; /* 禁止拖动 */
+    margin-left: 6px;
+    padding: 0 10px;
+    height: 34px;
+    border: none;
+    border-radius: 12px;
+    background: transparent;
+    -webkit-app-region: no-drag;
+
+    &:hover {
+      background: var(--hover-color);
+    }
+
     .logo {
       display: inline-block;
       width: 13px;
       height: 18px;
       transition: 0.2s;
-      margin: 4px;
       color: var(--primary-color);
+
       &.active {
         transform: rotate(180deg);
       }
     }
   }
-  .dropdown-content {
-    position: absolute;
-    top: 40px; /* 与标题栏高度一致 */
-    left: 0;
-    background: var(--background-color-1);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    z-index: 1000;
-    width: 100%;
-    height: 100%;
-    border-radius: 4px;
-    -webkit-app-region: no-drag; /* 禁止拖动 */
-    white-space: nowrap;
-  }
 }
 
-.menu-slide-enter-active,
-.menu-slide-leave-active {
-  transition:
-    opacity 0.15s ease,
-    transform 0.15s ease;
+.menu-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 110000;
+  padding: 58px 16px 16px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  background: rgba(10, 14, 24, 0.28);
+  backdrop-filter: blur(12px);
+  -webkit-app-region: no-drag;
+}
+
+.dropdown-content {
+  width: min(1180px, calc(100vw - 32px));
+  height: min(760px, calc(100vh - 74px));
+  border-radius: 22px;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--border-color-1) 84%, transparent);
+  background: color-mix(in srgb, var(--background-color-1) 94%, transparent);
+  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.28);
+  white-space: nowrap;
+}
+
+.menu-fade-enter-active,
+.menu-fade-leave-active {
+  transition: opacity 0.18s ease;
 }
 
-.menu-slide-enter-from,
-.menu-slide-leave-to {
+.menu-fade-enter-from,
+.menu-fade-leave-to {
   opacity: 0;
-  transform: translateY(-8px);
 }
 </style>
diff --git a/src/renderer/components/menu/TitleBar.vue b/src/renderer/components/menu/TitleBar.vue
index f140a4d..4c6060c 100644
--- a/src/renderer/components/menu/TitleBar.vue
+++ b/src/renderer/components/menu/TitleBar.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { onUnmounted, ref } from "vue";
+import autotoast from "autotoast.js";
+import { computed, onUnmounted, ref } from "vue";
 import AppIcon from "@/renderer/components/ui/AppIcon.vue";
+import useTab from "@/renderer/hooks/useTab";
 import TabBar from "@/renderer/components/workspace/TabBar.vue";
 import MenuDropDown from "./MenuDropDown.vue";
 
 const isWin = window.electronAPI.platform === "win32";
+const { currentTab } = useTab();
 
 const isFullScreen = ref(false);
 function minimize() {
@@ -30,6 +33,52 @@ function handleFullscreenChange(fullscreen: boolean) {
 window.electronAPI.on("window:maximized-change", handleMaximizedChange);
 window.electronAPI.on("window:fullscreen-change", handleFullscreenChange);
 
+function getDirectoryPath(filePath: string): string {
+  const normalizedPath = filePath.replace(/[\\/]+$/, "");
+  const separator = normalizedPath.includes("\\") ? "\\" : "/";
+  const parts = normalizedPath.split(/[\\/]/);
+  parts.pop();
+  return parts.join(separator);
+}
+
+const currentFileMeta = computed(() => {
+  const tab = currentTab.value;
+  const filePath = tab?.filePath ?? "";
+  const fileName = tab?.name || "未打开文档";
+  const directoryPath = filePath ? getDirectoryPath(filePath) : "";
+
+  return {
+    fileName,
+    filePath,
+    directoryPath,
+    canOperate: Boolean(filePath),
+    hint: filePath ? directoryPath : tab ? "新建文档，保存后可定位所在文件夹" : "当前没有打开文档",
+  };
+});
+
+async function revealCurrentFile() {
+  const filePath = currentFileMeta.value.filePath;
+  if (!filePath) return;
+
+  const opened = await window.electronAPI.revealFileInFolder(filePath);
+  if (!opened) {
+    autotoast.show("无法打开所在文件夹", "error");
+  }
+}
+
+async function copyCurrentFilePath() {
+  const filePath = currentFileMeta.value.filePath;
+  if (!filePath) return;
+
+  const copied = await window.electronAPI.writeTextToClipboard(filePath);
+  if (copied) {
+    autotoast.show("已复制文件路径", "success");
+    return;
+  }
+
+  autotoast.show("复制文件路径失败", "error");
+}
+
 onUnmounted(() => {
   window.electronAPI.removeListener?.("window:maximized-change", handleMaximizedChange);
   window.electronAPI.removeListener?.("window:fullscreen-change", handleFullscreenChange);
@@ -40,11 +89,40 @@ onUnmounted(() => {
   <div class="TitleBarBox">
     <template v-if="isWin">
       <MenuDropDown />
-      <!-- <div class="title" @dblclick="toggleMaximize">
-        {{ title }}
-      </div> -->
-
       <TabBar />
+      <div
+        class="titlebar-meta"
+        :title="currentFileMeta.filePath || currentFileMeta.hint"
+        :class="{ disabled: !currentFileMeta.canOperate }"
+      >
+        <div class="file-summary">
+          <span class="file-status" :class="{ modified: currentTab?.isModified }"></span>
+          <div class="file-text">
+            <span class="file-name">{{ currentFileMeta.fileName }}</span>
+            <span class="file-path">{{ currentFileMeta.hint }}</span>
+          </div>
+        </div>
+        <div class="file-actions">
+          <button
+            class="file-action-btn"
+            type="button"
+            title="打开所在文件夹"
+            :disabled="!currentFileMeta.canOperate"
+            @click="revealCurrentFile"
+          >
+            <AppIcon name="folder-opened" />
+          </button>
+          <button
+            class="file-action-btn"
+            type="button"
+            title="复制文件路径"
+            :disabled="!currentFileMeta.canOperate"
+            @click="copyCurrentFilePath"
+          >
+            <AppIcon name="document-copy" />
+          </button>
+        </div>
+      </div>
 
       <div class="window-controls">
         <button class="window-control-btn" @click="minimize">
@@ -59,12 +137,42 @@ onUnmounted(() => {
       </div>
     </template>
     <template v-else>
-      <div style="width: 68px"></div>
-      <!-- <div class="title" @dblclick="toggleMaximize">
-        {{ title }}
-      </div> -->
+      <div class="mac-spacer"></div>
       <TabBar />
-      <div style="margin-right: 10px">
+      <div
+        class="titlebar-meta"
+        :title="currentFileMeta.filePath || currentFileMeta.hint"
+        :class="{ disabled: !currentFileMeta.canOperate }"
+      >
+        <div class="file-summary">
+          <span class="file-status" :class="{ modified: currentTab?.isModified }"></span>
+          <div class="file-text">
+            <span class="file-name">{{ currentFileMeta.fileName }}</span>
+            <span class="file-path">{{ currentFileMeta.hint }}</span>
+          </div>
+        </div>
+        <div class="file-actions">
+          <button
+            class="file-action-btn"
+            type="button"
+            title="打开所在文件夹"
+            :disabled="!currentFileMeta.canOperate"
+            @click="revealCurrentFile"
+          >
+            <AppIcon name="folder-opened" />
+          </button>
+          <button
+            class="file-action-btn"
+            type="button"
+            title="复制文件路径"
+            :disabled="!currentFileMeta.canOperate"
+            @click="copyCurrentFilePath"
+          >
+            <AppIcon name="document-copy" />
+          </button>
+        </div>
+      </div>
+      <div class="menu-host">
         <MenuDropDown />
       </div>
     </template>
@@ -74,26 +182,135 @@ onUnmounted(() => {
 <style lang="less" scoped>
 .TitleBarBox {
   -webkit-app-region: drag;
-  /* ✅ 允许拖动窗口 */
-  height: 40px;
-  background: var(--background-color-2);
+  height: 46px;
+  padding-left: 6px;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--background-color-1) 60%, transparent),
+    var(--background-color-2)
+  );
   color: var(--text-color);
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 10px;
   overflow: hidden;
-  // padding: 0 0 0 12px;
-  // user-select: none;
+  border-bottom: 1px solid color-mix(in srgb, var(--border-color-1) 82%, transparent);
+
+  .mac-spacer {
+    width: 68px;
+    flex-shrink: 0;
+  }
+
+  .menu-host {
+    margin-right: 10px;
+  }
+
+  .titlebar-meta {
+    min-width: 0;
+    max-width: 360px;
+    flex: 0 1 360px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 7px 8px 7px 12px;
+    border-radius: 14px;
+    border: 1px solid color-mix(in srgb, var(--border-color-1) 80%, transparent);
+    background: color-mix(in srgb, var(--background-color-1) 88%, transparent);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
+    -webkit-app-region: no-drag;
+
+    &.disabled {
+      opacity: 0.72;
+    }
+
+    .file-summary {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex: 1;
+    }
+
+    .file-status {
+      width: 8px;
+      height: 8px;
+      border-radius: 999px;
+      flex-shrink: 0;
+      background: color-mix(in srgb, var(--text-color-3) 60%, transparent);
+
+      &.modified {
+        background: #f59e0b;
+        box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 18%, transparent);
+      }
+    }
+
+    .file-text {
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+    }
+
+    .file-name,
+    .file-path {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .file-name {
+      font-size: 12px;
+      line-height: 1.35;
+      color: var(--text-color-1);
+      font-weight: 600;
+    }
+
+    .file-path {
+      font-size: 11px;
+      line-height: 1.35;
+      color: var(--text-color-3);
+    }
+
+    .file-actions {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex-shrink: 0;
+    }
+
+    .file-action-btn {
+      width: 28px;
+      height: 28px;
+      border: none;
+      border-radius: 9px;
+      background: transparent;
+      color: var(--text-color-2);
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover:not(:disabled) {
+        background: var(--hover-color);
+        color: var(--text-color-1);
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.45;
+      }
+    }
+  }
 
   .window-controls {
     display: flex;
     -webkit-app-region: no-drag;
     height: 100%;
-    display: flex;
     align-items: center;
     justify-content: center;
 
-    /* ✅ 控制按钮不能拖动 */
     .window-control-btn {
       display: flex;
       align-items: center;
@@ -101,8 +318,8 @@ onUnmounted(() => {
       cursor: pointer;
       font-size: 16px;
       color: var(--text-color-1);
-      height: 40px;
-      width: 40px;
+      height: 46px;
+      width: 42px;
       border: none;
       background: transparent;
 
@@ -117,4 +334,21 @@ onUnmounted(() => {
     }
   }
 }
+
+@media (max-width: 1120px) {
+  .TitleBarBox {
+    .titlebar-meta {
+      max-width: 270px;
+      flex-basis: 270px;
+    }
+  }
+}
+
+@media (max-width: 900px) {
+  .TitleBarBox {
+    .titlebar-meta {
+      display: none;
+    }
+  }
+}
 </style>
diff --git a/src/renderer/components/workspace/TabBar.vue b/src/renderer/components/workspace/TabBar.vue
index cc058eb..2d808c8 100644
--- a/src/renderer/components/workspace/TabBar.vue
+++ b/src/renderer/components/workspace/TabBar.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import autotoast from "autotoast.js";
 import { computed, onMounted, onUnmounted, ref } from "vue";
 import { vDraggable } from "vue-draggable-plus";
 import AppIcon from "@/renderer/components/ui/AppIcon.vue";
@@ -52,6 +53,9 @@ const contextMenu = ref({
 const contextTabIndex = computed(() =>
   tabs.value.findIndex((tab) => tab.id === contextMenu.value.tabId)
 );
+const contextTab = computed(
+  () => tabs.value.find((tab) => tab.id === contextMenu.value.tabId) ?? null
+);
 
 const rightTabsCount = computed(() => {
   if (contextTabIndex.value < 0) return 0;
@@ -84,8 +88,8 @@ function hideContextMenu() {
 }
 
 function handleTabContextMenu(tabId: string, event: MouseEvent) {
-  const menuWidth = 170;
-  const menuHeight = 140;
+  const menuWidth = 210;
+  const menuHeight = 230;
   contextMenu.value = {
     visible: true,
     x: Math.min(event.clientX, window.innerWidth - menuWidth),
@@ -137,6 +141,31 @@ function handleCloseOtherTabs() {
   closeTabsByIds(tabIds);
 }
 
+async function handleRevealContextTabInFolder() {
+  const filePath = contextTab.value?.filePath;
+  if (!filePath) return;
+
+  hideContextMenu();
+  const opened = await window.electronAPI.revealFileInFolder(filePath);
+  if (!opened) {
+    autotoast.show("无法打开所在文件夹", "error");
+  }
+}
+
+async function handleCopyContextTabPath() {
+  const filePath = contextTab.value?.filePath;
+  if (!filePath) return;
+
+  hideContextMenu();
+  const copied = await window.electronAPI.writeTextToClipboard(filePath);
+  if (copied) {
+    autotoast.show("已复制文件路径", "success");
+    return;
+  }
+
+  autotoast.show("复制文件路径失败", "error");
+}
+
 function handleContextMenuKeydown(event: KeyboardEvent) {
   if (event.key === "Escape") hideContextMenu();
 }
@@ -467,15 +496,46 @@ onUnmounted(() => {
       @click.stop
       @contextmenu.prevent.stop
     >
-      <button type="button" @click="handleCloseContextTab">关闭标签</button>
+      <button
+        type="button"
+        :disabled="!contextTab?.filePath"
+        @click="handleRevealContextTabInFolder"
+      >
+        <span class="menu-item-content">
+          <AppIcon name="folder-opened" />
+          <span>打开所在文件夹</span>
+        </span>
+      </button>
+      <button type="button" :disabled="!contextTab?.filePath" @click="handleCopyContextTabPath">
+        <span class="menu-item-content">
+          <AppIcon name="document-copy" />
+          <span>复制文件路径</span>
+        </span>
+      </button>
+      <div class="tab-context-divider"></div>
+      <button type="button" @click="handleCloseContextTab">
+        <span class="menu-item-content">
+          <AppIcon name="close" />
+          <span>关闭标签</span>
+        </span>
+      </button>
       <button type="button" :disabled="rightTabsCount === 0" @click="handleCloseRightTabs">
-        关闭右侧标签
+        <span class="menu-item-content">
+          <AppIcon name="close" />
+          <span>关闭右侧标签</span>
+        </span>
       </button>
       <button type="button" :disabled="savedTabsCount === 0" @click="handleCloseSavedTabs">
-        关闭已保存
+        <span class="menu-item-content">
+          <AppIcon name="circle-check" />
+          <span>关闭已保存</span>
+        </span>
       </button>
       <button type="button" :disabled="otherTabsCount === 0" @click="handleCloseOtherTabs">
-        关闭其他
+        <span class="menu-item-content">
+          <AppIcon name="close" />
+          <span>关闭其他</span>
+        </span>
       </button>
     </div>
   </div>
@@ -702,25 +762,39 @@ onUnmounted(() => {
   .tab-context-menu {
     position: fixed;
     z-index: 100000;
-    min-width: 150px;
+    min-width: 210px;
     padding: 6px;
     border: 1px solid var(--border-color-1);
-    border-radius: 8px;
-    background: var(--background-color-1);
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--background-color-1) 96%, transparent);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
     -webkit-app-region: no-drag;
 
+    .tab-context-divider {
+      height: 1px;
+      margin: 5px 6px;
+      background: color-mix(in srgb, var(--border-color-1) 84%, transparent);
+    }
+
     button {
       width: 100%;
-      height: 30px;
+      min-height: 34px;
       padding: 0 10px;
       border: none;
-      border-radius: 6px;
+      border-radius: 8px;
       background: transparent;
       color: var(--text-color-1);
       text-align: left;
       font-size: 13px;
       cursor: pointer;
+      display: flex;
+      align-items: center;
+
+      .menu-item-content {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
 
       &:hover:not(:disabled) {
         background: var(--hover-color);
diff --git a/src/renderer/global.d.ts b/src/renderer/global.d.ts
index e2673c0..f74f6c9 100644
--- a/src/renderer/global.d.ts
+++ b/src/renderer/global.d.ts
@@ -33,12 +33,14 @@ interface Window {
     ) => void;
     openExternal: (url: string) => Promise<void>;
     openLink: (href: string, currentFilePath?: string | null) => Promise<void>;
+    revealFileInFolder: (filePath: string) => Promise<boolean>;
     openImagePreview: (
       src: string,
       alt?: string,
       options?: { items?: Array<{ src: string; alt?: string }>; index?: number }
     ) => Promise<void>;
     getFilePathInClipboard: () => Promise<string | null>;
+    writeTextToClipboard: (text: string) => Promise<boolean>;
     writeTempImage: (
       file: Uint8Array<ArrayBuffer>,
       targetPath: string,