优化: ToolCardList 批量审批+全局收起合并同行(UX-260616-02)+销账 UX-01/B-260617-15

This commit is contained in:
2026-06-17 19:25:39 +08:00
parent ecff4cc23d
commit 36cde88b80
2 changed files with 28 additions and 16 deletions

View File

@@ -1,19 +1,22 @@
<template>
<div class="ai-tool-calls" ref="rootEl">
<!-- 批量操作栏存在待审批项时显示 -->
<div v-if="pendingCount > 0" class="ai-batch-approve">
<button class="ai-btn ai-btn--sm" @click="$emit('batch-approve', 'approve')">
{{ $t('aiTool.approveAll', { n: pendingCount }) }}
</button>
<button class="ai-btn ai-btn--sm ai-btn--danger" @click="$emit('batch-approve', 'reject')">
{{ $t('aiTool.rejectAll') }}
</button>
</div>
<!-- 顶部操作栏批量审批 + 全局收起合并同行(UX-260616-02,减少垂直空间占用) -->
<div v-if="pendingCount > 0 || collapsibleGroupCount > 0" class="ai-tool-topbar">
<!-- 批量操作栏存在待审批项时显示 -->
<div v-if="pendingCount > 0" class="ai-batch-approve">
<button class="ai-btn ai-btn--sm" @click="$emit('batch-approve', 'approve')">
{{ $t('aiTool.approveAll', { n: pendingCount }) }}
</button>
<button class="ai-btn ai-btn--sm ai-btn--danger" @click="$emit('batch-approve', 'reject')">
{{ $t('aiTool.rejectAll') }}
</button>
</div>
<!-- 全部展开 / 全部收起仅当存在可折叠分组时显示 -->
<div v-if="collapsibleGroupCount > 0" class="ai-tool-global-toggle" @click="toggleAllGroups">
<span class="ai-tool-global-toggle-icon">{{ allGroupsExpanded ? '▾' : '▸' }}</span>
<span>{{ allGroupsExpanded ? $t('aiTool.collapseAll') : $t('aiTool.expandAll') }}</span>
<!-- 全部展开 / 全部收起仅当存在可折叠分组时显示推到行尾右对齐 -->
<div v-if="collapsibleGroupCount > 0" class="ai-tool-global-toggle" @click="toggleAllGroups">
<span class="ai-tool-global-toggle-icon">{{ allGroupsExpanded ? '▾' : '▸' }}</span>
<span>{{ allGroupsExpanded ? $t('aiTool.collapseAll') : $t('aiTool.expandAll') }}</span>
</div>
</div>
<template v-for="(group, gi) in groupedToolCalls" :key="group.name">
@@ -290,6 +293,13 @@ function groupIcon(name: string): string {
gap: 8px;
}
/* -- 顶部操作栏:批量审批 + 全局收起合并同行(UX-260616-02) -- */
.ai-tool-topbar {
display: flex;
align-items: center;
gap: 8px;
}
/* -- 批量操作栏 -- */
.ai-batch-approve {
display: flex;
@@ -316,6 +326,8 @@ function groupIcon(name: string): string {
border-radius: var(--df-radius-sm);
transition: background 0.15s var(--df-ease);
width: fit-content;
/* UX-260616-02: 合并同行时推到行尾右对齐(batch-approve 在左,收起在右) */
margin-left: auto;
}
.ai-tool-global-toggle:hover {
background: rgba(255,255,255,0.03);