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

This commit is contained in:
Gsh
2025-12-31 01:05:20 +08:00
parent b8c0f9a212
commit 9c842ab802

View File

@@ -18,6 +18,9 @@ const loadMoreLoading = computed(() => sessionStore.isLoadingMore);
const active = ref<string | undefined>(); const active = ref<string | undefined>();
const isCollapsed = computed(() => designStore.isCollapseConversationList); const isCollapsed = computed(() => designStore.isCollapseConversationList);
// 判断是否为新建对话状态(没有选中任何会话)
const isNewChatState = computed(() => !sessionStore.currentSession);
onMounted(async () => { onMounted(async () => {
await sessionStore.requestSessionList(); await sessionStore.requestSessionList();
if (conversationsList.value.length > 0 && sessionId.value) { if (conversationsList.value.length > 0 && sessionId.value) {
@@ -139,8 +142,9 @@ function toggleSidebar() {
<!-- 展开状态显示logo和标题 --> <!-- 展开状态显示logo和标题 -->
<div <div
v-if="!isCollapsed" v-if="!isCollapsed"
class="header-content-expanded flex items-center gap-8px hover:cursor-pointer" class="header-content-expanded flex items-center gap-8px"
@click="handleCreatChat" :class="{ 'is-disabled': isNewChatState, 'hover:cursor-pointer': !isNewChatState }"
@click="!isNewChatState && handleCreatChat()"
> >
<span class="logo-text max-w-150px text-overflow">会话</span> <span class="logo-text max-w-150px text-overflow">会话</span>
</div> </div>
@@ -182,8 +186,11 @@ function toggleSidebar() {
<div class="creat-chat-btn-wrapper"> <div class="creat-chat-btn-wrapper">
<div <div
class="creat-chat-btn" class="creat-chat-btn"
:class="{ 'creat-chat-btn-collapsed': isCollapsed }" :class="{
@click="handleCreatChat" 'creat-chat-btn-collapsed': isCollapsed,
'is-disabled': isNewChatState
}"
@click="!isNewChatState && handleCreatChat()"
> >
<el-icon class="add-icon"> <el-icon class="add-icon">
<Plus /> <Plus />
@@ -339,6 +346,13 @@ function toggleSidebar() {
.header-content-expanded { .header-content-expanded {
flex: 1; flex: 1;
transition: opacity 0.2s ease;
&.is-disabled {
opacity: 0.5;
cursor: not-allowed !important;
pointer-events: none;
}
} }
.header-content-collapsed { .header-content-collapsed {
@@ -406,11 +420,17 @@ function toggleSidebar() {
border-radius: 12px; border-radius: 12px;
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover { &:hover:not(.is-disabled) {
background-color: rgb(0 87 255 / 12%); background-color: rgb(0 87 255 / 12%);
transform: translateY(-1px); transform: translateY(-1px);
} }
&.is-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
&.creat-chat-btn-collapsed { &.creat-chat-btn-collapsed {
width: 40px; width: 40px;
height: 40px; height: 40px;