1845 lines
65 KiB
TypeScript
1845 lines
65 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
AlertCircle,
|
|
Anchor,
|
|
ArchiveIcon,
|
|
ArrowDownUpIcon,
|
|
BookmarkIcon,
|
|
CheckCircle2,
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon,
|
|
ClockIcon,
|
|
CopyIcon,
|
|
EyeOffIcon,
|
|
FileArchive,
|
|
GlobeIcon,
|
|
InfoIcon,
|
|
Loader2,
|
|
LockIcon,
|
|
PinIcon,
|
|
PlusIcon,
|
|
Power,
|
|
PowerOff,
|
|
RefreshCwIcon,
|
|
SparklesIcon,
|
|
TagsIcon,
|
|
Trash2Icon,
|
|
TrendingUpIcon,
|
|
Upload,
|
|
UserIcon,
|
|
XIcon,
|
|
} from "lucide-react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { toast } from "sonner";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
Empty,
|
|
EmptyDescription,
|
|
EmptyHeader,
|
|
EmptyMedia,
|
|
EmptyTitle,
|
|
} from "@/components/ui/empty";
|
|
|
|
import {
|
|
Item,
|
|
ItemActions,
|
|
ItemTitle,
|
|
ItemContent,
|
|
ItemDescription,
|
|
} from "@/components/ui/item";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { ModelNameSelect } from "@/components/workspace/model-name-select";
|
|
import { PublishSquarePickerDialog } from "@/components/workspace/publish-square-picker-dialog";
|
|
import { SkillDetailDialog } from "@/components/workspace/skills/skill-detail-dialog";
|
|
import { TagChipList } from "@/components/workspace/tags/tag-chip";
|
|
import { TagPickerDialog } from "@/components/workspace/tags/tag-picker-dialog";
|
|
import { TagSearchBar } from "@/components/workspace/tags/tag-search-bar";
|
|
import { ViewModeToggle } from "@/components/workspace/view-mode-toggle";
|
|
import { useTheme } from "@/contexts/ThemeContext";
|
|
import { getStoredAuth } from "@/core/auth";
|
|
import { useI18n } from "@/core/i18n/hooks";
|
|
import type { ValidateSkillUploadResponse } from "@/core/skills/api";
|
|
import {
|
|
useDeleteBuiltinSkill,
|
|
useDeleteCustomSkill,
|
|
useDuplicateSkill,
|
|
useEnableSkill,
|
|
useGenerateMissingSkillNameZh,
|
|
useGenerateSkillNameZh,
|
|
useInstallSkillUpload,
|
|
useReconcileCustomSkills,
|
|
useSetSkillAlwaysOn,
|
|
useSetSkillFeatured,
|
|
useSetSkillNameZh,
|
|
useSetSkillPinned,
|
|
useSetSkillPublished,
|
|
useSkills,
|
|
useValidateSkillUpload,
|
|
} from "@/core/skills/hooks";
|
|
import {
|
|
canToggleSkillAvailability,
|
|
isSkillOffline,
|
|
type SkillAvailabilityControl,
|
|
} from "@/core/skill-availability";
|
|
import {
|
|
usePublishSquares,
|
|
useSkillCompressionSettings,
|
|
useViewMode,
|
|
} from "@/core/system-settings/hooks";
|
|
import {
|
|
WX_RESTRICTED_TAB_DEFAULT_SQUARE,
|
|
WX_RESTRICTED_TAB_NANJING_DB,
|
|
isWxRestrictedPlaceholderTab,
|
|
wxRestrictedDefaultSquareTabValue,
|
|
wxRestrictedNanjingTabValue,
|
|
} from "@/core/system-settings/wx-type-filter";
|
|
import type { Skill } from "@/core/skills/type";
|
|
import type { SkillKnowledgeBinding } from "@/strategy-components/api/skill-knowledge";
|
|
import { formatDateTime } from "@/core/utils/datetime";
|
|
import { env } from "@/env";
|
|
import { desensitize } from "@/lib/desensitize";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import { SettingsSection } from "./settings-section";
|
|
import { SkillStateSheet } from "./skill-state-sheet";
|
|
|
|
export function SkillSettingsPage({
|
|
onClose,
|
|
embedded = false,
|
|
restrictWxTypes = false,
|
|
}: {
|
|
onClose?: () => void;
|
|
embedded?: boolean;
|
|
/** wx 侧栏入口：类型 Tab 只保留 我的 / 默认广场 / 南京-db。 */
|
|
restrictWxTypes?: boolean;
|
|
} = {}) {
|
|
const { t } = useI18n();
|
|
if (embedded) {
|
|
return (
|
|
<SkillSettingsList onClose={onClose} restrictWxTypes={restrictWxTypes} />
|
|
);
|
|
}
|
|
return (
|
|
<SettingsSection
|
|
title={t.settings.skills.title}
|
|
description={t.settings.skills.description}
|
|
>
|
|
<SkillSettingsList onClose={onClose} restrictWxTypes={restrictWxTypes} />
|
|
</SettingsSection>
|
|
);
|
|
}
|
|
|
|
const PAGE_SIZE = 10;
|
|
type SkillSort =
|
|
| "time_desc"
|
|
| "time_asc"
|
|
| "activity_desc"
|
|
| "activity_asc"
|
|
| "usage_desc"
|
|
| "usage_asc"
|
|
| "name_asc"
|
|
| "name_desc";
|
|
|
|
/** 重新扫描成功 toast：仅暗色模式使用，浅色走 Sonner 默认样式 */
|
|
const rescanSuccessToastDarkOptions = {
|
|
classNames: {
|
|
toast:
|
|
"!rounded-[2px] !border !border-[#106455] !bg-[#052934] !text-[#FFFFFF] shadow-md",
|
|
title: "!text-[#FFFFFF]",
|
|
description: "!text-[#FFFFFF]",
|
|
},
|
|
icon: <CheckCircle2 className="size-4 shrink-0 text-[#2FD69A]" />,
|
|
} as const;
|
|
|
|
/** 重新扫描无变更 toast：仅暗色模式使用，浅色走 Sonner 默认样式 */
|
|
const rescanInfoToastDarkOptions = {
|
|
classNames: {
|
|
toast:
|
|
"!rounded-[2px] !border !border-[#704812] !bg-[#202222] !text-[#FFFFFF] shadow-md",
|
|
title: "!text-[#FFFFFF]",
|
|
description: "!text-[#FFFFFF]",
|
|
},
|
|
icon: <InfoIcon className="size-4 shrink-0 text-[#FF9900]" />,
|
|
} as const;
|
|
|
|
/** 重新扫描失败 toast：仅暗色模式使用，浅色走 Sonner 默认样式 */
|
|
const rescanErrorToastDarkOptions = {
|
|
classNames: {
|
|
toast:
|
|
"!rounded-[2px] !border !border-[#7F1A2A] !bg-[#311629] !text-[#FFFFFF] shadow-md",
|
|
title: "!text-[#FFFFFF]",
|
|
description: "!text-[#FFFFFF]",
|
|
},
|
|
icon: <AlertCircle className="size-4 shrink-0 text-[#F5222D]" />,
|
|
} as const;
|
|
|
|
function SkillSettingsList({
|
|
onClose,
|
|
restrictWxTypes = false,
|
|
}: {
|
|
onClose?: () => void;
|
|
restrictWxTypes?: boolean;
|
|
}) {
|
|
const { t } = useI18n();
|
|
const { theme } = useTheme();
|
|
const router = useRouter();
|
|
const [filter, setFilter] = useState<string>("mine");
|
|
const [installOpen, setInstallOpen] = useState(false);
|
|
const [staleSheetOpen, setStaleSheetOpen] = useState(false);
|
|
const [archiveSheetOpen, setArchiveSheetOpen] = useState(false);
|
|
const [search, setSearch] = useState("");
|
|
const [tagIds, setTagIds] = useState<string[]>([]);
|
|
const [sort, setSort] = useState<SkillSort>("time_desc");
|
|
const [page, setPage] = useState(1);
|
|
// Publisher filter: click a skill's 发布者 to keep only that user's skills.
|
|
// {id} is owner_user_id; {label} the desensitized display name.
|
|
const [publisher, setPublisher] = useState<{ id: string; label: string } | null>(
|
|
null,
|
|
);
|
|
const [viewMode, setViewMode] = useViewMode("skill");
|
|
const { data: publishSquares } = usePublishSquares();
|
|
// Each configured publish square (发布广场) becomes its own browse tab; the
|
|
// backend always returns at least one (the built-in default).
|
|
const squareTabs = publishSquares?.squares ?? [];
|
|
const defaultSquareTabValue = wxRestrictedDefaultSquareTabValue(
|
|
publishSquares?.default_square_id,
|
|
);
|
|
const nanjingTabValue = wxRestrictedNanjingTabValue(squareTabs);
|
|
const reconcileMutation = useReconcileCustomSkills();
|
|
const fillNamesMutation = useGenerateMissingSkillNameZh();
|
|
// Optional model override for the admin "一键补充中文名" action (null = default).
|
|
const [fillModel, setFillModel] = useState<string | null>(null);
|
|
const storedAuth = useMemo(() => getStoredAuth(), []);
|
|
const currentUserId = storedAuth?.user_id ?? null;
|
|
const isAdmin = storedAuth?.system_role === "admin";
|
|
|
|
// Name + tag filtering is resolved server-side via the /api/skills query.
|
|
// A 岗位 (position) no longer *restricts* the list — it grants skills into the
|
|
// member's 我的技能 (each such skill comes back with ``favorited: true``), so
|
|
// the 广场 always shows every visible skill and the 我的 tab includes the
|
|
// position-granted ones. ``scope`` is kept for API compatibility only.
|
|
const { skills, isLoading, error } = useSkills({
|
|
search,
|
|
tagIds,
|
|
sort,
|
|
scope: isAdmin ? undefined : "mine",
|
|
});
|
|
|
|
// 把可见技能分类成 UI 关心的几个桶。
|
|
// "All" = 内置 + 已发布的技能（仅 active 状态);自己的技能也要自己发布了才出现。
|
|
// "Mine" = 严格属于我自己的自定义技能（仅 active 状态)。
|
|
const { activeAll, activeMine, staleVisible, archivedVisible } = useMemo(() => {
|
|
const all: Skill[] = [];
|
|
const mine: Skill[] = [];
|
|
const stale: Skill[] = [];
|
|
const archived: Skill[] = [];
|
|
for (const skill of skills) {
|
|
const state = skill.state ?? "active";
|
|
const isCustom = skill.category === "custom";
|
|
const isOwnedByMe =
|
|
isCustom && !!skill.owner_user_id && skill.owner_user_id === currentUserId;
|
|
const isBuiltin = skill.builtin ?? !skill.owner_user_id;
|
|
|
|
if (state === "stale") {
|
|
stale.push(skill);
|
|
continue;
|
|
}
|
|
if (state === "archived") {
|
|
archived.push(skill);
|
|
continue;
|
|
}
|
|
// state === active
|
|
if (isBuiltin || !!skill.published) {
|
|
all.push(skill);
|
|
}
|
|
// "我的" = skills I own OR skills granted into my collection by my 岗位
|
|
// (position) — mirroring how favorited agents land in 我的智能体.
|
|
if (isOwnedByMe || !!skill.favorited) {
|
|
mine.push(skill);
|
|
}
|
|
}
|
|
return {
|
|
activeAll: all,
|
|
activeMine: mine,
|
|
staleVisible: stale,
|
|
archivedVisible: archived,
|
|
};
|
|
}, [skills, currentUserId]);
|
|
|
|
// "mine" tab shows my own skills; every other tab value is a square id whose
|
|
// public skills come from the published pool.
|
|
const isSquareTab = filter !== "mine";
|
|
const scopedSkills = filter === "mine" ? activeMine : activeAll;
|
|
const filteredSkills = useMemo(() => {
|
|
if (restrictWxTypes && isWxRestrictedPlaceholderTab(filter)) {
|
|
return [];
|
|
}
|
|
let list = publisher
|
|
? scopedSkills.filter((s) => s.owner_user_id === publisher.id)
|
|
: scopedSkills;
|
|
// On a square tab, keep only that square's skills. The default square also
|
|
// sweeps in legacy/unassigned published skills (square_id === "").
|
|
if (isSquareTab) {
|
|
const isDefault = filter === publishSquares?.default_square_id;
|
|
list = list.filter((s) => {
|
|
const sid = s.square_id ?? "";
|
|
return sid === filter || (isDefault && !sid);
|
|
});
|
|
}
|
|
return list;
|
|
}, [
|
|
scopedSkills,
|
|
publisher,
|
|
filter,
|
|
isSquareTab,
|
|
publishSquares?.default_square_id,
|
|
restrictWxTypes,
|
|
]);
|
|
const orderedSkills = useMemo(
|
|
() =>
|
|
filteredSkills
|
|
.map((skill, index) => ({ skill, index }))
|
|
.sort((a, b) => {
|
|
// 置顶(featured)决定排序;钉选(pinned)只管防归档,不影响顺序。
|
|
const featuredDelta =
|
|
Number(!!b.skill.featured) - Number(!!a.skill.featured);
|
|
return featuredDelta || a.index - b.index;
|
|
})
|
|
.map(({ skill }) => skill),
|
|
[filteredSkills],
|
|
);
|
|
const staleCount = staleVisible.length;
|
|
const archivedCount = archivedVisible.length;
|
|
|
|
const totalPages = Math.max(1, Math.ceil(orderedSkills.length / PAGE_SIZE));
|
|
// Filter / search / tag changes may shrink the result set — pull the page
|
|
// back into range without forcing a reset on every keystroke.
|
|
useEffect(() => {
|
|
if (page > totalPages) setPage(totalPages);
|
|
}, [page, totalPages]);
|
|
useEffect(() => {
|
|
setPage(1);
|
|
}, [search, tagIds, sort, publisher?.id, filter]);
|
|
|
|
// If the active square tab disappears (admin removed that square), fall back
|
|
// to "我的" so the page never points at a dead tab.
|
|
useEffect(() => {
|
|
if (restrictWxTypes) {
|
|
if (
|
|
filter === WX_RESTRICTED_TAB_NANJING_DB &&
|
|
nanjingTabValue !== WX_RESTRICTED_TAB_NANJING_DB
|
|
) {
|
|
setFilter(nanjingTabValue);
|
|
return;
|
|
}
|
|
if (
|
|
filter === WX_RESTRICTED_TAB_DEFAULT_SQUARE &&
|
|
defaultSquareTabValue !== WX_RESTRICTED_TAB_DEFAULT_SQUARE
|
|
) {
|
|
setFilter(defaultSquareTabValue);
|
|
return;
|
|
}
|
|
if (
|
|
filter !== "mine" &&
|
|
filter !== defaultSquareTabValue &&
|
|
filter !== nanjingTabValue
|
|
) {
|
|
setFilter("mine");
|
|
}
|
|
return;
|
|
}
|
|
if (
|
|
filter !== "mine" &&
|
|
squareTabs.length > 0 &&
|
|
!squareTabs.some((sq) => sq.id === filter)
|
|
) {
|
|
setFilter("mine");
|
|
}
|
|
}, [filter, squareTabs, restrictWxTypes, defaultSquareTabValue, nanjingTabValue]);
|
|
const pagedSkills = useMemo(
|
|
() => orderedSkills.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
|
|
[orderedSkills, page],
|
|
);
|
|
|
|
const handleFillNames = async () => {
|
|
try {
|
|
const result = await fillNamesMutation.mutateAsync(fillModel);
|
|
const okCount = result.generated.length;
|
|
const failCount = result.failed.length;
|
|
if (okCount === 0 && failCount === 0) {
|
|
toast.info("所有技能均已配置中文名称");
|
|
} else if (failCount === 0) {
|
|
toast.success(`已为 ${okCount} 个技能补充中文名称`);
|
|
} else if (result.model_error) {
|
|
// Failures came from the model itself — say so explicitly.
|
|
toast.warning(
|
|
`已补充 ${okCount} 个,${failCount} 个因大模型报错失败:${result.model_error}`,
|
|
);
|
|
} else {
|
|
toast.warning(`已补充 ${okCount} 个,${failCount} 个生成失败,可稍后重试或手动填写`);
|
|
}
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
};
|
|
|
|
const handleRescan = async () => {
|
|
try {
|
|
const result = await reconcileMutation.mutateAsync();
|
|
if (result.adopted.length > 0) {
|
|
toast.success(
|
|
t.settings.skills.rescanSkillsAdopted.replace(
|
|
"{count}",
|
|
String(result.adopted.length),
|
|
),
|
|
theme === "dark" ? rescanSuccessToastDarkOptions : undefined,
|
|
);
|
|
} else {
|
|
toast.info(
|
|
t.settings.skills.rescanSkillsNoop,
|
|
theme === "dark" ? rescanInfoToastDarkOptions : undefined,
|
|
);
|
|
}
|
|
} catch (err) {
|
|
toast.error(
|
|
err instanceof Error ? err.message : String(err),
|
|
theme === "dark" ? rescanErrorToastDarkOptions : undefined,
|
|
);
|
|
}
|
|
|
|
};
|
|
return (
|
|
<div className="flex w-full flex-col gap-4">
|
|
<header className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Tabs value={filter} onValueChange={setFilter}>
|
|
<TabsList variant="line" className="flex-wrap">
|
|
{restrictWxTypes ? (
|
|
<>
|
|
<TabsTrigger value="mine">{t.settings.skills.tabMine}</TabsTrigger>
|
|
<TabsTrigger value={defaultSquareTabValue}>默认广场</TabsTrigger>
|
|
<TabsTrigger value={nanjingTabValue}>南京-db</TabsTrigger>
|
|
</>
|
|
) : (
|
|
<>
|
|
<TabsTrigger value="mine">{t.settings.skills.tabMine}</TabsTrigger>
|
|
{squareTabs.map((sq) => (
|
|
<TabsTrigger key={sq.id} value={sq.id} title={sq.description || sq.name}>
|
|
{sq.name}
|
|
</TabsTrigger>
|
|
))}
|
|
</>
|
|
)}
|
|
</TabsList>
|
|
</Tabs>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={staleCount === 0}
|
|
onClick={() => setStaleSheetOpen(true)}
|
|
title={t.settings.skills.badgeStaleTitle}
|
|
>
|
|
<ClockIcon className="size-4" />
|
|
{t.settings.skills.entryStale.replace("{count}", String(staleCount))}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={archivedCount === 0}
|
|
onClick={() => setArchiveSheetOpen(true)}
|
|
title={t.settings.skills.badgeArchivedTitle}
|
|
>
|
|
<ArchiveIcon className="size-4" />
|
|
{t.settings.skills.entryArchived.replace(
|
|
"{count}",
|
|
String(archivedCount),
|
|
)}
|
|
</Button>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => {
|
|
onClose?.();
|
|
router.push("/page/workspace/skills/evolution");
|
|
}}
|
|
>
|
|
<TrendingUpIcon className="size-4" />
|
|
{t.settings.skills.goToEvolution}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => void handleRescan()}
|
|
disabled={
|
|
reconcileMutation.isPending ||
|
|
env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"
|
|
}
|
|
title={t.settings.skills.rescanSkills}
|
|
>
|
|
{reconcileMutation.isPending ? (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
) : (
|
|
<RefreshCwIcon className="size-4" />
|
|
)}
|
|
{reconcileMutation.isPending
|
|
? t.settings.skills.rescanSkillsRunning
|
|
: t.settings.skills.rescanSkills}
|
|
</Button>
|
|
{isAdmin && (
|
|
<>
|
|
<ModelNameSelect
|
|
value={fillModel}
|
|
onChange={setFillModel}
|
|
disabled={
|
|
fillNamesMutation.isPending ||
|
|
env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"
|
|
}
|
|
triggerClassName="h-8 w-[9.5rem]"
|
|
/>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="gap-1.5 border-violet-300 bg-violet-50 font-medium text-violet-700 hover:bg-violet-100 hover:text-violet-800 dark:border-violet-500/40 dark:bg-violet-500/15 dark:text-violet-300 dark:hover:bg-violet-500/25"
|
|
onClick={() => void handleFillNames()}
|
|
disabled={
|
|
fillNamesMutation.isPending ||
|
|
env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"
|
|
}
|
|
title="用所选大模型为所有尚未配置中文名称的技能自动生成中文名(仅管理员)"
|
|
>
|
|
{fillNamesMutation.isPending ? (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
) : (
|
|
<SparklesIcon className="size-4" />
|
|
)}
|
|
{fillNamesMutation.isPending ? "补充中…" : "一键补充中文名"}
|
|
</Button>
|
|
</>
|
|
)}
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => setInstallOpen(true)}
|
|
disabled={env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"}
|
|
>
|
|
<Upload className="size-4" />
|
|
{t.settings.skills.installSkill}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => {
|
|
onClose?.();
|
|
router.push("/page/workspace/chats/new?mode=skill");
|
|
}}
|
|
disabled={env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"}
|
|
title="在对话中描述需求，由 AI 帮你创建一个新技能"
|
|
>
|
|
<PlusIcon className="size-4" />
|
|
{t.settings.skills.createSkill}
|
|
</Button>
|
|
</div>
|
|
</header>
|
|
<TagSearchBar
|
|
targetType="skill"
|
|
onSearchChange={setSearch}
|
|
tagIds={tagIds}
|
|
onTagIdsChange={setTagIds}
|
|
actions={
|
|
<div className="flex items-center gap-2">
|
|
<ViewModeToggle value={viewMode} onChange={setViewMode} />
|
|
<Select value={sort} onValueChange={(v) => setSort(v as SkillSort)}>
|
|
<SelectTrigger
|
|
className="h-9 w-full gap-2 px-3 text-xs sm:w-[148px]"
|
|
title="排序"
|
|
>
|
|
<ArrowDownUpIcon className="text-muted-foreground size-3.5" />
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent position="popper" side="bottom" sideOffset={4}>
|
|
<SelectItem value="time_desc">最新创建</SelectItem>
|
|
<SelectItem value="time_asc">最早创建</SelectItem>
|
|
<SelectItem value="activity_desc">最近使用</SelectItem>
|
|
<SelectItem value="activity_asc">最早使用</SelectItem>
|
|
<SelectItem value="usage_desc">使用最多</SelectItem>
|
|
<SelectItem value="usage_asc">使用最少</SelectItem>
|
|
<SelectItem value="name_asc">名称 A-Z</SelectItem>
|
|
<SelectItem value="name_desc">名称 Z-A</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
}
|
|
/>
|
|
{!isLoading && !error && (
|
|
<div className="text-muted-foreground flex justify-end text-sm tabular-nums">
|
|
共 {orderedSkills.length} 个技能
|
|
</div>
|
|
)}
|
|
{publisher && (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-muted-foreground text-xs">筛选发布者：</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setPublisher(null)}
|
|
className="bg-primary/10 text-primary hover:bg-primary/20 inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium transition-colors"
|
|
title="点击清除发布者筛选"
|
|
>
|
|
{publisher.label}
|
|
<XIcon className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
{isLoading && (
|
|
<div className="text-muted-foreground text-sm">{t.common.loading}</div>
|
|
)}
|
|
{error && <div className="text-destructive text-sm">Error: {error.message}</div>}
|
|
{!isLoading && !error && filteredSkills.length === 0 && (
|
|
<EmptySkill />
|
|
)}
|
|
{!isLoading && !error && filteredSkills.length > 0 && (
|
|
<div
|
|
className={cn(
|
|
viewMode === "card"
|
|
? "grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3"
|
|
: "flex flex-col gap-3",
|
|
)}
|
|
>
|
|
{pagedSkills.map((skill) => (
|
|
<SkillRow
|
|
key={skill.name}
|
|
skill={skill}
|
|
currentUserId={currentUserId}
|
|
isAdmin={isAdmin}
|
|
availabilityControl="owner"
|
|
layout={viewMode === "card" ? "card" : "row"}
|
|
onPublisherClick={setPublisher}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
{!isLoading && !error && totalPages > 1 && (
|
|
<div className="flex items-center justify-end gap-2 pt-1">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={page <= 1}
|
|
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
|
>
|
|
<ChevronLeftIcon className="size-4" />
|
|
{t.settings.skills.paginationPrev}
|
|
</Button>
|
|
<span className="text-muted-foreground text-xs">
|
|
{t.settings.skills.paginationPageOf
|
|
.replace("{page}", String(page))
|
|
.replace("{total}", String(totalPages))}
|
|
</span>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={page >= totalPages}
|
|
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
|
|
>
|
|
{t.settings.skills.paginationNext}
|
|
<ChevronRightIcon className="size-4" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
<InstallSkillDialog
|
|
open={installOpen}
|
|
onClose={() => setInstallOpen(false)}
|
|
isAdmin={isAdmin}
|
|
/>
|
|
<SkillStateSheet
|
|
kind="stale"
|
|
open={staleSheetOpen}
|
|
onOpenChange={setStaleSheetOpen}
|
|
skills={staleVisible}
|
|
/>
|
|
<SkillStateSheet
|
|
kind="archived"
|
|
open={archiveSheetOpen}
|
|
onOpenChange={setArchiveSheetOpen}
|
|
skills={archivedVisible}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SkillRow({
|
|
skill,
|
|
currentUserId,
|
|
isAdmin,
|
|
availabilityControl,
|
|
layout = "row",
|
|
onPublisherClick,
|
|
knowledgeBindings = [],
|
|
}: {
|
|
skill: Skill;
|
|
currentUserId: string | null;
|
|
isAdmin: boolean;
|
|
/** Which permission boundary exposes the global online/offline control. */
|
|
availabilityControl?: SkillAvailabilityControl;
|
|
/** "row" = full-width horizontal item (default); "card" = grid card cell. */
|
|
layout?: "row" | "card";
|
|
/** Click the 发布者 line to filter the list to that publisher. Receives the
|
|
* owner_user_id + its desensitized display label. */
|
|
onPublisherClick?: (publisher: { id: string; label: string }) => void;
|
|
/** Admin list can inject its single batched binding query here (never N+1). */
|
|
knowledgeBindings?: SkillKnowledgeBinding[];
|
|
}) {
|
|
const isCard = layout === "card";
|
|
const { t } = useI18n();
|
|
const setPublished = useSetSkillPublished();
|
|
const { data: cardPublishSquares } = usePublishSquares();
|
|
const setPinned = useSetSkillPinned();
|
|
const setFeatured = useSetSkillFeatured();
|
|
const setAlwaysOn = useSetSkillAlwaysOn();
|
|
const setEnabled = useEnableSkill();
|
|
const { data: compression } = useSkillCompressionSettings();
|
|
const deleteCustom = useDeleteCustomSkill();
|
|
const deleteBuiltin = useDeleteBuiltinSkill();
|
|
const duplicateSkillMutation = useDuplicateSkill();
|
|
const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
|
|
const [tagPickerOpen, setTagPickerOpen] = useState(false);
|
|
const [detailOpen, setDetailOpen] = useState(false);
|
|
const [duplicateOpen, setDuplicateOpen] = useState(false);
|
|
const [duplicateName, setDuplicateName] = useState("");
|
|
const [publishPickerOpen, setPublishPickerOpen] = useState(false);
|
|
const [confirmOfflineOpen, setConfirmOfflineOpen] = useState(false);
|
|
|
|
const isCustom = skill.category === "custom";
|
|
// Built-in flag falls back to "no DB owner" so legacy responses without
|
|
// the multitenancy fields still classify public skills correctly.
|
|
const isBuiltin = skill.builtin ?? !skill.owner_user_id;
|
|
const isOwned =
|
|
isCustom && !isBuiltin && !!skill.owner_user_id && skill.owner_user_id === currentUserId;
|
|
const isFromOthers = isCustom && !isBuiltin && !isOwned;
|
|
// Admin can manage custom skills from any owner; non-admin only their own.
|
|
const canManage = isCustom && (isOwned || isAdmin);
|
|
const canDelete = isAdmin || isOwned;
|
|
const canTogglePublish = canManage && !isBuiltin;
|
|
// 常驻(免压缩):内置技能仅管理员可设;自定义技能其所有者或管理员可设(与后端一致)。
|
|
const canSetAlwaysOn = isAdmin || isOwned;
|
|
const canToggleAvailability = canToggleSkillAvailability({
|
|
skill,
|
|
currentUserId,
|
|
isAdmin,
|
|
control: availabilityControl,
|
|
});
|
|
const isOffline = isSkillOffline(skill);
|
|
|
|
async function handleSetEnabled(enabled: boolean) {
|
|
try {
|
|
await setEnabled.mutateAsync({ skillName: skill.name, enabled });
|
|
toast.success(
|
|
enabled
|
|
? t.settings.skills.onlineSuccess
|
|
: t.settings.skills.offlineSuccess,
|
|
);
|
|
setConfirmOfflineOpen(false);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
}
|
|
|
|
async function handleToggleAlwaysOn(next: boolean) {
|
|
try {
|
|
await setAlwaysOn.mutateAsync({ skillName: skill.name, alwaysOn: next });
|
|
toast.success(next ? "已设为常驻(免压缩)" : "已取消常驻");
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
}
|
|
|
|
async function handleTogglePublished(next: boolean) {
|
|
// Publishing: prompt for which square to publish into (when configured).
|
|
// Unpublishing: just flip it off.
|
|
if (next && (cardPublishSquares?.squares.length ?? 0) > 0) {
|
|
setPublishPickerOpen(true);
|
|
return;
|
|
}
|
|
try {
|
|
await setPublished.mutateAsync({ skillName: skill.name, published: next });
|
|
toast.success(
|
|
next
|
|
? t.settings.skills.publishSuccess
|
|
: t.settings.skills.unpublishSuccess,
|
|
);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
}
|
|
|
|
// Publish the skill into a chosen square. Each skill belongs to exactly one
|
|
// square; re-publishing with a new square_id relocates rather than duplicates.
|
|
async function handlePublishToSquare(squareId: string) {
|
|
try {
|
|
await setPublished.mutateAsync({
|
|
skillName: skill.name,
|
|
published: true,
|
|
squareId,
|
|
});
|
|
const sqName =
|
|
cardPublishSquares?.squares.find((s) => s.id === squareId)?.name ?? "广场";
|
|
toast.success(`已发布到「${sqName}」`);
|
|
setPublishPickerOpen(false);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
}
|
|
|
|
async function handleDelete() {
|
|
try {
|
|
if (isBuiltin) {
|
|
await deleteBuiltin.mutateAsync(skill.name);
|
|
} else {
|
|
await deleteCustom.mutateAsync(skill.name);
|
|
}
|
|
toast.success(t.settings.skills.deleteSuccess);
|
|
setConfirmDeleteOpen(false);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
}
|
|
|
|
function handleOpenDuplicate() {
|
|
// Suggest a "<name>-copy" default that already satisfies the backend's
|
|
// lowercase/digit/-/_ skill-name rule. The user can edit it before saving.
|
|
setDuplicateName(`${skill.name}-copy`);
|
|
setDuplicateOpen(true);
|
|
}
|
|
|
|
async function handleDuplicate() {
|
|
const target = duplicateName.trim();
|
|
if (!target) {
|
|
toast.error("请输入新技能名称");
|
|
return;
|
|
}
|
|
try {
|
|
const result = await duplicateSkillMutation.mutateAsync({
|
|
sourceName: skill.name,
|
|
newName: target,
|
|
});
|
|
toast.success(`已复制为「${result.skill_name}」`);
|
|
setDuplicateOpen(false);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
}
|
|
|
|
async function handleTogglePinned() {
|
|
const next = !skill.pinned;
|
|
try {
|
|
await setPinned.mutateAsync({ skillName: skill.name, pinned: next });
|
|
toast.success(
|
|
next ? t.settings.skills.pinSuccess : t.settings.skills.unpinSuccess,
|
|
);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
}
|
|
|
|
async function handleToggleFeatured() {
|
|
const next = !skill.featured;
|
|
try {
|
|
await setFeatured.mutateAsync({ skillName: skill.name, featured: next });
|
|
toast.success(
|
|
next
|
|
? t.settings.skills.featureSuccess
|
|
: t.settings.skills.unfeatureSuccess,
|
|
);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
}
|
|
|
|
const badgeGroup = (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className={cn(isCard && "truncate font-medium")}>
|
|
{skill.name_zh?.trim() ? skill.name_zh : desensitize(skill.name)}
|
|
</span>
|
|
{skill.name_zh?.trim() && (
|
|
<span className="text-muted-foreground truncate text-xs font-normal">
|
|
{desensitize(skill.name)}
|
|
</span>
|
|
)}
|
|
{isBuiltin && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
{t.settings.skills.badgeBuiltin}
|
|
</Badge>
|
|
)}
|
|
{isOwned && (
|
|
<Badge
|
|
variant="default"
|
|
className="bg-emerald-500/15 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300 text-xs"
|
|
>
|
|
{t.settings.skills.badgeMine}
|
|
</Badge>
|
|
)}
|
|
{isFromOthers && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-blue-500/30 text-blue-700 dark:text-blue-300 text-xs"
|
|
title={
|
|
skill.owner_user_id
|
|
? t.settings.skills.badgeFromOthersTitle.replace(
|
|
"{user_id}",
|
|
skill.owner_user_id,
|
|
)
|
|
: undefined
|
|
}
|
|
>
|
|
{t.settings.skills.badgeFromOthers}
|
|
</Badge>
|
|
)}
|
|
{(isOwned || isAdmin) && !isBuiltin && skill.published && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-sky-500/30 text-sky-700 dark:text-sky-300 text-xs"
|
|
title={t.settings.skills.badgePublishedTitle}
|
|
>
|
|
<GlobeIcon className="size-3" />
|
|
{t.settings.skills.badgePublished}
|
|
</Badge>
|
|
)}
|
|
{(isOwned || isAdmin) && !isBuiltin && !skill.published && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-zinc-400/40 text-zinc-500 dark:text-zinc-400 text-xs"
|
|
title={t.settings.skills.badgeUnpublishedTitle}
|
|
>
|
|
<EyeOffIcon className="size-3" />
|
|
{t.settings.skills.badgeUnpublished}
|
|
</Badge>
|
|
)}
|
|
{isCustom && !isBuiltin && skill.source === "agent" && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-cyan-500/30 text-cyan-700 dark:text-cyan-300 text-xs"
|
|
title={t.settings.skills.badgeSourceAgentTitle}
|
|
>
|
|
{t.settings.skills.badgeSourceAgent}
|
|
</Badge>
|
|
)}
|
|
{isCustom && !isBuiltin && skill.source === "upload" && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-zinc-400/40 text-zinc-600 dark:text-zinc-400 text-xs"
|
|
title={t.settings.skills.badgeSourceUploadTitle}
|
|
>
|
|
{t.settings.skills.badgeSourceUpload}
|
|
</Badge>
|
|
)}
|
|
{skill.featured && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-amber-500/30 text-amber-700 dark:text-amber-300 text-xs"
|
|
title={t.settings.skills.badgeFeaturedTitle}
|
|
>
|
|
{t.settings.skills.badgeFeatured}
|
|
</Badge>
|
|
)}
|
|
{skill.pinned && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-purple-500/30 text-purple-700 dark:text-purple-300 text-xs"
|
|
title={t.settings.skills.badgePinnedTitle}
|
|
>
|
|
{t.settings.skills.badgePinned}
|
|
</Badge>
|
|
)}
|
|
{skill.always_on && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-amber-500/30 text-amber-700 dark:text-amber-300 text-xs"
|
|
title="常驻(免压缩):开启技能压缩后,本技能仍全文注入系统提示词并被正常检索"
|
|
>
|
|
常驻
|
|
</Badge>
|
|
)}
|
|
{knowledgeBindings.slice(0, 3).map((binding) => (
|
|
<Badge
|
|
key={binding.id}
|
|
variant="outline"
|
|
className="border-indigo-500/30 text-indigo-700 dark:text-indigo-300 text-xs"
|
|
title={`${binding.target_name} · ${binding.status}${binding.remote_business_key ? ` · ${binding.remote_business_key}` : ""}`}
|
|
>
|
|
知识库：{binding.target_name || binding.target_id}
|
|
{binding.status === "stale" ? "（待更新）" : ""}
|
|
</Badge>
|
|
))}
|
|
{knowledgeBindings.length > 3 && (
|
|
<Badge variant="secondary" className="text-xs">+{knowledgeBindings.length - 3}</Badge>
|
|
)}
|
|
{isOffline && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-red-500/35 bg-red-500/5 text-red-700 dark:text-red-300 text-xs"
|
|
title={t.settings.skills.badgeOfflineTitle}
|
|
>
|
|
<PowerOff className="size-3" />
|
|
{t.settings.skills.badgeOffline}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
const metaNodes = (
|
|
<>
|
|
{!isBuiltin && skill.owner_username && (
|
|
<button
|
|
type="button"
|
|
disabled={!skill.owner_user_id || !onPublisherClick}
|
|
onClick={(e) => {
|
|
if (!skill.owner_user_id || !onPublisherClick) return;
|
|
e.stopPropagation();
|
|
onPublisherClick({
|
|
id: skill.owner_user_id,
|
|
label: desensitize(skill.owner_username!),
|
|
});
|
|
}}
|
|
className={cn(
|
|
"text-muted-foreground mt-1 flex max-w-full items-center gap-1 text-sm font-medium",
|
|
skill.owner_user_id && onPublisherClick &&
|
|
"hover:text-primary cursor-pointer transition-colors hover:underline",
|
|
)}
|
|
title={
|
|
skill.owner_user_id && onPublisherClick
|
|
? `点击筛选发布者：${desensitize(skill.owner_username)}`
|
|
: `发布者：${desensitize(skill.owner_username)}`
|
|
}
|
|
>
|
|
<UserIcon className="size-3.5 shrink-0" />
|
|
<span className="truncate">发布者：{desensitize(skill.owner_username)}</span>
|
|
</button>
|
|
)}
|
|
{skill.use_count !== undefined && (
|
|
<div className="text-muted-foreground mt-1 text-xs">
|
|
{skill.use_count > 0
|
|
? t.settings.skills.useCountInline.replace(
|
|
"{count}",
|
|
String(skill.use_count),
|
|
)
|
|
: t.settings.skills.useCountInlineZero}
|
|
</div>
|
|
)}
|
|
{formatDateTime(skill.created_at) && (
|
|
<div className="text-muted-foreground mt-1 flex items-center gap-1 text-xs">
|
|
<ClockIcon className="size-3.5 shrink-0" />
|
|
<span className="truncate">
|
|
创建时间：{formatDateTime(skill.created_at)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{(skill.tags?.length ?? 0) > 0 && (
|
|
<TagChipList tags={skill.tags!} className="mt-2" />
|
|
)}
|
|
</>
|
|
);
|
|
|
|
const actionButtons = (
|
|
<>
|
|
{canToggleAvailability && (
|
|
<Button
|
|
size="sm"
|
|
variant={isOffline ? "default" : "outline"}
|
|
className={cn(
|
|
"h-8 shrink-0 gap-1.5 px-2.5",
|
|
!isOffline && "text-destructive hover:text-destructive",
|
|
)}
|
|
disabled={
|
|
setEnabled.isPending ||
|
|
env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"
|
|
}
|
|
onClick={() => {
|
|
if (isOffline) {
|
|
void handleSetEnabled(true);
|
|
} else {
|
|
setConfirmOfflineOpen(true);
|
|
}
|
|
}}
|
|
title={
|
|
isOffline
|
|
? t.settings.skills.onlineAction
|
|
: t.settings.skills.offlineAction
|
|
}
|
|
>
|
|
{setEnabled.isPending ? (
|
|
<Loader2 className="size-3.5 animate-spin" />
|
|
) : isOffline ? (
|
|
<Power className="size-3.5" />
|
|
) : (
|
|
<PowerOff className="size-3.5" />
|
|
)}
|
|
{isOffline
|
|
? t.settings.skills.onlineAction
|
|
: t.settings.skills.offlineAction}
|
|
</Button>
|
|
)}
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className="h-8 w-8 shrink-0"
|
|
onClick={() => setTagPickerOpen(true)}
|
|
title={t.adminTags.manageTags}
|
|
>
|
|
<TagsIcon className="size-3.5" />
|
|
</Button>
|
|
{canManage && (
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className={cn(
|
|
"h-8 w-8 shrink-0",
|
|
skill.featured && "text-amber-600 hover:text-amber-700",
|
|
)}
|
|
disabled={setFeatured.isPending}
|
|
onClick={() => void handleToggleFeatured()}
|
|
title={
|
|
skill.featured
|
|
? t.settings.skills.unfeatureAction
|
|
: t.settings.skills.featureAction
|
|
}
|
|
>
|
|
<PinIcon
|
|
className={cn("size-3.5", skill.featured && "fill-current")}
|
|
/>
|
|
</Button>
|
|
)}
|
|
{canManage && (
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className={cn(
|
|
"h-8 w-8 shrink-0",
|
|
skill.pinned && "text-emerald-600 hover:text-emerald-700",
|
|
)}
|
|
disabled={setPinned.isPending}
|
|
onClick={() => void handleTogglePinned()}
|
|
title={
|
|
skill.pinned
|
|
? t.settings.skills.unpinAction
|
|
: t.settings.skills.pinAction
|
|
}
|
|
>
|
|
<BookmarkIcon
|
|
className={cn("size-3.5", skill.pinned && "fill-current")}
|
|
/>
|
|
</Button>
|
|
)}
|
|
{compression?.enabled && canSetAlwaysOn && (
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className={cn(
|
|
"h-8 w-8 shrink-0",
|
|
skill.always_on && "text-amber-600 hover:text-amber-700",
|
|
)}
|
|
disabled={setAlwaysOn.isPending}
|
|
onClick={() => void handleToggleAlwaysOn(!skill.always_on)}
|
|
title={
|
|
skill.always_on
|
|
? "取消常驻(将被压缩,改由 search_skills 检索)"
|
|
: "设为常驻(免压缩,始终全文注入提示词)"
|
|
}
|
|
>
|
|
<Anchor
|
|
className={cn("size-3.5", skill.always_on && "fill-current")}
|
|
/>
|
|
</Button>
|
|
)}
|
|
{canTogglePublish && (
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className="h-8 w-8 shrink-0"
|
|
disabled={setPublished.isPending}
|
|
onClick={() => void handleTogglePublished(!skill.published)}
|
|
title={
|
|
skill.published
|
|
? t.settings.skills.unpublishAction
|
|
: t.settings.skills.publishAction
|
|
}
|
|
>
|
|
{skill.published ? (
|
|
<LockIcon className="size-3.5" />
|
|
) : (
|
|
<GlobeIcon className="size-3.5" />
|
|
)}
|
|
</Button>
|
|
)}
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className="h-8 w-8 shrink-0"
|
|
disabled={duplicateSkillMutation.isPending}
|
|
onClick={handleOpenDuplicate}
|
|
title="复制为新技能"
|
|
>
|
|
<CopyIcon className="size-3.5" />
|
|
</Button>
|
|
{canDelete && (
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className="text-destructive hover:text-destructive h-8 w-8 shrink-0"
|
|
onClick={() => setConfirmDeleteOpen(true)}
|
|
title={t.settings.skills.deleteAction}
|
|
>
|
|
<Trash2Icon className="size-3.5" />
|
|
</Button>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{isCard ? (
|
|
<div
|
|
className={cn(
|
|
"flex h-full min-w-0 flex-col rounded-lg border p-3 transition-shadow hover:shadow-sm dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white",
|
|
isOffline && "bg-muted/60 border-dashed dark:bg-[#071D36]",
|
|
)}
|
|
>
|
|
<div
|
|
className="min-w-0 flex-1 cursor-pointer"
|
|
onClick={() => setDetailOpen(true)}
|
|
>
|
|
{badgeGroup}
|
|
<p className="text-muted-foreground mt-1 line-clamp-3 text-sm">
|
|
{desensitize(skill.description ?? "")}
|
|
</p>
|
|
{metaNodes}
|
|
</div>
|
|
<div className="mt-2 flex flex-wrap items-center justify-end gap-1 border-t pt-2 dark:border-[#213D5E]">
|
|
{actionButtons}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<Item
|
|
className={cn(
|
|
"w-full dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white",
|
|
isOffline && "bg-muted/60 border-dashed dark:bg-[#071D36]",
|
|
)}
|
|
variant="outline"
|
|
>
|
|
<ItemContent
|
|
className="cursor-pointer"
|
|
onClick={() => setDetailOpen(true)}
|
|
>
|
|
<ItemTitle>{badgeGroup}</ItemTitle>
|
|
<ItemDescription className="line-clamp-4">
|
|
{desensitize(skill.description ?? "")}
|
|
</ItemDescription>
|
|
{metaNodes}
|
|
</ItemContent>
|
|
<ItemActions>{actionButtons}</ItemActions>
|
|
</Item>
|
|
)}
|
|
<Dialog open={duplicateOpen} onOpenChange={setDuplicateOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>复制技能</DialogTitle>
|
|
<DialogDescription>
|
|
将「{desensitize(skill.name)}」复制为一个属于你的新技能。请输入新名称（仅小写字母、数字、- 或 _）。
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<Input
|
|
value={duplicateName}
|
|
onChange={(e) => setDuplicateName(e.currentTarget.value)}
|
|
placeholder="new-skill-name"
|
|
autoFocus
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
void handleDuplicate();
|
|
}
|
|
}}
|
|
/>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setDuplicateOpen(false)}
|
|
disabled={duplicateSkillMutation.isPending}
|
|
>
|
|
{t.common.cancel}
|
|
</Button>
|
|
<Button
|
|
onClick={() => void handleDuplicate()}
|
|
disabled={duplicateSkillMutation.isPending}
|
|
>
|
|
{duplicateSkillMutation.isPending ? t.common.loading : "复制"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
<Dialog open={confirmDeleteOpen} onOpenChange={setConfirmDeleteOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{t.settings.skills.deleteAction}</DialogTitle>
|
|
<DialogDescription>
|
|
{desensitize(
|
|
t.settings.skills.deleteConfirm.replace("{name}", skill.name),
|
|
)}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setConfirmDeleteOpen(false)}
|
|
disabled={deleteCustom.isPending || deleteBuiltin.isPending}
|
|
>
|
|
{t.common.cancel}
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => void handleDelete()}
|
|
disabled={deleteCustom.isPending || deleteBuiltin.isPending}
|
|
>
|
|
{deleteCustom.isPending || deleteBuiltin.isPending
|
|
? t.common.loading
|
|
: t.common.delete}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
<Dialog open={confirmOfflineOpen} onOpenChange={setConfirmOfflineOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{t.settings.skills.offlineConfirmTitle}</DialogTitle>
|
|
<DialogDescription>
|
|
{t.settings.skills.offlineConfirmDescription.replace(
|
|
"{name}",
|
|
desensitize(skill.name),
|
|
)}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setConfirmOfflineOpen(false)}
|
|
disabled={setEnabled.isPending}
|
|
>
|
|
{t.common.cancel}
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => void handleSetEnabled(false)}
|
|
disabled={setEnabled.isPending}
|
|
>
|
|
{setEnabled.isPending
|
|
? t.common.loading
|
|
: t.settings.skills.offlineAction}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
<TagPickerDialog
|
|
open={tagPickerOpen}
|
|
onOpenChange={setTagPickerOpen}
|
|
targetType="skill"
|
|
targetId={skill.name}
|
|
currentTags={skill.tags ?? []}
|
|
/>
|
|
<SkillDetailDialog
|
|
skillName={skill.name}
|
|
open={detailOpen}
|
|
onOpenChange={setDetailOpen}
|
|
/>
|
|
|
|
<PublishSquarePickerDialog
|
|
open={publishPickerOpen}
|
|
onOpenChange={setPublishPickerOpen}
|
|
squares={cardPublishSquares?.squares ?? []}
|
|
defaultSquareId={skill.square_id || cardPublishSquares?.default_square_id}
|
|
loading={setPublished.isPending}
|
|
onConfirm={(squareId) => void handlePublishToSquare(squareId)}
|
|
description="请选择要把该技能发布到哪个广场。每个技能只能归属一个广场，不会重复出现。"
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function EmptySkill() {
|
|
const { t } = useI18n();
|
|
return (
|
|
<Empty>
|
|
<EmptyHeader>
|
|
<EmptyMedia variant="icon">
|
|
<SparklesIcon />
|
|
</EmptyMedia>
|
|
<EmptyTitle>{t.settings.skills.emptyTitle}</EmptyTitle>
|
|
<EmptyDescription>
|
|
{t.settings.skills.emptyDescription}
|
|
</EmptyDescription>
|
|
</EmptyHeader>
|
|
</Empty>
|
|
);
|
|
}
|
|
|
|
function InstallSkillDialog({
|
|
open,
|
|
onClose,
|
|
isAdmin,
|
|
}: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
isAdmin: boolean;
|
|
}) {
|
|
const { t } = useI18n();
|
|
const dialog = t.settings.skills.installDialog;
|
|
const inputRef = useRef<HTMLInputElement | null>(null);
|
|
const [file, setFile] = useState<File | null>(null);
|
|
const [validation, setValidation] = useState<ValidateSkillUploadResponse | null>(null);
|
|
const [validationError, setValidationError] = useState<string | null>(null);
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
const [targetCategory, setTargetCategory] = useState<"custom" | "public">("custom");
|
|
// After a successful install the dialog switches to a "set Chinese name" step.
|
|
// `installedName` holds the just-installed skill name (null = still on the upload step).
|
|
const [installedName, setInstalledName] = useState<string | null>(null);
|
|
const [nameZhDraft, setNameZhDraft] = useState("");
|
|
// Optional model override for the "AI generate" button (null = configured default).
|
|
const [nameZhModel, setNameZhModel] = useState<string | null>(null);
|
|
const validateMutation = useValidateSkillUpload();
|
|
const installMutation = useInstallSkillUpload();
|
|
const setNameZhMutation = useSetSkillNameZh();
|
|
const generateNameZhMutation = useGenerateSkillNameZh();
|
|
|
|
const validateFile = useCallback(
|
|
async (selected: File, category: "custom" | "public") => {
|
|
setValidation(null);
|
|
setValidationError(null);
|
|
try {
|
|
const result = await validateMutation.mutateAsync({
|
|
file: selected,
|
|
targetCategory: category,
|
|
});
|
|
setValidation(result);
|
|
} catch (err) {
|
|
setValidationError(err instanceof Error ? err.message : String(err));
|
|
}
|
|
},
|
|
[validateMutation],
|
|
);
|
|
|
|
const reset = useCallback(() => {
|
|
setFile(null);
|
|
setValidation(null);
|
|
setValidationError(null);
|
|
setIsDragging(false);
|
|
setTargetCategory("custom");
|
|
setInstalledName(null);
|
|
setNameZhDraft("");
|
|
setNameZhModel(null);
|
|
if (inputRef.current) inputRef.current.value = "";
|
|
}, []);
|
|
|
|
const handleClose = useCallback(() => {
|
|
if (
|
|
validateMutation.isPending ||
|
|
installMutation.isPending ||
|
|
setNameZhMutation.isPending ||
|
|
generateNameZhMutation.isPending
|
|
)
|
|
return;
|
|
reset();
|
|
onClose();
|
|
}, [
|
|
generateNameZhMutation.isPending,
|
|
installMutation.isPending,
|
|
onClose,
|
|
reset,
|
|
setNameZhMutation.isPending,
|
|
validateMutation.isPending,
|
|
]);
|
|
|
|
const acceptFile = useCallback(
|
|
async (selected: File) => {
|
|
const lower = selected.name.toLowerCase();
|
|
if (!lower.endsWith(".zip") && !lower.endsWith(".skill")) {
|
|
toast.error(dialog.rejectInvalidExt);
|
|
return;
|
|
}
|
|
setFile(selected);
|
|
await validateFile(selected, targetCategory);
|
|
},
|
|
[dialog.rejectInvalidExt, targetCategory, validateFile],
|
|
);
|
|
|
|
const onDrop = useCallback(
|
|
(e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
// Stop the global chat-upload listener on `document` from also receiving this drop.
|
|
// React's stopPropagation alone doesn't reach native document listeners — we need to
|
|
// halt the underlying DOM event too.
|
|
e.stopPropagation();
|
|
e.nativeEvent.stopImmediatePropagation();
|
|
setIsDragging(false);
|
|
const dropped = e.dataTransfer.files?.[0];
|
|
if (dropped) void acceptFile(dropped);
|
|
},
|
|
[acceptFile],
|
|
);
|
|
|
|
const onPick = useCallback(
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const picked = e.target.files?.[0];
|
|
if (picked) void acceptFile(picked);
|
|
},
|
|
[acceptFile],
|
|
);
|
|
|
|
const handleInstall = useCallback(
|
|
async (overwrite: boolean) => {
|
|
if (!file) return;
|
|
try {
|
|
const result = await installMutation.mutateAsync({ file, overwrite, targetCategory });
|
|
toast.success(
|
|
(result.overwritten ? dialog.installSuccessReplaced : dialog.installSuccess).replace(
|
|
"{name}",
|
|
result.skill_name,
|
|
),
|
|
);
|
|
// Stay open and advance to the optional "set Chinese name" step.
|
|
setInstalledName(result.skill_name);
|
|
setNameZhDraft("");
|
|
setNameZhModel(null);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
},
|
|
[dialog.installSuccess, dialog.installSuccessReplaced, file, installMutation, targetCategory],
|
|
);
|
|
|
|
const handleGenerateNameZh = useCallback(async () => {
|
|
if (!installedName) return;
|
|
try {
|
|
const result = await generateNameZhMutation.mutateAsync({
|
|
skillName: installedName,
|
|
modelName: nameZhModel,
|
|
});
|
|
setNameZhDraft(result.name_zh ?? "");
|
|
toast.success(dialog.nameZhGenerated);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
}, [dialog.nameZhGenerated, generateNameZhMutation, installedName, nameZhModel]);
|
|
|
|
const handleSaveNameZh = useCallback(async () => {
|
|
if (!installedName) return;
|
|
const trimmed = nameZhDraft.trim();
|
|
try {
|
|
// Empty draft = keep whatever is stored (or none); just close.
|
|
if (trimmed) {
|
|
await setNameZhMutation.mutateAsync({ skillName: installedName, nameZh: trimmed });
|
|
toast.success(dialog.nameZhSaved);
|
|
}
|
|
reset();
|
|
onClose();
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
|
}
|
|
}, [dialog.nameZhSaved, installedName, nameZhDraft, onClose, reset, setNameZhMutation]);
|
|
|
|
const isPublicConflict = validation?.conflict && validation.conflict_kind === "public";
|
|
const isCustomConflict = validation?.conflict && validation.conflict_kind === "custom";
|
|
// Admin targeting public directory can overwrite an existing public skill.
|
|
const adminCanOverwritePublic = isAdmin && targetCategory === "public" && !!isPublicConflict;
|
|
const canInstall = !!validation && !validationError && validation.can_install_as_is;
|
|
const canOverwrite = !!validation && !validationError && validation.can_overwrite;
|
|
const ownCustomCanOverwrite = !!isCustomConflict && !!validation?.owned_by_me && canOverwrite;
|
|
const otherCustomConflict = !!isCustomConflict && !!validation?.owned_by_other;
|
|
// On-disk leftover with no ownership record: replaceable by whoever uploads it.
|
|
const unclaimedCustomConflict =
|
|
!!isCustomConflict && !validation?.owned_by_me && !validation?.owned_by_other && canOverwrite;
|
|
const customConflictMessage = !validation
|
|
? ""
|
|
: otherCustomConflict
|
|
? dialog.conflictOwnedByOther
|
|
.replace("{name}", validation.skill_name)
|
|
.replace(
|
|
"{owner}",
|
|
validation.owner_username ?? validation.owner_user_id ?? "—",
|
|
)
|
|
: validation.owned_by_me
|
|
? (ownCustomCanOverwrite
|
|
? dialog.conflictOwnedByMe
|
|
: dialog.conflictOwnedByMeWrongTarget
|
|
).replace("{name}", validation.skill_name)
|
|
: unclaimedCustomConflict
|
|
? dialog.conflictUnclaimed.replace("{name}", validation.skill_name)
|
|
: dialog.conflictCustom.replace("{name}", validation.skill_name);
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(o) => !o && handleClose()}>
|
|
<DialogContent className="max-w-xl">
|
|
<DialogHeader>
|
|
<DialogTitle>{installedName ? dialog.nameZhStepTitle : dialog.title}</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
{installedName && (
|
|
<>
|
|
<div className="flex flex-col gap-4">
|
|
<p className="text-muted-foreground text-sm">
|
|
{dialog.nameZhStepHint.replace("{name}", desensitize(installedName))}
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
value={nameZhDraft}
|
|
onChange={(e) => setNameZhDraft(e.currentTarget.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") void handleSaveNameZh();
|
|
}}
|
|
placeholder={dialog.nameZhPlaceholder}
|
|
className="h-9 flex-1"
|
|
autoFocus
|
|
disabled={setNameZhMutation.isPending || generateNameZhMutation.isPending}
|
|
/>
|
|
<ModelNameSelect
|
|
value={nameZhModel}
|
|
onChange={setNameZhModel}
|
|
disabled={setNameZhMutation.isPending || generateNameZhMutation.isPending}
|
|
triggerClassName="h-9 w-[9rem] shrink-0"
|
|
/>
|
|
<Button
|
|
variant="outline"
|
|
className="h-9 shrink-0 gap-1 border-violet-300 bg-violet-50 text-violet-700 hover:bg-violet-100 hover:text-violet-800 dark:border-violet-500/40 dark:bg-violet-500/15 dark:text-violet-300 dark:hover:bg-violet-500/25"
|
|
onClick={() => void handleGenerateNameZh()}
|
|
disabled={setNameZhMutation.isPending || generateNameZhMutation.isPending}
|
|
title={dialog.nameZhGenerate}
|
|
>
|
|
{generateNameZhMutation.isPending ? (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
) : (
|
|
<SparklesIcon className="size-4" />
|
|
)}
|
|
{dialog.nameZhGenerate}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleClose}
|
|
disabled={setNameZhMutation.isPending || generateNameZhMutation.isPending}
|
|
>
|
|
{dialog.nameZhSkip}
|
|
</Button>
|
|
<Button
|
|
onClick={() => void handleSaveNameZh()}
|
|
disabled={setNameZhMutation.isPending || generateNameZhMutation.isPending}
|
|
>
|
|
{setNameZhMutation.isPending && <Loader2 className="size-4 animate-spin" />}
|
|
{t.common.save}
|
|
</Button>
|
|
</DialogFooter>
|
|
</>
|
|
)}
|
|
|
|
{!installedName && (
|
|
<>
|
|
<div className="flex flex-col gap-4">
|
|
<div
|
|
onDragOver={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
e.nativeEvent.stopImmediatePropagation();
|
|
setIsDragging(true);
|
|
}}
|
|
onDragLeave={() => setIsDragging(false)}
|
|
onDrop={onDrop}
|
|
className={cn(
|
|
"flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed p-6 text-center transition-colors",
|
|
isDragging ? "border-primary bg-accent/40" : "border-muted-foreground/30",
|
|
)}
|
|
>
|
|
<FileArchive className="text-muted-foreground size-8" />
|
|
<div className="text-muted-foreground text-sm">
|
|
{dialog.dropHint}
|
|
<button
|
|
type="button"
|
|
className="text-primary ml-1 underline underline-offset-4"
|
|
onClick={() => inputRef.current?.click()}
|
|
>
|
|
{dialog.chooseFile}
|
|
</button>
|
|
</div>
|
|
{file && (
|
|
<div className="text-muted-foreground mt-1 text-xs">
|
|
{file.name} · {(file.size / 1024).toFixed(1)} KB
|
|
</div>
|
|
)}
|
|
<input
|
|
ref={inputRef}
|
|
type="file"
|
|
accept=".zip,.skill,application/zip"
|
|
hidden
|
|
onChange={onPick}
|
|
/>
|
|
</div>
|
|
|
|
{isAdmin && (
|
|
<div className="flex items-center gap-3 text-sm">
|
|
<span className="text-muted-foreground shrink-0">{dialog.targetCategoryLabel}</span>
|
|
<div className="flex gap-4">
|
|
{(["custom", "public"] as const).map((cat) => (
|
|
<label key={cat} className="flex cursor-pointer items-center gap-1.5">
|
|
<input
|
|
type="radio"
|
|
name="targetCategory"
|
|
value={cat}
|
|
checked={targetCategory === cat}
|
|
onChange={() => {
|
|
setTargetCategory(cat);
|
|
if (file) void validateFile(file, cat);
|
|
}}
|
|
className="accent-primary"
|
|
/>
|
|
<span>{cat === "custom" ? dialog.categoryCustom : dialog.categoryPublic}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{validateMutation.isPending && (
|
|
<div className="text-muted-foreground flex items-center gap-2 text-sm">
|
|
<Loader2 className="size-4 animate-spin" />
|
|
{dialog.validating}
|
|
</div>
|
|
)}
|
|
|
|
{validationError && (
|
|
<div className="text-destructive flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm">
|
|
<AlertCircle className="mt-0.5 size-4 shrink-0" />
|
|
<span>{validationError}</span>
|
|
</div>
|
|
)}
|
|
|
|
{validation && !validationError && (
|
|
<div className="flex flex-col gap-2 rounded-md border p-3 text-sm">
|
|
<div className="flex items-center gap-2 text-emerald-600">
|
|
<CheckCircle2 className="size-4" />
|
|
<span className="font-medium">{desensitize(validation.skill_name)}</span>
|
|
</div>
|
|
<Field label={dialog.descriptionLabel}>
|
|
<span className="line-clamp-3 whitespace-pre-wrap">
|
|
{validation.description ? desensitize(validation.description) : "—"}
|
|
</span>
|
|
</Field>
|
|
{validation.license && (
|
|
<Field label={dialog.licenseLabel}>{desensitize(validation.license)}</Field>
|
|
)}
|
|
{validation.allowed_tools.length > 0 && (
|
|
<Field label={dialog.toolsLabel}>
|
|
<div className="flex flex-wrap gap-1">
|
|
{validation.allowed_tools.map((tool) => (
|
|
<Badge key={tool} variant="secondary" className="text-xs">
|
|
{desensitize(tool)}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</Field>
|
|
)}
|
|
{validation.warnings.length > 0 && (
|
|
<Field label={dialog.warningsLabel}>
|
|
<ul className="list-disc pl-4 text-xs">
|
|
{validation.warnings.map((w, idx) => (
|
|
<li key={idx}>{desensitize(w)}</li>
|
|
))}
|
|
</ul>
|
|
</Field>
|
|
)}
|
|
{isCustomConflict && (
|
|
<div
|
|
className={cn(
|
|
"mt-1 flex items-start gap-2 text-xs",
|
|
ownCustomCanOverwrite || unclaimedCustomConflict ? "text-amber-600" : "text-destructive",
|
|
)}
|
|
>
|
|
<AlertCircle className="mt-0.5 size-3.5 shrink-0" />
|
|
<span>
|
|
{desensitize(customConflictMessage)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{isPublicConflict && (
|
|
<div className={cn("mt-1 flex items-start gap-2 text-xs", adminCanOverwritePublic ? "text-amber-600" : "text-destructive")}>
|
|
<AlertCircle className="mt-0.5 size-3.5 shrink-0" />
|
|
<span>
|
|
{desensitize(
|
|
(adminCanOverwritePublic ? dialog.conflictPublicAdminHint : dialog.conflictPublic).replace("{name}", validation.skill_name),
|
|
)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleClose}
|
|
disabled={installMutation.isPending}
|
|
>
|
|
{dialog.cancel}
|
|
</Button>
|
|
{canOverwrite && (
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => handleInstall(true)}
|
|
disabled={installMutation.isPending}
|
|
>
|
|
{installMutation.isPending && (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
)}
|
|
{dialog.replace}
|
|
</Button>
|
|
)}
|
|
<Button
|
|
onClick={() => handleInstall(false)}
|
|
disabled={!canInstall || installMutation.isPending}
|
|
>
|
|
{installMutation.isPending && (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
)}
|
|
{installMutation.isPending ? dialog.installing : dialog.install}
|
|
</Button>
|
|
</DialogFooter>
|
|
</>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function Field({
|
|
label,
|
|
children,
|
|
}: {
|
|
label: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="grid grid-cols-[80px_1fr] gap-2">
|
|
<span className="text-muted-foreground shrink-0 text-xs">{label}</span>
|
|
<div className="min-w-0">{children}</div>
|
|
</div>
|
|
);
|
|
}
|