yescent/par
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 去掉expand列改用表格下方独立编辑区域

Browse Source
This commit is contained in:
mediabot-pt
2026-07-05 00:48:56 +08:00
parent 340a375dcf
commit 0e0ac23a14
2 changed files with 65 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
web/src/views/SitePages.vue
View File

@@ -27,45 +27,35 @@
</el-button>
</template>
</el-table-column>
<el-table-column type="expand" width="1" class-name="expand-hide">
<template #default="s" v-if="editSiteId===s.row.siteId">
<div style="padding:12px 0">
<div style="margin-bottom:8px;display:flex;gap:8px">
<el-radio-group v-model="editorMode" size="small">
<el-radio-button label="table">表格</el-radio-button>
<el-radio-button label="json">JSON</el-radio-button>
</el-radio-group>
</div>
<template v-if="editorMode==='table'">
<el-table :data="editingEntries" stripe size="small" style="margin-bottom:8px">
<el-table-column prop="key" label="key" width="100">
<template #default="e"><el-input v-model="e.row.key" size="small" /></template>
</el-table-column>
<el-table-column prop="label" label="名称" width="100">
<template #default="e"><el-input v-model="e.row.label" size="small" /></template>
</el-table-column>
<el-table-column prop="url" label="URL" min-width="200">
<template #default="e"><el-input v-model="e.row.url" size="small" /></template>
</el-table-column>
<el-table-column prop="method" label="方法" width="80">
<template #default="e"><el-select v-model="e.row.method" size="small"><el-option label="GET" value="GET"/><el-option label="POST" value="POST"/></el-select></template>
</el-table-column>
<el-table-column label="" width="50"><template #default="e"><el-button size="small" type="danger" text @click="editingEntries.splice(e.$index,1)">×</el-button></template></el-table-column>
</el-table>
<el-button size="small" @click="editingEntries.push({key:'',label:'',url:'{base}',method:'GET'})">+ 添加</el-button>
</template>
<template v-else>
<div style="height:300px;border-radius:4px;overflow:hidden;margin-bottom:8px">
<CodeEditor v-model="editorJson" language="json" />
</div>
</template>
<div style="margin-top:8px">
<el-button size="small" type="primary" @click="savePages" :loading="saving">保存</el-button>
</div>
</div>
</template>
</el-table-column>
</el-table>
<div v-if="editSiteId" style="margin-top:16px;padding:12px;background:#fafafa;border-radius:4px">
<div style="margin-bottom:8px;display:flex;gap:8px;align-items:center">
<strong>编辑: {{ editSiteId }}</strong>
<el-radio-group v-model="editorMode" size="small">
<el-radio-button label="table">表格</el-radio-button>
<el-radio-button label="json">JSON</el-radio-button>
</el-radio-group>
</div>
<template v-if="editorMode==='table'">
<el-table :data="editingEntries" stripe size="small" style="margin-bottom:8px">
<el-table-column prop="key" label="key" width="100"><template #default="e"><el-input v-model="e.row.key" size="small"/></template></el-table-column>
<el-table-column prop="label" label="名称" width="100"><template #default="e"><el-input v-model="e.row.label" size="small"/></template></el-table-column>
<el-table-column prop="url" label="URL" min-width="200"><template #default="e"><el-input v-model="e.row.url" size="small"/></template></el-table-column>
<el-table-column prop="method" label="方法" width="80"><template #default="e"><el-select v-model="e.row.method" size="small"><el-option label="GET" value="GET"/><el-option label="POST" value="POST"/></el-select></template></el-table-column>
<el-table-column label="" width="50"><template #default="e"><el-button size="small" type="danger" text @click="editingEntries.splice(e.$index,1)">×</el-button></template></el-table-column>
</el-table>
<el-button size="small" @click="editingEntries.push({key:'',label:'',url:'{base}',method:'GET'})">+ 添加</el-button>
</template>
<div v-else style="height:300px;border-radius:4px;overflow:hidden;margin-bottom:8px">
<CodeEditor v-model="editorJson" language="json" />
</div>
<div style="margin-top:8px;display:flex;gap:8px">
<el-button size="small" type="primary" @click="savePages" :loading="saving">保存</el-button>
<el-button size="small" @click="editSiteId=''">取消</el-button>
</div>
</div>
</el-card>
</div>
</template>
@@ -136,6 +126,5 @@ const savePages = async () => {
onMounted(fetchAll)
</script>
<style scoped>
.expand-hide :deep(.el-table__expand-column .cell) { display:none }
</style>