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

fix: 前端页面架构重构优化

Browse Source
This commit is contained in:
Gsh
2025-12-31 00:59:06 +08:00
parent 0c31b97824
commit 77a9a64a41
6 changed files with 125 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,14 @@
<!-- 默认消息列表页 -->
<script setup lang="ts">
import type { FilesCardProps } from 'vue-element-plus-x/types/FilesCard';
import { Loading } from '@element-plus/icons-vue';
import { ArrowLeftBold, ArrowRightBold, Loading } from '@element-plus/icons-vue';
import { useDebounceFn } from '@vueuse/core';
import { ElMessage } from 'element-plus';
import { nextTick, ref, watch } from 'vue';
import { computed, nextTick, ref, watch } from 'vue';
import ModelSelect from '@/components/ModelSelect/index.vue';
import WelecomeText from '@/components/WelecomeText/index.vue';
import Collapse from '@/layouts/components0/Header/components/Collapse.vue';
import CreateChat from '@/layouts/components0/Header/components/CreateChat.vue';
import { useUserStore } from '@/stores';
import { useFilesStore } from '@/stores/modules/files';
import { useSessionStore } from '@/stores/modules/session';
@@ -16,6 +18,9 @@ const userStore = useUserStore();
const sessionStore = useSessionStore();
const filesStore = useFilesStore();
// 计算属性
const currentSession = computed(() => sessionStore.currentSession);
// 响应式数据
const senderValue = ref(''); // 输入框内容
const senderRef = ref(); // Sender 组件引用
@@ -106,6 +111,16 @@ watch(
<template>
<div class="chat-default">
<!-- 头部导航栏 -->
<div class="chat-header">
<div class="header-content">
<div class="header-left">
<Collapse />
<CreateChat />
</div>
</div>
</div>
<div class="chat-default-wrap">
<!-- 欢迎文本 -->
<WelecomeText />
@@ -185,16 +200,35 @@ watch(
<style scoped lang="scss">
.chat-default {
width: 100%;
//background: #ff11f3;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
//padding: 0 0 100px;
padding: 0 20px;
.chat-header {
width: 100%;
max-width: 1000px;
height: 60px;
display: flex;
align-items: center;
flex-shrink: 0;
.header-content {
width: 100%;
display: flex;
align-items: center;
.header-left {
display: flex;
align-items: center;
gap: 12px;
}
}
}
}
.chat-default-wrap {
//background: #0bdcb7;
position: relative;
display: flex;
flex-direction: column;
@@ -276,6 +310,14 @@ watch(
// 响应式设计
@media (max-width: 768px) {
.chat-default {
padding: 0 12px;
.chat-header {
height: 50px;
}
}
.chat-default-wrap {
padding: 12px;
min-height: calc(100vh - 120px);

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

@@ -13,16 +13,26 @@ import { Sender } from 'vue-element-plus-x';
import { useRoute } from 'vue-router';
import { send } from '@/api';
import ModelSelect from '@/components/ModelSelect/index.vue';
import { useGuideTourStore } from '@/stores';
import Collapse from '@/layouts/components0/Header/components/Collapse.vue';
import CreateChat from '@/layouts/components0/Header/components/CreateChat.vue';
import TitleEditing from '@/layouts/components0/Header/components/TitleEditing.vue';
import { useDesignStore, useGuideTourStore } from '@/stores';
import { useChatStore } from '@/stores/modules/chat';
import { useFilesStore } from '@/stores/modules/files';
import { useModelStore } from '@/stores/modules/model';
import { useSessionStore } from '@/stores/modules/session';
import { useUserStore } from '@/stores/modules/user';
import { getUserProfilePicture, systemProfilePicture } from '@/utils/user.ts';
import YMarkdown from '@/vue-element-plus-y/components/XMarkdown/index.vue';
import '@/styles/github-markdown.css';
import '@/styles/yixin-markdown.scss';
// 新增的导入
const designStore = useDesignStore();
const sessionStore = useSessionStore();
const currentSession = computed(() => sessionStore.currentSession);
type MessageItem = BubbleProps & {
key: number;
role: 'ai' | 'user' | 'assistant';
@@ -447,6 +457,31 @@ function handleImagePreview(url: string) {
<template>
<div class="chat-with-id-container">
<!-- 头部导航栏 -->
<div class="chat-header">
<div
class="overflow-hidden flex h-full items-center flex-row flex-1 w-fit flex-shrink-0 min-w-0"
>
<div class="w-full flex items-center flex-row">
<!-- 左边 -->
<div
class="left-box flex h-full items-center pl-20px gap-12px flex-shrink-0 flex-row"
>
<Collapse />
<CreateChat />
<div v-if="currentSession" class="w-0.5px h-30px bg-[rgba(217,217,217)]" />
</div>
<!-- 中间 -->
<div class="middle-box flex-1 min-w-0 ml-12px">
<TitleEditing />
</div>
</div>
</div>
</div>
<!-- 聊天内容区域 -->
<div class="chat-warp">
<BubbleList ref="bubbleListRef" :list="bubbleItems" max-height="calc(100vh - 240px)">
<template #header="{ item }">
@@ -569,14 +604,23 @@ function handleImagePreview(url: string) {
align-items: center;
width: 100%;
height: 100%;
.chat-header {
width: 100%;
max-width: 1000px;
height: 60px;
display: flex;
align-items: center;
flex-shrink: 0;
}
.chat-warp {
max-width: 1000px;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: calc(100vh - 60px);
height: calc(100vh - 120px); // 减去头部高度
.thinking-chain-warp {
margin-bottom: 12px;
}
@@ -674,12 +718,12 @@ function handleImagePreview(url: string) {
font-size: 12px;
margin-top: 3px;
.footer-token {
background: rgba(1, 183, 86, 0.53);
padding: 0 4px;
margin: 0 2px;
border-radius: 4px;
color: #ffffff;
}
background: rgba(1, 183, 86, 0.53);
padding: 0 4px;
margin: 0 2px;
border-radius: 4px;
color: #ffffff;
}
}
}