kris/ForcePilot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: 修复导航项的激活状态逻辑

Browse Source
This commit is contained in:
Wenjie Zhang 2026-05-25 22:05:17 +08:00
parent 21b16c7c06
commit e7914b1dee
2 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/src/components/ConversationNavSection.vue
View File

@ -2,7 +2,7 @@
<section class="conversation-nav-section" :class="{ collapsed }"> <section class="conversation-nav-section" :class="{ collapsed }">
<div v-if="showHistory && !collapsed" class="history-panel"> <div v-if="showHistory && !collapsed" class="history-panel">
<div class="history-label" @click="listCollapsed = !listCollapsed"> <div class="history-label" @click="listCollapsed = !listCollapsed">
<span>对话历史</span> <span>最近</span>
<ChevronDown :size="14" class="collapse-icon" :class="{ collapsed: listCollapsed }" /> <ChevronDown :size="14" class="collapse-icon" :class="{ collapsed: listCollapsed }" />
</div> </div>
<div v-show="!listCollapsed" class="conversation-list"> <div v-show="!listCollapsed" class="conversation-list">
@ -188,21 +188,18 @@ const renameChat = async (chatId) => {
.history-label { .history-label {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-start;
padding: 4px 8px; padding: 4px 8px;
color: var(--gray-500); color: var(--gray-800);
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 14px;
font-weight: 600; font-weight: 600;
border-radius: 4px; border-radius: 4px;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
gap: 4px;
&:hover { span {
background: var(--main-20); font-weight: 500;
}
&:active {
background: var(--main-30);
} }
} }
@ -242,14 +239,21 @@ const renameChat = async (chatId) => {
color 0.2s ease; color 0.2s ease;
&:hover { &:hover {
background: var(--main-20); background: var(--gray-50);
color: var(--main-color);
.actions-mask, .actions-mask,
.conversation-actions { .conversation-actions {
opacity: 1; opacity: 1;
} }
.actions-mask {
background: linear-gradient(
to right,
transparent,
var(--gray-50)
);
}
.more-btn { .more-btn {
display: inline-flex; display: inline-flex;
} }
@ -260,16 +264,19 @@ const renameChat = async (chatId) => {
} }
&.active { &.active {
background-color: color-mix(in srgb, var(--main-color) 6%, var(--gray-0)); background-color: color-mix(in srgb, var(--main-color) 8%, var(--gray-0));
color: var(--main-color); color: var(--main-color);
.conversation-title {
font-weight: 600; font-weight: 600;
}
.actions-mask { .actions-mask {
opacity: 1; opacity: 1;
background: linear-gradient( background: linear-gradient(
to right, to right,
transparent, transparent,
color-mix(in srgb, var(--main-color) 6%, var(--gray-0)) 20px color-mix(in srgb, var(--main-color) 8%, var(--gray-0)) 20px
); );
} }
} }

2
web/src/layouts/AppLayout.vue
View File

@ -278,7 +278,7 @@ provide('settingsModal', {
:to="item.path" :to="item.path"
v-show="!item.hidden" v-show="!item.hidden"
class="nav-item" class="nav-item"
:class="{ active: !item.action && isNavItemActive(item), 'primary-action': item.action }" :class="{ active: isNavItemActive(item)}"
:active-class="item.action ? '' : 'active'" :active-class="item.action ? '' : 'active'"
@click.stop @click.stop
> >