Files
ks-app-employment-service/pages/chat/chat.vue
史典卓 0216f6053a flat:AI+
2025-03-28 15:19:42 +08:00

222 lines
6.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container">
<!-- 抽屉遮罩层 -->
<view v-if="isDrawerOpen" class="overlay" @click="toggleDrawer"></view>
<!-- 抽屉窗口 -->
<view class="drawer" :class="{ open: isDrawerOpen }">
<view class="drawer-content">
<view class="drawer-title">历史对话</view>
<scroll-view scroll-y :show-scrollbar="false" class="chat-scroll">
<view
class="drawer-rows"
@click="changeDialogue(item)"
v-for="(item, index) in tabeList"
:key="item.id"
>
<view
v-if="!item.isTitle"
class="drawer-row-list"
:class="{ 'drawer-row-active': item.sessionId === chatSessionID }"
>
{{ item.title }}
</view>
<view class="drawer-row-title" v-else>
{{ item.title }}
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 主要内容挤压效果 -->
<view class="main-content" :class="{ shift: isDrawerOpen }">
<!-- header -->
<header class="head">
<view class="main-header">
<image src="/static/icon/Hamburger-button.png" @click="toggleDrawer"></image>
<view class="title">青岛市岗位推荐</view>
<image src="/static/icon/Comment-one.png" @click="addNewDialogue"></image>
</view>
</header>
<view class="chatmain-warpper">
<ai-paging ref="paging"></ai-paging>
</view>
</view>
</view>
</template>
<script setup>
import { ref, inject, nextTick } from 'vue';
const { $api, navTo } = inject('globalFunction');
import { onLoad, onShow } from '@dcloudio/uni-app';
import useChatGroupDBStore from '@/stores/userChatGroupStore';
import aiPaging from './components/ai-paging.vue';
import { storeToRefs } from 'pinia';
const { isTyping, tabeList, chatSessionID } = storeToRefs(useChatGroupDBStore());
const isDrawerOpen = ref(false);
const scrollIntoView = ref(false);
import config from '@/config';
const paging = ref(null);
onLoad(() => {
// useChatGroupDBStore().getHistory();
});
onShow(() => {
nextTick(() => {
paging.value?.colseFile();
});
});
const toggleDrawer = () => {
isDrawerOpen.value = !isDrawerOpen.value;
};
const addNewDialogue = () => {
$api.msg('新对话');
useChatGroupDBStore().addNewDialogue();
};
const changeDialogue = (item) => {
if (item.sessionId) {
paging.value?.closeGuess();
useChatGroupDBStore().changeDialogue(item);
toggleDrawer();
nextTick(() => {
paging.value?.scrollToBottom();
});
}
};
</script>
<style lang="stylus" scoped>
/* 页面容器 */
.container {
position: fixed;
width: 100vw;
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
overflow: hidden;
}
/* 遮罩层 */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 999;
}
/* 抽屉窗口 */
.drawer {
position: fixed;
top: 0;
left: 0; /* 如果要右侧弹出改为 right: 0; */
width: 500rpx;
height: 100vh;
background: #e7e7e6;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
z-index: 1000;
}
/* 抽屉展开 */
.drawer.open {
box-shadow: 4rpx 0 20rpx rgba(0, 0, 0, 0.2);
transform: translateX(0);
}
/* 抽屉内容 */
.drawer-content
height: 100%
.drawer-title
height: calc(88rpx + env(safe-area-inset-top));
line-height: calc(88rpx + env(safe-area-inset-top));
padding: 0 20rpx;
background: rgba(71, 120, 236, 1);
color: #FFFFFF;
font-size: 30rpx
.chat-scroll
height: calc(100% - 88rpx + env(safe-area-inset-top));
.drawer-rows
padding: 0 20rpx;
// border-bottom: 2rpx dashed #e8e8e8
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
.drawer-row-title
color: #5d5d5d;
font-weight: bold;
font-size: 24rpx
line-height: 88rpx
height: 88rpx
margin-top: 16rpx
// border-bottom: 2rpx dashed #5d5d5d
.drawer-row-list
height: 66rpx;
line-height: 66rpx
color: #000000
font-size: 28rpx
overflow: hidden
text-overflow: ellipsis
.drawer-row-active
.drawer-row-list:active
background: #DCDCDB
border-radius: 8rpx
padding: 0 10rpx
/* 主要内容区域 */
.main-content
width: 100%;
height: 100vh;
// background: #f8f8f8;
transition: margin-left 0.3s ease-in-out;
position: relative
background: #FFFFFF
.head
display: block;
box-sizing: border-box;
height: calc(88rpx + env(safe-area-inset-top));
user-select: none;
.main-header
position: fixed;
left: var(--window-left);
right: var(--window-right);
height: calc(88rpx + env(safe-area-inset-top));
padding-top: calc(14rpx + env(safe-area-inset-top));
border: 2rpx solid #F4F4F4;
background: #FFFFFF
z-index: 998;
transition-property: all;
display: flex;
align-items: center;
justify-content: space-between
font-size: 28rpx
color: #000000
padding: 0 30rpx;
font-weight: bold
text-align: center
image
width: 36rpx;
height: 37rpx;
.chatmain-warpper
height: calc(100% - 88rpx - env(safe-area-inset-top));
position: relative;
display: block;
box-sizing: border-box;
width: 100%;
/* 页面被挤压时向右移动 */
.main-content.shift {
margin-left: 500rpx;
}
</style>