feat: 页面配置编辑器改为卡片布局+POSTbody字段

This commit is contained in:
mediabot-pt
2026-07-06 01:21:13 +08:00
parent a5a5f68365
commit 817d1e09e0

View File

@@ -59,30 +59,26 @@
</div>
</div>
<div style="flex:1;overflow:auto;min-height:0">
<div style="font-size:13px;font-weight:500;margin-bottom:4px">双向可视化</div>
<el-table :data="parsed" stripe border style="font-size:13px" :row-style="{height:'42px'}" v-if="parsed.length">
<el-table-column prop="key" label="key" width="120">
<template #default="s">
<el-select v-model="s.row.key" size="small" @change="onKeyChange(s.row)" filterable>
<el-option v-for="k in pageKeys" :key="k.key" :label="k.key+' - '+k.label" :value="k.key" />
</el-select>
</template>
</el-table-column>
<el-table-column prop="method" label="方法" width="70">
<template #default="s"><el-select v-model="s.row.method" size="small" @change="syncToJson"><el-option label="GET" value="GET"/><el-option label="POST" value="POST"/></el-select></template>
</el-table-column>
<el-table-column label="URL" min-width="180">
<template #default="s"><el-input v-model="s.row.url" size="small" @input="syncToJson"/></template>
</el-table-column>
<el-table-column label="Headers" width="130">
<template #default="s"><el-input v-model="s.row.headers" size="small" @input="syncToJson" placeholder="k:v,k:v"/></template>
</el-table-column>
<el-table-column width="50">
<template #default="s"><el-button size="small" type="danger" text @click="remove(s.$index)">×</el-button></template>
</el-table-column>
</el-table>
<div v-else style="text-align:center;padding:40px;color:#909399">暂无页面入口</div>
<div style="margin-top:8px"><el-button size="small" @click="addEntry">+ 添加</el-button></div>
<div style="font-size:13px;font-weight:500;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center">
<span>页面入口编辑</span>
<el-button size="small" @click="addEntry">+ 添加</el-button>
</div>
<div v-if="!parsed.length" style="text-align:center;padding:40px;color:#909399">暂无,点击添加</div>
<div v-for="(entry, idx) in parsed" :key="idx" style="margin-bottom:12px;padding:12px;border:1px solid #ebeef5;border-radius:4px;background:#fafafa">
<div style="display:flex;gap:8px;align-items:center;margin-bottom:8px">
<el-select v-model="entry.key" size="small" @change="onKeyChange(entry)" filterable style="width:140px" placeholder="选择操作">
<el-option v-for="k in pageKeys" :key="k.key" :label="k.key+' - '+k.label" :value="k.key" />
</el-select>
<el-select v-model="entry.method" size="small" @change="syncToJson" style="width:80px">
<el-option label="GET" value="GET"/><el-option label="POST" value="POST"/>
</el-select>
<div style="flex:1"></div>
<el-button size="small" type="danger" text @click="remove(idx)">删除</el-button>
</div>
<el-input v-model="entry.url" size="small" placeholder="URL,支持{base}{keyword}{page}{id}{passkey}" @input="syncToJson" style="margin-bottom:6px" />
<el-input v-model="entry.headers" size="small" placeholder="Headers: key:value,key:value(可选)" @input="syncToJson" style="margin-bottom:6px" />
<el-input v-if="entry.method==='POST'" v-model="entry.body" size="small" type="textarea" :rows="2" placeholder="POST Body(可选)" @input="syncToJson" />
</div>
</div>
</div>
</div>
@@ -143,7 +139,7 @@ const editPage = async (row) => {
const syncToJson = () => { editorJson.value = JSON.stringify(parsed.value, null, 2) }
const remove = (idx) => { parsed.value.splice(idx,1); syncToJson() }
const addEntry = () => { parsed.value.push({key:'',url:'{base}',method:'GET'}); syncToJson() }
const addEntry = () => { parsed.value.push({key:'',method:'GET',url:'{base}'}); syncToJson() }
const deletePages = async () => {
try { await ElMessageBox.confirm('删除后站点将使用默认模板','确认',{type:'warning',confirmButtonText:'确认删除'}) } catch { return }
deleting.value = true