前端UI界面美化-2

frontend/src/components/KpiCard.vue

@@ -1,9 +1,23 @@
 <template>
-  <el-card class="kpi-card" shadow="hover">
-    <div class="title">{{ title }}</div>
-    <div class="value" v-if="!loading">{{ value }}</div>
-    <div class="value loading" v-else>加载中...</div>
-    <div class="subtext" v-if="subtext">{{ subtext }}</div>
+  <el-card class="kpi-card" shadow="never">
+    <div class="kpi-header">
+      <span class="kpi-title">{{ title }}</span>
+      <el-icon v-if="icon" class="kpi-icon"><component :is="icon" /></el-icon>
+    </div>
+    <div class="kpi-content">
+      <div v-if="loading" class="kpi-loading">
+        <el-skeleton animated>
+          <template #template>
+            <el-skeleton-item variant="h1" style="width: 60%" />
+          </template>
+        </el-skeleton>
+      </div>
+      <div v-else class="kpi-value-container">
+        <span class="kpi-value">{{ value }}</span>
+        <span v-if="unit" class="kpi-unit">{{ unit }}</span>
+      </div>
+      <div v-if="subtext" class="kpi-subtext">{{ subtext }}</div>
+    </div>
   </el-card>
 </template>
 
@@ -13,6 +27,8 @@ interface Props {
   value: string | number;
   subtext?: string;
   loading?: boolean;
+  icon?: any;
+  unit?: string;
 }
 
 defineProps<Props>();
@@ -20,22 +36,71 @@ defineProps<Props>();
 
 <style scoped>
 .kpi-card {
-  min-height: 120px;
+  border: 1px solid var(--ctms-border-color);
+  transition: all 0.3s ease;
+  height: 100%;
 }
-.title {
-  color: #909399;
+
+.kpi-card:hover {
+  border-color: var(--ctms-primary-hover);
+  box-shadow: var(--ctms-shadow-md) !important;
+  transform: translateY(-2px);
+}
+
+.kpi-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.kpi-title {
+  color: var(--ctms-text-secondary);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.kpi-icon {
+  font-size: 18px;
+  color: var(--ctms-primary);
+  opacity: 0.6;
+}
+
+.kpi-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.kpi-value-container {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.kpi-value {
+  font-size: 32px;
+  font-weight: 700;
+  color: var(--ctms-text-main);
+  line-height: 1.2;
+}
+
+.kpi-unit {
+  font-size: 14px;
+  color: var(--ctms-text-secondary);
+  font-weight: 500;
+}
+
+.kpi-subtext {
+  color: var(--ctms-text-secondary);
   font-size: 13px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px dashed var(--ctms-border-color);
 }
-.value {
-  font-size: 28px;
-  font-weight: 600;
-  margin: 8px 0;
-}
-.subtext {
-  color: #909399;
-  font-size: 12px;
-}
-.loading {
-  color: #c0c4cc;
+
+.kpi-loading {
+  height: 38px;
+  display: flex;
+  align-items: center;
 }
 </style>