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 6cc0059691
commit b8c0f9a212
6 changed files with 125 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
Yi.Ai.Vue3/src/layouts/components/ChatAside/index.vue
View File

@@ -124,141 +124,7 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
// 折叠/展开侧边栏
function toggleSidebar() {
// designStore.setIsCollapseConversationList(!designStore.isCollapseConversationList);
}
// 点击logo创建新会话（仅在折叠状态）
function handleLogoClick() {
if (isCollapsed.value) {
handleCreatChat();
}
}
// 处理右键菜单（折叠状态下使用）
function handleContextMenu(event: MouseEvent, item: ConversationItem<ChatSessionVo>) {
event.preventDefault();
// 在折叠状态下触发删除确认
ElMessageBox.confirm('删除后，聊天记录将不可恢复。', '确定删除对话？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
confirmButtonClass: 'el-button--danger',
cancelButtonClass: 'el-button--info',
roundButton: true,
autofocus: false,
})
.then(() => {
sessionStore.deleteSessions([item.id!]);
nextTick(() => {
if (item.id === active.value) {
sessionStore.createSessionBtn();
}
});
})
.catch(() => {
// 取消删除
});
}
// 折叠状态下点击更多按钮
function handleCollapsedMenuClick(event: MouseEvent, item: ConversationItem<ChatSessionVo>) {
event.stopPropagation();
// 创建一个简单的菜单
ElMessageBox({
title: '对话操作',
message: `
<div style="padding: 8px 0;">
<div class="menu-item" data-action="rename" style="padding: 8px 12px; cursor: pointer; border-radius: 4px; margin: 4px 0;">
<span style="font-size: 14px;">重命名</span>
</div>
<div class="menu-item" data-action="delete" style="padding: 8px 12px; cursor: pointer; border-radius: 4px; margin: 4px 0; color: #f56c6c;">
<span style="font-size: 14px;">删除对话</span>
</div>
</div>
`,
showConfirmButton: false,
showCancelButton: false,
dangerouslyUseHTMLString: true,
customClass: 'collapsed-menu-dialog',
closeOnClickModal: true,
closeOnPressEscape: true,
}).then(() => {
// 对话框关闭
}).catch(() => {
// 对话框关闭
});
// 添加菜单项点击事件
nextTick(() => {
const menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach((itemEl) => {
itemEl.addEventListener('click', (e) => {
const action = (e.currentTarget as HTMLElement).dataset.action;
if (action === 'delete') {
ElMessageBox.confirm('删除后，聊天记录将不可恢复。', '确定删除对话？', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
confirmButtonClass: 'el-button--danger',
cancelButtonClass: 'el-button--info',
roundButton: true,
autofocus: false,
})
.then(() => {
sessionStore.deleteSessions([item.id!]);
nextTick(() => {
if (item.id === active.value) {
sessionStore.createSessionBtn();
}
});
})
.catch(() => {
// 取消删除
});
}
else if (action === 'rename') {
ElMessageBox.prompt('', '编辑对话名称', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputErrorMessage: '请输入对话名称',
confirmButtonClass: 'el-button--primary',
cancelButtonClass: 'el-button--info',
roundButton: true,
inputValue: item.sessionTitle,
autofocus: false,
inputValidator: (value) => {
return !!value;
},
}).then(({ value }) => {
sessionStore
.updateSession({
id: item.id!,
sessionTitle: value,
sessionContent: item.sessionContent,
})
.then(() => {
ElMessage({
type: 'success',
message: '修改成功',
});
nextTick(() => {
if (sessionStore.currentSession?.id === item.id) {
sessionStore.setCurrentSession({
...item,
sessionTitle: value,
});
}
});
});
});
}
// 关闭菜单对话框
document.querySelector('.collapsed-menu-dialog .el-message-box__headerbtn')?.dispatchEvent(new Event('click'));
});
});
});
designStore.setIsCollapseConversationList(!designStore.isCollapseConversationList);
}
</script>
@@ -446,7 +312,7 @@ function handleCollapsedMenuClick(event: MouseEvent, item: ConversationItem<Chat
// 折叠状态 - 100px
&.aside-collapsed {
width: 100px;
display: none;
.aside-wrapper {
width: 100px;

38
Yi.Ai.Vue3/src/layouts/components0/Header/components/Collapse.vue
View File

@@ -1,35 +1,35 @@
<!-- 侧边栏折叠按钮 -->
<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue';
import { SIDE_BAR_WIDTH } from '@/config/index';
import { useCollapseToggle } from '@/hooks/useCollapseToggle';
import { useDesignStore } from '@/stores';
const { changeCollapse } = useCollapseToggle();
// const { changeCollapse } = useCollapseToggle();
const designStore = useDesignStore();
function handleChangeCollapse() {
changeCollapse();
// 每次切换折叠状态，重置安全区状态
designStore.isSafeAreaHover = false;
// 重置首次激活悬停状态
designStore.hasActivatedHover = false;
if (!designStore.isCollapse) {
document.documentElement.style.setProperty(
`--sidebar-left-container-default-width`,
`${SIDE_BAR_WIDTH}px`,
);
}
else {
document.documentElement.style.setProperty(`--sidebar-left-container-default-width`, ``);
}
designStore.setIsCollapseConversationList(!designStore.isCollapseConversationList);
// 待定
// changeCollapse();
// // 每次切换折叠状态，重置安全区状态
// designStore.isSafeAreaHover = false;
// // 重置首次激活悬停状态
// designStore.hasActivatedHover = false;
// if (!designStore.isCollapse) {
// document.documentElement.style.setProperty(
// `--sidebar-left-container-default-width`,
// `${SIDE_BAR_WIDTH}px`,
// );
// }
// else {
// document.documentElement.style.setProperty(`--sidebar-left-container-default-width`, ``);
// }
}
</script>
<template>
<div class="collapse-container btn-icon-btn" @click="handleChangeCollapse">
<SvgIcon v-if="!designStore.isCollapse" name="ms-left-panel-close-outline" size="24" />
<SvgIcon v-if="designStore.isCollapse" name="ms-left-panel-open-outline" size="24" />
<SvgIcon v-if="!designStore.isCollapseConversationList" name="ms-left-panel-close-outline" size="24" />
<SvgIcon v-if="designStore.isCollapseConversationList" name="ms-left-panel-open-outline" size="24" />
</div>
</template>

2
Yi.Ai.Vue3/src/layouts/components0/Header/components/CreateChat.vue
View File

@@ -1,5 +1,7 @@
<!-- 添加新会话按钮 -->
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue';
import { useSessionStore } from '@/stores/modules/session';
const sessionStore = useSessionStore();