@orbit-work/ui 0.1.0

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

@@ -0,0 +1,230 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { DesktopSkillsPageView } from "./index"
+import type { DesktopSkillsCategory } from "./index"
+
+const meta = {
+  title: "Desktop/DesktopSkillsPageView",
+  component: DesktopSkillsPageView,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof DesktopSkillsPageView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const mockCategories: DesktopSkillsCategory[] = [
+  { id: null, label: "全部" },
+  { id: "productivity", label: "生产力" },
+  { id: "development", label: "开发" },
+  { id: "data", label: "数据分析" },
+  { id: "design", label: "设计" },
+]
+
+export const AgentsSection: Story = {
+  args: {
+    section: "agents",
+    onSectionChange: (section) => console.log("Section:", section),
+    query: "",
+    onQueryChange: (query) => console.log("Query:", query),
+    searchPlaceholder: "搜索智能体",
+    actionLabel: "创建智能体",
+    onAction: () => console.log("Create agent"),
+    categories: mockCategories,
+    activeCategoryId: null,
+    onCategoryChange: (id) => console.log("Category:", id),
+    currentPage: 1,
+    totalItems: 48,
+    pageSize: 24,
+    onPageChange: (page) => console.log("Page:", page),
+    children: (
+      <div style={{ padding: 40, minHeight: 400 }}>
+        <h2>智能体列表</h2>
+        <p>24 个智能体</p>
+      </div>
+    ),
+  },
+}
+
+export const MarketSection: Story = {
+  args: {
+    section: "market",
+    onSectionChange: (section) => console.log("Section:", section),
+    query: "",
+    onQueryChange: (query) => console.log("Query:", query),
+    searchPlaceholder: "搜索技能",
+    categories: mockCategories,
+    activeCategoryId: "productivity",
+    onCategoryChange: (id) => console.log("Category:", id),
+    currentPage: 1,
+    totalItems: 120,
+    pageSize: 24,
+    onPageChange: (page) => console.log("Page:", page),
+    children: (
+      <div style={{ padding: 40, minHeight: 400 }}>
+        <h2>技能市场</h2>
+        <p>生产力分类</p>
+      </div>
+    ),
+  },
+}
+
+export const ConnectorsSection: Story = {
+  args: {
+    section: "connectors",
+    onSectionChange: (section) => console.log("Section:", section),
+    query: "",
+    onQueryChange: (query) => console.log("Query:", query),
+    searchPlaceholder: "搜索连接器",
+    actionLabel: "添加连接器",
+    onAction: () => console.log("Add connector"),
+    categories: mockCategories,
+    activeCategoryId: null,
+    onCategoryChange: (id) => console.log("Category:", id),
+    installedOnly: false,
+    onInstalledOnlyChange: (value) => console.log("Installed only:", value),
+    currentPage: 1,
+    totalItems: 36,
+    pageSize: 24,
+    onPageChange: (page) => console.log("Page:", page),
+    children: (
+      <div style={{ padding: 40, minHeight: 400 }}>
+        <h2>连接器列表</h2>
+        <p>36 个连接器</p>
+      </div>
+    ),
+  },
+}
+
+export const WithSearch: Story = {
+  args: {
+    section: "market",
+    onSectionChange: (section) => console.log("Section:", section),
+    query: "database",
+    onQueryChange: (query) => console.log("Query:", query),
+    searchPlaceholder: "搜索技能",
+    categories: mockCategories,
+    activeCategoryId: null,
+    onCategoryChange: (id) => console.log("Category:", id),
+    currentPage: 1,
+    totalItems: 8,
+    pageSize: 24,
+    onPageChange: (page) => console.log("Page:", page),
+    children: (
+      <div style={{ padding: 40, minHeight: 400 }}>
+        <h2>搜索结果</h2>
+        <p>找到 8 个与 "database" 相关的技能</p>
+      </div>
+    ),
+  },
+}
+
+export const InstalledOnly: Story = {
+  args: {
+    section: "connectors",
+    onSectionChange: (section) => console.log("Section:", section),
+    query: "",
+    onQueryChange: (query) => console.log("Query:", query),
+    searchPlaceholder: "搜索连接器",
+    categories: mockCategories,
+    activeCategoryId: null,
+    onCategoryChange: (id) => console.log("Category:", id),
+    installedOnly: true,
+    onInstalledOnlyChange: (value) => console.log("Installed only:", value),
+    currentPage: 1,
+    totalItems: 12,
+    pageSize: 24,
+    onPageChange: (page) => console.log("Page:", page),
+    children: (
+      <div style={{ padding: 40, minHeight: 400 }}>
+        <h2>已安装的连接器</h2>
+        <p>12 个已安装</p>
+      </div>
+    ),
+  },
+}
+
+export const WithNotice: Story = {
+  args: {
+    section: "market",
+    onSectionChange: (section) => console.log("Section:", section),
+    query: "",
+    onQueryChange: (query) => console.log("Query:", query),
+    searchPlaceholder: "搜索技能",
+    categories: mockCategories,
+    activeCategoryId: null,
+    onCategoryChange: (id) => console.log("Category:", id),
+    currentPage: 1,
+    totalItems: 48,
+    pageSize: 24,
+    onPageChange: (page) => console.log("Page:", page),
+    // notice 只给人话一句：立面（warning tint ＋ 1px 边 ＋ 0 影 ＋ 语义图标）由 Banner 承担；
+    // 旧写法是 story 自己手搓 div ＋ emoji ＋ 已失效的 --bg-info，与 §6 告知条语法冲突。
+    notice: "刷新失败，正在显示上次加载的目录：network timeout",
+    children: (
+      <div style={{ padding: 40, minHeight: 400 }}>
+        <h2>技能市场</h2>
+      </div>
+    ),
+  },
+}
+
+export const MultiPage: Story = {
+  args: {
+    section: "market",
+    onSectionChange: (section) => console.log("Section:", section),
+    query: "",
+    onQueryChange: (query) => console.log("Query:", query),
+    searchPlaceholder: "搜索技能",
+    categories: mockCategories,
+    activeCategoryId: null,
+    onCategoryChange: (id) => console.log("Category:", id),
+    currentPage: 2,
+    totalItems: 240,
+    pageSize: 24,
+    onPageChange: (page) => console.log("Page:", page),
+    children: (
+      <div style={{ padding: 40, minHeight: 400 }}>
+        <h2>技能市场 - 第 2 页</h2>
+        <p>共 240 个技能，每页 24 个</p>
+      </div>
+    ),
+  },
+}
+
+/**
+ * 载入态（L3-3-7）：`loading` 槽出目录卡骨架网格，`children` 不渲染。
+ * 这一张替掉的是 B3 之后就成了死 story 的 `SpaceLoading`——那张只是 `spaceLoading: true`
+ * ＋ 一句手写的「加载中...」，而「个人空间」下拉整件已在 A3-B4 撤走，件里零消费方，
+ * 渲出来与 MarketSection 一模一样，演的是一个不存在的加载态。
+ */
+export const Loading: Story = {
+  args: {
+    section: "market",
+    onSectionChange: (section) => console.log("Section:", section),
+    query: "",
+    onQueryChange: (query) => console.log("Query:", query),
+    searchPlaceholder: "搜索技能",
+    actionLabel: "添加技能",
+    onAction: () => console.log("Add skill"),
+    categories: mockCategories,
+    activeCategoryId: null,
+    onCategoryChange: (id) => console.log("Category:", id),
+    currentPage: 1,
+    totalItems: 0,
+    pageSize: 24,
+    onPageChange: (page) => console.log("Page:", page),
+    loading: true,
+  },
+}
+
+/** 错误态：件内 `InlineMessage error` ＋「重试」，与载入态同一张网格。 */
+export const LoadFailed: Story = {
+  args: {
+    ...Loading.args,
+    loading: false,
+    error: "目录没能取回来，检查一下网络再试。",
+    errorDetail: "GET /api/skills → 503 Service Unavailable",
+    onRetry: () => console.log("retry"),
+  },
+}

package/src/components/domain/desktop/DesktopSkillsPageView/DesktopSkillsPageViewSource.test.mjs

@@ -0,0 +1,149 @@
+import assert from "node:assert/strict"
+import { readFileSync } from "node:fs"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const styles = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+/** 只剩声明的样式表（注释剥掉）：退役类名在注释里仍会被提到（那是变更记录），
+    「这条规则还在不在」只能对着声明问。 */
+const decls = styles.replace(/\/\*[\s\S]*?\*\//g, "")
+
+// ── A3-B3 页头接入（原型 template.dc.html L1617–1660） ──────────────────────
+// 页首整块从「Tabs 直接当页头」换成 composite/PageHead 的三行页头；本文件里
+// W2 那批钉 .plaza__head / .plaza__sections / .plaza__search-* 的断言随之改口径：
+// 那些规则已整族退役，断言从「存在且长这样」翻成「不复存在，且改由 PageHead 承担」。
+
+test("catalog header is composite/PageHead: eyebrow / display title / description", () => {
+  assert.match(source, /import \{ PageHead \} from ["']\.\.\/\.\.\/\.\.\/composite\/PageHead["']/)
+  assert.match(source, /<PageHead\s+eyebrow="工具"\s+title="插件"/)
+  assert.match(source, /description="专家、技能与连接器都在这里安装与管理；也可以添加自己的。"/)
+  // 页首不再自绘任何头带类名
+  assert.doesNotMatch(source, /className="plaza__head"/)
+  assert.doesNotMatch(source, /className="plaza__sections"/)
+})
+
+test("catalog header places its primary action after search", () => {
+  assert.match(source, /actionLabel\?: ReactNode/)
+  assert.match(source, /onAction\?: \(\) => void/)
+  // search 槽在 actions 槽之前——PageHead 右上按传入顺序排（搜索 → 主按钮）
+  assert.match(source, /search=\{<SearchInput[\s\S]*?actions=\{[\s\S]*?<Button variant="primary"/)
+  assert.match(source, /icon=\{<Plus \/>\}/)
+})
+
+test("A3-B4：归属维度是一枚 SegmentedControl 线框档，「已安装」Switch 与手搓分段器都退役", () => {
+  assert.match(source, /installedOnly\?: boolean/)
+  assert.match(source, /onInstalledOnlyChange\?: \(installedOnly: boolean\) => void/)
+  // Switch 整件退场（原型 L1654–1658 那个位置是分段器）
+  assert.doesNotMatch(source, /import \{ Switch \} from/)
+  assert.doesNotMatch(source, /plaza__installed-switch/)
+  assert.doesNotMatch(decls, /\.plaza__installed-switch/)
+  // 分段器归原语：radiogroup 语义 ＋ ←→ 换选由 SegmentedControl 给，页面层零 CSS。
+  assert.match(source, /import \{ SegmentedControl \} from ["']\.\.\/\.\.\/\.\.\/primitives\/SegmentedControl["']/)
+  assert.match(source, /className="plaza__cats-scope"/)
+  assert.match(source, /<SegmentedControl\s+variant="outline"\s+size="sm"/)
+  assert.match(
+    source,
+    /const SCOPE_ITEMS[\s\S]*\{ value: "all", label: "市场" \}[\s\S]*\{ value: "mine", label: "我的" \}/,
+  )
+  assert.match(source, /const scope: "all" \| "mine" = installedOnly \? "mine" : "all"/)
+  assert.match(source, /onChange=\{\(value\) => onInstalledOnlyChange\(value === "mine"\)\}/)
+  assert.doesNotMatch(source, /installedCount/)
+  assert.doesNotMatch(source, /plaza__current-count/)
+  assert.match(styles, /\.plaza__cats-main \{[^}]*flex: 1;/s)
+  assert.match(styles, /\.plaza__cats-scope \{[^}]*margin-left: auto;/s)
+  assert.doesNotMatch(styles, /\.plaza__current-count/)
+  // B3 那版页面层手搓的分段器三条 CSS 整族退役（形已在原语里）
+  assert.doesNotMatch(decls, /\.plaza__scope/)
+})
+
+test("catalog categories keep the standard page gutter", () => {
+  // A3-B3：分类行落在页头之下（原型 L1649 `padding:14px 0 0`），横向沟槽仍是 28，
+  // 下内距归零——首行卡的呼吸由 .plaza__grid 的 padding-top:20 给，不再叠两份。
+  assert.match(styles, /\.plaza__filters \{[^}]*padding: 14px 28px 0;[^}]*\}/s)
+  assert.match(styles, /\.plaza__cats \{[^}]*padding:\s*0\s+28px\s+0;[^}]*\}/s)
+})
+
+test("category and installation scope are independent filter dimensions", () => {
+  // 合并记：origin/main 把分类行迁成 `Tabs`，本分支迁成 `primitives/Chip` 的筛选档
+  // （同屏页签带已归 PageHead，分类是筛选不是内容分段 —— 见 index.tsx 该处注释）。
+  // 断言回到与两种形态都无关的那一句：分类只调 onCategoryChange，不顺手重置归属维度。
+  assert.match(source, /onClick=\{\(\) => onCategoryChange\(category\.id\)\}/)
+  assert.doesNotMatch(source, /onClick=\{\(\) => \{ onInstalledOnlyChange\?\.\(false\)/)
+})
+
+test("A3-B4：「个人空间」下拉整件撤走，兼容属性留成 @deprecated 槽", () => {
+  // 裁决：筛选行右端只留「全部 / 我的」一枚分段器 —— 下拉与分段器都留这一行太挤。
+  assert.doesNotMatch(source, /<Select/)
+  assert.doesNotMatch(source, /className="plaza__space-select"/)
+  assert.doesNotMatch(decls, /\.plaza__space-select/)
+  // apps/desktop 仍在传这四件，属性保留但不再渲染（空间切换要换个落点由研发定）
+  assert.match(source, /@deprecated A3-B4[\s\S]*spaces\?: SelectOption\[\]/)
+  assert.match(source, /activeSpaceId\?: string/)
+  assert.match(source, /onSpaceChange\?: \(spaceId: string\) => void/)
+})
+
+test("catalog owns the refresh notice and client pagination", () => {
+  assert.match(source, /<Banner className="plaza__notice" variant="warning">/)
+  assert.match(source, /<Pagination\s+className="plaza__pagination"/)
+  assert.match(styles, /\.plaza__filters \{[^}]*display: flex;/s)
+})
+
+// ── W2 页首重铸（DS2 屏级判断表） ───────────────────────────────────────────
+
+test("A3-B3：.plaza__head 头带整族退役，页首归 PageHead 的 24 上留白", () => {
+  // 上留白 48 → 24（窗口带是内容区之外的独立一行，原型 L657/L1618），由 PageHead 的 pt-6 给。
+  assert.doesNotMatch(decls, /\.plaza__head/)
+  assert.doesNotMatch(decls, /\.plaza__sections/)
+  assert.doesNotMatch(decls, /\.plaza__search-group/)
+  assert.doesNotMatch(decls, /\.plaza__search-right/)
+  // 窗口拖拽带下的 no-drag 保护改按 data-slot="page-head" 认（三屏页头共用）。
+  assert.match(styles, /\[data-slot="page-head"\] button,/)
+})
+
+test("分区页签下沉进 PageHead 的页签带，文案「智能体 → 专家」", () => {
+  // 页签不再由本件直接渲染 Tabs：tabs/activeTabKey/onTabChange 三个槽交给 PageHead，
+  // 36 高专档与通栏 1px 基线在那件里。窄幅逐字竖排的旧补丁随 .plaza__sections 一起退役
+  // ——页签带现在独占一行，不再与搜索组抢同一排。
+  assert.doesNotMatch(source, /import \{ Tabs \}/)
+  assert.match(source, /tabs=\{SECTION_ITEMS\}\s+activeTabKey=\{section\}/)
+  assert.match(source, /\{ key: "agents", label: "专家" \}/)
+  assert.doesNotMatch(source, /label: "智能体"/)
+})
+
+test("catalog search rides the Field contract — the hand-rolled V1 search shell is gone", () => {
+  assert.match(source, /import \{ SearchInput \} from ["']\.\.\/\.\.\/\.\.\/composite\/SearchInput["']/)
+  assert.doesNotMatch(styles, /\.plaza__search \{/)
+  assert.doesNotMatch(styles, /\.plaza__search:focus-within/)
+  assert.doesNotMatch(styles, /\.plaza__search input \{/)
+  // 宽度归 PageHead（三屏同一个 216），页面层不再给搜索定宽
+  assert.match(
+    source,
+    /search=\{<SearchInput value=\{query\} onChange=\{onQueryChange\} placeholder=\{searchPlaceholder\} \/>\}/,
+  )
+})
+
+test("A3-B4：分类 chip 走 primitives/Chip 筛选档 —— 未选中也带 1px 边，选中＝current-bg ＋ 500", () => {
+  assert.match(source, /import \{ Button, Chip \} from ["']\.\.\/\.\.\/\.\.\/primitives["']/)
+  assert.match(source, /<Chip[\s\S]{0,220}shape="square"[\s\S]{0,120}selected=\{activeCategoryId === category\.id\}/)
+  assert.match(source, /onClick=\{\(\) => onCategoryChange\(category\.id\)\}/)
+  // 形/高/字号/内距全归原语，页面层最后一条 .plaza__cat 内距覆盖退役
+  assert.doesNotMatch(source, /className="plaza__cat"/)
+  assert.doesNotMatch(decls, /\.plaza__cat \{/)
+  assert.doesNotMatch(source, /variant=\{activeCategoryId === category\.id \? "secondary" : "ghost"\}/)
+  // 筛选档口径在 Chip 本体里：未选透明面 ＋ --ow-border，选中 --ow-current-bg ＋ 500
+  const chipSource = readFileSync(new URL("../../../primitives/Chip/index.tsx", import.meta.url), "utf8")
+  assert.match(chipSource, /selected\?: boolean/)
+  assert.match(chipSource, /bg-\[var\(--ow-current-bg\)\] border-\[color:var\(--ow-border\)\] text-ow-text font-medium/)
+  assert.match(chipSource, /bg-transparent border-\[color:var\(--ow-border\)\] text-ow-text font-normal/)
+})
+
+test("catalog notice is a Banner surface, not a hand-mixed warning strip", () => {
+  assert.match(source, /import \{ Banner \} from ["']\.\.\/\.\.\/\.\.\/composite\/Banner["']/)
+  // 页面层只留定位与沟槽；tint 三件套 ＋ 1px 边 ＋ 0 影由 Banner 承担。
+  assert.match(
+    styles,
+    /\.plaza__notice \{\s*flex-shrink: 0;\s*width: auto;\s*margin: 0 28px var\(--ow-space-3, 12px\);\s*\}/,
+  )
+  assert.doesNotMatch(styles, /\.plaza__notice \{[^}]*(?:background|box-shadow|border-radius)/s)
+})

package/src/components/domain/desktop/DesktopSkillsPageView/index.tsx

@@ -0,0 +1,235 @@
+import type { ReactNode } from "react"
+import { Banner } from "../../../composite/Banner"
+import { Plus } from "../../../composite/Icons"
+import { PageHead } from "../../../composite/PageHead"
+import { SearchInput } from "../../../composite/SearchInput"
+import { Button, Chip } from "../../../primitives"
+import { Pagination } from "../../../primitives/Pagination"
+import { SegmentedControl } from "../../../primitives/SegmentedControl"
+import type { SelectOption } from "../../../primitives/Select"
+import { DesktopCatalogGridView } from "../DesktopCatalogView"
+
+export type DesktopSkillsSection = "agents" | "market" | "connectors"
+
+export interface DesktopSkillsCategory {
+  id: string | null
+  label: string
+}
+
+export interface DesktopSkillsPageViewProps {
+  section: DesktopSkillsSection
+  onSectionChange: (section: DesktopSkillsSection) => void
+  query: string
+  onQueryChange: (query: string) => void
+  searchPlaceholder: string
+  /** @deprecated A3-B3：搜索归 PageHead 右上槽统一锁 216 宽，页面层不再传类名。 */
+  searchClassName?: string
+  /** @deprecated A3-B3：页头搜索组已由 PageHead 承担，属性保留兼容调用方。 */
+  searchGroupClassName?: string
+  actionLabel?: ReactNode
+  onAction?: () => void
+  categories: DesktopSkillsCategory[]
+  activeCategoryId: string | null
+  onCategoryChange: (categoryId: string | null) => void
+  installedOnly?: boolean
+  onInstalledOnlyChange?: (installedOnly: boolean) => void
+  /** @deprecated A3-B4：筛选行右端只留「市场 / 我的」一枚分段器，「个人空间」下拉退役（裁决：两件都留这一行太挤）。宿主仍可传，本件不再渲染；空间切换要换个落点由研发定。 */
+  spaces?: SelectOption[]
+  /** @deprecated A3-B4：同上，空间下拉已从筛选行撤走。 */
+  activeSpaceId?: string
+  /** @deprecated A3-B4：同上。 */
+  onSpaceChange?: (spaceId: string) => void
+  /** @deprecated A3-B4：同上。 */
+  spaceLoading?: boolean
+  currentPage: number
+  totalItems: number
+  pageSize?: number
+  onPageChange: (page: number) => void
+  notice?: ReactNode
+  /**
+   * 载入态（L3-3-7）：出目录卡骨架网格，`children` 不渲染。
+   * 三页签的骨架/空态/错误原来在宿主两条路上各拼一套（`SkillsCenter` 一套、`ConnectorModal`
+   * 一套），「同形」于是只统一了满态。三槽收进件里之后，三页签连状态态也是同一张网格。
+   */
+  loading?: boolean
+  loadingCount?: number
+  /** 错误态：人话一句（优先级高于 loading）。 */
+  error?: ReactNode
+  /** 错误技术详情：mono ≤2 行。 */
+  errorDetail?: string
+  onRetry?: () => void
+  /** 空态节点（通常是 `CatalogEmptyState grid`）；给了就在网格里跨列渲染。 */
+  emptyState?: ReactNode
+  /** 满态内容（通常是 `.plaza__grid` ＋ 一排卡）；三态槽任一成立时不渲染。 */
+  children?: ReactNode
+  overlay?: ReactNode
+}
+
+/**
+ * A3-B3：分区页签文案「智能体 → 专家」（原型 P_TABS L3524）。key 仍是 `agents`，
+ * 路由 id 与埋点键不动，只改可见字。
+ */
+const SECTION_ITEMS = [
+  { key: "agents", label: "专家" },
+  { key: "market", label: "技能" },
+  { key: "connectors", label: "连接器" },
+]
+
+/** 筛选行右端的归属分段器（原型 L1654–1658）：只有两格，选中＝--ow-current-bg ＋ 500。 */
+const SCOPE_ITEMS = [
+  { value: "all", label: "市场" },
+  { value: "mine", label: "我的" },
+]
+
+/**
+ * Stable Desktop catalog layout shared by the real app and documentation mocks.
+ *
+ * DS2 A3-B3 页头接入（原型 template.dc.html L1617–1660）：
+ * - 页首整块换 `composite/PageHead`：眉标「工具」／32px 大标题「插件」／说明句 L1623，
+ *   右上是 216 宽搜索 ＋ 主按钮；上留白由 `--ow-titlebar-h`(48) 收到 24（窗口带是内容区
+ *   之外的独立一行，页头不再替它让位）。原来的 `.plaza__head`（Tabs 直接当页头）整块退役。
+ * - 分区页签下沉进 PageHead 的页签带（`Tabs size="lg"` 36 高 ＋ 通栏 1px 基线），
+ *   页签文案「智能体 → 专家」。
+ * - `.plaza__filters` 分类行留在页头之下（原型 L1649 的 `padding:14px 0 0`，本件写成
+ *   `14px 28px 0`，28 沟槽与页头对齐）。
+ *
+ * A3-B4 筛选行三件（原型 L1649–1659）：
+ * - 分类 chip 走 `primitives/Chip` 筛选档（`shape="square"` ＋ `selected`）：未选中也带
+ *   常驻 1px `--ow-border`、选中＝`--ow-current-bg` ＋ 500；原来的 `Button ghost/secondary`
+ *   未选没有边、选中借按钮面，一排分类看着像一排随时会触发动作的钮。
+ * - 右端归属分段器走 `primitives/SegmentedControl variant="outline"`（B3 手搓的
+ *   `.plaza__scope` 退役）：「我的」一期接在 `installedOnly` 上（＝我装了的），owner 维度
+ *   要目录接口支持，接口到位后只换取值、形不用再动。
+ * - 「个人空间」Select **整件撤走**（裁决：右端只留分段器一枚，两件都留这一行太挤）。
+ *   `spaces` / `activeSpaceId` / `onSpaceChange` / `spaceLoading` 四个属性保留成
+ *   `@deprecated` 兼容槽（apps/desktop 仍在传），本件不再渲染；空间切换要换个落点由研发定。
+ * - 底部 `Pagination` 一期保留（原型是滚动到底即止，撤分页牵动研发取数）。
+ * - 目录刷新告知条仍是 `Banner variant="warning"`。
+ *
+ * L3-3-7 三态归位：`loading` / `error` / `emptyState` 三个可选槽把骨架、错误横幅与空态
+ * 收进件里（内部复用 `DesktopCatalogGridView` 的三态网格）。原来三页签的状态态在宿主
+ * 两条路上各拼一套（`SkillsCenter` 一套给专家/技能、`ConnectorModal` 另一套给连接器），
+ * 「三页签同形」于是只统一了满态；现在连载入与空都是同一张网格。三槽都不给＝老口径。
+ */
+export function DesktopSkillsPageView({
+  section,
+  onSectionChange,
+  query,
+  onQueryChange,
+  searchPlaceholder,
+  actionLabel,
+  onAction,
+  categories,
+  activeCategoryId,
+  onCategoryChange,
+  installedOnly = false,
+  onInstalledOnlyChange,
+  currentPage,
+  totalItems,
+  pageSize = 24,
+  onPageChange,
+  notice,
+  loading = false,
+  loadingCount = 6,
+  error,
+  errorDetail,
+  onRetry,
+  emptyState,
+  children,
+  overlay,
+}: DesktopSkillsPageViewProps) {
+  const scope: "all" | "mine" = installedOnly ? "mine" : "all"
+  // L3-3-7 三态：错 > 载 > 空 > 满。三档都落在同一张 `.plaza__grid` 上（错/载走
+  // `DesktopCatalogGridView` 的既有三态，空态由调用方给节点），所以三页签切换时网格
+  // 的列宽、沟槽与滚动槽一格都不跳。三槽都不给＝老口径，`children` 原样渲染。
+  const stateSlot = error ? "error" : loading ? "loading" : emptyState ? "empty" : null
+
+  return (
+    <div className="page">
+      <PageHead
+        eyebrow="工具"
+        title="插件"
+        description="专家、技能与连接器都在这里安装与管理；也可以添加自己的。"
+        search={<SearchInput value={query} onChange={onQueryChange} placeholder={searchPlaceholder} />}
+        actions={
+          actionLabel && onAction ? (
+            <Button variant="primary" icon={<Plus />} onClick={onAction}>
+              {actionLabel}
+            </Button>
+          ) : undefined
+        }
+        tabs={SECTION_ITEMS}
+        activeTabKey={section}
+        onTabChange={(key) => onSectionChange(key as DesktopSkillsSection)}
+      />
+      <div className="plaza__filters">
+        <div className="plaza__cats">
+          {/* 分类 chip（原型 L1651 ＋ 逻辑 L4620–4625）：改走 `primitives/Chip` 的筛选档
+              （`shape="square"` ＋ `selected`）。原来是 `Button ghost/secondary`——未选中**没有边**，
+              一排分类在页底上只剩几团浮字，选中态又借了 secondary 的按钮面，看着像一排随时会
+              触发动作的钮。Chip 筛选档：未选＝透明面 ＋ 常驻 1px --ow-border ＋ 400，
+              选中＝--ow-current-bg ＋ 500（位置极，不占状态/行动极）。 */}
+          <div className="plaza__cats-main">
+            {categories.map((category) => (
+              <Chip
+                key={category.id ?? "__all__"}
+                shape="square"
+                label={category.label}
+                selected={activeCategoryId === category.id}
+                aria-pressed={activeCategoryId === category.id}
+                onClick={() => onCategoryChange(category.id)}
+              />
+            ))}
+          </div>
+          <div className="plaza__cats-scope">
+            {/* 归属分段器（原型 L1654–1658）：改走 `primitives/SegmentedControl` 的线框档
+                （外壳 2px 内距 ＋ 1px --ow-border ＋ radius-sm，内钮 24 高 · radius-2xs ·
+                caption，选中＝--ow-current-bg ＋ 500）。B3 那版是页面层手搓的
+                `.plaza__scope` 三条 CSS ＋ `Button variant="unstyled"`：形对了，但键盘只能
+                Tab 逐枚过、语义是一堆 aria-pressed 的钮而不是一组单选，全仓第二套分段器。
+                收归原语后 ←→/Home/End 换选与 radiogroup 语义一并拿回。
+                「我的」一期仍接在 `installedOnly` 上（＝我装了的）；owner 维度要目录接口
+                支持，接口到位后只换取值，形不用再动。 */}
+            {onInstalledOnlyChange && (
+              <SegmentedControl
+                variant="outline"
+                size="sm"
+                aria-label="按归属筛选"
+                options={SCOPE_ITEMS}
+                value={scope}
+                onChange={(value) => onInstalledOnlyChange(value === "mine")}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+      {notice && (
+        <Banner className="plaza__notice" variant="warning">
+          {notice}
+        </Banner>
+      )}
+      {stateSlot === "empty" ? (
+        <div className="plaza__grid">{emptyState}</div>
+      ) : stateSlot ? (
+        <DesktopCatalogGridView
+          loading={loading}
+          loadingCount={loadingCount}
+          error={error}
+          errorDetail={errorDetail}
+          onRetry={onRetry}
+          empty={false}
+        />
+      ) : (
+        children
+      )}
+      <Pagination
+        className="plaza__pagination"
+        current={currentPage}
+        total={totalItems}
+        pageSize={pageSize}
+        onChange={onPageChange}
+      />
+      {overlay}
+    </div>
+  )
+}