@orbit-work/ui 0.1.0

package/src/components/domain/browser/WebPreviewNav/WebPreviewNav.stories.tsx

@@ -0,0 +1,462 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { WebPreviewNav, type WebPreviewTab } from "./index"
+
+const meta = {
+  title: "Preview/WebPreviewNav",
+  component: WebPreviewNav,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof WebPreviewNav>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * 本地字母兜底 favicon（16 方 · 中性灰底 ＋ 白字母，内联 data URI）。
+ * 原来 story 的 favicon 全是公网外链（github.com/favicon.ico 一类）：离线与 CI 下取不到，
+ * <img> 渲成空盒，而 placeholder 分支又因为 tab.favicon 非空不触发，图标位就空着；
+ * 取到的（GitHub 黑标）在暗档底上又看不见。中性灰双档都读得出，且不出网。
+ */
+const letterFavicon = (letter: string) =>
+  `data:image/svg+xml;utf8,${encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="16" height="16" rx="4" fill="#8A8D93"/><text x="8" y="11.6" font-family="system-ui,sans-serif" font-size="10" font-weight="600" fill="#FFFFFF" text-anchor="middle">${letter}</text></svg>`,
+  )}`
+
+const mockTabs: WebPreviewTab[] = [
+  { id: "1", kind: "web", title: "GitHub", url: "https://github.com", favicon: letterFavicon("G") },
+  { id: "2", kind: "web", title: "Google", url: "https://google.com", favicon: letterFavicon("G") },
+  { id: "3", kind: "terminal", title: "bash", path: "/Users/zhangying" },
+  { id: "4", kind: "files", title: "src", path: "/Users/zhangying/projects/src" },
+]
+
+export const Default: Story = {
+  render: () => {
+    const [tabs, setTabs] = useState<WebPreviewTab[]>(mockTabs)
+    const [activeTabId, setActiveTabId] = useState("1")
+    const [isWide, setIsWide] = useState(false)
+
+    return (
+      <WebPreviewNav
+        tabs={tabs}
+        activeTabId={activeTabId}
+        isWide={isWide}
+        onSwitchTab={setActiveTabId}
+        onCloseTab={(id) => setTabs(tabs.filter((t) => t.id !== id))}
+        onCloseOtherTabs={(id) => setTabs(tabs.filter((t) => t.id === id))}
+        onAddBrowser={() => {
+          const newTab: WebPreviewTab = {
+            id: String(Date.now()),
+            kind: "web",
+            title: "新标签页",
+            url: "about:blank",
+          }
+          setTabs([...tabs, newTab])
+          setActiveTabId(newTab.id)
+        }}
+        onAddTerminal={() => {
+          const newTab: WebPreviewTab = {
+            id: String(Date.now()),
+            kind: "terminal",
+            title: "bash",
+            path: "/Users/zhangying",
+          }
+          setTabs([...tabs, newTab])
+          setActiveTabId(newTab.id)
+        }}
+        onAddFiles={() => {
+          const newTab: WebPreviewTab = {
+            id: String(Date.now()),
+            kind: "files",
+            title: "files",
+            path: "/Users/zhangying",
+          }
+          setTabs([...tabs, newTab])
+          setActiveTabId(newTab.id)
+        }}
+        onToggleWide={() => setIsWide(!isWide)}
+        onToggleCollapsed={() => console.log("toggle collapsed")}
+      />
+    )
+  },
+}
+
+export const SingleTab: Story = {
+  render: () => {
+    const [tabs, setTabs] = useState<WebPreviewTab[]>([
+      { id: "1", kind: "web", title: "GitHub", url: "https://github.com", favicon: letterFavicon("G") },
+    ])
+    const [activeTabId, setActiveTabId] = useState("1")
+    const [isWide, setIsWide] = useState(false)
+
+    return (
+      <WebPreviewNav
+        tabs={tabs}
+        activeTabId={activeTabId}
+        isWide={isWide}
+        onSwitchTab={setActiveTabId}
+        onCloseTab={(id) => setTabs(tabs.filter((t) => t.id !== id))}
+        onCloseOtherTabs={(id) => setTabs(tabs.filter((t) => t.id === id))}
+        onAddBrowser={() => {
+          const newTab: WebPreviewTab = {
+            id: String(Date.now()),
+            kind: "web",
+            title: "新标签页",
+            url: "about:blank",
+          }
+          setTabs([...tabs, newTab])
+          setActiveTabId(newTab.id)
+        }}
+        onAddTerminal={() => {
+          const newTab: WebPreviewTab = {
+            id: String(Date.now()),
+            kind: "terminal",
+            title: "bash",
+            path: "/Users/zhangying",
+          }
+          setTabs([...tabs, newTab])
+          setActiveTabId(newTab.id)
+        }}
+        onAddFiles={() => {
+          const newTab: WebPreviewTab = {
+            id: String(Date.now()),
+            kind: "files",
+            title: "files",
+            path: "/Users/zhangying",
+          }
+          setTabs([...tabs, newTab])
+          setActiveTabId(newTab.id)
+        }}
+        onToggleWide={() => setIsWide(!isWide)}
+        onToggleCollapsed={() => console.log("toggle collapsed")}
+      />
+    )
+  },
+}
+
+export const ManyTabs: Story = {
+  render: () => {
+    const [tabs, setTabs] = useState<WebPreviewTab[]>([
+      { id: "1", kind: "web", title: "GitHub", url: "https://github.com", favicon: letterFavicon("G") },
+      {
+        id: "2",
+        kind: "web",
+        title: "Google",
+        url: "https://google.com",
+        favicon: letterFavicon("G"),
+      },
+      {
+        id: "3",
+        kind: "web",
+        title: "Stack Overflow",
+        url: "https://stackoverflow.com",
+        favicon: letterFavicon("S"),
+      },
+      { id: "4", kind: "terminal", title: "bash", path: "/Users/zhangying" },
+      { id: "5", kind: "terminal", title: "zsh", path: "/Users/zhangying/projects" },
+      { id: "6", kind: "files", title: "src", path: "/Users/zhangying/projects/src" },
+      {
+        id: "7",
+        kind: "web",
+        title: "MDN Web Docs",
+        url: "https://developer.mozilla.org",
+        favicon: letterFavicon("M"),
+      },
+      {
+        id: "8",
+        kind: "web",
+        title: "TypeScript Documentation",
+        url: "https://typescriptlang.org",
+        favicon: letterFavicon("T"),
+      },
+    ])
+    const [activeTabId, setActiveTabId] = useState("1")
+    const [isWide, setIsWide] = useState(false)
+
+    return (
+      <WebPreviewNav
+        tabs={tabs}
+        activeTabId={activeTabId}
+        isWide={isWide}
+        onSwitchTab={setActiveTabId}
+        onCloseTab={(id) => setTabs(tabs.filter((t) => t.id !== id))}
+        onCloseOtherTabs={(id) => setTabs(tabs.filter((t) => t.id === id))}
+        onAddBrowser={() => {
+          const newTab: WebPreviewTab = {
+            id: String(Date.now()),
+            kind: "web",
+            title: "新标签页",
+            url: "about:blank",
+          }
+          setTabs([...tabs, newTab])
+          setActiveTabId(newTab.id)
+        }}
+        onAddTerminal={() => {
+          const newTab: WebPreviewTab = {
+            id: String(Date.now()),
+            kind: "terminal",
+            title: "bash",
+            path: "/Users/zhangying",
+          }
+          setTabs([...tabs, newTab])
+          setActiveTabId(newTab.id)
+        }}
+        onAddFiles={() => {
+          const newTab: WebPreviewTab = {
+            id: String(Date.now()),
+            kind: "files",
+            title: "files",
+            path: "/Users/zhangying",
+          }
+          setTabs([...tabs, newTab])
+          setActiveTabId(newTab.id)
+        }}
+        onToggleWide={() => setIsWide(!isWide)}
+        onToggleCollapsed={() => console.log("toggle collapsed")}
+      />
+    )
+  },
+}
+
+export const WideMode: Story = {
+  render: () => {
+    const [tabs] = useState<WebPreviewTab[]>(mockTabs)
+    const [activeTabId, setActiveTabId] = useState("1")
+    const [isWide, setIsWide] = useState(true)
+
+    return (
+      <WebPreviewNav
+        tabs={tabs}
+        activeTabId={activeTabId}
+        isWide={isWide}
+        onSwitchTab={setActiveTabId}
+        onCloseTab={() => console.log("close")}
+        onCloseOtherTabs={() => console.log("close others")}
+        onAddBrowser={() => console.log("add browser")}
+        onAddTerminal={() => console.log("add terminal")}
+        onAddFiles={() => console.log("add files")}
+        onToggleWide={() => setIsWide(!isWide)}
+        onToggleCollapsed={() => console.log("toggle collapsed")}
+      />
+    )
+  },
+}
+
+export const MixedTabKinds: Story = {
+  render: () => {
+    const [tabs, setTabs] = useState<WebPreviewTab[]>([
+      { id: "1", kind: "web", title: "Documentation", url: "https://docs.example.com" },
+      { id: "2", kind: "terminal", title: "npm run dev", path: "/Users/zhangying/projects/app" },
+      { id: "3", kind: "files", title: "components", path: "/Users/zhangying/projects/app/src/components" },
+      { id: "4", kind: "subagent", title: "Code Review Agent", path: "agent://review-123" },
+    ])
+    const [activeTabId, setActiveTabId] = useState("2")
+    const [isWide, setIsWide] = useState(false)
+
+    return (
+      <WebPreviewNav
+        tabs={tabs}
+        activeTabId={activeTabId}
+        isWide={isWide}
+        onSwitchTab={setActiveTabId}
+        onCloseTab={(id) => setTabs(tabs.filter((t) => t.id !== id))}
+        onCloseOtherTabs={(id) => setTabs(tabs.filter((t) => t.id === id))}
+        onAddBrowser={() => console.log("add browser")}
+        onAddTerminal={() => console.log("add terminal")}
+        onAddFiles={() => console.log("add files")}
+        onToggleWide={() => setIsWide(!isWide)}
+        onToggleCollapsed={() => console.log("toggle collapsed")}
+      />
+    )
+  },
+}
+
+/**
+ * 标签右键菜单 —— 弹层基座 `.cpop` 在 browser 域的消费点（DS 2.0 P6-7）。
+ *
+ * 在任一标签上点右键即可打开。核对点：面走 `--ow-popover-bg`（比地面高一档）、
+ * 影走 `--ow-shadow-pop`、始终保留 1px `--ow-border`、圆角菜单档；菜单行 hover
+ * 是 `--ow-hover-pop`、press 是 `--ow-press-pop`（坐在弹层面上的行不用地面那一套）；
+ * 「关闭其他标签页」在只剩一个标签时是 disabled，走 `--ow-disabled-text` 而不是
+ * 统一透明度。两个主题都要看。
+ */
+export const TabContextMenu: Story = {
+  render: () => {
+    const [tabs, setTabs] = useState<WebPreviewTab[]>(mockTabs)
+    const [activeTabId, setActiveTabId] = useState("1")
+
+    return (
+      <div>
+        <p style={{ margin: "0 0 12px", color: "var(--ow-text-2)", font: "400 13px/1.5 var(--ow-font-sans)" }}>
+          在下面任一标签上点右键，打开标签操作菜单。
+        </p>
+        <WebPreviewNav
+          tabs={tabs}
+          activeTabId={activeTabId}
+          isWide={false}
+          onSwitchTab={setActiveTabId}
+          onCloseTab={(id) => setTabs(tabs.filter((t) => t.id !== id))}
+          onCloseOtherTabs={(id) => setTabs(tabs.filter((t) => t.id === id))}
+          onAddBrowser={() => console.log("add browser")}
+          onAddTerminal={() => console.log("add terminal")}
+          onAddFiles={() => console.log("add files")}
+          onToggleWide={() => console.log("toggle wide")}
+          onToggleCollapsed={() => console.log("toggle collapsed")}
+        />
+      </div>
+    )
+  },
+}
+
+/** 只剩一个标签：右键菜单里「关闭其他标签页」是 disabled 态（§6 逐 token，禁统一透明度）。 */
+export const TabContextMenuSingleTab: Story = {
+  render: () => {
+    const [tabs, setTabs] = useState<WebPreviewTab[]>([mockTabs[0]])
+    const [activeTabId, setActiveTabId] = useState("1")
+
+    return (
+      <div>
+        <p style={{ margin: "0 0 12px", color: "var(--ow-text-2)", font: "400 13px/1.5 var(--ow-font-sans)" }}>
+          在标签上点右键：「关闭其他标签页」应为禁用态。
+        </p>
+        <WebPreviewNav
+          tabs={tabs}
+          activeTabId={activeTabId}
+          isWide={false}
+          onSwitchTab={setActiveTabId}
+          onCloseTab={(id) => setTabs(tabs.filter((t) => t.id !== id))}
+          onCloseOtherTabs={(id) => setTabs(tabs.filter((t) => t.id === id))}
+          onAddBrowser={() => console.log("add browser")}
+          onAddTerminal={() => console.log("add terminal")}
+          onAddFiles={() => console.log("add files")}
+          onToggleWide={() => console.log("toggle wide")}
+          onToggleCollapsed={() => console.log("toggle collapsed")}
+        />
+      </div>
+    )
+  },
+}
+
+/**
+ * **右栏 panel 档**（A8-B2 · 原型模板 2251–2271）——只给会话侧开栏用的第二形制。
+ *
+ * 核对点：条 36 高、坐地面 `--ow-bg`，条底 1px 基线；页签是 26 高圆角胶囊，
+ * **选中＝底色换成面板体同色 `--ow-surface` ＋500 字重**（与下面那块面连成一片，
+ * 不再画底线）；页签上没有 favicon / 类别图标位，只有标题 ＋ 16 方常显关闭钮；
+ * `+` 钮 24 方、紧跟最后一个页签坐在滚动行内，点了**直接开一个网页页签**（不弹菜单）；
+ * 右端「最大化 / 还原」与「收起右栏」两颗 26 方。两个主题都要看：选中胶囊与面板体
+ * 在暗档也必须是同一色，看不出接缝才对。
+ *
+ * 荧黄：0 处（R3 中性件）。
+ */
+export const PanelDensity: Story = {
+  name: "右栏 panel 档",
+  render: () => {
+    const [tabs, setTabs] = useState<WebPreviewTab[]>([
+      { id: "1", kind: "web", title: "orbitwork.pages.dev", url: "https://orbitwork.pages.dev" },
+      { id: "2", kind: "files", title: "文件" },
+      { id: "3", kind: "terminal", title: "终端" },
+    ])
+    const [activeTabId, setActiveTabId] = useState("1")
+    const [isWide, setIsWide] = useState(false)
+
+    return (
+      // 455 ＝ 1440 窗、240 侧栏下 38% 档的实测栏宽；下面那块 --ow-surface 是面板体，
+      // 用来看「选中胶囊与体同色」这件事。
+      <div
+        style={{
+          width: 455,
+          border: "1px solid var(--ow-border)",
+          background: "var(--ow-surface)",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <WebPreviewNav
+          density="panel"
+          tabs={tabs}
+          activeTabId={activeTabId}
+          isWide={isWide}
+          onSwitchTab={setActiveTabId}
+          onCloseTab={(id) => setTabs(tabs.filter((t) => t.id !== id))}
+          onCloseOtherTabs={(id) => setTabs(tabs.filter((t) => t.id === id))}
+          onAddBrowser={() => {
+            const newTab: WebPreviewTab = { id: String(Date.now()), kind: "web", title: "新标签页", url: "about:blank" }
+            setTabs([...tabs, newTab])
+            setActiveTabId(newTab.id)
+          }}
+          onAddTerminal={() => {}}
+          onAddFiles={() => {}}
+          onToggleWide={() => setIsWide(!isWide)}
+          onToggleCollapsed={() => {}}
+        />
+        <div
+          style={{
+            height: 120,
+            display: "grid",
+            placeItems: "center",
+            color: "var(--ow-text-3)",
+            fontSize: "var(--ow-fs-caption)",
+          }}
+        >
+          面板体（--ow-surface）
+        </div>
+      </div>
+    )
+  },
+}
+
+/** panel 档 · 页签多到要横向滚：胶囊不压缩（flex:0 0 auto），滚动行自己滚，`+` 钮跟在最后一个页签后面。 */
+export const PanelDensityManyTabs: Story = {
+  name: "右栏 panel 档 · 多页签",
+  render: () => {
+    const [tabs, setTabs] = useState<WebPreviewTab[]>([
+      { id: "1", kind: "web", title: "orbitwork.pages.dev", url: "https://orbitwork.pages.dev" },
+      { id: "2", kind: "web", title: "设计系统规范", url: "https://orbit.work/docs" },
+      { id: "3", kind: "files", title: "文件" },
+      { id: "4", kind: "terminal", title: "终端" },
+      { id: "5", kind: "subagent", title: "子任务 · 梳理思路" },
+    ])
+    const [activeTabId, setActiveTabId] = useState("2")
+
+    return (
+      <div
+        style={{
+          width: 455,
+          border: "1px solid var(--ow-border)",
+          background: "var(--ow-surface)",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <WebPreviewNav
+          density="panel"
+          tabs={tabs}
+          activeTabId={activeTabId}
+          isWide
+          onSwitchTab={setActiveTabId}
+          onCloseTab={(id) => setTabs(tabs.filter((t) => t.id !== id))}
+          onCloseOtherTabs={(id) => setTabs(tabs.filter((t) => t.id === id))}
+          onAddBrowser={() => {}}
+          onAddTerminal={() => {}}
+          onAddFiles={() => {}}
+          onToggleWide={() => {}}
+          onToggleCollapsed={() => {}}
+        />
+        <div
+          style={{
+            height: 120,
+            display: "grid",
+            placeItems: "center",
+            color: "var(--ow-text-3)",
+            fontSize: "var(--ow-fs-caption)",
+          }}
+        >
+          面板体（--ow-surface）
+        </div>
+      </div>
+    )
+  },
+}