UI界面模拟shadcn admin效果

frontend/src/components/KpiCard.vue

@@ -37,14 +37,12 @@ defineProps<Props>();
 <style scoped>
 .kpi-card {
   border: 1px solid var(--ctms-border-color);
-  transition: all 0.3s ease;
+  transition: var(--ctms-transition);
   height: 100%;
 }
 
 .kpi-card:hover {
-  border-color: var(--ctms-primary-hover);
-  box-shadow: var(--ctms-shadow-md) !important;
-  transform: translateY(-2px);
+  border-color: var(--ctms-border-color-hover);
 }
 
 .kpi-header {
@@ -56,14 +54,13 @@ defineProps<Props>();
 
 .kpi-title {
   color: var(--ctms-text-secondary);
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 13px;
+  font-weight: 600;
 }
 
 .kpi-icon {
-  font-size: 18px;
-  color: var(--ctms-primary);
-  opacity: 0.6;
+  font-size: 16px;
+  color: var(--ctms-text-secondary);
 }
 
 .kpi-content {
@@ -78,8 +75,8 @@ defineProps<Props>();
 }
 
 .kpi-value {
-  font-size: 32px;
-  font-weight: 700;
+  font-size: 28px;
+  font-weight: 600;
   color: var(--ctms-text-main);
   line-height: 1.2;
 }
@@ -92,7 +89,7 @@ defineProps<Props>();
 
 .kpi-subtext {
   color: var(--ctms-text-secondary);
-  font-size: 13px;
+  font-size: 12px;
   margin-top: 8px;
   padding-top: 8px;
   border-top: 1px dashed var(--ctms-border-color);