@orbit-work/ui 0.1.0

package/src/components/domain/desktop/DesktopCatalogView/DesktopCatalogView.stories.tsx

@@ -0,0 +1,537 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Layers, Skill, Terminal } from "../../../composite/Icons"
+import { StatusTag } from "../../../composite/StatusTag"
+import { Button } from "../../../primitives"
+import { SkillAvatarView, skillGlyph } from "../../skills/SkillAvatarView"
+import {
+  DesktopAgentCardView,
+  DesktopCatalogCardView,
+  DesktopCatalogDetailShell,
+  DesktopCatalogGridView,
+  DesktopCatalogToolbarView,
+  DesktopConnectorCardView,
+  DesktopDetailChips,
+  DesktopDetailList,
+  DesktopDetailRows,
+  DesktopDetailSection,
+  DesktopDetailText,
+} from "./index"
+
+/**
+ * DesktopCatalogView —— 发现域公共壳（产品面隐性枢纽，一壳覆盖智能体/技能/连接器五件）。
+ *
+ * 语法定稿：卡网格（不是 DataTable）· 空/载/错三态 · FilterBar 工具条 · 读数 mono + tabular-nums。
+ * A4-B2 起卡是**竖排两段**（原型 1666–1684）：上段 40 字形 ＋ 名称行（名 ＋ 至多两枚
+ * StatusTag）＋ 两行描述（min-height 3em 保同排等高），下段卡脚＝一条 mono 元信息带
+ * （版本号在这里领头）＋ 28 高动作钮。R3 中性件，无信标元素。
+ */
+const meta = {
+  title: "Desktop/DesktopCatalogView",
+  component: DesktopCatalogCardView,
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof DesktopCatalogCardView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const avatar = (id: string, name: string) => <SkillAvatarView className="gly" glyph={skillGlyph(id, name)} />
+
+/** 未安装：动作钮安静（透明面 ＋ 1px 边）；卡 hover 只换边色，不换底。 */
+export const CatalogCard: Story = {
+  args: {
+    avatar: avatar("code-helper", "代码助手"),
+    name: "代码助手",
+    version: "1.2.0",
+    description: "帮你写代码、看改动、顺手把明显的问题挑出来",
+    metaItems: [
+      { key: "cat", icon: <Skill />, label: "开发工具" },
+      { key: "uses", label: "使用", count: "3.2k" },
+    ],
+    actionLabel: "安装",
+    onAction: () => {},
+    onOpen: () => {},
+  },
+}
+
+/** 已安装：info tint 面 + on-tint 文字。 */
+export const CatalogCardInstalled: Story = {
+  args: {
+    ...CatalogCard.args,
+    avatar: avatar("data-analysis", "数据分析"),
+    name: "数据分析",
+    version: "2.0.1",
+    description: "上传表格，直接出图和结论",
+    actionLabel: "已安装",
+    actionState: "installed",
+    actionVariant: "unstyled",
+  },
+}
+
+/** 有更新：状态签 + 更新态动作钮；R1 双编码，文字本身已把状态说清。 */
+export const CatalogCardUpdate: Story = {
+  args: {
+    ...CatalogCard.args,
+    avatar: avatar("design-helper", "设计助手"),
+    name: "设计助手",
+    version: "1.5.0",
+    updateAvailable: true,
+    description: "改稿、对齐、配色，顺着你的稿子往下做",
+    actionLabel: "更新",
+    actionState: "update",
+    actionVariant: "unstyled",
+  },
+}
+
+/** 错误 + 禁用：错误是人话一句；禁用逐 token，不用统一透明度。 */
+export const CatalogCardError: Story = {
+  args: {
+    ...CatalogCard.args,
+    avatar: avatar("system-tools", "系统工具"),
+    name: "系统工具",
+    version: "0.9.0",
+    description: "改系统配置的那一类操作",
+    error: "这个技能要系统权限，先在设置里授权",
+    actionLabel: "安装",
+    actionDisabled: true,
+  },
+}
+
+/** 智能体卡：名称行里的「专家团」归属签 + 卡脚三项计数（整条带 mono）。 */
+export const AgentCard: StoryObj<typeof DesktopAgentCardView> = {
+  render: () => (
+    <DesktopAgentCardView
+      avatar={<SkillAvatarView className="gly" glyph={{ label: "研", tone: "agent" }} />}
+      name="调研智能体"
+      version="2.1.0"
+      description="按你给的题目找资料、去重、写成一份能读的简报"
+      team
+      metaItems={[
+        { key: "skills", icon: <Skill />, label: "技能", count: 4 },
+        { key: "mcps", icon: <Layers />, label: "连接器", count: 2 },
+        { key: "commands", icon: <Terminal />, label: "命令", count: 7 },
+      ]}
+      actionLabel="使用"
+      actionVariant="unstyled"
+      onAction={() => {}}
+      onOpen={() => {}}
+    />
+  ),
+}
+
+/**
+ * 状态签一览（A4-B3）：三套写法收成一件 `composite/StatusTag`——20 高 · --ow-radius-xs ·
+ * 11/500 · tint 底 + on-tint 字，卡与详情共用同一份词表。R2·T2/Q3 撤掉了 754d2b4 的去重条件
+ * （`updateAvailable && actionState !== "update"`）：原型两张渲染图里「有更新」签与「更新」钮
+ * 是并存的——签说的是现状，钮说的是能做什么。要单签的调用方只传 `status`，不要再同时传
+ * `updateAvailable`（`SkillCardView` 就是只走 `status` 那一条路）。
+ */
+export const CardStatusTags: Story = {
+  render: () => (
+    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))", gap: 14 }}>
+      <DesktopCatalogCardView
+        avatar={avatar("data-analysis", "数据分析")}
+        name="数据分析"
+        version="2.0.1"
+        status="installed"
+        description="上传表格，直接出图和结论"
+        metaItems={[{ key: "cat", icon: <Skill />, label: "开发工具" }]}
+        actionLabel="使用"
+        actionState="installed"
+        actionVariant="unstyled"
+        onAction={() => {}}
+        onOpen={() => {}}
+      />
+      <DesktopCatalogCardView
+        avatar={avatar("design-helper", "设计助手")}
+        name="设计助手"
+        version="1.5.0"
+        updateAvailable
+        description="改稿、对齐、配色，顺着你的稿子往下做"
+        metaItems={[{ key: "cat", icon: <Skill />, label: "设计" }]}
+        actionLabel="使用"
+        actionState="installed"
+        actionVariant="unstyled"
+        onAction={() => {}}
+        onOpen={() => {}}
+      />
+      <DesktopCatalogCardView
+        avatar={avatar("github", "GitHub")}
+        name="GitHub"
+        status="connected"
+        description="读仓库、提 PR、看 issue"
+        metaItems={[{ key: "cat", icon: <Terminal />, label: "stdio" }]}
+        actionLabel="使用"
+        actionState="installed"
+        actionVariant="unstyled"
+        onAction={() => {}}
+        onOpen={() => {}}
+      />
+      <DesktopCatalogCardView
+        avatar={avatar("notion", "Notion")}
+        name="Notion"
+        status="needsAuth"
+        description="把会话里的结论写回你的知识库"
+        metaItems={[{ key: "cat", icon: <Terminal />, label: "sse" }]}
+        actionLabel="去授权"
+        actionVariant="unstyled"
+        onAction={() => {}}
+        onOpen={() => {}}
+      />
+      <DesktopCatalogCardView
+        avatar={avatar("code-helper", "代码助手")}
+        name="代码助手"
+        status="installing"
+        description="帮你写代码、看改动、顺手把明显的问题挑出来"
+        metaItems={[{ key: "cat", icon: <Skill />, label: "开发工具" }]}
+        actionLabel="安装中…"
+        actionDisabled
+        actionVariant="unstyled"
+        onAction={() => {}}
+        onOpen={() => {}}
+      />
+      <DesktopAgentCardView
+        avatar={<SkillAvatarView className="gly" glyph={{ label: "研", tone: "agent" }} />}
+        name="调研专家团"
+        version="2.1.0"
+        team
+        status="installed"
+        description="按你给的题目找资料、去重、写成一份能读的简报"
+        metaItems={[
+          { key: "skills", icon: <Skill />, label: "技能", count: 4 },
+          { key: "mcps", icon: <Layers />, label: "连接器", count: 2 },
+        ]}
+        actionLabel="使用团队"
+        actionState="installed"
+        actionVariant="unstyled"
+        onAction={() => {}}
+        onOpen={() => {}}
+      />
+    </div>
+  ),
+}
+
+/**
+ * 竖排卡网格（A4-B2 · 原型模板 1650–1730）：真网格里看三件事——
+ * ① 列宽 minmax(340px,1fr)，1440 下四列而不是挤到五列；
+ * ② 描述一行/两行的卡**同排等高**（靠 .d 的 min-height:3em，不靠拉伸）；
+ * ③ 卡脚 mono 元信息带（版本号领头）与 28 高动作钮同处一行、钉在卡底。
+ */
+export const CardGridVertical: StoryObj<typeof DesktopCatalogGridView> = {
+  render: () => (
+    <div style={{ height: 560, display: "flex", background: "var(--ow-bg)" }}>
+      <DesktopCatalogGridView>
+        <DesktopCatalogCardView
+          key="code-helper"
+          avatar={avatar("code-helper", "代码助手")}
+          name="代码助手"
+          version="1.2.0"
+          status="installed"
+          description="帮你写代码、看改动、顺手把明显的问题挑出来"
+          metaItems={[{ key: "updated", label: "3 天前" }]}
+          actionLabel="使用"
+          actionState="installed"
+          actionVariant="unstyled"
+          onAction={() => {}}
+          onOpen={() => {}}
+        />
+        <DesktopCatalogCardView
+          key="data-analysis"
+          avatar={avatar("data-analysis", "数据分析")}
+          name="数据分析"
+          version="2.0.1"
+          description="上传表格，直接出图和结论"
+          metaItems={[{ key: "updated", label: "上周" }]}
+          actionLabel="安装"
+          onAction={() => {}}
+          onOpen={() => {}}
+        />
+        <DesktopAgentCardView
+          key="research-team"
+          avatar={<SkillAvatarView className="gly" glyph={{ label: "研", tone: "agent" }} />}
+          name="调研专家团"
+          version="2.1.0"
+          team
+          status="installed"
+          description="按你给的题目找资料、去重、写成一份能读的简报，长引用都带回原链接"
+          metaItems={[
+            { key: "skills", label: "技能", count: 3 },
+            { key: "mcps", label: "连接器", count: 2 },
+            { key: "commands", label: "命令", count: 2 },
+          ]}
+          actionLabel="使用团队"
+          actionState="installed"
+          onAction={() => {}}
+          onOpen={() => {}}
+        />
+        <DesktopCatalogCardView
+          key="github"
+          avatar={avatar("github", "GitHub")}
+          name="GitHub"
+          status="connected"
+          description="读仓库、提 PR、看 issue"
+          metaItems={[
+            { key: "kind", label: "stdio" },
+            { key: "tools", label: "个工具", count: 4 },
+          ]}
+          actionLabel="配置"
+          actionVariant="unstyled"
+          onAction={() => {}}
+          onOpen={() => {}}
+        />
+        <DesktopCatalogCardView
+          key="design-helper"
+          avatar={avatar("design-helper", "设计助手")}
+          name="设计助手"
+          version="1.5.0"
+          updateAvailable
+          description="改稿、对齐、配色，顺着你的稿子往下做；也能把一版设计说明写成可读的交付文档"
+          metaItems={[{ key: "updated", label: "1 天前" }]}
+          actionLabel="使用"
+          actionState="installed"
+          actionVariant="unstyled"
+          onAction={() => {}}
+          onOpen={() => {}}
+        />
+        <DesktopCatalogCardView
+          key="notion"
+          avatar={avatar("notion", "Notion")}
+          name="Notion"
+          status="needsAuth"
+          description="把会话里的结论写回你的知识库"
+          metaItems={[
+            { key: "kind", label: "sse" },
+            { key: "tools", label: "个工具", count: 9 },
+          ]}
+          actionLabel="去授权"
+          actionVariant="unstyled"
+          onAction={() => {}}
+          onOpen={() => {}}
+        />
+      </DesktopCatalogGridView>
+    </div>
+  ),
+}
+
+/** 工具条：分类直角 Tag → 搜索 → 排序，右侧动作区。R3 中性件。 */
+export const Toolbar: StoryObj<typeof DesktopCatalogToolbarView> = {
+  render: () => {
+    const [active, setActive] = useState("all")
+    const [query, setQuery] = useState("")
+    const [sort, setSort] = useState("hot")
+    return (
+      <DesktopCatalogToolbarView
+        categories={[
+          { key: "all", label: "全部", active: active === "all" },
+          { key: "dev", label: "开发", active: active === "dev" },
+          { key: "data", label: "数据", active: active === "data" },
+          { key: "design", label: "设计", active: active === "design" },
+        ]}
+        onCategoryToggle={setActive}
+        search={{ value: query, onChange: setQuery, placeholder: "搜索技能" }}
+        sort={{
+          value: sort,
+          onChange: setSort,
+          options: [
+            { value: "hot", label: "最热" },
+            { value: "new", label: "最新" },
+          ],
+        }}
+        actions={<Button variant="primary">导入技能</Button>}
+      />
+    )
+  },
+}
+
+const gridCards = [
+  ["code-helper", "代码助手", "1.2.0", "帮你写代码、看改动、顺手把明显的问题挑出来"],
+  ["data-analysis", "数据分析", "2.0.1", "上传表格，直接出图和结论"],
+  ["design-helper", "设计助手", "1.5.0", "改稿、对齐、配色，顺着你的稿子往下做"],
+  ["hot-tracking", "热点追踪", "0.4.2", "盯最新信源，挑出值得写的那几条"],
+]
+
+/** 网格常态。 */
+export const Grid: StoryObj<typeof DesktopCatalogGridView> = {
+  render: () => (
+    <DesktopCatalogGridView>
+      {gridCards.map(([id, name, version, desc]) => (
+        <DesktopCatalogCardView
+          key={id}
+          avatar={avatar(id!, name!)}
+          name={name}
+          version={version}
+          description={desc}
+          metaItems={[{ key: "uses", label: "使用", count: "1.2k" }]}
+          actionLabel="安装"
+          onAction={() => {}}
+          onOpen={() => {}}
+        />
+      ))}
+    </DesktopCatalogGridView>
+  ),
+}
+
+/** 载：呼吸骨架卡（禁 shimmer）。 */
+export const GridLoading: StoryObj<typeof DesktopCatalogGridView> = {
+  render: () => <DesktopCatalogGridView loading loadingCount={4} />,
+}
+
+/** 空：EmptyState 原语——信标 mono 母题 + 一句 text-2 + 可选主按钮，禁插画禁 emoji。 */
+export const GridEmpty: StoryObj<typeof DesktopCatalogGridView> = {
+  render: () => (
+    <DesktopCatalogGridView
+      emptyMessage="没有匹配的技能，换个词或清掉筛选试试"
+      emptyActionLabel="清空筛选"
+      onEmptyAction={() => {}}
+    />
+  ),
+}
+
+/** 错：人话一句 + mono 技术详情（≤2 行，可折叠）+ 重试钮。 */
+export const GridError: StoryObj<typeof DesktopCatalogGridView> = {
+  render: () => (
+    <DesktopCatalogGridView
+      error="没能拉到技能列表，网络或服务暂时不通"
+      errorDetail={"GET /v1/skills → 503\nrequest-id: 7f2c9a41-3b18-4e0d-9a55-6c1e0b2d8f34"}
+      onRetry={() => {}}
+    />
+  ),
+}
+
+/**
+ * 详情壳（A4-B4 抬级后，原型 2157–2192）：返回条 ＋ hero 是固定页头，hero ＝ 52 字形 →
+ * 「22px display 标题 ＋ 状态签」/ 一句描述 / mono 元信息行 → 右侧「一颗主钮 ＋ ⋯」；
+ * 正文收在 720 列宽里，节间 22。
+ */
+export const DetailShell: StoryObj<typeof DesktopCatalogDetailShell> = {
+  render: () => (
+    <div style={{ height: "100vh", background: "var(--ow-bg)" }}>
+      <DesktopCatalogDetailShell
+        avatar={<SkillAvatarView className="g" glyph={skillGlyph("code-helper", "代码助手")} />}
+        name="代码助手"
+        author="Orbitwork Labs"
+        version="1.2.0"
+        updatedAt="3 天前"
+        kind="技能"
+        /* A4-B3：详情与卡共用同一枚状态签；详情不做卡的去重，状态签与主按钮同时在位。 */
+        status={<StatusTag status="installed" />}
+        summary="安装后可以在对话里直接叫它，帮你读改动、补测试、写提交说明。"
+        actions={
+          <div className="acts">
+            <Button variant="primary">使用</Button>
+          </div>
+        }
+        backLabel="返回插件 · 技能"
+        onBack={() => {}}
+      >
+        <DesktopDetailSection title="能力">
+          <DesktopDetailList
+            items={[
+              { id: "1", text: "读这次改动，挑出会出问题的地方" },
+              { id: "2", text: "按项目里已有的写法给建议，不硬套风格" },
+              { id: "3", text: "顺手把提交说明起个头" },
+            ]}
+          />
+        </DesktopDetailSection>
+        <DesktopDetailSection title="使用方式">
+          <DesktopDetailText>在对话里 @ 这个技能，或者直接敲 /review。</DesktopDetailText>
+        </DesktopDetailSection>
+        <DesktopDetailSection title="命令" count={3}>
+          <DesktopDetailChips
+            items={["/review", "/test", "/commit"].map((cmd) => ({ id: cmd, text: cmd, mono: true }))}
+          />
+        </DesktopDetailSection>
+      </DesktopCatalogDetailShell>
+    </div>
+  ),
+}
+
+/** 正文四体裁并排：段落 / 圆点列表 / 直角片 / 成员行表（原型 2196–2226）。 */
+export const DetailBodyGenres: StoryObj<typeof DesktopCatalogDetailShell> = {
+  render: () => (
+    <div style={{ height: "100vh", background: "var(--ow-bg)" }}>
+      <DesktopCatalogDetailShell
+        avatar={<SkillAvatarView className="g" glyph={skillGlyph("review-team", "评审团")} />}
+        name="评审团"
+        author="Orbitwork Labs"
+        version="2.0.1"
+        updatedAt="昨天"
+        kind="团队"
+        status={<StatusTag status="update" />}
+        summary="四个人一组读一次改动：架构、可读性、测试、发布风险各看一面。"
+        actions={
+          <div className="acts">
+            <Button variant="primary">使用团队</Button>
+          </div>
+        }
+        backLabel="返回插件 · 专家"
+        onBack={() => {}}
+      >
+        <DesktopDetailSection title="成员" count={3}>
+          <DesktopDetailRows
+            rows={[
+              { id: "1", name: "架构评审", role: "负责人", description: "看分层与依赖方向" },
+              { id: "2", name: "可读性评审", role: "成员", description: "命名、注释与函数长度" },
+              { id: "3", name: "发布评审", role: "成员", description: "回滚路径与灰度开关" },
+            ]}
+          />
+        </DesktopDetailSection>
+        <DesktopDetailSection title="技能" count={3}>
+          <DesktopDetailChips
+            items={[
+              { id: "1", text: "代码走查" },
+              { id: "2", text: "测试补全" },
+              { id: "3", text: "变更说明" },
+            ]}
+          />
+        </DesktopDetailSection>
+        <DesktopDetailSection title="限制">
+          <DesktopDetailText>一次只读一个仓库的改动；跨仓依赖需要自己贴上下文。</DesktopDetailText>
+        </DesktopDetailSection>
+      </DesktopCatalogDetailShell>
+    </div>
+  ),
+}
+
+/**
+ * 连接器卡（满配）：与技能/专家卡**同一个壳、同一套形制**——40 中性字形章、名称行至多
+ * 两枚签（归属签「我的」在状态签左边）、卡脚一条 mono 带、卡脚右下 28 高动作钮。
+ * 卡脚是「stdio · 4 个工具」（原型 4590 `metaOf`），连接器这一族**不带版本号**。
+ */
+export const ConnectorCard: StoryObj<typeof DesktopConnectorCardView> = {
+  render: () => (
+    <DesktopConnectorCardView
+      logo="F"
+      name="Filesystem"
+      description="读写本机目录，受授权模式与沙箱范围约束。"
+      status="connected"
+      mine
+      metaItems={[
+        { key: "transport", label: "stdio" },
+        { key: "tools", label: "个工具", count: 4 },
+      ]}
+      actionLabel="使用"
+      onAction={() => {}}
+      onOpen={() => {}}
+    />
+  ),
+}
+
+/** 待授权：状态签 warn 档 ＋ 动作钮「去授权」（原型 4597 `actOf` 的第三态）。 */
+export const ConnectorCardNeedsAuth: StoryObj<typeof DesktopConnectorCardView> = {
+  render: () => (
+    <DesktopConnectorCardView
+      logo="企"
+      name="企业微信"
+      description="接收私聊与群聊消息，并把结果推回会话。"
+      status="needsAuth"
+      metaItems={[
+        { key: "transport", label: "http" },
+        { key: "tools", label: "个工具", count: 3 },
+      ]}
+      actionLabel="去授权"
+      onAction={() => {}}
+      onOpen={() => {}}
+    />
+  ),
+}