feat: redesign admin layout and stats dashboards

admin-frontend/src/style.css

@@ -1,10 +1,14 @@
 :root {
-  --app-bg: #f6f7fb;
+  --app-bg: #f4f6fb;
   --app-text: #111827;
   --app-muted: #6b7280;
-  --app-border: rgba(17, 24, 39, 0.08);
+  --app-border: rgba(15, 23, 42, 0.1);
+  --app-border-strong: rgba(15, 23, 42, 0.14);
   --app-radius: 12px;
-  --app-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
+  --app-radius-lg: 14px;
+  --app-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.05);
+  --app-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
+  --app-card-bg: rgba(255, 255, 255, 0.94);
 
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
     'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
@@ -20,10 +24,17 @@ body,
   height: 100%;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
-  background: var(--app-bg);
   color: var(--app-text);
+  background:
+    radial-gradient(1200px 500px at -10% -10%, rgba(59, 130, 246, 0.12), transparent 55%),
+    radial-gradient(1000px 420px at 110% 0%, rgba(139, 92, 246, 0.1), transparent 50%),
+    var(--app-bg);
 }
 
 a {
@@ -36,13 +47,13 @@ a {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  margin: 0 0 12px;
+  margin: 0 0 14px;
 }
 
 .app-page-title h2 {
   margin: 0;
-  font-size: 18px;
-  font-weight: 700;
+  font-size: 19px;
+  font-weight: 800;
   letter-spacing: 0.2px;
 }
 
@@ -50,12 +61,72 @@ a {
   color: var(--app-muted);
 }
 
+.page-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+}
+
+.el-card {
+  border-radius: var(--app-radius-lg);
+  border: 1px solid var(--app-border);
+  background: var(--app-card-bg);
+  box-shadow: var(--app-shadow-soft);
+}
+
+.el-button {
+  border-radius: 10px;
+  font-weight: 600;
+}
+
+.el-input__wrapper,
+.el-textarea__inner,
+.el-select__wrapper,
+.el-input-number,
+.el-picker__wrapper {
+  border-radius: 10px;
+}
+
+.el-table {
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.el-table th.el-table__cell {
+  background: #f8fafc;
+  color: #334155;
+  font-weight: 700;
+}
+
+.el-table td.el-table__cell,
+.el-table th.el-table__cell {
+  padding-top: 11px;
+  padding-bottom: 11px;
+}
+
+.el-table .el-table__row:hover > td.el-table__cell {
+  background: #f8fbff;
+}
+
+.el-tag {
+  border-radius: 999px;
+}
+
+.el-dialog {
+  border-radius: var(--app-radius-lg);
+}
+
 @media (max-width: 768px) {
   .app-page-title {
     flex-wrap: wrap;
     align-items: flex-start;
   }
 
+  .app-page-title h2 {
+    font-size: 17px;
+  }
+
   .el-dialog {
     max-width: 92vw;
   }
@@ -78,3 +149,59 @@ a {
     width: 100%;
   }
 }
+
+.section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.section-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 800;
+  letter-spacing: 0.2px;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.table-wrap {
+  overflow-x: auto;
+  border-radius: 10px;
+  border: 1px solid var(--app-border);
+  background: #fff;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 14px;
+  flex-wrap: wrap;
+}
+
+.page-hint {
+  font-size: 12px;
+}
+
+.el-tabs__item {
+  font-weight: 700;
+}
+
+.el-form-item {
+  margin-bottom: 18px;
+}
+
+@media (max-width: 768px) {
+  .pagination {
+    justify-content: flex-start;
+  }
+}