From 08daef4dcd8dcb6b65328d162bc5be95de6c0967 Mon Sep 17 00:00:00 2001
From: AoXuan <aoxuan233@gmail.com>
Date: Sat, 16 Aug 2025 00:22:37 +0800
Subject: [PATCH] =?UTF-8?q?refactor(History):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=8E=86=E5=8F=B2=E8=AE=B0=E5=BD=95=E9=A1=B5=E9=9D=A2=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E5=92=8C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增左侧日期列表和右侧详情区域的布局结构
- 实现用户和记录选择功能
- 优化统计数据展示
- 添加详细日志刷新功能
- 调整样式和响应式设计
---
 frontend/src/views/History.vue | 869 +++++++++++++++++++++++++--------
 1 file changed, 669 insertions(+), 200 deletions(-)

diff --git a/frontend/src/views/History.vue b/frontend/src/views/History.vue
index 6b1d6c1..0c05843 100644
--- a/frontend/src/views/History.vue
+++ b/frontend/src/views/History.vue
@@ -24,7 +24,7 @@
               v-for="preset in timePresets"
               :key="preset.key"
               :type="currentPreset === preset.key ? 'primary' : 'default'"
-              size="small"
+              size="middle"
               @click="handleQuickTimeSelect(preset)"
             >
               {{ preset.label }}
@@ -67,26 +67,28 @@
           </a-form-item>
         </a-col>
         <a-col :span="6">
-          <a-space>
-            <a-button type="primary" @click="handleSearch" :loading="searchLoading">
-              <template #icon>
-                <SearchOutlined />
-              </template>
-              搜索
-            </a-button>
-            <a-button @click="handleReset">
-              <template #icon>
-                <ClearOutlined />
-              </template>
-              重置
-            </a-button>
-          </a-space>
+          <a-form-item label=" " style="margin-bottom: 0">
+            <a-space>
+              <a-button type="primary" @click="handleSearch" :loading="searchLoading">
+                <template #icon>
+                  <SearchOutlined />
+                </template>
+                搜索
+              </a-button>
+              <a-button @click="handleReset">
+                <template #icon>
+                  <ClearOutlined />
+                </template>
+                重置
+              </a-button>
+            </a-space>
+          </a-form-item>
         </a-col>
       </a-row>
     </a-card>
   </div>
 
-  <!-- 历史记录列表 -->
+  <!-- 历史记录内容区域 -->
   <div class="history-content">
     <a-spin :spinning="searchLoading">
       <div v-if="historyData.length === 0 && !searchLoading" class="empty-state">
@@ -97,151 +99,230 @@
         </a-empty>
       </div>
 
-      <div v-else class="history-list">
-        <a-collapse v-model:activeKey="activeKeys" ghost>
-          <a-collapse-panel
-            v-for="dateGroup in historyData"
-            :key="dateGroup.date"
-            :header="dateGroup.date"
-            class="date-panel"
-          >
-            <template #extra>
-              <a-tag :color="getDateStatusColor(dateGroup.users)">
-                {{ Object.keys(dateGroup.users).length }} 个用户
-              </a-tag>
-            </template>
+      <div v-else class="history-layout">
+        <!-- 左侧日期列表 -->
+        <div class="date-sidebar">
+<!--          &lt;!&ndash; 数据总览 &ndash;&gt;-->
+<!--          <div class="overview-section">-->
+<!--            <a-card size="small" title="数据总览" class="overview-card">-->
+<!--              <div class="overview-stats">-->
+<!--                <a-statistic-->
+<!--                  title="总公招数"-->
+<!--                  :value="totalOverview.totalRecruit"-->
+<!--                  :value-style="{ color: '#1890ff', fontSize: '18px' }"-->
+<!--                >-->
+<!--                  <template #prefix>-->
+<!--                    <UserOutlined />-->
+<!--                  </template>-->
+<!--                </a-statistic>-->
+<!--                <a-statistic-->
+<!--                  title="总掉落数"-->
+<!--                  :value="totalOverview.totalDrop"-->
+<!--                  :value-style="{ color: '#52c41a', fontSize: '18px' }"-->
+<!--                >-->
+<!--                  <template #prefix>-->
+<!--                    <GiftOutlined />-->
+<!--                  </template>-->
+<!--                </a-statistic>-->
+<!--              </div>-->
+<!--            </a-card>-->
+<!--          </div>-->
 
-            <div class="user-list">
-              <a-card
-                v-for="(userData, username) in dateGroup.users"
-                :key="username"
-                size="small"
-                class="user-card"
-                :title="username"
+          <!-- 日期折叠列表 -->
+          <div class="date-list">
+            <a-collapse v-model:activeKey="activeKeys" ghost>
+              <a-collapse-panel
+                v-for="dateGroup in historyData"
+                :key="dateGroup.date"
+                class="date-panel"
               >
-                <template #extra>
-                  <a-space>
-                    <a-tag
-                      v-for="item in userData.index || []"
-                      :key="item.jsonFile"
-                      :color="item.status === '完成' ? 'success' : 'error'"
-                    >
-                      {{ item.status }}
-                    </a-tag>
-                    <a-button
-                      type="link"
-                      size="small"
-                      @click="handleViewDetails(userData, username, dateGroup.date)"
-                    >
-                      查看详情
-                    </a-button>
-                  </a-space>
+                <template #header>
+                  <div class="date-header">
+                    <span class="date-text">{{ dateGroup.date }}</span>
+                  </div>
                 </template>
 
-                <!-- 统计信息 -->
-                <div class="statistics-section">
-                  <!-- 公招统计 -->
-                  <div v-if="userData.recruit_statistics" class="stat-item">
-                    <h4>
-                      <UserOutlined />
-                      公招统计
-                    </h4>
-                    <a-row :gutter="8">
-                      <a-col
-                        v-for="(count, star) in userData.recruit_statistics"
-                        :key="star"
-                        :span="4"
-                      >
-                        <a-statistic
-                          :title="`${star}星`"
-                          :value="count"
-                          :value-style="{ fontSize: '14px' }"
-                        />
-                      </a-col>
-                    </a-row>
+                <div class="user-list">
+                  <div
+                    v-for="(userData, username) in dateGroup.users"
+                    :key="username"
+                    class="user-item"
+                    :class="{ active: selectedUser === `${dateGroup.date}-${username}` }"
+                    @click="handleSelectUser(dateGroup.date, username, userData)"
+                  >
+                    <div class="user-info">
+                      <span class="username">{{ username }}</span>
+                    </div>
                   </div>
+                </div>
+              </a-collapse-panel>
+            </a-collapse>
+          </div>
+        </div>
 
-                  <!-- 掉落统计 -->
-                  <div v-if="userData.drop_statistics" class="stat-item">
-                    <h4>
-                      <GiftOutlined />
-                      掉落统计
-                    </h4>
-                    <a-collapse size="small" ghost>
-                      <a-collapse-panel
-                        v-for="(drops, stage) in userData.drop_statistics"
-                        :key="stage"
-                        :header="stage"
-                      >
+        <!-- 右侧详情区域 -->
+        <div class="detail-area">
+          <div v-if="!selectedUserData" class="no-selection">
+            <a-empty description="请选择左侧的用户查看详细信息">
+              <template #image>
+                <FileSearchOutlined style="font-size: 64px; color: #d9d9d9" />
+              </template>
+            </a-empty>
+          </div>
+
+          <div v-else class="detail-content">
+            <!-- 左侧：记录条目和统计数据 -->
+            <div class="records-area">
+              <!-- 记录条目列表 -->
+              <div class="records-section">
+                <a-card size="small" title="记录条目" class="records-card">
+                  <template #extra>
+                    <a-space>
+                      <span class="record-count">{{ selectedUserData.index?.length || 0 }} 条记录</span>
+                      <HistoryOutlined />
+                    </a-space>
+                  </template>
+                  <div class="records-list">
+                    <div
+                      v-for="(record, index) in selectedUserData.index || []"
+                      :key="record.jsonFile"
+                      class="record-item"
+                      :class="{ 
+                        active: selectedRecordIndex === index,
+                        success: record.status === '完成',
+                        error: record.status === '异常'
+                      }"
+                      @click="handleSelectRecord(index, record)"
+                    >
+                      <div class="record-info">
+                        <div class="record-header">
+                          <span class="record-time">{{ record.date }}</span>
+                          <a-tag 
+                            :color="record.status === '完成' ? 'success' : 'error'" 
+                            size="small"
+                          >
+                            {{ record.status }}
+                          </a-tag>
+                        </div>
+                        <div class="record-file">{{ record.jsonFile }}</div>
+                      </div>
+                      <div class="record-indicator">
+                        <RightOutlined v-if="selectedRecordIndex === index" />
+                      </div>
+                    </div>
+                  </div>
+                </a-card>
+              </div>
+
+              <!-- 统计数据 -->
+              <div class="statistics-section">
+                <a-row :gutter="16">
+                  <!-- 公招统计 -->
+                  <a-col :span="12">
+                    <a-card size="small" class="stat-card">
+                      <template #title>
+                        <span>公招统计</span>
+                        <span v-if="selectedRecordIndex >= 0" class="stat-subtitle">（当前记录）</span>
+                        <span v-else class="stat-subtitle">（用户总计）</span>
+                      </template>
+                      <template #extra>
+                        <UserOutlined />
+                      </template>
+                      <div v-if="currentStatistics.recruit_statistics" class="recruit-stats">
                         <a-row :gutter="8">
-                          <a-col v-for="(count, item) in drops" :key="item" :span="6">
+                          <a-col
+                            v-for="(count, star) in currentStatistics.recruit_statistics"
+                            :key="star"
+                            :span="8"
+                          >
                             <a-statistic
-                              :title="item"
+                              :title="`${star}星`"
                               :value="count"
-                              :value-style="{ fontSize: '12px' }"
+                              :value-style="{ fontSize: '16px' }"
                             />
                           </a-col>
                         </a-row>
-                      </a-collapse-panel>
-                    </a-collapse>
-                  </div>
+                      </div>
+                      <div v-else class="no-data">
+                        <a-empty description="暂无公招数据" :image="false" />
+                      </div>
+                    </a-card>
+                  </a-col>
 
-                  <!-- 错误信息 -->
-                  <div
-                    v-if="userData.error_info && Object.keys(userData.error_info).length > 0"
-                    class="stat-item"
-                  >
-                    <h4>
-                      <ExclamationCircleOutlined style="color: #ff4d4f" />
-                      错误信息
-                    </h4>
-                    <a-list size="small" :data-source="Object.entries(userData.error_info)">
-                      <template #renderItem="{ item }">
-                        <a-list-item>
-                          <a-list-item-meta>
-                            <template #title>
-                              <span style="color: #ff4d4f">{{
-                                new Date(parseInt(item[0])).toLocaleString()
-                              }}</span>
-                            </template>
-                            <template #description>
-                              {{ item[1] }}
-                            </template>
-                          </a-list-item-meta>
-                        </a-list-item>
+                  <!-- 掉落统计 -->
+                  <a-col :span="12">
+                    <a-card size="small" class="stat-card">
+                      <template #title>
+                        <span>掉落统计</span>
+                        <span v-if="selectedRecordIndex >= 0" class="stat-subtitle">（当前记录）</span>
+                        <span v-else class="stat-subtitle">（用户总计）</span>
                       </template>
-                    </a-list>
+                      <template #extra>
+                        <GiftOutlined />
+                      </template>
+                      <div v-if="currentStatistics.drop_statistics" class="drop-stats">
+                        <a-collapse size="small" ghost>
+                          <a-collapse-panel
+                            v-for="(drops, stage) in currentStatistics.drop_statistics"
+                            :key="stage"
+                            :header="stage"
+                          >
+                            <a-row :gutter="8">
+                              <a-col v-for="(count, item) in drops" :key="item" :span="12">
+                                <a-statistic
+                                  :title="item"
+                                  :value="count"
+                                  :value-style="{ fontSize: '14px' }"
+                                />
+                              </a-col>
+                            </a-row>
+                          </a-collapse-panel>
+                        </a-collapse>
+                      </div>
+                      <div v-else class="no-data">
+                        <a-empty description="暂无掉落数据" :image="false" />
+                      </div>
+                    </a-card>
+                  </a-col>
+                </a-row>
+              </div>
+            </div>
+
+            <!-- 右侧：详细日志 -->
+            <div class="log-area">
+              <a-card size="small" title="详细日志" class="log-card">
+                <template #extra>
+                  <a-space>
+                    <FileTextOutlined />
+                    <a-button
+                      type="link"
+                      size="small"
+                      @click="handleRefreshLog"
+                      :loading="detailLoading"
+                    >
+                      刷新日志
+                    </a-button>
+                  </a-space>
+                </template>
+                <a-spin :spinning="detailLoading">
+                  <div v-if="currentDetail?.log_content" class="log-content">
+                    <pre>{{ currentDetail.log_content }}</pre>
                   </div>
-                </div>
+                  <div v-else class="no-log">
+                    <a-empty description="暂无日志内容" :image="false" />
+                  </div>
+                </a-spin>
               </a-card>
             </div>
-          </a-collapse-panel>
-        </a-collapse>
+          </div>
+        </div>
       </div>
     </a-spin>
   </div>
-
-  <!-- 详情弹窗 -->
-  <a-modal
-    v-model:open="detailModalVisible"
-    :title="`${currentUser} - ${currentDate} 详细日志`"
-    width="80%"
-    :footer="null"
-    class="detail-modal"
-  >
-    <a-spin :spinning="detailLoading">
-      <div v-if="currentDetail?.log_content" class="log-content">
-        <pre>{{ currentDetail.log_content }}</pre>
-      </div>
-      <div v-else class="no-log">
-        <a-empty description="暂无日志内容" />
-      </div>
-    </a-spin>
-  </a-modal>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
 import { message } from 'ant-design-vue'
 import {
   ReloadOutlined,
@@ -251,6 +332,9 @@ import {
   UserOutlined,
   GiftOutlined,
   ExclamationCircleOutlined,
+  FileSearchOutlined,
+  FileTextOutlined,
+  RightOutlined,
 } from '@ant-design/icons-vue'
 import { Service } from '@/api/services/Service'
 import type { HistorySearchIn, HistoryData, HistoryDataGetIn } from '@/api/models'
@@ -259,10 +343,16 @@ import dayjs from 'dayjs'
 // 响应式数据
 const searchLoading = ref(false)
 const detailLoading = ref(false)
-const detailModalVisible = ref(false)
 const activeKeys = ref<string[]>([])
 const currentPreset = ref('week') // 当前选中的快捷选项
 
+// 选中的用户相关数据
+const selectedUser = ref('')
+const selectedUserData = ref<HistoryData | null>(null)
+const selectedRecordIndex = ref(-1)
+const currentDetail = ref<HistoryData | null>(null)
+const currentJsonFile = ref('')
+
 // 快捷时间选择预设
 const timePresets = [
   {
@@ -305,14 +395,14 @@ const timePresets = [
     label: '最近三个月',
     startDate: () => dayjs().subtract(3, 'month').format('YYYY-MM-DD'),
     endDate: () => dayjs().format('YYYY-MM-DD'),
-    mode: '按年月并' as HistorySearchIn.mode,
+    mode: '按月合并' as HistorySearchIn.mode,
   },
   {
     key: 'halfYear',
     label: '最近半年',
     startDate: () => dayjs().subtract(6, 'month').format('YYYY-MM-DD'),
     endDate: () => dayjs().format('YYYY-MM-DD'),
-    mode: '按年月并' as HistorySearchIn.mode,
+    mode: '按月合并' as HistorySearchIn.mode,
   },
 ]
 
@@ -330,9 +420,60 @@ interface HistoryDateGroup {
 }
 
 const historyData = ref<HistoryDateGroup[]>([])
-const currentDetail = ref<HistoryData | null>(null)
-const currentUser = ref('')
-const currentDate = ref('')
+
+// 计算总览数据
+const totalOverview = computed(() => {
+  let totalRecruit = 0
+  let totalDrop = 0
+
+  historyData.value.forEach(dateGroup => {
+    Object.values(dateGroup.users).forEach(userData => {
+      // 统计公招数据
+      if (userData.recruit_statistics) {
+        Object.values(userData.recruit_statistics).forEach((count: any) => {
+          totalRecruit += count
+        })
+      }
+
+      // 统计掉落数据
+      if (userData.drop_statistics) {
+        Object.values(userData.drop_statistics).forEach((stageDrops: any) => {
+          Object.values(stageDrops).forEach((count: any) => {
+            totalDrop += count
+          })
+        })
+      }
+    })
+  })
+
+  return {
+    totalRecruit,
+    totalDrop,
+  }
+})
+
+// 当前显示的统计数据（根据是否选中记录条目来决定显示用户总计还是单条记录的数据）
+const currentStatistics = computed(() => {
+  if (selectedRecordIndex.value >= 0 && currentDetail.value) {
+    // 显示选中记录的统计数据
+    return {
+      recruit_statistics: currentDetail.value.recruit_statistics,
+      drop_statistics: currentDetail.value.drop_statistics,
+    }
+  } else if (selectedUserData.value) {
+    // 显示用户总计统计数据
+    return {
+      recruit_statistics: selectedUserData.value.recruit_statistics,
+      drop_statistics: selectedUserData.value.drop_statistics,
+    }
+  } else {
+    // 没有选中任何数据
+    return {
+      recruit_statistics: null,
+      drop_statistics: null,
+    }
+  }
+})
 
 // 页面加载时自动搜索
 onMounted(() => {
@@ -389,37 +530,7 @@ const handleRefresh = () => {
   handleSearch()
 }
 
-// 查看详情
-const handleViewDetails = async (userData: HistoryData, username: string, date: string) => {
-  if (!userData.index || userData.index.length === 0) {
-    message.warning('该记录没有详细日志文件')
-    return
-  }
 
-  try {
-    detailLoading.value = true
-    detailModalVisible.value = true
-    currentUser.value = username
-    currentDate.value = date
-
-    // 获取第一个JSON文件的详细内容
-    const jsonFile = userData.index[0].jsonFile
-    const response = await Service.getHistoryDataApiHistoryDataPost({
-      jsonPath: jsonFile,
-    })
-
-    if (response.code === 200) {
-      currentDetail.value = response.data
-    } else {
-      message.error(response.message || '获取详细日志失败')
-    }
-  } catch (error) {
-    console.error('获取历史记录详情失败:', error)
-    message.error('获取历史记录详情失败')
-  } finally {
-    detailLoading.value = false
-  }
-}
 
 // 快捷时间选择处理
 const handleQuickTimeSelect = (preset: (typeof timePresets)[0]) => {
@@ -437,6 +548,52 @@ const handleDateChange = () => {
   currentPreset.value = ''
 }
 
+// 选择用户处理
+const handleSelectUser = async (date: string, username: string, userData: HistoryData) => {
+  selectedUser.value = `${date}-${username}`
+  selectedUserData.value = userData
+  selectedRecordIndex.value = -1 // 重置记录选择
+  currentDetail.value = null // 清空日志内容
+  currentJsonFile.value = ''
+}
+
+// 选择记录处理
+const handleSelectRecord = async (index: number, record: any) => {
+  selectedRecordIndex.value = index
+  currentJsonFile.value = record.jsonFile
+  await loadUserLog(record.jsonFile)
+}
+
+// 加载用户日志
+const loadUserLog = async (jsonFile: string) => {
+  try {
+    detailLoading.value = true
+    const response = await Service.getHistoryDataApiHistoryDataPost({
+      jsonPath: jsonFile,
+    })
+
+    if (response.code === 200) {
+      currentDetail.value = response.data
+    } else {
+      message.error(response.message || '获取详细日志失败')
+      currentDetail.value = null
+    }
+  } catch (error) {
+    console.error('获取历史记录详情失败:', error)
+    message.error('获取历史记录详情失败')
+    currentDetail.value = null
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+// 刷新日志
+const handleRefreshLog = async () => {
+  if (currentJsonFile.value) {
+    await loadUserLog(currentJsonFile.value)
+  }
+}
+
 // 获取日期状态颜色
 const getDateStatusColor = (users: Record<string, HistoryData>) => {
   const hasError = Object.values(users).some(
@@ -470,6 +627,7 @@ const getDateStatusColor = (users: Record<string, HistoryData>) => {
 
 .history-content {
   padding: 0 24px;
+  height: calc(100vh - 200px);
 }
 
 .empty-state {
@@ -477,61 +635,316 @@ const getDateStatusColor = (users: Record<string, HistoryData>) => {
   padding: 60px 0;
 }
 
-.history-list {
-  min-height: 400px;
+/* 新的布局样式 */
+.history-layout {
+  display: flex;
+  gap: 16px;
+  height: 100%;
+}
+
+/* 左侧日期栏 */
+.date-sidebar {
+  width: 320px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.overview-section {
+  flex-shrink: 0;
+}
+
+.overview-card {
+  border: 1px solid var(--ant-color-border);
+  border-radius: 8px;
+}
+
+.overview-stats {
+  display: flex;
+  justify-content: space-around;
+  gap: 16px;
+}
+
+.date-list {
+  flex: 1;
+  overflow-y: auto;
+  border: 1px solid var(--ant-color-border);
+  border-radius: 8px;
+  background: var(--ant-color-bg-container);
 }
 
 .date-panel {
-  margin-bottom: 16px;
+  border-bottom: 1px solid var(--ant-color-border-secondary);
+}
+
+.date-panel:last-child {
+  border-bottom: none;
+}
+
+.date-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.date-text {
+  font-weight: 600;
+  font-size: 14px;
 }
 
 .user-list {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 4px;
+  padding: 8px 0;
 }
 
-.user-card {
+.user-item {
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.user-item:hover {
+  background: var(--ant-color-bg-container-disabled);
+  border-color: var(--ant-color-border);
+}
+
+.user-item.active {
+  background: var(--ant-color-primary-bg);
+  border-color: var(--ant-color-primary);
+}
+
+.user-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.username {
+  font-weight: 500;
+  font-size: 13px;
+}
+
+.user-status {
+  display: flex;
+  gap: 4px;
+}
+
+/* 右侧详情区域 */
+.detail-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.no-selection {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--ant-color-border);
+  border-radius: 8px;
+  background: var(--ant-color-bg-container);
+}
+
+.detail-content {
+  flex: 1;
+  display: flex;
+  gap: 16px;
+  min-height: 0;
+}
+
+/* 记录条目区域 */
+.records-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+
+.records-section {
+  flex-shrink: 0;
+}
+
+.records-card {
   border: 1px solid var(--ant-color-border);
   border-radius: 8px;
 }
 
-.statistics-section {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+.record-count {
+  font-size: 12px;
+  color: var(--ant-color-text-secondary);
 }
 
-.stat-item h4 {
-  margin: 0 0 8px 0;
-  font-size: 14px;
-  font-weight: 600;
+.records-list {
+  max-height: 300px;
+  overflow-y: auto;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 6px;
+  background: var(--ant-color-bg-layout);
+}
+
+.record-item {
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--ant-color-border-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
 }
 
-.detail-modal .log-content {
-  max-height: 60vh;
+.record-item:last-child {
+  border-bottom: none;
+}
+
+.record-item:hover {
+  background: var(--ant-color-bg-container-disabled);
+}
+
+.record-item.active {
+  background: var(--ant-color-primary-bg);
+  border-left: 3px solid var(--ant-color-primary);
+}
+
+.record-item.success {
+  border-left: 3px solid var(--ant-color-success);
+}
+
+.record-item.error {
+  border-left: 3px solid var(--ant-color-error);
+}
+
+.record-item.active.success {
+  border-left: 3px solid var(--ant-color-primary);
+}
+
+.record-item.active.error {
+  border-left: 3px solid var(--ant-color-primary);
+}
+
+.record-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.record-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.record-time {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ant-color-text);
+}
+
+.record-file {
+  font-size: 11px;
+  color: var(--ant-color-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.record-indicator {
+  flex-shrink: 0;
+  width: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--ant-color-primary);
+}
+
+.statistics-section {
+  flex: 1;
+  min-height: 0;
+}
+
+.stat-card {
+  border: 1px solid var(--ant-color-border);
+  border-radius: 8px;
+  height: fit-content;
+}
+
+.recruit-stats,
+.drop-stats {
+  min-height: 120px;
+}
+
+.no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+}
+
+.error-section {
+  margin-top: 16px;
+}
+
+.error-card {
+  border: 1px solid var(--ant-color-error-border);
+  border-radius: 8px;
+}
+
+/* 日志区域 */
+.log-area {
+  width: 400px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.log-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ant-color-border);
+  border-radius: 8px;
+}
+
+.log-card :deep(.ant-card-body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+}
+
+.log-content {
+  flex: 1;
+  max-height: 500px;
   overflow-y: auto;
-  background: var(--ant-color-bg-container);
+  background: var(--ant-color-bg-layout);
   border: 1px solid var(--ant-color-border);
   border-radius: 6px;
-  padding: 16px;
-}
-
-.detail-modal .log-content pre {
-  margin: 0;
-  white-space: pre-wrap;
-  word-wrap: break-word;
+  padding: 12px;
   font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
   font-size: 12px;
   line-height: 1.4;
 }
 
+.log-content pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
 .no-log {
-  text-align: center;
-  padding: 40px 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 /* 按钮样式 */
@@ -544,4 +957,60 @@ const getDateStatusColor = (users: Record<string, HistoryData>) => {
   border-color: var(--ant-color-primary);
   color: var(--ant-color-primary);
 }
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .history-layout {
+    flex-direction: column;
+  }
+  
+  .date-sidebar {
+    width: 100%;
+    max-height: 300px;
+  }
+  
+  .detail-content {
+    flex-direction: column;
+  }
+  
+  .log-area {
+    width: 100%;
+    max-height: 400px;
+  }
+}
+
+/* 统计数据标题样式 */
+.stat-subtitle {
+  font-size: 12px;
+  color: var(--ant-color-text-secondary);
+  font-weight: normal;
+  margin-left: 8px;
+}
+
+/* 滚动条样式 */
+.date-list::-webkit-scrollbar,
+.log-content::-webkit-scrollbar,
+.records-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.date-list::-webkit-scrollbar-track,
+.log-content::-webkit-scrollbar-track,
+.records-list::-webkit-scrollbar-track {
+  background: var(--ant-color-bg-container);
+  border-radius: 3px;
+}
+
+.date-list::-webkit-scrollbar-thumb,
+.log-content::-webkit-scrollbar-thumb,
+.records-list::-webkit-scrollbar-thumb {
+  background: var(--ant-color-border);
+  border-radius: 3px;
+}
+
+.date-list::-webkit-scrollbar-thumb:hover,
+.log-content::-webkit-scrollbar-thumb:hover,
+.records-list::-webkit-scrollbar-thumb:hover {
+  background: var(--ant-color-border-secondary);
+}
 </style>