22import { Delete , EditPen , MoreFilled } from ' @element-plus/icons-vue'
33import { type Chat , chatApi } from ' @/api/chat.ts'
44import { computed } from ' vue'
5+ import dayjs from ' dayjs'
6+ import { getDate } from ' @/utils/utils.ts'
7+ import { groupBy } from ' lodash-es'
8+ import { useI18n } from ' vue-i18n'
59
610const props = withDefaults (
711 defineProps <{
@@ -16,6 +20,64 @@ const props = withDefaults(
1620 }
1721)
1822
23+ const { t } = useI18n ()
24+
25+ function groupByDate(chat : Chat ) {
26+ const todayStart = dayjs (dayjs ().format (' YYYY-MM-DD' ) + ' 00:00:00' ).toDate ()
27+ const todayEnd = dayjs (dayjs ().format (' YYYY-MM-DD' ) + ' 23:59:59' ).toDate ()
28+ const weekStart = dayjs (dayjs ().subtract (7 , ' day' ).format (' YYYY-MM-DD' ) + ' 00:00:00' ).toDate ()
29+
30+ const time = getDate (chat .create_time )
31+
32+ if (time ) {
33+ if (time >= todayStart && time <= todayEnd ) {
34+ return t (' qa.today' )
35+ }
36+ if (time < todayStart && time >= weekStart ) {
37+ return t (' qa.week' )
38+ }
39+ if (time < weekStart ) {
40+ return t (' qa.earlier' )
41+ }
42+ }
43+
44+ return t (' qa.no_time' )
45+ }
46+
47+ const computedChatGroup = computed (() => {
48+ return groupBy (props .chatList , groupByDate )
49+ })
50+
51+ const computedChatList = computed (() => {
52+ const _list = []
53+ if (computedChatGroup .value [t (' qa.today' )]) {
54+ _list .push ({
55+ key: t (' qa.today' ),
56+ list: computedChatGroup .value [t (' qa.today' )],
57+ })
58+ }
59+ if (computedChatGroup .value [t (' qa.week' )]) {
60+ _list .push ({
61+ key: t (' qa.week' ),
62+ list: computedChatGroup .value [t (' qa.week' )],
63+ })
64+ }
65+ if (computedChatGroup .value [t (' qa.earlier' )]) {
66+ _list .push ({
67+ key: t (' qa.earlier' ),
68+ list: computedChatGroup .value [t (' qa.earlier' )],
69+ })
70+ }
71+ if (computedChatGroup .value [t (' qa.no_time' )]) {
72+ _list .push ({
73+ key: t (' qa.no_time' ),
74+ list: computedChatGroup .value [t (' qa.no_time' )],
75+ })
76+ }
77+
78+ return _list
79+ })
80+
1981const emits = defineEmits ([' chatSelected' , ' chatRenamed' , ' chatDeleted' , ' update:loading' ])
2082
2183const _loading = computed ({
@@ -106,28 +168,31 @@ function handleCommand(command: string | number | object, chat: Chat) {
106168<template >
107169 <el-scrollbar ref =" chatListRef" >
108170 <div class =" chat-list-inner" >
109- <template v-for =" chat in chatList " :key =" chat .id " >
110- <div
111- class =" chat-list-item"
112- :class =" { active: currentChatId === chat.id }"
113- @click =" onClickHistory(chat)"
114- >
115- <span class =" title" >{{ chat.brief ?? 'Untitled' }}</span >
116- <el-button class =" icon-more" link type =" primary" @click.stop >
117- <el-dropdown trigger =" click" @command =" (cmd: any) => handleCommand(cmd, chat)" >
118- <el-icon >
119- <MoreFilled />
120- </el-icon >
121- <template #dropdown >
122- <el-dropdown-menu >
123- <el-dropdown-item :icon =" EditPen" command =" rename" >Rename</el-dropdown-item >
124- <el-dropdown-item :icon =" Delete" command =" delete" >Delete</el-dropdown-item >
125- </el-dropdown-menu >
126- </template >
127- </el-dropdown >
128- </el-button >
129- </div >
130- </template >
171+ <div v-for =" group in computedChatList" :key =" group.key" class =" group" >
172+ <div class =" group-title" >{{ group.key }}</div >
173+ <template v-for =" chat in group .list " :key =" chat .id " >
174+ <div
175+ class =" chat-list-item"
176+ :class =" { active: currentChatId === chat.id }"
177+ @click =" onClickHistory(chat)"
178+ >
179+ <span class =" title" >{{ chat.brief ?? 'Untitled' }}</span >
180+ <el-button class =" icon-more" link type =" primary" @click.stop >
181+ <el-dropdown trigger =" click" @command =" (cmd: any) => handleCommand(cmd, chat)" >
182+ <el-icon >
183+ <MoreFilled />
184+ </el-icon >
185+ <template #dropdown >
186+ <el-dropdown-menu >
187+ <el-dropdown-item :icon =" EditPen" command =" rename" >Rename</el-dropdown-item >
188+ <el-dropdown-item :icon =" Delete" command =" delete" >Delete</el-dropdown-item >
189+ </el-dropdown-menu >
190+ </template >
191+ </el-dropdown >
192+ </el-button >
193+ </div >
194+ </template >
195+ </div >
131196 </div >
132197 </el-scrollbar >
133198</template >
@@ -144,15 +209,31 @@ function handleCommand(command: string | number | object, chat: Chat) {
144209 display : flex ;
145210 flex-direction : column ;
146211
147- gap : 8px ;
212+ gap : 16px ;
213+
214+ .group {
215+ display : flex ;
216+ flex-direction : column ;
217+
218+ .group-title {
219+ padding : 0 8px ;
220+ color : rgba (100 , 106 , 115 , 1 );
221+ line-height : 20px ;
222+ font-weight : 500 ;
223+ font-size : 12px ;
224+
225+ margin-bottom : 4px ;
226+ }
227+ }
148228
149229 .chat-list-item {
150230 width : 100% ;
151- height : 42 px ;
231+ height : 40 px ;
152232 cursor : pointer ;
153233 border-radius : 6px ;
154- line-height : 1 em ;
234+ line-height : 22 px ;
155235 font-size : 14px ;
236+ font-weight : 400 ;
156237
157238 display : flex ;
158239 align-items : center ;
0 commit comments