perf: update connect

Author: ibuler

ui/assets/css/main.css

@@ -125,6 +125,13 @@
   --workspace-surface-header: var(--app-surface-header);
   --workspace-surface-footer: var(--app-surface-footer);
   --workspace-surface-border: var(--app-border-subtle);
+  --workspace-surface-sub-sidebar: color-mix(in srgb, var(--app-surface-panel) 74%, var(--app-surface-sidebar) 26%);
+  --workspace-surface-sub-panel: color-mix(in srgb, var(--app-surface-panel-strong) 78%, var(--app-surface-canvas) 22%);
+  --workspace-surface-sub-header: color-mix(in srgb, var(--app-surface-panel) 80%, var(--app-surface-header) 20%);
+  --workspace-surface-sub-tab: color-mix(in srgb, var(--app-surface-panel) 72%, var(--app-surface-canvas) 28%);
+  --workspace-surface-sub-tab-active: color-mix(in srgb, var(--app-surface-canvas) 86%, var(--app-surface-panel-strong) 14%);
+  --workspace-surface-sub-tree: color-mix(in srgb, var(--app-surface-panel-strong) 68%, var(--app-surface-canvas) 32%);
+  --workspace-surface-sub-border: color-mix(in srgb, var(--app-border-subtle) 86%, var(--app-surface-panel) 14%);
   --ui-bg: var(--app-surface-canvas);
   --ui-bg-muted: var(--app-surface-sidebar);
   --ui-bg-elevated: var(--app-surface-panel);

ui/components/SideBar/assetTree.vue

@@ -251,7 +251,7 @@ defineExpose({ refresh, loading });
     </template>
 
     <template v-else>
-      <section class="group flex min-h-0 flex-1 flex-col overflow-hidden border-b border-gray-200 dark:border-white/10">
+      <section class="group flex min-h-0 flex-1 flex-col overflow-hidden">
         <div class="flex h-8 w-full shrink-0 items-center gap-1 px-3 text-xs font-medium text-gray-700 dark:text-gray-300">
           <button
             type="button"

ui/components/Workspace/sessionPane.vue

@@ -12,6 +12,15 @@ const { activeTabId, closeSession, toSurfaceTab } = useWorkspaceTabs();
 const splitSurfaces = computed(() => props.tab.splitSessions || []);
 const hasSplit = computed(() => splitSurfaces.value.length > 0);
 
+function surfaceInstanceKey(tab: WorkspaceSessionTab) {
+  const payload = tab.payload || {};
+  const tokenId = String(payload.id || payload.token?.id || "");
+  const webUrl = String(payload.webUrl || "");
+  const connectMethod = String(payload.connectMethod?.value || "");
+
+  return [tab.id, tokenId, webUrl, connectMethod, tab.status].join(":");
+}
+
 function focusSurface() {
   surfaceRef.value?.focus?.();
 }
@@ -33,7 +42,7 @@ defineExpose({ focus: focusSurface });
 <template>
   <div class="h-full min-h-0 w-full overflow-hidden" @mousedown="focusSurface">
     <div v-if="!hasSplit" class="h-full min-h-0">
-      <component :is="surfaceComponent" ref="surfaceRef" :tab="tab" />
+      <component :is="surfaceComponent" :key="surfaceInstanceKey(tab)" ref="surfaceRef" :tab="tab" />
     </div>
 
     <div
@@ -42,7 +51,7 @@ defineExpose({ focus: focusSurface });
       :class="splitSurfaces.length > 1 ? 'grid-rows-2' : 'grid-cols-2'"
     >
       <div class="relative min-h-0 min-w-0">
-        <component :is="surfaceComponent" ref="surfaceRef" :tab="tab" />
+        <component :is="surfaceComponent" :key="surfaceInstanceKey(tab)" ref="surfaceRef" :tab="tab" />
       </div>
 
       <div
@@ -60,6 +69,7 @@ defineExpose({ focus: focusSurface });
         </button>
         <component
           :is="surfaceComponent"
+          :key="surfaceInstanceKey(splitSurfaceTab(split))"
           :tab="splitSurfaceTab(split)"
           class="h-full"
         />

ui/components/Workspace/subTabStrip.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+export interface WorkspaceSubTab {
+  id: string
+  label: string
+  icon: string
+  title?: string
+  dirty?: boolean
+}
+
+defineProps<{
+  tabs: WorkspaceSubTab[]
+  activeId: string
+}>();
+
+defineEmits<{
+  select: [id: string]
+  close: [id: string]
+}>();
+</script>
+
+<template>
+  <div
+    v-if="tabs.length"
+    class="workspace-sub-tab-bar shrink-0 border-b border-[var(--workspace-surface-sub-border)] bg-[var(--workspace-surface-sub-tab)] px-2 py-1.5"
+  >
+    <div class="workspace-sub-tab-capsule flex w-fit min-w-0 max-w-full items-center rounded-lg p-px">
+      <div class="workspace-sub-tab-strip flex w-fit min-w-0 max-w-full items-center gap-0.5 overflow-x-auto">
+        <button
+          v-for="(tab, index) in tabs"
+          :key="tab.id"
+          type="button"
+          class="group relative flex h-7 min-w-0 shrink-0 items-center gap-1.5 rounded-lg px-2 text-left transition-all duration-150"
+          :class="[
+            activeId === tab.id ? 'max-w-72 px-2.5' : 'max-w-44',
+            activeId === tab.id
+              ? 'bg-[var(--workspace-surface-sub-tab-active)] text-[var(--app-fg)] shadow-[0_8px_18px_rgba(15,23,42,0.12)] ring-1 ring-[var(--workspace-surface-sub-border)]'
+              : 'text-[var(--app-muted)] hover:bg-[var(--app-hover-soft)] hover:text-[var(--app-fg)]'
+          ]"
+          :title="tab.title || tab.label"
+          @click="$emit('select', tab.id)"
+        >
+          <UIcon
+            :name="tab.icon"
+            class="size-3.5 shrink-0"
+            :class="activeId === tab.id ? 'text-primary' : 'text-[var(--app-muted)] group-hover:text-[var(--app-fg)]'"
+          />
+          <span class="min-w-0 truncate font-ui-mono text-[11px] tracking-[0.01em]">{{ tab.label }}</span>
+          <span v-if="tab.dirty" class="size-1.5 shrink-0 rounded-full bg-primary" title="未保存" />
+          <span
+            class="flex size-3.5 shrink-0 items-center justify-center rounded-md opacity-0 transition-opacity hover:bg-[var(--app-hover-strong)] group-hover:opacity-100"
+            :class="activeId === tab.id ? 'opacity-60' : ''"
+            @click.stop="$emit('close', tab.id)"
+          >
+            <UIcon name="i-lucide-x" class="size-2.5" />
+          </span>
+          <span
+            v-if="activeId !== tab.id && index < tabs.length - 1"
+            class="pointer-events-none absolute top-1/2 -right-[3px] h-3 -translate-y-1/2 border-r border-[var(--workspace-surface-sub-border)]"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.workspace-sub-tab-capsule {
+  background-color: color-mix(in srgb, var(--workspace-surface-sub-panel) 72%, var(--workspace-surface-sub-tab) 28%);
+  border: 1px solid var(--workspace-surface-sub-border);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--workspace-surface-sub-border) 58%, transparent);
+}
+
+.workspace-sub-tab-strip {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.workspace-sub-tab-strip::-webkit-scrollbar {
+  display: none;
+}
+</style>

ui/components/Workspace/topHeader.vue

@@ -42,8 +42,7 @@ const handleWindowDrag = async (event: MouseEvent) => {
     class="header-bg h-10 min-h-10 max-h-10 shrink-0 flex items-center"
     :style="{
       backgroundColor: 'var(--app-header-bg)',
-      borderBottom: '1px solid var(--app-border)',
-      boxShadow: 'inset 0 -1px 0 color-mix(in srgb, var(--app-border) 82%, transparent)'
+      borderBottom: '1px solid var(--app-border)'
     }"
     @mousedown="handleWindowDrag"
   >

ui/koko/components/SftpIde/index.vue

@@ -70,6 +70,37 @@ const textExtensions = new Set(["txt", "md", "json", "yaml", "yml", "toml", "ini
 const languageMap: Record<string, string> = { bash: "shell", c: "c", conf: "ini", cpp: "cpp", css: "css", env: "ini", go: "go", h: "c", hpp: "cpp", html: "html", ini: "ini", java: "java", js: "javascript", json: "json", jsx: "javascript", less: "less", log: "plaintext", md: "markdown", py: "python", rs: "rust", scss: "scss", sh: "shell", sql: "sql", toml: "ini", ts: "typescript", tsx: "typescript", txt: "plaintext", vue: "html", xml: "xml", yaml: "yaml", yml: "yaml", zsh: "shell" };
 const editorLanguage = computed(() => languageMap[activeTab.value?.entry.name.split(".").pop()?.toLowerCase() || ""] || "plaintext");
 const dirty = (tab: EditorTab) => tab.kind === "text" && tab.content !== tab.savedContent;
+const tabIconMap: Record<string, string> = {
+  css: "i-lucide-palette",
+  html: "i-lucide-globe",
+  js: "i-lucide-braces",
+  json: "i-lucide-braces",
+  jsx: "i-lucide-braces",
+  md: "i-lucide-file-text",
+  py: "i-lucide-file-code",
+  sh: "i-lucide-terminal",
+  sql: "i-lucide-database",
+  ts: "i-lucide-braces",
+  tsx: "i-lucide-braces",
+  vue: "i-lucide-component",
+  yaml: "i-lucide-file-text",
+  yml: "i-lucide-file-text"
+};
+
+function tabIcon(tab: EditorTab) {
+  if (tab.kind === "image") return "i-lucide-image";
+  if (tab.kind === "unsupported" || tab.error) return "i-lucide-file-warning";
+  const ext = tab.entry.name.split(".").pop()?.toLowerCase() || "";
+  return tabIconMap[ext] || "i-lucide-file-code-2";
+}
+
+const subTabs = computed(() => tabs.value.map((tab) => ({
+  id: tab.path,
+  label: tab.entry.name,
+  icon: tabIcon(tab),
+  title: tab.path,
+  dirty: dirty(tab)
+})));
 
 function joinPath(parent: string, name: string) {
   return `${parent.replace(/\/$/, "")}/${name}` || `/${name}`;
@@ -394,8 +425,8 @@ onUnmounted(() => tabs.value.forEach(revokePreview));
 
 <template>
   <div class="grid h-full min-h-0 grid-cols-[260px_minmax(0,1fr)] bg-[var(--app-main-bg)] text-[var(--app-fg)]">
-    <aside class="flex min-h-0 flex-col border-r border-[var(--app-border)] bg-[var(--app-panel-bg)]">
-      <div class="flex h-10 min-w-0 shrink-0 items-center gap-1 border-b border-[var(--app-border)] px-2">
+    <aside class="flex min-h-0 flex-col border-r border-[var(--workspace-surface-sub-border)] bg-[var(--workspace-surface-sub-sidebar)]">
+      <div class="flex h-10 min-w-0 shrink-0 items-center gap-1 border-b border-[var(--workspace-surface-sub-border)] bg-[var(--workspace-surface-sub-header)] px-2">
         <button class="min-w-0 flex-1 truncate px-1 text-left font-ui-mono text-[10px]" :class="selectedDirectory === rootPath ? 'text-primary' : 'text-muted'" :title="rootPath" @click="selectedDirectory = rootPath" @contextmenu="openContextMenu({ name: rootPath, size: '', perm: '', mod_time: '', type: '', is_dir: true }, rootPath, $event)">
           {{ rootPath || "/" }}
         </button>
@@ -405,10 +436,10 @@ onUnmounted(() => tabs.value.forEach(revokePreview));
         <UButton icon="i-lucide-search" size="xs" color="neutral" :variant="searchVisible ? 'soft' : 'ghost'" title="搜索" @click="toggleSearch" />
         <UButton icon="i-lucide-refresh-cw" size="xs" color="neutral" variant="ghost" title="刷新目录树" @click="refreshTree" />
       </div>
-      <div v-if="searchVisible" class="shrink-0 border-b border-[var(--app-border)] bg-[var(--app-main-bg)] p-2">
+      <div v-if="searchVisible" class="shrink-0 border-b border-[var(--workspace-surface-sub-border)] bg-[var(--workspace-surface-sub-tree)] p-2">
         <UInput v-model="search" icon="i-lucide-search" size="xs" placeholder="筛选文件" class="w-full" />
       </div>
-      <div class="min-h-0 flex-1 overflow-auto bg-[var(--app-panel-bg)] py-1">
+      <div class="min-h-0 flex-1 overflow-auto bg-[var(--workspace-surface-sub-tree)] py-1">
         <template v-for="row in treeRows" :key="row.path">
           <button v-if="row.kind === 'entry'" class="flex h-7 w-full items-center gap-1 pr-2 text-left text-xs text-[var(--app-fg)] hover:bg-[var(--app-hover-soft)]" :class="row.entry.is_dir ? (selectedDirectory === row.path ? 'bg-[var(--app-selected-soft)] text-primary' : '') : (activePath === row.path ? 'bg-[var(--app-selected-soft)] text-primary' : '')" :style="{ paddingLeft: `${8 + row.depth * 14}px` }" :title="row.path" @click="openEntry(row.entry, row.path)" @contextmenu="openContextMenu(row.entry, row.path, $event)">
             <UIcon v-if="row.entry.is_dir" :name="row.expanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'" class="size-3 shrink-0 text-[var(--app-muted)]" />
@@ -419,7 +450,7 @@ onUnmounted(() => tabs.value.forEach(revokePreview));
           <div v-else class="py-1 pr-2" :style="{ paddingLeft: `${8 + row.depth * 14}px` }">
             <div class="flex items-center gap-1">
               <UIcon :name="row.createKind === 'directory' ? 'i-lucide-folder' : 'i-lucide-file-code-2'" class="size-3.5 shrink-0 text-[var(--app-muted)]" />
-              <input ref="pendingInput" v-model="pendingName" class="h-6 min-w-0 flex-1 rounded border border-primary bg-[var(--app-main-bg)] px-1.5 text-xs text-[var(--app-fg)] outline-none" :placeholder="row.createKind === 'directory' ? '目录名称' : '文件名称'" :disabled="pendingSubmitting" @keydown.enter.prevent="commitCreate" @keydown.esc.prevent="cancelCreate">
+              <input ref="pendingInput" v-model="pendingName" class="h-6 min-w-0 flex-1 rounded border border-primary bg-[var(--workspace-surface-sub-panel)] px-1.5 text-xs text-[var(--app-fg)] outline-none" :placeholder="row.createKind === 'directory' ? '目录名称' : '文件名称'" :disabled="pendingSubmitting" @keydown.enter.prevent="commitCreate" @keydown.esc.prevent="cancelCreate">
               <UButton icon="i-lucide-check" size="xs" color="primary" variant="ghost" :loading="pendingSubmitting" title="确认" @click="commitCreate" />
               <UButton icon="i-lucide-x" size="xs" color="neutral" variant="ghost" :disabled="pendingSubmitting" title="取消" @click="cancelCreate" />
             </div>
@@ -442,15 +473,14 @@ onUnmounted(() => tabs.value.forEach(revokePreview));
     </aside>
 
     <section class="flex min-h-0 min-w-0 flex-col">
-      <div v-if="tabs.length" class="flex h-9 shrink-0 overflow-x-auto border-b border-[var(--app-border)] bg-[var(--app-panel-bg)]">
-        <button v-for="tab in tabs" :key="tab.path" class="group flex min-w-28 max-w-52 shrink-0 items-center gap-2 border-r border-[var(--app-border)] px-3 text-xs" :class="activePath === tab.path ? 'bg-[var(--app-main-bg)] text-[var(--app-fg)]' : 'text-[var(--app-muted)] hover:bg-[var(--app-hover-soft)]'" :title="tab.path" @click="activePath = tab.path">
-          <UIcon name="i-lucide-file-code-2" class="size-3.5 shrink-0" /><span class="min-w-0 flex-1 truncate text-left">{{ tab.entry.name }}</span>
-          <span v-if="dirty(tab)" class="size-1.5 shrink-0 rounded-full bg-primary" />
-          <UIcon name="i-lucide-x" class="size-3.5 shrink-0 opacity-0 group-hover:opacity-100" @click.stop="closeTab(tab)" />
-        </button>
-      </div>
+      <WorkspaceSubTabStrip
+        :tabs="subTabs"
+        :active-id="activePath"
+        @select="activePath = $event"
+        @close="(id) => { const tab = tabs.find((item) => item.path === id); if (tab) closeTab(tab); }"
+      />
       <template v-if="activeTab">
-        <header class="flex h-9 shrink-0 items-center justify-between border-b border-[var(--app-border)] bg-[var(--app-panel-bg)] px-3">
+        <header class="flex h-9 shrink-0 items-center justify-between border-b border-[var(--workspace-surface-sub-border)] bg-[var(--workspace-surface-sub-header)] px-3">
           <span class="truncate font-ui-mono text-[10px] text-[var(--app-muted)]">{{ activeTab.path }}</span>
           <UButton v-if="activeTab.kind === 'text'" icon="i-lucide-save" size="xs" color="primary" variant="soft" :disabled="!dirty(activeTab)" :loading="activeTab.saving" @click="save()">
             保存
@@ -470,7 +500,7 @@ onUnmounted(() => tabs.value.forEach(revokePreview));
             <UIcon :name="activeTab.error ? 'i-lucide-circle-alert' : 'i-lucide-file-warning'" class="size-10" /><span>{{ activeTab.error || "该文件暂不支持在线预览或编辑" }}</span>
           </div>
         </div>
-        <footer class="flex h-6 shrink-0 items-center justify-between border-t border-[var(--app-border)] bg-[var(--app-panel-bg)] px-3 text-[10px] text-[var(--app-muted)]">
+        <footer class="flex h-6 shrink-0 items-center justify-between border-t border-[var(--workspace-surface-sub-border)] bg-[var(--workspace-surface-sub-header)] px-3 text-[10px] text-[var(--app-muted)]">
           <span>{{ activeTab.path }}</span><span>{{ activeTab.kind === "text" ? `${activeTab.content.length} chars · Ctrl/Cmd+S 保存` : "SFTP" }}</span>
         </footer>
       </template>