From 60568d7626cbea23a97b3ffd05d95345a6372e98 Mon Sep 17 00:00:00 2001 From: Sdarwin Date: Wed, 1 Apr 2026 15:18:34 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat=EF=BC=9A=E9=9B=86=E6=88=90=E6=8A=80?= =?UTF-8?q?=E8=83=BD=E5=B8=82=E5=9C=BAv1.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/conversation/demo/app.vue | 4 +- .../demo/components/skill-market/Sidebar.tsx | 131 ++ .../skill-market/SkillDetailLayout.tsx | 96 ++ .../demo/components/skill-market/api.ts | 150 ++ .../demo/components/skill-market/index.ts | 5 + .../demo/components/skill-market/mock-data.ts | 612 +++++++ .../skill-market/skill-detail.component.tsx | 89 + .../skill-market-detail.component.tsx | 141 ++ .../skill-market-nav.component.tsx | 35 + .../skill-market/skill-market.component.tsx | 63 + .../skill-market/tabs/ConfigTab.tsx | 33 + .../skill-market/tabs/InstallTab.tsx | 102 ++ .../skill-market/tabs/OverviewTab.tsx | 94 ++ .../skill-market/tabs/RelatedTab.tsx | 82 + .../skill-market/tabs/ResourcesTab.tsx | 61 + .../skill-market/tabs/VersionsTab.tsx | 58 + .../demo/components/skill-market/types.ts | 210 +++ .../conversation/conversation.component.tsx | 760 ++++++++- .../src/components/skill-market/Sidebar.tsx | 131 ++ .../skill-market/SkillDetailLayout.tsx | 96 ++ .../src/components/skill-market/api.ts | 304 ++++ .../src/components/skill-market/index.scss | 1467 +++++++++++++++++ .../src/components/skill-market/mockData.ts | 363 ++++ .../skill-market/tabs/ConfigTab.tsx | 33 + .../skill-market/tabs/InstallTab.tsx | 102 ++ .../skill-market/tabs/OverviewTab.tsx | 78 + .../skill-market/tabs/RelatedTab.tsx | 82 + .../skill-market/tabs/ResourcesTab.tsx | 61 + .../skill-market/tabs/VersionsTab.tsx | 58 + .../src/components/skill-market/types.ts | 210 +++ packages/conversation/src/style.scss | 19 +- packages/conversation/tsconfig.json | 1 + 32 files changed, 5718 insertions(+), 13 deletions(-) create mode 100644 packages/conversation/demo/components/skill-market/Sidebar.tsx create mode 100644 packages/conversation/demo/components/skill-market/SkillDetailLayout.tsx create mode 100644 packages/conversation/demo/components/skill-market/api.ts create mode 100644 packages/conversation/demo/components/skill-market/index.ts create mode 100644 packages/conversation/demo/components/skill-market/mock-data.ts create mode 100644 packages/conversation/demo/components/skill-market/skill-detail.component.tsx create mode 100644 packages/conversation/demo/components/skill-market/skill-market-detail.component.tsx create mode 100644 packages/conversation/demo/components/skill-market/skill-market-nav.component.tsx create mode 100644 packages/conversation/demo/components/skill-market/skill-market.component.tsx create mode 100644 packages/conversation/demo/components/skill-market/tabs/ConfigTab.tsx create mode 100644 packages/conversation/demo/components/skill-market/tabs/InstallTab.tsx create mode 100644 packages/conversation/demo/components/skill-market/tabs/OverviewTab.tsx create mode 100644 packages/conversation/demo/components/skill-market/tabs/RelatedTab.tsx create mode 100644 packages/conversation/demo/components/skill-market/tabs/ResourcesTab.tsx create mode 100644 packages/conversation/demo/components/skill-market/tabs/VersionsTab.tsx create mode 100644 packages/conversation/demo/components/skill-market/types.ts create mode 100644 packages/conversation/src/components/skill-market/Sidebar.tsx create mode 100644 packages/conversation/src/components/skill-market/SkillDetailLayout.tsx create mode 100644 packages/conversation/src/components/skill-market/api.ts create mode 100644 packages/conversation/src/components/skill-market/index.scss create mode 100644 packages/conversation/src/components/skill-market/mockData.ts create mode 100644 packages/conversation/src/components/skill-market/tabs/ConfigTab.tsx create mode 100644 packages/conversation/src/components/skill-market/tabs/InstallTab.tsx create mode 100644 packages/conversation/src/components/skill-market/tabs/OverviewTab.tsx create mode 100644 packages/conversation/src/components/skill-market/tabs/RelatedTab.tsx create mode 100644 packages/conversation/src/components/skill-market/tabs/ResourcesTab.tsx create mode 100644 packages/conversation/src/components/skill-market/tabs/VersionsTab.tsx create mode 100644 packages/conversation/src/components/skill-market/types.ts diff --git a/packages/conversation/demo/app.vue b/packages/conversation/demo/app.vue index 060e0a4c..3e6f5e6c 100644 --- a/packages/conversation/demo/app.vue +++ b/packages/conversation/demo/app.vue @@ -14,6 +14,7 @@ import CreateSuggestionComponent from './components/suggestion/suggestion.compon import CreateGenerateProcessComponent from './components/generate-process/generate-process.component'; import CreateStartedTodoComponent from './components/started-todo/started-todo.component'; import CreateTodoComponent from './components/todo/todo.component'; +import CreateSkillMarketComponent from './components/skill-market/skill-market.component'; const currentPath = ref(window.location.hash); @@ -27,7 +28,8 @@ const routes: Record = { '/started-todo': CreateStartedTodoComponent, '/todo': CreateTodoComponent, '/history': CreateHistoryComponent, - '/suggestion': CreateSuggestionComponent + '/suggestion': CreateSuggestionComponent, + '/skill-market': CreateSkillMarketComponent }; const currentView = computed(() => { diff --git a/packages/conversation/demo/components/skill-market/Sidebar.tsx b/packages/conversation/demo/components/skill-market/Sidebar.tsx new file mode 100644 index 00000000..f55ba12f --- /dev/null +++ b/packages/conversation/demo/components/skill-market/Sidebar.tsx @@ -0,0 +1,131 @@ +import { defineComponent, ref } from 'vue'; +import type { SkillDetail } from './types'; +import { SkillNavKey } from './types'; + +export default defineComponent({ + name: 'SkillSidebar', + props: { + skill: { + type: Object as () => SkillDetail, + required: true + }, + activeTab: { + type: String as () => SkillNavKey, + default: 'overview' as SkillNavKey + } + }, + setup(props) { + const copiedType = ref(null); + + const showInstallationConfig = props.activeTab !== SkillNavKey.Installation; + const showFileTree = props.activeTab !== SkillNavKey.Resources; + + function copyCommand(type: string) { + const commands = props.skill.installCommands; + if (!commands) return; + + const command = commands[type as unknown as keyof typeof commands] as string | undefined; + if (!command) return; + + navigator.clipboard.writeText(command).then(() => { + copiedType.value = type; + setTimeout(() => { + copiedType.value = null; + }, 2000); + }); + } + + function getInstallCommand(type: string): string { + const commands = props.skill.installCommands; + if (!commands) return ''; + return (commands as unknown as Record)[type] || ''; + } + + const installMethods = [ + { key: 'npm', label: 'npm' }, + { key: 'yarn', label: 'yarn' }, + { key: 'pnpm', label: 'pnpm' }, + { key: 'cdn', label: 'CDN' } + ] as const; + + // Get file list from resources + const files = props.skill.resources?.map(r => r.name) || []; + if (!files.includes('SKILL.md')) { + files.unshift('SKILL.md'); + } + + return () => ( +
+ {/* Installation Config */} + {showInstallationConfig && ( +
+

安装配置

+
+ {installMethods.map(method => { + const command = getInstallCommand(method.key); + if (!command) return null; + return ( +
+
{method.label}
+
+ {command} + +
+
+ ); + })} +
+
+ )} + + {/* Tags */} + {props.skill.tags && props.skill.tags.length > 0 && ( +
+

标签

+
+ {props.skill.tags.map(tag => ( + {tag} + ))} +
+
+ )} + + {/* File Tree */} + {showFileTree && files.length > 0 && ( +
+

文件

+
+ {files.map(file => ( +
+ + {file} +
+ ))} +
+
+ )} + + {/* Stats */} +
+

统计

+
+
+ + {props.skill.rating} +
+
+ + {props.skill.installCount >= 1000 ? `${(props.skill.installCount / 1000).toFixed(1)}k` : props.skill.installCount} +
+
+
+
+ ); + } +}); diff --git a/packages/conversation/demo/components/skill-market/SkillDetailLayout.tsx b/packages/conversation/demo/components/skill-market/SkillDetailLayout.tsx new file mode 100644 index 00000000..e90608dd --- /dev/null +++ b/packages/conversation/demo/components/skill-market/SkillDetailLayout.tsx @@ -0,0 +1,96 @@ +import { defineComponent, ref, computed } from 'vue'; +import type { SkillDetail } from './types'; +import { SkillNavKey } from './types'; +import OverviewTab from './tabs/OverviewTab'; +import InstallTab from './tabs/InstallTab'; +import ConfigTab from './tabs/ConfigTab'; +import ResourcesTab from './tabs/ResourcesTab'; +import RelatedTab from './tabs/RelatedTab'; +import VersionsTab from './tabs/VersionsTab'; +import Sidebar from './Sidebar'; + +export default defineComponent({ + name: 'SkillDetailLayout', + props: { + skill: { + type: Object as () => SkillDetail, + required: true + } + }, + emits: ['viewRelatedSkill', 'useRelatedSkill'], + setup(props, { emit }) { + const activeTab = ref(SkillNavKey.Overview); + + const tabs = [ + { id: SkillNavKey.Overview, text: '概览' }, + { id: SkillNavKey.Installation, text: '安装方式' }, + { id: SkillNavKey.Skill, text: 'skill.md' }, + { id: SkillNavKey.Resources, text: '资源' }, + { id: SkillNavKey.Related, text: '相关技能' }, + { id: SkillNavKey.Version, text: '版本历史' } + ]; + + // Count badges for tabs + const resourceCount = computed(() => props.skill.resources?.length || 0); + const relatedCount = computed(() => (props.skill.related?.length || props.skill.relatedSkills?.length) || 0); + const versionCount = computed(() => props.skill.versions?.length || 0); + + function handleSetActiveTab(tab: SkillNavKey) { + activeTab.value = tab; + } + + function handleViewRelatedSkill(skill: any) { + emit('viewRelatedSkill', skill); + } + + function handleUseRelatedSkill(skill: any) { + emit('useRelatedSkill', skill); + } + + return () => ( +
+
+
+ {tabs.map(tab => ( + + ))} +
+
+ +
+
+ {activeTab.value === SkillNavKey.Overview && } + {activeTab.value === SkillNavKey.Installation && } + {activeTab.value === SkillNavKey.Skill && } + {activeTab.value === SkillNavKey.Resources && } + {activeTab.value === SkillNavKey.Related && ( + + )} + {activeTab.value === SkillNavKey.Version && } +
+ +
+
+ ); + } +}); diff --git a/packages/conversation/demo/components/skill-market/api.ts b/packages/conversation/demo/components/skill-market/api.ts new file mode 100644 index 00000000..c9d341da --- /dev/null +++ b/packages/conversation/demo/components/skill-market/api.ts @@ -0,0 +1,150 @@ +// API Stubs for Skill Market - Replace with actual API implementation +import type { + DiscoverSkillDetail, + DiscoverSkillItem, + SkillCommentListResponse, + SkillListResponse, + SkillQueryParams, +} from './types'; +import { MOCK_SKILLS } from './mock-data'; + +// Using MOCK_SKILLS from mock-data.ts for now +const MOCK_SKILL_DETAIL = MOCK_SKILLS[0]; + +// ============== API Configuration ============== + +// TODO: Replace with your actual API base URL +const API_BASE_URL = 'https://api.example.com'; + +// ============== API Client (Stub) ============== + +class SkillApiClient { + private baseUrl: string; + + constructor(baseUrl: string = API_BASE_URL) { + this.baseUrl = baseUrl; + } + + // ============== Skill Detail API ============== + + /** + * Fetch skill detail by identifier + * TODO: Replace with actual API call + */ + async getSkillDetail(params: { + identifier: string; + version?: string; + }): Promise { + // TODO: Replace with actual API call + console.log('[API Stub] getSkillDetail called with:', params); + + // Simulate network delay + await new Promise(resolve => setTimeout(resolve, 300)); + + // Find skill by identifier + const skill = MOCK_SKILLS.find(s => s.identifier === params.identifier); + if (skill) { + return { ...skill }; + } + + // For unknown identifiers, return first mock skill with modified identifier + return { + ...MOCK_SKILL_DETAIL, + identifier: params.identifier, + name: params.identifier.split('-').map(s => + s.charAt(0).toUpperCase() + s.slice(1) + ).join(' '), + }; + } + + // ============== Skill List API ============== + + /** + * Fetch skill list with filtering and pagination + * TODO: Replace with actual API call + */ + async getSkillList(params: SkillQueryParams = {}): Promise { + console.log('[API Stub] getSkillList called with:', params); + + await new Promise(resolve => setTimeout(resolve, 300)); + + let filteredSkills = [...MOCK_SKILLS]; + + if (params.category && params.category !== 'all') { + filteredSkills = filteredSkills.filter(s => s.category === params.category); + } + + if (params.q) { + const query = params.q.toLowerCase(); + filteredSkills = filteredSkills.filter(s => + s.name.toLowerCase().includes(query) || + s.description.toLowerCase().includes(query) + ); + } + + if (params.sort) { + switch (params.sort) { + case 'installCount': + filteredSkills.sort((a, b) => b.installCount - a.installCount); + break; + case 'name': + filteredSkills.sort((a, b) => a.name.localeCompare(b.name)); + break; + case 'createdAt': + filteredSkills.sort((a, b) => + new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() + ); + break; + } + } + + const page = params.page || 1; + const pageSize = params.pageSize || 20; + const start = (page - 1) * pageSize; + const end = start + pageSize; + const paginatedSkills = filteredSkills.slice(start, end); + + return { + items: paginatedSkills as DiscoverSkillItem[], + total: filteredSkills.length, + }; + } + + // ============== Comments API ============== + + async getSkillComments(identifier: string): Promise { + console.log('[API Stub] getSkillComments called with:', identifier); + await new Promise(resolve => setTimeout(resolve, 200)); + + return { + items: [], + total: 0, + }; + } + + // ============== Download API ============== + + getSkillDownloadUrl(identifier: string): string { + return `https://market.example.com/api/v1/skills/${identifier}/download`; + } +} + +// ============== Singleton Instance ============== + +export const skillApi = new SkillApiClient(); + +export async function fetchSkillDetail(params: { identifier: string; version?: string }) { + return skillApi.getSkillDetail(params); +} + +export async function fetchSkillList(params?: SkillQueryParams) { + return skillApi.getSkillList(params); +} + +export async function fetchSkillComments(identifier: string) { + return skillApi.getSkillComments(identifier); +} + +export function getSkillDownloadUrl(identifier: string) { + return skillApi.getSkillDownloadUrl(identifier); +} diff --git a/packages/conversation/demo/components/skill-market/index.ts b/packages/conversation/demo/components/skill-market/index.ts new file mode 100644 index 00000000..4104c6c0 --- /dev/null +++ b/packages/conversation/demo/components/skill-market/index.ts @@ -0,0 +1,5 @@ +export { default as FXSkillMarketNav } from './skill-market-nav.component'; +export { default as FXSkillMarketDetail } from './skill-market-detail.component'; +export { default as FXSkillDetail } from './skill-detail.component'; +export * from './types'; +export * from './mock-data'; diff --git a/packages/conversation/demo/components/skill-market/mock-data.ts b/packages/conversation/demo/components/skill-market/mock-data.ts new file mode 100644 index 00000000..315c3d49 --- /dev/null +++ b/packages/conversation/demo/components/skill-market/mock-data.ts @@ -0,0 +1,612 @@ +// Skill Market Mock Data +import type { Skill, SkillCategory, SkillDetail } from './types'; + +export const MOCK_CATEGORIES: SkillCategory[] = [ + { id: 'all', name: '全部', icon: 'f-icon f-icon-apps', count: 24 }, + { id: 'product', name: '产品研发', icon: 'f-icon f-icon-product', count: 8 }, + { id: 'operation', name: '运营管理', icon: 'f-icon f-icon-setting', count: 6 }, + { id: 'finance', name: '财务管理', icon: 'f-icon f-icon-money', count: 5 }, + { id: 'hr', name: '人力资源', icon: 'f-icon f-icon-team', count: 3 }, + { id: 'data', name: '数据分析', icon: 'f-icon f-icon-chart', count: 2 }, +]; + +export const MOCK_SKILLS: SkillDetail[] = [ + { + id: 'skill-1', + identifier: 'prd-generator', + name: 'PRD 智能生成器', + description: '基于产品需求描述，自动生成结构化的 PRD 文档，包含功能列表、流程图设计、原型草图等。', + category: 'product', + icon: '/public/assets/demo-imgs/prompts-icon1.png', + author: '系统管理员', + createdAt: '2026-03-15T08:00:00Z', + updatedAt: '2026-03-15T10:30:00Z', + installCount: 12580, + rating: 4.8, + tags: ['PRD', '产品文档', '自动化'], + isHot: true, + coverImage: '/public/assets/demo-imgs/func-entry-search.png', + readme: '## PRD 智能生成器\n\n本技能可以帮助你快速生成专业的产品需求文档。\n\n### 功能特点\n- 自动识别需求要点\n- 生成结构化文档\n- 支持导出多种格式', + config: [ + { name: 'format', label: '文档格式', type: 'select', default: 'markdown', options: ['Markdown', 'Word', 'PDF'] }, + { name: 'language', label: '文档语言', type: 'select', default: '中文', options: ['中文', '英文'] }, + ], + capabilities: [ + '自动识别需求要点', + '生成结构化文档', + '支持导出多种格式' + ], + usage: '本技能可以帮助你快速生成专业的产品需求文档。只需输入产品需求描述，系统将自动生成结构化的 PRD 文档。', + installCommands: { + npm: 'npm install skill-prd-generator@1.2.0', + yarn: 'yarn add skill-prd-generator@1.2.0', + pnpm: 'pnpm add skill-prd-generator@1.2.0', + cdn: '' + }, + skillMdConfig: `name: PRD智能生成器 +description: 基于产品需求描述，自动生成结构化的PRD文档 +icon: assets/icons/prd.png +version: 1.2.0 + +parameters: + - name: format + type: string + default: markdown + description: 文档输出格式 + +examples: + - input: 生成一个电商订单模块的PRD + output: PRD文档，包含功能列表、流程图等`, + resources: [ + { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, + { id: 'r2', name: 'API手册', icon: 'f-icon f-icon-api', type: 'api' }, + { id: 'r3', name: '示例项目', icon: 'f-icon f-icon-project', type: 'project' }, + { id: 'r4', name: '视频教程', icon: 'f-icon f-icon-video', type: 'video' } + ], + relatedSkills: [ + { id: 'skill-2', name: '代码评审助手', icon: 'https://cdn.iconify.design/mdi:code-tags-check.svg', author: '开发团队', rating: 4.9 }, + { id: 'skill-3', name: 'API 文档生成器', icon: '/public/assets/demo-imgs/prompts-icon3.png', author: '前端团队', rating: 4.6 } + ], + versions: [ + { version: '1.2.0', date: '2026-03-15', changelog: '新增导出 PDF 格式支持' }, + { version: '1.1.0', date: '2026-03-10', changelog: '优化文档结构' }, + { version: '1.0.0', date: '2026-03-05', changelog: '首次发布' } + ] + }, + { + id: 'skill-2', + identifier: 'code-reviewer', + name: '代码评审助手', + description: '自动分析代码质量，发现潜在 Bug、性能问题、安全漏洞，并提供优化建议。', + category: 'product', + icon: 'https://cdn.iconify.design/mdi:code-tags-check.svg', + author: '开发团队', + createdAt: '2026-03-10T08:00:00Z', + updatedAt: '2026-03-10T14:20:00Z', + installCount: 8960, + rating: 4.9, + tags: ['代码审查', '质量分析', '自动化'], + isHot: true, + isNew: true, + readme: '## 代码评审助手\n\n自动化的代码评审工具，帮助提升代码质量。', + config: [ + { name: 'language', label: '编程语言', type: 'select', default: 'TypeScript', options: ['TypeScript', 'JavaScript', 'Python', 'Java'] }, + ], + capabilities: [ + '自动识别代码缺陷', + '检测性能瓶颈', + '发现安全漏洞', + '提供优化建议' + ], + usage: '本技能可以自动分析代码质量，发现潜在 Bug、性能问题、安全漏洞，并提供优化建议。适用于 Code Review 环节，提升代码质量和团队协作效率。', + installCommands: { + npm: 'npm install skill-code-reviewer@2.0.0', + yarn: 'yarn add skill-code-reviewer@2.0.0', + pnpm: 'pnpm add skill-code-reviewer@2.0.0', + cdn: '' + }, + skillMdConfig: `name: 代码评审助手 +description: 自动分析代码质量，发现潜在Bug、性能问题、安全漏洞，并提供优化建议 +icon: assets/icons/code-review.png +version: 2.0.0 + +parameters: + - name: language + type: string + default: TypeScript + description: 编程语言 + +examples: + - input: 评审这段代码的质量 + output: 代码评审报告，包含问题列表和优化建议`, + resources: [ + { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, + { id: 'r2', name: '规则手册', icon: 'f-icon f-icon-api', type: 'api' }, + { id: 'r3', name: '示例项目', icon: 'f-icon f-icon-project', type: 'project' }, + { id: 'r4', name: '视频教程', icon: 'f-icon f-icon-video', type: 'video' } + ], + relatedSkills: [ + { id: 'skill-1', name: 'PRD 智能生成器', icon: '/public/assets/demo-imgs/prompts-icon1.png', author: '系统管理员', rating: 4.8 }, + { id: 'skill-3', name: 'API 文档生成器', icon: '/public/assets/demo-imgs/prompts-icon3.png', author: '前端团队', rating: 4.6 } + ], + versions: [ + { version: '2.0.0', date: '2026-03-10', changelog: '新增安全漏洞检测功能' }, + { version: '1.5.0', date: '2026-03-01', changelog: '支持更多编程语言' }, + { version: '1.0.0', date: '2026-02-20', changelog: '首次发布' } + ] + }, + { + id: 'skill-3', + identifier: 'api-doc-generator', + name: 'API 文档生成器', + description: '根据代码注释和接口定义，自动生成标准化的 API 文档，支持 Swagger、OpenAPI 等格式。', + category: 'product', + icon: '/public/assets/demo-imgs/prompts-icon3.png', + author: '前端团队', + createdAt: '2026-03-08T08:00:00Z', + updatedAt: '2026-03-08T09:00:00Z', + installCount: 6540, + rating: 4.6, + tags: ['API', '文档', '自动化'], + readme: '## API 文档生成器\n\n自动生成 API 文档，支持多种格式导出。', + config: [], + capabilities: [ + '解析代码注释生成文档', + '支持 Swagger/OpenAPI 格式', + '自动生成示例请求', + '支持多种编程语言' + ], + usage: '本技能可以根据代码注释和接口定义，自动生成标准化的 API 文档。支持 Swagger、OpenAPI 等主流格式，一键导出使用。', + installCommands: { + npm: 'npm install skill-api-doc@1.5.0', + yarn: 'yarn add skill-api-doc@1.5.0', + pnpm: 'pnpm add skill-api-doc@1.5.0', + cdn: '' + }, + skillMdConfig: `name: API文档生成器 +description: 根据代码注释和接口定义，自动生成标准化的API文档 +icon: assets/icons/api-doc.png +version: 1.5.0 + +parameters: + - name: format + type: string + default: swagger + description: 文档格式 + +examples: + - input: 生成用户模块的API文档 + output: Swagger格式的API文档`, + resources: [ + { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, + { id: 'r2', name: '格式说明', icon: 'f-icon f-icon-api', type: 'api' }, + { id: 'r3', name: '示例项目', icon: 'f-icon f-icon-project', type: 'project' } + ], + relatedSkills: [ + { id: 'skill-2', name: '代码评审助手', icon: 'https://cdn.iconify.design/mdi:code-tags-check.svg', author: '开发团队', rating: 4.9 }, + { id: 'skill-9', name: '数据可视化助手', icon: 'https://cdn.iconify.design/mdi:chart-bar.svg', author: '数据团队', rating: 4.9 } + ], + versions: [ + { version: '1.5.0', date: '2026-03-08', changelog: '新增 OpenAPI 3.0 支持' }, + { version: '1.0.0', date: '2026-02-15', changelog: '首次发布' } + ] + }, + { + id: 'skill-4', + identifier: 'user-behavior-analysis', + name: '用户行为分析', + description: '深度分析用户行为数据，识别用户路径、转化漏斗、留存曲线，输出可执行的增长建议。', + category: 'data', + icon: '/public/assets/demo-imgs/prompts-icon4.png', + author: '数据团队', + createdAt: '2026-03-12T08:00:00Z', + updatedAt: '2026-03-12T11:45:00Z', + installCount: 4320, + rating: 4.7, + tags: ['数据分析', '用户增长', 'BI'], + isNew: true, + readme: '## 用户行为分析\n\n专业的用户行为分析工具。', + config: [ + { name: 'timeRange', label: '时间范围', type: 'select', default: '最近7天', options: ['最近7天', '最近30天', '最近90天'] }, + ], + capabilities: [ + '识别用户路径', + '分析转化漏斗', + '计算留存曲线', + '输出增长建议' + ], + usage: '本技能可以深度分析用户行为数据，识别用户路径、转化漏斗、留存曲线，并输出可执行的增长建议。帮助产品团队优化用户旅程。', + installCommands: { + npm: 'npm install skill-user-behavior@1.8.0', + yarn: 'yarn add skill-user-behavior@1.8.0', + pnpm: 'pnpm add skill-user-behavior@1.8.0', + cdn: '' + }, + skillMdConfig: `name: 用户行为分析 +description: 深度分析用户行为数据，识别用户路径、转化漏斗、留存曲线 +icon: assets/icons/behavior.png +version: 1.8.0 + +parameters: + - name: timeRange + type: string + default: 最近7天 + description: 分析时间范围 + +examples: + - input: 分析过去30天的用户留存情况 + output: 留存曲线报告和优化建议`, + resources: [ + { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, + { id: 'r2', name: '指标说明', icon: 'f-icon f-icon-api', type: 'api' }, + { id: 'r3', name: '案例分析', icon: 'f-icon f-icon-project', type: 'project' }, + { id: 'r4', name: '视频教程', icon: 'f-icon f-icon-video', type: 'video' } + ], + relatedSkills: [ + { id: 'skill-9', name: '数据可视化助手', icon: 'https://cdn.iconify.design/mdi:chart-bar.svg', author: '数据团队', rating: 4.9 }, + { id: 'skill-5', name: '财务报表生成', icon: '/public/assets/demo-imgs/prompts-icon1.png', author: '财务团队', rating: 4.5 } + ], + versions: [ + { version: '1.8.0', date: '2026-03-12', changelog: '新增留存分析功能' }, + { version: '1.5.0', date: '2026-03-01', changelog: '优化漏斗分析算法' }, + { version: '1.0.0', date: '2026-02-10', changelog: '首次发布' } + ] + }, + { + id: 'skill-5', + identifier: 'finance-report-generator', + name: '财务报表生成', + description: '自动汇总财务数据，生成资产负债表、利润表、现金流量表等标准财务报表。', + category: 'finance', + icon: '/public/assets/demo-imgs/prompts-icon1.png', + author: '财务团队', + createdAt: '2026-03-05T08:00:00Z', + updatedAt: '2026-03-05T10:00:00Z', + installCount: 3210, + rating: 4.5, + tags: ['财务', '报表', '自动化'], + readme: '## 财务报表生成\n\n自动生成标准财务报表。', + config: [ + { name: 'reportType', label: '报表类型', type: 'select', default: '月度', options: ['月度', '季度', '年度'] }, + ], + capabilities: [ + '自动汇总财务数据', + '生成资产负债表', + '生成利润表', + '生成现金流量表' + ], + usage: '本技能可以自动汇总财务数据，生成资产负债表、利润表、现金流量表等标准财务报表。提高财务工作效率，减少人工错误。', + installCommands: { + npm: 'npm install skill-finance-report@1.0.0', + yarn: 'yarn add skill-finance-report@1.0.0', + pnpm: 'pnpm add skill-finance-report@1.0.0', + cdn: '' + }, + skillMdConfig: `name: 财务报表生成 +description: 自动汇总财务数据，生成标准财务报表 +icon: assets/icons/finance.png +version: 1.0.0 + +parameters: + - name: reportType + type: string + default: 月度 + description: 报表类型 + +examples: + - input: 生成本月度的财务报表 + output: 资产负债表、利润表、现金流量表`, + resources: [ + { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, + { id: 'r2', name: '报表模板', icon: 'f-icon f-icon-api', type: 'api' } + ], + relatedSkills: [ + { id: 'skill-4', name: '用户行为分析', icon: '/public/assets/demo-imgs/prompts-icon4.png', author: '数据团队', rating: 4.7 }, + { id: 'skill-6', name: '智能客服质检', icon: '/public/assets/demo-imgs/prompts-icon2.png', author: '客服团队', rating: 4.4 } + ], + versions: [ + { version: '1.0.0', date: '2026-03-05', changelog: '首次发布' } + ] + }, + { + id: 'skill-6', + identifier: 'qa-checker', + name: '智能客服质检', + description: '对客服对话录音进行智能分析，评估服务质量，发现问题并提供改进建议。', + category: 'operation', + icon: '/public/assets/demo-imgs/prompts-icon2.png', + author: '客服团队', + createdAt: '2026-03-01T08:00:00Z', + updatedAt: '2026-03-01T16:00:00Z', + installCount: 2890, + rating: 4.4, + tags: ['客服', '质检', 'AI分析'], + readme: '## 智能客服质检\n\nAI 驱动的客服质量检测。', + config: [ + { name: 'checkItems', label: '检查项', type: 'select', default: '全部', options: ['全部', '话术规范', '情绪识别', '响应时效'] }, + ], + capabilities: [ + '话术规范检测', + '情绪识别分析', + '响应时效评估', + '问题发现与建议' + ], + usage: '本技能可以对客服对话录音进行智能分析，评估服务质量，发现问题并提供改进建议。帮助提升客服团队整体服务水平。', + installCommands: { + npm: 'npm install skill-qa-checker@1.3.0', + yarn: 'yarn add skill-qa-checker@1.3.0', + pnpm: 'pnpm add skill-qa-checker@1.3.0', + cdn: '' + }, + skillMdConfig: `name: 智能客服质检 +description: 对客服对话录音进行智能分析，评估服务质量，发现问题并提供改进建议 +icon: assets/icons/qa.png +version: 1.3.0 + +parameters: + - name: checkItems + type: string + default: 全部 + description: 检查项目 + +examples: + - input: 检测这通客服电话的服务质量 + output: 质检报告，包含评分和改进建议`, + resources: [ + { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, + { id: 'r2', name: '质检标准', icon: 'f-icon f-icon-api', type: 'api' }, + { id: 'r3', name: '案例分析', icon: 'f-icon f-icon-project', type: 'project' } + ], + relatedSkills: [ + { id: 'skill-8', name: '营销文案生成器', icon: '/public/assets/demo-imgs/prompts-icon4.png', author: '市场团队', rating: 4.7 }, + { id: 'skill-10', name: '会议纪要生成', icon: '/public/assets/demo-imgs/prompts-icon2.png', author: '行政团队', rating: 4.5 } + ], + versions: [ + { version: '1.3.0', date: '2026-03-01', changelog: '新增情绪识别功能' }, + { version: '1.0.0', date: '2026-02-01', changelog: '首次发布' } + ] + }, + { + id: 'skill-7', + identifier: 'resume-screener', + name: '简历筛选器', + description: '根据岗位要求自动筛选简历，提取关键信息，评估匹配度并排序推荐。', + category: 'hr', + icon: '/public/assets/demo-imgs/prompts-icon3.png', + author: 'HR团队', + createdAt: '2026-02-28T08:00:00Z', + updatedAt: '2026-02-28T14:00:00Z', + installCount: 2150, + rating: 4.6, + tags: ['招聘', '简历', '自动化'], + readme: '## 简历筛选器\n\n智能简历筛选工具。', + config: [ + { name: 'matchThreshold', label: '匹配阈值', type: 'select', default: '80%', options: ['60%', '70%', '80%', '90%'] }, + ], + capabilities: [ + '自动提取简历关键信息', + '岗位匹配度评估', + '候选人排序推荐', + '批量处理简历' + ], + usage: '本技能可以根据岗位要求自动筛选简历，提取关键信息，评估匹配度并排序推荐。大幅提升 HR 筛选简历的效率。', + installCommands: { + npm: 'npm install skill-resume-screener@1.1.0', + yarn: 'yarn add skill-resume-screener@1.1.0', + pnpm: 'pnpm add skill-resume-screener@1.1.0', + cdn: '' + }, + skillMdConfig: `name: 简历筛选器 +description: 根据岗位要求自动筛选简历，提取关键信息，评估匹配度并排序推荐 +icon: assets/icons/resume.png +version: 1.1.0 + +parameters: + - name: matchThreshold + type: string + default: 80% + description: 匹配阈值 + +examples: + - input: 筛选前端工程师岗位的简历 + output: 符合条件的简历列表，按匹配度排序`, + resources: [ + { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, + { id: 'r2', name: '筛选规则', icon: 'f-icon f-icon-api', type: 'api' }, + { id: 'r3', name: '使用案例', icon: 'f-icon f-icon-project', type: 'project' } + ], + relatedSkills: [ + { id: 'skill-10', name: '会议纪要生成', icon: '/public/assets/demo-imgs/prompts-icon2.png', author: '行政团队', rating: 4.5 }, + { id: 'skill-6', name: '智能客服质检', icon: '/public/assets/demo-imgs/prompts-icon2.png', author: '客服团队', rating: 4.4 } + ], + versions: [ + { version: '1.1.0', date: '2026-02-28', changelog: '优化匹配算法' }, + { version: '1.0.0', date: '2026-02-01', changelog: '首次发布' } + ] + }, + { + id: 'skill-8', + identifier: 'marketing-copy-generator', + name: '营销文案生成器', + description: '输入产品信息和营销目标，自动生成多渠道营销文案，包括朋友圈、公众号、短信等。', + category: 'operation', + icon: '/public/assets/demo-imgs/prompts-icon4.png', + author: '市场团队', + createdAt: '2026-03-18T08:00:00Z', + updatedAt: '2026-03-18T13:30:00Z', + installCount: 5680, + rating: 4.7, + tags: ['营销', '文案', 'AI生成'], + isHot: true, + readme: '## 营销文案生成器\n\n一键生成各渠道营销文案。', + config: [ + { name: 'channel', label: '投放渠道', type: 'select', default: '朋友圈', options: ['朋友圈', '公众号', '抖音', '小红书', '短信'] }, + { name: 'tone', label: '文案风格', type: 'select', default: '正式', options: ['正式', '活泼', '感性', '幽默'] }, + ], + capabilities: [ + '多渠道文案生成', + '多种风格可选', + '支持图片文案', + '一键复制使用' + ], + usage: '本技能可以输入产品信息和营销目标，自动生成多渠道营销文案，包括朋友圈、公众号、短信等。让营销内容创作更高效。', + installCommands: { + npm: 'npm install skill-marketing-copy@1.4.0', + yarn: 'yarn add skill-marketing-copy@1.4.0', + pnpm: 'pnpm add skill-marketing-copy@1.4.0', + cdn: '' + }, + skillMdConfig: `name: 营销文案生成器 +description: 输入产品信息和营销目标，自动生成多渠道营销文案 +icon: assets/icons/marketing.png +version: 1.4.0 + +parameters: + - name: channel + type: string + default: 朋友圈 + description: 投放渠道 + - name: tone + type: string + default: 正式 + description: 文案风格 + +examples: + - input: 为新产品生成朋友圈推广文案 + output: 适合朋友圈的营销文案`, + resources: [ + { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, + { id: 'r2', name: '文案技巧', icon: 'f-icon f-icon-api', type: 'api' }, + { id: 'r3', name: '案例库', icon: 'f-icon f-icon-project', type: 'project' }, + { id: 'r4', name: '视频教程', icon: 'f-icon f-icon-video', type: 'video' } + ], + relatedSkills: [ + { id: 'skill-6', name: '智能客服质检', icon: '/public/assets/demo-imgs/prompts-icon2.png', author: '客服团队', rating: 4.4 }, + { id: 'skill-10', name: '会议纪要生成', icon: '/public/assets/demo-imgs/prompts-icon2.png', author: '行政团队', rating: 4.5 } + ], + versions: [ + { version: '1.4.0', date: '2026-03-18', changelog: '新增小红书渠道支持' }, + { version: '1.2.0', date: '2026-03-10', changelog: '增加多种文案风格' }, + { version: '1.0.0', date: '2026-02-20', changelog: '首次发布' } + ] + }, + { + id: 'skill-9', + identifier: 'dataviz-assistant', + name: '数据可视化助手', + description: '描述你的数据和分析需求，自动生成对应的图表代码，支持 ECharts、Highcharts 等。', + category: 'data', + icon: 'https://cdn.iconify.design/mdi:chart-bar.svg', + author: '数据团队', + createdAt: '2026-03-20T08:00:00Z', + updatedAt: '2026-03-20T16:00:00Z', + installCount: 7890, + rating: 4.9, + tags: ['数据可视化', '图表', '代码生成'], + isHot: true, + readme: '## 数据可视化助手\n\n智能生成图表代码。', + config: [ + { name: 'chartLib', label: '图表库', type: 'select', default: 'ECharts', options: ['ECharts', 'Highcharts', 'D3.js', 'AntV'] }, + ], + capabilities: [ + '自然语言描述生成图表', + '支持多种图表库', + '自动生成代码', + '实时预览效果' + ], + usage: '本技能可以描述你的数据和分析需求，自动生成对应的图表代码，支持 ECharts、Highcharts、D3.js、AntV 等多种图表库。', + installCommands: { + npm: 'npm install skill-dataviz@2.1.0', + yarn: 'yarn add skill-dataviz@2.1.0', + pnpm: 'pnpm add skill-dataviz@2.1.0', + cdn: '' + }, + skillMdConfig: `name: 数据可视化助手 +description: 描述你的数据和分析需求，自动生成对应的图表代码 +icon: assets/icons/dataviz.png +version: 2.1.0 + +parameters: + - name: chartLib + type: string + default: ECharts + description: 图表库 + +examples: + - input: 生成一个展示月销售额趋势的折线图 + output: ECharts图表代码`, + resources: [ + { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, + { id: 'r2', name: '图表配置', icon: 'f-icon f-icon-api', type: 'api' }, + { id: 'r3', name: '示例项目', icon: 'f-icon f-icon-project', type: 'project' }, + { id: 'r4', name: '视频教程', icon: 'f-icon f-icon-video', type: 'video' } + ], + relatedSkills: [ + { id: 'skill-4', name: '用户行为分析', icon: '/public/assets/demo-imgs/prompts-icon4.png', author: '数据团队', rating: 4.7 }, + { id: 'skill-3', name: 'API 文档生成器', icon: '/public/assets/demo-imgs/prompts-icon3.png', author: '前端团队', rating: 4.6 } + ], + versions: [ + { version: '2.1.0', date: '2026-03-20', changelog: '新增 AntV 图表库支持' }, + { version: '2.0.0', date: '2026-03-15', changelog: '重构代码生成引擎' }, + { version: '1.5.0', date: '2026-03-01', changelog: '增加 D3.js 支持' }, + { version: '1.0.0', date: '2026-02-01', changelog: '首次发布' } + ] + }, + { + id: 'skill-10', + identifier: 'meeting-notes-generator', + name: '会议纪要生成', + description: '上传会议录音或文字记录，自动整理会议要点、待办事项、负责人和截止日期。', + category: 'operation', + icon: '/public/assets/demo-imgs/prompts-icon2.png', + author: '行政团队', + createdAt: '2026-03-22T08:00:00Z', + updatedAt: '2026-03-22T10:00:00Z', + installCount: 3450, + rating: 4.5, + tags: ['会议', '效率', '自动化'], + readme: '## 会议纪要生成\n\n自动生成规范的会议纪要。', + config: [ + { name: 'template', label: '模板风格', type: 'select', default: '标准', options: ['简洁', '标准', '详细'] }, + ], + capabilities: [ + '会议录音自动转文字', + '提取会议要点', + '识别待办事项', + '自动分配负责人和截止日期' + ], + usage: '本技能可以上传会议录音或文字记录，自动整理会议要点、待办事项、负责人和截止日期。生成规范的会议纪要，提升会议效率。', + installCommands: { + npm: 'npm install skill-meeting-notes@1.0.0', + yarn: 'yarn add skill-meeting-notes@1.0.0', + pnpm: 'pnpm add skill-meeting-notes@1.0.0', + cdn: '' + }, + skillMdConfig: `name: 会议纪要生成 +description: 上传会议录音或文字记录，自动整理会议要点、待办事项、负责人和截止日期 +icon: assets/icons/meeting.png +version: 1.0.0 + +parameters: + - name: template + type: string + default: 标准 + description: 模板风格 + +examples: + - input: 分析这段会议记录 + output: 会议纪要，包含要点、待办、负责人和截止日期`, + resources: [ + { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, + { id: 'r2', name: '模板说明', icon: 'f-icon f-icon-api', type: 'api' }, + { id: 'r3', name: '示例项目', icon: 'f-icon f-icon-project', type: 'project' } + ], + relatedSkills: [ + { id: 'skill-7', name: '简历筛选器', icon: '/public/assets/demo-imgs/prompts-icon3.png', author: 'HR团队', rating: 4.6 }, + { id: 'skill-8', name: '营销文案生成器', icon: '/public/assets/demo-imgs/prompts-icon4.png', author: '市场团队', rating: 4.7 } + ], + versions: [ + { version: '1.0.0', date: '2026-03-22', changelog: '首次发布' } + ] + }, +]; \ No newline at end of file diff --git a/packages/conversation/demo/components/skill-market/skill-detail.component.tsx b/packages/conversation/demo/components/skill-market/skill-detail.component.tsx new file mode 100644 index 00000000..dfaca5a4 --- /dev/null +++ b/packages/conversation/demo/components/skill-market/skill-detail.component.tsx @@ -0,0 +1,89 @@ +import { defineComponent } from 'vue'; +import type { Skill } from './types'; +import SkillDetailLayout from './SkillDetailLayout'; + +export default defineComponent({ + name: 'FXSkillDetail', + props: { + skill: { + type: Object as () => Skill, + required: true + } + }, + emits: ['back', 'use', 'viewRelatedSkill', 'useRelatedSkill'], + setup(props, { emit }) { + function handleViewRelatedSkill(skill: any) { + emit('viewRelatedSkill', skill); + } + + function handleUseRelatedSkill(skill: any) { + emit('useRelatedSkill', skill); + } + + return () => ( +
+
+ +
+ +
+
+
+ {props.skill.name} { + const img = e.target as HTMLImageElement; + img.style.display = 'none'; + }} /> +
+
+

{props.skill.name}

+
+ {props.skill.category} + · + 作者: {props.skill.author} + · + v{props.skill.version} +
+
+ {props.skill.tags.map(tag => ( + {tag} + ))} +
+
+
+
+
+
+ + {props.skill.rating} + 评分 +
+
+ + {props.skill.installCount >= 1000 ? `${(props.skill.installCount / 1000).toFixed(1)}k` : props.skill.installCount} + 安装 +
+
+ + {props.skill.createdDate} + 更新 +
+
+ +
+
+ + +
+ ); + } +}); diff --git a/packages/conversation/demo/components/skill-market/skill-market-detail.component.tsx b/packages/conversation/demo/components/skill-market/skill-market-detail.component.tsx new file mode 100644 index 00000000..bbeb2814 --- /dev/null +++ b/packages/conversation/demo/components/skill-market/skill-market-detail.component.tsx @@ -0,0 +1,141 @@ +import { defineComponent, ref, computed } from 'vue'; +import { FNav } from '@farris/ui-vue'; +import { MOCK_CATEGORIES, MOCK_SKILLS } from './mock-data'; +import type { Skill } from './types'; + +export default defineComponent({ + name: 'FXSkillMarketDetail', + emits: ['close', 'selectSkill'], + setup(props, { emit }) { + const activeCategory = ref('all'); + const searchKeyword = ref(''); + + const categoryNavData = computed(() => + MOCK_CATEGORIES.map(c => ({ id: c.id, text: c.name === '全部' ? `全部 (${MOCK_SKILLS.length})` : c.name })) + ); + + const filteredSkills = computed(() => { + let skills = MOCK_SKILLS; + if (activeCategory.value !== 'all') { + skills = skills.filter(s => s.category === activeCategory.value); + } + if (searchKeyword.value.trim()) { + const kw = searchKeyword.value.trim().toLowerCase(); + skills = skills.filter(s => + s.name.toLowerCase().includes(kw) || + s.description.toLowerCase().includes(kw) || + s.tags.some(t => t.toLowerCase().includes(kw)) + ); + } + return skills; + }); + + function handleCategoryChange(item: { id: string }) { + activeCategory.value = item.id; + } + + function renderSkillCard(skill: Skill) { + return ( +
emit('selectSkill', skill)}> +
+
+ {skill.name} { + const img = e.target as HTMLImageElement; + img.style.display = 'none'; + }} /> +
+ {skill.isHot && 热门} + {skill.isNew && 新增} +
+
+

{skill.name}

+

{skill.description}

+
+
+
+ {skill.tags.slice(0, 2).map(tag => ( + {tag} + ))} +
+
+ + + {skill.rating} + + + + {skill.installCount >= 1000 ? `${(skill.installCount / 1000).toFixed(1)}k` : skill.installCount} + +
+
+
+ ); + } + + return () => ( +
+
+
+
+
+ + + + + + +
+
+

技能市场

+

探索专业技能，提升工作效率

+
+
+
+
+
+ + { searchKeyword.value = (e.target as HTMLInputElement).value; }} + /> +
+ +
+
+ +
+ { activeCategory.value = id; }} + /> +
+ +
+
+ {filteredSkills.value.map(skill => renderSkillCard(skill))} +
+ {filteredSkills.value.length === 0 && ( +
+ +

未找到匹配的技能

+
+ )} +
+
+ ); + } +}); diff --git a/packages/conversation/demo/components/skill-market/skill-market-nav.component.tsx b/packages/conversation/demo/components/skill-market/skill-market-nav.component.tsx new file mode 100644 index 00000000..8db8a6af --- /dev/null +++ b/packages/conversation/demo/components/skill-market/skill-market-nav.component.tsx @@ -0,0 +1,35 @@ +import { defineComponent, ref } from 'vue'; + +export default defineComponent({ + name: 'FXSkillMarketNav', + emits: ['open'], + setup(props, { emit }) { + const hovered = ref(false); + + return () => ( +
+
+ 或者 +
+ +
+ ); + } +}); diff --git a/packages/conversation/demo/components/skill-market/skill-market.component.tsx b/packages/conversation/demo/components/skill-market/skill-market.component.tsx new file mode 100644 index 00000000..172ed4c6 --- /dev/null +++ b/packages/conversation/demo/components/skill-market/skill-market.component.tsx @@ -0,0 +1,63 @@ +import { defineComponent, ref } from 'vue'; +import { FXSkillMarketNav, FXSkillMarketDetail, FXSkillDetail } from './index'; +import type { Skill } from './types'; + +export default defineComponent({ + name: 'CreateSkillMarketComponent', + setup() { + const view = ref<'nav' | 'market' | 'detail'>('nav'); + const selectedSkill = ref(null); + + function handleOpenMarket() { + view.value = 'market'; + } + + function handleCloseMarket() { + view.value = 'nav'; + } + + function handleSelectSkill(skill: Skill) { + selectedSkill.value = skill; + view.value = 'detail'; + } + + function handleBackToMarket() { + view.value = 'market'; + selectedSkill.value = null; + } + + function handleUseSkill(skill: Skill) { + console.log('使用技能:', skill.name); + // Here you would integrate with the actual conversation system + } + + return () => ( +
+
+ {view.value === 'nav' && ( + <> +
+
新对话
+
开始一段新的对话，探索 AI 助手的无限可能
+
+ + + )} + {view.value === 'market' && ( + + )} + {view.value === 'detail' && selectedSkill.value && ( + + )} +
+
+ ); + } +}); diff --git a/packages/conversation/demo/components/skill-market/tabs/ConfigTab.tsx b/packages/conversation/demo/components/skill-market/tabs/ConfigTab.tsx new file mode 100644 index 00000000..c73f3b47 --- /dev/null +++ b/packages/conversation/demo/components/skill-market/tabs/ConfigTab.tsx @@ -0,0 +1,33 @@ +import { defineComponent } from 'vue'; +import type { SkillDetail } from '../types'; + +export default defineComponent({ + name: 'ConfigTab', + props: { + skill: { + type: Object as () => SkillDetail, + required: true + } + }, + setup(props) { + // Prefer content from lobehub, fall back to skillMdConfig + const configContent = props.skill.content || props.skill.skillMdConfig || ''; + + return () => ( +
+
+ skill.md +
+
+ {configContent ? ( + 
{configContent}
+ ) : ( +
+

暂无 skill.md 配置

+
+ )} +
+
+ ); + } +}); diff --git a/packages/conversation/demo/components/skill-market/tabs/InstallTab.tsx b/packages/conversation/demo/components/skill-market/tabs/InstallTab.tsx new file mode 100644 index 00000000..317ab615 --- /dev/null +++ b/packages/conversation/demo/components/skill-market/tabs/InstallTab.tsx @@ -0,0 +1,102 @@ +import { defineComponent, ref } from 'vue'; +import type { SkillDetail } from '../types'; + +export default defineComponent({ + name: 'InstallTab', + props: { + skill: { + type: Object as () => SkillDetail, + required: true + } + }, + setup(props) { + const copiedType = ref(null); + + function copyCommand(type: string) { + const commands = props.skill.installCommands; + if (!commands) return; + + const command = commands[type as keyof typeof commands]; + if (!command) return; + + navigator.clipboard.writeText(command).then(() => { + copiedType.value = type; + setTimeout(() => { + copiedType.value = null; + }, 2000); + }); + } + + function getInstallCommand(type: string): string { + const commands = props.skill.installCommands; + if (!commands) return ''; + return commands[type as keyof typeof commands] || ''; + } + + const installMethods = [ + { key: 'npm', label: 'npm' }, + { key: 'yarn', label: 'yarn' }, + { key: 'pnpm', label: 'pnpm' }, + { key: 'cdn', label: 'CDN' } + ] as const; + + return () => ( +
+ {/* Download URL section */} + {props.skill.downloadUrl && ( +
+

下载地址

+
+
直接下载
+
+ + {props.skill.downloadUrl} + + +
+
+
+ )} + + {/* Installation commands section */} + {props.skill.installCommands && ( +
+

安装命令

+ {installMethods.map(method => { + const command = getInstallCommand(method.key); + if (!command) return null; + return ( +
+
{method.label}
+
+ {command} + +
+
+ ); + })} +
+ )} + + {/* Empty state */} + {!props.skill.downloadUrl && !props.skill.installCommands && ( +
+

暂无安装信息

+
+ )} +
+ ); + } +}); diff --git a/packages/conversation/demo/components/skill-market/tabs/OverviewTab.tsx b/packages/conversation/demo/components/skill-market/tabs/OverviewTab.tsx new file mode 100644 index 00000000..cb4c9800 --- /dev/null +++ b/packages/conversation/demo/components/skill-market/tabs/OverviewTab.tsx @@ -0,0 +1,94 @@ +import { defineComponent, ref } from 'vue'; +import type { SkillDetail } from '../types'; + +export default defineComponent({ + name: 'OverviewTab', + props: { + skill: { + type: Object as () => SkillDetail, + required: true + } + }, + setup(props) { + const isExpanded = ref(false); + + function handleInstall() { + console.log('安装技能:', props.skill.name); + } + + // Summary from description + const summary = props.skill.description || ''; + // Content from content/readme (the SKILL.md content) + const content = props.skill.content || props.skill.readme || ''; + // Capabilities list + const capabilities = props.skill.capabilities || []; + // Usage text + const usage = props.skill.usage || ''; + + return () => ( +
+ {/* Summary Section */} + {summary && ( +
+

简介

+

{summary}

+
+ )} + + {/* Capabilities Section */} + {capabilities.length > 0 && ( +
+

能力介绍

+
    + {capabilities.map((cap, idx) => ( +
  • + · + {cap} +
    • + ))} +
+
+ )} + + {/* SKILL.md Content Section - Collapsible */} + {content && ( +
+ + {isExpanded.value && ( +
+ 
{content}
+
+ )} +
+ )} + + {/* Usage Section */} + {usage && ( +
+

使用说明

+

{usage}

+
+ )} + + {/* Actions */} +
+ +
+
+ ); + } +}); diff --git a/packages/conversation/demo/components/skill-market/tabs/RelatedTab.tsx b/packages/conversation/demo/components/skill-market/tabs/RelatedTab.tsx new file mode 100644 index 00000000..43bda8cb --- /dev/null +++ b/packages/conversation/demo/components/skill-market/tabs/RelatedTab.tsx @@ -0,0 +1,82 @@ +import { defineComponent } from 'vue'; +import type { SkillDetail, DiscoverSkillItem, RelatedSkill } from '../types'; + +export default defineComponent({ + name: 'RelatedTab', + props: { + skill: { + type: Object as () => SkillDetail, + required: true + } + }, + emits: ['viewSkill', 'useSkill'], + setup(props, { emit }) { + // Support both lobehub-aligned `related` and local `relatedSkills` + const relatedSkills = (props.skill.related?.length ? props.skill.related : props.skill.relatedSkills) || []; + + function handleView(skill: DiscoverSkillItem | RelatedSkill) { + console.log('查看技能:', skill.name); + emit('viewSkill', skill); + } + + function handleUse(skill: DiscoverSkillItem | RelatedSkill) { + console.log('使用技能:', skill.name); + emit('useSkill', skill); + } + + // Helper to get rating (handle both types) + const getRating = (skill: DiscoverSkillItem | RelatedSkill): number => { + if ('ratingAvg' in skill) return skill.ratingAvg || skill.rating; + return skill.rating; + }; + + return () => ( +
+ {relatedSkills.length > 0 ? ( +
+ {relatedSkills.map(skill => ( +
+
+
+ {skill.name} { + const img = e.target as HTMLImageElement; + img.style.display = 'none'; + }} /> +
+
+
{skill.name}
+
{skill.author}
+
+ + {getRating(skill)} +
+
+
+
+ + +
+
+ ))} +
+ ) : ( +
+

暂无相关技能

+
+ )} +
+ ); + } +}); diff --git a/packages/conversation/demo/components/skill-market/tabs/ResourcesTab.tsx b/packages/conversation/demo/components/skill-market/tabs/ResourcesTab.tsx new file mode 100644 index 00000000..0d3f8554 --- /dev/null +++ b/packages/conversation/demo/components/skill-market/tabs/ResourcesTab.tsx @@ -0,0 +1,61 @@ +import { defineComponent } from 'vue'; +import type { SkillDetail, Resource } from '../types'; + +export default defineComponent({ + name: 'ResourcesTab', + props: { + skill: { + type: Object as () => SkillDetail, + required: true + } + }, + setup(props) { + function handleAddToProject(resource: Resource) { + console.log('添加到项目:', resource.name); + } + + // Helper to format file size + function formatSize(bytes?: number): string { + if (!bytes) return ''; + if (bytes < 1024) return `${bytes} B`; + if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; + return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; + } + + const resources = props.skill.resources || []; + + return () => ( +
+ {resources.length > 0 ? ( +
+ {resources.map(resource => ( +
+
+ +
+
{resource.name}
+ {resource.type && ( +
{resource.type.toUpperCase()}
+ )} + {resource.size && ( +
{formatSize(resource.size)}
+ )} + +
+ ))} +
+ ) : ( +
+

暂无资源

+
+ )} +
+ ); + } +}); diff --git a/packages/conversation/demo/components/skill-market/tabs/VersionsTab.tsx b/packages/conversation/demo/components/skill-market/tabs/VersionsTab.tsx new file mode 100644 index 00000000..1a8bdbf8 --- /dev/null +++ b/packages/conversation/demo/components/skill-market/tabs/VersionsTab.tsx @@ -0,0 +1,58 @@ +import { defineComponent } from 'vue'; +import type { SkillDetail, Version } from '../types'; + +export default defineComponent({ + name: 'VersionsTab', + props: { + skill: { + type: Object as () => SkillDetail, + required: true + } + }, + setup(props) { + function handleVersionClick(version: Version) { + console.log('点击版本:', version.version); + } + + const versions = props.skill.versions || []; + + return () => ( +
+ {versions.length > 0 ? ( +
+ {versions.map((version, idx) => ( +
+
+ {idx < versions.length - 1 && ( +
+ )} +
+ handleVersionClick(version)} + > + {version.version} + + {version.date} +
+ {version.changelog && ( +
+ {version.changelog.split('\n').map((line, i) => ( +
+ {line.startsWith('-') ? line : `• ${line}`} +
+ ))} +
+ )} +
+ ))} +
+ ) : ( +
+

暂无版本历史

+
+ )} +
+ ); + } +}); diff --git a/packages/conversation/demo/components/skill-market/types.ts b/packages/conversation/demo/components/skill-market/types.ts new file mode 100644 index 00000000..33e213be --- /dev/null +++ b/packages/conversation/demo/components/skill-market/types.ts @@ -0,0 +1,210 @@ +// Skill Market Types - Aligned with LobeHub DiscoverSkillDetail + +export enum SkillNavKey { + Installation = 'installation', + Overview = 'overview', + Related = 'related', + Resources = 'resources', + Skill = 'skill', + Version = 'version', +} + +// ============== LobeHub-aligned Types ============== + +// Base skill from market (MarketSkillListItem) +export interface MarketSkillListItem { + id: string; + identifier: string; + name: string; + description: string; + category: string; + icon: string; + author: string; + createdAt: string; + updatedAt: string; + installCount: number; + rating: number; + tags: string[]; + isHot?: boolean; + isNew?: boolean; + coverImage?: string; +} + +// Market skill detail (extends list item) - MarketSkillDetail +export interface MarketSkillDetail extends MarketSkillListItem { + homepage?: string; + license?: string; + repository?: string; + readme?: string; + content?: string; + config?: SkillConfig[]; + versions?: Version[]; + resources?: Resource[]; + installCommands?: InstallCommands; +} + +// Discover skill item (extends list item with additional fields) +export interface DiscoverSkillItem extends Omit { + commentCount?: number; + homepage?: string; + ratingAvg?: number; +} + +// Rating distribution for charts +export interface SkillRatingDistribution { + 1?: number; + 2?: number; + 3?: number; + 4?: number; + 5?: number; +} + +// Comment list item +export interface SkillComment { + id: string; + author: string; + avatar?: string; + content: string; + rating: number; + createdAt: string; +} + +// Comment list response +export interface SkillCommentListResponse { + items: SkillComment[]; + total: number; +} + +// ============== Skill Detail (Aligned with LobeHub DiscoverSkillDetail) ============== + +export interface SkillDetail extends MarketSkillDetail { + // Additional fields from DiscoverSkillDetail + comments?: SkillCommentListResponse; + downloadUrl?: string; + github?: { + stars?: number; + url?: string; + }; + homepage?: string; + ratingDistribution?: SkillRatingDistribution; + related?: DiscoverSkillItem[]; + + // Local extension fields (for backward compatibility) + capabilities?: string[]; + usage?: string; + skillMdConfig?: string; + relatedSkills?: RelatedSkill[]; +} + +// ============== Supporting Types ============== + +export interface Skill { + id: string; + name: string; + description: string; + category: string; + icon: string; + author: string; + createdDate: string; + version: string; + installCount: number; + rating: number; + tags: string[]; + isHot?: boolean; + isNew?: boolean; + coverImage?: string; + readme?: string; + config?: SkillConfig[]; +} + +export interface SkillConfig { + name: string; + label: string; + type: 'string' | 'number' | 'boolean' | 'select'; + default?: any; + options?: string[]; + description?: string; +} + +export interface SkillCategory { + id: string; + name: string; + icon: string; + count: number; +} + +export interface SkillMarketState { + showMarket: boolean; + selectedCategory: string; + selectedSkill: Skill | null; + searchKeyword: string; +} + +// 安装命令 +export interface InstallCommands { + npm: string; + yarn: string; + pnpm: string; + cdn: string; +} + +// 资源 +export interface Resource { + id: string; + name: string; + icon: string; + type: string; + fileHash?: string; + size?: number; +} + +// 相关技能 +export interface RelatedSkill { + id: string; + name: string; + icon: string; + author: string; + rating: number; + description?: string; +} + +// 版本 +export interface Version { + version: string; + date: string; + changelog?: string; + isLatest?: boolean; + createdAt?: string; +} + +// ============== API Types (Stubs for future integration) ============== + +export interface SkillQueryParams { + category?: string; + locale?: string; + order?: 'asc' | 'desc'; + page?: number; + pageSize?: number; + q?: string; + sort?: 'createdAt' | 'installCount' | 'name' | 'relevance' | 'stars' | 'updatedAt'; +} + +export interface SkillListResponse { + items: DiscoverSkillItem[]; + total: number; + categories?: SkillCategoryItem[]; +} + +export interface SkillCategoryItem { + id: string; + name: string; + icon: string; + count: number; +} + +// API Response wrapper +export interface ApiResponse { + data: T; + success: boolean; + error?: string; +} diff --git a/packages/conversation/src/components/conversation/conversation.component.tsx b/packages/conversation/src/components/conversation/conversation.component.tsx index e44a74c9..4877fd89 100644 --- a/packages/conversation/src/components/conversation/conversation.component.tsx +++ b/packages/conversation/src/components/conversation/conversation.component.tsx @@ -7,6 +7,8 @@ import type { VNode } from "vue"; import { renderMessageContent } from "../../utils/message-renderers"; import ChatPreview from "../chat-preview/chat-preview.component"; import { renderSlotConfig } from '../../utils/slot-config-renderers'; +import SkillDetailLayout from '../skill-market/SkillDetailLayout'; +import type { SkillDetail } from '../skill-market/types'; /** 紧凑模式布局策略 */ function createCompactLayoutStrategy(): LayoutStrategy { @@ -114,6 +116,14 @@ export default defineComponent({ const showAgentHub = ref(false); + // 技能市场：三级视图 (nav | market | detail) + const showSkillMarket = ref(false); + const activeNavPanel = ref<'none' | 'agentHub' | 'skillMarket'>('none'); + const skillMarketView = ref<'nav' | 'market' | 'detail'>('nav'); + const skillMarketSelectedSkill = ref(null); + const skillMarketActiveCategory = ref('all'); + const skillMarketSearchKeyword = ref(''); + // 专家中心：分类导航 + 搜索筛选 const agentHubActiveCategory = ref('all'); const agentHubSearchKeyword = ref(''); @@ -165,6 +175,535 @@ export default defineComponent({ return list; }); + // 技能市场数据（内置 Mock 数据） + const skillMarketCategories = [ + { id: 'all', name: '全部' }, + { id: 'product', name: '产品研发' }, + { id: 'operation', name: '运营管理' }, + { id: 'finance', name: '财务管理' }, + { id: 'data', name: '数据分析' }, + ]; + // 完整的技能 Mock 数据（包含详情页所有 Tab 所需字段） + const skillMarketSkills = [ + { + id: 'skill-1', + identifier: 'code-review', + name: '代码评审助手', + description: '基于 AI 的代码评审工具，自动检测 Bug、安全漏洞和代码质量问题，提供详细的修复建议和最佳实践指导。', + category: 'product', + icon: 'https://cdn-icons-png.flaticon.com/128/10069/10069772.png', + author: 'LobeHub', + createdAt: '2024-01-15', + updatedAt: '2024-03-20', + installCount: 15842, + rating: 4.8, + tags: ['代码评审', '安全检测', '质量分析'], + isHot: true, + homepage: 'https://github.com/lobehub/code-review', + repository: 'https://github.com/lobehub/code-review', + license: 'MIT', + version: '1.2.0', + content: '# 代码评审助手\n\n## 功能特性\n\n- **自动化代码分析**：扫描代码中的常见问题\n- **安全漏洞检测**：识别潜在的安全风险\n- **最佳实践建议**：推荐代码风格和架构改进\n- **详细报告**：提供全面的评审报告\n\n## 使用方法\n\n在仓库中直接运行：\n\n```bash\nlobe-skill code-review --path ./src\n```', + readme: '# 代码评审助手\n\n基于 AI 的代码评审助手。', + capabilities: [ + '自动化代码分析和评审', + '安全漏洞检测', + '代码风格和最佳实践建议', + '详细的修复建议报告', + 'CI/CD 流水线集成', + '多编程语言支持' + ], + usage: '代码评审助手可用于自动评审 Pull Request、提交前检查或批量评审代码库。', + skillMdConfig: `# skill.md 配置 +name: code-review +version: 1.2.0 +description: AI 代码评审助手 +settings: + severity: medium + includeSecurity: true + languages: + - javascript + - typescript + - python + - go`, + downloadUrl: 'https://market.example.com/api/v1/skills/code-review/download', + github: { stars: 2847, url: 'https://github.com/lobehub/code-review' }, + installCommands: { + npm: 'npx @lobehub/skill-code-review install', + yarn: 'yarn add @lobehub/skill-code-review', + pnpm: 'pnpm add @lobehub/skill-code-review', + cdn: 'https://unpkg.com/@lobehub/skill-code-review/dist/index.js' + }, + config: [ + { name: 'severity', label: '问题级别', type: 'select', default: 'medium', options: ['low', 'medium', 'high', 'critical'], description: '报告问题的最低级别' }, + { name: 'includeSecurity', label: '安全检测', type: 'boolean', default: true, description: '启用安全漏洞检测' }, + { name: 'languages', label: '编程语言', type: 'select', default: '["javascript", "typescript"]', options: ['javascript', 'typescript', 'python', 'go'], description: '要分析的语言' } + ], + resources: [ + { id: 'r1', name: 'review-template.md', icon: 'f-icon f-icon-file', type: 'markdown', size: 2048 }, + { id: 'r2', name: 'security-rules.json', icon: 'f-icon f-icon-file', type: 'json', size: 1024 }, + { id: 'r3', name: 'code-patterns.yaml', icon: 'f-icon f-icon-file', type: 'yaml', size: 1536 } + ], + versions: [ + { version: '1.2.0', date: '2024-03-20', changelog: '- 新增 Go 语言支持\n- 提升安全检测精度\n- 修复误报问题', isLatest: true }, + { version: '1.1.0', date: '2024-02-15', changelog: '- 新增 Python 支持\n- 增强 AI 模型', isLatest: false }, + { version: '1.0.0', date: '2024-01-15', changelog: '- 首次发布', isLatest: false } + ], + related: [ + { id: 'skill-2', identifier: 'git-helper', name: 'Git 智能助手', icon: 'https://cdn-icons-png.flaticon.com/128/211/211913.png', author: 'LobeHub', rating: 4.6, description: '智能 Git 管理工具' }, + { id: 'skill-3', identifier: 'api-designer', name: 'API 设计器', icon: 'https://cdn-icons-png.flaticon.com/128/2170/2170151.png', author: 'LobeHub', rating: 4.5, description: 'API 设计与文档生成' } + ], + comments: { items: [], total: 0 }, + ratingDistribution: { 1: 2, 2: 5, 3: 15, 4: 45, 5: 189 } + }, + { + id: 'skill-2', + identifier: 'git-helper', + name: 'Git 智能助手', + description: '智能 Git 管理工具，帮助处理分支管理、冲突解决和提交信息生成，让版本控制更高效。', + category: 'product', + icon: 'https://cdn-icons-png.flaticon.com/128/211/211913.png', + author: 'LobeHub', + createdAt: '2024-02-10', + updatedAt: '2024-03-18', + installCount: 12305, + rating: 4.6, + tags: ['Git', '版本控制', '效率工具'], + isNew: true, + homepage: 'https://github.com/lobehub/git-helper', + repository: 'https://github.com/lobehub/git-helper', + license: 'MIT', + version: '1.5.0', + content: '# Git 智能助手\n\n## 功能特性\n\n- **智能分支管理**：智能创建、切换和合并分支\n- **冲突解决**：自动检测和解决合并冲突\n- **提交信息生成**：AI 驱动的提交信息建议\n- **交互式变基**：简化复杂变基操作\n\n## 使用方法\n\n```bash\ngit-helper --help\n```', + readme: '# Git 智能助手\n\n智能 Git 管理工具。', + capabilities: [ + '智能分支管理', + '自动冲突解决', + 'AI 提交信息生成', + '交互式变基助手' + ], + usage: 'Git 智能助手帮助你更高效地管理 Git 操作，提供 AI 驱动的建议。', + skillMdConfig: `# skill.md +name: git-helper +version: 1.5.0`, + downloadUrl: 'https://market.example.com/api/v1/skills/git-helper/download', + github: { stars: 1923, url: 'https://github.com/lobehub/git-helper' }, + installCommands: { + npm: 'npx @lobehub/skill-git-helper install', + yarn: 'yarn add @lobehub/skill-git-helper', + pnpm: 'pnpm add @lobehub/skill-git-helper', + cdn: 'https://unpkg.com/@lobehub/skill-git-helper/dist/index.js' + }, + config: [ + { name: 'autoCommit', label: '自动生成提交', type: 'boolean', default: true, description: '自动生成提交信息' }, + { name: 'conflictStrategy', label: '冲突策略', type: 'select', default: 'manual', options: ['manual', 'auto-merge', 'theirs', 'ours'], description: '处理冲突的方式' } + ], + resources: [ + { id: 'r4', name: 'git-workflow.md', icon: 'f-icon f-icon-file', type: 'markdown', size: 1536 }, + { id: 'r5', name: 'commit-templates.json', icon: 'f-icon f-icon-file', type: 'json', size: 1024 } + ], + versions: [ + { version: '1.5.0', date: '2024-03-18', changelog: '- 新增变基助手\n- 改进冲突检测', isLatest: true }, + { version: '1.0.0', date: '2024-02-10', changelog: '- 首次发布', isLatest: false } + ], + related: [ + { id: 'skill-1', identifier: 'code-review', name: '代码评审助手', icon: 'https://cdn-icons-png.flaticon.com/128/10069/10069772.png', author: 'LobeHub', rating: 4.8, description: 'AI 代码评审工具' } + ], + comments: { items: [], total: 0 }, + ratingDistribution: { 1: 1, 2: 3, 3: 10, 4: 35, 5: 120 } + }, + { + id: 'skill-3', + identifier: 'api-designer', + name: 'API 设计器', + description: '智能 API 设计与文档生成工具，支持 OpenAPI 规范，自动生成接口文档和示例代码。', + category: 'product', + icon: 'https://cdn-icons-png.flaticon.com/128/2170/2170151.png', + author: 'LobeHub', + createdAt: '2024-01-20', + updatedAt: '2024-03-15', + installCount: 9876, + rating: 4.5, + tags: ['API', 'REST', '文档生成'], + homepage: 'https://github.com/lobehub/api-designer', + repository: 'https://github.com/lobehub/api-designer', + license: 'MIT', + version: '1.0.0', + content: '# API 设计器\n\n## 功能特性\n\n- **OpenAPI 支持**：生成 OpenAPI 3.0 规范\n- **接口文档**：自动为接口生成文档\n- **Schema 设计**：智能 Schema 建议\n- **请求/响应示例**：自动生成示例\n\n## 使用方法\n\n```bash\napi-designer generate --spec openapi\n```', + readme: '# API 设计器\n\nAPI 设计与文档生成工具。', + capabilities: [ + 'OpenAPI 3.0 规范生成', + '自动接口文档', + 'Schema 设计协助', + '请求/响应示例' + ], + usage: 'API 设计器帮助你使用 AI 建议创建结构良好的 API 文档。', + skillMdConfig: `# skill.md +name: api-designer +version: 1.0.0`, + downloadUrl: 'https://market.example.com/api/v1/skills/api-designer/download', + github: { stars: 1456, url: 'https://github.com/lobehub/api-designer' }, + installCommands: { + npm: 'npx @lobehub/skill-api-designer install', + yarn: 'yarn add @lobehub/skill-api-designer', + pnpm: 'pnpm add @lobehub/skill-api-designer', + cdn: 'https://unpkg.com/@lobehub/skill-api-designer/dist/index.js' + }, + config: [ + { name: 'openapiVersion', label: 'OpenAPI 版本', type: 'select', default: '3.0', options: ['2.0', '3.0', '3.1'], description: 'OpenAPI 规范版本' } + ], + resources: [ + { id: 'r6', name: 'openapi-guide.md', icon: 'f-icon f-icon-file', type: 'markdown', size: 2048 }, + { id: 'r7', name: 'examples.yaml', icon: 'f-icon f-icon-file', type: 'yaml', size: 1536 } + ], + versions: [ + { version: '1.0.0', date: '2024-01-20', changelog: '- 首次发布\n- OpenAPI 3.0 支持', isLatest: true } + ], + related: [ + { id: 'skill-1', identifier: 'code-review', name: '代码评审助手', icon: 'https://cdn-icons-png.flaticon.com/128/10069/10069772.png', author: 'LobeHub', rating: 4.8, description: 'AI 代码评审工具' } + ], + comments: { items: [], total: 0 }, + ratingDistribution: { 1: 0, 2: 2, 3: 8, 4: 25, 5: 65 } + }, + { + id: 'skill-4', + identifier: 'prd-generator', + name: 'PRD 智能生成器', + description: '基于产品需求描述，自动生成结构化的 PRD 文档，包含功能列表、流程图设计和原型草图建议。', + category: 'product', + icon: 'https://cdn-icons-png.flaticon.com/128/3820/3820477.png', + author: 'LobeHub', + createdAt: '2024-03-01', + updatedAt: '2024-03-25', + installCount: 8560, + rating: 4.9, + tags: ['PRD', '产品文档', '自动化'], + isHot: true, + homepage: 'https://github.com/lobehub/prd-generator', + repository: 'https://github.com/lobehub/prd-generator', + license: 'MIT', + version: '2.0.0', + content: '# PRD 智能生成器\n\n## 功能特性\n\n- **结构化文档**：自动生成规范的 PRD 模板\n- **功能拆解**：智能拆解需求为具体功能点\n- **流程设计**：自动生成业务流程图\n- **原型建议**：提供交互原型草图建议\n\n## 使用方法\n\n```bash\nprd-generator generate --desc "用户登录功能"\n```', + readme: '# PRD 智能生成器\n\n产品需求文档智能生成工具。', + capabilities: [ + '结构化 PRD 文档生成', + '功能需求智能拆解', + '业务流程图设计', + '原型草图建议', + '多格式导出支持' + ], + usage: '输入产品需求描述，即可生成完整的 PRD 文档，包括功能列表、流程设计和原型建议。', + skillMdConfig: `# skill.md +name: prd-generator +version: 2.0.0`, + downloadUrl: 'https://market.example.com/api/v1/skills/prd-generator/download', + github: { stars: 3200, url: 'https://github.com/lobehub/prd-generator' }, + installCommands: { + npm: 'npx @lobehub/skill-prd-generator install', + yarn: 'yarn add @lobehub/skill-prd-generator', + pnpm: 'pnpm add @lobehub/skill-prd-generator', + cdn: 'https://unpkg.com/@lobehub/skill-prd-generator/dist/index.js' + }, + config: [ + { name: 'outputFormat', label: '输出格式', type: 'select', default: 'markdown', options: ['markdown', 'html', 'pdf'], description: 'PRD 文档输出格式' }, + { name: 'includeFlowchart', label: '包含流程图', type: 'boolean', default: true, description: '是否生成流程图' } + ], + resources: [ + { id: 'r8', name: 'prd-template.md', icon: 'f-icon f-icon-file', type: 'markdown', size: 3072 }, + { id: 'r9', name: 'flowchart-examples.json', icon: 'f-icon f-icon-file', type: 'json', size: 2048 } + ], + versions: [ + { version: '2.0.0', date: '2024-03-25', changelog: '- 新增流程图生成\n- 优化文档结构\n- 支持多格式导出', isLatest: true }, + { version: '1.0.0', date: '2024-03-01', changelog: '- 首次发布', isLatest: false } + ], + related: [ + { id: 'skill-5', identifier: 'data-visual', name: '数据可视化助手', icon: 'https://cdn-icons-png.flaticon.com/128/9698/9698988.png', author: 'LobeHub', rating: 4.7, description: '图表代码生成工具' } + ], + comments: { items: [], total: 0 }, + ratingDistribution: { 1: 1, 2: 3, 3: 12, 4: 58, 5: 210 } + }, + { + id: 'skill-5', + identifier: 'data-visual', + name: '数据可视化助手', + description: '描述你的数据和分析需求，自动生成对应的图表代码，支持 ECharts、Highcharts 等多种图表库。', + category: 'data', + icon: 'https://cdn-icons-png.flaticon.com/128/9698/9698988.png', + author: 'LobeHub', + createdAt: '2024-02-15', + updatedAt: '2024-03-22', + installCount: 7890, + rating: 4.9, + tags: ['数据可视化', '图表', '代码生成'], + isHot: true, + homepage: 'https://github.com/lobehub/data-visual', + repository: 'https://github.com/lobehub/data-visual', + license: 'MIT', + version: '1.3.0', + content: '# 数据可视化助手\n\n## 功能特性\n\n- **自然语言描述**：用自然语言描述图表需求\n- **多图表库支持**：ECharts、Highcharts、Chart.js 等\n- **代码即生成**：一键生成可运行的代码\n- **实时预览**：支持图表实时预览\n\n## 使用方法\n\n```bash\ndata-visual generate --type line --data "./sales.csv"\n```', + readme: '# 数据可视化助手\n\n图表代码智能生成工具。', + capabilities: [ + '自然语言描述转图表', + '多图表库代码生成', + '数据格式自动识别', + '图表样式智能优化', + '响应式布局支持' + ], + usage: '描述你需要的图表类型和数据，助手会自动生成对应的图表代码。', + skillMdConfig: `# skill.md +name: data-visual +version: 1.3.0`, + downloadUrl: 'https://market.example.com/api/v1/skills/data-visual/download', + github: { stars: 2560, url: 'https://github.com/lobehub/data-visual' }, + installCommands: { + npm: 'npx @lobehub/skill-data-visual install', + yarn: 'yarn add @lobehub/skill-data-visual', + pnpm: 'pnpm add @lobehub/skill-data-visual', + cdn: 'https://unpkg.com/@lobehub/skill-data-visual/dist/index.js' + }, + config: [ + { name: 'chartLibrary', label: '图表库', type: 'select', default: 'echarts', options: ['echarts', 'highcharts', 'chartjs'], description: '首选图表库' }, + { name: 'theme', label: '主题', type: 'select', default: 'light', options: ['light', 'dark', 'auto'], description: '图表主题' } + ], + resources: [ + { id: 'r10', name: 'chart-templates.json', icon: 'f-icon f-icon-file', type: 'json', size: 4096 }, + { id: 'r11', name: 'theme-config.yaml', icon: 'f-icon f-icon-file', type: 'yaml', size: 1024 } + ], + versions: [ + { version: '1.3.0', date: '2024-03-22', changelog: '- 新增 Chart.js 支持\n- 优化主题配置', isLatest: true }, + { version: '1.2.0', date: '2024-03-01', changelog: '- 新增实时预览', isLatest: false }, + { version: '1.0.0', date: '2024-02-15', changelog: '- 首次发布', isLatest: false } + ], + related: [ + { id: 'skill-6', identifier: 'report-gen', name: '报表生成器', icon: 'https://cdn-icons-png.flaticon.com/128/1040/1040254.png', author: 'LobeHub', rating: 4.6, description: '自动生成财务报表' } + ], + comments: { items: [], total: 0 }, + ratingDistribution: { 1: 0, 2: 2, 3: 8, 4: 42, 5: 165 } + }, + { + id: 'skill-6', + identifier: 'report-gen', + name: '报表生成器', + description: '自动汇总财务数据，生成资产负债表、利润表、现金流量表等标准财务报表，支持多种导出格式。', + category: 'finance', + icon: 'https://cdn-icons-png.flaticon.com/128/1040/1040254.png', + author: 'LobeHub', + createdAt: '2024-01-25', + updatedAt: '2024-03-18', + installCount: 5680, + rating: 4.6, + tags: ['财务', '报表', '自动化'], + homepage: 'https://github.com/lobehub/report-gen', + repository: 'https://github.com/lobehub/report-gen', + license: 'MIT', + version: '1.2.0', + content: '# 报表生成器\n\n## 功能特性\n\n- **多报表类型**：支持多种财务报表模板\n- **数据自动汇总**：智能汇总财务数据\n- **多格式导出**：Excel、PDF、Word 等格式\n- **自定义模板**：支持自定义报表模板\n\n## 使用方法\n\n```bash\nreport-gen generate --type balance --period 2024-Q1\n```', + readme: '# 报表生成器\n\n智能财务报表生成工具。', + capabilities: [ + '标准财务报表生成', + '财务数据自动汇总', + '多格式导出支持', + '自定义模板配置', + '数据校验与提醒' + ], + usage: '上传财务数据或连接财务系统，自动生成符合规范的财务报表。', + skillMdConfig: `# skill.md +name: report-gen +version: 1.2.0`, + downloadUrl: 'https://market.example.com/api/v1/skills/report-gen/download', + github: { stars: 1890, url: 'https://github.com/lobehub/report-gen' }, + installCommands: { + npm: 'npx @lobehub/skill-report-gen install', + yarn: 'yarn add @lobehub/skill-report-gen', + pnpm: 'pnpm add @lobehub/skill-report-gen', + cdn: 'https://unpkg.com/@lobehub/skill-report-gen/dist/index.js' + }, + config: [ + { name: 'reportType', label: '报表类型', type: 'select', default: 'balance', options: ['balance', 'profit', 'cashflow'], description: '生成的报表类型' }, + { name: 'currency', label: '货币单位', type: 'select', default: 'CNY', options: ['CNY', 'USD', 'EUR'], description: '货币单位' } + ], + resources: [ + { id: 'r12', name: 'balance-template.xlsx', icon: 'f-icon f-icon-file', type: 'excel', size: 5120 }, + { id: 'r13', name: 'report-config.yaml', icon: 'f-icon f-icon-file', type: 'yaml', size: 1024 } + ], + versions: [ + { version: '1.2.0', date: '2024-03-18', changelog: '- 新增现金流量表\n- 优化数据校验', isLatest: true }, + { version: '1.1.0', date: '2024-02-20', changelog: '- 新增 PDF 导出', isLatest: false }, + { version: '1.0.0', date: '2024-01-25', changelog: '- 首次发布', isLatest: false } + ], + related: [ + { id: 'skill-5', identifier: 'data-visual', name: '数据可视化助手', icon: 'https://cdn-icons-png.flaticon.com/128/9698/9698988.png', author: 'LobeHub', rating: 4.9, description: '图表代码生成工具' } + ], + comments: { items: [], total: 0 }, + ratingDistribution: { 1: 1, 2: 2, 3: 6, 4: 28, 5: 95 } + }, + { + id: 'skill-7', + identifier: 'marketing-writer', + name: '营销文案生成器', + description: '输入产品信息和营销目标，自动生成多渠道营销文案，包括朋友圈、公众号、小红书、短信等。', + category: 'operation', + icon: 'https://cdn-icons-png.flaticon.com/128/2942/2942905.png', + author: 'LobeHub', + createdAt: '2024-02-28', + updatedAt: '2024-03-24', + installCount: 6780, + rating: 4.7, + tags: ['营销', '文案', 'AI生成'], + isHot: true, + homepage: 'https://github.com/lobehub/marketing-writer', + repository: 'https://github.com/lobehub/marketing-writer', + license: 'MIT', + version: '1.4.0', + content: '# 营销文案生成器\n\n## 功能特性\n\n- **多平台适配**：朋友圈、公众号、小红书等\n- **智能改写**：一键生成多版本文案\n- **风格可选**：正式、活泼、文艺等多种风格\n- **敏感词检测**：自动检测并提醒敏感词\n\n## 使用方法\n\n```bash\nmarketing-writer generate --product "新产品" --platform wechat\n```', + readme: '# 营销文案生成器\n\n多渠道营销文案智能生成工具。', + capabilities: [ + '多平台文案生成', + 'AI 风格模仿', + '批量文案改写', + '敏感词检测', + '效果数据分析' + ], + usage: '输入产品特点和营销目标，自动生成适合各平台的营销文案。', + skillMdConfig: `# skill.md +name: marketing-writer +version: 1.4.0`, + downloadUrl: 'https://market.example.com/api/v1/skills/marketing-writer/download', + github: { stars: 2150, url: 'https://github.com/lobehub/marketing-writer' }, + installCommands: { + npm: 'npx @lobehub/skill-marketing-writer install', + yarn: 'yarn add @lobehub/skill-marketing-writer', + pnpm: 'pnpm add @lobehub/skill-marketing-writer', + cdn: 'https://unpkg.com/@lobehub/skill-marketing-writer/dist/index.js' + }, + config: [ + { name: 'platform', label: '目标平台', type: 'select', default: 'wechat', options: ['wechat', 'xiaohongshu', 'weibo', 'sms'], description: '生成文案的平台' }, + { name: 'style', label: '文案风格', type: 'select', default: 'natural', options: ['formal', 'casual', 'artistic', 'humorous'], description: '文案风格' } + ], + resources: [ + { id: 'r14', name: 'copy-templates.json', icon: 'f-icon f-icon-file', type: 'json', size: 3072 }, + { id: 'r15', name: 'platform-guide.md', icon: 'f-icon f-icon-file', type: 'markdown', size: 2048 } + ], + versions: [ + { version: '1.4.0', date: '2024-03-24', changelog: '- 新增小红书平台\n- 优化 AI 改写质量', isLatest: true }, + { version: '1.3.0', date: '2024-03-10', changelog: '- 新增敏感词检测', isLatest: false }, + { version: '1.0.0', date: '2024-02-28', changelog: '- 首次发布', isLatest: false } + ], + related: [ + { id: 'skill-8', identifier: 'meeting-minutes', name: '会议纪要生成', icon: 'https://cdn-icons-png.flaticon.com/128/2965/2965327.png', author: 'LobeHub', rating: 4.5, description: '自动生成会议纪要' } + ], + comments: { items: [], total: 0 }, + ratingDistribution: { 1: 1, 2: 3, 3: 10, 4: 38, 5: 128 } + }, + { + id: 'skill-8', + identifier: 'meeting-minutes', + name: '会议纪要生成', + description: '上传会议录音或文字记录，自动整理会议要点、待办事项、负责人和截止日期，生成结构化会议纪要。', + category: 'operation', + icon: 'https://cdn-icons-png.flaticon.com/128/2965/2965327.png', + author: 'LobeHub', + createdAt: '2024-03-05', + updatedAt: '2024-03-23', + installCount: 4320, + rating: 4.5, + tags: ['会议', '效率', '自动化'], + isNew: true, + homepage: 'https://github.com/lobehub/meeting-minutes', + repository: 'https://github.com/lobehub/meeting-minutes', + license: 'MIT', + version: '1.1.0', + content: '# 会议纪要生成\n\n## 功能特性\n\n- **语音转文字**：支持多种音频格式\n- **智能摘要**：自动提取关键信息\n- **任务提取**：自动识别待办事项\n- **多格式导出**：Markdown、Word、PDF 等\n\n## 使用方法\n\n```bash\nmeeting-minutes generate --file "./meeting.mp3"\n```', + readme: '# 会议纪要生成\n\n智能会议纪要整理工具。', + capabilities: [ + '语音识别转文字', + '会议要点智能摘要', + '待办事项自动提取', + '责任人识别', + '多格式导出' + ], + usage: '上传会议录音或粘贴会议记录，自动生成结构清晰的会议纪要。', + skillMdConfig: `# skill.md +name: meeting-minutes +version: 1.1.0`, + downloadUrl: 'https://market.example.com/api/v1/skills/meeting-minutes/download', + github: { stars: 1680, url: 'https://github.com/lobehub/meeting-minutes' }, + installCommands: { + npm: 'npx @lobehub/skill-meeting-minutes install', + yarn: 'yarn add @lobehub/skill-meeting-minutes', + pnpm: 'pnpm add @lobehub/skill-meeting-minutes', + cdn: 'https://unpkg.com/@lobehub/skill-meeting-minutes/dist/index.js' + }, + config: [ + { name: 'language', label: '会议语言', type: 'select', default: 'zh-CN', options: ['zh-CN', 'en-US', 'auto'], description: '会议语言' }, + { name: 'outputFormat', label: '输出格式', type: 'select', default: 'markdown', options: ['markdown', 'word', 'pdf'], description: '纪要输出格式' } + ], + resources: [ + { id: 'r16', name: 'minute-template.md', icon: 'f-icon f-icon-file', type: 'markdown', size: 2048 }, + { id: 'r17', name: 'summary-rules.yaml', icon: 'f-icon f-icon-file', type: 'yaml', size: 1024 } + ], + versions: [ + { version: '1.1.0', date: '2024-03-23', changelog: '- 新增责任人识别\n- 优化摘要质量', isLatest: true }, + { version: '1.0.0', date: '2024-03-05', changelog: '- 首次发布', isLatest: false } + ], + related: [ + { id: 'skill-7', identifier: 'marketing-writer', name: '营销文案生成器', icon: 'https://cdn-icons-png.flaticon.com/128/2942/2942905.png', author: 'LobeHub', rating: 4.7, description: '营销文案生成工具' } + ], + comments: { items: [], total: 0 }, + ratingDistribution: { 1: 0, 2: 1, 3: 5, 4: 22, 5: 78 } + } + ]; + + const skillMarketFilteredSkills = computed(() => { + let list = skillMarketSkills; + if (skillMarketActiveCategory.value !== 'all') { + list = list.filter(s => s.category === skillMarketActiveCategory.value); + } + const kw = skillMarketSearchKeyword.value.trim().toLowerCase(); + if (kw) { + list = list.filter(s => + s.name.toLowerCase().includes(kw) || + s.description.toLowerCase().includes(kw) || + s.tags.some(t => t.toLowerCase().includes(kw)) + ); + } + return list; + }); + + function handleSkillMarketOpen() { + activeNavPanel.value = 'skillMarket'; + skillMarketView.value = 'market'; + skillMarketSelectedSkill.value = null; + showSkillMarket.value = true; + } + + function handleSkillMarketClose() { + showSkillMarket.value = false; + skillMarketView.value = 'nav'; + skillMarketSelectedSkill.value = null; + activeNavPanel.value = 'none'; + } + + function handleSkillMarketSelect(skill: any) { + // TODO: Use API call when backend is ready + // try { + // const identifier = skill.identifier || skill.id; + // const fullSkill = await fetchSkillDetail({ identifier }); + // skillMarketSelectedSkill.value = fullSkill; + // } catch (error) { + // console.error('Failed to fetch skill detail:', error); + // skillMarketSelectedSkill.value = skill; + // } + skillMarketSelectedSkill.value = skill; + skillMarketView.value = 'detail'; + } + + function handleSkillMarketBack() { + skillMarketView.value = 'market'; + skillMarketSelectedSkill.value = null; + activeNavPanel.value = 'skillMarket'; + } + function handleAgentHubCategoryChange(navItem: { id: string }) { agentHubActiveCategory.value = navItem.id; } @@ -177,6 +716,9 @@ export default defineComponent({ function closeAgentDetail() { agentDetailAgent.value = null; + if (!showAgentHub.value) { + activeNavPanel.value = 'none'; + } } // 消息区域滚动条：鼠标移入或滚动时显示，默认隐藏 @@ -661,6 +1203,189 @@ export default defineComponent({ ); + // 技能市场入口按钮（导航视图） + const renderSkillMarketNav = () => ( +
+
+ 或者 +
+ +
+ ); + + // 技能市场详情页 + const renderSkillMarketDetail = () => ( +
+
+
+
+
+ + + + + + +
+
+

技能市场

+

探索专业技能，提升工作效率

+
+
+
+
+
+ + { skillMarketSearchKeyword.value = (e.target as HTMLInputElement).value; }} + /> +
+ +
+
+
+ { + const count = c.id === 'all' ? skillMarketSkills.length : skillMarketSkills.filter(s => s.category === c.id).length; + return { id: c.id, text: `${c.name} (${count})` }; + })} + activeNavId={skillMarketActiveCategory.value} + horizontal={true} + idField="id" + displayField="text" + onNav={(item: { id: string }) => { skillMarketActiveCategory.value = item.id; }} + onUpdate:activeNavId={(id: string) => { skillMarketActiveCategory.value = id; }} + /> +
+
+
+ {skillMarketFilteredSkills.value.map((skill: any) => ( +
handleSkillMarketSelect(skill)}> +
+
+ {skill.name} { (e.target as HTMLImageElement).style.display = 'none'; }} /> +
+ {skill.isHot && 热门} + {skill.isNew && 新增} +
+
+

{skill.name}

+

{skill.description}

+
+
+
+ {skill.tags.slice(0, 2).map((tag: string) => ( + {tag} + ))} +
+
+ {skill.rating} + {skill.installCount >= 1000 ? `${(skill.installCount / 1000).toFixed(1)}k` : skill.installCount} +
+
+
+ ))} +
+ {skillMarketFilteredSkills.value.length === 0 && ( +
+ +

未找到匹配的技能

+
+ )} +
+
+ ); + + // 技能详情页 + const renderSkillMarketSkillDetail = () => { + const skill = skillMarketSelectedSkill.value!; + const categoryName = skillMarketCategories.find((c: any) => c.id === skill.category)?.name || skill.category; + return ( +
+
+ +
+
+
+
+ {skill.name} { (e.target as HTMLImageElement).style.display = 'none'; }} /> +
+
+

{skill.name}

+
+ {categoryName} + · + 作者: {skill.author || '系统管理员'} + {skill.version && <>·v{skill.version}} +
+
+ {skill.tags?.map((tag: string) => ( + {tag} + ))} +
+
+
+
+
+
+ + {skill.rating} + 评分 +
+
+ + {skill.installCount >= 1000 ? `${(skill.installCount / 1000).toFixed(1)}k` : skill.installCount} + 安装 +
+
+ +
+
+ { skillMarketSelectedSkill.value = relatedSkill; }} + onUseRelatedSkill={(relatedSkill: any) => { skillMarketSelectedSkill.value = relatedSkill; }} + /> +
+ ); + }; + + const renderSkillMarket = () => { + if (skillMarketView.value === 'nav') return renderSkillMarketNav(); + if (skillMarketView.value === 'market') return renderSkillMarketDetail(); + if (skillMarketView.value === 'detail') return renderSkillMarketSkillDetail(); + return null; + }; + function showAgentListPanel() { if (props.agents.length < 2) { return; @@ -1087,16 +1812,31 @@ export default defineComponent({
{props.navTitle}
- {props.navActions.map((action) => ( + {/* 新对话按钮：固定显示且可点击关闭技能市场 */} +
{ activeNavPanel.value = 'none'; showSkillMarket.value = false; }} + > + + 新对话 +
+ {props.navActions.filter(a => a.id !== 'new').map((action) => (
!action.fixed && (typeof action.id === 'number' && handleActionClick(action.id))} > {action.label}
))} +
+ + 技能市场 +
@@ -1104,7 +1844,7 @@ export default defineComponent({ {agentDetailActiveTab.value !== 'overview' && (agent.systemPrompt || agent.description) && ( @@ -1429,7 +2169,7 @@ export default defineComponent({ onInput={(e: Event) => { agentHubSearchKeyword.value = (e.target as HTMLInputElement).value; }} />
-
@@ -1475,8 +2215,11 @@ export default defineComponent({ renderMessages, renderInput, renderSkills, - renderBottom: renderBottom as ContentAreaContext["renderBottom"] - }; + renderBottom: renderBottom as ContentAreaContext["renderBottom"], + renderSkillMarketNav, + renderSkillMarket, + showSkillMarket, + } as any; return ( @@ -1489,6 +2232,7 @@ export default defineComponent({ {renderChatContent(hasMessages, strategy, contentCtx)} {renderAgentHub()} + {showSkillMarket.value && renderSkillMarket()} ); diff --git a/packages/conversation/src/components/skill-market/Sidebar.tsx b/packages/conversation/src/components/skill-market/Sidebar.tsx new file mode 100644 index 00000000..d1b878ae --- /dev/null +++ b/packages/conversation/src/components/skill-market/Sidebar.tsx @@ -0,0 +1,131 @@ +import { defineComponent, ref } from 'vue'; +import type { SkillDetail } from './types'; +import { SkillNavKey } from './types'; + +export default defineComponent({ + name: 'SkillSidebar', + props: { + skill: { + type: Object as () => SkillDetail, + required: true + }, + activeTab: { + type: String as () => SkillNavKey, + default: 'overview' as SkillNavKey + } + }, + setup(props) { + const copiedType = ref(null); + + const showInstallationConfig = props.activeTab !== SkillNavKey.Installation; + const showFileTree = props.activeTab !== SkillNavKey.Resources; + + function copyCommand(type: string) { + const commands = props.skill.installCommands; + if (!commands) return; + + const command = commands[type as keyof typeof commands]; + if (!command) return; + + navigator.clipboard.writeText(command).then(() => { + copiedType.value = type; + setTimeout(() => { + copiedType.value = null; + }, 2000); + }); + } + + function getInstallCommand(type: string): string { + const commands = props.skill.installCommands; + if (!commands) return ''; + return commands[type as keyof typeof commands] || ''; + } + + const installMethods = [ + { key: 'npm', label: 'npm' }, + { key: 'yarn', label: 'yarn' }, + { key: 'pnpm', label: 'pnpm' }, + { key: 'cdn', label: 'CDN' } + ] as const; + + // Get file list from resources + const files = props.skill.resources?.map(r => r.name) || []; + if (!files.includes('SKILL.md')) { + files.unshift('SKILL.md'); + } + + return () => ( +
+ {/* Installation Config */} + {showInstallationConfig && ( +
+

安装配置

+
+ {installMethods.map(method => { + const command = getInstallCommand(method.key); + if (!command) return null; + return ( +
+
{method.label}
+
+ {command} + +
+
+ ); + })} +
+
+ )} + + {/* Tags */} + {props.skill.tags && props.skill.tags.length > 0 && ( +
+

标签

+
+ {props.skill.tags.map(tag => ( + {tag} + ))} +
+
+ )} + + {/* File Tree */} + {showFileTree && files.length > 0 && ( +
+

文件

+
+ {files.map(file => ( +
+ + {file} +
+ ))} +
+
+ )} + + {/* Stats */} +
+

统计

+
+
+ + {props.skill.rating} +
+
+ + {props.skill.installCount >= 1000 ? `${(props.skill.installCount / 1000).toFixed(1)}k` : props.skill.installCount} +
+
+
+
+ ); + } +}); diff --git a/packages/conversation/src/components/skill-market/SkillDetailLayout.tsx b/packages/conversation/src/components/skill-market/SkillDetailLayout.tsx new file mode 100644 index 00000000..e90608dd --- /dev/null +++ b/packages/conversation/src/components/skill-market/SkillDetailLayout.tsx @@ -0,0 +1,96 @@ +import { defineComponent, ref, computed } from 'vue'; +import type { SkillDetail } from './types'; +import { SkillNavKey } from './types'; +import OverviewTab from './tabs/OverviewTab'; +import InstallTab from './tabs/InstallTab'; +import ConfigTab from './tabs/ConfigTab'; +import ResourcesTab from './tabs/ResourcesTab'; +import RelatedTab from './tabs/RelatedTab'; +import VersionsTab from './tabs/VersionsTab'; +import Sidebar from './Sidebar'; + +export default defineComponent({ + name: 'SkillDetailLayout', + props: { + skill: { + type: Object as () => SkillDetail, + required: true + } + }, + emits: ['viewRelatedSkill', 'useRelatedSkill'], + setup(props, { emit }) { + const activeTab = ref(SkillNavKey.Overview); + + const tabs = [ + { id: SkillNavKey.Overview, text: '概览' }, + { id: SkillNavKey.Installation, text: '安装方式' }, + { id: SkillNavKey.Skill, text: 'skill.md' }, + { id: SkillNavKey.Resources, text: '资源' }, + { id: SkillNavKey.Related, text: '相关技能' }, + { id: SkillNavKey.Version, text: '版本历史' } + ]; + + // Count badges for tabs + const resourceCount = computed(() => props.skill.resources?.length || 0); + const relatedCount = computed(() => (props.skill.related?.length || props.skill.relatedSkills?.length) || 0); + const versionCount = computed(() => props.skill.versions?.length || 0); + + function handleSetActiveTab(tab: SkillNavKey) { + activeTab.value = tab; + } + + function handleViewRelatedSkill(skill: any) { + emit('viewRelatedSkill', skill); + } + + function handleUseRelatedSkill(skill: any) { + emit('useRelatedSkill', skill); + } + + return () => ( +
+
+
+ {tabs.map(tab => ( + + ))} +
+
+ +
+
+ {activeTab.value === SkillNavKey.Overview && } + {activeTab.value === SkillNavKey.Installation && } + {activeTab.value === SkillNavKey.Skill && } + {activeTab.value === SkillNavKey.Resources && } + {activeTab.value === SkillNavKey.Related && ( + + )} + {activeTab.value === SkillNavKey.Version && } +
+ +
+
+ ); + } +}); diff --git a/packages/conversation/src/components/skill-market/api.ts b/packages/conversation/src/components/skill-market/api.ts new file mode 100644 index 00000000..75b0b184 --- /dev/null +++ b/packages/conversation/src/components/skill-market/api.ts @@ -0,0 +1,304 @@ +// API Client for Skill Market +import type { + SkillDetail, + DiscoverSkillItem, + SkillCommentListResponse, + SkillListResponse, + SkillQueryParams, +} from './types'; + +// ============== API Configuration ============== + +const API_BASE_URL = 'http://localhost:8080/api'; + +// ============== API Response Types (from Spring Boot) ============== + +interface ApiSkillItem { + id: string; + identifier: string; + name: string; + description: string; + category: string; + icon: string; + author: string; + createdAt: string; + updatedAt: string; + installCount: number; + rating: number; + tags: string[]; + isHot: boolean; + isNew: boolean; + coverImage?: string; + homepage?: string; + ratingAvg?: number; + commentCount?: number; +} + +interface ApiSkillDetail extends ApiSkillItem { + version?: string; + license?: string; + repository?: string; + readme?: string; + content?: string; + downloadUrl?: string; + github?: { + stars?: number; + url?: string; + }; + capabilities?: string[]; + usage?: string; + skillMdConfig?: string; + config?: Array<{ + name: string; + label: string; + type: string; + defaultVal?: string; + options?: string[]; + description?: string; + }>; + resources?: Array<{ + id: string; + name: string; + icon: string; + type: string; + fileHash?: string; + size?: number; + }>; + versions?: Array<{ + version: string; + date?: string; + changelog?: string; + isLatest?: boolean; + createdAt?: string; + }>; + related?: ApiSkillItem[]; + comments?: { + items: Array<{ + id: string; + author: string; + avatar?: string; + content: string; + rating: number; + createdAt: string; + }>; + total: number; + }; + ratingDistribution?: Record; +} + +interface ApiSkillListVO { + items: ApiSkillItem[]; + total: number; + categories?: Array<{ + id: string; + name: string; + icon: string; + count: number; + }>; +} + +interface ApiCommentsVO { + items: Array<{ + id: string; + author: string; + avatar?: string; + content: string; + rating: number; + createdAt: string; + }>; + total: number; +} + +// ============== Data Mapping Functions ============== + +function mapApiSkillItemToDiscoverSkillItem(item: ApiSkillItem): DiscoverSkillItem { + return { + id: item.id, + identifier: item.identifier, + name: item.name, + description: item.description, + category: item.category, + icon: item.icon, + author: item.author, + createdAt: item.createdAt, + updatedAt: item.updatedAt, + installCount: item.installCount, + rating: item.rating, + tags: item.tags || [], + isHot: item.isHot, + isNew: item.isNew, + coverImage: item.coverImage, + homepage: item.homepage, + ratingAvg: item.ratingAvg || item.rating, + commentCount: item.commentCount || 0, + }; +} + +function mapApiDetailToDiscoverSkillDetail(detail: ApiSkillDetail): SkillDetail { + return { + id: detail.id, + identifier: detail.identifier, + name: detail.name, + description: detail.description, + category: detail.category, + icon: detail.icon, + author: detail.author, + createdAt: detail.createdAt, + updatedAt: detail.updatedAt, + installCount: detail.installCount, + rating: detail.rating, + tags: detail.tags || [], + isHot: detail.isHot, + isNew: detail.isNew, + coverImage: detail.coverImage, + homepage: detail.homepage, + repository: detail.repository, + license: detail.license, + readme: detail.readme, + content: detail.content, + downloadUrl: detail.downloadUrl, + github: detail.github, + capabilities: detail.capabilities, + usage: detail.usage, + skillMdConfig: detail.skillMdConfig, + ratingDistribution: detail.ratingDistribution, + config: detail.config?.map(c => ({ + name: c.name, + label: c.label, + type: c.type as 'string' | 'number' | 'boolean' | 'select', + default: c.defaultVal, + options: c.options, + description: c.description, + })), + resources: detail.resources?.map(r => ({ + id: r.id, + name: r.name, + icon: r.icon, + type: r.type, + fileHash: r.fileHash, + size: r.size, + })), + versions: detail.versions?.map(v => ({ + version: v.version, + date: v.date || '', + changelog: v.changelog, + isLatest: v.isLatest, + createdAt: v.createdAt, + })), + related: detail.related?.map(mapApiSkillItemToDiscoverSkillItem), + comments: detail.comments, + }; +} + +// ============== API Client ============== + +class SkillApiClient { + private baseUrl: string; + + constructor(baseUrl: string = API_BASE_URL) { + this.baseUrl = baseUrl; + } + + private async request(url: string): Promise { + const response = await fetch(url, { + headers: { + 'Content-Type': 'application/json', + }, + }); + + if (!response.ok) { + throw new Error(`API request failed: ${response.status} ${response.statusText}`); + } + + return response.json(); + } + + async getSkillDetail(params: { + identifier: string; + version?: string; + }): Promise { + const url = `${this.baseUrl}/skills/${encodeURIComponent(params.identifier)}`; + const data = await this.request(url); + return mapApiDetailToDiscoverSkillDetail(data); + } + + async getSkillList(params: SkillQueryParams = {}): Promise { + const searchParams = new URLSearchParams(); + + if (params.category && params.category !== 'all') { + searchParams.set('category', params.category); + } + if (params.q) { + searchParams.set('q', params.q); + } + if (params.sort) { + searchParams.set('sort', params.sort); + } + if (params.page) { + searchParams.set('page', String(params.page)); + } + if (params.pageSize) { + searchParams.set('pageSize', String(params.pageSize)); + } + + const queryString = searchParams.toString(); + const url = `${this.baseUrl}/skills${queryString ? `?${queryString}` : ''}`; + + const data = await this.request(url); + + return { + items: data.items.map(mapApiSkillItemToDiscoverSkillItem), + total: data.total, + categories: data.categories?.map(c => ({ + id: c.id, + name: c.name, + icon: c.icon, + count: c.count, + })), + }; + } + + async getSkillComments(identifier: string): Promise { + const url = `${this.baseUrl}/skills/${encodeURIComponent(identifier)}/comments`; + const data = await this.request(url); + return { + items: data.items.map(item => ({ + id: item.id, + author: item.author, + avatar: item.avatar, + content: item.content, + rating: item.rating, + createdAt: item.createdAt, + })), + total: data.total, + }; + } + + async getSkillDownloadUrl(identifier: string): Promise { + const url = `${this.baseUrl}/skills/${encodeURIComponent(identifier)}/download`; + const data = await this.request<{ url: string }>(url); + return data.url; + } +} + +// ============== Singleton Instance ============== + +export const skillApi = new SkillApiClient(); + +// ============== Hook-ready API Functions ============== + +export async function fetchSkillDetail(params: { identifier: string; version?: string }) { + return skillApi.getSkillDetail(params); +} + +export async function fetchSkillList(params?: SkillQueryParams) { + return skillApi.getSkillList(params); +} + +export async function fetchSkillComments(identifier: string) { + return skillApi.getSkillComments(identifier); +} + +export async function getSkillDownloadUrl(identifier: string) { + return skillApi.getSkillDownloadUrl(identifier); +} diff --git a/packages/conversation/src/components/skill-market/index.scss b/packages/conversation/src/components/skill-market/index.scss new file mode 100644 index 00000000..593f42f1 --- /dev/null +++ b/packages/conversation/src/components/skill-market/index.scss @@ -0,0 +1,1467 @@ +// ============================================ +// Skill Market Styles +// ============================================ +$skill-primary-blue: #0e6ded; +$skill-primary-light: #328bff; +$skill-bg: #F8FAFC; +$skill-text: #1E293B; +$skill-text-secondary: #64748B; +$skill-border: rgba(0, 0, 0, 0.08); +$skill-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); +$skill-shadow-md: 0 4px 12px rgba(14, 109, 237, 0.08); +$skill-shadow-lg: 0 8px 24px rgba(14, 109, 237, 0.12); + +// Skill Market Nav Button (Entry Point) +.f-skill-market-nav { + margin-top: 24px; + margin-left: 16px; +} + +.f-skill-market-nav-divider { + position: relative; + text-align: center; + margin-bottom: 20px; + + &::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08), transparent); + } + + .f-skill-market-nav-divider-text { + position: relative; + background: #fff; + padding: 0 16px; + color: $skill-text-secondary; + font-size: 12px; + font-weight: 500; + } +} + +.f-skill-market-nav-btn { + display: flex; + align-items: center; + gap: 14px; + width: 100%; + padding: 14px 18px; + background: linear-gradient(135deg, #ffffff 0%, #F8FAFC 100%); + border: 1px solid $skill-border; + border-radius: 14px; + cursor: pointer; + transition: all 0.2s ease; + text-align: left; + box-shadow: $skill-shadow-sm; + + &:hover { + background: linear-gradient(135deg, #F8FAFC 0%, #e6f0ff 100%); + border-color: rgba(14, 109, 237, 0.2); + box-shadow: $skill-shadow-md; + transform: translateY(-1px); + + .f-skill-market-nav-arrow { + transform: translateX(3px); + color: $skill-primary-blue; + } + } +} + +.f-skill-market-nav-icon { + display: flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + background: linear-gradient(135deg, $skill-primary-blue 0%, $skill-primary-light 100%); + border-radius: 12px; + color: #fff; + flex-shrink: 0; + box-shadow: 0 2px 8px rgba(14, 109, 237, 0.25); + + svg { + flex-shrink: 0; + } +} + +.f-skill-market-nav-content { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + gap: 3px; + min-height: 44px; +} + +.f-skill-market-nav-title { + font-size: 15px; + font-weight: 600; + color: $skill-text; + line-height: 1.3; +} + +.f-skill-market-nav-desc { + font-size: 12px; + color: $skill-text-secondary; + line-height: 1.4; +} + +.f-skill-market-nav-arrow { + color: $skill-text-secondary; + transition: all 0.2s ease; + flex-shrink: 0; + opacity: 0.6; +} + + +// Skill Market Detail Page +.f-skill-market-detail { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + padding-left: 16px; +} + +.f-skill-market-detail-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px 12px 0; + border-bottom: 1px solid $skill-border; + margin-bottom: 20px; + min-height: 72px; +} + +.f-skill-market-detail-header-left { + display: flex; + align-items: center; + height: 100%; +} + +.f-skill-market-detail-title-row { + display: flex; + align-items: center; + gap: 12px; + height: 36px; +} + +.f-skill-market-detail-icon { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + background: linear-gradient(135deg, $skill-primary-blue 0%, $skill-primary-light 100%); + border-radius: 10px; + color: #fff; + box-shadow: 0 2px 8px rgba(14, 109, 237, 0.2); + flex-shrink: 0; + + svg { + width: 18px; + height: 18px; + } +} + +.f-skill-market-detail-title { + font-size: 16px; + font-weight: 600; + color: $skill-text; + margin: 0; + line-height: 1.2; + display: flex; + align-items: center; +} + +.f-skill-market-detail-subtitle { + font-size: 12px; + color: $skill-text-secondary; + margin: 2px 0 0 0; + line-height: 1.3; + display: flex; + align-items: center; +} + +.f-skill-market-detail-header-right { + display: flex; + align-items: center; + gap: 12px; + height: 100%; +} + +.f-skill-market-detail-search { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + background: #fff; + border: 1px solid $skill-border; + border-radius: 8px; + transition: all 0.2s ease; + box-shadow: $skill-shadow-sm; + min-width: 180px; + height: 34px; + box-sizing: border-box; + + &:focus-within { + border-color: $skill-primary-blue; + box-shadow: 0 0 0 3px rgba(14, 109, 237, 0.1), $skill-shadow-md; + } + + .f-icon { + color: $skill-text-secondary; + font-size: 14px; + flex-shrink: 0; + } + + input { + border: none; + background: transparent; + outline: none; + font-size: 13px; + color: $skill-text; + width: 130px; + height: 100%; + + &::placeholder { + color: $skill-text-secondary; + } + } +} + +.f-skill-market-detail-close { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border: none; + background: transparent; + border-radius: 8px; + cursor: pointer; + color: $skill-text-secondary; + transition: all 0.2s ease; + + &:hover { + background: rgba(0, 0, 0, 0.05); + color: $skill-text; + } +} + +.f-skill-market-detail-nav { + margin-bottom: 20px; + padding-left: 16px; + + :deep(.f-nav) { + display: flex; + gap: 4px; + + .f-nav-item { + padding: 8px 16px; + border-radius: 8px; + font-size: 13px; + color: $skill-text-secondary; + transition: all 0.2s ease; + font-weight: 500; + + &:hover { + color: $skill-primary-blue; + background: rgba(14, 109, 237, 0.06); + } + + &.active { + color: $skill-primary-blue; + background: rgba(14, 109, 237, 0.1); + font-weight: 600; + } + } + } +} + +.f-skill-market-detail-body { + flex: 1; + overflow-y: auto; +} + +.f-skill-market-detail-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + padding-left: 8px; + + @media (max-width: 900px) { + grid-template-columns: repeat(2, 1fr); + } +} + +.f-skill-market-detail-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 60px 20px; + color: rgba(0, 0, 0, 0.35); + + p { + margin-top: 12px; + font-size: 14px; + } +} + + +// Skill Card +.f-skill-card { + background: #fff; + border: 1px solid $skill-border; + border-radius: 14px; + padding: 18px; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + flex-direction: column; + gap: 14px; + + &:hover { + border-color: rgba(14, 109, 237, 0.25); + box-shadow: $skill-shadow-lg; + transform: translateY(-2px); + } +} + +.f-skill-card-header { + display: flex; + align-items: flex-start; + gap: 12px; +} + +.f-skill-card-icon { + width: 48px; + height: 48px; + border-radius: 12px; + background: linear-gradient(135deg, #e6f0ff 0%, #F8FAFC 100%); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + border: 1px solid rgba(14, 109, 237, 0.08); + + img { + width: 28px; + height: 28px; + object-fit: contain; + } +} + +.f-skill-card-badge { + font-size: 10px; + padding: 3px 8px; + border-radius: 6px; + font-weight: 600; + flex-shrink: 0; + + &.f-skill-card-badge-hot { + background: linear-gradient(135deg, #F97316, #FB923C); + color: #fff; + box-shadow: 0 2px 6px rgba(249, 115, 22, 0.3); + } + + &.f-skill-card-badge-new { + background: linear-gradient(135deg, $skill-primary-blue, $skill-primary-light); + color: #fff; + box-shadow: 0 2px 6px rgba(14, 109, 237, 0.3); + } +} + +.f-skill-card-body { + flex: 1; +} + +.f-skill-card-title { + font-size: 15px; + font-weight: 600; + color: $skill-text; + margin: 0 0 8px 0; + line-height: 1.4; +} + +.f-skill-card-desc { + font-size: 13px; + color: $skill-text-secondary; + line-height: 1.5; + margin: 0; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.f-skill-card-footer { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 12px; + border-top: 1px solid $skill-border; +} + +.f-skill-card-tags { + display: flex; + gap: 6px; + flex-wrap: wrap; +} + +.f-skill-card-tag { + font-size: 11px; + padding: 3px 10px; + background: rgba(14, 109, 237, 0.08); + color: $skill-primary-blue; + border-radius: 6px; + font-weight: 500; +} + +.f-skill-card-stats { + display: flex; + gap: 12px; +} + +.f-skill-card-stat { + display: flex; + align-items: center; + gap: 4px; + font-size: 12px; + color: $skill-text-secondary; + + .f-icon { + font-size: 14px; + color: $skill-text-secondary; + } +} + + +// Skill Detail Page +.f-skill-detail { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + padding-left: 16px; +} + +.f-skill-detail-header { + margin-bottom: 20px; + padding-top: 10px; +} + +.f-skill-detail-back-btn { + display: flex; + align-items: center; + gap: 6px; + padding: 10px 14px; + margin-left: 8px; + border: none; + background: transparent; + border-radius: 8px; + cursor: pointer; + color: rgba(0, 0, 0, 0.65); + font-size: 13px; + font-weight: 500; + transition: all 0.2s ease; + + &:hover { + background: rgba(0, 0, 0, 0.05); + color: $skill-primary-blue; + } + + .f-icon { + font-size: 16px; + } +} + +.f-skill-detail-profile { + display: flex; + align-items: flex-start; + justify-content: space-between; + padding: 20px; + background: linear-gradient(135deg, #F8FAFC 0%, #e6f0ff 100%); + border-radius: 14px; + margin-bottom: 20px; + border: 1px solid $skill-border; +} + +.f-skill-detail-profile-left { + display: flex; + gap: 16px; + flex: 1; +} + +.f-skill-detail-avatar { + width: 64px; + height: 64px; + border-radius: 16px; + background: #fff; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + flex-shrink: 0; + + img { + width: 40px; + height: 40px; + object-fit: contain; + } +} + +.f-skill-detail-profile-info { + flex: 1; +} + +.f-skill-detail-name { + font-size: 20px; + font-weight: 700; + color: $skill-text; + margin: 0 0 8px 0; + line-height: 1.3; +} + +.f-skill-detail-meta { + display: flex; + align-items: center; + gap: 8px; + font-size: 12px; + color: rgba(0, 0, 0, 0.45); + margin-bottom: 10px; + flex-wrap: wrap; +} + +.f-skill-detail-category { + background: rgba(14, 109, 237, 0.1); + color: $skill-primary-blue; + padding: 2px 8px; + border-radius: 4px; + font-weight: 500; +} + +.f-skill-detail-sep { + color: rgba(0, 0, 0, 0.2); +} + +.f-skill-detail-tags { + display: flex; + gap: 6px; + flex-wrap: wrap; +} + +.f-skill-detail-tag { + font-size: 11px; + padding: 3px 10px; + background: rgba(14, 109, 237, 0.08); + color: $skill-primary-blue; + border-radius: 4px; +} + +.f-skill-detail-profile-right { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 16px; +} + +.f-skill-detail-stats { + display: flex; + gap: 20px; +} + +.f-skill-detail-stat { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + + .f-icon { + font-size: 16px; + color: rgba(0, 0, 0, 0.35); + } +} + +.f-skill-detail-stat-value { + font-size: 18px; + font-weight: 600; + color: rgba(0, 0, 0, 0.75); +} + +.f-skill-detail-stat-label { + font-size: 11px; + color: rgba(0, 0, 0, 0.4); +} + +.f-skill-detail-use-btn { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 24px; + background: linear-gradient(135deg, $skill-primary-blue 0%, $skill-primary-light 100%); + border: none; + border-radius: 10px; + color: #fff; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + box-shadow: 0 2px 8px rgba(14, 109, 237, 0.25); + + &:hover { + box-shadow: 0 4px 16px rgba(14, 109, 237, 0.35); + transform: translateY(-1px); + } + + .f-icon { + font-size: 14px; + } +} + +.f-skill-detail-section-title { + font-size: 14px; + font-weight: 600; + color: $skill-text; + margin: 0 0 12px 0; +} + +.f-skill-detail-section-content { + font-size: 13px; + color: rgba(0, 0, 0, 0.65); + line-height: 1.7; + margin: 0; +} + +.f-skill-detail-config-list { + display: flex; + flex-direction: column; + gap: 10px; +} + +.f-skill-detail-config-item { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 16px; + background: #f9fafb; + border-radius: 8px; +} + +.f-skill-detail-config-label { + font-size: 13px; + font-weight: 500; + color: rgba(0, 0, 0, 0.75); + min-width: 80px; +} + +.f-skill-detail-config-type { + font-size: 11px; + padding: 2px 6px; + background: rgba(0, 0, 0, 0.06); + color: rgba(0, 0, 0, 0.55); + border-radius: 4px; +} + +.f-skill-detail-config-options { + display: flex; + gap: 6px; + margin-left: auto; + flex-wrap: wrap; +} + +.f-skill-detail-config-option { + font-size: 11px; + padding: 2px 8px; + background: rgba(14, 109, 237, 0.08); + color: $skill-primary-blue; + border-radius: 4px; +} + +.f-skill-detail-config-page { + .f-skill-detail-config-form { + display: flex; + flex-direction: column; + gap: 16px; + } + + .f-skill-detail-config-form-item { + display: flex; + flex-direction: column; + gap: 6px; + } + + .f-skill-detail-config-form-label { + font-size: 13px; + font-weight: 500; + color: rgba(0, 0, 0, 0.75); + } + + .f-skill-detail-config-form-select, + .f-skill-detail-config-form-input { + padding: 8px 12px; + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 6px; + font-size: 13px; + outline: none; + transition: all 0.2s ease; + max-width: 300px; + + &:focus { + border-color: rgba(14, 109, 237, 0.4); + box-shadow: 0 0 0 3px rgba(14, 109, 237, 0.08); + } + } +} + +.f-skill-detail-empty-state { + padding: 40px 20px; + text-align: center; + color: rgba(0, 0, 0, 0.35); + font-size: 13px; +} + +.f-skill-detail-readme { + .f-skill-detail-readme-content { + background: #f9fafb; + border-radius: 8px; + padding: 20px; + } + + .f-skill-detail-readme-markdown { + font-size: 13px; + line-height: 1.8; + color: rgba(0, 0, 0, 0.75); + } + + .f-skill-detail-readme-h2 { + font-size: 16px; + font-weight: 600; + color: rgba(0, 0, 0, 0.85); + margin: 20px 0 12px 0; + + &:first-child { + margin-top: 0; + } + } + + .f-skill-detail-readme-h3 { + font-size: 14px; + font-weight: 600; + color: rgba(0, 0, 0, 0.8); + margin: 16px 0 10px 0; + } + + .f-skill-detail-readme-li { + margin-left: 20px; + margin-bottom: 6px; + } + + .f-skill-detail-readme-p { + margin: 8px 0; + } +} + +// Skill Market Demo Page Styles +.skill-market-demo { + min-height: 600px; +} + +.skill-market-demo-header { + text-align: center; + margin-bottom: 32px; +} + +.skill-market-demo-title { + font-size: 24px; + font-weight: 600; + color: rgba(0, 0, 0, 0.85); + margin-bottom: 8px; +} + +.skill-market-demo-subtitle { + font-size: 14px; + color: rgba(0, 0, 0, 0.45); +} + +// ============================================ +// Skill Detail Tabs Styles +// ============================================ + +// Skill Detail Body - Two Column Layout +.f-skill-detail-body { + display: flex; + gap: 24px; + align-items: flex-start; + padding-left: 8px; +} + +.f-skill-detail-content { + flex: 1; + min-width: 0; +} + +// Tab Navigation +.f-skill-detail-tabs { + border-bottom: 1px solid rgba(0, 0, 0, 0.08); + margin-bottom: 20px; + padding-left: 8px; +} + +.f-skill-detail-tab-list { + display: flex; + gap: 4px; +} + +.f-skill-detail-tab { + padding: 10px 18px; + border: none; + background: transparent; + font-size: 13px; + color: rgba(0, 0, 0, 0.55); + cursor: pointer; + border-bottom: 2px solid transparent; + transition: all 0.2s ease; + margin-bottom: -1px; + display: inline-flex; + align-items: center; + gap: 6px; + + &:hover { + color: $skill-primary-blue; + } + + &.active { + color: $skill-primary-blue; + border-bottom-color: $skill-primary-blue; + font-weight: 500; + } +} + +.f-skill-detail-tab-badge { + font-size: 10px; + padding: 2px 6px; + background: rgba(14, 109, 237, 0.1); + color: $skill-primary-blue; + border-radius: 10px; + font-weight: 500; +} + +// ============== Sidebar Styles ============== +.f-skill-sidebar { + width: 280px; + flex-shrink: 0; + position: sticky; + top: 20px; + max-height: calc(100vh - 100px); + overflow-y: auto; + padding-right: 16px; +} + +.f-skill-sidebar-section { + background: #F8FAFC; + border-radius: 12px; + padding: 16px; + margin-bottom: 16px; + border: 1px solid $skill-border; + + &:last-child { + margin-bottom: 0; + } +} + +.f-skill-sidebar-title { + font-size: 13px; + font-weight: 600; + color: $skill-text; + margin: 0 0 12px 0; +} + +.f-skill-sidebar-install { + display: flex; + flex-direction: column; + gap: 10px; +} + +.f-skill-sidebar-install-item { + display: flex; + flex-direction: column; + gap: 6px; +} + +.f-skill-sidebar-install-label { + font-size: 12px; + font-weight: 500; + color: $skill-text-secondary; +} + +.f-skill-sidebar-install-command-wrapper { + display: flex; + align-items: center; + gap: 8px; +} + +.f-skill-sidebar-install-command { + flex: 1; + background: #fff; + border: 1px solid $skill-border; + border-radius: 6px; + padding: 8px 12px; + font-size: 12px; + font-family: 'Monaco', 'Menlo', monospace; + color: $skill-text; + overflow-x: auto; + white-space: nowrap; +} + +.f-skill-sidebar-install-copy-btn { + padding: 6px 12px; + background: #fff; + border: 1px solid $skill-border; + border-radius: 6px; + font-size: 12px; + color: $skill-text-secondary; + cursor: pointer; + transition: all 0.2s ease; + white-space: nowrap; + + &:hover { + border-color: $skill-primary-blue; + color: $skill-primary-blue; + background: rgba(14, 109, 237, 0.04); + } + + &.copied { + background: rgba(14, 109, 237, 0.08); + border-color: $skill-primary-blue; + color: $skill-primary-blue; + } +} + +.f-skill-sidebar-tags { + display: flex; + gap: 6px; + flex-wrap: wrap; +} + +.f-skill-sidebar-tag { + font-size: 11px; + padding: 4px 10px; + background: rgba(14, 109, 237, 0.08); + color: $skill-primary-blue; + border-radius: 6px; + font-weight: 500; +} + +.f-skill-sidebar-file-tree { + display: flex; + flex-direction: column; + gap: 4px; +} + +.f-skill-sidebar-file-item { + display: flex; + align-items: center; + gap: 8px; + padding: 6px 8px; + background: #fff; + border-radius: 4px; + font-size: 12px; + color: rgba(0, 0, 0, 0.65); + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + background: rgba(14, 109, 237, 0.06); + color: $skill-primary-blue; + } + + .f-icon { + font-size: 14px; + color: rgba(0, 0, 0, 0.4); + } +} + +.f-skill-sidebar-stats { + display: flex; + gap: 16px; +} + +.f-skill-sidebar-stat { + display: flex; + align-items: center; + gap: 6px; + font-size: 13px; + color: $skill-text-secondary; + + .f-icon { + font-size: 14px; + color: $skill-text-secondary; + } +} + +// Overview Tab +.f-skill-overview { + padding: 0 4px; +} + +.f-skill-overview-section { + margin-bottom: 24px; +} + +.f-skill-overview-summary { + font-size: 14px; + color: $skill-text-secondary; + line-height: 1.7; + margin: 0; +} + +.f-skill-overview-capabilities { + list-style: none; + padding: 0; + margin: 0; +} + +.f-skill-overview-capability-item { + display: flex; + align-items: flex-start; + gap: 8px; + padding: 6px 0; + font-size: 13px; + color: $skill-text-secondary; + line-height: 1.5; +} + +.f-skill-overview-capability-bullet { + color: $skill-primary-blue; + font-weight: 600; +} + +.f-skill-overview-usage { + font-size: 13px; + color: $skill-text-secondary; + line-height: 1.7; + margin: 0; +} + +.f-skill-overview-collapsible-header { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 12px 16px; + background: rgba(0, 0, 0, 0.03); + border: 1px solid $skill-border; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + background: rgba(0, 0, 0, 0.05); + } + + .f-skill-overview-collapsible-title { + font-size: 13px; + font-weight: 500; + color: $skill-text-secondary; + font-family: 'Monaco', 'Menlo', monospace; + } + + .f-skill-overview-collapsible-arrow { + font-size: 16px; + color: $skill-text-secondary; + font-weight: 400; + line-height: 1; + } +} + +.f-skill-overview-code { + margin-top: 8px; + padding: 16px; + background: #F8FAFC; + border-radius: 8px; + max-height: 300px; + overflow-y: auto; + border: 1px solid $skill-border; + font-size: 12px; + font-family: 'Monaco', 'Menlo', monospace; + color: $skill-text; + white-space: pre-wrap; + word-break: break-all; + line-height: 1.6; +} + +// Install Tab +.f-skill-install { + display: flex; + flex-direction: column; + gap: 24px; +} + +.f-skill-install-section { + margin-bottom: 16px; +} + +.f-skill-install-item { + background: #F8FAFC; + border-radius: 12px; + padding: 16px; + border: 1px solid $skill-border; +} + +.f-skill-install-label { + font-size: 13px; + font-weight: 600; + color: $skill-text; + margin-bottom: 10px; +} + +.f-skill-install-command-wrapper { + display: flex; + align-items: center; + gap: 12px; +} + +.f-skill-install-command { + flex: 1; + background: #fff; + border: 1px solid $skill-border; + border-radius: 8px; + padding: 12px 16px; + font-size: 13px; + font-family: 'Monaco', 'Menlo', monospace; + color: $skill-text; + overflow-x: auto; +} + +.f-skill-install-copy-btn { + padding: 8px 16px; + background: #fff; + border: 1px solid $skill-border; + border-radius: 8px; + font-size: 13px; + color: rgba(0, 0, 0, 0.65); + cursor: pointer; + transition: all 0.2s ease; + white-space: nowrap; + + &:hover { + border-color: $skill-primary-blue; + color: $skill-primary-blue; + background: rgba(14, 109, 237, 0.04); + } + + &.copied { + background: rgba(14, 109, 237, 0.08); + border-color: $skill-primary-blue; + color: $skill-primary-blue; + } +} + +// Config Tab +.f-skill-config { + background: #F8FAFC; + border-radius: 12px; + overflow: hidden; + border: 1px solid $skill-border; +} + +.f-skill-config-header { + padding: 12px 16px; + background: rgba(0, 0, 0, 0.03); + border-bottom: 1px solid rgba(0, 0, 0, 0.06); +} + +.f-skill-config-title { + font-size: 13px; + font-weight: 500; + color: rgba(0, 0, 0, 0.65); +} + +.f-skill-config-body { + padding: 16px; + max-height: 500px; + overflow-y: auto; +} + +.f-skill-config-code { + margin: 0; + font-size: 13px; + font-family: 'Monaco', 'Menlo', monospace; + color: rgba(0, 0, 0, 0.75); + white-space: pre-wrap; + word-break: break-all; + line-height: 1.6; +} + +// Resources Tab +.f-skill-resources-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + + @media (max-width: 900px) { + grid-template-columns: repeat(2, 1fr); + } +} + +.f-skill-resource-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + padding: 20px 16px; + background: #F8FAFC; + border-radius: 12px; + border: 1px solid $skill-border; + transition: all 0.2s ease; + + &:hover { + background: #e6f0ff; + border-color: rgba(14, 109, 237, 0.2); + transform: translateY(-2px); + } +} + +.f-skill-resource-icon { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: #fff; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + + .f-icon { + font-size: 24px; + color: $skill-primary-blue; + } +} + +.f-skill-resource-name { + font-size: 13px; + font-weight: 500; + color: $skill-text; + text-align: center; +} + +.f-skill-resource-type { + font-size: 10px; + padding: 3px 8px; + background: rgba(14, 109, 237, 0.08); + color: $skill-primary-blue; + border-radius: 6px; + font-weight: 500; +} + +.f-skill-resource-size { + font-size: 11px; + color: rgba(0, 0, 0, 0.4); +} + +.f-skill-resource-add-btn { + padding: 6px 12px; + background: transparent; + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 4px; + font-size: 12px; + color: rgba(0, 0, 0, 0.55); + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + border-color: $skill-primary-blue; + color: $skill-primary-blue; + } +} + +// Related Tab +.f-skill-related-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; +} + +.f-skill-related-card { + background: #F8FAFC; + border-radius: 12px; + padding: 16px; + border: 1px solid $skill-border; + transition: all 0.2s ease; + + &:hover { + background: #e6f0ff; + border-color: rgba(14, 109, 237, 0.2); + transform: translateY(-2px); + } +} + +.f-skill-related-card-header { + display: flex; + gap: 12px; + margin-bottom: 12px; +} + +.f-skill-related-card-icon { + width: 44px; + height: 44px; + border-radius: 10px; + background: #fff; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); + + img { + width: 28px; + height: 28px; + object-fit: contain; + } +} + +.f-skill-related-card-info { + flex: 1; + min-width: 0; +} + +.f-skill-related-card-name { + font-size: 14px; + font-weight: 600; + color: $skill-text; + margin-bottom: 4px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.f-skill-related-card-author { + font-size: 12px; + color: $skill-text-secondary; + margin-bottom: 4px; +} + +.f-skill-related-card-rating { + display: flex; + align-items: center; + gap: 4px; + font-size: 12px; + color: $skill-text-secondary; + + .f-icon { + color: #f59e0b; + } +} + +.f-skill-related-card-actions { + display: flex; + gap: 8px; +} + +.f-skill-related-card-btn { + flex: 1; + padding: 8px 12px; + background: #fff; + border: 1px solid $skill-border; + border-radius: 8px; + font-size: 12px; + color: $skill-text-secondary; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + border-color: $skill-primary-blue; + color: $skill-primary-blue; + background: rgba(14, 109, 237, 0.04); + } +} + +// Versions Tab +.f-skill-versions-timeline { + padding-left: 20px; +} + +.f-skill-version-item { + position: relative; + padding-left: 30px; + padding-bottom: 24px; + + &:last-child { + padding-bottom: 0; + } +} + +.f-skill-version-dot { + position: absolute; + left: -6px; + top: 4px; + width: 12px; + height: 12px; + background: $skill-primary-blue; + border-radius: 50%; + border: 2px solid #fff; + box-shadow: 0 0 0 2px rgba(14, 109, 237, 0.2); +} + +.f-skill-version-line { + position: absolute; + left: -1px; + top: 20px; + bottom: 0; + width: 2px; + background: $skill-border; +} + +.f-skill-version-content { + display: flex; + align-items: baseline; + gap: 12px; +} + +.f-skill-version-number { + font-size: 14px; + font-weight: 600; + color: $skill-text; + cursor: pointer; + transition: color 0.2s ease; + + &:hover { + color: $skill-primary-blue; + } +} + +.f-skill-version-date { + font-size: 12px; + color: $skill-text-secondary; +} + +.f-skill-version-changelog { + margin-top: 8px; + padding: 12px; + background: #F8FAFC; + border-radius: 8px; + border: 1px solid $skill-border; + font-size: 12px; + color: rgba(0, 0, 0, 0.6); + line-height: 1.6; +} + +.f-skill-version-changelog-line { + margin-bottom: 4px; + + &:last-child { + margin-bottom: 0; + } +} + +// Empty State +.f-skill-detail-empty-state { + padding: 40px 20px; + text-align: center; + color: $skill-text-secondary; + font-size: 13px; +} diff --git a/packages/conversation/src/components/skill-market/mockData.ts b/packages/conversation/src/components/skill-market/mockData.ts new file mode 100644 index 00000000..8469cd44 --- /dev/null +++ b/packages/conversation/src/components/skill-market/mockData.ts @@ -0,0 +1,363 @@ +// Mock Data - Aligned with LobeHub DiscoverSkillDetail structure +import type { SkillDetail, DiscoverSkillItem, SkillCommentListResponse } from './types'; + +export const MOCK_SKILLS: DiscoverSkillItem[] = [ + { + id: '1', + identifier: 'code-review-gpt', + name: 'Code Review GPT', + description: 'AI-powered code review assistant that helps identify bugs, security issues, and improvement opportunities.', + category: 'coding-agents-ides', + icon: 'https://example.com/icons/code-review.png', + author: 'LobeHub', + createdAt: '2024-01-15T08:00:00Z', + updatedAt: '2024-03-20T10:30:00Z', + installCount: 15842, + rating: 4.8, + tags: ['code-review', 'security', 'best-practices'], + isHot: true, + ratingAvg: 4.8, + commentCount: 256, + }, + { + id: '2', + identifier: 'git-assistant', + name: 'Git Assistant', + description: 'Intelligent Git helper for managing branches, resolving conflicts, and writing commit messages.', + category: 'git-github', + icon: 'https://example.com/icons/git.png', + author: 'LobeHub', + createdAt: '2024-02-10T08:00:00Z', + updatedAt: '2024-03-18T14:20:00Z', + installCount: 12305, + rating: 4.6, + tags: ['git', 'version-control', 'productivity'], + isNew: true, + ratingAvg: 4.6, + commentCount: 128, + }, + { + id: '3', + identifier: 'api-designer', + name: 'API Designer', + description: 'Design and document RESTful APIs with AI-powered suggestions and best practices.', + category: 'web-frontend-development', + icon: 'https://example.com/icons/api.png', + author: 'LobeHub', + createdAt: '2024-01-20T08:00:00Z', + updatedAt: '2024-03-15T09:00:00Z', + installCount: 9876, + rating: 4.5, + tags: ['api', 'rest', 'documentation'], + ratingAvg: 4.5, + commentCount: 89, + }, + { + id: '4', + identifier: 'docker-helper', + name: 'Docker Helper', + description: 'AI assistant for Docker containerization, Dockerfile optimization, and docker-compose configuration.', + category: 'devops-cloud', + icon: 'https://example.com/icons/docker.png', + author: 'LobeHub', + createdAt: '2024-02-25T08:00:00Z', + updatedAt: '2024-03-22T11:45:00Z', + installCount: 8543, + rating: 4.7, + tags: ['docker', 'devops', 'containerization'], + isHot: true, + ratingAvg: 4.7, + commentCount: 167, + }, + { + id: '5', + identifier: 'test-generator', + name: 'Test Generator', + description: 'Automatically generate unit tests, integration tests, and end-to-end tests for your codebase.', + category: 'coding-agents-ides', + icon: 'https://example.com/icons/test.png', + author: 'LobeHub', + createdAt: '2024-03-01T08:00:00Z', + updatedAt: '2024-03-21T16:00:00Z', + installCount: 6234, + rating: 4.4, + tags: ['testing', 'automation', 'quality'], + isNew: true, + ratingAvg: 4.4, + commentCount: 72, + }, + { + id: '6', + identifier: 'readme-writer', + name: 'README Writer', + description: 'Generate beautiful and comprehensive README files for your projects with AI.', + category: 'productivity-tasks', + icon: 'https://example.com/icons/readme.png', + author: 'LobeHub', + createdAt: '2024-03-05T08:00:00Z', + updatedAt: '2024-03-19T13:30:00Z', + installCount: 4521, + rating: 4.3, + tags: ['documentation', 'readme', 'writing'], + ratingAvg: 4.3, + commentCount: 45, + }, +]; + +export const MOCK_SKILL_DETAIL: SkillDetail = { + id: '1', + identifier: 'code-review-gpt', + name: 'Code Review GPT', + description: 'AI-powered code review assistant that helps identify bugs, security issues, and improvement opportunities.', + category: 'coding-agents-ides', + icon: 'https://example.com/icons/code-review.png', + author: 'LobeHub', + createdAt: '2024-01-15T08:00:00Z', + updatedAt: '2024-03-20T10:30:00Z', + installCount: 15842, + rating: 4.8, + tags: ['code-review', 'security', 'best-practices'], + isHot: true, + homepage: 'https://github.com/lobehub/code-review-gpt', + license: 'MIT', + repository: 'https://github.com/lobehub/code-review-gpt', + + // Download URL for installation + downloadUrl: 'https://market.lobehub.com/api/v1/skills/code-review-gpt/download', + + // GitHub info + github: { + stars: 2847, + url: 'https://github.com/lobehub/code-review-gpt', + }, + + // Rating distribution + ratingDistribution: { + 5: 189, + 4: 45, + 3: 15, + 2: 5, + 1: 2, + }, + + // Content / README + content: `# Code Review GPT + +An AI-powered code review assistant that helps developers identify bugs, security vulnerabilities, and code improvement opportunities. + +## Features + +- **Automated Code Analysis**: Scans your code for common issues +- **Security Vulnerability Detection**: Identifies potential security risks +- **Best Practice Suggestions**: Recommends code style and architecture improvements +- **Detailed Reports**: Provides comprehensive review reports + +## Installation + +\`\`\`bash +npx @lobehub/skill-code-review-gpt install +\`\`\` + +## Usage + +Simply run the skill in your repository: + +\`\`\`bash +lobe-skill code-review-gpt --path ./src +\`\`\` + +## Configuration + +| Option | Description | Default | +|--------|-------------|---------| +| severity | Minimum severity level | medium | +| includeSecurity | Enable security checks | true | +`, + readme: `# Code Review GPT + +An AI-powered code review assistant that helps developers identify bugs, security vulnerabilities, and code improvement opportunities.`, + + // Skill configuration + config: [ + { + name: 'severity', + label: 'Severity Level', + type: 'select', + default: 'medium', + options: ['low', 'medium', 'high', 'critical'], + description: 'Minimum severity level for reported issues', + }, + { + name: 'includeSecurity', + label: 'Include Security Checks', + type: 'boolean', + default: true, + description: 'Enable security vulnerability detection', + }, + ], + + // Install commands + installCommands: { + npm: 'npx @lobehub/skill-code-review-gpt@latest', + yarn: 'yarn add @lobehub/skill-code-review-gpt', + pnpm: 'pnpm add @lobehub/skill-code-review-gpt', + cdn: 'https://unpkg.com/@lobehub/skill-code-review-gpt/dist/index.js', + }, + + // Resources (files provided by the skill) + resources: [ + { + id: 'res-1', + name: 'review-template.md', + icon: 'f-icon f-icon-file', + type: 'markdown', + fileHash: 'abc123', + size: 2048, + }, + { + id: 'res-2', + name: 'security-rules.json', + icon: 'f-icon f-icon-file', + type: 'json', + fileHash: 'def456', + size: 1024, + }, + { + id: 'res-3', + name: 'code-patterns.yaml', + icon: 'f-icon f-icon-file', + type: 'yaml', + fileHash: 'ghi789', + size: 1536, + }, + { + id: 'res-4', + name: 'review-config.ts', + icon: 'f-icon f-icon-file', + type: 'typescript', + fileHash: 'jkl012', + size: 3072, + }, + ], + + // Related skills + related: [ + { + id: '2', + identifier: 'git-assistant', + name: 'Git Assistant', + description: 'Intelligent Git helper', + category: 'git-github', + icon: 'https://example.com/icons/git.png', + author: 'LobeHub', + createdAt: '2024-02-10T08:00:00Z', + updatedAt: '2024-03-18T14:20:00Z', + installCount: 12305, + rating: 4.6, + tags: ['git', 'version-control'], + ratingAvg: 4.6, + commentCount: 128, + }, + { + id: '5', + identifier: 'test-generator', + name: 'Test Generator', + description: 'Generate automated tests', + category: 'coding-agents-ides', + icon: 'https://example.com/icons/test.png', + author: 'LobeHub', + createdAt: '2024-03-01T08:00:00Z', + updatedAt: '2024-03-21T16:00:00Z', + installCount: 6234, + rating: 4.4, + tags: ['testing', 'automation'], + ratingAvg: 4.4, + commentCount: 72, + }, + ], + + // Local extension fields + capabilities: [ + 'Automated code analysis and review', + 'Security vulnerability detection', + 'Code style and best practice suggestions', + 'Detailed review reports with fix recommendations', + 'Integration with CI/CD pipelines', + 'Support for multiple programming languages', + ], + usage: 'Code Review GPT can be used to automatically review pull requests, check code before commits, or perform batch reviews of your codebase. Simply configure the severity level and run the review command.', + skillMdConfig: `# skill.md Configuration + +\`\`\`yaml +name: code-review-gpt +version: 1.2.0 +description: AI-powered code review assistant + +settings: + severity: medium + includeSecurity: true + languages: + - javascript + - typescript + - python + - go + +prompts: + reviewTemplate: | + Please review the following code for: + 1. Security vulnerabilities + 2. Code quality issues + 3. Performance concerns + 4. Best practice violations +\`\`\``, + + // Versions history + versions: [ + { + version: '1.2.0', + date: '2024-03-20', + changelog: '- Added support for Go language\n- Improved security detection accuracy\n- Fixed false positive issues', + }, + { + version: '1.1.0', + date: '2024-02-15', + changelog: '- Added Python support\n- Enhanced AI model\n- Improved reporting format', + }, + { + version: '1.0.0', + date: '2024-01-15', + changelog: '- Initial release\n- JavaScript/TypeScript support\n- Basic security checks', + }, + ], +}; + +// Mock comments +export const MOCK_COMMENTS: SkillCommentListResponse = { + items: [ + { + id: 'c1', + author: 'John Doe', + avatar: 'https://example.com/avatars/john.png', + content: 'Excellent skill! Saved me hours of code review time.', + rating: 5, + createdAt: '2024-03-18T10:00:00Z', + }, + { + id: 'c2', + author: 'Jane Smith', + avatar: 'https://example.com/avatars/jane.png', + content: 'Very helpful for catching security issues early.', + rating: 5, + createdAt: '2024-03-15T14:30:00Z', + }, + { + id: 'c3', + author: 'Mike Chen', + avatar: 'https://example.com/avatars/mike.png', + content: 'Good overall, but sometimes reports false positives.', + rating: 4, + createdAt: '2024-03-10T09:15:00Z', + }, + ], + total: 256, +}; diff --git a/packages/conversation/src/components/skill-market/tabs/ConfigTab.tsx b/packages/conversation/src/components/skill-market/tabs/ConfigTab.tsx new file mode 100644 index 00000000..c73f3b47 --- /dev/null +++ b/packages/conversation/src/components/skill-market/tabs/ConfigTab.tsx @@ -0,0 +1,33 @@ +import { defineComponent } from 'vue'; +import type { SkillDetail } from '../types'; + +export default defineComponent({ + name: 'ConfigTab', + props: { + skill: { + type: Object as () => SkillDetail, + required: true + } + }, + setup(props) { + // Prefer content from lobehub, fall back to skillMdConfig + const configContent = props.skill.content || props.skill.skillMdConfig || ''; + + return () => ( +
+
+ skill.md +
+
+ {configContent ? ( + 
{configContent}
+ ) : ( +
+

暂无 skill.md 配置

+
+ )} +
+
+ ); + } +}); diff --git a/packages/conversation/src/components/skill-market/tabs/InstallTab.tsx b/packages/conversation/src/components/skill-market/tabs/InstallTab.tsx new file mode 100644 index 00000000..317ab615 --- /dev/null +++ b/packages/conversation/src/components/skill-market/tabs/InstallTab.tsx @@ -0,0 +1,102 @@ +import { defineComponent, ref } from 'vue'; +import type { SkillDetail } from '../types'; + +export default defineComponent({ + name: 'InstallTab', + props: { + skill: { + type: Object as () => SkillDetail, + required: true + } + }, + setup(props) { + const copiedType = ref(null); + + function copyCommand(type: string) { + const commands = props.skill.installCommands; + if (!commands) return; + + const command = commands[type as keyof typeof commands]; + if (!command) return; + + navigator.clipboard.writeText(command).then(() => { + copiedType.value = type; + setTimeout(() => { + copiedType.value = null; + }, 2000); + }); + } + + function getInstallCommand(type: string): string { + const commands = props.skill.installCommands; + if (!commands) return ''; + return commands[type as keyof typeof commands] || ''; + } + + const installMethods = [ + { key: 'npm', label: 'npm' }, + { key: 'yarn', label: 'yarn' }, + { key: 'pnpm', label: 'pnpm' }, + { key: 'cdn', label: 'CDN' } + ] as const; + + return () => ( +
+ {/* Download URL section */} + {props.skill.downloadUrl && ( +
+

下载地址

+
+
直接下载
+
+ + {props.skill.downloadUrl} + + +
+
+
+ )} + + {/* Installation commands section */} + {props.skill.installCommands && ( +
+

安装命令

+ {installMethods.map(method => { + const command = getInstallCommand(method.key); + if (!command) return null; + return ( +
+
{method.label}
+
+ {command} + +
+
+ ); + })} +
+ )} + + {/* Empty state */} + {!props.skill.downloadUrl && !props.skill.installCommands && ( +
+

暂无安装信息

+
+ )} +
+ ); + } +}); diff --git a/packages/conversation/src/components/skill-market/tabs/OverviewTab.tsx b/packages/conversation/src/components/skill-market/tabs/OverviewTab.tsx new file mode 100644 index 00000000..dd1f98fe --- /dev/null +++ b/packages/conversation/src/components/skill-market/tabs/OverviewTab.tsx @@ -0,0 +1,78 @@ +import { defineComponent, ref } from 'vue'; +import type { SkillDetail } from '../types'; + +export default defineComponent({ + name: 'OverviewTab', + props: { + skill: { + type: Object as () => SkillDetail, + required: true + } + }, + setup(props) { + const isExpanded = ref(false); + + // Summary from description + const summary = props.skill.description || ''; + // Content from content/readme (the SKILL.md content) + const content = props.skill.content || props.skill.readme || ''; + // Capabilities list + const capabilities = props.skill.capabilities || []; + // Usage text + const usage = props.skill.usage || ''; + + return () => ( +
+ {/* Summary Section */} + {summary && ( +
+

简介

+

{summary}

+
+ )} + + {/* Capabilities Section */} + {capabilities.length > 0 && ( +
+

能力介绍

+
    + {capabilities.map((cap, idx) => ( +
  • + · + {cap} +
    • + ))} +
+
+ )} + + {/* SKILL.md Content Section - Collapsible */} + {content && ( +
+ + {isExpanded.value && ( + 
{content}
+ )} +
+ )} + + {/* Usage Section */} + {usage && ( +
+

使用说明

+

{usage}

+
+ )} +
+ ); + } +}); diff --git a/packages/conversation/src/components/skill-market/tabs/RelatedTab.tsx b/packages/conversation/src/components/skill-market/tabs/RelatedTab.tsx new file mode 100644 index 00000000..43bda8cb --- /dev/null +++ b/packages/conversation/src/components/skill-market/tabs/RelatedTab.tsx @@ -0,0 +1,82 @@ +import { defineComponent } from 'vue'; +import type { SkillDetail, DiscoverSkillItem, RelatedSkill } from '../types'; + +export default defineComponent({ + name: 'RelatedTab', + props: { + skill: { + type: Object as () => SkillDetail, + required: true + } + }, + emits: ['viewSkill', 'useSkill'], + setup(props, { emit }) { + // Support both lobehub-aligned `related` and local `relatedSkills` + const relatedSkills = (props.skill.related?.length ? props.skill.related : props.skill.relatedSkills) || []; + + function handleView(skill: DiscoverSkillItem | RelatedSkill) { + console.log('查看技能:', skill.name); + emit('viewSkill', skill); + } + + function handleUse(skill: DiscoverSkillItem | RelatedSkill) { + console.log('使用技能:', skill.name); + emit('useSkill', skill); + } + + // Helper to get rating (handle both types) + const getRating = (skill: DiscoverSkillItem | RelatedSkill): number => { + if ('ratingAvg' in skill) return skill.ratingAvg || skill.rating; + return skill.rating; + }; + + return () => ( +
+ {relatedSkills.length > 0 ? ( +
+ {relatedSkills.map(skill => ( +
+
+
+ {skill.name} { + const img = e.target as HTMLImageElement; + img.style.display = 'none'; + }} /> +
+
+
{skill.name}
+
{skill.author}
+
+ + {getRating(skill)} +
+
+
+
+ + +
+
+ ))} +
+ ) : ( +
+

暂无相关技能

+
+ )} +
+ ); + } +}); diff --git a/packages/conversation/src/components/skill-market/tabs/ResourcesTab.tsx b/packages/conversation/src/components/skill-market/tabs/ResourcesTab.tsx new file mode 100644 index 00000000..0d3f8554 --- /dev/null +++ b/packages/conversation/src/components/skill-market/tabs/ResourcesTab.tsx @@ -0,0 +1,61 @@ +import { defineComponent } from 'vue'; +import type { SkillDetail, Resource } from '../types'; + +export default defineComponent({ + name: 'ResourcesTab', + props: { + skill: { + type: Object as () => SkillDetail, + required: true + } + }, + setup(props) { + function handleAddToProject(resource: Resource) { + console.log('添加到项目:', resource.name); + } + + // Helper to format file size + function formatSize(bytes?: number): string { + if (!bytes) return ''; + if (bytes < 1024) return `${bytes} B`; + if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; + return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; + } + + const resources = props.skill.resources || []; + + return () => ( +
+ {resources.length > 0 ? ( +
+ {resources.map(resource => ( +
+
+ +
+
{resource.name}
+ {resource.type && ( +
{resource.type.toUpperCase()}
+ )} + {resource.size && ( +
{formatSize(resource.size)}
+ )} + +
+ ))} +
+ ) : ( +
+

暂无资源

+
+ )} +
+ ); + } +}); diff --git a/packages/conversation/src/components/skill-market/tabs/VersionsTab.tsx b/packages/conversation/src/components/skill-market/tabs/VersionsTab.tsx new file mode 100644 index 00000000..1a8bdbf8 --- /dev/null +++ b/packages/conversation/src/components/skill-market/tabs/VersionsTab.tsx @@ -0,0 +1,58 @@ +import { defineComponent } from 'vue'; +import type { SkillDetail, Version } from '../types'; + +export default defineComponent({ + name: 'VersionsTab', + props: { + skill: { + type: Object as () => SkillDetail, + required: true + } + }, + setup(props) { + function handleVersionClick(version: Version) { + console.log('点击版本:', version.version); + } + + const versions = props.skill.versions || []; + + return () => ( +
+ {versions.length > 0 ? ( +
+ {versions.map((version, idx) => ( +
+
+ {idx < versions.length - 1 && ( +
+ )} +
+ handleVersionClick(version)} + > + {version.version} + + {version.date} +
+ {version.changelog && ( +
+ {version.changelog.split('\n').map((line, i) => ( +
+ {line.startsWith('-') ? line : `• ${line}`} +
+ ))} +
+ )} +
+ ))} +
+ ) : ( +
+

暂无版本历史

+
+ )} +
+ ); + } +}); diff --git a/packages/conversation/src/components/skill-market/types.ts b/packages/conversation/src/components/skill-market/types.ts new file mode 100644 index 00000000..33e213be --- /dev/null +++ b/packages/conversation/src/components/skill-market/types.ts @@ -0,0 +1,210 @@ +// Skill Market Types - Aligned with LobeHub DiscoverSkillDetail + +export enum SkillNavKey { + Installation = 'installation', + Overview = 'overview', + Related = 'related', + Resources = 'resources', + Skill = 'skill', + Version = 'version', +} + +// ============== LobeHub-aligned Types ============== + +// Base skill from market (MarketSkillListItem) +export interface MarketSkillListItem { + id: string; + identifier: string; + name: string; + description: string; + category: string; + icon: string; + author: string; + createdAt: string; + updatedAt: string; + installCount: number; + rating: number; + tags: string[]; + isHot?: boolean; + isNew?: boolean; + coverImage?: string; +} + +// Market skill detail (extends list item) - MarketSkillDetail +export interface MarketSkillDetail extends MarketSkillListItem { + homepage?: string; + license?: string; + repository?: string; + readme?: string; + content?: string; + config?: SkillConfig[]; + versions?: Version[]; + resources?: Resource[]; + installCommands?: InstallCommands; +} + +// Discover skill item (extends list item with additional fields) +export interface DiscoverSkillItem extends Omit { + commentCount?: number; + homepage?: string; + ratingAvg?: number; +} + +// Rating distribution for charts +export interface SkillRatingDistribution { + 1?: number; + 2?: number; + 3?: number; + 4?: number; + 5?: number; +} + +// Comment list item +export interface SkillComment { + id: string; + author: string; + avatar?: string; + content: string; + rating: number; + createdAt: string; +} + +// Comment list response +export interface SkillCommentListResponse { + items: SkillComment[]; + total: number; +} + +// ============== Skill Detail (Aligned with LobeHub DiscoverSkillDetail) ============== + +export interface SkillDetail extends MarketSkillDetail { + // Additional fields from DiscoverSkillDetail + comments?: SkillCommentListResponse; + downloadUrl?: string; + github?: { + stars?: number; + url?: string; + }; + homepage?: string; + ratingDistribution?: SkillRatingDistribution; + related?: DiscoverSkillItem[]; + + // Local extension fields (for backward compatibility) + capabilities?: string[]; + usage?: string; + skillMdConfig?: string; + relatedSkills?: RelatedSkill[]; +} + +// ============== Supporting Types ============== + +export interface Skill { + id: string; + name: string; + description: string; + category: string; + icon: string; + author: string; + createdDate: string; + version: string; + installCount: number; + rating: number; + tags: string[]; + isHot?: boolean; + isNew?: boolean; + coverImage?: string; + readme?: string; + config?: SkillConfig[]; +} + +export interface SkillConfig { + name: string; + label: string; + type: 'string' | 'number' | 'boolean' | 'select'; + default?: any; + options?: string[]; + description?: string; +} + +export interface SkillCategory { + id: string; + name: string; + icon: string; + count: number; +} + +export interface SkillMarketState { + showMarket: boolean; + selectedCategory: string; + selectedSkill: Skill | null; + searchKeyword: string; +} + +// 安装命令 +export interface InstallCommands { + npm: string; + yarn: string; + pnpm: string; + cdn: string; +} + +// 资源 +export interface Resource { + id: string; + name: string; + icon: string; + type: string; + fileHash?: string; + size?: number; +} + +// 相关技能 +export interface RelatedSkill { + id: string; + name: string; + icon: string; + author: string; + rating: number; + description?: string; +} + +// 版本 +export interface Version { + version: string; + date: string; + changelog?: string; + isLatest?: boolean; + createdAt?: string; +} + +// ============== API Types (Stubs for future integration) ============== + +export interface SkillQueryParams { + category?: string; + locale?: string; + order?: 'asc' | 'desc'; + page?: number; + pageSize?: number; + q?: string; + sort?: 'createdAt' | 'installCount' | 'name' | 'relevance' | 'stars' | 'updatedAt'; +} + +export interface SkillListResponse { + items: DiscoverSkillItem[]; + total: number; + categories?: SkillCategoryItem[]; +} + +export interface SkillCategoryItem { + id: string; + name: string; + icon: string; + count: number; +} + +// API Response wrapper +export interface ApiResponse { + data: T; + success: boolean; + error?: string; +} diff --git a/packages/conversation/src/style.scss b/packages/conversation/src/style.scss index 16899ac9..f2c17b43 100644 --- a/packages/conversation/src/style.scss +++ b/packages/conversation/src/style.scss @@ -161,9 +161,19 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); &:hover { background-color: $button-blue-light; box-shadow: 0 2px 8px rgba(69, 144, 255, 0.3); + border-radius: 20px; } } + &.active, + &.selected { + background-color: #328bff; + color: white; + box-shadow: 0 2px 8px rgba(69, 144, 255, 0.15); + border-radius: 20px; + transition: background-color 0.8s; + } + >i { font-size: 16px; } @@ -479,7 +489,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); } &.f-chat-content-header-tabs { - padding-left: 48px; + padding-left: 64px; } } @@ -528,7 +538,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); &.f-chat-content-header-tabs { justify-content: flex-start; align-items: flex-end; - padding: 0 12px 1px 16px; + padding: 0 12px 1px 20px; gap: 4px; min-height: 44px; // background: rgb(229 242 255 / 40%); @@ -3337,7 +3347,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); } >.f-chat-content-header { - padding-left: 48px; + padding-left: 60px; justify-content: flex-start; padding-top: 0; padding-bottom: 1px; @@ -3351,7 +3361,7 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); } &.f-chat-content-header-tabs { - padding-left: 48px; + padding-left: 64px; } } @@ -5214,4 +5224,5 @@ $button-blue-shadow: rgba(69, 144, 255, 0.25); @import "./components/generate-process/index.scss"; @import "./components/started-todo/index.scss"; @import "./components/todo/index.scss"; +@import "./components/skill-market/index.scss"; @import "./components/enterprise-cloud/index.scss"; \ No newline at end of file diff --git a/packages/conversation/tsconfig.json b/packages/conversation/tsconfig.json index a34bd732..92c41df0 100644 --- a/packages/conversation/tsconfig.json +++ b/packages/conversation/tsconfig.json @@ -6,6 +6,7 @@ "moduleResolution": "bundler", "strict": true, "jsx": "preserve", + "jsxImportSource": "vue", "noImplicitAny": false, "sourceMap": true, "resolveJsonModule": true, -- Gitee From e9f2fbd5e8dfedb38f9b895662ebb87d5fa2242c Mon Sep 17 00:00:00 2001 From: Sdarwin Date: Wed, 1 Apr 2026 16:14:34 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20mock=E6=95=B0=E6=8D=AE=E5=89=A5?= =?UTF-8?q?=E7=A6=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../demo/components/skill-market/api.ts | 7 +- .../demo/components/skill-market/index.ts | 3 +- .../demo/components/skill-market/mock-data.ts | 612 ------------------ .../mockdata/mock-categories.json | 8 + .../skill-market/mockdata/mock-skills.json | 466 +++++++++++++ .../skill-market-detail.component.tsx | 6 +- .../src/components/skill-market/api.ts | 1 + .../src/components/skill-market/mockData.ts | 367 +---------- .../skill-market/mockdata/mock-comments.json | 29 + .../skill-market/mockdata/mock-skills.json | 197 ++++++ .../src/components/skill-market/types.ts | 1 + 11 files changed, 720 insertions(+), 977 deletions(-) delete mode 100644 packages/conversation/demo/components/skill-market/mock-data.ts create mode 100644 packages/conversation/demo/components/skill-market/mockdata/mock-categories.json create mode 100644 packages/conversation/demo/components/skill-market/mockdata/mock-skills.json create mode 100644 packages/conversation/src/components/skill-market/mockdata/mock-comments.json create mode 100644 packages/conversation/src/components/skill-market/mockdata/mock-skills.json diff --git a/packages/conversation/demo/components/skill-market/api.ts b/packages/conversation/demo/components/skill-market/api.ts index c9d341da..bf4ba85a 100644 --- a/packages/conversation/demo/components/skill-market/api.ts +++ b/packages/conversation/demo/components/skill-market/api.ts @@ -1,12 +1,13 @@ // API Stubs for Skill Market - Replace with actual API implementation import type { - DiscoverSkillDetail, + SkillDetail, DiscoverSkillItem, SkillCommentListResponse, SkillListResponse, SkillQueryParams, } from './types'; -import { MOCK_SKILLS } from './mock-data'; +import skills from './mockdata/mock-skills.json'; +const MOCK_SKILLS = skills as SkillDetail[]; // Using MOCK_SKILLS from mock-data.ts for now const MOCK_SKILL_DETAIL = MOCK_SKILLS[0]; @@ -34,7 +35,7 @@ class SkillApiClient { async getSkillDetail(params: { identifier: string; version?: string; - }): Promise { + }): Promise { // TODO: Replace with actual API call console.log('[API Stub] getSkillDetail called with:', params); diff --git a/packages/conversation/demo/components/skill-market/index.ts b/packages/conversation/demo/components/skill-market/index.ts index 4104c6c0..9170c0ed 100644 --- a/packages/conversation/demo/components/skill-market/index.ts +++ b/packages/conversation/demo/components/skill-market/index.ts @@ -2,4 +2,5 @@ export { default as FXSkillMarketNav } from './skill-market-nav.component'; export { default as FXSkillMarketDetail } from './skill-market-detail.component'; export { default as FXSkillDetail } from './skill-detail.component'; export * from './types'; -export * from './mock-data'; +export { default as MOCK_CATEGORIES } from './mockdata/mock-categories.json'; +export { default as MOCK_SKILLS } from './mockdata/mock-skills.json'; diff --git a/packages/conversation/demo/components/skill-market/mock-data.ts b/packages/conversation/demo/components/skill-market/mock-data.ts deleted file mode 100644 index 315c3d49..00000000 --- a/packages/conversation/demo/components/skill-market/mock-data.ts +++ /dev/null @@ -1,612 +0,0 @@ -// Skill Market Mock Data -import type { Skill, SkillCategory, SkillDetail } from './types'; - -export const MOCK_CATEGORIES: SkillCategory[] = [ - { id: 'all', name: '全部', icon: 'f-icon f-icon-apps', count: 24 }, - { id: 'product', name: '产品研发', icon: 'f-icon f-icon-product', count: 8 }, - { id: 'operation', name: '运营管理', icon: 'f-icon f-icon-setting', count: 6 }, - { id: 'finance', name: '财务管理', icon: 'f-icon f-icon-money', count: 5 }, - { id: 'hr', name: '人力资源', icon: 'f-icon f-icon-team', count: 3 }, - { id: 'data', name: '数据分析', icon: 'f-icon f-icon-chart', count: 2 }, -]; - -export const MOCK_SKILLS: SkillDetail[] = [ - { - id: 'skill-1', - identifier: 'prd-generator', - name: 'PRD 智能生成器', - description: '基于产品需求描述，自动生成结构化的 PRD 文档，包含功能列表、流程图设计、原型草图等。', - category: 'product', - icon: '/public/assets/demo-imgs/prompts-icon1.png', - author: '系统管理员', - createdAt: '2026-03-15T08:00:00Z', - updatedAt: '2026-03-15T10:30:00Z', - installCount: 12580, - rating: 4.8, - tags: ['PRD', '产品文档', '自动化'], - isHot: true, - coverImage: '/public/assets/demo-imgs/func-entry-search.png', - readme: '## PRD 智能生成器\n\n本技能可以帮助你快速生成专业的产品需求文档。\n\n### 功能特点\n- 自动识别需求要点\n- 生成结构化文档\n- 支持导出多种格式', - config: [ - { name: 'format', label: '文档格式', type: 'select', default: 'markdown', options: ['Markdown', 'Word', 'PDF'] }, - { name: 'language', label: '文档语言', type: 'select', default: '中文', options: ['中文', '英文'] }, - ], - capabilities: [ - '自动识别需求要点', - '生成结构化文档', - '支持导出多种格式' - ], - usage: '本技能可以帮助你快速生成专业的产品需求文档。只需输入产品需求描述，系统将自动生成结构化的 PRD 文档。', - installCommands: { - npm: 'npm install skill-prd-generator@1.2.0', - yarn: 'yarn add skill-prd-generator@1.2.0', - pnpm: 'pnpm add skill-prd-generator@1.2.0', - cdn: '' - }, - skillMdConfig: `name: PRD智能生成器 -description: 基于产品需求描述，自动生成结构化的PRD文档 -icon: assets/icons/prd.png -version: 1.2.0 - -parameters: - - name: format - type: string - default: markdown - description: 文档输出格式 - -examples: - - input: 生成一个电商订单模块的PRD - output: PRD文档，包含功能列表、流程图等`, - resources: [ - { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, - { id: 'r2', name: 'API手册', icon: 'f-icon f-icon-api', type: 'api' }, - { id: 'r3', name: '示例项目', icon: 'f-icon f-icon-project', type: 'project' }, - { id: 'r4', name: '视频教程', icon: 'f-icon f-icon-video', type: 'video' } - ], - relatedSkills: [ - { id: 'skill-2', name: '代码评审助手', icon: 'https://cdn.iconify.design/mdi:code-tags-check.svg', author: '开发团队', rating: 4.9 }, - { id: 'skill-3', name: 'API 文档生成器', icon: '/public/assets/demo-imgs/prompts-icon3.png', author: '前端团队', rating: 4.6 } - ], - versions: [ - { version: '1.2.0', date: '2026-03-15', changelog: '新增导出 PDF 格式支持' }, - { version: '1.1.0', date: '2026-03-10', changelog: '优化文档结构' }, - { version: '1.0.0', date: '2026-03-05', changelog: '首次发布' } - ] - }, - { - id: 'skill-2', - identifier: 'code-reviewer', - name: '代码评审助手', - description: '自动分析代码质量，发现潜在 Bug、性能问题、安全漏洞，并提供优化建议。', - category: 'product', - icon: 'https://cdn.iconify.design/mdi:code-tags-check.svg', - author: '开发团队', - createdAt: '2026-03-10T08:00:00Z', - updatedAt: '2026-03-10T14:20:00Z', - installCount: 8960, - rating: 4.9, - tags: ['代码审查', '质量分析', '自动化'], - isHot: true, - isNew: true, - readme: '## 代码评审助手\n\n自动化的代码评审工具，帮助提升代码质量。', - config: [ - { name: 'language', label: '编程语言', type: 'select', default: 'TypeScript', options: ['TypeScript', 'JavaScript', 'Python', 'Java'] }, - ], - capabilities: [ - '自动识别代码缺陷', - '检测性能瓶颈', - '发现安全漏洞', - '提供优化建议' - ], - usage: '本技能可以自动分析代码质量，发现潜在 Bug、性能问题、安全漏洞，并提供优化建议。适用于 Code Review 环节，提升代码质量和团队协作效率。', - installCommands: { - npm: 'npm install skill-code-reviewer@2.0.0', - yarn: 'yarn add skill-code-reviewer@2.0.0', - pnpm: 'pnpm add skill-code-reviewer@2.0.0', - cdn: '' - }, - skillMdConfig: `name: 代码评审助手 -description: 自动分析代码质量，发现潜在Bug、性能问题、安全漏洞，并提供优化建议 -icon: assets/icons/code-review.png -version: 2.0.0 - -parameters: - - name: language - type: string - default: TypeScript - description: 编程语言 - -examples: - - input: 评审这段代码的质量 - output: 代码评审报告，包含问题列表和优化建议`, - resources: [ - { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, - { id: 'r2', name: '规则手册', icon: 'f-icon f-icon-api', type: 'api' }, - { id: 'r3', name: '示例项目', icon: 'f-icon f-icon-project', type: 'project' }, - { id: 'r4', name: '视频教程', icon: 'f-icon f-icon-video', type: 'video' } - ], - relatedSkills: [ - { id: 'skill-1', name: 'PRD 智能生成器', icon: '/public/assets/demo-imgs/prompts-icon1.png', author: '系统管理员', rating: 4.8 }, - { id: 'skill-3', name: 'API 文档生成器', icon: '/public/assets/demo-imgs/prompts-icon3.png', author: '前端团队', rating: 4.6 } - ], - versions: [ - { version: '2.0.0', date: '2026-03-10', changelog: '新增安全漏洞检测功能' }, - { version: '1.5.0', date: '2026-03-01', changelog: '支持更多编程语言' }, - { version: '1.0.0', date: '2026-02-20', changelog: '首次发布' } - ] - }, - { - id: 'skill-3', - identifier: 'api-doc-generator', - name: 'API 文档生成器', - description: '根据代码注释和接口定义，自动生成标准化的 API 文档，支持 Swagger、OpenAPI 等格式。', - category: 'product', - icon: '/public/assets/demo-imgs/prompts-icon3.png', - author: '前端团队', - createdAt: '2026-03-08T08:00:00Z', - updatedAt: '2026-03-08T09:00:00Z', - installCount: 6540, - rating: 4.6, - tags: ['API', '文档', '自动化'], - readme: '## API 文档生成器\n\n自动生成 API 文档，支持多种格式导出。', - config: [], - capabilities: [ - '解析代码注释生成文档', - '支持 Swagger/OpenAPI 格式', - '自动生成示例请求', - '支持多种编程语言' - ], - usage: '本技能可以根据代码注释和接口定义，自动生成标准化的 API 文档。支持 Swagger、OpenAPI 等主流格式，一键导出使用。', - installCommands: { - npm: 'npm install skill-api-doc@1.5.0', - yarn: 'yarn add skill-api-doc@1.5.0', - pnpm: 'pnpm add skill-api-doc@1.5.0', - cdn: '' - }, - skillMdConfig: `name: API文档生成器 -description: 根据代码注释和接口定义，自动生成标准化的API文档 -icon: assets/icons/api-doc.png -version: 1.5.0 - -parameters: - - name: format - type: string - default: swagger - description: 文档格式 - -examples: - - input: 生成用户模块的API文档 - output: Swagger格式的API文档`, - resources: [ - { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, - { id: 'r2', name: '格式说明', icon: 'f-icon f-icon-api', type: 'api' }, - { id: 'r3', name: '示例项目', icon: 'f-icon f-icon-project', type: 'project' } - ], - relatedSkills: [ - { id: 'skill-2', name: '代码评审助手', icon: 'https://cdn.iconify.design/mdi:code-tags-check.svg', author: '开发团队', rating: 4.9 }, - { id: 'skill-9', name: '数据可视化助手', icon: 'https://cdn.iconify.design/mdi:chart-bar.svg', author: '数据团队', rating: 4.9 } - ], - versions: [ - { version: '1.5.0', date: '2026-03-08', changelog: '新增 OpenAPI 3.0 支持' }, - { version: '1.0.0', date: '2026-02-15', changelog: '首次发布' } - ] - }, - { - id: 'skill-4', - identifier: 'user-behavior-analysis', - name: '用户行为分析', - description: '深度分析用户行为数据，识别用户路径、转化漏斗、留存曲线，输出可执行的增长建议。', - category: 'data', - icon: '/public/assets/demo-imgs/prompts-icon4.png', - author: '数据团队', - createdAt: '2026-03-12T08:00:00Z', - updatedAt: '2026-03-12T11:45:00Z', - installCount: 4320, - rating: 4.7, - tags: ['数据分析', '用户增长', 'BI'], - isNew: true, - readme: '## 用户行为分析\n\n专业的用户行为分析工具。', - config: [ - { name: 'timeRange', label: '时间范围', type: 'select', default: '最近7天', options: ['最近7天', '最近30天', '最近90天'] }, - ], - capabilities: [ - '识别用户路径', - '分析转化漏斗', - '计算留存曲线', - '输出增长建议' - ], - usage: '本技能可以深度分析用户行为数据，识别用户路径、转化漏斗、留存曲线，并输出可执行的增长建议。帮助产品团队优化用户旅程。', - installCommands: { - npm: 'npm install skill-user-behavior@1.8.0', - yarn: 'yarn add skill-user-behavior@1.8.0', - pnpm: 'pnpm add skill-user-behavior@1.8.0', - cdn: '' - }, - skillMdConfig: `name: 用户行为分析 -description: 深度分析用户行为数据，识别用户路径、转化漏斗、留存曲线 -icon: assets/icons/behavior.png -version: 1.8.0 - -parameters: - - name: timeRange - type: string - default: 最近7天 - description: 分析时间范围 - -examples: - - input: 分析过去30天的用户留存情况 - output: 留存曲线报告和优化建议`, - resources: [ - { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, - { id: 'r2', name: '指标说明', icon: 'f-icon f-icon-api', type: 'api' }, - { id: 'r3', name: '案例分析', icon: 'f-icon f-icon-project', type: 'project' }, - { id: 'r4', name: '视频教程', icon: 'f-icon f-icon-video', type: 'video' } - ], - relatedSkills: [ - { id: 'skill-9', name: '数据可视化助手', icon: 'https://cdn.iconify.design/mdi:chart-bar.svg', author: '数据团队', rating: 4.9 }, - { id: 'skill-5', name: '财务报表生成', icon: '/public/assets/demo-imgs/prompts-icon1.png', author: '财务团队', rating: 4.5 } - ], - versions: [ - { version: '1.8.0', date: '2026-03-12', changelog: '新增留存分析功能' }, - { version: '1.5.0', date: '2026-03-01', changelog: '优化漏斗分析算法' }, - { version: '1.0.0', date: '2026-02-10', changelog: '首次发布' } - ] - }, - { - id: 'skill-5', - identifier: 'finance-report-generator', - name: '财务报表生成', - description: '自动汇总财务数据，生成资产负债表、利润表、现金流量表等标准财务报表。', - category: 'finance', - icon: '/public/assets/demo-imgs/prompts-icon1.png', - author: '财务团队', - createdAt: '2026-03-05T08:00:00Z', - updatedAt: '2026-03-05T10:00:00Z', - installCount: 3210, - rating: 4.5, - tags: ['财务', '报表', '自动化'], - readme: '## 财务报表生成\n\n自动生成标准财务报表。', - config: [ - { name: 'reportType', label: '报表类型', type: 'select', default: '月度', options: ['月度', '季度', '年度'] }, - ], - capabilities: [ - '自动汇总财务数据', - '生成资产负债表', - '生成利润表', - '生成现金流量表' - ], - usage: '本技能可以自动汇总财务数据，生成资产负债表、利润表、现金流量表等标准财务报表。提高财务工作效率，减少人工错误。', - installCommands: { - npm: 'npm install skill-finance-report@1.0.0', - yarn: 'yarn add skill-finance-report@1.0.0', - pnpm: 'pnpm add skill-finance-report@1.0.0', - cdn: '' - }, - skillMdConfig: `name: 财务报表生成 -description: 自动汇总财务数据，生成标准财务报表 -icon: assets/icons/finance.png -version: 1.0.0 - -parameters: - - name: reportType - type: string - default: 月度 - description: 报表类型 - -examples: - - input: 生成本月度的财务报表 - output: 资产负债表、利润表、现金流量表`, - resources: [ - { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, - { id: 'r2', name: '报表模板', icon: 'f-icon f-icon-api', type: 'api' } - ], - relatedSkills: [ - { id: 'skill-4', name: '用户行为分析', icon: '/public/assets/demo-imgs/prompts-icon4.png', author: '数据团队', rating: 4.7 }, - { id: 'skill-6', name: '智能客服质检', icon: '/public/assets/demo-imgs/prompts-icon2.png', author: '客服团队', rating: 4.4 } - ], - versions: [ - { version: '1.0.0', date: '2026-03-05', changelog: '首次发布' } - ] - }, - { - id: 'skill-6', - identifier: 'qa-checker', - name: '智能客服质检', - description: '对客服对话录音进行智能分析，评估服务质量，发现问题并提供改进建议。', - category: 'operation', - icon: '/public/assets/demo-imgs/prompts-icon2.png', - author: '客服团队', - createdAt: '2026-03-01T08:00:00Z', - updatedAt: '2026-03-01T16:00:00Z', - installCount: 2890, - rating: 4.4, - tags: ['客服', '质检', 'AI分析'], - readme: '## 智能客服质检\n\nAI 驱动的客服质量检测。', - config: [ - { name: 'checkItems', label: '检查项', type: 'select', default: '全部', options: ['全部', '话术规范', '情绪识别', '响应时效'] }, - ], - capabilities: [ - '话术规范检测', - '情绪识别分析', - '响应时效评估', - '问题发现与建议' - ], - usage: '本技能可以对客服对话录音进行智能分析，评估服务质量，发现问题并提供改进建议。帮助提升客服团队整体服务水平。', - installCommands: { - npm: 'npm install skill-qa-checker@1.3.0', - yarn: 'yarn add skill-qa-checker@1.3.0', - pnpm: 'pnpm add skill-qa-checker@1.3.0', - cdn: '' - }, - skillMdConfig: `name: 智能客服质检 -description: 对客服对话录音进行智能分析，评估服务质量，发现问题并提供改进建议 -icon: assets/icons/qa.png -version: 1.3.0 - -parameters: - - name: checkItems - type: string - default: 全部 - description: 检查项目 - -examples: - - input: 检测这通客服电话的服务质量 - output: 质检报告，包含评分和改进建议`, - resources: [ - { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, - { id: 'r2', name: '质检标准', icon: 'f-icon f-icon-api', type: 'api' }, - { id: 'r3', name: '案例分析', icon: 'f-icon f-icon-project', type: 'project' } - ], - relatedSkills: [ - { id: 'skill-8', name: '营销文案生成器', icon: '/public/assets/demo-imgs/prompts-icon4.png', author: '市场团队', rating: 4.7 }, - { id: 'skill-10', name: '会议纪要生成', icon: '/public/assets/demo-imgs/prompts-icon2.png', author: '行政团队', rating: 4.5 } - ], - versions: [ - { version: '1.3.0', date: '2026-03-01', changelog: '新增情绪识别功能' }, - { version: '1.0.0', date: '2026-02-01', changelog: '首次发布' } - ] - }, - { - id: 'skill-7', - identifier: 'resume-screener', - name: '简历筛选器', - description: '根据岗位要求自动筛选简历，提取关键信息，评估匹配度并排序推荐。', - category: 'hr', - icon: '/public/assets/demo-imgs/prompts-icon3.png', - author: 'HR团队', - createdAt: '2026-02-28T08:00:00Z', - updatedAt: '2026-02-28T14:00:00Z', - installCount: 2150, - rating: 4.6, - tags: ['招聘', '简历', '自动化'], - readme: '## 简历筛选器\n\n智能简历筛选工具。', - config: [ - { name: 'matchThreshold', label: '匹配阈值', type: 'select', default: '80%', options: ['60%', '70%', '80%', '90%'] }, - ], - capabilities: [ - '自动提取简历关键信息', - '岗位匹配度评估', - '候选人排序推荐', - '批量处理简历' - ], - usage: '本技能可以根据岗位要求自动筛选简历，提取关键信息，评估匹配度并排序推荐。大幅提升 HR 筛选简历的效率。', - installCommands: { - npm: 'npm install skill-resume-screener@1.1.0', - yarn: 'yarn add skill-resume-screener@1.1.0', - pnpm: 'pnpm add skill-resume-screener@1.1.0', - cdn: '' - }, - skillMdConfig: `name: 简历筛选器 -description: 根据岗位要求自动筛选简历，提取关键信息，评估匹配度并排序推荐 -icon: assets/icons/resume.png -version: 1.1.0 - -parameters: - - name: matchThreshold - type: string - default: 80% - description: 匹配阈值 - -examples: - - input: 筛选前端工程师岗位的简历 - output: 符合条件的简历列表，按匹配度排序`, - resources: [ - { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, - { id: 'r2', name: '筛选规则', icon: 'f-icon f-icon-api', type: 'api' }, - { id: 'r3', name: '使用案例', icon: 'f-icon f-icon-project', type: 'project' } - ], - relatedSkills: [ - { id: 'skill-10', name: '会议纪要生成', icon: '/public/assets/demo-imgs/prompts-icon2.png', author: '行政团队', rating: 4.5 }, - { id: 'skill-6', name: '智能客服质检', icon: '/public/assets/demo-imgs/prompts-icon2.png', author: '客服团队', rating: 4.4 } - ], - versions: [ - { version: '1.1.0', date: '2026-02-28', changelog: '优化匹配算法' }, - { version: '1.0.0', date: '2026-02-01', changelog: '首次发布' } - ] - }, - { - id: 'skill-8', - identifier: 'marketing-copy-generator', - name: '营销文案生成器', - description: '输入产品信息和营销目标，自动生成多渠道营销文案，包括朋友圈、公众号、短信等。', - category: 'operation', - icon: '/public/assets/demo-imgs/prompts-icon4.png', - author: '市场团队', - createdAt: '2026-03-18T08:00:00Z', - updatedAt: '2026-03-18T13:30:00Z', - installCount: 5680, - rating: 4.7, - tags: ['营销', '文案', 'AI生成'], - isHot: true, - readme: '## 营销文案生成器\n\n一键生成各渠道营销文案。', - config: [ - { name: 'channel', label: '投放渠道', type: 'select', default: '朋友圈', options: ['朋友圈', '公众号', '抖音', '小红书', '短信'] }, - { name: 'tone', label: '文案风格', type: 'select', default: '正式', options: ['正式', '活泼', '感性', '幽默'] }, - ], - capabilities: [ - '多渠道文案生成', - '多种风格可选', - '支持图片文案', - '一键复制使用' - ], - usage: '本技能可以输入产品信息和营销目标，自动生成多渠道营销文案，包括朋友圈、公众号、短信等。让营销内容创作更高效。', - installCommands: { - npm: 'npm install skill-marketing-copy@1.4.0', - yarn: 'yarn add skill-marketing-copy@1.4.0', - pnpm: 'pnpm add skill-marketing-copy@1.4.0', - cdn: '' - }, - skillMdConfig: `name: 营销文案生成器 -description: 输入产品信息和营销目标，自动生成多渠道营销文案 -icon: assets/icons/marketing.png -version: 1.4.0 - -parameters: - - name: channel - type: string - default: 朋友圈 - description: 投放渠道 - - name: tone - type: string - default: 正式 - description: 文案风格 - -examples: - - input: 为新产品生成朋友圈推广文案 - output: 适合朋友圈的营销文案`, - resources: [ - { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, - { id: 'r2', name: '文案技巧', icon: 'f-icon f-icon-api', type: 'api' }, - { id: 'r3', name: '案例库', icon: 'f-icon f-icon-project', type: 'project' }, - { id: 'r4', name: '视频教程', icon: 'f-icon f-icon-video', type: 'video' } - ], - relatedSkills: [ - { id: 'skill-6', name: '智能客服质检', icon: '/public/assets/demo-imgs/prompts-icon2.png', author: '客服团队', rating: 4.4 }, - { id: 'skill-10', name: '会议纪要生成', icon: '/public/assets/demo-imgs/prompts-icon2.png', author: '行政团队', rating: 4.5 } - ], - versions: [ - { version: '1.4.0', date: '2026-03-18', changelog: '新增小红书渠道支持' }, - { version: '1.2.0', date: '2026-03-10', changelog: '增加多种文案风格' }, - { version: '1.0.0', date: '2026-02-20', changelog: '首次发布' } - ] - }, - { - id: 'skill-9', - identifier: 'dataviz-assistant', - name: '数据可视化助手', - description: '描述你的数据和分析需求，自动生成对应的图表代码，支持 ECharts、Highcharts 等。', - category: 'data', - icon: 'https://cdn.iconify.design/mdi:chart-bar.svg', - author: '数据团队', - createdAt: '2026-03-20T08:00:00Z', - updatedAt: '2026-03-20T16:00:00Z', - installCount: 7890, - rating: 4.9, - tags: ['数据可视化', '图表', '代码生成'], - isHot: true, - readme: '## 数据可视化助手\n\n智能生成图表代码。', - config: [ - { name: 'chartLib', label: '图表库', type: 'select', default: 'ECharts', options: ['ECharts', 'Highcharts', 'D3.js', 'AntV'] }, - ], - capabilities: [ - '自然语言描述生成图表', - '支持多种图表库', - '自动生成代码', - '实时预览效果' - ], - usage: '本技能可以描述你的数据和分析需求，自动生成对应的图表代码，支持 ECharts、Highcharts、D3.js、AntV 等多种图表库。', - installCommands: { - npm: 'npm install skill-dataviz@2.1.0', - yarn: 'yarn add skill-dataviz@2.1.0', - pnpm: 'pnpm add skill-dataviz@2.1.0', - cdn: '' - }, - skillMdConfig: `name: 数据可视化助手 -description: 描述你的数据和分析需求，自动生成对应的图表代码 -icon: assets/icons/dataviz.png -version: 2.1.0 - -parameters: - - name: chartLib - type: string - default: ECharts - description: 图表库 - -examples: - - input: 生成一个展示月销售额趋势的折线图 - output: ECharts图表代码`, - resources: [ - { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, - { id: 'r2', name: '图表配置', icon: 'f-icon f-icon-api', type: 'api' }, - { id: 'r3', name: '示例项目', icon: 'f-icon f-icon-project', type: 'project' }, - { id: 'r4', name: '视频教程', icon: 'f-icon f-icon-video', type: 'video' } - ], - relatedSkills: [ - { id: 'skill-4', name: '用户行为分析', icon: '/public/assets/demo-imgs/prompts-icon4.png', author: '数据团队', rating: 4.7 }, - { id: 'skill-3', name: 'API 文档生成器', icon: '/public/assets/demo-imgs/prompts-icon3.png', author: '前端团队', rating: 4.6 } - ], - versions: [ - { version: '2.1.0', date: '2026-03-20', changelog: '新增 AntV 图表库支持' }, - { version: '2.0.0', date: '2026-03-15', changelog: '重构代码生成引擎' }, - { version: '1.5.0', date: '2026-03-01', changelog: '增加 D3.js 支持' }, - { version: '1.0.0', date: '2026-02-01', changelog: '首次发布' } - ] - }, - { - id: 'skill-10', - identifier: 'meeting-notes-generator', - name: '会议纪要生成', - description: '上传会议录音或文字记录，自动整理会议要点、待办事项、负责人和截止日期。', - category: 'operation', - icon: '/public/assets/demo-imgs/prompts-icon2.png', - author: '行政团队', - createdAt: '2026-03-22T08:00:00Z', - updatedAt: '2026-03-22T10:00:00Z', - installCount: 3450, - rating: 4.5, - tags: ['会议', '效率', '自动化'], - readme: '## 会议纪要生成\n\n自动生成规范的会议纪要。', - config: [ - { name: 'template', label: '模板风格', type: 'select', default: '标准', options: ['简洁', '标准', '详细'] }, - ], - capabilities: [ - '会议录音自动转文字', - '提取会议要点', - '识别待办事项', - '自动分配负责人和截止日期' - ], - usage: '本技能可以上传会议录音或文字记录，自动整理会议要点、待办事项、负责人和截止日期。生成规范的会议纪要，提升会议效率。', - installCommands: { - npm: 'npm install skill-meeting-notes@1.0.0', - yarn: 'yarn add skill-meeting-notes@1.0.0', - pnpm: 'pnpm add skill-meeting-notes@1.0.0', - cdn: '' - }, - skillMdConfig: `name: 会议纪要生成 -description: 上传会议录音或文字记录，自动整理会议要点、待办事项、负责人和截止日期 -icon: assets/icons/meeting.png -version: 1.0.0 - -parameters: - - name: template - type: string - default: 标准 - description: 模板风格 - -examples: - - input: 分析这段会议记录 - output: 会议纪要，包含要点、待办、负责人和截止日期`, - resources: [ - { id: 'r1', name: '使用文档', icon: 'f-icon f-icon-document', type: 'doc' }, - { id: 'r2', name: '模板说明', icon: 'f-icon f-icon-api', type: 'api' }, - { id: 'r3', name: '示例项目', icon: 'f-icon f-icon-project', type: 'project' } - ], - relatedSkills: [ - { id: 'skill-7', name: '简历筛选器', icon: '/public/assets/demo-imgs/prompts-icon3.png', author: 'HR团队', rating: 4.6 }, - { id: 'skill-8', name: '营销文案生成器', icon: '/public/assets/demo-imgs/prompts-icon4.png', author: '市场团队', rating: 4.7 } - ], - versions: [ - { version: '1.0.0', date: '2026-03-22', changelog: '首次发布' } - ] - }, -]; \ No newline at end of file diff --git a/packages/conversation/demo/components/skill-market/mockdata/mock-categories.json b/packages/conversation/demo/components/skill-market/mockdata/mock-categories.json new file mode 100644 index 00000000..639044f0 --- /dev/null +++ b/packages/conversation/demo/components/skill-market/mockdata/mock-categories.json @@ -0,0 +1,8 @@ +[ + { "id": "all", "name": "全部", "icon": "f-icon f-icon-grid", "count": 24 }, + { "id": "product", "name": "产品研发", "icon": "f-icon f-icon-product-list", "count": 8 }, + { "id": "operation", "name": "运营管理", "icon": "f-icon f-icon-settings", "count": 6 }, + { "id": "finance", "name": "财务管理", "icon": "f-icon f-icon-currency", "count": 5 }, + { "id": "hr", "name": "人力资源", "icon": "f-icon f-icon-team", "count": 3 }, + { "id": "data", "name": "数据分析", "icon": "f-icon f-icon-chart", "count": 2 } +] diff --git a/packages/conversation/demo/components/skill-market/mockdata/mock-skills.json b/packages/conversation/demo/components/skill-market/mockdata/mock-skills.json new file mode 100644 index 00000000..6b158bb9 --- /dev/null +++ b/packages/conversation/demo/components/skill-market/mockdata/mock-skills.json @@ -0,0 +1,466 @@ +[ + { + "id": "skill-1", + "identifier": "prd-generator", + "name": "PRD 智能生成器", + "description": "基于产品需求描述，自动生成结构化的 PRD 文档，包含功能列表、流程图设计、原型草图等。", + "category": "product", + "icon": "/public/assets/demo-imgs/prompts-icon1.png", + "author": "系统管理员", + "createdAt": "2026-03-15T08:00:00Z", + "updatedAt": "2026-03-15T10:30:00Z", + "installCount": 12580, + "rating": 4.8, + "tags": ["PRD", "产品文档", "自动化"], + "isHot": true, + "coverImage": "/public/assets/demo-imgs/func-entry-search.png", + "readme": "## PRD 智能生成器\n\n本技能可以帮助你快速生成专业的产品需求文档。\n\n### 功能特点\n- 自动识别需求要点\n- 生成结构化文档\n- 支持导出多种格式", + "config": [ + { "name": "format", "label": "文档格式", "type": "select", "default": "markdown", "options": ["Markdown", "Word", "PDF"] }, + { "name": "language", "label": "文档语言", "type": "select", "default": "中文", "options": ["中文", "英文"] } + ], + "capabilities": [ + "自动识别需求要点", + "生成结构化文档", + "支持导出多种格式" + ], + "usage": "本技能可以帮助你快速生成专业的产品需求文档。只需输入产品需求描述，系统将自动生成结构化的 PRD 文档。", + "installCommands": { + "npm": "npm install skill-prd-generator@1.2.0", + "yarn": "yarn add skill-prd-generator@1.2.0", + "pnpm": "pnpm add skill-prd-generator@1.2.0", + "cdn": "" + }, + "skillMdConfig": "name: PRD智能生成器\ndescription: 基于产品需求描述，自动生成结构化的PRD文档\nicon: assets/icons/prd.png\nversion: 1.2.0\n\nparameters:\n - name: format\n type: string\n default: markdown\n description: 文档输出格式\n\nexamples:\n - input: 生成一个电商订单模块的PRD\n output: PRD文档，包含功能列表、流程图等", + "resources": [ + { "id": "r1", "name": "使用文档", "icon": "f-icon f-icon-document", "type": "doc" }, + { "id": "r2", "name": "API手册", "icon": "f-icon f-icon-api", "type": "api" }, + { "id": "r3", "name": "示例项目", "icon": "f-icon f-icon-project", "type": "project" }, + { "id": "r4", "name": "视频教程", "icon": "f-icon f-icon-video", "type": "video" } + ], + "relatedSkills": [ + { "id": "skill-2", "name": "代码评审助手", "icon": "https://cdn.iconify.design/mdi:code-tags-check.svg", "author": "开发团队", "rating": 4.9 }, + { "id": "skill-3", "name": "API 文档生成器", "icon": "/public/assets/demo-imgs/prompts-icon3.png", "author": "前端团队", "rating": 4.6 } + ], + "versions": [ + { "version": "1.2.0", "date": "2026-03-15", "changelog": "新增导出 PDF 格式支持" }, + { "version": "1.1.0", "date": "2026-03-10", "changelog": "优化文档结构" }, + { "version": "1.0.0", "date": "2026-03-05", "changelog": "首次发布" } + ] + }, + { + "id": "skill-2", + "identifier": "code-reviewer", + "name": "代码评审助手", + "description": "自动分析代码质量，发现潜在 Bug、性能问题、安全漏洞，并提供优化建议。", + "category": "product", + "icon": "https://cdn.iconify.design/mdi:code-tags-check.svg", + "author": "开发团队", + "createdAt": "2026-03-10T08:00:00Z", + "updatedAt": "2026-03-10T14:20:00Z", + "installCount": 8960, + "rating": 4.9, + "tags": ["代码审查", "质量分析", "自动化"], + "isHot": true, + "isNew": true, + "readme": "## 代码评审助手\n\n自动化的代码评审工具，帮助提升代码质量。", + "config": [ + { "name": "language", "label": "编程语言", "type": "select", "default": "TypeScript", "options": ["TypeScript", "JavaScript", "Python", "Java"] } + ], + "capabilities": [ + "自动识别代码缺陷", + "检测性能瓶颈", + "发现安全漏洞", + "提供优化建议" + ], + "usage": "本技能可以自动分析代码质量，发现潜在 Bug、性能问题、安全漏洞，并提供优化建议。适用于 Code Review 环节，提升代码质量和团队协作效率。", + "installCommands": { + "npm": "npm install skill-code-reviewer@2.0.0", + "yarn": "yarn add skill-code-reviewer@2.0.0", + "pnpm": "pnpm add skill-code-reviewer@2.0.0", + "cdn": "" + }, + "skillMdConfig": "name: 代码评审助手\ndescription: 自动分析代码质量，发现潜在Bug、性能问题、安全漏洞，并提供优化建议\nicon: assets/icons/code-review.png\nversion: 2.0.0\n\nparameters:\n - name: language\n type: string\n default: TypeScript\n description: 编程语言\n\nexamples:\n - input: 评审这段代码的质量\n output: 代码评审报告，包含问题列表和优化建议", + "resources": [ + { "id": "r1", "name": "使用文档", "icon": "f-icon f-icon-document", "type": "doc" }, + { "id": "r2", "name": "规则手册", "icon": "f-icon f-icon-api", "type": "api" }, + { "id": "r3", "name": "示例项目", "icon": "f-icon f-icon-project", "type": "project" }, + { "id": "r4", "name": "视频教程", "icon": "f-icon f-icon-video", "type": "video" } + ], + "relatedSkills": [ + { "id": "skill-1", "name": "PRD 智能生成器", "icon": "/public/assets/demo-imgs/prompts-icon1.png", "author": "系统管理员", "rating": 4.8 }, + { "id": "skill-3", "name": "API 文档生成器", "icon": "/public/assets/demo-imgs/prompts-icon3.png", "author": "前端团队", "rating": 4.6 } + ], + "versions": [ + { "version": "2.0.0", "date": "2026-03-10", "changelog": "新增安全漏洞检测功能" }, + { "version": "1.5.0", "date": "2026-03-01", "changelog": "支持更多编程语言" }, + { "version": "1.0.0", "date": "2026-02-20", "changelog": "首次发布" } + ] + }, + { + "id": "skill-3", + "identifier": "api-doc-generator", + "name": "API 文档生成器", + "description": "根据代码注释和接口定义，自动生成标准化的 API 文档，支持 Swagger、OpenAPI 等格式。", + "category": "product", + "icon": "/public/assets/demo-imgs/prompts-icon3.png", + "author": "前端团队", + "createdAt": "2026-03-08T08:00:00Z", + "updatedAt": "2026-03-08T09:00:00Z", + "installCount": 6540, + "rating": 4.6, + "tags": ["API", "文档", "自动化"], + "readme": "## API 文档生成器\n\n自动生成 API 文档，支持多种格式导出。", + "config": [], + "capabilities": [ + "解析代码注释生成文档", + "支持 Swagger/OpenAPI 格式", + "自动生成示例请求", + "支持多种编程语言" + ], + "usage": "本技能可以根据代码注释和接口定义，自动生成标准化的 API 文档。支持 Swagger、OpenAPI 等主流格式，一键导出使用。", + "installCommands": { + "npm": "npm install skill-api-doc@1.5.0", + "yarn": "yarn add skill-api-doc@1.5.0", + "pnpm": "pnpm add skill-api-doc@1.5.0", + "cdn": "" + }, + "skillMdConfig": "name: API文档生成器\ndescription: 根据代码注释和接口定义，自动生成标准化的API文档\nicon: assets/icons/api-doc.png\nversion: 1.5.0\n\nparameters:\n - name: format\n type: string\n default: swagger\n description: 文档格式\n\nexamples:\n - input: 生成用户模块的API文档\n output: Swagger格式的API文档", + "resources": [ + { "id": "r1", "name": "使用文档", "icon": "f-icon f-icon-document", "type": "doc" }, + { "id": "r2", "name": "格式说明", "icon": "f-icon f-icon-api", "type": "api" }, + { "id": "r3", "name": "示例项目", "icon": "f-icon f-icon-project", "type": "project" } + ], + "relatedSkills": [ + { "id": "skill-2", "name": "代码评审助手", "icon": "https://cdn.iconify.design/mdi:code-tags-check.svg", "author": "开发团队", "rating": 4.9 }, + { "id": "skill-9", "name": "数据可视化助手", "icon": "https://cdn.iconify.design/mdi:chart-bar.svg", "author": "数据团队", "rating": 4.9 } + ], + "versions": [ + { "version": "1.5.0", "date": "2026-03-08", "changelog": "新增 OpenAPI 3.0 支持" }, + { "version": "1.0.0", "date": "2026-02-15", "changelog": "首次发布" } + ] + }, + { + "id": "skill-4", + "identifier": "user-behavior-analysis", + "name": "用户行为分析", + "description": "深度分析用户行为数据，识别用户路径、转化漏斗、留存曲线，输出可执行的增长建议。", + "category": "data", + "icon": "/public/assets/demo-imgs/prompts-icon4.png", + "author": "数据团队", + "createdAt": "2026-03-12T08:00:00Z", + "updatedAt": "2026-03-12T11:45:00Z", + "installCount": 4320, + "rating": 4.7, + "tags": ["数据分析", "用户增长", "BI"], + "isNew": true, + "readme": "## 用户行为分析\n\n专业的用户行为分析工具。", + "config": [ + { "name": "timeRange", "label": "时间范围", "type": "select", "default": "最近7天", "options": ["最近7天", "最近30天", "最近90天"] } + ], + "capabilities": [ + "识别用户路径", + "分析转化漏斗", + "计算留存曲线", + "输出增长建议" + ], + "usage": "本技能可以深度分析用户行为数据，识别用户路径、转化漏斗、留存曲线，并输出可执行的增长建议。帮助产品团队优化用户旅程。", + "installCommands": { + "npm": "npm install skill-user-behavior@1.8.0", + "yarn": "yarn add skill-user-behavior@1.8.0", + "pnpm": "pnpm add skill-user-behavior@1.8.0", + "cdn": "" + }, + "skillMdConfig": "name: 用户行为分析\ndescription: 深度分析用户行为数据，识别用户路径、转化漏斗、留存曲线\nicon: assets/icons/behavior.png\nversion: 1.8.0\n\nparameters:\n - name: timeRange\n type: string\n default: 最近7天\n description: 分析时间范围\n\nexamples:\n - input: 分析过去30天的用户留存情况\n output: 留存曲线报告和优化建议", + "resources": [ + { "id": "r1", "name": "使用文档", "icon": "f-icon f-icon-document", "type": "doc" }, + { "id": "r2", "name": "指标说明", "icon": "f-icon f-icon-api", "type": "api" }, + { "id": "r3", "name": "案例分析", "icon": "f-icon f-icon-project", "type": "project" }, + { "id": "r4", "name": "视频教程", "icon": "f-icon f-icon-video", "type": "video" } + ], + "relatedSkills": [ + { "id": "skill-9", "name": "数据可视化助手", "icon": "https://cdn.iconify.design/mdi:chart-bar.svg", "author": "数据团队", "rating": 4.9 }, + { "id": "skill-5", "name": "财务报表生成", "icon": "/public/assets/demo-imgs/prompts-icon1.png", "author": "财务团队", "rating": 4.5 } + ], + "versions": [ + { "version": "1.8.0", "date": "2026-03-12", "changelog": "新增留存分析功能" }, + { "version": "1.5.0", "date": "2026-03-01", "changelog": "优化漏斗分析算法" }, + { "version": "1.0.0", "date": "2026-02-10", "changelog": "首次发布" } + ] + }, + { + "id": "skill-5", + "identifier": "finance-report-generator", + "name": "财务报表生成", + "description": "自动汇总财务数据，生成资产负债表、利润表、现金流量表等标准财务报表。", + "category": "finance", + "icon": "/public/assets/demo-imgs/prompts-icon1.png", + "author": "财务团队", + "createdAt": "2026-03-05T08:00:00Z", + "updatedAt": "2026-03-05T10:00:00Z", + "installCount": 3210, + "rating": 4.5, + "tags": ["财务", "报表", "自动化"], + "readme": "## 财务报表生成\n\n自动生成标准财务报表。", + "config": [ + { "name": "reportType", "label": "报表类型", "type": "select", "default": "月度", "options": ["月度", "季度", "年度"] } + ], + "capabilities": [ + "自动汇总财务数据", + "生成资产负债表", + "生成利润表", + "生成现金流量表" + ], + "usage": "本技能可以自动汇总财务数据，生成资产负债表、利润表、现金流量表等标准财务报表。提高财务工作效率，减少人工错误。", + "installCommands": { + "npm": "npm install skill-finance-report@1.0.0", + "yarn": "yarn add skill-finance-report@1.0.0", + "pnpm": "pnpm add skill-finance-report@1.0.0", + "cdn": "" + }, + "skillMdConfig": "name: 财务报表生成\ndescription: 自动汇总财务数据，生成标准财务报表\nicon: assets/icons/finance.png\nversion: 1.0.0\n\nparameters:\n - name: reportType\n type: string\n default: 月度\n description: 报表类型\n\nexamples:\n - input: 生成本月度的财务报表\n output: 资产负债表、利润表、现金流量表", + "resources": [ + { "id": "r1", "name": "使用文档", "icon": "f-icon f-icon-document", "type": "doc" }, + { "id": "r2", "name": "报表模板", "icon": "f-icon f-icon-api", "type": "api" } + ], + "relatedSkills": [ + { "id": "skill-4", "name": "用户行为分析", "icon": "/public/assets/demo-imgs/prompts-icon4.png", "author": "数据团队", "rating": 4.7 }, + { "id": "skill-6", "name": "智能客服质检", "icon": "/public/assets/demo-imgs/prompts-icon2.png", "author": "客服团队", "rating": 4.4 } + ], + "versions": [ + { "version": "1.0.0", "date": "2026-03-05", "changelog": "首次发布" } + ] + }, + { + "id": "skill-6", + "identifier": "qa-checker", + "name": "智能客服质检", + "description": "对客服对话录音进行智能分析，评估服务质量，发现问题并提供改进建议。", + "category": "operation", + "icon": "/public/assets/demo-imgs/prompts-icon2.png", + "author": "客服团队", + "createdAt": "2026-03-01T08:00:00Z", + "updatedAt": "2026-03-01T16:00:00Z", + "installCount": 2890, + "rating": 4.4, + "tags": ["客服", "质检", "AI分析"], + "readme": "## 智能客服质检\n\nAI 驱动的客服质量检测。", + "config": [ + { "name": "checkItems", "label": "检查项", "type": "select", "default": "全部", "options": ["全部", "话术规范", "情绪识别", "响应时效"] } + ], + "capabilities": [ + "话术规范检测", + "情绪识别分析", + "响应时效评估", + "问题发现与建议" + ], + "usage": "本技能可以对客服对话录音进行智能分析，评估服务质量，发现问题并提供改进建议。帮助提升客服团队整体服务水平。", + "installCommands": { + "npm": "npm install skill-qa-checker@1.3.0", + "yarn": "yarn add skill-qa-checker@1.3.0", + "pnpm": "pnpm add skill-qa-checker@1.3.0", + "cdn": "" + }, + "skillMdConfig": "name: 智能客服质检\ndescription: 对客服对话录音进行智能分析，评估服务质量，发现问题并提供改进建议\nicon: assets/icons/qa.png\nversion: 1.3.0\n\nparameters:\n - name: checkItems\n type: string\n default: 全部\n description: 检查项目\n\nexamples:\n - input: 检测这通客服电话的服务质量\n output: 质检报告，包含评分和改进建议", + "resources": [ + { "id": "r1", "name": "使用文档", "icon": "f-icon f-icon-document", "type": "doc" }, + { "id": "r2", "name": "质检标准", "icon": "f-icon f-icon-api", "type": "api" }, + { "id": "r3", "name": "案例分析", "icon": "f-icon f-icon-project", "type": "project" } + ], + "relatedSkills": [ + { "id": "skill-8", "name": "营销文案生成器", "icon": "/public/assets/demo-imgs/prompts-icon4.png", "author": "市场团队", "rating": 4.7 }, + { "id": "skill-10", "name": "会议纪要生成", "icon": "/public/assets/demo-imgs/prompts-icon2.png", "author": "行政团队", "rating": 4.5 } + ], + "versions": [ + { "version": "1.3.0", "date": "2026-03-01", "changelog": "新增情绪识别功能" }, + { "version": "1.0.0", "date": "2026-02-01", "changelog": "首次发布" } + ] + }, + { + "id": "skill-7", + "identifier": "resume-screener", + "name": "简历筛选器", + "description": "根据岗位要求自动筛选简历，提取关键信息，评估匹配度并排序推荐。", + "category": "hr", + "icon": "/public/assets/demo-imgs/prompts-icon3.png", + "author": "HR团队", + "createdAt": "2026-02-28T08:00:00Z", + "updatedAt": "2026-02-28T14:00:00Z", + "installCount": 2150, + "rating": 4.6, + "tags": ["招聘", "简历", "自动化"], + "readme": "## 简历筛选器\n\n智能简历筛选工具。", + "config": [ + { "name": "matchThreshold", "label": "匹配阈值", "type": "select", "default": "80%", "options": ["60%", "70%", "80%", "90%"] } + ], + "capabilities": [ + "自动提取简历关键信息", + "岗位匹配度评估", + "候选人排序推荐", + "批量处理简历" + ], + "usage": "本技能可以根据岗位要求自动筛选简历，提取关键信息，评估匹配度并排序推荐。大幅提升 HR 筛选简历的效率。", + "installCommands": { + "npm": "npm install skill-resume-screener@1.1.0", + "yarn": "yarn add skill-resume-screener@1.1.0", + "pnpm": "pnpm add skill-resume-screener@1.1.0", + "cdn": "" + }, + "skillMdConfig": "name: 简历筛选器\ndescription: 根据岗位要求自动筛选简历，提取关键信息，评估匹配度并排序推荐\nicon: assets/icons/resume.png\nversion: 1.1.0\n\nparameters:\n - name: matchThreshold\n type: string\n default: 80%\n description: 匹配阈值\n\nexamples:\n - input: 筛选前端工程师岗位的简历\n output: 符合条件的简历列表，按匹配度排序", + "resources": [ + { "id": "r1", "name": "使用文档", "icon": "f-icon f-icon-document", "type": "doc" }, + { "id": "r2", "name": "筛选规则", "icon": "f-icon f-icon-api", "type": "api" }, + { "id": "r3", "name": "使用案例", "icon": "f-icon f-icon-project", "type": "project" } + ], + "relatedSkills": [ + { "id": "skill-10", "name": "会议纪要生成", "icon": "/public/assets/demo-imgs/prompts-icon2.png", "author": "行政团队", "rating": 4.5 }, + { "id": "skill-6", "name": "智能客服质检", "icon": "/public/assets/demo-imgs/prompts-icon2.png", "author": "客服团队", "rating": 4.4 } + ], + "versions": [ + { "version": "1.1.0", "date": "2026-02-28", "changelog": "优化匹配算法" }, + { "version": "1.0.0", "date": "2026-02-01", "changelog": "首次发布" } + ] + }, + { + "id": "skill-8", + "identifier": "marketing-copy-generator", + "name": "营销文案生成器", + "description": "输入产品信息和营销目标，自动生成多渠道营销文案，包括朋友圈、公众号、短信等。", + "category": "operation", + "icon": "/public/assets/demo-imgs/prompts-icon4.png", + "author": "市场团队", + "createdAt": "2026-03-18T08:00:00Z", + "updatedAt": "2026-03-18T13:30:00Z", + "installCount": 5680, + "rating": 4.7, + "tags": ["营销", "文案", "AI生成"], + "isHot": true, + "readme": "## 营销文案生成器\n\n一键生成各渠道营销文案。", + "config": [ + { "name": "channel", "label": "投放渠道", "type": "select", "default": "朋友圈", "options": ["朋友圈", "公众号", "抖音", "小红书", "短信"] }, + { "name": "tone", "label": "文案风格", "type": "select", "default": "正式", "options": ["正式", "活泼", "感性", "幽默"] } + ], + "capabilities": [ + "多渠道文案生成", + "多种风格可选", + "支持图片文案", + "一键复制使用" + ], + "usage": "本技能可以输入产品信息和营销目标，自动生成多渠道营销文案，包括朋友圈、公众号、短信等。让营销内容创作更高效。", + "installCommands": { + "npm": "npm install skill-marketing-copy@1.4.0", + "yarn": "yarn add skill-marketing-copy@1.4.0", + "pnpm": "pnpm add skill-marketing-copy@1.4.0", + "cdn": "" + }, + "skillMdConfig": "name: 营销文案生成器\ndescription: 输入产品信息和营销目标，自动生成多渠道营销文案\nicon: assets/icons/marketing.png\nversion: 1.4.0\n\nparameters:\n - name: channel\n type: string\n default: 朋友圈\n description: 投放渠道\n - name: tone\n type: string\n default: 正式\n description: 文案风格\n\nexamples:\n - input: 为新产品生成朋友圈推广文案\n output: 适合朋友圈的营销文案", + "resources": [ + { "id": "r1", "name": "使用文档", "icon": "f-icon f-icon-document", "type": "doc" }, + { "id": "r2", "name": "文案技巧", "icon": "f-icon f-icon-api", "type": "api" }, + { "id": "r3", "name": "案例库", "icon": "f-icon f-icon-project", "type": "project" }, + { "id": "r4", "name": "视频教程", "icon": "f-icon f-icon-video", "type": "video" } + ], + "relatedSkills": [ + { "id": "skill-6", "name": "智能客服质检", "icon": "/public/assets/demo-imgs/prompts-icon2.png", "author": "客服团队", "rating": 4.4 }, + { "id": "skill-10", "name": "会议纪要生成", "icon": "/public/assets/demo-imgs/prompts-icon2.png", "author": "行政团队", "rating": 4.5 } + ], + "versions": [ + { "version": "1.4.0", "date": "2026-03-18", "changelog": "新增小红书渠道支持" }, + { "version": "1.2.0", "date": "2026-03-10", "changelog": "增加多种文案风格" }, + { "version": "1.0.0", "date": "2026-02-20", "changelog": "首次发布" } + ] + }, + { + "id": "skill-9", + "identifier": "dataviz-assistant", + "name": "数据可视化助手", + "description": "描述你的数据和分析需求，自动生成对应的图表代码，支持 ECharts、Highcharts 等。", + "category": "data", + "icon": "https://cdn.iconify.design/mdi:chart-bar.svg", + "author": "数据团队", + "createdAt": "2026-03-20T08:00:00Z", + "updatedAt": "2026-03-20T16:00:00Z", + "installCount": 7890, + "rating": 4.9, + "tags": ["数据可视化", "图表", "代码生成"], + "isHot": true, + "readme": "## 数据可视化助手\n\n智能生成图表代码。", + "config": [ + { "name": "chartLib", "label": "图表库", "type": "select", "default": "ECharts", "options": ["ECharts", "Highcharts", "D3.js", "AntV"] } + ], + "capabilities": [ + "自然语言描述生成图表", + "支持多种图表库", + "自动生成代码", + "实时预览效果" + ], + "usage": "本技能可以描述你的数据和分析需求，自动生成对应的图表代码，支持 ECharts、Highcharts、D3.js、AntV 等多种图表库。", + "installCommands": { + "npm": "npm install skill-dataviz@2.1.0", + "yarn": "yarn add skill-dataviz@2.1.0", + "pnpm": "pnpm add skill-dataviz@2.1.0", + "cdn": "" + }, + "skillMdConfig": "name: 数据可视化助手\ndescription: 描述你的数据和分析需求，自动生成对应的图表代码\nicon: assets/icons/dataviz.png\nversion: 2.1.0\n\nparameters:\n - name: chartLib\n type: string\n default: ECharts\n description: 图表库\n\nexamples:\n - input: 生成一个展示月销售额趋势的折线图\n output: ECharts图表代码", + "resources": [ + { "id": "r1", "name": "使用文档", "icon": "f-icon f-icon-document", "type": "doc" }, + { "id": "r2", "name": "图表配置", "icon": "f-icon f-icon-api", "type": "api" }, + { "id": "r3", "name": "示例项目", "icon": "f-icon f-icon-project", "type": "project" }, + { "id": "r4", "name": "视频教程", "icon": "f-icon f-icon-video", "type": "video" } + ], + "relatedSkills": [ + { "id": "skill-4", "name": "用户行为分析", "icon": "/public/assets/demo-imgs/prompts-icon4.png", "author": "数据团队", "rating": 4.7 }, + { "id": "skill-3", "name": "API 文档生成器", "icon": "/public/assets/demo-imgs/prompts-icon3.png", "author": "前端团队", "rating": 4.6 } + ], + "versions": [ + { "version": "2.1.0", "date": "2026-03-20", "changelog": "新增 AntV 图表库支持" }, + { "version": "2.0.0", "date": "2026-03-15", "changelog": "重构代码生成引擎" }, + { "version": "1.5.0", "date": "2026-03-01", "changelog": "增加 D3.js 支持" }, + { "version": "1.0.0", "date": "2026-02-01", "changelog": "首次发布" } + ] + }, + { + "id": "skill-10", + "identifier": "meeting-notes-generator", + "name": "会议纪要生成", + "description": "上传会议录音或文字记录，自动整理会议要点、待办事项、负责人和截止日期。", + "category": "operation", + "icon": "/public/assets/demo-imgs/prompts-icon2.png", + "author": "行政团队", + "createdAt": "2026-03-22T08:00:00Z", + "updatedAt": "2026-03-22T10:00:00Z", + "installCount": 3450, + "rating": 4.5, + "tags": ["会议", "效率", "自动化"], + "readme": "## 会议纪要生成\n\n自动生成规范的会议纪要。", + "config": [ + { "name": "template", "label": "模板风格", "type": "select", "default": "标准", "options": ["简洁", "标准", "详细"] } + ], + "capabilities": [ + "会议录音自动转文字", + "提取会议要点", + "识别待办事项", + "自动分配负责人和截止日期" + ], + "usage": "本技能可以上传会议录音或文字记录，自动整理会议要点、待办事项、负责人和截止日期。生成规范的会议纪要，提升会议效率。", + "installCommands": { + "npm": "npm install skill-meeting-notes@1.0.0", + "yarn": "yarn add skill-meeting-notes@1.0.0", + "pnpm": "pnpm add skill-meeting-notes@1.0.0", + "cdn": "" + }, + "skillMdConfig": "name: 会议纪要生成\ndescription: 上传会议录音或文字记录，自动整理会议要点、待办事项、负责人和截止日期\nicon: assets/icons/meeting.png\nversion: 1.0.0\n\nparameters:\n - name: template\n type: string\n default: 标准\n description: 模板风格\n\nexamples:\n - input: 分析这段会议记录\n output: 会议纪要，包含要点、待办、负责人和截止日期", + "resources": [ + { "id": "r1", "name": "使用文档", "icon": "f-icon f-icon-document", "type": "doc" }, + { "id": "r2", "name": "模板说明", "icon": "f-icon f-icon-api", "type": "api" }, + { "id": "r3", "name": "示例项目", "icon": "f-icon f-icon-project", "type": "project" } + ], + "relatedSkills": [ + { "id": "skill-7", "name": "简历筛选器", "icon": "/public/assets/demo-imgs/prompts-icon3.png", "author": "HR团队", "rating": 4.6 }, + { "id": "skill-8", "name": "营销文案生成器", "icon": "/public/assets/demo-imgs/prompts-icon4.png", "author": "市场团队", "rating": 4.7 } + ], + "versions": [ + { "version": "1.0.0", "date": "2026-03-22", "changelog": "首次发布" } + ] + } +] diff --git a/packages/conversation/demo/components/skill-market/skill-market-detail.component.tsx b/packages/conversation/demo/components/skill-market/skill-market-detail.component.tsx index bbeb2814..c5cd6b38 100644 --- a/packages/conversation/demo/components/skill-market/skill-market-detail.component.tsx +++ b/packages/conversation/demo/components/skill-market/skill-market-detail.component.tsx @@ -1,6 +1,10 @@ import { defineComponent, ref, computed } from 'vue'; import { FNav } from '@farris/ui-vue'; -import { MOCK_CATEGORIES, MOCK_SKILLS } from './mock-data'; +import categories from './mockdata/mock-categories.json'; +import skills from './mockdata/mock-skills.json'; +import type { SkillCategory, SkillDetail } from './types'; +const MOCK_CATEGORIES = categories as SkillCategory[]; +const MOCK_SKILLS = skills as SkillDetail[]; import type { Skill } from './types'; export default defineComponent({ diff --git a/packages/conversation/src/components/skill-market/api.ts b/packages/conversation/src/components/skill-market/api.ts index 75b0b184..7cfd0019 100644 --- a/packages/conversation/src/components/skill-market/api.ts +++ b/packages/conversation/src/components/skill-market/api.ts @@ -156,6 +156,7 @@ function mapApiDetailToDiscoverSkillDetail(detail: ApiSkillDetail): SkillDetail license: detail.license, readme: detail.readme, content: detail.content, + version: detail.version, downloadUrl: detail.downloadUrl, github: detail.github, capabilities: detail.capabilities, diff --git a/packages/conversation/src/components/skill-market/mockData.ts b/packages/conversation/src/components/skill-market/mockData.ts index 8469cd44..68f644cb 100644 --- a/packages/conversation/src/components/skill-market/mockData.ts +++ b/packages/conversation/src/components/skill-market/mockData.ts @@ -1,363 +1,10 @@ -// Mock Data - Aligned with LobeHub DiscoverSkillDetail structure -import type { SkillDetail, DiscoverSkillItem, SkillCommentListResponse } from './types'; +// Mock Data - Loaded from JSON files for consistency with demo +import type { SkillDetail, SkillCommentListResponse } from './types'; +import mockSkills from './mockdata/mock-skills.json'; +import mockComments from './mockdata/mock-comments.json'; -export const MOCK_SKILLS: DiscoverSkillItem[] = [ - { - id: '1', - identifier: 'code-review-gpt', - name: 'Code Review GPT', - description: 'AI-powered code review assistant that helps identify bugs, security issues, and improvement opportunities.', - category: 'coding-agents-ides', - icon: 'https://example.com/icons/code-review.png', - author: 'LobeHub', - createdAt: '2024-01-15T08:00:00Z', - updatedAt: '2024-03-20T10:30:00Z', - installCount: 15842, - rating: 4.8, - tags: ['code-review', 'security', 'best-practices'], - isHot: true, - ratingAvg: 4.8, - commentCount: 256, - }, - { - id: '2', - identifier: 'git-assistant', - name: 'Git Assistant', - description: 'Intelligent Git helper for managing branches, resolving conflicts, and writing commit messages.', - category: 'git-github', - icon: 'https://example.com/icons/git.png', - author: 'LobeHub', - createdAt: '2024-02-10T08:00:00Z', - updatedAt: '2024-03-18T14:20:00Z', - installCount: 12305, - rating: 4.6, - tags: ['git', 'version-control', 'productivity'], - isNew: true, - ratingAvg: 4.6, - commentCount: 128, - }, - { - id: '3', - identifier: 'api-designer', - name: 'API Designer', - description: 'Design and document RESTful APIs with AI-powered suggestions and best practices.', - category: 'web-frontend-development', - icon: 'https://example.com/icons/api.png', - author: 'LobeHub', - createdAt: '2024-01-20T08:00:00Z', - updatedAt: '2024-03-15T09:00:00Z', - installCount: 9876, - rating: 4.5, - tags: ['api', 'rest', 'documentation'], - ratingAvg: 4.5, - commentCount: 89, - }, - { - id: '4', - identifier: 'docker-helper', - name: 'Docker Helper', - description: 'AI assistant for Docker containerization, Dockerfile optimization, and docker-compose configuration.', - category: 'devops-cloud', - icon: 'https://example.com/icons/docker.png', - author: 'LobeHub', - createdAt: '2024-02-25T08:00:00Z', - updatedAt: '2024-03-22T11:45:00Z', - installCount: 8543, - rating: 4.7, - tags: ['docker', 'devops', 'containerization'], - isHot: true, - ratingAvg: 4.7, - commentCount: 167, - }, - { - id: '5', - identifier: 'test-generator', - name: 'Test Generator', - description: 'Automatically generate unit tests, integration tests, and end-to-end tests for your codebase.', - category: 'coding-agents-ides', - icon: 'https://example.com/icons/test.png', - author: 'LobeHub', - createdAt: '2024-03-01T08:00:00Z', - updatedAt: '2024-03-21T16:00:00Z', - installCount: 6234, - rating: 4.4, - tags: ['testing', 'automation', 'quality'], - isNew: true, - ratingAvg: 4.4, - commentCount: 72, - }, - { - id: '6', - identifier: 'readme-writer', - name: 'README Writer', - description: 'Generate beautiful and comprehensive README files for your projects with AI.', - category: 'productivity-tasks', - icon: 'https://example.com/icons/readme.png', - author: 'LobeHub', - createdAt: '2024-03-05T08:00:00Z', - updatedAt: '2024-03-19T13:30:00Z', - installCount: 4521, - rating: 4.3, - tags: ['documentation', 'readme', 'writing'], - ratingAvg: 4.3, - commentCount: 45, - }, -]; +export const MOCK_SKILLS: SkillDetail[] = mockSkills as SkillDetail[]; -export const MOCK_SKILL_DETAIL: SkillDetail = { - id: '1', - identifier: 'code-review-gpt', - name: 'Code Review GPT', - description: 'AI-powered code review assistant that helps identify bugs, security issues, and improvement opportunities.', - category: 'coding-agents-ides', - icon: 'https://example.com/icons/code-review.png', - author: 'LobeHub', - createdAt: '2024-01-15T08:00:00Z', - updatedAt: '2024-03-20T10:30:00Z', - installCount: 15842, - rating: 4.8, - tags: ['code-review', 'security', 'best-practices'], - isHot: true, - homepage: 'https://github.com/lobehub/code-review-gpt', - license: 'MIT', - repository: 'https://github.com/lobehub/code-review-gpt', +export const MOCK_SKILL_DETAIL: SkillDetail = MOCK_SKILLS[0]; - // Download URL for installation - downloadUrl: 'https://market.lobehub.com/api/v1/skills/code-review-gpt/download', - - // GitHub info - github: { - stars: 2847, - url: 'https://github.com/lobehub/code-review-gpt', - }, - - // Rating distribution - ratingDistribution: { - 5: 189, - 4: 45, - 3: 15, - 2: 5, - 1: 2, - }, - - // Content / README - content: `# Code Review GPT - -An AI-powered code review assistant that helps developers identify bugs, security vulnerabilities, and code improvement opportunities. - -## Features - -- **Automated Code Analysis**: Scans your code for common issues -- **Security Vulnerability Detection**: Identifies potential security risks -- **Best Practice Suggestions**: Recommends code style and architecture improvements -- **Detailed Reports**: Provides comprehensive review reports - -## Installation - -\`\`\`bash -npx @lobehub/skill-code-review-gpt install -\`\`\` - -## Usage - -Simply run the skill in your repository: - -\`\`\`bash -lobe-skill code-review-gpt --path ./src -\`\`\` - -## Configuration - -| Option | Description | Default | -|--------|-------------|---------| -| severity | Minimum severity level | medium | -| includeSecurity | Enable security checks | true | -`, - readme: `# Code Review GPT - -An AI-powered code review assistant that helps developers identify bugs, security vulnerabilities, and code improvement opportunities.`, - - // Skill configuration - config: [ - { - name: 'severity', - label: 'Severity Level', - type: 'select', - default: 'medium', - options: ['low', 'medium', 'high', 'critical'], - description: 'Minimum severity level for reported issues', - }, - { - name: 'includeSecurity', - label: 'Include Security Checks', - type: 'boolean', - default: true, - description: 'Enable security vulnerability detection', - }, - ], - - // Install commands - installCommands: { - npm: 'npx @lobehub/skill-code-review-gpt@latest', - yarn: 'yarn add @lobehub/skill-code-review-gpt', - pnpm: 'pnpm add @lobehub/skill-code-review-gpt', - cdn: 'https://unpkg.com/@lobehub/skill-code-review-gpt/dist/index.js', - }, - - // Resources (files provided by the skill) - resources: [ - { - id: 'res-1', - name: 'review-template.md', - icon: 'f-icon f-icon-file', - type: 'markdown', - fileHash: 'abc123', - size: 2048, - }, - { - id: 'res-2', - name: 'security-rules.json', - icon: 'f-icon f-icon-file', - type: 'json', - fileHash: 'def456', - size: 1024, - }, - { - id: 'res-3', - name: 'code-patterns.yaml', - icon: 'f-icon f-icon-file', - type: 'yaml', - fileHash: 'ghi789', - size: 1536, - }, - { - id: 'res-4', - name: 'review-config.ts', - icon: 'f-icon f-icon-file', - type: 'typescript', - fileHash: 'jkl012', - size: 3072, - }, - ], - - // Related skills - related: [ - { - id: '2', - identifier: 'git-assistant', - name: 'Git Assistant', - description: 'Intelligent Git helper', - category: 'git-github', - icon: 'https://example.com/icons/git.png', - author: 'LobeHub', - createdAt: '2024-02-10T08:00:00Z', - updatedAt: '2024-03-18T14:20:00Z', - installCount: 12305, - rating: 4.6, - tags: ['git', 'version-control'], - ratingAvg: 4.6, - commentCount: 128, - }, - { - id: '5', - identifier: 'test-generator', - name: 'Test Generator', - description: 'Generate automated tests', - category: 'coding-agents-ides', - icon: 'https://example.com/icons/test.png', - author: 'LobeHub', - createdAt: '2024-03-01T08:00:00Z', - updatedAt: '2024-03-21T16:00:00Z', - installCount: 6234, - rating: 4.4, - tags: ['testing', 'automation'], - ratingAvg: 4.4, - commentCount: 72, - }, - ], - - // Local extension fields - capabilities: [ - 'Automated code analysis and review', - 'Security vulnerability detection', - 'Code style and best practice suggestions', - 'Detailed review reports with fix recommendations', - 'Integration with CI/CD pipelines', - 'Support for multiple programming languages', - ], - usage: 'Code Review GPT can be used to automatically review pull requests, check code before commits, or perform batch reviews of your codebase. Simply configure the severity level and run the review command.', - skillMdConfig: `# skill.md Configuration - -\`\`\`yaml -name: code-review-gpt -version: 1.2.0 -description: AI-powered code review assistant - -settings: - severity: medium - includeSecurity: true - languages: - - javascript - - typescript - - python - - go - -prompts: - reviewTemplate: | - Please review the following code for: - 1. Security vulnerabilities - 2. Code quality issues - 3. Performance concerns - 4. Best practice violations -\`\`\``, - - // Versions history - versions: [ - { - version: '1.2.0', - date: '2024-03-20', - changelog: '- Added support for Go language\n- Improved security detection accuracy\n- Fixed false positive issues', - }, - { - version: '1.1.0', - date: '2024-02-15', - changelog: '- Added Python support\n- Enhanced AI model\n- Improved reporting format', - }, - { - version: '1.0.0', - date: '2024-01-15', - changelog: '- Initial release\n- JavaScript/TypeScript support\n- Basic security checks', - }, - ], -}; - -// Mock comments -export const MOCK_COMMENTS: SkillCommentListResponse = { - items: [ - { - id: 'c1', - author: 'John Doe', - avatar: 'https://example.com/avatars/john.png', - content: 'Excellent skill! Saved me hours of code review time.', - rating: 5, - createdAt: '2024-03-18T10:00:00Z', - }, - { - id: 'c2', - author: 'Jane Smith', - avatar: 'https://example.com/avatars/jane.png', - content: 'Very helpful for catching security issues early.', - rating: 5, - createdAt: '2024-03-15T14:30:00Z', - }, - { - id: 'c3', - author: 'Mike Chen', - avatar: 'https://example.com/avatars/mike.png', - content: 'Good overall, but sometimes reports false positives.', - rating: 4, - createdAt: '2024-03-10T09:15:00Z', - }, - ], - total: 256, -}; +export const MOCK_COMMENTS: SkillCommentListResponse = mockComments as SkillCommentListResponse; \ No newline at end of file diff --git a/packages/conversation/src/components/skill-market/mockdata/mock-comments.json b/packages/conversation/src/components/skill-market/mockdata/mock-comments.json new file mode 100644 index 00000000..b7bf43e8 --- /dev/null +++ b/packages/conversation/src/components/skill-market/mockdata/mock-comments.json @@ -0,0 +1,29 @@ +{ + "items": [ + { + "id": "c1", + "author": "John Doe", + "avatar": "https://example.com/avatars/john.png", + "content": "Excellent skill! Saved me hours of code review time.", + "rating": 5, + "createdAt": "2024-03-18T10:00:00Z" + }, + { + "id": "c2", + "author": "Jane Smith", + "avatar": "https://example.com/avatars/jane.png", + "content": "Very helpful for catching security issues early.", + "rating": 5, + "createdAt": "2024-03-15T14:30:00Z" + }, + { + "id": "c3", + "author": "Mike Chen", + "avatar": "https://example.com/avatars/mike.png", + "content": "Good overall, but sometimes reports false positives.", + "rating": 4, + "createdAt": "2024-03-10T09:15:00Z" + } + ], + "total": 256 +} \ No newline at end of file diff --git a/packages/conversation/src/components/skill-market/mockdata/mock-skills.json b/packages/conversation/src/components/skill-market/mockdata/mock-skills.json new file mode 100644 index 00000000..23f18d37 --- /dev/null +++ b/packages/conversation/src/components/skill-market/mockdata/mock-skills.json @@ -0,0 +1,197 @@ +[ + { + "id": "1", + "identifier": "code-review-gpt", + "name": "Code Review GPT", + "description": "AI-powered code review assistant that helps identify bugs, security issues, and improvement opportunities.", + "category": "coding-agents-ides", + "icon": "https://example.com/icons/code-review.png", + "author": "LobeHub", + "createdAt": "2024-01-15T08:00:00Z", + "updatedAt": "2024-03-20T10:30:00Z", + "installCount": 15842, + "rating": 4.8, + "tags": ["code-review", "security", "best-practices"], + "isHot": true, + "ratingAvg": 4.8, + "commentCount": 256, + "homepage": "https://github.com/lobehub/code-review-gpt", + "license": "MIT", + "repository": "https://github.com/lobehub/code-review-gpt", + "downloadUrl": "https://market.lobehub.com/api/v1/skills/code-review-gpt/download", + "github": { + "stars": 2847, + "url": "https://github.com/lobehub/code-review-gpt" + }, + "ratingDistribution": { + "5": 189, + "4": 45, + "3": 15, + "2": 5, + "1": 2 + }, + "content": "# Code Review GPT\n\nAn AI-powered code review assistant that helps developers identify bugs, security vulnerabilities, and code improvement opportunities.\n\n## Features\n\n- **Automated Code Analysis**: Scans your code for common issues\n- **Security Vulnerability Detection**: Identifies potential security risks\n- **Best Practice Suggestions**: Recommends code style and architecture improvements\n- **Detailed Reports**: Provides comprehensive review reports\n\n## Installation\n\n```bash\nnpx @lobehub/skill-code-review-gpt install\n```\n\n## Usage\n\nSimply run the skill in your repository:\n\n```bash\nlobe-skill code-review-gpt --path ./src\n```", + "readme": "# Code Review GPT\n\nAn AI-powered code review assistant that helps developers identify bugs, security vulnerabilities, and code improvement opportunities.", + "config": [ + { + "name": "severity", + "label": "Severity Level", + "type": "select", + "default": "medium", + "options": ["low", "medium", "high", "critical"], + "description": "Minimum severity level for reported issues" + }, + { + "name": "includeSecurity", + "label": "Include Security Checks", + "type": "boolean", + "default": true, + "description": "Enable security vulnerability detection" + } + ], + "installCommands": { + "npm": "npx @lobehub/skill-code-review-gpt@latest", + "yarn": "yarn add @lobehub/skill-code-review-gpt", + "pnpm": "pnpm add @lobehub/skill-code-review-gpt", + "cdn": "https://unpkg.com/@lobehub/skill-code-review-gpt/dist/index.js" + }, + "resources": [ + { "id": "res-1", "name": "review-template.md", "icon": "f-icon f-icon-file", "type": "markdown", "fileHash": "abc123", "size": 2048 }, + { "id": "res-2", "name": "security-rules.json", "icon": "f-icon f-icon-file", "type": "json", "fileHash": "def456", "size": 1024 }, + { "id": "res-3", "name": "code-patterns.yaml", "icon": "f-icon f-icon-file", "type": "yaml", "fileHash": "ghi789", "size": 1536 }, + { "id": "res-4", "name": "review-config.ts", "icon": "f-icon f-icon-file", "type": "typescript", "fileHash": "jkl012", "size": 3072 } + ], + "related": [ + { + "id": "2", + "identifier": "git-assistant", + "name": "Git Assistant", + "description": "Intelligent Git helper", + "category": "git-github", + "icon": "https://example.com/icons/git.png", + "author": "LobeHub", + "createdAt": "2024-02-10T08:00:00Z", + "updatedAt": "2024-03-18T14:20:00Z", + "installCount": 12305, + "rating": 4.6, + "tags": ["git", "version-control"], + "ratingAvg": 4.6, + "commentCount": 128 + }, + { + "id": "5", + "identifier": "test-generator", + "name": "Test Generator", + "description": "Generate automated tests", + "category": "coding-agents-ides", + "icon": "https://example.com/icons/test.png", + "author": "LobeHub", + "createdAt": "2024-03-01T08:00:00Z", + "updatedAt": "2024-03-21T16:00:00Z", + "installCount": 6234, + "rating": 4.4, + "tags": ["testing", "automation"], + "ratingAvg": 4.4, + "commentCount": 72 + } + ], + "capabilities": [ + "Automated code analysis and review", + "Security vulnerability detection", + "Code style and best practice suggestions", + "Detailed review reports with fix recommendations", + "Integration with CI/CD pipelines", + "Support for multiple programming languages" + ], + "usage": "Code Review GPT can be used to automatically review pull requests, check code before commits, or perform batch reviews of your codebase. Simply configure the severity level and run the review command.", + "skillMdConfig": "# skill.md Configuration\n\n```yaml\nname: code-review-gpt\nversion: 1.2.0\ndescription: AI-powered code review assistant\n\nsettings:\n severity: medium\n includeSecurity: true\n languages:\n - javascript\n - typescript\n - python\n - go\n\nprompts:\n reviewTemplate: |\n Please review the following code for:\n 1. Security vulnerabilities\n 2. Code quality issues\n 3. Performance concerns\n 4. Best practice violations\n```", + "versions": [ + { "version": "1.2.0", "date": "2024-03-20", "changelog": "- Added support for Go language\n- Improved security detection accuracy\n- Fixed false positive issues" }, + { "version": "1.1.0", "date": "2024-02-15", "changelog": "- Added Python support\n- Enhanced AI model\n- Improved reporting format" }, + { "version": "1.0.0", "date": "2024-01-15", "changelog": "- Initial release\n- JavaScript/TypeScript support\n- Basic security checks" } + ] + }, + { + "id": "2", + "identifier": "git-assistant", + "name": "Git Assistant", + "description": "Intelligent Git helper for managing branches, resolving conflicts, and writing commit messages.", + "category": "git-github", + "icon": "https://example.com/icons/git.png", + "author": "LobeHub", + "createdAt": "2024-02-10T08:00:00Z", + "updatedAt": "2024-03-18T14:20:00Z", + "installCount": 12305, + "rating": 4.6, + "tags": ["git", "version-control", "productivity"], + "isNew": true, + "ratingAvg": 4.6, + "commentCount": 128 + }, + { + "id": "3", + "identifier": "api-designer", + "name": "API Designer", + "description": "Design and document RESTful APIs with AI-powered suggestions and best practices.", + "category": "web-frontend-development", + "icon": "https://example.com/icons/api.png", + "author": "LobeHub", + "createdAt": "2024-01-20T08:00:00Z", + "updatedAt": "2024-03-15T09:00:00Z", + "installCount": 9876, + "rating": 4.5, + "tags": ["api", "rest", "documentation"], + "ratingAvg": 4.5, + "commentCount": 89 + }, + { + "id": "4", + "identifier": "docker-helper", + "name": "Docker Helper", + "description": "AI assistant for Docker containerization, Dockerfile optimization, and docker-compose configuration.", + "category": "devops-cloud", + "icon": "https://example.com/icons/docker.png", + "author": "LobeHub", + "createdAt": "2024-02-25T08:00:00Z", + "updatedAt": "2024-03-22T11:45:00Z", + "installCount": 8543, + "rating": 4.7, + "tags": ["docker", "devops", "containerization"], + "isHot": true, + "ratingAvg": 4.7, + "commentCount": 167 + }, + { + "id": "5", + "identifier": "test-generator", + "name": "Test Generator", + "description": "Automatically generate unit tests, integration tests, and end-to-end tests for your codebase.", + "category": "coding-agents-ides", + "icon": "https://example.com/icons/test.png", + "author": "LobeHub", + "createdAt": "2024-03-01T08:00:00Z", + "updatedAt": "2024-03-21T16:00:00Z", + "installCount": 6234, + "rating": 4.4, + "tags": ["testing", "automation", "quality"], + "isNew": true, + "ratingAvg": 4.4, + "commentCount": 72 + }, + { + "id": "6", + "identifier": "readme-writer", + "name": "README Writer", + "description": "Generate beautiful and comprehensive README files for your projects with AI.", + "category": "productivity-tasks", + "icon": "https://example.com/icons/readme.png", + "author": "LobeHub", + "createdAt": "2024-03-05T08:00:00Z", + "updatedAt": "2024-03-19T13:30:00Z", + "installCount": 4521, + "rating": 4.3, + "tags": ["documentation", "readme", "writing"], + "ratingAvg": 4.3, + "commentCount": 45 + } +] \ No newline at end of file diff --git a/packages/conversation/src/components/skill-market/types.ts b/packages/conversation/src/components/skill-market/types.ts index 33e213be..e4123661 100644 --- a/packages/conversation/src/components/skill-market/types.ts +++ b/packages/conversation/src/components/skill-market/types.ts @@ -41,6 +41,7 @@ export interface MarketSkillDetail extends MarketSkillListItem { versions?: Version[]; resources?: Resource[]; installCommands?: InstallCommands; + version?: string; // Single version string from backend } // Discover skill item (extends list item with additional fields) -- Gitee