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';

459
Yi.Ai.Vue3/src/pages/chat/layouts/chatDefaul/index.vue
View File

@@ -1,61 +1,77 @@
<!-- 默认消息列表页 -->
<script setup lang="ts">
import type { FilesCardProps } from 'vue-element-plus-x/types/FilesCard';
import { ArrowLeftBold, ArrowRightBold, Loading } from '@element-plus/icons-vue';
import { useDebounceFn } from '@vueuse/core';
import { ElMessage } from 'element-plus';
import { ElIcon, ElMessage } from 'element-plus';
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { Sender } from 'vue-element-plus-x';
import ModelSelect from '@/components/ModelSelect/index.vue';
import WelecomeText from '@/components/WelecomeText/index.vue';
import Collapse from '@/layouts/components/Header/components/Collapse.vue';
import CreateChat from '@/layouts/components/Header/components/CreateChat.vue';
import { ChatHeader } from '@/pages/chat/components';
import { useUserStore } from '@/stores';
import { useFilesStore } from '@/stores/modules/files';
import { useSessionStore } from '@/stores/modules/session';
import { useFilePaste } from '@/composables/chat';
// Store 实例
const userStore = useUserStore();
const sessionStore = useSessionStore();
const filesStore = useFilesStore();
// 计算属性
const currentSession = computed(() => sessionStore.currentSession);
// 响应式数据
const senderValue = ref(''); // 输入框内容
const senderRef = ref(); // Sender 组件引用
const isSending = ref(false); // 发送状态标志
const senderValue = ref('');
const senderRef = ref<InstanceType<typeof Sender> | null>(null);
const isSending = ref(false);
// 文件处理相关常量
const MAX_FILE_SIZE = 3 * 1024 * 1024;
const MAX_TOTAL_CONTENT_LENGTH = 150000;
// 使用文件粘贴 composable
const { handlePaste } = useFilePaste({
maxFileSize: MAX_FILE_SIZE,
maxTotalContentLength: MAX_TOTAL_CONTENT_LENGTH,
getCurrentTotalLength: () => {
let total = 0;
filesStore.filesList.forEach((f) => {
if (f.fileType === 'text' && f.fileContent) {
total += f.fileContent.length;
}
if (f.fileType === 'image' && f.base64) {
total += Math.floor(f.base64.length * 0.5);
}
});
return total;
},
addFiles: (files) => filesStore.setFilesList([...filesStore.filesList, ...files]),
});
/**
* 防抖发送消息函数
*/
const debouncedSend = useDebounceFn(
async () => {
// 1. 验证输入
// 验证输入
if (!senderValue.value.trim()) {
ElMessage.warning('消息内容不能为空');
return;
}
// 2. 检查是否正在发送
// 检查是否正在发送
if (isSending.value) {
ElMessage.warning('请等待上一条消息发送完成');
return;
}
// 3. 准备发送数据
// 准备发送数据
const content = senderValue.value.trim();
isSending.value = true;
try {
// 4. 保存到本地存储（可选，用于页面刷新后恢复）
// 保存到本地存储
localStorage.setItem('chatContent', content);
// 5. 创建会话
// 创建会话
await sessionStore.createSessionList({
userId: userStore.userInfo?.userId as number,
sessionContent: content,
@@ -63,20 +79,17 @@ const debouncedSend = useDebounceFn(
remark: content.slice(0, 10),
});
// 6. 清空输入框
// 清空输入框
senderValue.value = '';
}
catch (error: any) {
} catch (error: any) {
console.error('发送消息失败:', error);
ElMessage.error(error.message || '发送消息失败');
}
finally {
// 7. 重置发送状态
} finally {
isSending.value = false;
}
},
800, // 防抖延迟
{ leading: true, trailing: false }, // 立即执行第一次，忽略后续快速点击
800,
{ leading: true, trailing: false },
);
/**
@@ -86,15 +99,6 @@ function handleSend() {
debouncedSend();
}
/**
* 删除文件卡片
* @param _item 文件项
* @param index 文件索引
*/
function handleDeleteCard(_item: FilesCardProps, index: number) {
filesStore.deleteFileByIndex(index);
}
/**
* 监听文件列表变化，自动展开/收起 Sender 头部
*/
@@ -104,181 +108,14 @@ watch(
nextTick(() => {
if (val > 0) {
senderRef.value?.openHeader();
}
else {
} else {
senderRef.value?.closeHeader();
}
});
},
);
/**
* 压缩图片
*/
function compressImage(file: File, maxWidth = 1024, maxHeight = 1024, quality = 0.8): Promise<Blob> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
let width = img.width;
let height = img.height;
if (width > maxWidth || height > maxHeight) {
const ratio = Math.min(maxWidth / width, maxHeight / height);
width = width * ratio;
height = height * ratio;
}
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d')!;
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob(
(blob) => {
if (blob) {
resolve(blob);
}
else {
reject(new Error('压缩失败'));
}
},
file.type,
quality,
);
};
img.onerror = reject;
img.src = e.target?.result as string;
};
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
/**
* 将 Blob 转换为 base64
*/
function blobToBase64(blob: Blob): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
resolve(reader.result as string);
};
reader.onerror = reject;
reader.readAsDataURL(blob);
});
}
/**
* 处理粘贴事件
*/
async function handlePaste(event: ClipboardEvent) {
const items = event.clipboardData?.items;
if (!items)
return;
const files: File[] = [];
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (item.kind === 'file') {
const file = item.getAsFile();
if (file) {
files.push(file);
}
}
}
if (files.length === 0)
return;
event.preventDefault();
// 计算已有文件的总内容长度
let totalContentLength = 0;
filesStore.filesList.forEach((f) => {
if (f.fileType === 'text' && f.fileContent) {
totalContentLength += f.fileContent.length;
}
if (f.fileType === 'image' && f.base64) {
totalContentLength += Math.floor(f.base64.length * 0.5);
}
});
const arr: any[] = [];
for (const file of files) {
// 验证文件大小
if (file.size > MAX_FILE_SIZE) {
ElMessage.error(`文件 ${file.name} 超过 3MB 限制，已跳过`);
continue;
}
const isImage = file.type.startsWith('image/');
if (isImage) {
try {
const compressionLevels = [
{ maxWidth: 800, maxHeight: 800, quality: 0.6 },
{ maxWidth: 600, maxHeight: 600, quality: 0.5 },
{ maxWidth: 400, maxHeight: 400, quality: 0.4 },
];
let compressedBlob: Blob | null = null;
let base64 = '';
for (const level of compressionLevels) {
compressedBlob = await compressImage(file, level.maxWidth, level.maxHeight, level.quality);
base64 = await blobToBase64(compressedBlob);
const estimatedLength = Math.floor(base64.length * 0.5);
if (totalContentLength + estimatedLength <= MAX_TOTAL_CONTENT_LENGTH) {
totalContentLength += estimatedLength;
break;
}
compressedBlob = null;
}
if (!compressedBlob) {
ElMessage.error(`${file.name} 图片内容过大，请压缩后上传`);
continue;
}
arr.push({
uid: crypto.randomUUID(),
name: file.name,
fileSize: file.size,
file,
maxWidth: '200px',
showDelIcon: true,
imgPreview: true,
imgVariant: 'square',
url: base64,
isUploaded: true,
base64,
fileType: 'image',
});
}
catch (error) {
console.error('处理图片失败:', error);
ElMessage.error(`${file.name} 处理失败`);
}
}
else {
ElMessage.warning(`${file.name} 不支持粘贴，请使用上传按钮`);
}
}
if (arr.length > 0) {
filesStore.setFilesList([...filesStore.filesList, ...arr]);
ElMessage.success(`已添加 ${arr.length} 个文件`);
}
}
// 监听粘贴事件
// 生命周期
onMounted(() => {
document.addEventListener('paste', handlePaste);
});
@@ -290,17 +127,11 @@ onUnmounted(() => {
<template>
<div class="chat-default">
<!-- 头部导航栏 -->
<div class="chat-header">
<div class="header-content">
<div class="header-left">
<Collapse />
<CreateChat />
</div>
</div>
</div>
<!-- 头部 -->
<ChatHeader />
<div class="chat-default-wrap">
<!-- 内容区域 -->
<div class="chat-default__content">
<!-- 欢迎文本 -->
<WelecomeText />
@@ -308,12 +139,8 @@ onUnmounted(() => {
<Sender
ref="senderRef"
v-model="senderValue"
class="chat-default-sender"
data-tour="chat-sender"
:auto-size="{
maxRows: 9,
minRows: 3,
}"
class="chat-default__sender"
:auto-size="{ maxRows: 9, minRows: 3 }"
variant="updown"
clearable
allow-speech
@@ -322,22 +149,20 @@ onUnmounted(() => {
>
<!-- 头部：文件附件区域 -->
<template #header>
<div class="sender-header">
<div class="chat-default__sender-header">
<Attachments
:items="filesStore.filesList"
:hide-upload="true"
@delete-card="handleDeleteCard"
@delete-card="(_, index) => filesStore.deleteFileByIndex(index)"
>
<!-- 左侧滚动按钮 -->
<template #prev-button="{ show, onScrollLeft }">
<div
v-if="show"
class="scroll-btn prev-btn"
class="chat-default__scroll-btn chat-default__scroll-btn--prev"
@click="onScrollLeft"
>
<el-icon>
<ArrowLeftBold />
</el-icon>
<el-icon><ArrowLeftBold /></el-icon>
</div>
</template>
@@ -345,12 +170,10 @@ onUnmounted(() => {
<template #next-button="{ show, onScrollRight }">
<div
v-if="show"
class="scroll-btn next-btn"
class="chat-default__scroll-btn chat-default__scroll-btn--next"
@click="onScrollRight"
>
<el-icon>
<ArrowRightBold />
</el-icon>
<el-icon><ArrowRightBold /></el-icon>
</div>
</template>
</Attachments>
@@ -359,7 +182,7 @@ onUnmounted(() => {
<!-- 前缀：文件选择和模型选择 -->
<template #prefix>
<div class="sender-prefix">
<div class="chat-default__sender-prefix">
<FilesSelect />
<ModelSelect />
</div>
@@ -367,9 +190,9 @@ onUnmounted(() => {
<!-- 后缀：发送加载动画 -->
<template #suffix>
<el-icon v-if="isSending" class="loading-icon">
<ElIcon v-if="isSending" class="chat-default__loading">
<Loading />
</el-icon>
</ElIcon>
</template>
</Sender>
</div>
@@ -385,97 +208,94 @@ onUnmounted(() => {
align-items: center;
padding: 0 20px;
.chat-header {
width: 100%;
//max-width: 1000px;
height: 60px;
@media (max-width: 768px) {
padding: 0 12px;
}
&__content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
justify-content: center;
width: 100%;
max-width: 800px;
min-height: 450px;
padding: 20px;
box-sizing: border-box;
.header-content {
width: 100%;
display: flex;
align-items: center;
.header-left {
display: flex;
align-items: center;
gap: 12px;
}
@media (max-width: 768px) {
padding: 12px;
min-height: calc(100vh - 120px);
}
}
}
.chat-default-wrap {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 800px;
min-height: 450px;
padding: 20px;
box-sizing: border-box;
.chat-default-sender {
&__sender {
width: 100%;
margin-top: 30px;
}
}
.sender-header {
padding: 12px 12px 0 12px;
}
.sender-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);
@media (max-width: 768px) {
margin-top: 20px;
}
}
&.prev-btn {
left: 8px;
&__sender-header {
padding: 12px 12px 0 12px;
}
&.next-btn {
right: 8px;
}
}
&__sender-prefix {
display: flex;
flex: 1;
align-items: center;
gap: 8px;
flex: none;
width: fit-content;
overflow: hidden;
.loading-icon {
margin-left: 8px;
color: var(--el-color-primary);
animation: rotating 2s linear infinite;
@media (max-width: 768px) {
flex-wrap: wrap;
gap: 6px;
}
}
&__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 {
@@ -486,29 +306,4 @@ onUnmounted(() => {
transform: rotate(360deg);
}
}
// 响应式设计
@media (max-width: 768px) {
.chat-default {
padding: 0 12px;
.chat-header {
height: 50px;
}
}
.chat-default-wrap {
padding: 12px;
min-height: calc(100vh - 120px);
.chat-default-sender {
margin-top: 20px;
}
}
.sender-prefix {
flex-wrap: wrap;
gap: 6px;
}
}
</style>

1968
Yi.Ai.Vue3/src/pages/chat/layouts/chatWithId/index.vue
View File

File diff suppressed because it is too large Load Diff

169
Yi.Ai.Vue3/src/pages/chat/styles/bubble.scss Normal file
View File

@@ -0,0 +1,169 @@
// 气泡列表相关样式 (需要 :deep 穿透)
// 基础气泡列表样式
@mixin bubble-list-base {
:deep(.el-bubble-list) {
padding-top: 24px;
@media (max-width: 768px) {
padding-top: 16px;
}
}
}
// 气泡基础样式
@mixin bubble-base {
:deep(.el-bubble) {
padding: 0 12px 24px;
// 隐藏头像
.el-avatar {
display: none !important;
}
// 用户消息样式
&[class*="end"] {
width: 100%;
max-width: 100%;
.el-bubble-content-wrapper {
flex: none;
max-width: fit-content;
}
.el-bubble-content {
width: fit-content;
max-width: 100%;
}
}
@media (max-width: 768px) {
padding: 0 8px 16px;
}
@media (max-width: 480px) {
padding: 0 6px;
padding-bottom: 12px;
}
}
}
// AI消息样式
@mixin bubble-ai-style {
:deep(.el-bubble[class*="start"]) {
width: 100%;
max-width: 100%;
.el-bubble-content-wrapper {
flex: auto;
}
.el-bubble-content {
width: 100%;
max-width: 100%;
padding: 0;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
}
}
// 用户编辑模式样式
@mixin bubble-edit-mode {
:deep(.el-bubble[class*="end"]) {
&:has(.edit-message-wrapper-full) {
.el-bubble-content-wrapper {
flex: auto;
max-width: 100%;
}
.el-bubble-content {
width: 100%;
max-width: 100%;
}
}
}
}
// 删除模式气泡样式
@mixin bubble-delete-mode {
:deep(.el-bubble-list.delete-mode) {
.el-bubble {
&[class*="end"] .el-bubble-content-wrapper {
flex: auto;
max-width: 100%;
}
.el-bubble-content {
position: relative;
min-height: 44px;
padding: 12px 16px;
background-color: #f5f7fa;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
&:hover {
background-color: #e8f0fe;
border-color: #c6dafc;
}
}
&:has(.el-checkbox.is-checked) .el-bubble-content {
background-color: #d2e3fc;
border-color: #8ab4f8;
}
}
.delete-checkbox-inline {
position: absolute;
left: 12px;
top: 12px;
z-index: 2;
:deep(.el-checkbox) {
--el-checkbox-input-height: 20px;
--el-checkbox-input-width: 20px;
}
}
.ai-content-wrapper,
.user-content-wrapper {
margin-left: 36px;
width: calc(100% - 36px);
}
.user-content-wrapper {
align-items: flex-start;
.edit-message-wrapper-full {
width: 100%;
max-width: 100%;
}
}
}
}
// Typewriter 样式
@mixin typewriter-style {
:deep(.el-typewriter) {
overflow: hidden;
border-radius: 12px;
}
}
// Markdown 容器样式
@mixin markdown-container {
:deep(.elx-xmarkdown-container) {
padding: 8px 4px;
}
}
// 代码块头部样式
@mixin code-header {
:deep(.markdown-elxLanguage-header-div) {
top: -25px !important;
}
}

5
Yi.Ai.Vue3/src/pages/chat/styles/index.scss Normal file
View File

@@ -0,0 +1,5 @@
// Chat 页面公共样式统一导入
@forward './variables';
@forward './mixins';
@forward './bubble';

102
Yi.Ai.Vue3/src/pages/chat/styles/mixins.scss Normal file
View File

@@ -0,0 +1,102 @@
// 聊天页面公共 mixins
// 响应式
@mixin respond-to($breakpoint) {
@if $breakpoint == tablet {
@media (max-width: 768px) {
@content;
}
} @else if $breakpoint == mobile {
@media (max-width: 480px) {
@content;
}
}
}
// 弹性布局
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
@mixin flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
@mixin flex-column {
display: flex;
flex-direction: column;
}
// 文本省略
@mixin text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// 多行文本省略
@mixin text-ellipsis-multi($lines: 2) {
display: -webkit-box;
-webkit-line-clamp: $lines;
-webkit-box-orient: vertical;
overflow: hidden;
}
// 滚动按钮样式
@mixin scroll-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
@include flex-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);
}
}
// 操作按钮样式
@mixin action-btn {
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;
}
}

56
Yi.Ai.Vue3/src/pages/chat/styles/variables.scss Normal file
View File

@@ -0,0 +1,56 @@
// 聊天页面公共样式变量
// 布局
$chat-header-height: 60px;
$chat-header-height-mobile: 50px;
$chat-header-height-small: 48px;
$chat-max-width: 1000px;
$chat-padding: 20px;
$chat-padding-mobile: 12px;
$chat-padding-small: 8px;
// 气泡列表
$bubble-padding-y: 24px;
$bubble-padding-x: 12px;
$bubble-gap: 24px;
$bubble-padding-y-mobile: 16px;
$bubble-padding-x-mobile: 8px;
$bubble-gap-mobile: 16px;
// 用户消息
$user-image-max-size: 200px;
$user-image-max-size-mobile: 150px;
$user-image-max-size-small: 120px;
// 颜色
$color-text-primary: #333;
$color-text-secondary: #888;
$color-text-tertiary: #bbb;
$color-border: rgba(0, 0, 0, 0.08);
$color-border-hover: rgba(0, 0, 0, 0.15);
$color-bg-hover: #f3f4f6;
$color-bg-light: #f5f7fa;
$color-bg-lighter: #e8f0fe;
$color-bg-selected: #d2e3fc;
$color-border-selected: #8ab4f8;
$color-primary: #409eff;
$color-primary-light: #f0f7ff;
$color-primary-lighter: #e6f2ff;
// 删除模式
$color-delete-bg: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
$color-delete-border: #fed7aa;
$color-delete-text: #ea580c;
// 动画
$transition-fast: 0.2s ease;
$transition-normal: 0.3s ease;
// 响应式断点
$breakpoint-tablet: 768px;
$breakpoint-mobile: 480px;