feat: redesign admin layout and stats dashboards

admin-frontend/src/components/MetricGrid.vue

@@ -0,0 +1,164 @@
+<script setup>
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  minWidth: {
+    type: Number,
+    default: 180,
+  },
+})
+</script>
+
+<template>
+  <div class="metric-grid" :style="{ '--metric-min': `${minWidth}px` }">
+    <div
+      v-for="item in items"
+      :key="item?.key || item?.label"
+      class="metric-card"
+      :class="`metric-tone--${item?.tone || 'blue'}`"
+    >
+      <div class="metric-top">
+        <div v-if="item?.icon" class="metric-icon">
+          <el-icon><component :is="item.icon" /></el-icon>
+        </div>
+        <div class="metric-label">{{ item?.label || '-' }}</div>
+      </div>
+
+      <div class="metric-value">
+        <el-skeleton v-if="loading" :rows="1" animated />
+        <template v-else>{{ item?.value ?? 0 }}</template>
+      </div>
+
+      <div v-if="item?.hint || item?.sub" class="metric-hint app-muted">{{ item?.hint || item?.sub }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--metric-min), 1fr));
+  gap: 12px;
+}
+
+.metric-card {
+  position: relative;
+  overflow: hidden;
+  border-radius: 14px;
+  border: 1px solid var(--app-border);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.9));
+  box-shadow: var(--app-shadow-soft);
+  padding: 13px 14px;
+  min-height: 104px;
+}
+
+.metric-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--metric-top, #3b82f6);
+}
+
+.metric-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.metric-icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--metric-icon-bg, rgba(59, 130, 246, 0.12));
+  color: var(--metric-icon-color, #1d4ed8);
+}
+
+.metric-label {
+  font-size: 12px;
+  color: #475569;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+.metric-value {
+  margin-top: 10px;
+  font-size: 26px;
+  line-height: 1.05;
+  font-weight: 900;
+  color: #0f172a;
+}
+
+.metric-hint {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.metric-tone--blue {
+  --metric-top: linear-gradient(90deg, #3b82f6, #06b6d4);
+  --metric-icon-bg: rgba(59, 130, 246, 0.14);
+  --metric-icon-color: #1d4ed8;
+}
+
+.metric-tone--green {
+  --metric-top: linear-gradient(90deg, #10b981, #22c55e);
+  --metric-icon-bg: rgba(16, 185, 129, 0.14);
+  --metric-icon-color: #047857;
+}
+
+.metric-tone--purple {
+  --metric-top: linear-gradient(90deg, #8b5cf6, #ec4899);
+  --metric-icon-bg: rgba(139, 92, 246, 0.14);
+  --metric-icon-color: #6d28d9;
+}
+
+.metric-tone--orange {
+  --metric-top: linear-gradient(90deg, #f59e0b, #f97316);
+  --metric-icon-bg: rgba(245, 158, 11, 0.14);
+  --metric-icon-color: #b45309;
+}
+
+.metric-tone--red {
+  --metric-top: linear-gradient(90deg, #ef4444, #f43f5e);
+  --metric-icon-bg: rgba(239, 68, 68, 0.14);
+  --metric-icon-color: #b91c1c;
+}
+
+.metric-tone--cyan {
+  --metric-top: linear-gradient(90deg, #06b6d4, #3b82f6);
+  --metric-icon-bg: rgba(6, 182, 212, 0.14);
+  --metric-icon-color: #0e7490;
+}
+
+@media (max-width: 768px) {
+  .metric-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .metric-card {
+    min-height: 96px;
+  }
+
+  .metric-value {
+    font-size: 22px;
+  }
+}
+
+@media (max-width: 480px) {
+  .metric-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>