From 2e49fa1449e43c80b39b1f9340b81c5a6ddeeb69 Mon Sep 17 00:00:00 2001
From: Lewis_yan <lewis_yan@avc.co>
Date: Tue, 7 Apr 2026 09:46:09 +0800
Subject: [PATCH] feat(dashboard): add semantic icons to KPI cards

Add FontAwesome icons to all 7 KPI metric cards in buyer and
supplier dashboards for better visual semantics:

BuyerDashboard:
- fa-check-circle (completed inquiries)
- fa-clock (pending inquiries)
- fa-chart-pie (quote timeliness rate)

SupplierDashboard:
- fa-file-invoice (total quotes)
- fa-pen-to-square (pending quotes)
- fa-trophy (won bids)
- fa-bullseye (win rate)
---
 web/src/views/pisadmin/dashboard/BuyerDashboard.vue    |  9 +++++++++
 web/src/views/pisadmin/dashboard/SupplierDashboard.vue | 10 ++++++++++
 2 files changed, 19 insertions(+)

diff --git a/web/src/views/pisadmin/dashboard/BuyerDashboard.vue b/web/src/views/pisadmin/dashboard/BuyerDashboard.vue
index ea88f8d..519a326 100644
--- a/web/src/views/pisadmin/dashboard/BuyerDashboard.vue
+++ b/web/src/views/pisadmin/dashboard/BuyerDashboard.vue
@@ -9,15 +9,18 @@
 		<!-- KPI 指标卡片 -->
 		<div class="kpi-section">
 			<div class="kpi-card blue">
+				<div class="kpi-icon"><i class="fa fa-check-circle"></i></div>
 				<div class="kpi-title">已完成询价单总数</div>
 				<div class="kpi-value">{{ kpi.total_inquiries.toLocaleString() }}</div>
 				<div class="kpi-trend trend-up"><i class="fa fa-arrow-up"></i> 较上月 +12%</div>
 			</div>
 			<div class="kpi-card green">
+				<div class="kpi-icon"><i class="fa fa-clock"></i></div>
 				<div class="kpi-title">进行中询价单</div>
 				<div class="kpi-value">{{ kpi.pending_inquiries }}</div>
 			</div>
 			<div class="kpi-card orange">
+				<div class="kpi-icon"><i class="fa fa-chart-pie"></i></div>
 				<div class="kpi-title">供应商报价及时率</div>
 				<div class="kpi-value">{{ kpi.quote_timely_rate }}%</div>
 				<div class="kpi-trend trend-flat"><i class="fa fa-minus"></i> 持平</div>
@@ -317,6 +320,12 @@ watch(trend, () => {
 	}
 }
 
+.kpi-icon {
+	font-size: 28px;
+	margin-bottom: 12px;
+	opacity: 0.8;
+}
+
 .kpi-title {
 	font-size: 18px;
 	color: var(--text-secondary);
diff --git a/web/src/views/pisadmin/dashboard/SupplierDashboard.vue b/web/src/views/pisadmin/dashboard/SupplierDashboard.vue
index f47fa12..ae0beea 100644
--- a/web/src/views/pisadmin/dashboard/SupplierDashboard.vue
+++ b/web/src/views/pisadmin/dashboard/SupplierDashboard.vue
@@ -9,21 +9,25 @@
 		<!-- KPI 指标卡片 -->
 		<div class="kpi-section">
 			<div class="kpi-card blue">
+				<div class="kpi-icon"><i class="fa fa-file-invoice"></i></div>
 				<div class="kpi-title">报价单总数</div>
 				<div class="kpi-value">{{ kpi.total_quotes.toLocaleString() }}</div>
 				<div class="kpi-trend trend-up"><i class="fa fa-arrow-up"></i> 较上月 +8%</div>
 			</div>
 			<div class="kpi-card orange">
+				<div class="kpi-icon"><i class="fa fa-pen-to-square"></i></div>
 				<div class="kpi-title">待报价</div>
 				<div class="kpi-value">{{ kpi.pending_quotes }}</div>
 				<div class="kpi-trend" style="color: #2e5bff">等待报价</div>
 			</div>
 			<div class="kpi-card green">
+				<div class="kpi-icon"><i class="fa fa-trophy"></i></div>
 				<div class="kpi-title">已中标</div>
 				<div class="kpi-value">{{ kpi.won_quotes }}</div>
 				<div class="kpi-trend trend-up"><i class="fa fa-trophy"></i> 中标成功</div>
 			</div>
 			<div class="kpi-card purple">
+				<div class="kpi-icon"><i class="fa fa-bullseye"></i></div>
 				<div class="kpi-title">中标率</div>
 				<div class="kpi-value">{{ kpi.conversion_rate }}%</div>
 				<div class="kpi-trend trend-flat"><i class="fa fa-minus"></i> 持平</div>
@@ -345,6 +349,12 @@ watch(trend, () => {
 	}
 }
 
+.kpi-icon {
+	font-size: 28px;
+	margin-bottom: 12px;
+	opacity: 0.8;
+}
+
 .kpi-title {
 	font-size: 18px;
 	color: var(--text-secondary);