feat: 新增工作台我的技能和技能配置功能

新增功能:
- 我的技能页面:管理已订阅技能,支持启用/禁用/配置/删除
- 技能配置页面:为已订阅技能提供 key-value 变量配置能力
- 导航栏新增"我的技能"入口(使用 FiBox 图标)

重构内容:
- 技能市场页面:移除"全部技能/已订阅"切换,专注技能浏览和订阅
- 技能详情页面:移除订阅逻辑,统一使用"当前生效版本"布局
- 技能图标样式:移除渐变色背景,改为纯 emoji 显示

数据结构:
- 新增 userSubscriptions 数组(用户级订阅和配置数据)

状态显示:
- 我的技能列表状态改为纯文字(启用/禁用/已下架)
This commit is contained in:
2026-03-23 18:38:52 +08:00
parent e9e1bd7184
commit a576a5e40e
11 changed files with 1021 additions and 101 deletions

View File

@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { FiPlus, FiClock, FiList, FiUsers } from 'react-icons/fi';
import { FiPlus, FiClock, FiList, FiUsers, FiBox } from 'react-icons/fi';
import { FaPuzzlePiece } from 'react-icons/fa';
import Layout from '../components/Layout.jsx';
import SidebarBrand from '../components/layout/SidebarBrand.jsx';
@@ -13,6 +13,8 @@ import api from '../services/api.js';
import ChatPage from './console/ChatPage.jsx';
import SkillsPage from './console/SkillsPage.jsx';
import SkillDetailPage from './console/SkillDetailPage.jsx';
import MySkillsPage from './console/MySkillsPage.jsx';
import SkillConfigPage from './console/SkillConfigPage.jsx';
import LogsPage from './console/LogsPage.jsx';
import TasksPage from './console/TasksPage.jsx';
import TaskDetailPage from './console/TaskDetailPage.jsx';
@@ -38,6 +40,7 @@ function ConsolePage() {
});
const [currentSkillId, setCurrentSkillId] = useState(null);
const [currentTaskId, setCurrentTaskId] = useState(null);
const [currentSubscriptionId, setCurrentSubscriptionId] = useState(null);
// 处理主页跳转重置
useEffect(() => {
@@ -58,6 +61,9 @@ function ConsolePage() {
if (data.skillId !== undefined) {
setCurrentSkillId(data.skillId);
}
if (data.subscriptionId !== undefined) {
setCurrentSubscriptionId(data.subscriptionId);
}
};
const handleSkillClick = (skillId) => {
@@ -90,19 +96,29 @@ function ConsolePage() {
return <SkillsPage onSkillClick={handleSkillClick} />;
case 'skillDetail':
return <SkillDetailPage skillId={currentSkillId} onBack={handleBack} />;
case 'mySkills':
return <MySkillsPage
onConfig={(subscriptionId) => switchPage('skillConfig', { subscriptionId })}
onBack={() => switchPage('skills')}
/>;
case 'skillConfig':
return <SkillConfigPage
subscriptionId={currentSubscriptionId}
onBack={() => switchPage('mySkills')}
/>;
case 'logs':
return <LogsPage />;
case 'scheduledTasks':
return <TasksPage
return <TasksPage
onViewDetail={(taskId) => {
setCurrentTaskId(taskId);
switchPage('taskDetail');
}}
}}
/>;
case 'taskDetail':
return <TaskDetailPage
taskId={currentTaskId}
onBack={() => switchPage('scheduledTasks')}
return <TaskDetailPage
taskId={currentTaskId}
onBack={() => switchPage('scheduledTasks')}
/>;
case 'account':
return <AccountPage />;
@@ -168,6 +184,12 @@ function ConsolePage() {
active={currentPage === 'skills'}
onClick={() => switchPage('skills')}
/>
<SidebarNavItem
icon={<FiBox />}
label="我的技能"
active={currentPage === 'mySkills'}
onClick={() => switchPage('mySkills')}
/>
<SidebarNavItem
icon={<FiClock />}
label="定时任务"