@orbit-work/ui 0.1.2-preview.0 → 0.1.3

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

@@ -1,537 +0,0 @@
-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={() => {}}
-    />
-  ),
-}