xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 消息ui优化

Browse Source
This commit is contained in:
Gsh
2026-01-31 23:38:39 +08:00
parent 6af3fb44f4
commit 3b6887dc2e
18 changed files with 2640 additions and 1938 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
Yi.Ai.Vue3/src/pages/chat/components/ChatHeader.vue Normal file
View File

@@ -0,0 +1,126 @@
<!-- 聊天页面头部组件 -->
<script setup lang="ts">
import Collapse from '@/layouts/components/Header/components/Collapse.vue';
import CreateChat from '@/layouts/components/Header/components/CreateChat.vue';
import TitleEditing from '@/layouts/components/Header/components/TitleEditing.vue';
import { useSessionStore } from '@/stores/modules/session';
import { computed } from 'vue';
const props = defineProps<{
/** 是否显示标题编辑 */
showTitle?: boolean;
/** 额外的左侧内容 */
leftExtra?: boolean;
}>();
const sessionStore = useSessionStore();
const currentSession = computed(() => sessionStore.currentSession);
</script>
<template>
<div class="chat-header">
<div class="chat-header__content">
<div class="chat-header__left">
<Collapse />
<CreateChat />
<div
v-if="showTitle && currentSession"
class="chat-header__divider"
/>
</div>
<div v-if="showTitle" class="chat-header__center">
<TitleEditing />
</div>
<div v-if="$slots.right" class="chat-header__right">
<slot name="right" />
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.chat-header {
display: flex;
align-items: center;
width: 100%;
height: 60px;
flex-shrink: 0;
&__content {
display: flex;
align-items: center;
width: 100%;
height: 100%;
}
&__left {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
padding-left: 20px;
}
&__divider {
width: 1px;
height: 30px;
background-color: rgba(217, 217, 217);
}
&__center {
flex: 1;
min-width: 0;
margin-left: 12px;
overflow: hidden;
}
&__right {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
padding-right: 20px;
}
}
// 响应式
@media (max-width: 768px) {
.chat-header {
height: 50px;
&__left {
padding-left: 8px;
gap: 8px;
}
&__center {
margin-left: 8px;
}
&__right {
padding-right: 12px;
}
}
}
@media (max-width: 480px) {
.chat-header {
height: 48px;
&__left {
padding-left: 4px;
gap: 6px;
}
&__center {
margin-left: 6px;
}
&__right {
padding-right: 8px;
}
}
}
</style>

206
Yi.Ai.Vue3/src/pages/chat/components/ChatSender.vue Normal file
View File

@@ -0,0 +1,206 @@
<!-- 聊天发送区域组件 -->
<script setup lang="ts">
import type { FilesCardProps } from 'vue-element-plus-x/types/FilesCard';
import { ArrowLeftBold, ArrowRightBold, Loading } from '@element-plus/icons-vue';
import { ElIcon } from 'element-plus';
import { watch, nextTick, ref } from 'vue';
import { Sender } from 'vue-element-plus-x';
import ModelSelect from '@/components/ModelSelect/index.vue';
import { useFilesStore } from '@/stores/modules/files';
const props = defineProps<{
/** 是否加载中 */
loading?: boolean;
/** 是否显示发送按钮 */
showSend?: boolean;
/** 最小行数 */
minRows?: number;
/** 最大行数 */
maxRows?: number;
/** 是否只读模式 */
readOnly?: boolean;
}>();
const emit = defineEmits<{
(e: 'submit', value: string): void;
(e: 'cancel'): void;
}>();
const modelValue = defineModel<string>({ default: '' });
const filesStore = useFilesStore();
const senderRef = ref<InstanceType<typeof Sender> | null>(null);
/**
* 删除文件卡片
*/
function handleDeleteCard(_item: FilesCardProps, index: number) {
filesStore.deleteFileByIndex(index);
}
/**
* 监听文件列表变化，自动展开/收起 Sender 头部
*/
watch(
() => filesStore.filesList.length,
(val) => {
nextTick(() => {
if (val > 0) {
senderRef.value?.openHeader();
} else {
senderRef.value?.closeHeader();
}
});
},
);
defineExpose({
senderRef,
focus: () => senderRef.value?.focus(),
blur: () => senderRef.value?.blur(),
});
</script>
<template>
<Sender
ref="senderRef"
v-model="modelValue"
class="chat-sender"
:auto-size="{
maxRows: maxRows ?? 6,
minRows: minRows ?? 2,
}"
variant="updown"
clearable
allow-speech
:loading="loading"
:read-only="readOnly"
@submit="(v) => emit('submit', v)"
@cancel="emit('cancel')"
>
<!-- 头部：文件附件区域 -->
<template #header>
<div class="chat-sender__header">
<Attachments
:items="filesStore.filesList"
:hide-upload="true"
@delete-card="handleDeleteCard"
>
<!-- 左侧滚动按钮 -->
<template #prev-button="{ show, onScrollLeft }">
<div
v-if="show"
class="chat-sender__scroll-btn chat-sender__scroll-btn--prev"
@click="onScrollLeft"
>
<ElIcon><ArrowLeftBold /></ElIcon>
</div>
</template>
<!-- 右侧滚动按钮 -->
<template #next-button="{ show, onScrollRight }">
<div
v-if="show"
class="chat-sender__scroll-btn chat-sender__scroll-btn--next"
@click="onScrollRight"
>
<ElIcon><ArrowRightBold /></ElIcon>
</div>
</template>
</Attachments>
</div>
</template>
<!-- 前缀：文件选择和模型选择 -->
<template #prefix>
<div class="chat-sender__prefix">
<FilesSelect />
<ModelSelect />
</div>
</template>
<!-- 后缀：加载动画 -->
<template #suffix>
<ElIcon v-if="loading" class="chat-sender__loading">
<Loading />
</ElIcon>
</template>
</Sender>
</template>
<style scoped lang="scss">
.chat-sender {
width: 100%;
&__header {
padding: 12px 12px 0 12px;
}
&__prefix {
display: flex;
flex: 1;
align-items: center;
gap: 8px;
flex: none;
width: fit-content;
overflow: hidden;
}
&__scroll-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.4);
background-color: #fff;
font-size: 10px;
cursor: pointer;
z-index: 10;
transition: all 0.2s ease;
&:hover {
background-color: #f3f4f6;
border-color: rgba(0, 0, 0, 0.15);
color: rgba(0, 0, 0, 0.6);
}
&--prev {
left: 8px;
}
&--next {
right: 8px;
}
}
&__loading {
margin-left: 8px;
color: var(--el-color-primary);
animation: rotating 2s linear infinite;
}
}
@keyframes rotating {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
// 响应式
@media (max-width: 768px) {
.chat-sender {
&__prefix {
flex-wrap: wrap;
gap: 6px;
}
}
}
</style>

90
Yi.Ai.Vue3/src/pages/chat/components/DeleteModeToolbar.vue Normal file
View File

@@ -0,0 +1,90 @@
<!-- 删除模式工具栏 -->
<script setup lang="ts">
import { ElButton } from 'element-plus';
const props = defineProps<{
selectedCount: number;
}>();
const emit = defineEmits<{
(e: 'confirm'): void;
(e: 'cancel'): void;
}>();
</script>
<template>
<div class="delete-toolbar">
<span class="delete-toolbar__count">已选择 {{ selectedCount }} 条消息</span>
<div class="delete-toolbar__actions">
<ElButton type="danger" size="small" @click="emit('confirm')">
确认删除
</ElButton>
<ElButton size="small" @click="emit('cancel')">
取消
</ElButton>
</div>
</div>
</template>
<style scoped lang="scss">
.delete-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
margin-bottom: 12px;
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
border: 1px solid #fed7aa;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
&__count {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
color: #ea580c;
&::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background: #ea580c;
border-radius: 50%;
}
}
&__actions {
display: flex;
gap: 6px;
}
}
// 深度选择器样式单独处理
:deep(.el-button) {
padding: 6px 12px;
font-size: 12px;
border-radius: 4px;
transition: all 0.2s ease;
&:hover {
background: #fff;
border-color: #fed7aa;
}
}
:deep(.el-button--danger) {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
border: none;
color: #fff;
&:hover {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
border-color: transparent;
}
}
</style>

555
Yi.Ai.Vue3/src/pages/chat/components/MessageItem.vue Normal file
View File

@@ -0,0 +1,555 @@
<!-- 单条消息组件 -->
<script setup lang="ts">
import type { ThinkingStatus } from 'vue-element-plus-x/types/Thinking';
import { Delete, Document, DocumentCopy, Edit, Refresh } from '@element-plus/icons-vue';
import { ElButton, ElCheckbox, ElIcon, ElInput, ElTooltip } from 'element-plus';
import MarkedMarkdown from '@/components/MarkedMarkdown/index.vue';
import type { MessageItem } from '@/composables/chat';
const props = defineProps<{
item: MessageItem;
isDeleteMode: boolean;
isEditing: boolean;
editContent: string;
isSending: boolean;
isSelected: boolean;
}>();
const emit = defineEmits<{
(e: 'toggleSelection', item: MessageItem): void;
(e: 'edit', item: MessageItem): void;
(e: 'cancelEdit'): void;
(e: 'submitEdit', item: MessageItem): void;
(e: 'update:editContent', value: string): void;
(e: 'copy', item: MessageItem): void;
(e: 'regenerate', item: MessageItem): void;
(e: 'delete', item: MessageItem): void;
(e: 'imagePreview', url: string): void;
}>();
/**
* 检查消息是否有有效ID
*/
function hasValidId(item: MessageItem): boolean {
return item.id !== undefined && (typeof item.id === 'string' || (typeof item.id === 'number' && item.id > 0));
}
/**
* 处理思考链状态变化
*/
function handleThinkingChange(payload: { value: boolean; status: ThinkingStatus }) {
// 可以在这里添加处理逻辑
}
</script>
<template>
<div
class="message-wrapper"
:class="{
'message-wrapper--ai': item.role !== 'user',
'message-wrapper--user': item.role === 'user',
'message-wrapper--delete-mode': isDeleteMode,
'message-wrapper--selected': isSelected && isDeleteMode,
}"
@click="isDeleteMode && item.id && emit('toggleSelection', item)"
>
<!-- 删除模式：勾选框 -->
<div v-if="isDeleteMode && item.id" class="message-wrapper__checkbox">
<ElCheckbox
:model-value="isSelected"
@click.stop
@update:model-value="emit('toggleSelection', item)"
/>
</div>
<!-- 消息内容区域 -->
<div class="message-wrapper__content">
<!-- 思考链（仅AI消息） -->
<template v-if="item.reasoning_content && !isDeleteMode && item.role !== 'user'">
<Thinking
v-model="item.thinlCollapse"
:content="item.reasoning_content"
:status="item.thinkingStatus"
class="message-wrapper__thinking"
@change="handleThinkingChange"
/>
</template>
<!-- AI 消息内容 -->
<template v-if="item.role !== 'user'">
<div class="message-content message-content--ai">
<MarkedMarkdown
v-if="item.content"
class="message-content__markdown"
:content="item.content"
/>
</div>
</template>
<!-- 用户消息内容 -->
<template v-if="item.role === 'user'">
<div
class="message-content message-content--user"
:class="{ 'message-content--editing': isEditing }"
>
<!-- 编辑模式 -->
<template v-if="isEditing">
<div class="message-content__edit-wrapper">
<ElInput
:model-value="editContent"
type="textarea"
:autosize="{ minRows: 3, maxRows: 10 }"
placeholder="编辑消息内容"
@update:model-value="emit('update:editContent', $event)"
/>
<div class="message-content__edit-actions">
<ElButton
type="primary"
size="small"
@click.stop="emit('submitEdit', item)"
>
发送
</ElButton>
<ElButton size="small" @click.stop="emit('cancelEdit')">
取消
</ElButton>
</div>
</div>
</template>
<!-- 正常显示模式 -->
<template v-else>
<!-- 图片列表 -->
<div v-if="item.images && item.images.length > 0" class="message-content__images">
<img
v-for="(image, index) in item.images"
:key="index"
:src="image.url"
:alt="image.name || '图片'"
class="message-content__image"
@click.stop="emit('imagePreview', image.url)"
>
</div>
<!-- 文件列表 -->
<div v-if="item.files && item.files.length > 0" class="message-content__files">
<div
v-for="(file, index) in item.files"
:key="index"
class="message-content__file-item"
>
<ElIcon class="message-content__file-icon">
<Document />
</ElIcon>
<span class="message-content__file-name">{{ file.name }}</span>
</div>
</div>
<!-- 文本内容 -->
<div v-if="item.content" class="message-content__text">
{{ item.content }}
</div>
</template>
</div>
</template>
</div>
<!-- 操作栏（非删除模式） -->
<div v-if="!isDeleteMode" class="message-wrapper__footer">
<div
class="message-wrapper__footer-content"
:class="{ 'message-wrapper__footer-content--ai': item.role !== 'user', 'message-wrapper__footer-content--user': item.role === 'user' }"
>
<!-- 时间和token信息 -->
<div class="message-wrapper__info">
<span v-if="item.creationTime" class="message-wrapper__time">
{{ item.creationTime }}
</span>
<span
v-if="item.role !== 'user' && item?.tokenUsage?.total"
class="message-wrapper__token"
>
{{ item?.tokenUsage?.total }} tokens
</span>
</div>
<!-- 操作按钮组 -->
<div class="message-wrapper__actions">
<ElTooltip content="复制" placement="top">
<ElButton text @click="emit('copy', item)">
<ElIcon><DocumentCopy /></ElIcon>
</ElButton>
</ElTooltip>
<ElTooltip
v-if="item.role !== 'user'"
content="重新生成"
placement="top"
>
<ElButton text :disabled="isSending" @click="emit('regenerate', item)">
<ElIcon><Refresh /></ElIcon>
</ElButton>
</ElTooltip>
<ElTooltip
v-if="item.role === 'user' && hasValidId(item)"
content="编辑"
placement="top"
>
<ElButton
text
:disabled="isSending"
@click="emit('edit', item)"
>
<ElIcon><Edit /></ElIcon>
</ElButton>
</ElTooltip>
<ElTooltip content="删除" placement="top">
<ElButton text @click="emit('delete', item)">
<ElIcon><Delete /></ElIcon>
</ElButton>
</ElTooltip>
</div>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
// 消息包装器 - 删除模式时整行有背景
.message-wrapper {
position: relative;
width: 100%;
min-width: 100%;
padding: 12px 16px;
border-radius: 8px;
transition: all 0.2s ease;
box-sizing: border-box;
// 删除模式下的样式
&--delete-mode {
cursor: pointer;
background-color: #f5f7fa;
border: 1px solid transparent;
margin-bottom: 8px;
&:hover {
background-color: #e8f0fe;
border-color: #c6dafc;
}
}
// 选中状态
&--selected {
background-color: #d2e3fc !important;
border-color: #8ab4f8 !important;
}
// 勾选框
&__checkbox {
position: absolute;
left: 12px;
top: 12px;
z-index: 2;
:deep(.el-checkbox) {
--el-checkbox-input-height: 20px;
--el-checkbox-input-width: 20px;
}
}
// 内容区域 - 删除模式时有左边距给勾选框
&__content {
width: 100%;
.message-wrapper--delete-mode & {
padding-left: 36px;
}
}
// 思考链
&__thinking {
margin-bottom: 12px;
}
// 底部操作栏
&__footer {
margin-top: 8px;
}
&__footer-content {
display: flex;
align-items: center;
gap: 12px;
// AI消息：操作栏在左侧
&--ai {
justify-content: flex-start;
flex-direction: row-reverse;
.message-wrapper__info {
margin-left: 0;
margin-right: auto;
}
.message-wrapper__actions {
margin-left: 0;
}
}
// 用户消息：操作栏在右侧
&--user {
justify-content: flex-end;
.message-wrapper__info {
margin-right: auto;
}
}
}
&__info {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #888;
}
&__time,
&__token {
display: flex;
align-items: center;
color: #888;
}
&__token::before {
content: '';
width: 3px;
height: 3px;
margin-right: 8px;
background: #bbb;
border-radius: 50%;
}
&__actions {
display: flex;
align-items: center;
gap: 2px;
:deep(.el-button) {
width: 24px;
height: 24px;
padding: 0;
font-size: 13px;
color: #555;
background: transparent;
border: none;
border-radius: 4px;
transition: all 0.2s ease;
&:hover {
color: #409eff;
background: #f0f7ff;
}
&:active {
background: #e6f2ff;
}
&[disabled] {
color: #bbb;
background: transparent;
}
.el-icon {
font-size: 13px;
}
}
}
}
// 消息内容
.message-content {
// AI消息：无气泡背景
&--ai {
width: 100%;
padding: 0;
background: transparent;
}
// 用户消息：有灰色气泡背景
&--user {
display: flex;
flex-direction: column;
gap: 8px;
width: fit-content;
max-width: 80%;
margin-left: auto;
padding: 12px 16px;
background-color: #f5f5f5;
border-radius: 12px;
}
// 编辑模式 - 宽度100%
&--editing {
width: 100%;
max-width: 100%;
margin-left: 0;
background-color: transparent;
}
&__markdown {
background-color: transparent;
}
&__images {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 4px;
}
&__image {
max-width: 200px;
max-height: 200px;
border-radius: 8px;
object-fit: cover;
cursor: pointer;
transition: transform 0.2s;
&:hover {
transform: scale(1.05);
}
}
&__files {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 4px;
}
&__file-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.05);
border-radius: 6px;
font-size: 13px;
}
&__file-icon {
font-size: 16px;
color: #409eff;
}
&__file-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&__text {
white-space: pre-wrap;
line-height: 1.6;
color: #333;
}
&__edit-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
:deep(.el-textarea__inner) {
min-height: 80px !important;
font-size: 14px;
line-height: 1.6;
}
}
&__edit-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
}
// 响应式
@media (max-width: 768px) {
.message-content {
&__image {
max-width: 150px;
max-height: 150px;
}
&__file-item {
padding: 6px 10px;
font-size: 12px;
}
&__file-icon {
font-size: 14px;
}
}
.message-wrapper {
&__footer-content {
flex-wrap: wrap;
}
&__info {
font-size: 11px;
}
&__footer-content--user,
&__footer-content--ai {
flex-direction: row;
.message-wrapper__info {
order: 1;
margin: 0;
margin-right: auto;
}
.message-wrapper__actions {
order: 2;
}
}
}
}
@media (max-width: 480px) {
.message-content {
&__image {
max-width: 120px;
max-height: 120px;
}
&--user {
max-width: 90%;
}
}
.message-wrapper {
padding: 10px 12px;
&__checkbox {
left: 8px;
top: 8px;
}
&--delete-mode &__content {
padding-left: 28px;
}
&__time,
&__token {
font-size: 10px;
}
}
}
</style>

6
Yi.Ai.Vue3/src/pages/chat/components/index.ts Normal file
View File

@@ -0,0 +1,6 @@
// Chat 页面组件统一导出
export { default as ChatHeader } from './ChatHeader.vue';
export { default as ChatSender } from './ChatSender.vue';
export { default as MessageItem } from './MessageItem.vue';
export { default as DeleteModeToolbar } from './DeleteModeToolbar.vue';