fix: 修复 Skills 面板无法展开的问题
This commit is contained in:
Wenjie Zhang
parent
417b1de308
commit
bfd5170531
@ -65,168 +65,166 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="detail-content-wrapper">
|
<div class="detail-content-wrapper">
|
||||||
<a-spin :spinning="loading">
|
<div v-if="currentSkill" class="detail-content-inner">
|
||||||
<div v-if="currentSkill" class="detail-content-inner">
|
<div v-if="!isInstalledSkill" class="builtin-uninstalled-state">
|
||||||
<div v-if="!isInstalledSkill" class="builtin-uninstalled-state">
|
<h3>{{ currentSkill.description }}</h3>
|
||||||
<h3>{{ currentSkill.description }}</h3>
|
<p>版本 {{ currentSkill.version }}</p>
|
||||||
<p>版本 {{ currentSkill.version }}</p>
|
<a-button type="primary" @click="handleInstallBuiltin(currentSkill)"
|
||||||
<a-button type="primary" @click="handleInstallBuiltin(currentSkill)"
|
>安装内置 Skill</a-button
|
||||||
>安装内置 Skill</a-button
|
>
|
||||||
>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<a-tabs v-else v-model:activeKey="activeTab" class="minimal-tabs">
|
<a-tabs v-else v-model:activeKey="activeTab" class="minimal-tabs">
|
||||||
<a-tab-pane key="editor">
|
<a-tab-pane key="editor">
|
||||||
<template #tab>
|
<template #tab>
|
||||||
<span class="tab-title"><FileText :size="14" />代码管理</span>
|
<span class="tab-title"><FileText :size="14" />代码管理</span>
|
||||||
</template>
|
</template>
|
||||||
<div class="workspace">
|
<div class="workspace">
|
||||||
<div class="tree-container">
|
<div class="tree-container">
|
||||||
<div class="tree-header">
|
<div class="tree-header">
|
||||||
<span class="label">项目结构</span>
|
<span class="label">项目结构</span>
|
||||||
<div class="tree-actions">
|
<div class="tree-actions">
|
||||||
<a-tooltip v-if="!isBuiltinInstalledSkill" title="新建文件"
|
<a-tooltip v-if="!isBuiltinInstalledSkill" title="新建文件"
|
||||||
><button @click="openCreateModal(false)"><FilePlus :size="14" /></button
|
><button @click="openCreateModal(false)"><FilePlus :size="14" /></button
|
||||||
></a-tooltip>
|
></a-tooltip>
|
||||||
<a-tooltip v-if="!isBuiltinInstalledSkill" title="新建目录"
|
<a-tooltip v-if="!isBuiltinInstalledSkill" title="新建目录"
|
||||||
><button @click="openCreateModal(true)"><FolderPlus :size="14" /></button
|
><button @click="openCreateModal(true)"><FolderPlus :size="14" /></button
|
||||||
></a-tooltip>
|
></a-tooltip>
|
||||||
<a-tooltip title="刷新"
|
<a-tooltip title="刷新"
|
||||||
><button @click="reloadTree"><RotateCw :size="14" /></button
|
><button @click="reloadTree"><RotateCw :size="14" /></button
|
||||||
></a-tooltip>
|
></a-tooltip>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tree-content">
|
|
||||||
<FileTreeComponent
|
|
||||||
v-model:selectedKeys="selectedTreeKeys"
|
|
||||||
v-model:expandedKeys="expandedKeys"
|
|
||||||
:tree-data="treeData"
|
|
||||||
@select="handleTreeSelect"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="editor-container">
|
<div class="tree-content">
|
||||||
<div class="editor-header">
|
<FileTreeComponent
|
||||||
<div class="current-path">
|
v-model:selectedKeys="selectedTreeKeys"
|
||||||
<File :size="14" />
|
v-model:expandedKeys="expandedKeys"
|
||||||
<span>{{ selectedPath || '未选择文件' }}</span>
|
:tree-data="treeData"
|
||||||
<span v-if="canSave" class="save-hint">●</span>
|
@select="handleTreeSelect"
|
||||||
</div>
|
/>
|
||||||
<div class="header-actions">
|
|
||||||
<a-button
|
|
||||||
v-if="isMarkdownFile && selectedPath"
|
|
||||||
size="small"
|
|
||||||
@click="viewMode = viewMode === 'edit' ? 'preview' : 'edit'"
|
|
||||||
class="lucide-icon-btn view-toggle-btn"
|
|
||||||
:title="viewMode === 'edit' ? '预览' : '编辑'"
|
|
||||||
>
|
|
||||||
<Eye v-if="viewMode === 'edit'" :size="14" />
|
|
||||||
<Edit3 v-else :size="14" />
|
|
||||||
<span>{{ viewMode === 'edit' ? '预览' : '编辑' }}</span>
|
|
||||||
</a-button>
|
|
||||||
<a-button
|
|
||||||
v-if="!isBuiltinInstalledSkill"
|
|
||||||
type="primary"
|
|
||||||
size="small"
|
|
||||||
@click="saveCurrentFile"
|
|
||||||
:disabled="!canSave"
|
|
||||||
:loading="savingFile"
|
|
||||||
class="lucide-icon-btn"
|
|
||||||
>
|
|
||||||
<Save :size="14" />
|
|
||||||
<span>保存</span>
|
|
||||||
</a-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="editor-main">
|
|
||||||
<a-empty
|
|
||||||
v-if="!selectedPath || selectedIsDir"
|
|
||||||
description="选择文件以开始编辑"
|
|
||||||
class="mt-40"
|
|
||||||
/>
|
|
||||||
<template v-else>
|
|
||||||
<MdPreview
|
|
||||||
v-if="viewMode === 'preview'"
|
|
||||||
:modelValue="fileContent"
|
|
||||||
:theme="theme"
|
|
||||||
previewTheme="github"
|
|
||||||
class="markdown-preview flat-md-preview"
|
|
||||||
/>
|
|
||||||
<a-textarea
|
|
||||||
v-else
|
|
||||||
v-model:value="fileContent"
|
|
||||||
class="pure-editor"
|
|
||||||
:readonly="isBuiltinInstalledSkill"
|
|
||||||
spellcheck="false"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-tab-pane>
|
<div class="editor-container">
|
||||||
|
<div class="editor-header">
|
||||||
<a-tab-pane key="dependencies">
|
<div class="current-path">
|
||||||
<template #tab>
|
<File :size="14" />
|
||||||
<span class="tab-title"><Layers :size="14" />依赖管理</span>
|
<span>{{ selectedPath || '未选择文件' }}</span>
|
||||||
</template>
|
<span v-if="canSave" class="save-hint">●</span>
|
||||||
<div class="config-view">
|
</div>
|
||||||
<div class="config-header">
|
<div class="header-actions">
|
||||||
<div class="text">
|
<a-button
|
||||||
<h3>依赖声明</h3>
|
v-if="isMarkdownFile && selectedPath"
|
||||||
<p>配置此 Skill 所需的工具、MCP 及其他 Skill 依赖。</p>
|
size="small"
|
||||||
|
@click="viewMode = viewMode === 'edit' ? 'preview' : 'edit'"
|
||||||
|
class="lucide-icon-btn view-toggle-btn"
|
||||||
|
:title="viewMode === 'edit' ? '预览' : '编辑'"
|
||||||
|
>
|
||||||
|
<Eye v-if="viewMode === 'edit'" :size="14" />
|
||||||
|
<Edit3 v-else :size="14" />
|
||||||
|
<span>{{ viewMode === 'edit' ? '预览' : '编辑' }}</span>
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
v-if="!isBuiltinInstalledSkill"
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
@click="saveCurrentFile"
|
||||||
|
:disabled="!canSave"
|
||||||
|
:loading="savingFile"
|
||||||
|
class="lucide-icon-btn"
|
||||||
|
>
|
||||||
|
<Save :size="14" />
|
||||||
|
<span>保存</span>
|
||||||
|
</a-button>
|
||||||
</div>
|
</div>
|
||||||
<a-button
|
|
||||||
type="primary"
|
|
||||||
:loading="savingDependencies"
|
|
||||||
@click="saveDependencies"
|
|
||||||
class="lucide-icon-btn"
|
|
||||||
>
|
|
||||||
<Save :size="14" />
|
|
||||||
<span>更新依赖</span>
|
|
||||||
</a-button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="config-form">
|
<div class="editor-main">
|
||||||
<a-form layout="vertical">
|
<a-empty
|
||||||
<a-form-item label="工具依赖 (Tools)">
|
v-if="!selectedPath || selectedIsDir"
|
||||||
<a-select
|
description="选择文件以开始编辑"
|
||||||
v-model:value="dependencyForm.tool_dependencies"
|
class="mt-40"
|
||||||
mode="multiple"
|
/>
|
||||||
:options="toolDependencyOptions"
|
<template v-else>
|
||||||
placeholder="选择工具..."
|
<MdPreview
|
||||||
allow-clear
|
v-if="viewMode === 'preview'"
|
||||||
show-search
|
:modelValue="fileContent"
|
||||||
/>
|
:theme="theme"
|
||||||
</a-form-item>
|
previewTheme="github"
|
||||||
<a-form-item label="MCP 依赖 (Model Context Protocol)">
|
class="markdown-preview flat-md-preview"
|
||||||
<a-select
|
/>
|
||||||
v-model:value="dependencyForm.mcp_dependencies"
|
<a-textarea
|
||||||
mode="multiple"
|
v-else
|
||||||
:options="mcpDependencyOptions"
|
v-model:value="fileContent"
|
||||||
placeholder="选择 MCP 服务..."
|
class="pure-editor"
|
||||||
allow-clear
|
:readonly="isBuiltinInstalledSkill"
|
||||||
show-search
|
spellcheck="false"
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</template>
|
||||||
<a-form-item label="Skill 依赖">
|
|
||||||
<a-select
|
|
||||||
v-model:value="dependencyForm.skill_dependencies"
|
|
||||||
mode="multiple"
|
|
||||||
:options="skillDependencyOptions"
|
|
||||||
placeholder="选择 Skill..."
|
|
||||||
allow-clear
|
|
||||||
show-search
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
</a-form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-tab-pane>
|
</div>
|
||||||
</a-tabs>
|
</a-tab-pane>
|
||||||
</div>
|
|
||||||
<div v-else-if="!loading" class="detail-empty">
|
<a-tab-pane key="dependencies">
|
||||||
<a-empty description="未找到 Skill" />
|
<template #tab>
|
||||||
</div>
|
<span class="tab-title"><Layers :size="14" />依赖管理</span>
|
||||||
</a-spin>
|
</template>
|
||||||
|
<div class="config-view">
|
||||||
|
<div class="config-header">
|
||||||
|
<div class="text">
|
||||||
|
<h3>依赖声明</h3>
|
||||||
|
<p>配置此 Skill 所需的工具、MCP 及其他 Skill 依赖。</p>
|
||||||
|
</div>
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
:loading="savingDependencies"
|
||||||
|
@click="saveDependencies"
|
||||||
|
class="lucide-icon-btn"
|
||||||
|
>
|
||||||
|
<Save :size="14" />
|
||||||
|
<span>更新依赖</span>
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="config-form">
|
||||||
|
<a-form layout="vertical">
|
||||||
|
<a-form-item label="工具依赖 (Tools)">
|
||||||
|
<a-select
|
||||||
|
v-model:value="dependencyForm.tool_dependencies"
|
||||||
|
mode="multiple"
|
||||||
|
:options="toolDependencyOptions"
|
||||||
|
placeholder="选择工具..."
|
||||||
|
allow-clear
|
||||||
|
show-search
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="MCP 依赖 (Model Context Protocol)">
|
||||||
|
<a-select
|
||||||
|
v-model:value="dependencyForm.mcp_dependencies"
|
||||||
|
mode="multiple"
|
||||||
|
:options="mcpDependencyOptions"
|
||||||
|
placeholder="选择 MCP 服务..."
|
||||||
|
allow-clear
|
||||||
|
show-search
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="Skill 依赖">
|
||||||
|
<a-select
|
||||||
|
v-model:value="dependencyForm.skill_dependencies"
|
||||||
|
mode="multiple"
|
||||||
|
:options="skillDependencyOptions"
|
||||||
|
placeholder="选择 Skill..."
|
||||||
|
allow-clear
|
||||||
|
show-search
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="!loading" class="detail-empty">
|
||||||
|
<a-empty description="未找到 Skill" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a-modal
|
<a-modal
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user