refine: 缓存的 AI 摘要默认折叠,点击展开
- aiExpanded ref: 缓存加载=false, 新生成=true - 标题栏可点击切换折叠/展开 - 折叠态显示 ▶ + '点击展开' 提示 - 展开态显示 ▼ + 复制按钮 - 卡片边框折叠时降为 warm-border
This commit is contained in:
@@ -18,6 +18,7 @@ const aiSummary = ref('')
|
|||||||
const aiError = ref('')
|
const aiError = ref('')
|
||||||
const aiCached = ref(false)
|
const aiCached = ref(false)
|
||||||
const aiCreatedAt = ref('')
|
const aiCreatedAt = ref('')
|
||||||
|
const aiExpanded = ref(false)
|
||||||
const activeTab = ref('visits')
|
const activeTab = ref('visits')
|
||||||
const filterManagerId = ref('')
|
const filterManagerId = ref('')
|
||||||
const filterCustomerId = ref('')
|
const filterCustomerId = ref('')
|
||||||
@@ -125,6 +126,7 @@ async function generateAISummary() {
|
|||||||
aiSummary.value = res.data.summary
|
aiSummary.value = res.data.summary
|
||||||
aiCached.value = !!res.data.cached
|
aiCached.value = !!res.data.cached
|
||||||
aiCreatedAt.value = res.data.created_at || ''
|
aiCreatedAt.value = res.data.created_at || ''
|
||||||
|
aiExpanded.value = true
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
const detail = e.response?.data?.detail || 'AI 摘要生成失败,请检查 AI 服务配置或稍后重试'
|
const detail = e.response?.data?.detail || 'AI 摘要生成失败,请检查 AI 服务配置或稍后重试'
|
||||||
aiError.value = detail
|
aiError.value = detail
|
||||||
@@ -253,26 +255,29 @@ const notesByDate = computed(() => {
|
|||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
<!-- ═══ AI Summary Panel ═══ -->
|
<!-- ═══ 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>
|
<template #header>
|
||||||
<div class="ai-header">
|
<div class="ai-header" @click="aiSummary && (aiExpanded = !aiExpanded)" :style="aiSummary ? 'cursor:pointer' : ''">
|
||||||
<div class="ai-header-left">
|
<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">
|
<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>
|
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
|
||||||
</svg>
|
</svg>
|
||||||
<span class="ai-header-title">AI 周报摘要</span>
|
<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>
|
<span v-else class="ai-header-hint">基于本周拜访数据自动生成,仅供参考</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="ai-header-actions">
|
<div class="ai-header-actions" @click.stop>
|
||||||
<el-button v-if="aiSummary" size="small" text @click="copySummary">
|
<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">
|
<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>
|
<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>
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||||
</svg>
|
</svg>
|
||||||
复制
|
复制
|
||||||
</el-button>
|
</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">
|
<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="18" y1="6" x2="6" y2="18"></line>
|
||||||
<line x1="6" y1="6" x2="18" 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">
|
<div v-else-if="aiError" class="ai-error">
|
||||||
{{ aiError }}
|
{{ aiError }}
|
||||||
</div>
|
</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>
|
</el-card>
|
||||||
|
|
||||||
<!-- Tabs -->
|
<!-- Tabs -->
|
||||||
@@ -402,9 +407,19 @@ const notesByDate = computed(() => {
|
|||||||
.ai-summary-card {
|
.ai-summary-card {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
border-color: var(--gold);
|
border-color: var(--gold);
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
.ai-summary-card--collapsed {
|
||||||
|
border-color: var(--warm-border);
|
||||||
}
|
}
|
||||||
.ai-header {
|
.ai-header {
|
||||||
display: flex; justify-content: space-between; align-items: center;
|
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 {
|
.ai-header-left {
|
||||||
display: flex; align-items: center;
|
display: flex; align-items: center;
|
||||||
|
|||||||
Reference in New Issue
Block a user