diff --git a/web/src/app/Icon.vue b/web/src/app/Icon.vue index dfcc01c..83e3fc3 100644 --- a/web/src/app/Icon.vue +++ b/web/src/app/Icon.vue @@ -11,6 +11,7 @@ const paths = { chevron: 'm9 6 6 6-6 6', more: 'M12 6h.01M12 12h.01M12 18h.01', close: 'M18 6 6 18M6 6l12 12', + pin: 'M16 9V3H8v6l-3 3v2h6v7h2v-7h6v-2z', trash: 'M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6', logout: 'M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9', restore: 'M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5', diff --git a/web/src/app/TabBar.vue b/web/src/app/TabBar.vue index 842201a..1f5b83c 100644 --- a/web/src/app/TabBar.vue +++ b/web/src/app/TabBar.vue @@ -3,7 +3,7 @@ import { nextTick, ref } from 'vue' import { commandTitle } from './commands' import Icon from './Icon.vue' import { noteTitle } from './paths' -import { closeTab, toggleSourceMode, ws } from './workspace' +import { closeTab, toggleSourceMode, ws, type Tab } from './workspace' // 拖动排序:拖到某个标签的左半边插到它前面,右半边插到它后面 const TAB_TYPE = 'application/x-rawmark-tab' @@ -42,20 +42,20 @@ function onDragEnd() { } // ---- 右键菜单 ---- -const menu = ref<{ path: string; x: number; y: number } | null>(null) +const menu = ref<{ tab: Tab; x: number; y: number } | null>(null) const menuElement = ref() -async function openMenu(e: MouseEvent, path: string) { - menu.value = { path, x: e.clientX, y: e.clientY } +async function openMenu(e: MouseEvent, tab: Tab) { + menu.value = { tab, x: e.clientX, y: e.clientY } await nextTick() - if (menu.value?.path !== path || !menuElement.value) return + if (menu.value?.tab !== tab || !menuElement.value) return const { width, height } = menuElement.value.getBoundingClientRect() menu.value.x = Math.max(4, Math.min(e.clientX, innerWidth - width - 4)) menu.value.y = Math.max(4, Math.min(e.clientY, innerHeight - height - 4)) } async function closeMany(keep: (index: number, path: string) => boolean) { - const paths = ws.tabs.filter((t, i) => !keep(i, t.path)).map((t) => t.path) + const paths = ws.tabs.filter((t, i) => !t.pinned && !keep(i, t.path)).map((t) => t.path) menu.value = null for (const p of paths) await closeTab(p) } @@ -91,12 +91,13 @@ function closeRight(path: string) { draggable="true" @click="ws.active = tab.path" @auxclick.prevent="$event.button === 1 && closeTab(tab.path)" - @contextmenu.prevent="openMenu($event, tab.path)" + @contextmenu.prevent="openMenu($event, tab)" @dragstart="onDragStart($event, tab.path)" @dragover="onDragOver($event, tab.path)" @drop="onDrop" @dragend="onDragEnd" > + {{ noteTitle(tab.path) }}