style: 标签页极简化设计 - 与侧边栏风格统一

**设计原则：**
黑白灰主色 + 蓝色重点色，与侧边栏保持一致的设计语言

**主要改动：**

1. **移除复杂装饰**
   - 移除上圆角（`border-radius: top`）
   - 移除复杂的边框系统（`border: 2px solid`）
   - 移除 `bottom: -2px` 定位技巧

2. **简化指示方式**
   - 默认状态：无边框，透明背景
   - 活动标签：蓝色底部线条（2px）指示
   - 悬停状态：slate-50 背景 + slate-900 文字

3. **统一颜色系统**
   - 默认：`#64748b` (slate-500)
   - 悬停：`#0f172a` (slate-900) + `#f8fafc` (slate-50 背景)
   - 活动：`#2563eb` (blue-600) + 底部蓝色线条
   - 容器底部：`#e2e8f0` (slate-200)

4. **更紧凑的尺寸**
   - padding: `0.625rem 1rem` (10px 16px)
   - font-size: `0.875rem` (14px)
   - gap: `0.25rem` (4px)
   - 移动端: `0.5rem 0.75rem` (8px 12px)

5. **过渡效果**
   - 从 `0.2s` 改为 `0.15s`，更快速流畅

**对比变化：**
- 旧设计：带圆角、复杂边框、连体效果
- 新设计：极简、平面、仅用底部线条指示

**与侧边栏的一致性：**
- 相同的 slate 色系
- 相同的蓝色重点色
- 相同的字体大小和过渡速度
- 相同的极简设计理念

**文件改动：**
- `css/history_detail/02-layout/layout.css`: 重写标签页样式

**测试要点：**
- 标签页切换流畅
- 活动标签清晰可见（蓝色底部线条）
- 悬停状态明显但不突兀
- 移动端响应式正常

css/history_detail/02-layout/layout.css

@@ -19,67 +19,56 @@ body {
 }
 
 /* ====================
- * 标签页导航样式
+ * 标签页导航样式（极简设计）
+ * 设计原则：黑白灰主色 + 蓝色重点色，与侧边栏保持一致
  * ==================== */
 .tabs-container {
-  border-bottom: 2px solid var(--color-slate-200);
-  margin-bottom: 24px; /* 增加间距 */
   display: flex;
-  gap: 4px;
+  gap: 0.25rem; /* 4px */
+  border-bottom: 1px solid #e2e8f0; /* slate-200 */
+  margin-bottom: 1.5rem; /* 24px */
 }
 
 .tab-btn {
-  padding: 10px 20px;
+  padding: 0.625rem 1rem; /* 10px 16px */
   background: transparent;
-  margin-right: 0;
-  border-radius: var(--radius-md) var(--radius-md) 0 0;
+  border: none;
+  border-bottom: 2px solid transparent;
   cursor: pointer;
-  font-size: 0.95rem;
+  font-size: 0.875rem; /* 14px */
   font-weight: 500;
-  color: var(--text-secondary);
-  border: 2px solid transparent;
-  border-bottom: none;
-  position: relative;
-  bottom: -2px;
-  transition: all 0.2s ease;
+  color: #64748b; /* slate-500 */
+  transition: all 0.15s ease;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: auto; /* 移除强制最小宽度，让内容决定 */
-  text-align: center;
+  position: relative;
+}
+
+.tab-btn:hover:not(.active) {
+  color: #0f172a; /* slate-900 */
+  background: #f8fafc; /* slate-50 */
+}
+
+.tab-btn.active {
+  color: #2563eb; /* blue-600 */
+  font-weight: 600;
+  border-bottom-color: #2563eb; /* blue-600 */
 }
 
 /* 适应较小屏幕的标签页按钮 */
 @media (max-width: 768px) {
   .tab-btn {
-    padding: 8px 12px;
-    font-size: 0.9rem;
-    min-width: 60px;
+    padding: 0.5rem 0.75rem; /* 8px 12px */
+    font-size: 0.8125rem; /* 13px */
   }
 }
 
-.tab-btn:hover:not(.active) {
-  background: var(--color-slate-100);
-  color: var(--text-primary);
-}
-
-.tab-btn.active {
-  background: var(--panel-bg);
-  color: var(--color-primary-600);
-  border-color: var(--color-slate-200);
-  border-bottom: 2px solid var(--panel-bg);
-  font-weight: 600;
-}
-
 /* ====================
  * 标签页内容区域样式
  * ==================== */
 .tab-content {
   background: var(--panel-bg);
-  /* border-radius: var(--radius-md);  移除这里的圆角，因为它和上面的 tabs 是连体的 */
-  padding: 8px 0; /* 减少内边距，让内容自己控制 */
+  padding: 8px 0;
   min-height: 300px;
   margin-top: 0;
 }
 
-