diff --git a/frontend/src/views/desktop/LightBoard.vue b/frontend/src/views/desktop/LightBoard.vue index 835592e..7fc9e3d 100644 --- a/frontend/src/views/desktop/LightBoard.vue +++ b/frontend/src/views/desktop/LightBoard.vue @@ -52,16 +52,6 @@ async function loadData() { onMounted(loadData) -function statusLabel(status: string): string { - const map: Record = { green: '亮灯', yellow: '临期', red: '灭灯', gray: '未分配' } - return map[status] || status -} - -function statusGlyph(status: string): string { - const map: Record = { green: '亮', yellow: '临', red: '灭', gray: '—' } - return map[status] || '?' -} - function goCustomerVisits(customerId: string) { router.push({ path: '/weekly-report', query: { customer_id: customerId } }) } @@ -108,19 +98,19 @@ const coverageColor = (rate: number): string => {
{{ board.team_summary.visited_this_month }} - 🟢 亮灯 + 已拜访
{{ board.team_summary.visited_last_month_only }} - 🟡 临期 + 临期
{{ board.team_summary.not_visited_2months }} - 🔴 灭灯 + 未拜访
{{ board.team_summary.unassigned }} - ⚪ 未分配 + 未分配
{{ (board.team_summary.coverage_rate * 100).toFixed(0) }}% @@ -144,9 +134,9 @@ const coverageColor = (rate: number): string => { {{ m.total_customers }} 个客户
- {{ m.visited_this_month }} + {{ m.visited_this_month }} {{ m.visited_last_month_only }} - {{ m.not_visited_2months }} + {{ m.not_visited_2months }}
@@ -173,7 +163,7 @@ const coverageColor = (rate: number): string => {
- {{ statusGlyph(cust.status) }} + {{ cust.customer_name }}
@@ -215,7 +205,7 @@ const coverageColor = (rate: number): string => {
- + {{ cust.customer_name }}
@@ -371,7 +361,7 @@ const coverageColor = (rate: number): string => { /* ═══ Customer Card ═══ */ .customer-card { - width: 200px; + width: 220px; background: var(--paper); border: 1px solid var(--warm-border); cursor: pointer; @@ -407,25 +397,45 @@ const coverageColor = (rate: number): string => { flex: 1; min-width: 0; } .card-name-row { - display: flex; align-items: center; gap: 6px; + display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; } -.card-glyph { - display: inline-flex; align-items: center; justify-content: center; - width: 20px; height: 20px; border-radius: 2px; - font-family: 'ZCOOL XiaoWei', STSong, serif; - font-size: 12px; color: #fff; + +/* ═══ Status Circle Icons (geometric, no text) ═══ */ +.status-circle { + display: inline-block; + width: 16px; height: 16px; + border-radius: 50%; flex-shrink: 0; + margin-top: 2px; +} +/* Visited this month — solid filled circle ● */ +.status-circle--green { + background: var(--sage); + box-shadow: 0 0 0 2px rgba(74,103,65,0.15); +} +/* Visited last month only — half-filled circle ◐ */ +.status-circle--yellow { + background: conic-gradient(var(--gold) 50%, transparent 50%); + box-shadow: inset 0 0 0 1.5px var(--gold); +} +/* Not visited 2+ months — empty circle ○ */ +.status-circle--red { + background: transparent; + border: 2px solid var(--vermilion); + box-shadow: 0 0 0 2px rgba(184,71,46,0.08); +} +/* Unassigned — dash */ +.status-circle--gray { + background: transparent; + border: 1.5px dashed var(--warm-gray); } -.card-glyph--green { background: var(--sage); } -.card-glyph--yellow { background: var(--gold); } -.card-glyph--red { background: var(--vermilion); } -.card-glyph--gray { background: var(--warm-gray); } .card-name { font-family: 'ZCOOL XiaoWei', STSong, serif; font-size: 13px; color: var(--ink); letter-spacing: 0.03em; - overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + line-height: 1.4; + word-break: break-all; } .card-meta { display: flex; gap: 6px; flex-wrap: wrap;