497 lines
13 KiB
TypeScript
497 lines
13 KiB
TypeScript
|
import { ref, computed } from 'vue'
|
|||
|
|
import { ElMessageBox, ElMessage } from 'element-plus'
|
|||
|
|
|
|||
|
|
const API_BASE = 'http://localhost:8082'
|
|||
|
|
|
|||
|
|
export interface Skill {
|
|||
|
|
id: string
|
|||
|
|
skill_name: string
|
|||
|
|
skill_type: string
|
|||
|
|
skill_desc: string
|
|||
|
|
path: string
|
|||
|
|
status: string
|
|||
|
|
created_at?: string
|
|||
|
|
updated_at?: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function useSkills() {
|
|||
|
|
// ============ 导入相关状态 ============
|
|||
|
|
const fileInputRef = ref<HTMLInputElement | null>(null)
|
|||
|
|
const isImporting = ref(false)
|
|||
|
|
const isImportingDialog = ref(false)
|
|||
|
|
const importFile = ref<File | null>(null)
|
|||
|
|
const importFileName = ref('')
|
|||
|
|
const importSkillName = ref('')
|
|||
|
|
const importSkillDesc = ref('')
|
|||
|
|
const importSkillContent = ref('')
|
|||
|
|
const isImportStep2 = ref(false)
|
|||
|
|
|
|||
|
|
// 下拉菜单状态
|
|||
|
|
const showDropdown = ref(false)
|
|||
|
|
const dropdownTimeout = ref<number | null>(null)
|
|||
|
|
|
|||
|
|
// ============ 技能列表状态 ============
|
|||
|
|
const skills = ref<Skill[]>([])
|
|||
|
|
const skillsLoading = ref(false)
|
|||
|
|
|
|||
|
|
// 搜索和筛选
|
|||
|
|
const searchQuery = ref('')
|
|||
|
|
const filterStatus = ref('all')
|
|||
|
|
|
|||
|
|
// 编辑状态
|
|||
|
|
const isEditing = ref(false)
|
|||
|
|
const isCreating = ref(false)
|
|||
|
|
const isEditingContent = ref(false)
|
|||
|
|
const editingSkill = ref<Skill | null>(null)
|
|||
|
|
|
|||
|
|
// 表单
|
|||
|
|
const editForm = ref({
|
|||
|
|
skill_name: '',
|
|||
|
|
skill_desc: '',
|
|||
|
|
skill_type: 'user',
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const newSkillForm = ref({
|
|||
|
|
skill_name: '',
|
|||
|
|
skill_desc: '',
|
|||
|
|
skill_type: 'user',
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const newSkillContent = ref('')
|
|||
|
|
|
|||
|
|
// ============ 方法 ============
|
|||
|
|
|
|||
|
|
// 获取技能列表
|
|||
|
|
const fetchSkills = async (type?: string) => {
|
|||
|
|
skillsLoading.value = true
|
|||
|
|
try {
|
|||
|
|
let url = `${API_BASE}/skill/list`
|
|||
|
|
if (type) {
|
|||
|
|
url += `?type=${type}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const response = await fetch(url)
|
|||
|
|
const result = await response.json()
|
|||
|
|
|
|||
|
|
if (result.list) {
|
|||
|
|
skills.value = result.list.map((skill: any) => ({
|
|||
|
|
id: skill.id,
|
|||
|
|
skill_name: skill.skill_name,
|
|||
|
|
skill_type: skill.skill_type,
|
|||
|
|
skill_desc: skill.skill_desc || '',
|
|||
|
|
path: skill.path || '',
|
|||
|
|
status: skill.status || 'active',
|
|||
|
|
created_at: skill.created_at,
|
|||
|
|
updated_at: skill.updated_at,
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
return result.list || []
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to fetch skills:', error)
|
|||
|
|
return []
|
|||
|
|
} finally {
|
|||
|
|
skillsLoading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新技能
|
|||
|
|
const updateSkill = async (id: string, skill: Partial<Skill>) => {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`${API_BASE}/skill/${id}`, {
|
|||
|
|
method: 'PUT',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify(skill),
|
|||
|
|
})
|
|||
|
|
const data = await response.json()
|
|||
|
|
await fetchSkills()
|
|||
|
|
return data
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to update skill:', error)
|
|||
|
|
throw error
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除技能
|
|||
|
|
const deleteSkill = async (id: string) => {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(`${API_BASE}/skill/${id}`, {
|
|||
|
|
method: 'DELETE',
|
|||
|
|
})
|
|||
|
|
const data = await response.json()
|
|||
|
|
await fetchSkills()
|
|||
|
|
return data
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to delete skill:', error)
|
|||
|
|
throw error
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 筛选
|
|||
|
|
const filteredSkills = computed(() => {
|
|||
|
|
return skills.value.filter(skill => {
|
|||
|
|
const matchSearch = skill.skill_name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
|||
|
|
(skill.skill_desc && skill.skill_desc.toLowerCase().includes(searchQuery.value.toLowerCase()))
|
|||
|
|
const matchStatus = filterStatus.value === 'all' || skill.status === filterStatus.value
|
|||
|
|
return matchSearch && matchStatus
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 打开创建弹窗
|
|||
|
|
const openCreate = () => {
|
|||
|
|
newSkillForm.value = { skill_name: '', skill_desc: '', skill_type: 'user' }
|
|||
|
|
newSkillContent.value = ''
|
|||
|
|
isCreating.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 关闭创建弹窗
|
|||
|
|
const closeCreate = () => {
|
|||
|
|
isCreating.value = false
|
|||
|
|
newSkillContent.value = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 第一步：点击 Next，跳转到编辑内容
|
|||
|
|
const goToEditContent = () => {
|
|||
|
|
if (!newSkillForm.value.skill_name || !newSkillForm.value.skill_desc) {
|
|||
|
|
ElMessage.warning('Please fill in skill name and description')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
newSkillContent.value = `---
|
|||
|
|
name: ${newSkillForm.value.skill_name}
|
|||
|
|
description: ${newSkillForm.value.skill_desc}
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# ${newSkillForm.value.skill_name}
|
|||
|
|
|
|||
|
|
${newSkillForm.value.skill_desc}
|
|||
|
|
`
|
|||
|
|
isCreating.value = false
|
|||
|
|
isEditingContent.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 关闭编辑内容弹窗
|
|||
|
|
const closeEditContent = () => {
|
|||
|
|
isEditingContent.value = false
|
|||
|
|
newSkillContent.value = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 第二步：保存技能内容
|
|||
|
|
const saveNewSkill = async () => {
|
|||
|
|
try {
|
|||
|
|
const blob = new Blob([newSkillContent.value], { type: 'text/markdown' })
|
|||
|
|
const file = new File([blob], 'SKILL.md', { type: 'text/markdown' })
|
|||
|
|
|
|||
|
|
const formData = new FormData()
|
|||
|
|
formData.append('skill_name', newSkillForm.value.skill_name)
|
|||
|
|
formData.append('skill_desc', newSkillForm.value.skill_desc)
|
|||
|
|
formData.append('skill_type', newSkillForm.value.skill_type)
|
|||
|
|
formData.append('file', file)
|
|||
|
|
|
|||
|
|
const response = await fetch(`${API_BASE}/skill/add`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
body: formData,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const data = await response.json()
|
|||
|
|
if (response.ok) {
|
|||
|
|
ElMessage.success('Skill created successfully')
|
|||
|
|
isEditingContent.value = false
|
|||
|
|
newSkillContent.value = ''
|
|||
|
|
await fetchSkills()
|
|||
|
|
} else {
|
|||
|
|
ElMessage.error(data.error || 'Failed to create skill')
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to create skill:', error)
|
|||
|
|
ElMessage.error('Failed to create skill')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 打开编辑弹窗
|
|||
|
|
const openEdit = (skill: Skill) => {
|
|||
|
|
editingSkill.value = skill
|
|||
|
|
editForm.value = {
|
|||
|
|
skill_name: skill.skill_name,
|
|||
|
|
skill_desc: skill.skill_desc,
|
|||
|
|
skill_type: skill.skill_type,
|
|||
|
|
}
|
|||
|
|
isEditing.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 关闭编辑弹窗
|
|||
|
|
const closeEdit = () => {
|
|||
|
|
isEditing.value = false
|
|||
|
|
editingSkill.value = null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存编辑
|
|||
|
|
const saveEdit = async () => {
|
|||
|
|
try {
|
|||
|
|
await updateSkill(editingSkill.value!.id, {
|
|||
|
|
skill_name: editForm.value.skill_name,
|
|||
|
|
skill_desc: editForm.value.skill_desc,
|
|||
|
|
skill_type: editForm.value.skill_type,
|
|||
|
|
})
|
|||
|
|
ElMessage.success('Skill updated successfully')
|
|||
|
|
isEditing.value = false
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('Failed to update skill')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 切换状态
|
|||
|
|
const toggleStatus = async (skill: Skill) => {
|
|||
|
|
const newStatus = skill.status === 'active' ? 'inactive' : 'active'
|
|||
|
|
try {
|
|||
|
|
await updateSkill(skill.id, { status: newStatus })
|
|||
|
|
skill.status = newStatus
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('Failed to update status')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除技能（带确认）
|
|||
|
|
const handleDeleteSkill = async (id: string) => {
|
|||
|
|
try {
|
|||
|
|
await ElMessageBox.confirm('Are you sure you want to delete this skill?', 'Confirm Delete', {
|
|||
|
|
confirmButtonText: 'Delete',
|
|||
|
|
cancelButtonText: 'Cancel',
|
|||
|
|
type: 'warning',
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
await deleteSkill(id)
|
|||
|
|
ElMessage.success('Skill deleted successfully')
|
|||
|
|
} catch (error: any) {
|
|||
|
|
if (error !== 'cancel') {
|
|||
|
|
console.error('Failed to delete skill:', error)
|
|||
|
|
ElMessage.error('Failed to delete skill')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============ 导入相关方法 ============
|
|||
|
|
|
|||
|
|
// 打开导入弹窗
|
|||
|
|
const openImportDialog = () => {
|
|||
|
|
showDropdown.value = false
|
|||
|
|
isImportingDialog.value = true
|
|||
|
|
importFile.value = null
|
|||
|
|
importFileName.value = ''
|
|||
|
|
importSkillName.value = ''
|
|||
|
|
importSkillDesc.value = ''
|
|||
|
|
importSkillContent.value = ''
|
|||
|
|
isImportStep2.value = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 关闭导入弹窗
|
|||
|
|
const closeImportDialog = () => {
|
|||
|
|
isImportingDialog.value = false
|
|||
|
|
importFile.value = null
|
|||
|
|
importFileName.value = ''
|
|||
|
|
isImportStep2.value = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 解析 SKILL.md 内容
|
|||
|
|
const parseSkillContent = (content: string, fallbackName: string) => {
|
|||
|
|
let skillName = ''
|
|||
|
|
let skillDesc = ''
|
|||
|
|
const trimmedContent = content.trim()
|
|||
|
|
|
|||
|
|
if (trimmedContent.startsWith('---')) {
|
|||
|
|
const endIndex = trimmedContent.indexOf('---', 3)
|
|||
|
|
if (endIndex > 3) {
|
|||
|
|
const yamlContent = trimmedContent.substring(3, endIndex).trim()
|
|||
|
|
const nameMatch = yamlContent.match(/name:\s*(.+)/)
|
|||
|
|
const descMatch = yamlContent.match(/description:\s*(.+)/)
|
|||
|
|
skillName = nameMatch ? nameMatch[1].trim() : fallbackName
|
|||
|
|
skillDesc = descMatch ? descMatch[1].trim() : ''
|
|||
|
|
|
|||
|
|
const afterYaml = trimmedContent.substring(endIndex + 3).trim()
|
|||
|
|
if (afterYaml && !skillDesc) {
|
|||
|
|
skillDesc = afterYaml
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!skillName) {
|
|||
|
|
const lines = trimmedContent.split('\n')
|
|||
|
|
skillName = lines[0]?.replace(/^#\s*/, '').trim() || fallbackName
|
|||
|
|
skillDesc = lines.slice(1).join('\n').trim()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return { skillName, skillDesc }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理文件选择
|
|||
|
|
const handleFileChange = async (event: Event) => {
|
|||
|
|
const input = event.target as HTMLInputElement
|
|||
|
|
if (!input.files || input.files.length === 0) return
|
|||
|
|
|
|||
|
|
const file = input.files[0]
|
|||
|
|
importFile.value = file
|
|||
|
|
importFileName.value = file.name
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const content = await file.text()
|
|||
|
|
const { skillName, skillDesc } = parseSkillContent(content, file.name.replace('.md', ''))
|
|||
|
|
|
|||
|
|
importSkillName.value = skillName
|
|||
|
|
importSkillDesc.value = skillDesc
|
|||
|
|
importSkillContent.value = content
|
|||
|
|
isImportStep2.value = true
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to read file:', error)
|
|||
|
|
ElMessage.error('读取文件失败')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input.value = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提交导入
|
|||
|
|
const submitImport = async () => {
|
|||
|
|
if (!importSkillName.value || !importSkillContent.value) {
|
|||
|
|
ElMessage.warning('请选择有效的技能文件')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
isImporting.value = true
|
|||
|
|
try {
|
|||
|
|
const blob = new Blob([importSkillContent.value], { type: 'text/markdown' })
|
|||
|
|
const file = new File([blob], 'SKILL.md', { type: 'text/markdown' })
|
|||
|
|
|
|||
|
|
const formData = new FormData()
|
|||
|
|
formData.append('skill_name', importSkillName.value)
|
|||
|
|
formData.append('skill_desc', importSkillDesc.value)
|
|||
|
|
formData.append('file', file)
|
|||
|
|
|
|||
|
|
const response = await fetch(`${API_BASE}/skill/add`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
body: formData
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
ElMessage.success(`Skill imported: ${importSkillName.value}`)
|
|||
|
|
await fetchSkills()
|
|||
|
|
closeImportDialog()
|
|||
|
|
} else {
|
|||
|
|
const err = await response.json()
|
|||
|
|
ElMessage.error(err.message || '导入失败')
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Import failed:', error)
|
|||
|
|
ElMessage.error('导入失败，请检查文件格式是否正确')
|
|||
|
|
} finally {
|
|||
|
|
isImporting.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理文件夹选择
|
|||
|
|
const handleFolderSelect = async (event: Event) => {
|
|||
|
|
const input = event.target as HTMLInputElement
|
|||
|
|
const files = input.files
|
|||
|
|
|
|||
|
|
if (!files || files.length === 0) return
|
|||
|
|
|
|||
|
|
isImporting.value = true
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const folder = files[0].webkitRelativePath?.split('/')[0] || files[0].name
|
|||
|
|
|
|||
|
|
// 查找 SKILL.md 文件
|
|||
|
|
let skillMdFile: File | null = null
|
|||
|
|
for (let i = 0; i < files.length; i++) {
|
|||
|
|
const file = files[i]
|
|||
|
|
if (file.name === 'SKILL.md' || file.webkitRelativePath?.endsWith('/SKILL.md')) {
|
|||
|
|
skillMdFile = file
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!skillMdFile) {
|
|||
|
|
ElMessage.error('导入失败：所选文件夹中未找到 SKILL.md 文件')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const content = await skillMdFile.text()
|
|||
|
|
const { skillName, skillDesc } = parseSkillContent(content, folder)
|
|||
|
|
|
|||
|
|
// 使用导入弹窗显示内容
|
|||
|
|
importSkillName.value = skillName
|
|||
|
|
importSkillDesc.value = skillDesc
|
|||
|
|
importSkillContent.value = content
|
|||
|
|
isImportingDialog.value = true
|
|||
|
|
isImportStep2.value = true
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Import failed:', error)
|
|||
|
|
ElMessage.error('导入失败，请检查文件夹格式是否正确')
|
|||
|
|
} finally {
|
|||
|
|
isImporting.value = false
|
|||
|
|
input.value = ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 鼠标进入时显示
|
|||
|
|
const onDropdownEnter = () => {
|
|||
|
|
if (dropdownTimeout.value) {
|
|||
|
|
clearTimeout(dropdownTimeout.value)
|
|||
|
|
dropdownTimeout.value = null
|
|||
|
|
}
|
|||
|
|
showDropdown.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 鼠标离开时延迟隐藏
|
|||
|
|
const onDropdownLeave = () => {
|
|||
|
|
dropdownTimeout.value = window.setTimeout(() => {
|
|||
|
|
showDropdown.value = false
|
|||
|
|
}, 300)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============ 返回 ============
|
|||
|
|
return {
|
|||
|
|
// State
|
|||
|
|
skills,
|
|||
|
|
skillsLoading,
|
|||
|
|
searchQuery,
|
|||
|
|
filterStatus,
|
|||
|
|
isEditing,
|
|||
|
|
isCreating,
|
|||
|
|
isEditingContent,
|
|||
|
|
editingSkill,
|
|||
|
|
editForm,
|
|||
|
|
newSkillForm,
|
|||
|
|
newSkillContent,
|
|||
|
|
// Computed
|
|||
|
|
filteredSkills,
|
|||
|
|
// Methods
|
|||
|
|
fetchSkills,
|
|||
|
|
openCreate,
|
|||
|
|
closeCreate,
|
|||
|
|
goToEditContent,
|
|||
|
|
closeEditContent,
|
|||
|
|
saveNewSkill,
|
|||
|
|
openEdit,
|
|||
|
|
closeEdit,
|
|||
|
|
saveEdit,
|
|||
|
|
toggleStatus,
|
|||
|
|
deleteSkill: handleDeleteSkill,
|
|||
|
|
// 导入相关
|
|||
|
|
fileInputRef,
|
|||
|
|
isImporting,
|
|||
|
|
isImportingDialog,
|
|||
|
|
importFileName,
|
|||
|
|
importSkillName,
|
|||
|
|
importSkillDesc,
|
|||
|
|
importSkillContent,
|
|||
|
|
isImportStep2,
|
|||
|
|
openImportDialog,
|
|||
|
|
closeImportDialog,
|
|||
|
|
handleFileChange,
|
|||
|
|
submitImport,
|
|||
|
|
handleFolderSelect,
|
|||
|
|
// 下拉菜单
|
|||
|
|
showDropdown,
|
|||
|
|
dropdownTimeout,
|
|||
|
|
onDropdownEnter,
|
|||
|
|
onDropdownLeave,
|
|||
|
|
}
|
|||
|
|
}
|