对话时间格式化处理

yangyin

2024-10-31 46a5e875efefb071a654bdf14da0e662347a986b

对话时间格式化处理

 src/components/chat/Chat.vue

@@ -13,7 +13,7 @@
                        v-for="(item, index) of computedMessageList"
                        :key="`${item.historyId}_${item.role}`"
                    >
                        <div class="absolute top-0 left-[72px] text-[#8d8e99]">{{ item?.createTime?.slice(5, 19) }}</div>
                        <div class="absolute top-0 left-[72px] text-[#8d8e99]">{{ item?.createTime }}</div>
                        <img
                            class="rounded-full size-12 flex-0"
                            :class="{ 'mr-4': item.role === RoleEnum.assistant, 'ml-4': item.role === RoleEnum.user }"

 src/components/chat/hooks/useScrollLoad.ts

@@ -1,8 +1,8 @@
import { Ref, ShallowRef, nextTick, onBeforeUnmount, ref, unref } from 'vue';
import moment from 'moment';
import { Ref, ShallowRef, computed, nextTick, onBeforeUnmount, ref, unref } from 'vue';
import { LOAD_CHAT_LIMIT } from '../constants';
import { AnswerType, ChatContent, ChatMessage, RoleEnum } from '../model/types';
import { GetHistoryAnswer, QueryHistoryDetail } from '/@/api/ai/chat';

type UseScrollLoadOption = {
    container: ShallowRef<HTMLDivElement>;
    historyGroupId: string | Ref<string>;
@@ -28,7 +28,11 @@
            history_id: historyId,
        });
    };

    const formatShowTimeYear = computed(() => {
        return (str) => {
            return moment(str).format('MM月DD日 HH:mm:ss');
        };
    });
    /**
     * 获取用户回复数据，并插入到对话当中去
     */
@@ -57,7 +61,8 @@
            const currentUserMsg = tmpMessageList[insertIndex - 1];
            currentUserMsg.content.values = item?.answer?.question ?? currentUserMsg.content.values;

            const mapUser = userItemIdMap.get(item.answer.history_id)
            const mapUser = userItemIdMap.get(item.answer.history_id);
            const answerTime = formatShowTimeYear.value(mapUser?.create_time);
            tmpMessageList.splice(
                insertIndex,
                0,
@@ -69,7 +74,7 @@
                            content: parseAnswerContent(item.answer),
                            state: item.answer_state,
                            sectionAId: mapUser?.section_a_id,
                            createTime:mapUser?.create_time
                            createTime: answerTime,
                      }
            );
            i++;
@@ -101,7 +106,6 @@
    //滚动监听
    async function onChatListScroll() {
        if (container.value.scrollTop == 0) {

            // 更多数据正在加载时
            if (moreIsLoading.value) {
                return;
@@ -117,9 +121,9 @@
                moreIsLoading.value = false;
            });
            //更新后，等待页面渲染完毕再去拿scrollHeight,否则拿到的是之前的
            nextTick(()=>{
                nextTick(()=>{
                    nextTick(()=>{
            nextTick(() => {
                nextTick(() => {
                    nextTick(() => {
                        let h2 = container.value.scrollHeight;
                        container.value.scrollTo({
                            //顶部在原先基础上往下滚动50px，露出新加载数据的一点
@@ -127,10 +131,9 @@
                            top: h2 - h1,
                            behavior: 'instant', //auto-自动滚动 instant-瞬间滚动 smooth-平滑滚动
                        });
                    })
                })
            })

                    });
                });
            });
        }
    }