@orbit-work/ui 0.1.0

package/src/components/domain/skills/SkillDetailPanelView/index.tsx

@@ -0,0 +1,115 @@
+import type { ReactNode } from "react"
+import { Button } from "../../../primitives"
+import { EmptyState } from "../../../primitives/EmptyState"
+import { InlineMessage } from "../../../primitives/InlineMessage"
+import { Spinner } from "../../../primitives/Spinner"
+import { DesktopCatalogDetailShell, DesktopDetailSection } from "../../desktop/DesktopCatalogView"
+
+/**
+ * SkillDetailPanelView —— 技能详情面板（DesktopCatalogView 详情壳的技能配方）。
+ *
+ * 导航、Hero、按钮区由 `DesktopCatalogDetailShell` 统一给；本件只排「简介 / 授权 /
+ * 详细说明」三节，并把「详细说明」这一节的 §6 容器三态定稿：
+ * 载＝<20px 小转子（1.5px 描边圆环 + 90° 缺口 · linear 0.9s · 色随所在文字）＋一句话；
+ * 空＝EmptyState 原语（信标 mono 母题 + 一句 text-2，禁插画禁 emoji）；
+ * 错＝InlineMessage error（人话一句 + mono 技术详情 ≤2 行 + 重试钮）。
+ * R3 中性件——不带信标元素、不占极。
+ */
+export interface SkillDetailPanelViewProps {
+  avatar: ReactNode
+  name: string
+  author?: string
+  version?: string
+  /** 更新时间（「3 天前」）：进 hero 的 mono 元信息行。 */
+  updatedAt?: ReactNode
+  /** 状态签：标题右边紧跟的那一枚（已安装 / 有更新 / 正在安装）。 */
+  status?: ReactNode
+  /** 归属签等附加标记，排在状态签之后。 */
+  badge?: ReactNode
+  brief?: string
+  authorization?: ReactNode
+  docContent?: ReactNode
+  loading: boolean
+  loadingText?: string
+  /** 说明加载失败时的人话一句；给了就顶掉空态 */
+  error?: ReactNode
+  /** 错误技术详情：mono ≤2 行 */
+  errorDetail?: string
+  onRetry?: () => void
+  emptyText?: string
+  backLabel: string
+  onBack: () => void
+  actions?: ReactNode
+}
+
+export function SkillDetailPanelView({
+  avatar,
+  name,
+  author,
+  version,
+  updatedAt,
+  status,
+  badge,
+  brief,
+  authorization,
+  docContent,
+  loading,
+  loadingText = "正在读取说明…",
+  error,
+  errorDetail,
+  onRetry,
+  emptyText = "暂无详细说明",
+  backLabel,
+  onBack,
+  actions,
+}: SkillDetailPanelViewProps) {
+  return (
+    <DesktopCatalogDetailShell
+      avatar={avatar}
+      name={name}
+      author={author}
+      version={version}
+      updatedAt={updatedAt}
+      kind="技能"
+      status={status}
+      badges={badge}
+      /* A4-B4：简介从正文第一节升到 hero 标题下的那一句（原型 2172）。原来它是正文里的
+         「简介」节，与页头的名字隔着一条分隔线——二级页的自我介绍不该排在正文里。 */
+      summary={brief}
+      actions={actions}
+      backLabel={backLabel}
+      onBack={onBack}
+    >
+      {authorization && <DesktopDetailSection title="授权">{authorization}</DesktopDetailSection>}
+      <DesktopDetailSection title="详细说明">
+        {loading ? (
+          <div className="skd__loading" role="status">
+            <Spinner size="md" />
+            <span>{loadingText}</span>
+          </div>
+        ) : error ? (
+          <InlineMessage
+            variant="error"
+            detail={errorDetail}
+            action={
+              onRetry && (
+                <Button variant="secondary" size="sm" onClick={onRetry}>
+                  重试
+                </Button>
+              )
+            }
+          >
+            {error}
+          </InlineMessage>
+        ) : docContent ? (
+          <div className="skd__doc">{docContent}</div>
+        ) : (
+          /* A5-B4：`markSize={32}` 这条逃生舱撤掉——文档区是详情页里的整栏内容位，
+              md 档的 40 就是给这种块内空态定的；单独调一个 32 只会让全库多一个「差不多
+              但不一样」的体量。左对齐仍由 `.skd__empty-state` 给（这块跟着正文走，不居中）。 */
+          <EmptyState className="skd__empty-state" message={emptyText} />
+        )}
+      </DesktopDetailSection>
+    </DesktopCatalogDetailShell>
+  )
+}

package/src/components/domain/skills/SkillDetailView/SkillDetailView.stories.tsx

@@ -0,0 +1,274 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Skill } from "../../../composite/Icons"
+import { SkillAvatarView, skillGlyph } from "../SkillAvatarView"
+import { SkillDetailView } from "./index"
+
+const meta = {
+  title: "Skills/SkillDetailView",
+  component: SkillDetailView,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SkillDetailView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultAvatar = <SkillAvatarView className="g" glyph={skillGlyph("code-review", "代码走查")} />
+
+const sampleDoc = `## 它能做什么
+
+- 读这次改动，挑出会出问题的地方
+- 按项目里已有的写法给建议，不硬套风格
+- 顺手把提交说明起个头
+
+## 怎么用
+
+在对话里 @ 这个技能，或者直接敲 \`/review\`。`
+
+export const NotInstalled: Story = {
+  args: {
+    avatar: defaultAvatar,
+    name: "代码走查",
+    author: "Orbitwork 官方",
+    version: "1.0.0",
+    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
+    docContent: sampleDoc,
+    loading: false,
+    backLabel: "返回插件 · 技能",
+    onBack: () => console.log("back"),
+    installed: false,
+    onInstall: () => console.log("install"),
+  },
+}
+
+export const Installed: Story = {
+  args: {
+    avatar: defaultAvatar,
+    name: "代码走查",
+    author: "Orbitwork 官方",
+    version: "1.0.0",
+    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
+    docContent: sampleDoc,
+    loading: false,
+    backLabel: "返回插件 · 技能",
+    onBack: () => console.log("back"),
+    installed: true,
+    onUse: () => console.log("use"),
+    onOpenDir: () => console.log("open dir"),
+    onUninstall: () => console.log("uninstall"),
+  },
+}
+
+export const Installing: Story = {
+  args: {
+    avatar: defaultAvatar,
+    name: "代码走查",
+    author: "Orbitwork 官方",
+    version: "1.0.0",
+    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
+    docContent: sampleDoc,
+    loading: false,
+    backLabel: "返回插件 · 技能",
+    onBack: () => console.log("back"),
+    installed: false,
+    installing: true,
+    onInstall: () => console.log("install"),
+  },
+}
+
+export const Outdated: Story = {
+  args: {
+    avatar: defaultAvatar,
+    name: "代码走查",
+    author: "Orbitwork 官方",
+    version: "1.0.0",
+    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
+    docContent: sampleDoc,
+    loading: false,
+    backLabel: "返回插件 · 技能",
+    onBack: () => console.log("back"),
+    installed: true,
+    outdated: true,
+    onUpdate: () => console.log("update"),
+    onUse: () => console.log("use"),
+    onOpenDir: () => console.log("open dir"),
+    onUninstall: () => console.log("uninstall"),
+  },
+}
+
+export const Updating: Story = {
+  args: {
+    avatar: defaultAvatar,
+    name: "代码走查",
+    author: "Orbitwork 官方",
+    version: "1.0.0",
+    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
+    docContent: sampleDoc,
+    loading: false,
+    backLabel: "返回插件 · 技能",
+    onBack: () => console.log("back"),
+    installed: true,
+    outdated: true,
+    installing: true,
+    onUpdate: () => console.log("update"),
+    onUse: () => console.log("use"),
+    onOpenDir: () => console.log("open dir"),
+    onUninstall: () => console.log("uninstall"),
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    avatar: defaultAvatar,
+    name: "代码走查",
+    author: "Orbitwork 官方",
+    version: "1.0.0",
+    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
+    loading: true,
+    backLabel: "返回插件 · 技能",
+    onBack: () => console.log("back"),
+    installed: true,
+    onUse: () => console.log("use"),
+  },
+}
+
+export const EmptyDoc: Story = {
+  args: {
+    avatar: defaultAvatar,
+    name: "代码走查",
+    author: "Orbitwork 官方",
+    version: "1.0.0",
+    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
+    loading: false,
+    emptyText: "这个技能还没写说明",
+    backLabel: "返回插件 · 技能",
+    onBack: () => console.log("back"),
+    installed: true,
+    onUse: () => console.log("use"),
+  },
+}
+
+export const WithAuthorization: Story = {
+  args: {
+    avatar: defaultAvatar,
+    name: "GitHub Integration",
+    author: "Orbitwork 官方",
+    version: "2.0.0",
+    brief: "Connect your GitHub repositories",
+    authorization: (
+      <div
+        style={{
+          padding: 12,
+          background: "var(--ow-surface-2)",
+          border: "1px solid var(--ow-border)",
+          borderRadius: 8,
+          fontSize: 13,
+          color: "var(--ow-text-2)",
+        }}
+      >
+        <div style={{ marginBottom: 8, fontWeight: 600, color: "var(--ow-text)" }}>Authorization Required</div>
+        <div>This skill requires access to your GitHub account.</div>
+      </div>
+    ),
+    docContent: sampleDoc,
+    loading: false,
+    backLabel: "返回插件 · 技能",
+    onBack: () => console.log("back"),
+    installed: true,
+    onUse: () => console.log("use"),
+  },
+}
+
+export const WithCustomAction: Story = {
+  args: {
+    avatar: defaultAvatar,
+    name: "Deploy Tool",
+    author: "Orbitwork 官方",
+    version: "1.5.0",
+    brief: "One-click deployment to production",
+    docContent: sampleDoc,
+    loading: false,
+    backLabel: "返回插件 · 技能",
+    onBack: () => console.log("back"),
+    installed: true,
+    actionLabel: "Deploy Now",
+    actionIcon: <Skill />,
+    onUse: () => console.log("deploy"),
+    onOpenDir: () => console.log("open dir"),
+    onUninstall: () => console.log("uninstall"),
+  },
+}
+
+export const WithMenuItems: Story = {
+  args: {
+    avatar: defaultAvatar,
+    name: "代码走查",
+    author: "Orbitwork 官方",
+    version: "1.0.0",
+    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
+    docContent: sampleDoc,
+    loading: false,
+    backLabel: "返回插件 · 技能",
+    onBack: () => console.log("back"),
+    installed: true,
+    menuItems: [
+      { key: "settings", label: "Settings", icon: <Skill /> },
+      { key: "docs", label: "Documentation", icon: <Skill /> },
+    ],
+    onMenuSelect: (key) => console.log("menu select", key),
+    onUse: () => console.log("use"),
+    onOpenDir: () => console.log("open dir"),
+    onUninstall: () => console.log("uninstall"),
+  },
+}
+
+export const ActionDisabled: Story = {
+  args: {
+    avatar: defaultAvatar,
+    name: "代码走查",
+    author: "Orbitwork 官方",
+    version: "1.0.0",
+    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
+    docContent: sampleDoc,
+    loading: false,
+    backLabel: "返回插件 · 技能",
+    onBack: () => console.log("back"),
+    installed: true,
+    actionDisabled: true,
+    onUse: () => console.log("use"),
+  },
+}
+
+export const MinimalMetadata: Story = {
+  args: {
+    avatar: defaultAvatar,
+    name: "Simple Skill",
+    docContent: sampleDoc,
+    loading: false,
+    backLabel: "Back",
+    onBack: () => console.log("back"),
+    installed: false,
+    onInstall: () => console.log("install"),
+  },
+}
+
+/** 错：说明拉不下来时给人话一句 + mono 技术详情 + 重试；壳的第三态。 */
+export const DocError: Story = {
+  args: {
+    avatar: defaultAvatar,
+    name: "代码走查",
+    author: "Orbitwork 官方",
+    version: "1.0.0",
+    brief: "读改动、挑问题、给建议——按你项目里已有的写法来，不硬套风格。",
+    loading: false,
+    error: "说明没读出来，可能是服务暂时不通",
+    errorDetail: "GET /v1/skills/code-review/doc → 504\nrequest-id: 9c41ad72-8e3f-4b20-a1d6-5f0c7e2b93aa",
+    onRetry: () => {},
+    backLabel: "返回插件 · 技能",
+    onBack: () => {},
+    installed: true,
+    onUse: () => {},
+  },
+}

package/src/components/domain/skills/SkillDetailView/index.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+import { type ReactNode, useState } from "react"
+import { type DetailMenuItem, UninstallConfirmDialog } from "../../../composite/DetailChrome"
+import { Folder, Skill, Trash } from "../../../composite/Icons"
+import { StatusTag } from "../../../composite/StatusTag"
+import { DesktopAgentDetailActions, catalogInstallStatus } from "../../desktop/DesktopCatalogView"
+import { SkillDetailPanelView } from "../SkillDetailPanelView"
+
+export interface SkillDetailViewProps {
+  avatar: ReactNode
+  name: string
+  author?: string
+  version?: string
+  /** 更新时间（「3 天前」）：进 hero 的 mono 元信息行。 */
+  updatedAt?: ReactNode
+  badge?: ReactNode
+  brief?: string
+  authorization?: ReactNode
+  docContent?: ReactNode
+  loading: boolean
+  loadingText?: string
+  /** 说明加载失败时的人话一句 */
+  error?: ReactNode
+  /** 错误技术详情：mono ≤2 行 */
+  errorDetail?: string
+  onRetry?: () => void
+  emptyText?: string
+  backLabel: string
+  onBack: () => void
+  installed: boolean
+  outdated?: boolean
+  installing?: boolean
+  actionLabel?: ReactNode
+  actionIcon?: ReactNode
+  actionDisabled?: boolean
+  menuItems?: DetailMenuItem[]
+  onMenuSelect?: (key: string) => void
+  onInstall?: () => void
+  onUpdate?: () => void
+  onUse?: () => void
+  onOpenDir?: () => void
+  onUninstall?: () => void
+}
+
+/**
+ * SkillDetailView —— 技能详情接管页（SkillDetailPanelView + 目录壳动作组 + 卸载确认）。
+ * 容器三态、Hero、按钮组都在壳里，本件只接卸载确认这一段本地状态。
+ */
+export function SkillDetailView(props: SkillDetailViewProps) {
+  const [confirmUninstall, setConfirmUninstall] = useState(false)
+  /* A4-B4：hero 标题旁的状态签与卡上同一枚（同词表同形）——安装态本来只体现在按钮文案上，
+     「这个技能现在装没装」得靠读按钮反推。 */
+  const installStatus = catalogInstallStatus({
+    installed: props.installed,
+    outdated: props.outdated,
+    installing: props.installing,
+  })
+  const actions = (
+    <DesktopAgentDetailActions
+      installed={props.installed}
+      outdated={props.outdated}
+      installing={props.installing}
+      primaryLabel={props.actionLabel ?? "使用技能"}
+      primaryIcon={props.actionIcon ?? <Skill />}
+      primaryVisible={Boolean(props.onUse)}
+      primaryDisabled={props.actionDisabled}
+      onInstall={props.onInstall}
+      onUpdate={props.onUpdate}
+      onPrimaryAction={() => props.onUse?.()}
+      menuItems={[
+        ...(props.menuItems ?? []),
+        ...(props.onOpenDir ? [{ key: "openDir", label: "打开目录", icon: <Folder /> }] : []),
+        ...(props.onUninstall
+          ? [{ key: "uninstall", label: "卸载", icon: <Trash />, danger: true, disabled: props.installing }]
+          : []),
+      ]}
+      onMenuSelect={(key) => {
+        props.onMenuSelect?.(key)
+        if (key === "openDir") props.onOpenDir?.()
+        if (key === "uninstall") setConfirmUninstall(true)
+      }}
+    />
+  )
+  return (
+    <>
+      <SkillDetailPanelView
+        avatar={props.avatar}
+        name={props.name}
+        author={props.author}
+        version={props.version}
+        updatedAt={props.updatedAt}
+        status={installStatus && <StatusTag status={installStatus} />}
+        badge={props.badge}
+        brief={props.brief}
+        authorization={props.authorization}
+        docContent={props.docContent}
+        loading={props.loading}
+        loadingText={props.loadingText}
+        error={props.error}
+        errorDetail={props.errorDetail}
+        onRetry={props.onRetry}
+        emptyText={props.emptyText}
+        backLabel={props.backLabel}
+        onBack={props.onBack}
+        actions={actions}
+      />
+      {confirmUninstall && props.onUninstall && (
+        <UninstallConfirmDialog
+          title="卸载技能"
+          description={`将从本地移除「${props.name}」。`}
+          onCancel={() => setConfirmUninstall(false)}
+          onConfirm={() => {
+            setConfirmUninstall(false)
+            props.onUninstall?.()
+          }}
+        />
+      )}
+    </>
+  )
+}

package/src/components/domain/skills/SkillImportDialogView/SkillImportDialogView.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { SkillImportDialogView, SkillImportResultDialogView } from "./index"
+
+const meta = {
+  title: "Skills/SkillImportDialogView",
+  component: SkillImportDialogView,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SkillImportDialogView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const ImportDialog: Story = {
+  args: {
+    onClose: () => console.log("close"),
+    onInstallArchive: () => console.log("install archive"),
+    onInstallDirectory: () => console.log("install directory"),
+  },
+}
+
+export const ResultSuccess: StoryObj<typeof SkillImportResultDialogView> = {
+  render: (args) => <SkillImportResultDialogView {...args} />,
+  args: {
+    summary: { success: 3, failed: 0, skipped: 0 },
+    items: [
+      { sourceName: "code-review.zip", name: "代码审查", status: "success" },
+      { sourceName: "deploy-helper.zip", name: "部署助手", status: "success" },
+      { sourceName: "test-generator.zip", name: "测试生成器", status: "success" },
+    ],
+    onClose: () => console.log("close"),
+  },
+}
+
+export const ResultMixed: StoryObj<typeof SkillImportResultDialogView> = {
+  render: (args) => <SkillImportResultDialogView {...args} />,
+  args: {
+    summary: { success: 2, failed: 1, skipped: 1 },
+    items: [
+      { sourceName: "skill-a.zip", name: "技能 A", status: "success" },
+      { sourceName: "skill-b.zip", name: "技能 B", status: "failed", reason: "缺少 SKILL.md 文件" },
+      { sourceName: "skill-c.zip", name: "技能 C", status: "skipped", reason: "已存在同名技能" },
+      { sourceName: "skill-d.zip", name: "技能 D", status: "success" },
+    ],
+    onClose: () => console.log("close"),
+  },
+}
+
+export const ResultAllFailed: StoryObj<typeof SkillImportResultDialogView> = {
+  render: (args) => <SkillImportResultDialogView {...args} />,
+  args: {
+    summary: { success: 0, failed: 3, skipped: 0 },
+    items: [
+      { sourceName: "invalid-1.zip", status: "failed", reason: "无效的压缩包格式" },
+      { sourceName: "invalid-2.zip", status: "failed", reason: "缺少 SKILL.md 文件" },
+      { sourceName: "invalid-3.zip", status: "failed", reason: "技能配置解析失败" },
+    ],
+    onClose: () => console.log("close"),
+  },
+}
+
+export const ResultSingleSuccess: StoryObj<typeof SkillImportResultDialogView> = {
+  render: (args) => <SkillImportResultDialogView {...args} />,
+  args: {
+    summary: { success: 1, failed: 0, skipped: 0 },
+    items: [{ sourceName: "my-skill.tgz", name: "我的技能", status: "success" }],
+    onClose: () => console.log("close"),
+  },
+}
+
+export const ResultManyItems: StoryObj<typeof SkillImportResultDialogView> = {
+  render: (args) => <SkillImportResultDialogView {...args} />,
+  args: {
+    summary: { success: 8, failed: 2, skipped: 3 },
+    items: [
+      { sourceName: "s1.zip", name: "Skill 1", status: "success" },
+      { sourceName: "s2.zip", name: "Skill 2", status: "success" },
+      { sourceName: "s3.zip", name: "Skill 3", status: "failed", reason: "版本不兼容" },
+      { sourceName: "s4.zip", name: "Skill 4", status: "success" },
+      { sourceName: "s5.zip", name: "Skill 5", status: "skipped", reason: "已安装" },
+      { sourceName: "s6.zip", name: "Skill 6", status: "success" },
+      { sourceName: "s7.zip", name: "Skill 7", status: "success" },
+      { sourceName: "s8.zip", name: "Skill 8", status: "failed", reason: "依赖缺失" },
+      { sourceName: "s9.zip", name: "Skill 9", status: "success" },
+      { sourceName: "s10.zip", name: "Skill 10", status: "skipped", reason: "已安装" },
+      { sourceName: "s11.zip", name: "Skill 11", status: "success" },
+      { sourceName: "s12.zip", name: "Skill 12", status: "success" },
+      { sourceName: "s13.zip", name: "Skill 13", status: "skipped", reason: "已安装" },
+    ],
+    onClose: () => console.log("close"),
+  },
+}
+
+export const ResultNoName: StoryObj<typeof SkillImportResultDialogView> = {
+  render: (args) => <SkillImportResultDialogView {...args} />,
+  args: {
+    summary: { success: 1, failed: 1, skipped: 0 },
+    items: [
+      { sourceName: "archive-1.zip", status: "success" },
+      { sourceName: "archive-2.zip", status: "failed", reason: "解析失败" },
+    ],
+    onClose: () => console.log("close"),
+  },
+}
+
+export const ResultLongNames: StoryObj<typeof SkillImportResultDialogView> = {
+  render: (args) => <SkillImportResultDialogView {...args} />,
+  args: {
+    summary: { success: 2, failed: 1, skipped: 0 },
+    items: [
+      {
+        sourceName: "very-long-filename-for-skill-package.tar.gz",
+        name: "这是一个非常长的技能名称用于测试 UI 显示效果",
+        status: "success",
+      },
+      {
+        sourceName: "another-extremely-long-archive-name.zip",
+        name: "另一个很长的技能名称",
+        status: "failed",
+        reason: "缺少必需的配置文件 SKILL.md，无法完成导入操作",
+      },
+      { sourceName: "short.zip", name: "短名称", status: "success" },
+    ],
+    onClose: () => console.log("close"),
+  },
+}

package/src/components/domain/skills/SkillImportDialogView/SkillImportDialogViewSource.test.mjs

@@ -0,0 +1,11 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+
+test("skill import dialog advertises all supported local archive formats", () => {
+  assert.match(source, /支持 \.zip、\.tar\.gz 和 \.tgz 技能包/)
+  assert.match(source, /onInstallArchive/)
+  assert.match(source, /onInstallDirectory/)
+})