automas_admin/AUTO-MAS-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 重布局历史记录，使日志拥有更大的横向空间

Browse Source
This commit is contained in:
Alirea
2025-09-17 01:16:23 +08:00
parent 308bb83bec
commit aacf32ac61
1 changed files with 70 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
frontend/src/views/History.vue
View File

@@ -92,7 +92,7 @@
<div class="date-sidebar"> <div class="date-sidebar">
<!-- 日期折叠列表 --> <!-- 日期折叠列表 -->
<div class="date-list"> <div class="date-list">
<a-collapse v-model:activeKey="activeKeys" ghost> <a-collapse v-model:activeKey="activeKeys" ghost accordion>
<a-collapse-panel <a-collapse-panel
v-for="dateGroup in historyData" v-for="dateGroup in historyData"
:key="dateGroup.date" :key="dateGroup.date"
@@ -133,7 +133,7 @@
</div> </div>
<div v-else class="detail-content"> <div v-else class="detail-content">
<!-- 左侧：记录条目和统计数据 --> <!-- 中间：记录条目和统计数据 -->
<div class="records-area"> <div class="records-area">
<!-- 记录条目列表 --> <!-- 记录条目列表 -->
<div class="records-section"> <div class="records-section">
@@ -194,79 +194,73 @@
<!-- 统计数据 --> <!-- 统计数据 -->
<div class="statistics-section"> <div class="statistics-section">
<a-row :gutter="16"> <!-- 公招统计 -->
<!-- 公招统计 --> <a-card size="small" class="stat-card">
<a-col :span="12"> <template #title>
<a-card size="small" class="stat-card"> <span>公招统计</span>
<template #title> <span v-if="selectedRecordIndex >= 0" class="stat-subtitle"
<span>公招统计</span> >（当前记录）</span
<span v-if="selectedRecordIndex >= 0" class="stat-subtitle" >
>（当前记录）</span <span v-else class="stat-subtitle">（用户总计）</span>
> </template>
<span v-else class="stat-subtitle">（用户总计）</span> <template #extra>
</template> <UserOutlined />
<template #extra> </template>
<UserOutlined /> <div v-if="currentStatistics.recruit_statistics" class="recruit-stats">
</template> <a-row :gutter="8">
<div v-if="currentStatistics.recruit_statistics" class="recruit-stats"> <a-col
v-for="(count, star) in currentStatistics.recruit_statistics"
:key="star"
:span="8"
>
<a-statistic
:title="`${star}星`"
:value="count"
:value-style="{ fontSize: '16px' }"
/>
</a-col>
</a-row>
</div>
<div v-else class="no-data">
<a-empty description="暂无公招数据" :image="false" />
</div>
</a-card>
<!-- 掉落统计 -->
<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>
<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-row :gutter="8">
<a-col <a-col v-for="(count, item) in drops" :key="item" :span="12">
v-for="(count, star) in currentStatistics.recruit_statistics"
:key="star"
:span="8"
>
<a-statistic <a-statistic
:title="`${star}星`" :title="item"
:value="count" :value="count"
:value-style="{ fontSize: '16px' }" :value-style="{ fontSize: '14px' }"
/> />
</a-col> </a-col>
</a-row> </a-row>
</div> </a-collapse-panel>
<div v-else class="no-data"> </a-collapse>
<a-empty description="暂无公招数据" :image="false" /> </div>
</div> <div v-else class="no-data">
</a-card> <a-empty description="暂无掉落数据" :image="false" />
</a-col> </div>
</a-card>
<!-- 掉落统计 -->
<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>
<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> </div>
@@ -822,7 +816,8 @@ const getDateStatusColor = (users: Record<string, HistoryData>) => {
/* 记录条目区域 */ /* 记录条目区域 */
.records-area { .records-area {
flex: 1; width: 400px;
flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
@@ -929,6 +924,9 @@ const getDateStatusColor = (users: Record<string, HistoryData>) => {
.statistics-section { .statistics-section {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
display: flex;
flex-direction: column;
gap: 16px;
} }
.stat-card { .stat-card {
@@ -960,8 +958,8 @@ const getDateStatusColor = (users: Record<string, HistoryData>) => {
/* 日志区域 */ /* 日志区域 */
.log-area { .log-area {
width: 400px; flex: 1;
flex-shrink: 0; min-width: 300px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }