feat: 添加面板滑动过渡效果,优化数据库刷新逻辑,调整样式细节
This commit is contained in:
parent
882a90cb9b
commit
729d2fe6b3
@ -166,14 +166,16 @@
|
|||||||
|
|
||||||
<!-- Agent Panel Area -->
|
<!-- Agent Panel Area -->
|
||||||
|
|
||||||
<div class="agent-panel-wrapper" v-if="isAgentPanelOpen && hasAgentStateContent">
|
<transition name="panel-slide">
|
||||||
<AgentPanel
|
<div class="agent-panel-wrapper" v-if="isAgentPanelOpen && hasAgentStateContent">
|
||||||
:agent-state="currentAgentState"
|
<AgentPanel
|
||||||
:thread-id="currentChatId"
|
:agent-state="currentAgentState"
|
||||||
@refresh="handleAgentStateRefresh"
|
:thread-id="currentChatId"
|
||||||
@close="toggleAgentPanel"
|
@refresh="handleAgentStateRefresh"
|
||||||
/>
|
@close="toggleAgentPanel"
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1146,6 +1148,7 @@ watch(
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow-y: auto; /* Scroll is here now */
|
overflow-y: auto; /* Scroll is here now */
|
||||||
position: relative;
|
position: relative;
|
||||||
|
transition: flex 0.4s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.agent-panel-wrapper {
|
.agent-panel-wrapper {
|
||||||
@ -1161,6 +1164,23 @@ watch(
|
|||||||
border: 1px solid var(--gray-200);
|
border: 1px solid var(--gray-200);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Workbench transition animations */
|
||||||
|
.panel-slide-enter-active,
|
||||||
|
.panel-slide-leave-active {
|
||||||
|
transition:
|
||||||
|
transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
|
||||||
|
opacity 0.3s ease,
|
||||||
|
flex 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-slide-enter-from,
|
||||||
|
.panel-slide-leave-to {
|
||||||
|
transform: translateX(30px) scale(0.98);
|
||||||
|
opacity: 0;
|
||||||
|
flex: 0 0 0; /* Shrink to zero width during transition */
|
||||||
|
margin-left: -16px; /* Compensate for margin during close */
|
||||||
|
}
|
||||||
|
|
||||||
.chat-examples {
|
.chat-examples {
|
||||||
padding: 0 50px;
|
padding: 0 50px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@ -327,7 +327,6 @@ defineExpose({
|
|||||||
justify-self: start;
|
justify-self: start;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-right: 8px;
|
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -62,7 +62,7 @@
|
|||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-item
|
<a-form-item
|
||||||
:label="
|
:label="
|
||||||
selectedBenchmark.has_gold_answers ? '答案生成模型' : '答案生成模型(当前基准无需)'
|
selectedBenchmark.has_gold_answers ? '答案生成模型(可选)' : '答案生成模型(当前基准无需)'
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<ModelSelectorComponent
|
<ModelSelectorComponent
|
||||||
@ -78,7 +78,7 @@
|
|||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-item
|
<a-form-item
|
||||||
:label="
|
:label="
|
||||||
selectedBenchmark.has_gold_answers ? '答案评判模型' : '答案评判模型(当前基准无需)'
|
selectedBenchmark.has_gold_answers ? '答案评判模型(可选)' : '答案评判模型(当前基准无需)'
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<ModelSelectorComponent
|
<ModelSelectorComponent
|
||||||
|
|||||||
@ -325,7 +325,7 @@ export const useDatabaseStore = defineStore('database', () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
await getDatabaseInfo(undefined, true) // Skip query params when adding files
|
await delayedRefresh() // 延迟1秒后刷新
|
||||||
return true // Indicate success
|
return true // Indicate success
|
||||||
} else {
|
} else {
|
||||||
message.error(data.message || '处理失败')
|
message.error(data.message || '处理失败')
|
||||||
@ -357,7 +357,7 @@ export const useDatabaseStore = defineStore('database', () => {
|
|||||||
payload: { db_id: databaseId.value, count: fileIds.length }
|
payload: { db_id: databaseId.value, count: fileIds.length }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
await getDatabaseInfo(undefined, true)
|
await delayedRefresh() // 延迟1秒后刷新
|
||||||
return true
|
return true
|
||||||
} else {
|
} else {
|
||||||
message.error(data.message || '提交失败')
|
message.error(data.message || '提交失败')
|
||||||
@ -389,7 +389,7 @@ export const useDatabaseStore = defineStore('database', () => {
|
|||||||
payload: { db_id: databaseId.value, count: fileIds.length }
|
payload: { db_id: databaseId.value, count: fileIds.length }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
await getDatabaseInfo(undefined, true)
|
await delayedRefresh() // 延迟1秒后刷新
|
||||||
return true
|
return true
|
||||||
} else {
|
} else {
|
||||||
message.error(data.message || '提交失败')
|
message.error(data.message || '提交失败')
|
||||||
@ -482,6 +482,12 @@ export const useDatabaseStore = defineStore('database', () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 延时刷新文件理解(延迟1秒后刷新)
|
||||||
|
async function delayedRefresh() {
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||||
|
await getDatabaseInfo(undefined, true)
|
||||||
|
}
|
||||||
|
|
||||||
function toggleAutoRefresh() {
|
function toggleAutoRefresh() {
|
||||||
const nextState = !state.autoRefresh
|
const nextState = !state.autoRefresh
|
||||||
state.autoRefresh = nextState
|
state.autoRefresh = nextState
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user