812 lines
34 KiB
TypeScript
812 lines
34 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
import {
|
|
Bot,
|
|
Boxes,
|
|
Braces,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
Compass,
|
|
Crown,
|
|
Edit,
|
|
FileCode2,
|
|
Globe,
|
|
LineChart,
|
|
MoreVertical,
|
|
PenTool,
|
|
Pencil,
|
|
PencilIcon,
|
|
Plus,
|
|
Search,
|
|
ShieldCheck,
|
|
Sparkles,
|
|
Target,
|
|
Trash2,
|
|
Upload,
|
|
Wand2,
|
|
Workflow,
|
|
X,
|
|
} from 'lucide-react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useTheme } from '../../contexts/ThemeContext';
|
|
import { useExpertAuthBootstrap } from '../../hooks';
|
|
import { knowledgetoolUrl } from '@/hooks/useExpertAuthBootstrap';
|
|
import { MessagePlugin } from 'tdesign-react';
|
|
|
|
interface Skill {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
category: string;
|
|
highlight: string;
|
|
relatedCount: number;
|
|
version: string;
|
|
inputCount: number;
|
|
outputCount: number;
|
|
isNew?: boolean;
|
|
isMine: boolean;
|
|
source?: string;
|
|
}
|
|
|
|
interface ApiSkill {
|
|
id: number;
|
|
name: string;
|
|
description: string;
|
|
source?: string;
|
|
}
|
|
|
|
interface SkillsResponse {
|
|
items: ApiSkill[];
|
|
total: number;
|
|
page: number;
|
|
page_size: number;
|
|
}
|
|
|
|
interface CreateSkillThreadResponse {
|
|
id: number;
|
|
title: string;
|
|
archived: boolean;
|
|
expert_agent_id: number | null;
|
|
user_id: string;
|
|
created_at: string;
|
|
updated_at: string;
|
|
}
|
|
|
|
type CategoryKey = 'all' | 'writing' | 'analysis' | 'decision' | 'validation' | 'workflow';
|
|
|
|
const CATEGORY_LABELS: Record<CategoryKey, string> = {
|
|
all: '全部类型',
|
|
writing: '编辑类',
|
|
analysis: '分析类',
|
|
decision: '决策类',
|
|
validation: '校验类',
|
|
workflow: '流程类',
|
|
};
|
|
|
|
const categoryOrder: CategoryKey[] = ['all', 'writing', 'analysis', 'decision', 'validation', 'workflow'];
|
|
|
|
const AVATAR_STYLES = [
|
|
{
|
|
Icon: Bot,
|
|
wrapper: 'from-rose-100 via-red-50 to-white text-red-500',
|
|
glow: 'shadow-red-100/80',
|
|
ring: 'ring-red-100',
|
|
orb: 'bg-red-500/10',
|
|
},
|
|
{
|
|
Icon: Wand2,
|
|
wrapper: 'from-violet-100 via-fuchsia-50 to-white text-violet-500',
|
|
glow: 'shadow-violet-100/80',
|
|
ring: 'ring-violet-100',
|
|
orb: 'bg-violet-500/10',
|
|
},
|
|
{
|
|
Icon: LineChart,
|
|
wrapper: 'from-cyan-100 via-sky-50 to-white text-sky-500',
|
|
glow: 'shadow-sky-100/80',
|
|
ring: 'ring-sky-100',
|
|
orb: 'bg-sky-500/10',
|
|
},
|
|
{
|
|
Icon: ShieldCheck,
|
|
wrapper: 'from-emerald-100 via-green-50 to-white text-emerald-500',
|
|
glow: 'shadow-emerald-100/80',
|
|
ring: 'ring-emerald-100',
|
|
orb: 'bg-emerald-500/10',
|
|
},
|
|
{
|
|
Icon: Workflow,
|
|
wrapper: 'from-amber-100 via-yellow-50 to-white text-amber-500',
|
|
glow: 'shadow-amber-100/80',
|
|
ring: 'ring-amber-100',
|
|
orb: 'bg-amber-500/10',
|
|
},
|
|
{
|
|
Icon: FileCode2,
|
|
wrapper: 'from-indigo-100 via-blue-50 to-white text-indigo-500',
|
|
glow: 'shadow-indigo-100/80',
|
|
ring: 'ring-indigo-100',
|
|
orb: 'bg-indigo-500/10',
|
|
},
|
|
{
|
|
Icon: Target,
|
|
wrapper: 'from-pink-100 via-rose-50 to-white text-pink-500',
|
|
glow: 'shadow-pink-100/80',
|
|
ring: 'ring-pink-100',
|
|
orb: 'bg-pink-500/10',
|
|
},
|
|
{
|
|
Icon: Compass,
|
|
wrapper: 'from-orange-100 via-amber-50 to-white text-orange-500',
|
|
glow: 'shadow-orange-100/80',
|
|
ring: 'ring-orange-100',
|
|
orb: 'bg-orange-500/10',
|
|
},
|
|
];
|
|
|
|
const hashString = (value: string) =>
|
|
value.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
|
|
|
const inferCategory = (skill: ApiSkill): CategoryKey => {
|
|
const text = `${skill.name} ${skill.description}`.toLowerCase();
|
|
|
|
if (/(summary|readme|writer|copy|frontend|narrative|edit|document)/.test(text)) return 'writing';
|
|
if (/(analysis|audience|risk|search|insight|research|data)/.test(text)) return 'analysis';
|
|
if (/(plan|decision|goal|strategy|logic|outreach)/.test(text)) return 'decision';
|
|
if (/(check|validate|review|guard|test|lint)/.test(text)) return 'validation';
|
|
return 'workflow';
|
|
};
|
|
|
|
const buildVersion = (id: number) => `v${1 + (id % 3)}.${(id % 8) + 1}`;
|
|
const buildCount = (id: number, offset: number) => 2 + ((id + offset) % 4);
|
|
const buildRelatedCount = (id: number) => 3 + (id % 4);
|
|
|
|
const mapApiSkillToUiSkill = (skill: ApiSkill, type: 'official' | 'mine'): Skill => ({
|
|
id: String(skill.id),
|
|
name: skill.name,
|
|
description: skill.description,
|
|
category: inferCategory(skill),
|
|
highlight: type === 'mine' ? '已接入' : '可添加',
|
|
relatedCount: buildRelatedCount(skill.id),
|
|
version: buildVersion(skill.id),
|
|
inputCount: buildCount(skill.id, 1),
|
|
outputCount: buildCount(skill.id, 2),
|
|
isNew: skill.id % 3 === 0,
|
|
isMine: type === 'mine',
|
|
});
|
|
|
|
const getAvatarStyle = (skillId: string) => AVATAR_STYLES[hashString(skillId) % AVATAR_STYLES.length];
|
|
|
|
export default function SkillsWorkshop() {
|
|
const navigate = useNavigate();
|
|
const { authedFetch } = useExpertAuthBootstrap();
|
|
const { theme } = useTheme();
|
|
const isDarkMode = theme === 'dark';
|
|
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [selectedFilter, setSelectedFilter] = useState<'all' | 'mine'>('all');
|
|
const [selectedCategory, setSelectedCategory] = useState<CategoryKey>('all');
|
|
const [skills, setSkills] = useState<Skill[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
|
|
const [isCreatingSkillThread, setIsCreatingSkillThread] = useState(false);
|
|
const [openCardMenuId, setOpenCardMenuId] = useState<string | null>(null);
|
|
const [editingSkill, setEditingSkill] = useState<Skill | null>(null);
|
|
const [addingSkillId, setAddingSkillId] = useState<string | null>(null);
|
|
const [isUploading, setIsUploading] = useState(false);
|
|
const [isCreatingByUpload, setIsCreatingByUpload] = useState(false);
|
|
const [isAiEditing, setIsAiEditing] = useState(false);
|
|
|
|
const createMenuRef = useRef<HTMLDivElement | null>(null);
|
|
const cardMenuRef = useRef<HTMLDivElement | null>(null);
|
|
const uploadInputRef = useRef<HTMLInputElement | null>(null);
|
|
const createUploadInputRef = useRef<HTMLInputElement | null>(null);
|
|
|
|
useEffect(() => {
|
|
let canceled = false;
|
|
|
|
const fetchByType = async (type: 'official' | 'mine') => {
|
|
const params = new URLSearchParams({
|
|
type,
|
|
keyword: searchTerm.trim(),
|
|
page: '1',
|
|
page_size: '100',
|
|
});
|
|
const res = await authedFetch(`${knowledgetoolUrl}/api/v1/skills?${params.toString()}`, {
|
|
method: 'GET',
|
|
});
|
|
if (!res.ok) {
|
|
throw new Error(`加载技能失败: ${res.status} ${res.statusText}`);
|
|
}
|
|
const data = (await res.json()) as SkillsResponse;
|
|
return data.items.map((item) => mapApiSkillToUiSkill(item, type));
|
|
};
|
|
|
|
const loadSkills = async () => {
|
|
setLoading(true);
|
|
setError('');
|
|
try {
|
|
const list =
|
|
selectedFilter === 'all'
|
|
? await Promise.all([fetchByType('official'), fetchByType('mine')])
|
|
: [await fetchByType('mine')];
|
|
|
|
if (canceled) return;
|
|
|
|
const merged = selectedFilter === 'all' ? [...list[0], ...list[1]] : list[0];
|
|
const deduped = Array.from(new Map(merged.map((item) => [item.id, item])).values());
|
|
setSkills(deduped);
|
|
} catch {
|
|
if (canceled) return;
|
|
setError('加载技能失败，请稍后重试');
|
|
setSkills([]);
|
|
} finally {
|
|
if (!canceled) setLoading(false);
|
|
}
|
|
};
|
|
|
|
void loadSkills();
|
|
|
|
return () => {
|
|
canceled = true;
|
|
};
|
|
}, [searchTerm, selectedFilter, authedFetch]);
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
const target = event.target as Node;
|
|
if (createMenuRef.current && !createMenuRef.current.contains(target)) {
|
|
setIsCreateMenuOpen(false);
|
|
}
|
|
if (cardMenuRef.current && !cardMenuRef.current.contains(target)) {
|
|
setOpenCardMenuId(null);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
};
|
|
}, []);
|
|
|
|
const filteredSkills = useMemo(
|
|
() => skills.filter((skill) => selectedCategory === 'all' || skill.category === selectedCategory),
|
|
[selectedCategory, skills],
|
|
);
|
|
|
|
const categoryCounts = useMemo(
|
|
() =>
|
|
categoryOrder.reduce<Record<CategoryKey, number>>((acc, category) => {
|
|
acc[category] = category === 'all' ? skills.length : skills.filter((skill) => skill.category === category).length;
|
|
return acc;
|
|
}, {} as Record<CategoryKey, number>),
|
|
[skills],
|
|
);
|
|
|
|
const mySkillCount = skills.filter((skill) => skill.isMine).length;
|
|
const officialSkillCount = skills.filter((skill) => !skill.isMine).length;
|
|
|
|
const handlePublishSkill = async (skillId: string) => {
|
|
setOpenCardMenuId(null);
|
|
try {
|
|
const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/skills/publish`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
skill_id: parseInt(skillId, 10),
|
|
}),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
throw new Error(`发布失败: ${res.status} ${res.statusText}`);
|
|
}
|
|
} catch (err) {
|
|
console.error('发布技能失败', err);
|
|
setError('发布技能失败，请稍后重试');
|
|
}
|
|
};
|
|
|
|
const handleEditSkill = (skillId: string) => {
|
|
setOpenCardMenuId(null);
|
|
const skill = skills.find((item) => item.id === skillId) ?? null;
|
|
setEditingSkill(skill);
|
|
};
|
|
|
|
const handleDeleteSkill = async (skillId: string) => {
|
|
setOpenCardMenuId(null);
|
|
try {
|
|
const res = await authedFetch(`${knowledgetoolUrl}/api/v1/skills/mine/${skillId}`, {
|
|
method: 'DELETE',
|
|
});
|
|
if (!res.ok) {
|
|
throw new Error(`删除失败: ${res.status} ${res.statusText}`);
|
|
}
|
|
setSkills((prev) => prev.filter((item) => item.id !== skillId));
|
|
MessagePlugin.success('操作成功');
|
|
} catch (err) {
|
|
console.error('删除技能失败', err);
|
|
setError('删除技能失败，请稍后重试');
|
|
}
|
|
};
|
|
|
|
const handleUploadSkillFile = async (file: File, skillId: string) => {
|
|
setIsUploading(true);
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
const res = await authedFetch(`${knowledgetoolUrl}/api/v1/skills/${skillId}/upload`, {
|
|
method: 'PUT',
|
|
body: formData,
|
|
});
|
|
if (!res.ok) {
|
|
throw new Error(`上传失败: ${res.status} ${res.statusText}`);
|
|
}
|
|
setEditingSkill(null);
|
|
} catch (err) {
|
|
console.error('上传技能失败', err);
|
|
setError('上传技能失败，请稍后重试');
|
|
} finally {
|
|
setIsUploading(false);
|
|
if (uploadInputRef.current) uploadInputRef.current.value = '';
|
|
}
|
|
};
|
|
|
|
const handleAddOfficialSkill = async (skillId: string) => {
|
|
if (addingSkillId) return;
|
|
setAddingSkillId(skillId);
|
|
try {
|
|
const res = await authedFetch(`${knowledgetoolUrl}/api/v1/skills/mine/add`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ official_skill_id: parseInt(skillId, 10) }),
|
|
});
|
|
if (!res.ok) {
|
|
throw new Error(`添加失败: ${res.status} ${res.statusText}`);
|
|
}
|
|
setSkills((prev) => prev.map((item) => (item.id === skillId ? { ...item, isMine: true, highlight: '已接入' } : item)));
|
|
MessagePlugin.success('添加成功');
|
|
} catch (err) {
|
|
console.error('添加技能失败', err);
|
|
setError('添加技能失败，请稍后重试');
|
|
} finally {
|
|
setAddingSkillId(null);
|
|
}
|
|
};
|
|
|
|
const handleAiEditSkill = async (skill: Skill) => {
|
|
if (isAiEditing) return;
|
|
setIsAiEditing(true);
|
|
try {
|
|
const threadRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/threads`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
title: `编辑技能：${skill.name}`,
|
|
archived: true,
|
|
is_real_chat: true,
|
|
}),
|
|
});
|
|
if (!threadRes.ok) {
|
|
throw new Error(`创建会话失败: ${threadRes.status} ${threadRes.statusText}`);
|
|
}
|
|
const threadData = (await threadRes.json()) as CreateSkillThreadResponse;
|
|
const threadId = threadData?.id;
|
|
if (!threadId) throw new Error('创建会话成功，但未返回会话 id');
|
|
|
|
const copyRes = await authedFetch(
|
|
`${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${threadId}/copy-skill/${skill.id}`,
|
|
{ method: 'POST' },
|
|
);
|
|
if (!copyRes.ok) {
|
|
throw new Error(`复制技能失败: ${copyRes.status} ${copyRes.statusText}`);
|
|
}
|
|
|
|
setEditingSkill(null);
|
|
localStorage.setItem('skill_creator_thread_id', String(threadId));
|
|
navigate(`/skill-creator?id=${threadId}`);
|
|
} catch (err) {
|
|
console.error('AI 辅助编辑失败', err);
|
|
setError('AI 辅助编辑失败，请稍后重试');
|
|
} finally {
|
|
setIsAiEditing(false);
|
|
}
|
|
};
|
|
|
|
const handleCreateSkillByUpload = async (file: File) => {
|
|
setIsCreatingByUpload(true);
|
|
setIsCreateMenuOpen(false);
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
const res = await authedFetch(`${knowledgetoolUrl}/api/v1/skills/upload`, {
|
|
method: 'POST',
|
|
body: formData,
|
|
});
|
|
if (!res.ok) {
|
|
throw new Error(`上传失败: ${res.status} ${res.statusText}`);
|
|
}
|
|
} catch (err) {
|
|
console.error('上传技能失败', err);
|
|
setError('上传技能失败，请稍后重试');
|
|
} finally {
|
|
setIsCreatingByUpload(false);
|
|
if (createUploadInputRef.current) createUploadInputRef.current.value = '';
|
|
}
|
|
};
|
|
|
|
const handleCreateSkillByAgent = async () => {
|
|
if (isCreatingSkillThread) return;
|
|
setIsCreatingSkillThread(true);
|
|
setIsCreateMenuOpen(false);
|
|
try {
|
|
const threadRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/threads`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
title: '新建技能',
|
|
archived: true,
|
|
is_real_chat: true,
|
|
}),
|
|
});
|
|
|
|
if (!threadRes.ok) {
|
|
throw new Error(`创建技能会话失败: ${threadRes.status} ${threadRes.statusText}`);
|
|
}
|
|
|
|
const threadData = (await threadRes.json()) as CreateSkillThreadResponse;
|
|
const threadId = threadData?.id;
|
|
if (!threadId) {
|
|
throw new Error('创建技能会话成功，但未返回会话 id');
|
|
}
|
|
|
|
localStorage.setItem('skill_creator_thread_id', String(threadId));
|
|
navigate(`/qa-center/skill-creator?id=${threadId}`);
|
|
} catch (createError) {
|
|
console.error('创建技能会话失败', createError);
|
|
setError('创建技能会话失败，请稍后重试');
|
|
} finally {
|
|
setIsCreatingSkillThread(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={`w-full min-h-[calc(100vh-140px)] ${isDarkMode ? 'bg-slate-950 text-slate-100' : 'bg-[#fcfcfd] text-[#101828]'}`}>
|
|
{editingSkill && (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
|
|
onMouseDown={(event) => {
|
|
if (event.target === event.currentTarget) setEditingSkill(null);
|
|
}}
|
|
>
|
|
<div className={`relative w-[440px] overflow-hidden rounded-[28px] border shadow-2xl ${isDarkMode ? 'border-slate-700 bg-slate-900 text-slate-100' : 'border-[#f3d6d6] bg-white text-gray-900'}`}>
|
|
<div className="flex items-center justify-between px-6 pb-4 pt-5">
|
|
<h2 className="text-base font-semibold">编辑技能</h2>
|
|
<button
|
|
type="button"
|
|
onClick={() => setEditingSkill(null)}
|
|
className={`flex h-9 w-9 items-center justify-center rounded-xl transition ${isDarkMode ? 'text-slate-400 hover:bg-slate-700 hover:text-slate-100' : 'text-gray-400 hover:bg-[#fff3f3] hover:text-[#ef4444]'}`}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<p className={`px-6 pb-4 text-sm ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
选择编辑方式：<span className={`font-medium ${isDarkMode ? 'text-slate-200' : 'text-gray-800'}`}>{editingSkill.name}</span>
|
|
</p>
|
|
|
|
<div className={`mx-6 border-t ${isDarkMode ? 'border-slate-700' : 'border-[#f4e4e4]'}`} />
|
|
|
|
<div className="flex flex-col gap-3 p-4">
|
|
<button
|
|
type="button"
|
|
disabled={isAiEditing}
|
|
onClick={() => void handleAiEditSkill(editingSkill)}
|
|
className={`group/opt flex w-full items-center gap-4 rounded-[22px] border px-4 py-4 text-left transition ${isDarkMode ? 'border-slate-700 bg-slate-800/60 hover:bg-slate-800' : 'border-[#f5d4d4] bg-[#fffafa] hover:border-[#ffbdbd] hover:bg-[#fff5f5]'} ${isAiEditing ? 'cursor-not-allowed opacity-50' : ''}`}
|
|
>
|
|
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 to-indigo-600 text-white shadow-lg shadow-violet-500/30 ring-1 ring-white/20">
|
|
<Bot className="h-5 w-5" />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className={`text-sm font-medium ${isDarkMode ? 'text-slate-100' : 'text-gray-900'}`}>
|
|
{isAiEditing ? '处理中...' : 'AI 辅助编辑'}
|
|
</p>
|
|
<p className={`mt-0.5 text-xs ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>通过对话开启 AI 帮助您优化技能内容</p>
|
|
</div>
|
|
<ChevronRight className={`h-4 w-4 shrink-0 transition ${isDarkMode ? 'text-slate-500 group-hover/opt:text-slate-300' : 'text-gray-300 group-hover/opt:text-gray-500'}`} />
|
|
</button>
|
|
|
|
<input
|
|
ref={uploadInputRef}
|
|
type="file"
|
|
accept=".md,.zip"
|
|
className="hidden"
|
|
onChange={(event) => {
|
|
const file = event.target.files?.[0];
|
|
if (file && editingSkill) {
|
|
void handleUploadSkillFile(file, editingSkill.id);
|
|
}
|
|
}}
|
|
/>
|
|
<button
|
|
type="button"
|
|
disabled={isUploading}
|
|
onClick={() => uploadInputRef.current?.click()}
|
|
className={`group/opt flex w-full items-center gap-4 rounded-[22px] border px-4 py-4 text-left transition ${isDarkMode ? 'border-slate-700 bg-slate-800/60 hover:bg-slate-800' : 'border-[#f5d4d4] bg-[#fffafa] hover:border-[#ffbdbd] hover:bg-[#fff5f5]'} ${isUploading ? 'cursor-not-allowed opacity-50' : ''}`}
|
|
>
|
|
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-lg shadow-orange-400/30 ring-1 ring-white/20">
|
|
<Upload className="h-5 w-5" />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className={`text-sm font-medium ${isDarkMode ? 'text-slate-100' : 'text-gray-900'}`}>
|
|
{isUploading ? '上传中...' : '上传新版覆盖'}
|
|
</p>
|
|
<p className={`mt-0.5 text-xs ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>上传 `.md` 或 `.zip` 文件替换当前内容</p>
|
|
</div>
|
|
<ChevronRight className={`h-4 w-4 shrink-0 transition ${isDarkMode ? 'text-slate-500 group-hover/opt:text-slate-300' : 'text-gray-300 group-hover/opt:text-gray-500'}`} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className={`flex items-center justify-end gap-3 px-6 pb-5 pt-1 ${isDarkMode ? 'text-slate-400' : 'text-[#667085]'}`}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setEditingSkill(null)}
|
|
className={`rounded-xl px-4 py-2 text-sm transition ${isDarkMode ? 'hover:bg-slate-800 hover:text-slate-200' : 'hover:bg-[#fff3f3] hover:text-[#ef4444]'}`}
|
|
>
|
|
取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mx-auto max-w-[1360px] px-6 py-8">
|
|
<section className={`mb-7 ${isDarkMode ? '' : ''}`}>
|
|
<div className="flex items-start justify-between gap-5">
|
|
<div>
|
|
<h1 className={`text-[22px] font-bold tracking-tight ${isDarkMode ? 'text-slate-100' : 'text-[#111827]'}`}>技能工坊</h1>
|
|
<p className={`mt-2 text-sm ${isDarkMode ? 'text-slate-400' : 'text-[#667085]'}`}>统一管理系统中的技能资产，支持发现、接入、发布与编辑。</p>
|
|
</div>
|
|
|
|
<div className="relative" ref={createMenuRef}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsCreateMenuOpen((prev) => !prev)}
|
|
className="inline-flex h-11 items-center gap-2 rounded-xl bg-[#ea2d2d] px-5 text-sm font-medium text-white shadow-[0_10px_20px_-12px_rgba(234,45,45,0.7)] transition hover:bg-[#d92626]"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
新建技能体
|
|
</button>
|
|
|
|
{isCreateMenuOpen && (
|
|
<div className={`absolute right-0 top-[calc(100%+10px)] z-20 w-60 rounded-2xl border py-2 shadow-xl ${isDarkMode ? 'border-slate-700 bg-slate-900' : 'border-[#f0d6d6] bg-white'}`}>
|
|
<button
|
|
type="button"
|
|
disabled={isCreatingSkillThread}
|
|
onClick={() => void handleCreateSkillByAgent()}
|
|
className={`w-full px-4 py-3 text-left transition ${isDarkMode ? 'hover:bg-slate-800' : 'hover:bg-[#fff6f6]'} ${isCreatingSkillThread ? 'cursor-not-allowed opacity-50' : ''}`}
|
|
>
|
|
<p className={`text-sm font-medium ${isDarkMode ? 'text-slate-100' : 'text-gray-900'}`}>{isCreatingSkillThread ? '创建中...' : '通过 Agent 构建'}</p>
|
|
<p className={`mt-1 text-xs ${isDarkMode ? 'text-slate-400' : 'text-[#667085]'}`}>通过对话构建和训练 AI 技能</p>
|
|
</button>
|
|
|
|
<input
|
|
ref={createUploadInputRef}
|
|
type="file"
|
|
accept=".md,.zip"
|
|
className="hidden"
|
|
onChange={(event) => {
|
|
const file = event.target.files?.[0];
|
|
if (file) void handleCreateSkillByUpload(file);
|
|
}}
|
|
/>
|
|
<button
|
|
type="button"
|
|
disabled={isCreatingByUpload}
|
|
onClick={() => createUploadInputRef.current?.click()}
|
|
className={`w-full px-4 py-3 text-left transition ${isDarkMode ? 'hover:bg-slate-800' : 'hover:bg-[#fff6f6]'} ${isCreatingByUpload ? 'cursor-not-allowed opacity-50' : ''}`}
|
|
>
|
|
<p className={`text-sm font-medium ${isDarkMode ? 'text-slate-100' : 'text-gray-900'}`}>{isCreatingByUpload ? '上传中...' : '上传技能文件'}</p>
|
|
<p className={`mt-1 text-xs ${isDarkMode ? 'text-slate-400' : 'text-[#667085]'}`}>导入 `.md` 或 `.zip` 文件</p>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className={`mb-8 rounded-[28px] border px-6 py-6 ${isDarkMode ? 'border-slate-800 bg-slate-900/65' : 'border-[#f5d4d4] bg-white'}`}>
|
|
<div className="flex flex-col gap-5">
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-center">
|
|
<div className={`flex min-w-0 flex-1 items-center gap-3 rounded-2xl border px-4 py-3 ${isDarkMode ? 'border-slate-700 bg-slate-950/50' : 'border-[#f3b6b6] bg-white'}`}>
|
|
<Search className={`h-4 w-4 ${isDarkMode ? 'text-slate-400' : 'text-[#ff6b6b]'}`} />
|
|
<input
|
|
type="text"
|
|
placeholder="搜索技能名称..."
|
|
value={searchTerm}
|
|
onChange={(event) => setSearchTerm(event.target.value)}
|
|
className={`min-w-0 flex-1 bg-transparent text-sm outline-none ${isDarkMode ? 'text-slate-100 placeholder:text-slate-500' : 'text-gray-800 placeholder:text-[#9ca3af]'}`}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<div className={`inline-flex rounded-2xl border p-1 ${isDarkMode ? 'border-slate-700 bg-slate-950/50' : 'border-[#f3b6b6] bg-white'}`}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedFilter('all')}
|
|
className={`rounded-xl px-4 py-2 text-sm font-medium transition ${selectedFilter === 'all' ? 'bg-[#fff1f1] text-[#ef4444]' : isDarkMode ? 'text-slate-300 hover:bg-slate-800' : 'text-[#475467] hover:bg-[#f9fafb]'}`}
|
|
>
|
|
全部类型
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedFilter('mine')}
|
|
className={`rounded-xl px-4 py-2 text-sm font-medium transition ${selectedFilter === 'mine' ? 'bg-[#fff1f1] text-[#ef4444]' : isDarkMode ? 'text-slate-300 hover:bg-slate-800' : 'text-[#475467] hover:bg-[#f9fafb]'}`}
|
|
>
|
|
我的技能
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* <div className="flex flex-wrap items-center gap-3">
|
|
<span className={`text-sm ${isDarkMode ? 'text-slate-400' : 'text-[#475467]'}`}>按类型筛选：</span>
|
|
{categoryOrder.slice(1).map((category) => {
|
|
const active = selectedCategory === category;
|
|
return (
|
|
<button
|
|
key={category}
|
|
type="button"
|
|
onClick={() => setSelectedCategory(active ? 'all' : category)}
|
|
className={`rounded-full border px-4 py-2 text-sm transition ${
|
|
active
|
|
? 'border-[#ffb5b5] bg-[#fff5f5] text-[#ef4444]'
|
|
: isDarkMode
|
|
? 'border-slate-700 bg-slate-900/40 text-slate-300 hover:border-slate-600'
|
|
: 'border-[#f3d0d0] bg-white text-[#667085] hover:border-[#ffcccc] hover:text-[#ef4444]'
|
|
}`}
|
|
>
|
|
{CATEGORY_LABELS[category]}
|
|
</button>
|
|
);
|
|
})}
|
|
</div> */}
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
{loading ? (
|
|
<div className={`flex items-center justify-center rounded-[28px] border py-20 text-sm ${isDarkMode ? 'border-slate-800 bg-slate-900/60 text-slate-300' : 'border-[#f5d4d4] bg-white text-[#667085]'}`}>
|
|
正在加载技能...
|
|
</div>
|
|
) : error ? (
|
|
<div className={`flex flex-col items-center justify-center rounded-[28px] border px-4 py-20 text-center ${isDarkMode ? 'border-slate-800 bg-slate-900/60' : 'border-[#f5d4d4] bg-white'}`}>
|
|
<h3 className={`mb-2 text-lg font-semibold ${isDarkMode ? 'text-slate-100' : 'text-gray-900'}`}>加载失败</h3>
|
|
<p className={`text-sm ${isDarkMode ? 'text-slate-400' : 'text-[#667085]'}`}>{error}</p>
|
|
</div>
|
|
) : filteredSkills.length === 0 ? (
|
|
<div className={`flex flex-col items-center justify-center rounded-[28px] border px-4 py-20 text-center ${isDarkMode ? 'border-slate-800 bg-slate-900/60' : 'border-[#f5d4d4] bg-white'}`}>
|
|
<div className={`mb-4 flex h-12 w-12 items-center justify-center rounded-2xl ${isDarkMode ? 'bg-slate-800 text-slate-400' : 'bg-[#fff1f1] text-[#ff6b6b]'}`}>
|
|
<Search className="h-6 w-6" />
|
|
</div>
|
|
<h3 className={`mb-2 text-lg font-semibold ${isDarkMode ? 'text-slate-100' : 'text-gray-900'}`}>未找到匹配的技能</h3>
|
|
<p className={`text-sm ${isDarkMode ? 'text-slate-400' : 'text-[#667085]'}`}>尝试调整搜索词或切换筛选条件。</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
|
|
{filteredSkills.map((skill) => {
|
|
const avatar = getAvatarStyle(skill.id);
|
|
const AvatarIcon = avatar.Icon;
|
|
const categoryLabel = CATEGORY_LABELS[skill.category as CategoryKey] ?? '流程类';
|
|
|
|
return (
|
|
<article
|
|
key={skill.id}
|
|
className={`group relative rounded-[22px] border px-5 py-5 transition-all duration-200 ${
|
|
isDarkMode
|
|
? 'border-slate-800 bg-slate-900/65 hover:border-slate-700 hover:shadow-xl hover:shadow-black/20'
|
|
: 'border-[#f5d4d4] bg-white hover:border-[#ffbdbd] hover:shadow-[0_16px_40px_-26px_rgba(239,68,68,0.35)]'
|
|
}`}
|
|
>
|
|
|
|
{!skill.isMine && selectedFilter === 'all' && (
|
|
<div className="absolute right-4 top-4 z-20 opacity-0 transition-opacity group-hover:opacity-100">
|
|
<button
|
|
type="button"
|
|
disabled={addingSkillId === skill.id}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
void handleAddOfficialSkill(skill.id);
|
|
}}
|
|
className={`flex items-center justify-center rounded-lg bg-emerald-500 text-white shadow-sm transition hover:bg-emerald-600 ${addingSkillId === skill.id ? 'cursor-not-allowed opacity-50' : ''}`}
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{skill.isMine && (
|
|
<div className="absolute right-4 top-4 z-20" ref={openCardMenuId === skill.id ? cardMenuRef : null}>
|
|
<button
|
|
type="button"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
setOpenCardMenuId((prev) => (prev === skill.id ? null : skill.id));
|
|
}}
|
|
className={`flex items-center justify-center rounded-lg transition ${isDarkMode ? 'text-slate-400 hover:bg-slate-800 hover:text-slate-100' : 'text-gray-400 hover:bg-gray-100 hover:text-gray-700'}`}
|
|
>
|
|
<MoreVertical className="h-4 w-4" />
|
|
</button>
|
|
|
|
{openCardMenuId === skill.id && (
|
|
<div className={`absolute right-0 top-[calc(100%+6px)] z-30 w-40 rounded-2xl border py-1 shadow-xl ${isDarkMode ? 'border-slate-700 bg-slate-900' : 'border-[#f0d6d6] bg-white'}`}>
|
|
<button
|
|
type="button"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
void handlePublishSkill(skill.id);
|
|
}}
|
|
className={`flex w-full items-center gap-2 px-3 py-2 text-sm transition ${isDarkMode ? 'text-emerald-400 hover:bg-slate-800' : 'text-emerald-600 hover:bg-[#fff6f6]'}`}
|
|
>
|
|
<Globe className="h-4 w-4 shrink-0" />
|
|
发布到全部
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
handleEditSkill(skill.id);
|
|
}}
|
|
className={`flex w-full items-center gap-2 px-3 py-2 text-sm transition ${isDarkMode ? 'text-slate-300 hover:bg-slate-800' : 'text-amber-600 hover:bg-[#fff6f6]'}`}
|
|
>
|
|
<Edit className="h-4 w-4 shrink-0" />
|
|
编辑
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
void handleDeleteSkill(skill.id);
|
|
}}
|
|
className={`flex w-full items-center gap-2 px-3 py-2 text-sm transition ${isDarkMode ? 'text-rose-400 hover:bg-slate-800' : 'text-rose-500 hover:bg-[#fff6f6]'}`}
|
|
>
|
|
<Trash2 className="h-4 w-4 shrink-0" />
|
|
删除
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex min-w-0 items-start gap-3">
|
|
<div className={`relative flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br ${avatar.wrapper} shadow-[0_18px_32px_-22px_rgba(15,23,42,0.35)] ${avatar.glow} ring-1 ${avatar.ring}`}>
|
|
<div className={`absolute inset-0 rounded-2xl ${avatar.orb}`} />
|
|
<AvatarIcon className="relative z-10 h-5 w-5" />
|
|
</div>
|
|
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h3 className={`text-[17px] font-semibold ${skill.isMine ? 'text-[#111827]' : isDarkMode ? 'text-slate-100' : 'text-[#111827]'}`}>{skill.name}</h3>
|
|
<span className="inline-flex items-center rounded-full bg-[#fff2f2] px-2.5 py-1 text-xs font-medium text-[#ef4444]">
|
|
{ skill.isMine ? '我的' : '官方' }
|
|
</span>
|
|
</div>
|
|
<p className={`mt-1 line-clamp-3 text-sm ${isDarkMode ? 'text-slate-400' : 'text-[#667085]'}`}>{skill.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|