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