fix: 前端页面架构重构优化
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user