refine: 缓存的 AI 摘要默认折叠,点击展开

- aiExpanded ref: 缓存加载=false, 新生成=true
- 标题栏可点击切换折叠/展开
- 折叠态显示 ▶ + '点击展开' 提示
- 展开态显示 ▼ + 复制按钮
- 卡片边框折叠时降为 warm-border
This commit is contained in:
2026-06-25 12:05:33 +08:00
parent 5b38246801
commit ce94c6b2ba
+22 -7
View File
@@ -18,6 +18,7 @@ const aiSummary = ref('')
const aiError = ref('')
const aiCached = ref(false)
const aiCreatedAt = ref('')
const aiExpanded = ref(false)
const activeTab = ref('visits')
const filterManagerId = ref('')
const filterCustomerId = ref('')
@@ -125,6 +126,7 @@ async function generateAISummary() {
aiSummary.value = res.data.summary
aiCached.value = !!res.data.cached
aiCreatedAt.value = res.data.created_at || ''
aiExpanded.value = true
} catch (e: any) {
const detail = e.response?.data?.detail || 'AI 摘要生成失败,请检查 AI 服务配置或稍后重试'
aiError.value = detail
@@ -253,26 +255,29 @@ const notesByDate = computed(() => {
</el-card>
<!-- AI Summary Panel -->
<el-card v-if="aiSummary || aiLoading || aiError" class="ai-summary-card">
<el-card v-if="aiSummary || aiLoading || aiError" class="ai-summary-card" :class="{ 'ai-summary-card--collapsed': !aiExpanded && aiSummary }">
<template #header>
<div class="ai-header">
<div class="ai-header" @click="aiSummary && (aiExpanded = !aiExpanded)" :style="aiSummary ? 'cursor:pointer' : ''">
<div class="ai-header-left">
<span v-if="aiSummary" class="ai-expand-arrow">{{ aiExpanded ? '' : '' }}</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--gold); margin-right:6px">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
<span class="ai-header-title">AI 周报摘要</span>
<span v-if="aiCached && aiCreatedAt" class="ai-header-hint">生成于 {{ new Date(aiCreatedAt).toLocaleString('zh-CN') }} · 已缓存</span>
<span v-if="aiSummary && !aiExpanded && aiCached" class="ai-header-hint">生成于 {{ new Date(aiCreatedAt).toLocaleString('zh-CN') }} · 已缓存 · 点击展开</span>
<span v-else-if="aiSummary && aiExpanded && aiCached && aiCreatedAt" class="ai-header-hint">生成于 {{ new Date(aiCreatedAt).toLocaleString('zh-CN') }} · 已缓存</span>
<span v-else-if="aiLoading" class="ai-header-hint">正在分析...</span>
<span v-else class="ai-header-hint">基于本周拜访数据自动生成仅供参考</span>
</div>
<div class="ai-header-actions">
<el-button v-if="aiSummary" size="small" text @click="copySummary">
<div class="ai-header-actions" @click.stop>
<el-button v-if="aiSummary && aiExpanded" size="small" text @click="copySummary">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:3px">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
复制
</el-button>
<el-button size="small" text @click="aiSummary = ''; aiError = ''">
<el-button size="small" text @click="aiSummary = ''; aiError = ''; aiExpanded = false">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
@@ -287,7 +292,7 @@ const notesByDate = computed(() => {
<div v-else-if="aiError" class="ai-error">
{{ aiError }}
</div>
<div v-else class="ai-content" v-html="renderMarkdown(aiSummary)"></div>
<div v-else-if="aiExpanded" class="ai-content" v-html="renderMarkdown(aiSummary)"></div>
</el-card>
<!-- Tabs -->
@@ -402,9 +407,19 @@ const notesByDate = computed(() => {
.ai-summary-card {
margin-bottom: 16px;
border-color: var(--gold);
transition: border-color 0.2s;
}
.ai-summary-card--collapsed {
border-color: var(--warm-border);
}
.ai-header {
display: flex; justify-content: space-between; align-items: center;
user-select: none;
}
.ai-expand-arrow {
font-size: 10px; color: var(--gold);
width: 14px; flex-shrink: 0;
transition: transform 0.2s;
}
.ai-header-left {
display: flex; align-items: center;