v6ole/qiji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 列宽拖拽 + 筛选栏 + 截图导出 + UI优化

Browse Source 
- 新增 v-column-resize 指令，11 张表格均支持拖拽调整列宽
- 工作计划/商机跟单/要客拜访新增筛选栏（客户经理 + 状态）
- 汇总栏 chip 可点击筛选，支持重置与计数
- 新增截图导出功能（dom-to-image-more，像素级文字渲染）
- 截图范围从标题开始，自动隐藏操作按钮，5px白边
- 截图时页面闪烁动画反馈
- 全局 CSS 完善（列宽手柄、截图模式、捕获动画）
- 仪表盘 UI 细节优化 + 亮灯表标签调整
- 登录页 UI 改进

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
v6ole
2026-07-11 22:17:45 +08:00
parent deeafe239f
commit e8b92a6f99
17 changed files with 767 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Login.vue
+108 -63
View File
@@ -9,11 +9,22 @@ const route = useRoute()
const auth = useAuthStore()
const loading = ref(false)
// Check for Casdoor callback
function goCasdoorLogin() {
const returnUrl = (route.query.redirect as string) || ''
if (returnUrl) {
sessionStorage.setItem('login_return_url', returnUrl)
}
const endpoint = import.meta.env.VITE_CASDOOR_ENDPOINT
const clientId = import.meta.env.VITE_CASDOOR_CLIENT_ID
const redirectUri = encodeURIComponent(window.location.origin + '/login')
const casdoorUrl = `${endpoint}/login/oauth/authorize?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&scope=openid+profile&state=login`
window.location.href = casdoorUrl
}
onMounted(async () => {
// ── Casdoor callback ──
const code = route.query.code as string
const state = route.query.state as string
if (code) {
loading.value = true
try {
@@ -30,14 +41,13 @@ onMounted(async () => {
return
}
// Check for wecom code
// ── Wecom callback ──
const wecomCode = route.query.wecom_code as string
if (wecomCode) {
loading.value = true
try {
const res = await auth.wecomLogin(wecomCode)
if (res.data.need_bind) {
// Redirect to Casdoor for binding
window.location.href = res.data.casdoor_url
return
}
@@ -56,98 +66,133 @@ onMounted(async () => {
} finally {
loading.value = false
}
return
}
})
function goCasdoorLogin() {
// Save return URL before redirecting to Casdoor
const returnUrl = (route.query.redirect as string) || ''
if (returnUrl) {
sessionStorage.setItem('login_return_url', returnUrl)
}
const endpoint = import.meta.env.VITE_CASDOOR_ENDPOINT
const clientId = import.meta.env.VITE_CASDOOR_CLIENT_ID
const redirectUri = encodeURIComponent(window.location.origin + '/login')
const casdoorUrl = `${endpoint}/login/oauth/authorize?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&scope=openid+profile&state=login`
window.location.href = casdoorUrl
}
// ── Auto-redirect to Casdoor (no button needed) ──
loading.value = true
goCasdoorLogin()
})
</script>
<template>
<div class="login-page">
<div class="login-card">
<!-- Decorative ink-wash circles -->
<div class="bg-orb bg-orb--1"></div>
<div class="bg-orb bg-orb--2"></div>
<div class="bg-orb bg-orb--3"></div>
<div class="splash-card">
<div class="brand">
<h1>企迹</h1>
<div class="brand-rule"></div>
<p>政企周报管理系统</p>
</div>
<el-button
type="primary"
size="large"
:loading="loading"
@click="goCasdoorLogin"
style="width: 100%"
>
登录 / 注册
</el-button>
<p class="hint">使用 Casdoor 账号登录</p>
<div class="redirect-hint">
<span class="dot-pulse"></span>
正在跳转至统一认证...
</div>
</div>
</div>
</template>
<style scoped>
/* ═══ Background — editorial ink wash ═══ */
.login-page {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #4f6ef7 0%, #7b93fa 40%, #a5b4fc 100%);
background: var(--ink);
position: relative;
overflow: hidden;
font-family: var(--font-body);
}
.login-page::before {
content: ''; position: absolute; width: 600px; height: 600px;
background: rgba(255,255,255,0.05); border-radius: 50%;
top: -200px; right: -200px;
/* Decorative orbs — subtle ink-wash circles */
.bg-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.login-page::after {
content: ''; position: absolute; width: 400px; height: 400px;
background: rgba(255,255,255,0.04); border-radius: 50%;
bottom: -100px; left: -100px;
.bg-orb--1 {
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(196,147,74,0.06) 0%, transparent 70%);
top: -180px; right: -180px;
}
.login-card {
background: white;
border-radius: 20px;
padding: 48px 40px;
width: 380px;
max-width: 90vw;
box-shadow: 0 25px 60px rgba(0,0,0,0.15);
.bg-orb--2 {
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
bottom: -100px; left: -80px;
}
.bg-orb--3 {
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(196,147,74,0.08) 0%, transparent 60%);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
/* ═══ Splash Card ═══ */
.splash-card {
position: relative;
z-index: 1;
}
.brand {
text-align: center;
margin-bottom: 36px;
animation: fade-in 0.6s ease-out;
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ═══ Brand ═══ */
.brand {
margin-bottom: 40px;
}
.brand h1 {
margin: 0;
font-size: 36px;
font-weight: 800;
letter-spacing: 4px;
background: linear-gradient(135deg, #4f6ef7, #7b93fa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: var(--font-heading);
font-size: 48px;
font-weight: 400;
letter-spacing: 0.15em;
color: #fff;
line-height: 1.2;
}
.brand-rule {
width: 36px; height: 3px;
background: var(--gold);
margin: 16px auto;
}
.brand p {
margin: 10px 0 0;
color: var(--c-text-secondary);
font-size: 14px;
letter-spacing: 1px;
margin: 0;
font-family: var(--font-body);
font-size: 13px;
color: rgba(255,255,255,0.35);
letter-spacing: 0.15em;
}
.hint {
text-align: center;
color: var(--c-text-muted);
font-size: 12px;
margin-top: 20px;
/* ═══ Redirect Hint ═══ */
.redirect-hint {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-body);
font-size: 13px;
color: rgba(255,255,255,0.45);
letter-spacing: 0.06em;
}
/* Pulsing dot animation */
.dot-pulse {
display: inline-block;
width: 6px; height: 6px;
background: var(--gold);
border-radius: 50%;
animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
</style>
frontend/src/views/desktop/CustomerManage.vue
+1 -1
View File
@@ -331,7 +331,7 @@ async function handleImport() {
<!-- Customer Table -->
<el-card>
<el-table :data="customers" stripe @selection-change="onSelectionChange">
<el-table :data="customers" stripe v-column-resize @selection-change="onSelectionChange">
<el-table-column v-if="auth.isDirector" type="selection" width="50" />
<el-table-column type="index" label="序号" width="60" :index="(idx: number) => (currentPage - 1) * pageSize + idx + 1" />
<el-table-column prop="name" label="单位名称" min-width="180">
frontend/src/views/desktop/Dashboard.vue
+58 -39
View File
@@ -4,6 +4,7 @@ import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { dashboardApi } from '@/api/dashboard'
import { ElMessage } from 'element-plus'
import api from '@/api/index'
const router = useRouter()
const auth = useAuthStore()
@@ -58,6 +59,23 @@ function goWeeklyReport(managerId?: string) {
else router.push('/weekly-report')
}
function getRefDate(): string {
const d = new Date()
d.setDate(d.getDate() + weekOffset.value * 7)
return d.toISOString().slice(0, 10)
}
async function handleExport() {
try {
const res = await api.get('/export/weekly-report', { params: { reference_date: getRefDate() }, responseType: 'blob' })
const url = URL.createObjectURL(res.data)
const a = document.createElement('a')
a.href = url; a.download = 'weekly_report.xlsx'; a.click()
URL.revokeObjectURL(url)
ElMessage.success('导出成功')
} catch (e: any) { ElMessage.error('导出失败') }
}
function rowState(p: any): 'full' | 'catching' | 'missing' {
if (p.has_reported_today && p.completed) return 'full'
if (p.has_reported_today && !p.completed) return 'catching'
@@ -67,15 +85,36 @@ function rowState(p: any): 'full' | 'catching' | 'missing' {
<template>
<div class="dashboard" v-loading="loading">
<!-- ═══ Editorial Page Header ═══ -->
<!-- ═══ Page Header ═══ -->
<div class="page-head">
<h2 class="page-title">仪表盘</h2>
<div class="week-nav">
<button class="week-nav-btn" @click="changeWeek(-1)" title="上一周">◀</button>
<span class="week-label">{{ stats.week_start }} — {{ stats.week_end }}</span>
<button class="week-nav-btn" @click="changeWeek(1)" :disabled="weekOffset >= 0" title="下一周">▶</button>
<button v-if="isHistoricalWeek" class="week-nav-reset" @click="goCurrentWeek">回到本周</button>
<el-tag v-if="isHistoricalWeek" type="info" size="small" style="margin-left:8px">📦 历史归档 · 只读</el-tag>
<div class="page-head-row">
<div>
<h2 class="page-title">仪表盘</h2>
<div class="week-nav">
<button class="week-nav-btn" @click="changeWeek(-1)" title="上一周">◀</button>
<span class="week-label">{{ stats.week_start }} — {{ stats.week_end }}</span>
<button class="week-nav-btn" @click="changeWeek(1)" :disabled="weekOffset >= 0" title="下一周">▶</button>
<button v-if="isHistoricalWeek" class="week-nav-reset" @click="goCurrentWeek">回到本周</button>
<el-tag v-if="isHistoricalWeek" type="info" size="small" style="margin-left:8px">📦 历史归档 · 只读</el-tag>
</div>
</div>
<div class="page-head-actions">
<el-button type="primary" @click="goWeeklyReport()">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
</svg>
本周周报详情
</el-button>
<el-button type="success" v-if="auth.isDirector" @click="handleExport">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
导出 Excel
</el-button>
</div>
</div>
<div class="page-rule"></div>
</div>
@@ -133,34 +172,6 @@ function rowState(p: any): 'full' | 'catching' | 'missing' {
</div>
</div>
<!-- ═══ Quick Actions ═══ -->
<div class="actions">
<el-button type="primary" @click="goWeeklyReport">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
</svg>
本周周报详情
</el-button>
<el-button type="success" v-if="auth.isDirector" @click="router.push('/weekly-report')">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
导出 Excel
</el-button>
<el-button plain @click="router.push('/customers')">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
客户管理
</el-button>
</div>
<!-- ═══ Reporting Progress ═══ -->
<el-card class="progress-card">
<template #header>
@@ -174,6 +185,7 @@ function rowState(p: any): 'full' | 'catching' | 'missing' {
</div>
</template>
<div v-if="progress.length === 0" class="empty">暂无数据</div>
<div class="progress-grid">
<div
v-for="p in progress"
:key="p.manager_id"
@@ -201,13 +213,16 @@ function rowState(p: any): 'full' | 'catching' | 'missing' {
:stroke-width="12"
/>
</div>
</div>
</el-card>
</div>
</template>
<style scoped>
/* ═══ Page Header ═══ */
.page-head { margin-bottom: 24px; }
.page-head { margin-bottom: 20px; }
.page-head-row { display: flex; justify-content: space-between; align-items: center; }
.page-head-actions { display: flex; gap: 8px; flex-shrink: 0; }
.page-title {
margin: 0;
font-family: var(--font-heading);
@@ -264,8 +279,12 @@ function rowState(p: any): 'full' | 'catching' | 'missing' {
font-size: 12px; color: var(--warm-gray); letter-spacing: 0.04em;
}
/* ═══ Actions ═══ */
.actions { display: flex; gap: 10px; margin-bottom: 24px; }
/* ═══ Progress Grid — responsive 2-column ═══ */
.progress-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
gap: 8px 24px;
}
/* ═══ Progress ═══ */
.progress-card { margin-top: 4px; }
frontend/src/views/desktop/KeyVisits.vue
+84 -11
View File
@@ -5,6 +5,7 @@ import { useThemeStore } from '@/stores/theme'
import { ElMessage, ElMessageBox } from 'element-plus'
import { todayStr } from '@/utils'
import { getMgrStyle, loadManagerColors } from '@/utils/managerColor'
import { useScreenshot } from '@/utils/screenshot'
import api from '@/api/index'
import EditLogPanel from '@/components/EditLogPanel.vue'
@@ -14,6 +15,8 @@ const loading = ref(false)
const isLight = computed(() => themeStore.currentTheme === 'light')
const keyVisits = ref<any[]>([])
const customers = ref<any[]>([])
const shotRef = ref<HTMLElement | null>(null)
const { capturing, captureEl } = useScreenshot()
const allUsers = ref<any[]>([])
const plannedVisitors = ref<string[]>([])
@@ -23,6 +26,35 @@ const form = ref<any>({})
const statusPick = ref<Record<string, string>>({})
const keyStatuses = ['未开始', '进行中', '已完成']
// ── Filters ──
const filterManager = ref('')
const filterStatus = ref('')
const managerOptions = computed(() => {
const seen = new Set<string>()
return keyVisits.value
.map((k: any) => k.manager_name || '未知')
.filter((n: string) => { if (seen.has(n)) return false; seen.add(n); return true })
.sort()
})
const filteredItems = computed(() => {
let list = keyVisits.value
if (filterManager.value) list = list.filter((k: any) => (k.manager_name || '未知') === filterManager.value)
if (filterStatus.value) list = list.filter((k: any) => k.progress_status === filterStatus.value)
return list
})
function resetFilters() {
filterManager.value = ''
filterStatus.value = ''
}
async function handleScreenshot() {
const d = new Date().toISOString().slice(0, 10)
await captureEl(shotRef.value, `要客拜访_${d}.png`)
}
const managerSummary = computed(() => {
const map: Record<string, number> = {}
keyVisits.value.forEach((k: any) => {
@@ -116,28 +148,59 @@ async function quickStatusChange(row: any, newStatus: string) {
<template>
<div class="key-visits-page" v-loading="loading">
<div ref="shotRef">
<div class="page-head">
<div class="page-head-row">
<div>
<h2 class="page-title">要客拜访</h2>
<p class="page-desc">重要客户拜访计划，按紧急程度排序跟踪。</p>
</div>
<el-button type="primary" @click="openCreate">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
<line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
新建要客
</el-button>
<div class="page-head-actions">
<el-button type="primary" @click="openCreate" class="screenshot-hide">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
<line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
新建要客
</el-button>
<el-button type="warning" :loading="capturing" @click="handleScreenshot" class="screenshot-hide">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
截图导出
</el-button>
</div>
</div>
<div class="page-rule"></div>
<div v-if="managerSummary.length" class="summary-bar">
<span class="summary-label">客户经理汇总</span>
<span v-for="[name, count] in managerSummary" :key="name" class="summary-chip" :style="getMgrStyle(name, isLight)">{{ name }} · {{ count }}</span>
<span v-for="[name, count] in managerSummary" :key="name" class="summary-chip" :class="{ 'summary-chip--active': filterManager === name }" :style="getMgrStyle(name, isLight)" @click="filterManager = filterManager === name ? '' : name">{{ name }} · {{ count }}</span>
</div>
</div>
<!-- Filter Bar -->
<div class="filter-bar">
<div class="filter-row">
<div class="filter-item">
<label class="filter-label">客户经理</label>
<el-select v-model="filterManager" clearable placeholder="全部" size="small" style="width:150px">
<el-option v-for="m in managerOptions" :key="m" :label="m" :value="m" />
</el-select>
</div>
<div class="filter-item">
<label class="filter-label">进展</label>
<el-select v-model="filterStatus" clearable placeholder="全部" size="small" style="width:120px">
<el-option v-for="s in keyStatuses" :key="s" :label="s" :value="s" />
</el-select>
</div>
<el-button v-if="filterManager || filterStatus" size="small" plain @click="resetFilters">重置</el-button>
<span class="filter-count">{{ filteredItems.length }} / {{ keyVisits.length }} 条</span>
</div>
</div>
<el-card>
<el-table :data="keyVisits" stripe size="small" v-if="keyVisits.length">
<el-table :data="filteredItems" stripe size="small" v-if="filteredItems.length" v-column-resize>
<el-table-column type="index" label="序号" width="50" />
<el-table-column prop="customer_name" label="客户" width="160">
<template #default="{ row }">
@@ -176,14 +239,16 @@ async function quickStatusChange(row: any, newStatus: string) {
<el-table-column prop="planned_date" label="计划时间" width="110" />
<el-table-column prop="planned_visitor" label="拜访人" width="80" />
<el-table-column prop="visit_target" label="拜访对象" width="110" />
<el-table-column label="操作" width="80" fixed="right">
<el-table-column label="操作" width="80" fixed="right" class-name="screenshot-hide">
<template #default="{ row }">
<el-button size="small" type="danger" @click="handleDelete(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div v-else class="empty">暂无需重点关注的客户</div>
<div v-if="!keyVisits.length" class="empty">暂无需重点关注的客户</div>
<div v-else-if="keyVisits.length && !filteredItems.length" class="empty">无匹配结果</div>
</el-card>
</div><!-- /shotRef -->
<!-- Dialog -->
<el-dialog v-model="dialogVisible" :title="(dialogMode === 'create' ? '新建' : '编辑') + ' 要客拜访'" width="520px">
@@ -231,13 +296,21 @@ async function quickStatusChange(row: any, newStatus: string) {
.edit-indicator { font-size: 12px; margin-left: 3px; opacity: 0.5; cursor: help; }
.page-head { margin-bottom: 20px; }
.page-head-row { display: flex; justify-content: space-between; align-items: flex-start; }
.page-head-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.page-title { margin: 0; font-family: var(--font-heading); font-size: 22px; font-weight: 400; color: var(--ink); letter-spacing: 0.06em; }
.page-desc { margin: 4px 0 0; font-size: 13px; color: var(--c-text-muted); font-family: var(--font-body); }
.page-rule { width: 32px; height: 3px; background: var(--gold); margin-top: 12px; }
.summary-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 10px 14px; background: var(--c-bg-light, #faf9f6); border-radius: 6px; border: 1px solid var(--c-border, #e8e5df); }
.summary-label { font-size: 12px; color: var(--c-text-muted); font-family: var(--font-body); margin-right: 4px; }
.summary-chip { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; color: var(--mgr-chip-text); white-space: nowrap; }
.summary-chip { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; color: var(--mgr-chip-text); white-space: nowrap; cursor: pointer; transition: opacity 0.2s, transform 0.15s; }
.summary-chip:hover { opacity: 0.8; transform: translateY(-1px); }
.summary-chip--active { outline: 2px solid var(--gold); outline-offset: 1px; }
.mgr-tag { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12px; color: var(--mgr-chip-text); white-space: nowrap; }
.method-grid { display: flex; gap: 8px; }
.empty { text-align: center; color: var(--c-text-muted); padding: 48px 0; font-family: var(--font-body); }
.filter-bar { margin-bottom: 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--warm-border); }
.filter-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.filter-item { display: flex; align-items: center; gap: 8px; }
.filter-label { font-size: 13px; color: var(--warm-gray); font-family: var(--font-body); white-space: nowrap; }
.filter-count { font-size: 12px; color: var(--c-text-muted); font-family: var(--font-mono); margin-left: auto; }
</style>
frontend/src/views/desktop/LightBoard.vue
+23 -12
View File
@@ -318,23 +318,34 @@ const statusLabel: Record<string, string> = { green: '近30天已拜访', yellow
.customer-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 18px 16px; border-top: 1px solid var(--warm-border); padding-top: 14px; }
/* ═══ Customer Card ═══ */
.customer-card { width: 220px; background: var(--paper); border: 1px solid var(--warm-border); cursor: pointer; transition: all 0.2s; display: flex; overflow: hidden; position: relative; }
.customer-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(28,55,56,0.06); }
.customer-card { width: 220px; background: var(--paper); border: 1px solid var(--warm-border); cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.customer-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(28,55,56,0.08); }
.customer-card:active { transform: scale(0.99); }
.card-status-stripe { width: 4px; flex-shrink: 0; }
.customer-card--green .card-status-stripe { background: var(--sage); }
/* ── Card background by status (Option A: full-color tint) ── */
.customer-card--green { background: #ECF7EE; border-color: #B7DFC2; }
.customer-card--yellow { background: #FFF8EB; border-color: #F0D9A0; }
.customer-card--red { background: #FFF0EF; border-color: #F5C4C0; }
.customer-card--gray { background: #F5F5F5; border-color: #DDDDDD; }
/* ── Top accent stripe (subtle, secondary indicator) ── */
.card-status-stripe { height: 3px; width: 100%; flex-shrink: 0; }
.customer-card--green .card-status-stripe { background: var(--sage); }
.customer-card--yellow .card-status-stripe { background: var(--gold); }
.customer-card--red .card-status-stripe { background: var(--vermilion); }
.customer-card--gray .card-status-stripe { background: var(--warm-gray); }
.customer-card--red { animation: pulse-warn 3s ease-in-out infinite; }
@keyframes pulse-warn { 0%,100% { border-color: var(--warm-border); } 50% { border-color: rgba(184,71,46,0.35); } }
.customer-card--red .card-status-stripe { background: var(--vermilion); }
.customer-card--gray .card-status-stripe { background: var(--warm-gray); }
/* ── Red card pulse ── */
.customer-card--red { animation: pulse-card 3s ease-in-out infinite; }
@keyframes pulse-card { 0%,100% { box-shadow: 0 0 0 0 rgba(184,71,46,0); } 50% { box-shadow: 0 0 0 4px rgba(184,71,46,0.12); } }
.card-body { padding: 12px 14px; flex: 1; min-width: 0; }
.card-name-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.status-circle { display: inline-block; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
.status-circle--green { background: var(--sage); box-shadow: 0 0 0 2px rgba(74,103,65,0.15); }
.status-circle { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
.status-circle--green { background: var(--sage); }
.status-circle--yellow { background: conic-gradient(var(--gold) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--gold); }
.status-circle--red { background: transparent; border: 2px solid var(--vermilion); box-shadow: 0 0 0 2px rgba(184,71,46,0.08); }
.status-circle--gray { background: transparent; border: 1.5px dashed var(--warm-gray); }
.status-circle--red { background: transparent; border: 2px solid var(--vermilion); }
.status-circle--gray { background: transparent; border: 1.5px dashed var(--warm-gray); }
.card-name { font-family: var(--font-heading); font-size: 13px; color: var(--ink); letter-spacing: 0.03em; line-height: 1.4; word-break: break-all; }
.card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.card-industry,.card-services { font-family: var(--font-body); font-size: 10px; color: var(--warm-gray); }
frontend/src/views/desktop/ManagerWorkspace.vue
+5 -5
View File
@@ -287,7 +287,7 @@ const notesByDate = computed(() => {
</svg>
{{ date }}
</h4>
<el-table :data="items" stripe size="small">
<el-table :data="items" stripe size="small" v-column-resize>
<el-table-column prop="customer_name" label="客户" width="130">
<template #default="{ row }"><el-link type="primary" :underline="false" @click="openEdit('visit', row)">{{ row.customer_name }}</el-link></template>
</el-table-column>
@@ -320,7 +320,7 @@ const notesByDate = computed(() => {
</svg>
{{ date }}
</h4>
<el-table :data="items" stripe size="small">
<el-table :data="items" stripe size="small" v-column-resize>
<el-table-column prop="category" label="分类" width="100"><template #default="{ row }"><el-tag size="small">{{ row.category }}</el-tag></template></el-table-column>
<el-table-column prop="content" label="工作内容" min-width="250" show-overflow-tooltip>
<template #default="{ row }"><el-link type="primary" :underline="false" @click="openEdit('note', row)">{{ row.content }}</el-link></template>
@@ -339,7 +339,7 @@ const notesByDate = computed(() => {
<!-- ═══ 工作计划 ═══ -->
<el-tab-pane label="工作计划" name="work_plans">
<div style="margin-bottom:12px"><el-button type="primary" size="small" @click="openCreate('plan')">+ 新建计划</el-button></div>
<el-table :data="workPlans" stripe size="small">
<el-table :data="workPlans" stripe size="small" v-column-resize>
<el-table-column prop="customer_name" label="客户" width="130">
<template #default="{ row }"><el-link type="primary" :underline="false" @click="openEdit('plan', row)">{{ row.customer_name }}</el-link></template>
</el-table-column>
@@ -371,7 +371,7 @@ const notesByDate = computed(() => {
<!-- ═══ 小微商机 ═══ -->
<el-tab-pane label="小微商机" name="mini_biz">
<div style="margin-bottom:12px"><el-button type="primary" size="small" @click="openCreate('mini')">+ 新建商机</el-button></div>
<el-table :data="miniBusiness" stripe size="small">
<el-table :data="miniBusiness" stripe size="small" v-column-resize>
<el-table-column prop="customer_name" label="客户" width="130">
<template #default="{ row }"><el-link type="primary" :underline="false" @click="openEdit('mini', row)">{{ row.customer_name }}</el-link></template>
</el-table-column>
@@ -405,7 +405,7 @@ const notesByDate = computed(() => {
<!-- ═══ 要客拜访 ═══ -->
<el-tab-pane label="要客拜访" name="key_visits">
<div style="margin-bottom:12px"><el-button type="primary" size="small" @click="openCreate('key')">+ 新建要客拜访</el-button></div>
<el-table :data="keyVisits" stripe size="small">
<el-table :data="keyVisits" stripe size="small" v-column-resize>
<el-table-column prop="customer_name" label="客户" width="130">
<template #default="{ row }"><el-link type="primary" :underline="false" @click="openEdit('key', row)">{{ row.customer_name }}</el-link></template>
</el-table-column>
frontend/src/views/desktop/MiniBusiness.vue
+84 -11
View File
@@ -5,6 +5,7 @@ import { useThemeStore } from '@/stores/theme'
import { ElMessage, ElMessageBox } from 'element-plus'
import { todayStr } from '@/utils'
import { getMgrStyle, loadManagerColors } from '@/utils/managerColor'
import { useScreenshot } from '@/utils/screenshot'
import api from '@/api/index'
import EditLogPanel from '@/components/EditLogPanel.vue'
@@ -14,6 +15,8 @@ const loading = ref(false)
const isLight = computed(() => themeStore.currentTheme === 'light')
const miniBusiness = ref<any[]>([])
const customers = ref<any[]>([])
const shotRef = ref<HTMLElement | null>(null)
const { capturing, captureEl } = useScreenshot()
const dialogVisible = ref(false)
const dialogMode = ref<'create' | 'edit'>('create')
@@ -21,6 +24,35 @@ const form = ref<any>({})
const statusPick = ref<Record<string, string>>({})
const miniStatuses = ['跟进中', '已签约', '已流失']
// ── Filters ──
const filterManager = ref('')
const filterStatus = ref('')
const managerOptions = computed(() => {
const seen = new Set<string>()
return miniBusiness.value
.map((m: any) => m.manager_name || '未知')
.filter((n: string) => { if (seen.has(n)) return false; seen.add(n); return true })
.sort()
})
const filteredItems = computed(() => {
let list = miniBusiness.value
if (filterManager.value) list = list.filter((m: any) => (m.manager_name || '未知') === filterManager.value)
if (filterStatus.value) list = list.filter((m: any) => m.status === filterStatus.value)
return list
})
function resetFilters() {
filterManager.value = ''
filterStatus.value = ''
}
async function handleScreenshot() {
const d = new Date().toISOString().slice(0, 10)
await captureEl(shotRef.value, `商机跟单_${d}.png`)
}
const managerSummary = computed(() => {
const map: Record<string, number> = {}
miniBusiness.value.forEach((m: any) => {
@@ -101,28 +133,59 @@ async function quickStatusChange(row: any, newStatus: string) {
<template>
<div class="mini-biz-page" v-loading="loading">
<div ref="shotRef">
<div class="page-head">
<div class="page-head-row">
<div>
<h2 class="page-title">商机跟单</h2>
<p class="page-desc">小微业务商机管道，按状态跟踪签约进展。</p>
</div>
<el-button type="primary" @click="openCreate">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
<line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
新建商机
</el-button>
<div class="page-head-actions">
<el-button type="primary" @click="openCreate" class="screenshot-hide">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
<line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
新建商机
</el-button>
<el-button type="warning" :loading="capturing" @click="handleScreenshot" class="screenshot-hide">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
截图导出
</el-button>
</div>
</div>
<div class="page-rule"></div>
<div v-if="managerSummary.length" class="summary-bar">
<span class="summary-label">客户经理汇总</span>
<span v-for="[name, count] in managerSummary" :key="name" class="summary-chip" :style="getMgrStyle(name, isLight)">{{ name }} · {{ count }}</span>
<span v-for="[name, count] in managerSummary" :key="name" class="summary-chip" :class="{ 'summary-chip--active': filterManager === name }" :style="getMgrStyle(name, isLight)" @click="filterManager = filterManager === name ? '' : name">{{ name }} · {{ count }}</span>
</div>
</div>
<!-- Filter Bar -->
<div class="filter-bar">
<div class="filter-row">
<div class="filter-item">
<label class="filter-label">客户经理</label>
<el-select v-model="filterManager" clearable placeholder="全部" size="small" style="width:150px">
<el-option v-for="m in managerOptions" :key="m" :label="m" :value="m" />
</el-select>
</div>
<div class="filter-item">
<label class="filter-label">状态</label>
<el-select v-model="filterStatus" clearable placeholder="全部" size="small" style="width:120px">
<el-option v-for="s in miniStatuses" :key="s" :label="s" :value="s" />
</el-select>
</div>
<el-button v-if="filterManager || filterStatus" size="small" plain @click="resetFilters">重置</el-button>
<span class="filter-count">{{ filteredItems.length }} / {{ miniBusiness.length }} 条</span>
</div>
</div>
<el-card>
<el-table :data="miniBusiness" stripe size="small" v-if="miniBusiness.length">
<el-table :data="filteredItems" stripe size="small" v-if="filteredItems.length" v-column-resize>
<el-table-column type="index" label="序号" width="50" />
<el-table-column prop="customer_name" label="客户" width="160">
<template #default="{ row }">
@@ -156,14 +219,16 @@ async function quickStatusChange(row: any, newStatus: string) {
</template>
</el-table-column>
<el-table-column prop="expected_revenue_date" label="预计列收" width="110" />
<el-table-column label="操作" width="80" fixed="right">
<el-table-column label="操作" width="80" fixed="right" class-name="screenshot-hide">
<template #default="{ row }">
<el-button size="small" type="danger" @click="handleDelete(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div v-else class="empty">暂无商机记录</div>
<div v-if="!miniBusiness.length" class="empty">暂无商机记录</div>
<div v-else-if="miniBusiness.length && !filteredItems.length" class="empty">无匹配结果</div>
</el-card>
</div><!-- /shotRef -->
<!-- Dialog -->
<el-dialog v-model="dialogVisible" :title="(dialogMode === 'create' ? '新建' : '编辑') + ' 小微商机'" width="500px">
@@ -200,12 +265,20 @@ async function quickStatusChange(row: any, newStatus: string) {
.edit-indicator { font-size: 12px; margin-left: 3px; opacity: 0.5; cursor: help; }
.page-head { margin-bottom: 20px; }
.page-head-row { display: flex; justify-content: space-between; align-items: flex-start; }
.page-head-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.page-title { margin: 0; font-family: var(--font-heading); font-size: 22px; font-weight: 400; color: var(--ink); letter-spacing: 0.06em; }
.page-desc { margin: 4px 0 0; font-size: 13px; color: var(--c-text-muted); font-family: var(--font-body); }
.page-rule { width: 32px; height: 3px; background: var(--gold); margin-top: 12px; }
.summary-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 10px 14px; background: var(--c-bg-light, #faf9f6); border-radius: 6px; border: 1px solid var(--c-border, #e8e5df); }
.summary-label { font-size: 12px; color: var(--c-text-muted); font-family: var(--font-body); margin-right: 4px; }
.summary-chip { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; color: var(--mgr-chip-text); white-space: nowrap; }
.summary-chip { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; color: var(--mgr-chip-text); white-space: nowrap; cursor: pointer; transition: opacity 0.2s, transform 0.15s; }
.summary-chip:hover { opacity: 0.8; transform: translateY(-1px); }
.summary-chip--active { outline: 2px solid var(--gold); outline-offset: 1px; }
.mgr-tag { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12px; color: var(--mgr-chip-text); white-space: nowrap; }
.empty { text-align: center; color: var(--c-text-muted); padding: 48px 0; font-family: var(--font-body); }
.filter-bar { margin-bottom: 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--warm-border); }
.filter-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.filter-item { display: flex; align-items: center; gap: 8px; }
.filter-label { font-size: 13px; color: var(--warm-gray); font-family: var(--font-body); white-space: nowrap; }
.filter-count { font-size: 12px; color: var(--c-text-muted); font-family: var(--font-mono); margin-left: auto; }
</style>
frontend/src/views/desktop/UserManage.vue
+1 -1
View File
@@ -82,7 +82,7 @@ async function handleDelete(row: any) {
<div class="page-rule"></div>
</div>
<el-card>
<el-table :data="users" stripe>
<el-table :data="users" stripe v-column-resize>
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="name" label="姓名" width="120" />
<el-table-column label="角色" width="120">
frontend/src/views/desktop/WeeklyReport.vue
+2 -2
View File
@@ -323,7 +323,7 @@ const notesByDate = computed(() => {
</svg>
{{ date }}
</h4>
<el-table :data="items" stripe style="width:100%">
<el-table :data="items" stripe style="width:100%" v-column-resize>
<el-table-column prop="customer_name" label="客户" width="120" />
<el-table-column prop="visit_method" label="方式" width="60" />
<el-table-column prop="time_range" label="时间" width="100" />
@@ -367,7 +367,7 @@ const notesByDate = computed(() => {
</svg>
{{ date }}
</h4>
<el-table :data="items" stripe style="width:100%">
<el-table :data="items" stripe style="width:100%" v-column-resize>
<el-table-column label="分类" width="100">
<template #default="{ row }">
<el-tag :type="row.category === '行政事务' ? '' : row.category === '内部会议' ? 'danger' : row.category === '培训学习' ? 'info' : 'warning'" size="small">{{ row.category }}</el-tag>
frontend/src/views/desktop/WorkPlans.vue
+86 -11
View File
@@ -5,6 +5,7 @@ import { useThemeStore } from '@/stores/theme'
import { ElMessage, ElMessageBox } from 'element-plus'
import { todayStr } from '@/utils'
import { getMgrStyle, loadManagerColors } from '@/utils/managerColor'
import { useScreenshot } from '@/utils/screenshot'
import api from '@/api/index'
import EditLogPanel from '@/components/EditLogPanel.vue'
@@ -13,6 +14,8 @@ const themeStore = useThemeStore()
const loading = ref(false)
const workPlans = ref<any[]>([])
const customers = ref<any[]>([])
const shotRef = ref<HTMLElement | null>(null)
const { capturing, captureEl } = useScreenshot()
const dialogVisible = ref(false)
const dialogMode = ref<'create' | 'edit'>('create')
@@ -20,8 +23,37 @@ const form = ref<any>({})
const statusPick = ref<Record<string, string>>({})
const planStatuses = ['计划中', '已完成', '已取消']
// ── Filters ──
const filterManager = ref('')
const filterStatus = ref('')
const isLight = computed(() => themeStore.currentTheme === 'light')
const managerOptions = computed(() => {
const seen = new Set<string>()
return workPlans.value
.map((w: any) => w.manager_name || '未知')
.filter((n: string) => { if (seen.has(n)) return false; seen.add(n); return true })
.sort()
})
const filteredPlans = computed(() => {
let list = workPlans.value
if (filterManager.value) list = list.filter((w: any) => (w.manager_name || '未知') === filterManager.value)
if (filterStatus.value) list = list.filter((w: any) => w.status === filterStatus.value)
return list
})
function resetFilters() {
filterManager.value = ''
filterStatus.value = ''
}
async function handleScreenshot() {
const d = new Date().toISOString().slice(0, 10)
await captureEl(shotRef.value, `工作计划_${d}.png`)
}
const managerSummary = computed(() => {
const map: Record<string, number> = {}
workPlans.value.forEach((w: any) => {
@@ -102,28 +134,59 @@ async function quickStatusChange(row: any, newStatus: string) {
<template>
<div class="work-plans-page" v-loading="loading">
<div ref="shotRef">
<div class="page-head">
<div class="page-head-row">
<div>
<h2 class="page-title">工作计划</h2>
<p class="page-desc">面向未来的工作计划安排，支持状态流转跟踪。</p>
</div>
<el-button type="primary" @click="openCreate">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
<line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
新建计划
</el-button>
<div class="page-head-actions">
<el-button type="primary" @click="openCreate" class="screenshot-hide">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
<line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
新建计划
</el-button>
<el-button type="warning" :loading="capturing" @click="handleScreenshot" class="screenshot-hide">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
截图导出
</el-button>
</div>
</div>
<div class="page-rule"></div>
<div v-if="managerSummary.length" class="summary-bar">
<span class="summary-label">客户经理汇总</span>
<span v-for="[name, count] in managerSummary" :key="name" class="summary-chip" :style="getMgrStyle(name, isLight)">{{ name }} · {{ count }}</span>
<span v-for="[name, count] in managerSummary" :key="name" class="summary-chip" :class="{ 'summary-chip--active': filterManager === name }" :style="getMgrStyle(name, isLight)" @click="filterManager = filterManager === name ? '' : name">{{ name }} · {{ count }}</span>
</div>
</div>
<!-- Filter Bar -->
<div class="filter-bar">
<div class="filter-row">
<div class="filter-item">
<label class="filter-label">客户经理</label>
<el-select v-model="filterManager" clearable placeholder="全部" size="small" style="width:150px">
<el-option v-for="m in managerOptions" :key="m" :label="m" :value="m" />
</el-select>
</div>
<div class="filter-item">
<label class="filter-label">状态</label>
<el-select v-model="filterStatus" clearable placeholder="全部" size="small" style="width:120px">
<el-option v-for="s in planStatuses" :key="s" :label="s" :value="s" />
</el-select>
</div>
<el-button v-if="filterManager || filterStatus" size="small" plain @click="resetFilters">重置</el-button>
<span class="filter-count">{{ filteredPlans.length }} / {{ workPlans.length }} 条</span>
</div>
</div>
<el-card>
<el-table :data="workPlans" stripe size="small" v-if="workPlans.length">
<el-table :data="filteredPlans" stripe size="small" v-if="filteredPlans.length" v-column-resize>
<el-table-column type="index" label="序号" width="50" />
<el-table-column prop="customer_name" label="客户" width="160">
<template #default="{ row }">
@@ -155,14 +218,16 @@ async function quickStatusChange(row: any, newStatus: string) {
</el-select>
</template>
</el-table-column>
<el-table-column label="操作" width="80" fixed="right">
<el-table-column label="操作" width="80" fixed="right" class-name="screenshot-hide">
<template #default="{ row }">
<el-button size="small" type="danger" @click="handleDelete(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div v-else class="empty">暂无工作计划</div>
<div v-if="!workPlans.length" class="empty">暂无工作计划</div>
<div v-else-if="workPlans.length && !filteredPlans.length" class="empty">无匹配结果</div>
</el-card>
</div><!-- /shotRef -->
<!-- Dialog -->
<el-dialog v-model="dialogVisible" :title="(dialogMode === 'create' ? '新建' : '编辑') + ' 工作计划'" width="500px">
@@ -199,12 +264,22 @@ async function quickStatusChange(row: any, newStatus: string) {
.edit-indicator { font-size: 12px; margin-left: 3px; opacity: 0.5; cursor: help; }
.page-head { margin-bottom: 20px; }
.page-head-row { display: flex; justify-content: space-between; align-items: flex-start; }
.page-head-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.page-title { margin: 0; font-family: var(--font-heading); font-size: 22px; font-weight: 400; color: var(--ink); letter-spacing: 0.06em; }
.page-desc { margin: 4px 0 0; font-size: 13px; color: var(--c-text-muted); font-family: var(--font-body); }
.page-rule { width: 32px; height: 3px; background: var(--gold); margin-top: 12px; }
.summary-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 10px 14px; background: var(--c-bg-light, #faf9f6); border-radius: 6px; border: 1px solid var(--c-border, #e8e5df); }
.summary-label { font-size: 12px; color: var(--c-text-muted); font-family: var(--font-body); margin-right: 4px; }
.summary-chip { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; color: var(--mgr-chip-text); white-space: nowrap; }
.summary-chip { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; color: var(--mgr-chip-text); white-space: nowrap; cursor: pointer; transition: opacity 0.2s, transform 0.15s; }
.summary-chip:hover { opacity: 0.8; transform: translateY(-1px); }
.summary-chip--active { outline: 2px solid var(--gold); outline-offset: 1px; }
.mgr-tag { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12px; color: var(--mgr-chip-text); white-space: nowrap; }
.empty { text-align: center; color: var(--c-text-muted); padding: 48px 0; font-family: var(--font-body); }
/* ── Filter Bar ── */
.filter-bar { margin-bottom: 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--warm-border); }
.filter-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.filter-item { display: flex; align-items: center; gap: 8px; }
.filter-label { font-size: 13px; color: var(--warm-gray); font-family: var(--font-body); white-space: nowrap; }
.filter-count { font-size: 12px; color: var(--c-text-muted); font-family: var(--font-mono); margin-left: auto; }
</style>