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

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

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;