feat: 添加层级分析结果页面删除选中组件功能

- 在HierarchyAnalysisResult组件中集成删除选中组件功能
- 复用现有的creoApi.deleteComponentsByPath API
- 遵循系统钩子机制,通知由apiClient自动处理
- 添加删除按钮到底部操作区域,使用现有action-btn样式
- 实现选中状态清理和用户确认对话框

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
sladro 2025-09-21 09:14:11 +08:00
parent ad1d4fe2a1
commit 4f1666e7d2

View File

@ -169,10 +169,20 @@
<div class="operation-info">
<span>完成层级分析可以继续进行删除配置</span>
</div>
<button class="continue-btn primary" @click="continueToDeleteConfig">
<i class="fas fa-arrow-right"></i>
<span>继续层级删除配置</span>
</button>
<div class="operation-buttons">
<button
class="action-btn danger"
@click="deleteSelectedComponents"
:disabled="selectedComponents.size === 0"
>
<i class="fas fa-trash"></i>
<span>删除选中组件 ({{ selectedComponents.size }})</span>
</button>
<button class="continue-btn primary" @click="continueToDeleteConfig">
<i class="fas fa-arrow-right"></i>
<span>继续层级删除配置</span>
</button>
</div>
</div>
</div>
</div>
@ -181,6 +191,8 @@
<script setup>
import { ref, computed } from 'vue'
import { creoApi } from '@/services/creoApi'
import { ElMessageBox } from 'element-plus'
const props = defineProps({
analysisData: {
@ -356,6 +368,34 @@ const exportResults = () => {
const continueToDeleteConfig = () => {
emit('show-hierarchy-deletion-params')
}
const deleteSelectedComponents = async () => {
if (selectedComponents.value.size === 0) {
return
}
await ElMessageBox.confirm(
`确定要删除选中的 ${selectedComponents.value.size} 个组件吗?此操作不可撤销。`,
'删除确认',
{
type: 'warning',
confirmButtonText: '确定删除',
cancelButtonText: '取消'
}
)
//
const componentPaths = Array.from(selectedComponents.value)
.map(id => hierarchyData.value.find(c => c.id === id)?.path)
.filter(Boolean)
// APIapiClient
const result = await creoApi.deleteComponentsByPath(componentPaths)
if (result.success) {
//
selectedComponents.value.clear()
}
}
</script>
<style scoped>
@ -499,6 +539,23 @@ const continueToDeleteConfig = () => {
opacity: 0.9;
}
.action-btn.danger {
background: var(--color-error);
color: var(--color-text-primary);
border-color: transparent;
}
.action-btn.danger:hover:not(:disabled) {
background: #d73757;
opacity: 0.9;
}
.action-btn.danger:disabled {
background: var(--color-text-secondary);
cursor: not-allowed;
opacity: 0.5;
}
/* 层级内容区域 */
.hierarchy-content {
display: flex;
@ -907,6 +964,12 @@ const continueToDeleteConfig = () => {
align-items: center;
}
.operation-buttons {
display: flex;
gap: var(--spacing-md);
align-items: center;
}
.operation-info {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);