feat: 更新skill前端页面 - 新增编辑功能
- skill.ts: 新增编辑弹窗第二步、获取skill内容功能 - Skill.vue: 更新skill编辑界面 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -40,8 +40,9 @@ export function useSkills() {
|
||||
|
||||
// 编辑状态
|
||||
const isEditing = ref(false)
|
||||
const isEditingContent = ref(false) // 创建弹窗的第二步
|
||||
const isEditingStep2 = ref(false) // 编辑弹窗的第二步
|
||||
const isCreating = ref(false)
|
||||
const isEditingContent = ref(false)
|
||||
const editingSkill = ref<Skill | null>(null)
|
||||
|
||||
// 表单
|
||||
@@ -58,6 +59,7 @@ export function useSkills() {
|
||||
})
|
||||
|
||||
const newSkillContent = ref('')
|
||||
const editSkillContent = ref('') // 编辑弹窗第二步的 SKILL.md 内容
|
||||
|
||||
// ============ 方法 ============
|
||||
|
||||
@@ -206,38 +208,152 @@ ${newSkillForm.value.skill_desc}
|
||||
}
|
||||
}
|
||||
|
||||
// 打开编辑弹窗
|
||||
const openEdit = (skill: Skill) => {
|
||||
// 打开编辑弹窗（第一步）
|
||||
const openEdit = async (skill: Skill) => {
|
||||
editingSkill.value = skill
|
||||
editForm.value = {
|
||||
skill_name: skill.skill_name,
|
||||
skill_desc: skill.skill_desc,
|
||||
skill_type: skill.skill_type,
|
||||
}
|
||||
|
||||
// 读取现有的 SKILL.md 内容
|
||||
console.log('Opening edit for skill:', skill)
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/skill/content?id=${skill.id}`)
|
||||
console.log('Content API response:', response.status, response.statusText)
|
||||
if (response.ok) {
|
||||
const text = await response.text()
|
||||
console.log('Skill content:', text.substring(0, 100))
|
||||
editSkillContent.value = text
|
||||
} else {
|
||||
// API 返回 404 说明文件不存在，生成默认内容
|
||||
console.log('File not found, using default content')
|
||||
editSkillContent.value = `---
|
||||
name: ${skill.skill_name}
|
||||
description: ${skill.skill_desc || 'A custom skill'}
|
||||
category: ${skill.skill_type || 'user'}
|
||||
---
|
||||
|
||||
# ${skill.skill_name}
|
||||
|
||||
${skill.skill_desc || 'A custom skill'}
|
||||
|
||||
## Instructions
|
||||
|
||||
Describe what this skill does and how it works.
|
||||
|
||||
## Tools
|
||||
|
||||
List the tools this skill can use:
|
||||
|
||||
-
|
||||
|
||||
## Examples
|
||||
|
||||
Provide some examples of how to use this skill:
|
||||
|
||||
\`\`\`
|
||||
Example 1:
|
||||
\`\`\`
|
||||
`
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error getting skill content:', error)
|
||||
// 网络错误也使用默认内容
|
||||
editSkillContent.value = `---
|
||||
name: ${skill.skill_name}
|
||||
description: ${skill.skill_desc || 'A custom skill'}
|
||||
category: ${skill.skill_type || 'user'}
|
||||
---
|
||||
|
||||
# ${skill.skill_name}
|
||||
|
||||
${skill.skill_desc || 'A custom skill'}
|
||||
|
||||
## Instructions
|
||||
|
||||
Describe what this skill does and how it works.
|
||||
|
||||
## Tools
|
||||
|
||||
List the tools this skill can use:
|
||||
|
||||
-
|
||||
|
||||
## Examples
|
||||
|
||||
Provide some examples of how to use this skill:
|
||||
|
||||
\`\`\`
|
||||
Example 1:
|
||||
\`\`\`
|
||||
`
|
||||
}
|
||||
|
||||
isEditing.value = true
|
||||
}
|
||||
|
||||
// 关闭编辑弹窗
|
||||
const closeEdit = () => {
|
||||
isEditing.value = false
|
||||
isEditingStep2.value = false
|
||||
editingSkill.value = null
|
||||
editSkillContent.value = ''
|
||||
}
|
||||
|
||||
// 保存编辑
|
||||
const saveEdit = async () => {
|
||||
// 编辑第一步：点击 Next，跳转到编辑内容
|
||||
const goToEditStep2 = () => {
|
||||
if (!editForm.value.skill_name || !editForm.value.skill_desc) {
|
||||
ElMessage.warning('Please fill in skill name and description')
|
||||
return
|
||||
}
|
||||
isEditing.value = false
|
||||
isEditingStep2.value = true
|
||||
}
|
||||
|
||||
// 编辑第二步：保存
|
||||
const saveEditStep2 = async () => {
|
||||
if (!editingSkill.value) return
|
||||
|
||||
try {
|
||||
await updateSkill(editingSkill.value!.id, {
|
||||
skill_name: editForm.value.skill_name,
|
||||
skill_desc: editForm.value.skill_desc,
|
||||
skill_type: editForm.value.skill_type,
|
||||
// 将内容转换为文件上传
|
||||
const blob = new Blob([editSkillContent.value], { type: 'text/markdown' })
|
||||
const file = new File([blob], 'SKILL.md', { type: 'text/markdown' })
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append('skill_name', editForm.value.skill_name)
|
||||
formData.append('skill_desc', editForm.value.skill_desc)
|
||||
formData.append('skill_type', editForm.value.skill_type)
|
||||
formData.append('file', file)
|
||||
|
||||
const response = await fetch(`${API_BASE}/skill/${editingSkill.value.id}`, {
|
||||
method: 'PUT',
|
||||
body: formData,
|
||||
})
|
||||
ElMessage.success('Skill updated successfully')
|
||||
isEditing.value = false
|
||||
|
||||
if (response.ok) {
|
||||
ElMessage.success('Skill updated successfully')
|
||||
await fetchSkills()
|
||||
isEditingStep2.value = false
|
||||
editingSkill.value = null
|
||||
editSkillContent.value = ''
|
||||
} else {
|
||||
const data = await response.json()
|
||||
ElMessage.error(data.error || 'Failed to update skill')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to update skill:', error)
|
||||
ElMessage.error('Failed to update skill')
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭编辑第二步弹窗
|
||||
const closeEditStep2 = () => {
|
||||
isEditingStep2.value = false
|
||||
isEditing.value = true
|
||||
}
|
||||
|
||||
// 切换状态
|
||||
const toggleStatus = async (skill: Skill) => {
|
||||
const newStatus = skill.status === 'active' ? 'inactive' : 'active'
|
||||
@@ -384,7 +500,7 @@ ${newSkillForm.value.skill_desc}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理文件夹选择
|
||||
// 处理文件选择（单个 SKILL.md 文件）
|
||||
const handleFolderSelect = async (event: Event) => {
|
||||
const input = event.target as HTMLInputElement
|
||||
const files = input.files
|
||||
@@ -394,25 +510,13 @@ ${newSkillForm.value.skill_desc}
|
||||
isImporting.value = true
|
||||
|
||||
try {
|
||||
const folder = files[0].webkitRelativePath?.split('/')[0] || files[0].name
|
||||
const file = files[0]
|
||||
|
||||
// 查找 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
|
||||
}
|
||||
}
|
||||
// 读取文件内容
|
||||
const content = await file.text()
|
||||
const fileName = file.name.replace('.md', '')
|
||||
|
||||
if (!skillMdFile) {
|
||||
ElMessage.error('导入失败：所选文件夹中未找到 SKILL.md 文件')
|
||||
return
|
||||
}
|
||||
|
||||
const content = await skillMdFile.text()
|
||||
const { skillName, skillDesc } = parseSkillContent(content, folder)
|
||||
const { skillName, skillDesc } = parseSkillContent(content, fileName)
|
||||
|
||||
// 使用导入弹窗显示内容
|
||||
importSkillName.value = skillName
|
||||
@@ -422,7 +526,7 @@ ${newSkillForm.value.skill_desc}
|
||||
isImportStep2.value = true
|
||||
} catch (error) {
|
||||
console.error('Import failed:', error)
|
||||
ElMessage.error('导入失败，请检查文件夹格式是否正确')
|
||||
ElMessage.error('导入失败，请检查文件格式是否正确')
|
||||
} finally {
|
||||
isImporting.value = false
|
||||
input.value = ''
|
||||
@@ -453,12 +557,14 @@ ${newSkillForm.value.skill_desc}
|
||||
searchQuery,
|
||||
filterStatus,
|
||||
isEditing,
|
||||
isEditingStep2,
|
||||
isCreating,
|
||||
isEditingContent,
|
||||
editingSkill,
|
||||
editForm,
|
||||
newSkillForm,
|
||||
newSkillContent,
|
||||
editSkillContent,
|
||||
// Computed
|
||||
filteredSkills,
|
||||
// Methods
|
||||
@@ -470,7 +576,9 @@ ${newSkillForm.value.skill_desc}
|
||||
saveNewSkill,
|
||||
openEdit,
|
||||
closeEdit,
|
||||
saveEdit,
|
||||
goToEditStep2,
|
||||
saveEditStep2,
|
||||
closeEditStep2,
|
||||
toggleStatus,
|
||||
deleteSkill: handleDeleteSkill,
|
||||
// 导入相关
|
||||
|
||||
Reference in New Issue
Block a user