重构

apps/admin/src/views/DepositManage.vue

@@ -59,42 +59,41 @@ function switchTab(key: string) {
 
 .tab-bar {
   display: flex;
-  gap: 0;
-  border-bottom: 1px solid #2a2a2a;
-  margin-bottom: 0;
+  gap: 4px;
+  padding: 4px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #ffffff;
+  margin-bottom: 14px;
   flex-shrink: 0;
 }
 
 .tab-btn {
   position: relative;
-  padding: 10px 20px;
-  background: none;
+  padding: 8px 18px;
+  background: transparent;
   border: none;
-  color: #888;
+  border-radius: 6px;
+  color: var(--text-muted);
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 700;
   cursor: pointer;
   transition: color 0.15s;
   letter-spacing: 0.02em;
 }
 
 .tab-btn:hover {
-  color: #ccc;
+  background: var(--accent-hover);
+  color: var(--text);
 }
 
 .tab-btn.active {
-  color: #fff;
+  background: var(--primary);
+  color: #ffffff;
 }
 
 .tab-btn.active::after {
-  content: '';
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: var(--primary, #409eff);
-  border-radius: 2px 2px 0 0;
+  display: none;
 }
 
 .page-deposit-manage :deep(.page-deposit-orders),
@@ -108,4 +107,14 @@ function switchTab(key: string) {
 .page-deposit-manage :deep(.page-payment-methods .toolbar h2) {
   display: none;
 }
+
+@media (max-width: 700px) {
+  .tab-bar {
+    overflow-x: auto;
+  }
+
+  .tab-btn {
+    flex: 0 0 auto;
+  }
+}
 </style>