feat(skills): 技能分类 - 后台改为分类树编辑，技能库按一级分类筛选

管理页左侧选择一级分类和子分类，右侧编辑名称、图示、排序和启用；画布技能库与浏览条按平台一级分类和子分类筛选。
2026-10-08 10:54:41 +08:00
parent f0359a6bee
commit 27d7cc6a09
6 changed files with 1660 additions and 287 deletions
--- a/web/src/components/canvas/canvas-agent-skill-library-modal.tsx
+++ b/web/src/components/canvas/canvas-agent-skill-library-modal.tsx
@@ -1,11 +1,11 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Button, Input } from "antd";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { Alert, Button, Input } from "antd";
 import { Check, LoaderCircle, Plus, Search, Sparkles, Users } from "lucide-react";

 import { AppModal } from "@/components/ui/product/app-modal";
 import type { CanvasTheme } from "@/lib/canvas-theme";
 import type { Skill, SkillCategory, SkillLibraryCategory } from "@/services/api/skills";
-import { SkillCurationBrowser, matchesCuration, effectiveCurationRoot, type useSkillCuration } from "@/components/skills/skill-curation-browser";
+import { curationIcon, matchesCuration, effectiveCurationRoot, type useSkillCuration } from "@/components/skills/skill-curation-browser";

 type SkillLibraryTab = "enabled" | "installed" | "market";

@@ -72,6 +72,14 @@ export function CanvasAgentSkillLibraryModal({
        listRef.current?.scrollTo({ top: 0 });
    }, [category, libraryCategoryId, search, tab]);

+    useEffect(() => {
+        const data = curationState.curation;
+        const valid = platformCategory.startsWith("root:")
+            ? data?.roots?.some((root) => root.id === platformCategory.slice(5))
+            : data?.categories.some((item) => item.id === platformCategory);
+        if ((!data?.enabled || (platformCategory && platformCategory !== "__uncategorized__" && !valid)) && platformCategory) onPlatformCategoryChange("");
+    }, [curationState.curation, onPlatformCategoryChange, platformCategory]);
+
    const librarySource = useMemo(() => tab === "enabled"
        ? installedSkills.filter((skill) => selectedSkillIds.includes(skill.skillId))
        : installedSkills, [installedSkills, selectedSkillIds, tab]);
@@ -188,7 +196,29 @@ export function CanvasAgentSkillLibraryModal({
                        className="canvas-agent-skill-library-search"
                    />
                    <nav className="canvas-agent-skill-library-categories thin-scrollbar" aria-label="技能视图与分类">
-                        <SkillCurationBrowser data={curationState.curation} value={platformCategory} onChange={onPlatformCategoryChange} error={curationState.error} retry={curationState.retry} />
+                        {curationState.error ? <Alert type="warning" title={curationState.error} action={<Button onClick={curationState.retry}>重试</Button>} /> : null}
+                        {curationState.curation?.enabled ? (
+                            <div className="canvas-agent-skill-library-category-group" role="group" aria-label="平台分类">
+                                <div className="canvas-agent-skill-library-category-heading">平台分类</div>
+                                <SkillTab active={!platformCategory} label="全部分类" onClick={() => onPlatformCategoryChange("")} />
+                                <SkillTab active={platformCategory === "__uncategorized__"} label="未细分" onClick={() => onPlatformCategoryChange("__uncategorized__")} />
+                                {(curationState.curation.roots || []).map((root) => {
+                                    const Icon = curationIcon(root.iconKey);
+                                    const children = curationState.curation?.categories.filter((item) => item.rootTag === root.id) || [];
+                                    return (
+                                        <div key={root.id} className="canvas-agent-skill-library-platform-branch">
+                                            <SkillTab active={platformCategory === `root:${root.id}`} icon={<Icon className="size-4" aria-hidden="true" />} label={root.name} onClick={() => onPlatformCategoryChange(`root:${root.id}`)} />
+                                            {children.map((item) => (
+                                                <SkillTab key={item.id} active={platformCategory === item.id} label={item.name} onClick={() => onPlatformCategoryChange(item.id)} />
+                                            ))}
+                                        </div>
+                                    );
+                                })}
+                                {(curationState.curation.categories || []).filter((item) => !(curationState.curation?.roots || []).some((root) => root.id === item.rootTag)).map((item) => (
+                                    <SkillTab key={item.id} active={platformCategory === item.id} label={item.name} onClick={() => onPlatformCategoryChange(item.id)} />
+                                ))}
+                            </div>
+                        ) : null}
                        <div className="canvas-agent-skill-library-category-group">
                            <div className="canvas-agent-skill-library-category-heading">我的技能分类</div>
                            <SkillTab active={tab !== "market" && libraryCategoryId === "all"} label="全部分类" count={librarySource.length} onClick={() => selectLibraryCategory("all")} />
@@ -270,9 +300,10 @@ export function CanvasAgentSkillLibraryModal({
    );
 }

-function SkillTab({ active, label, count, onClick }: { active: boolean; label: string; count?: number; onClick: () => void }) {
+function SkillTab({ active, icon, label, count, onClick }: { active: boolean; icon?: ReactNode; label: string; count?: number; onClick: () => void }) {
    return (
-        <button type="button" aria-pressed={active} className={`canvas-agent-skill-library-tab ${active ? "is-active" : ""}`} onClick={onClick}>
+        <button type="button" aria-pressed={active} className={`canvas-agent-skill-library-tab${icon ? " has-icon" : ""}${active ? " is-active" : ""}`} onClick={onClick}>
+            {icon}
            {label}
            {typeof count === "number" ? <span>{count}</span> : null}
        </button>
--- a/web/src/components/canvas/canvas-cloud-agent.css
+++ b/web/src/components/canvas/canvas-cloud-agent.css
@@ -2459,6 +2459,7 @@
 .canvas-agent-skill-library-categories {
    display: flex;
    min-height: 0;
+    min-width: 0;
    flex-direction: column;
    gap: var(--space-1);
    overflow-y: auto;
@@ -2466,6 +2467,27 @@
    overscroll-behavior: contain;
 }

+.canvas-agent-skill-library-categories > .skill-curation-browser {
+    display: grid;
+    min-width: 0;
+    gap: var(--space-2);
+    margin-bottom: var(--space-3);
+    border-bottom: 1px solid var(--border);
+    padding: 0 var(--space-3) var(--space-4);
+}
+
+.canvas-agent-skill-library-categories .skill-curation-browser-label {
+    color: var(--muted-foreground);
+    font-size: var(--fs-caption);
+    font-weight: 650;
+    letter-spacing: 0.04em;
+}
+
+.canvas-agent-skill-library-categories .skill-curation-browser-select {
+    width: 100%;
+    min-width: 0;
+}
+
 .canvas-agent-skill-library-category-group {
    display: grid;
    gap: var(--space-1);
@@ -2534,6 +2556,17 @@
    opacity: 1;
 }

+.canvas-agent-skill-library-tab.has-icon::before {
+    display: none;
+}
+
+.canvas-agent-skill-library-platform-branch {
+    display: grid;
+    min-width: 0;
+    gap: var(--space-1);
+    border: 0;
+}
+
 .canvas-agent-skill-library-content {
    container: agent-skill-content / inline-size;
    display: flex;
@@ -2871,6 +2904,27 @@
        overscroll-behavior-x: contain;
    }

+    .canvas-agent-skill-library-categories > .skill-curation-browser {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        gap: var(--space-2);
+        margin-bottom: 0;
+        border-right: 1px solid var(--border);
+        border-bottom: 0;
+        padding: 0 var(--space-3) 0 var(--space-2);
+    }
+
+    .canvas-agent-skill-library-categories .skill-curation-browser-label {
+        flex: 0 0 auto;
+        white-space: nowrap;
+    }
+
+    .canvas-agent-skill-library-categories .skill-curation-browser-select {
+        width: 156px;
+        flex: 0 0 156px;
+    }
+
    .canvas-agent-skill-library-category-group {
        display: flex;
        flex: 0 0 auto;
--- a/web/src/components/skills/skill-curation-browser.tsx
+++ b/web/src/components/skills/skill-curation-browser.tsx
@@ -56,9 +56,25 @@ export function SkillCurationBrowser({ data, value, onChange, error, retry }: {
    }, [data, value, onChange]);
    if (error) return <Alert type="warning" title={error} action={<Button onClick={retry}>重试</Button>} />;
    if (!data?.enabled) return null;
-    return <Space wrap><span>平台分类</span><Select aria-label="平台分类" value={value} onChange={onChange} popupMatchSelectWidth={false} options={[
-        { value: "", label: "全部分类" }, { value: "__uncategorized__", label: "未细分" },
-        ...(data.roots || []).map((root) => { const Icon = curationIcon(root.iconKey); return { value: `root:${root.id}`, label: <Space><Icon size={16} />{root.name}</Space> }; }),
-        ...data.categories.map((item) => ({ value: item.id, label: `${data.roots?.find((root) => root.id === item.rootTag)?.name || "分类"} / ${item.name}` })),
-    ]} /></Space>;
+    return (
+        <div className="skill-curation-browser">
+            <span className="skill-curation-browser-label">平台分类</span>
+            <Select
+                aria-label="平台分类"
+                className="skill-curation-browser-select"
+                value={value}
+                onChange={onChange}
+                popupMatchSelectWidth={false}
+                options={[
+                    { value: "", label: "全部分类" },
+                    { value: "__uncategorized__", label: "未细分" },
+                    ...(data.roots || []).map((root) => {
+                        const Icon = curationIcon(root.iconKey);
+                        return { value: `root:${root.id}`, label: <Space><Icon size={16} />{root.name}</Space> };
+                    }),
+                    ...data.categories.map((item) => ({ value: item.id, label: `${data.roots?.find((root) => root.id === item.rootTag)?.name || "分类"} / ${item.name}` })),
+                ]}
+            />
+        </div>
+    );
 }