EasyFlow-Tech-Dev/EasyFlow
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化聊天历史筛选布局

Browse Source
This commit is contained in:
陈子默
2026-07-27 19:41:34 +08:00
parent b0ed512e97
commit a904f63ec8
1 changed files with 168 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
easyflow-ui-admin/app/src/views/ai/chatHistory/index.vue
View File

@@ -5,9 +5,9 @@ import { computed, onMounted, ref } from 'vue';
import { useEasyFlowDrawer } from '@easyflow/common-ui';
import {
createChatVariantSwitchController,
ChatTimeHistoryMapper,
ChatTimeTimelineBuilder,
createChatVariantSwitchController,
} from '@easyflow/utils';
import { Search } from '@element-plus/icons-vue';
@@ -60,7 +60,10 @@ const messagePage = ref({
pageSize: 20,
});
const variantSwitchStateVersion = ref(0);
const variantSwitchController = createChatVariantSwitchController<any, ChatTimeTimelineItem>({
const variantSwitchController = createChatVariantSwitchController<
any,
ChatTimeTimelineItem
>({
mapRecords: (records) => ChatTimeHistoryMapper.fromHistoryRecords(records),
onStateChange: () => {
variantSwitchStateVersion.value += 1;
@@ -245,7 +248,8 @@ function prefetchVisibleVariants() {
Number(item.variantCount || 0) > 1
) {
variantSwitchController.prefetchVariants({
fetchVariants: () => fetchRoundVariants(sessionId, String(item.roundId)),
fetchVariants: () =>
fetchRoundVariants(sessionId, String(item.roundId)),
roundId: item.roundId,
sessionId,
});
@@ -254,7 +258,7 @@ function prefetchVisibleVariants() {
}
function currentSwitchingRoundIds() {
variantSwitchStateVersion.value;
void variantSwitchStateVersion.value;
const sessionId = String(currentSession.value?.id || '');
if (!sessionId) {
return [];
@@ -262,7 +266,8 @@ function currentSwitchingRoundIds() {
return messageList.value
.filter(
(item) =>
item.roundId && variantSwitchController.isSwitching(sessionId, item.roundId),
item.roundId &&
variantSwitchController.isSwitching(sessionId, item.roundId),
)
.map((item) => String(item.roundId));
}
@@ -373,10 +378,11 @@ function closeDetail() {
</script>
<template>
<div class="chat-history-page flex h-full flex-col gap-6 p-6">
<ListPageShell class="flex-1" :content-padding="20">
<div class="chat-history-page flex h-full flex-col p-6">
<ListPageShell class="flex-1" surface="plain" :content-padding="0">
<template #filters>
<div class="chat-history-page__filters">
<div class="chat-history-page__filter-main">
<ElSelect
v-model="query.assistantId"
clearable
@@ -394,12 +400,15 @@ function closeDetail() {
:prefix-icon="Search"
@keyup.enter="handleSearch"
/>
</div>
<div class="chat-history-page__date-tools">
<div class="chat-history-page__quick-ranges">
<ElButton
v-for="item in quickRangeOptions"
:key="item.value"
:type="quickRange === item.value ? 'primary' : 'default'"
class="chat-history-page__quick-range-button"
:class="{ 'is-active': quickRange === item.value }"
@click="applyQuickRange(item.value)"
>
{{ item.label }}
@@ -414,7 +423,16 @@ function closeDetail() {
end-placeholder="结束时间"
@change="handleTimeRangeChange"
/>
<ElButton type="primary" @click="handleSearch">查询</ElButton>
<ElButton
type="primary"
:icon="Search"
:loading="loading"
class="chat-history-page__search-button"
@click="handleSearch"
>
查询
</ElButton>
</div>
</div>
</template>
@@ -499,7 +517,6 @@ function closeDetail() {
<div v-if="pageState.total > 0" class="chat-history-page__pagination">
<ElPagination
background
layout="total, sizes, prev, pager, next, jumper"
:current-page="query.pageNumber"
:page-size="query.pageSize"
@@ -532,8 +549,26 @@ function closeDetail() {
.chat-history-page__filters {
display: flex;
flex-wrap: wrap;
gap: 12px;
gap: var(--space-3) var(--space-4);
align-items: center;
justify-content: space-between;
width: 100%;
}
.chat-history-page__filter-main,
.chat-history-page__date-tools {
display: flex;
gap: var(--space-3);
align-items: center;
min-width: 0;
}
.chat-history-page__filter-main {
flex: 1 1 400px;
}
.chat-history-page__date-tools {
flex: 0 1 auto;
}
.chat-history-page__filter-control {
@@ -542,21 +577,54 @@ function closeDetail() {
.chat-history-page__filter-control.is-select,
.chat-history-page__filter-control.is-input {
width: 220px;
width: 200px;
}
.chat-history-page__filter-control.is-input {
flex: 1 1 220px;
max-width: 280px;
}
.chat-history-page__filter-control.is-range {
width: 360px;
width: 320px;
}
.chat-history-page__quick-ranges {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
gap: var(--space-1);
padding: var(--space-1);
white-space: nowrap;
background: hsl(var(--surface-contrast-soft));
border-radius: var(--radius-control);
}
.chat-history-page__quick-range-button {
min-width: 88px;
min-width: auto;
height: var(--space-8);
padding: 0 var(--space-3);
margin: 0;
color: hsl(var(--text-muted));
background: transparent;
border: 0;
border-radius: calc(var(--radius-control) - 2px);
box-shadow: none;
}
.chat-history-page__quick-range-button:hover,
.chat-history-page__quick-range-button:focus-visible {
color: hsl(var(--text-strong));
background: hsl(var(--surface-panel));
}
.chat-history-page__quick-range-button.is-active {
font-weight: 600;
color: hsl(var(--nav-item-active-foreground));
background: hsl(var(--surface-panel));
}
.chat-history-page__search-button {
flex: none;
min-width: 80px;
}
.chat-history-page__content {
@@ -570,17 +638,6 @@ function closeDetail() {
flex: 1;
min-height: 0;
overflow: hidden;
background: linear-gradient(
180deg,
hsl(var(--glass-border) / 28%) 0%,
hsl(var(--glass-tint) / 40%) 14%,
hsl(var(--surface-panel) / 94%) 100%
);
border: 1px solid hsl(var(--glass-border) / 42%);
border-radius: 24px;
box-shadow:
inset 0 1px 0 hsl(var(--glass-border) / 54%),
0 24px 42px -36px hsl(var(--foreground) / 16%);
}
.chat-history-page__table {
@@ -617,39 +674,31 @@ function closeDetail() {
}
.chat-history-page__assistant-chip {
display: inline-flex;
align-items: center;
display: inline-block;
max-width: 100%;
min-height: 28px;
padding: 0 12px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
font-weight: 600;
font-size: 13px;
font-weight: 500;
color: hsl(var(--nav-item-active-foreground));
white-space: nowrap;
background: hsl(var(--glass-tint) / 76%);
border: 1px solid hsl(var(--glass-border) / 48%);
border-radius: 999px;
}
.chat-history-page__user-cell,
.chat-history-page__time-cell {
font-size: 13px;
color: hsl(var(--text-secondary));
color: hsl(var(--text-muted));
}
.chat-history-page__count-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
padding: 4px 10px;
font-size: 12px;
min-width: 24px;
font-size: 13px;
font-weight: 600;
color: hsl(var(--text-strong));
background: hsl(var(--surface-contrast-soft) / 88%);
border-radius: 999px;
font-variant-numeric: tabular-nums;
}
.chat-history-page__detail-action {
@@ -667,7 +716,17 @@ function closeDetail() {
.chat-history-page__pagination {
display: flex;
justify-content: flex-end;
padding-top: 20px;
padding: var(--space-4) var(--space-5);
border-top: 1px solid hsl(var(--divider-faint) / 52%);
}
.chat-history-page :deep(.list-page-shell__toolbar) {
padding: 0 0 var(--space-4);
border-bottom: 1px solid hsl(var(--divider-faint) / 58%);
}
.chat-history-page :deep(.list-page-shell__content) {
border-radius: var(--radius-panel);
}
.chat-history-page__content :deep(.el-table),
@@ -692,14 +751,19 @@ function closeDetail() {
font-size: 12px;
font-weight: 600;
color: hsl(var(--text-muted));
background: hsl(var(--surface-contrast-soft) / 54%);
border-bottom-color: hsl(var(--divider-faint) / 28%);
background: hsl(var(--table-header-bg));
border-bottom-color: hsl(var(--table-row-border));
}
.chat-history-page__content :deep(.el-table th.el-table__cell:first-child),
.chat-history-page__content :deep(.el-table th.el-table__cell:last-child) {
border-radius: 0;
}
.chat-history-page__content :deep(.el-table td.el-table__cell) {
padding: 14px 0;
background: transparent;
border-bottom-color: hsl(var(--divider-faint) / 22%);
border-bottom-color: hsl(var(--table-row-border));
}
.chat-history-page__content
@@ -713,8 +777,13 @@ function closeDetail() {
}
@media (max-width: 1024px) {
.chat-history-page__date-tools {
flex: 1 1 100%;
}
.chat-history-page__filter-control.is-range {
width: min(100%, 360px);
flex: 1 1 280px;
width: auto;
}
}
@@ -724,12 +793,31 @@ function closeDetail() {
}
.chat-history-page__filters {
gap: 10px;
gap: var(--space-3);
}
.chat-history-page__filter-main,
.chat-history-page__date-tools {
flex-wrap: wrap;
width: 100%;
}
.chat-history-page__filter-control.is-select,
.chat-history-page__filter-control.is-input,
.chat-history-page__filter-control.is-range {
flex: 1 1 100%;
max-width: none;
width: 100%;
}
.chat-history-page__quick-ranges {
display: grid;
flex: 1 1 100%;
grid-template-columns: repeat(3, 1fr);
width: 100%;
}
.chat-history-page__search-button {
width: 100%;
}
}