x

static/style.css

@@ -1477,13 +1477,40 @@ select.form-input {
 }
 
 /* ================================
-   标签页
+   标签页 - 现代风格
    ================================ */
 .tabs {
   display: flex;
-  gap: var(--space-1);
+  gap: var(--space-2);
-  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-secondary);
+  padding: var(--space-1);
+  border-radius: var(--radius-xl);
   margin-bottom: var(--space-6);
+  overflow-x: auto;
+}
+
+.tab {
+  padding: var(--space-3) var(--space-5);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-secondary);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-default);
+  white-space: nowrap;
+}
+
+.tab:hover {
+  color: var(--text-primary);
+  background: var(--bg-primary);
+}
+
+.tab.active {
+  color: var(--primary-600);
+  background: var(--bg-primary);
+  box-shadow: var(--shadow-sm);
 }
 
 .tab-item {
@@ -1534,7 +1561,7 @@ select.form-input {
 .hidden { display: none; }
 
 /* ================================
-   统计卡片
+   统计卡片 - 现代风格
    ================================ */
 .stats-grid {
   display: grid;
@@ -1543,6 +1570,13 @@ select.form-input {
   margin-bottom: var(--space-6);
 }
 
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: var(--space-5);
+  margin-bottom: var(--space-8);
+}
+
 .stat-card {
   background: var(--bg-primary);
   border: 1px solid var(--border-light);
@@ -1550,21 +1584,33 @@ select.form-input {
   padding: var(--space-5);
   cursor: pointer;
   transition: all var(--duration-fast) var(--ease-default);
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
 }
 
 .stat-card:hover {
-  border-color: var(--primary-300);
+  border-color: var(--primary-200);
   box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.stat-card .stat-icon {
+  font-size: var(--text-3xl);
+  line-height: 1;
+  flex-shrink: 0;
 }
 
 .stat-content {
-  text-align: center;
+  flex: 1;
+  min-width: 0;
 }
 
 .stat-value {
-  font-size: var(--text-3xl);
+  font-size: var(--text-2xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
+  line-height: 1.2;
   margin-bottom: var(--space-1);
 }
 
@@ -1573,6 +1619,107 @@ select.form-input {
   color: var(--text-tertiary);
 }
 
+.stat-icon {
+  font-size: var(--text-2xl);
+  margin-bottom: var(--space-3);
+}
+
+/* ================================
+   快速操作 - 现代风格
+   ================================ */
+.quick-actions {
+  margin-top: var(--space-8);
+}
+
+.section-title {
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+  margin-bottom: var(--space-4);
+}
+
+.action-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: var(--space-4);
+}
+
+.action-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  padding: var(--space-6) var(--space-4);
+  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-xl);
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--ease-default);
+  position: relative;
+  overflow: hidden;
+}
+
+.action-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--primary-400), var(--primary-600));
+  opacity: 0;
+  transition: opacity var(--duration-fast) var(--ease-default);
+}
+
+.action-card:hover {
+  border-color: var(--primary-200);
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
+  background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-primary) 100%);
+}
+
+.action-card:hover::before {
+  opacity: 1;
+}
+
+.action-card:active {
+  transform: translateY(0);
+  box-shadow: var(--shadow-sm);
+}
+
+.action-icon {
+  font-size: var(--text-3xl);
+  line-height: 1;
+}
+
+.action-label {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-primary);
+}
+
+/* 不同操作按钮的颜色变体 */
+.action-card:nth-child(1):hover {
+  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+  border-color: var(--primary-200);
+}
+
+.action-card:nth-child(2):hover {
+  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
+  border-color: #86efac;
+}
+
+.action-card:nth-child(3):hover {
+  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
+  border-color: #fde047;
+}
+
+.action-card:nth-child(4):hover {
+  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
+  border-color: #f9a8d4;
+}
+
 /* ================================
    用户区域
    ================================ */

static/vue-app.js

@@ -448,7 +448,7 @@ const HomeView = {
         </div>
         
         <div class="stat-card" @click="$router.push('/moldinsight')">
-          <div class="stat-icon">◈</div>
+          <div class="stat-icon">⚙️</div>
           <div class="stat-content">
             <div class="stat-value">{{ state.stats?.health?.total_tasks || 0 }}</div>
             <div class="stat-label">分析任务</div>
@@ -500,7 +500,7 @@ const HomeView = {
         <h2 class="section-title">快速操作</h2>
         <div class="action-grid">
           <button class="action-card" @click="$router.push('/moldinsight')">
-            <span class="action-icon">◈</span>
+            <span class="action-icon">⚙️</span>
             <span class="action-label">模具分析</span>
           </button>
           <button class="action-card" @click="$router.push('/inventory')">