refine: 缓存的 AI 摘要默认折叠,点击展开
- aiExpanded ref: 缓存加载=false, 新生成=true - 标题栏可点击切换折叠/展开 - 折叠态显示 ▶ + '点击展开' 提示 - 展开态显示 ▼ + 复制按钮 - 卡片边框折叠时降为 warm-border
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user