JiXinHui
/
YingXingAI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 优化聊天历史组件样式，添加底部空白区域及调整聊天项间距

This commit is contained in:
yangzhe 2025-07-11 16:04:45 +08:00
parent 8cfd8d3e9c
commit fd51d05c85
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/ChatHistory.vue
View File

@ -12,7 +12,7 @@
新建对话 新建对话
</text> </text>
</view> </view>
<scroll-view scroll-y class="chat-history-list"> <scroll-view scroll-y class="chat-history-list" :show-scrollbar="false">
<!-- 使用新的数据结构渲染聊天历史 --> <!-- 使用新的数据结构渲染聊天历史 -->
<view <view
v-for="(group, groupIndex) in chatHistoryList3" v-for="(group, groupIndex) in chatHistoryList3"
@ -38,6 +38,9 @@
<text class="chat-text">{{ item.title }}</text> <text class="chat-text">{{ item.title }}</text>
</view> </view>
</view> </view>
<!-- 添加底部空白区域 -->
<view class="bottom-space"></view>
</scroll-view> </scroll-view>
<view class="drawer-footer"> <view class="drawer-footer">
@ -143,6 +146,7 @@ export default {
.chat-history-list { .chat-history-list {
flex: 1; flex: 1;
height: calc(100vh - 360rpx); height: calc(100vh - 360rpx);
padding-bottom: 20rpx;
.chat-day { .chat-day {
display: flex; display: flex;
@ -159,6 +163,9 @@ export default {
.chat-item { .chat-item {
padding: 24rpx 30rpx; padding: 24rpx 30rpx;
border-radius: 16rpx; border-radius: 16rpx;
margin-bottom: 4rpx;
position: relative;
overflow: hidden;
.chat-text { .chat-text {
font-size: 28rpx; font-size: 28rpx;
@ -168,6 +175,7 @@ export default {
&-active { &-active {
background-color: #4f6aff; background-color: #4f6aff;
box-shadow: 0 2rpx 8rpx rgba(79, 106, 255, 0.3);
.chat-text { .chat-text {
color: #fff; color: #fff;
@ -176,6 +184,11 @@ export default {
} }
} }
.bottom-space {
height: 30rpx;
width: 100%;
}
.drawer-footer { .drawer-footer {
margin-top: 20rpx; margin-top: 20rpx;
height: 130rpx; height: 130rpx;