ui: 新增Dify高级配置折叠面板

变更项:

1. Dify应用卡片新增‘展开/收起高级配置’按钮,默认收起。

2. 高级面板内提供可选覆盖字段:mode/endpoint/response_mode/request_timeout。

3. 保持主表单只展示刚需字段,兼顾简洁维护与高级调优。

4. 保存时移除前端状态字段 advanced_open,避免污染后端配置数据。
This commit is contained in:
liuwei
2026-04-20 15:22:10 +08:00
parent b15b060afb
commit a0a6ea8e08

View File

@@ -87,7 +87,12 @@
<el-card v-for="(item, index) in catalog.dify_apps" :key="item.uid" class="entry-card" shadow="never">
<div slot="header" class="entry-header">
<strong>{% raw %}{{ item.name || `DifyApp ${index + 1}` }}{% endraw %}</strong>
<el-button type="text" class="danger-text" @click="removeDifyApp(index)">删除</el-button>
<div class="entry-actions">
<el-button type="text" @click="item.advanced_open = !item.advanced_open">
{% raw %}{{ item.advanced_open ? '收起高级配置' : '展开高级配置' }}{% endraw %}
</el-button>
<el-button type="text" class="danger-text" @click="removeDifyApp(index)">删除</el-button>
</div>
</div>
<div class="entry-grid">
<el-input v-model="item.name" placeholder="应用名例如chat_main"></el-input>
@@ -102,6 +107,15 @@
</el-input>
<el-input v-model="item.workflow_output_key" placeholder="workflow_output_key例如text"></el-input>
</div>
<div class="advanced-panel" v-if="item.advanced_open">
<div class="advanced-title">高级覆盖项(可选)</div>
<div class="entry-grid">
<el-input v-model="item.config.mode" placeholder="覆盖 mode可选"></el-input>
<el-input v-model="item.config.endpoint" placeholder="覆盖 endpoint可选"></el-input>
<el-input v-model="item.config.response_mode" placeholder="覆盖 response_mode可选"></el-input>
<el-input-number v-model="item.config.request_timeout" :min="1" :step="1" placeholder="覆盖 request_timeout可选"></el-input-number>
</div>
</div>
</el-card>
</div>
<el-empty v-else description="暂无 Dify 应用"></el-empty>
@@ -255,6 +269,7 @@
newDifyApp() {
return {
uid: this.newUid(),
advanced_open: false,
name: '',
provider_template: '',
app_key: '',
@@ -305,6 +320,7 @@
normalizeDifyApp(item) {
return {
uid: this.newUid(),
advanced_open: false,
name: item.name || '',
provider_template: item.provider_template || '',
app_key: item.app_key || '',
@@ -439,6 +455,7 @@
dify_apps: (this.catalog.dify_apps || []).map(item => {
const cleaned = { ...item };
delete cleaned.uid;
delete cleaned.advanced_open;
return cleaned;
}),
backends: (this.catalog.backends || []).map(item => {
@@ -499,7 +516,21 @@
.section-list { display: flex; flex-direction: column; gap: 12px; }
.entry-card { border: 1px solid rgba(148,163,184,0.16); border-radius: 14px; }
.entry-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.entry-actions { display: flex; align-items: center; gap: 10px; }
.entry-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 10px 14px; }
.advanced-panel {
margin-top: 12px;
padding: 12px;
border-radius: 10px;
border: 1px dashed rgba(148,163,184,0.5);
background: rgba(148,163,184,0.06);
}
.advanced-title {
font-size: 12px;
color: #475569;
margin-bottom: 10px;
font-weight: 600;
}
.scene-row {
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(160px, 220px) minmax(220px, 1fr) auto;