fix: 内联编辑替代弹窗+风险规则动态站点类型+页面配置修复加载
This commit is contained in:
mediabot-pt
@@ -11,59 +11,62 @@
|
||||
<el-table-column label="名称" min-width="130">
|
||||
<template #default="s">{{ (s.row.names||[]).join(' / ') || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="版本" width="80">
|
||||
<template #default="s">{{ s.row.version || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="入口数" width="70" align="center">
|
||||
<el-table-column label="入口数" width="80" align="center">
|
||||
<template #default="s">{{ s.row.entryCount || 0 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="版本" width="70" align="center">
|
||||
<template #default="s">{{ s.row.version || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" width="150">
|
||||
<template #default="s">{{ fmt(s.row.updatedAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<el-table-column label="操作" width="100" fixed="right">
|
||||
<template #default="s">
|
||||
<el-button size="small" @click="showEditor(s.row)">编辑</el-button>
|
||||
<el-button size="small" @click="toggleEdit(s.row)" :type="editSiteId===s.row.siteId?'warning':''">
|
||||
{{ editSiteId===s.row.siteId ? '收起' : '编辑' }}
|
||||
</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>
|
||||
</el-card>
|
||||
|
||||
<el-dialog v-model="editorVisible" :title="'页面配置: ' + editorSiteId" width="800px" destroy-on-close>
|
||||
<div style="margin-bottom:8px;display:flex;gap:8px;align-items:center">
|
||||
<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:12px">
|
||||
<el-table-column prop="key" label="标识" width="100">
|
||||
<template #default="s"><el-input v-model="s.row.key" size="small" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="label" label="名称" width="100">
|
||||
<template #default="s"><el-input v-model="s.row.label" size="small" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="url" label="URL" min-width="180">
|
||||
<template #default="s"><el-input v-model="s.row.url" size="small" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="method" label="方法" width="80">
|
||||
<template #default="s"><el-select v-model="s.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="60">
|
||||
<template #default="s"><el-button size="small" type="danger" text @click="editingEntries.splice(s.$index,1)">删除</el-button></template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-button size="small" @click="editingEntries.push({key:'',label:'',url:'{base}','method':'GET'})" style="margin-bottom:12px">+ 添加入口</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="height:400px;border-radius:4px;overflow:hidden;margin-bottom:12px">
|
||||
<CodeEditor v-model="editorJson" language="json" />
|
||||
</div>
|
||||
</template>
|
||||
<div style="display:flex;gap:8px">
|
||||
<el-button size="small" type="primary" @click="savePages" :loading="saving">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -72,21 +75,18 @@ import api from '../api'
|
||||
|
||||
const loading = ref(false), saving = ref(false)
|
||||
const sites = ref([]), pagesMap = ref({})
|
||||
const editorVisible = ref(false), editorSiteId = ref(''), editorMode = ref('table'), editorJson = ref('')
|
||||
const editSiteId = ref(''), editorMode = ref('table'), editorJson = ref('')
|
||||
const editingEntries = ref([])
|
||||
|
||||
watch(editorMode, (m) => {
|
||||
if (m === 'json') editorJson.value = JSON.stringify(editingEntries.value, null, 2)
|
||||
else {
|
||||
try { editingEntries.value = JSON.parse(editorJson.value) } catch { /* keep table data */ }
|
||||
}
|
||||
})
|
||||
|
||||
const fmt = (t) => t ? (t.substring(0,19)||'').replace('T',' ') : '-'
|
||||
|
||||
watch(editorMode, (m) => {
|
||||
if (m === 'json') editorJson.value = JSON.stringify(editingEntries.value, null, 2)
|
||||
else { try { editingEntries.value = JSON.parse(editorJson.value) } catch {} }
|
||||
})
|
||||
|
||||
const merged = computed(() => {
|
||||
const list = Array.isArray(sites.value) ? sites.value : []
|
||||
return list.map(s => ({
|
||||
return (Array.isArray(sites.value)?sites.value:[]).map(s => ({
|
||||
siteId: s.siteId,
|
||||
names: s.names,
|
||||
version: pagesMap.value[s.siteId]?.version || null,
|
||||
@@ -99,41 +99,43 @@ const merged = computed(() => {
|
||||
const fetchAll = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const [sr, pr] = await Promise.all([
|
||||
api.sites.adminList().catch(() => ({})),
|
||||
api.raw.get('/admin/site-pages').catch(() => ({})),
|
||||
const [sr, pr] = await Promise.allSettled([
|
||||
api.raw.get('/admin/sites'),
|
||||
api.raw.get('/admin/site-pages'),
|
||||
])
|
||||
sites.value = sr.data || sr || []
|
||||
const pages = pr.data || pr || []
|
||||
sites.value = (sr.status==='fulfilled' ? (sr.value?.data || sr.value || []) : [])
|
||||
const pages = pr.status==='fulfilled' ? (pr.value?.data || pr.value || []) : []
|
||||
const map = {}
|
||||
for (const p of pages) {
|
||||
const entries = JSON.parse(p.entriesJson || '[]')
|
||||
const entries = (() => { try { return JSON.parse(p.entriesJson||'[]') } catch {return []} })()
|
||||
map[p.siteId] = { version: p.version, entryCount: entries.length, updatedAt: p.updatedAt, entriesJson: p.entriesJson }
|
||||
}
|
||||
pagesMap.value = map
|
||||
} catch { ElMessage.error('加载失败') }
|
||||
finally { loading.value = false }
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
const showEditor = (row) => {
|
||||
editorSiteId.value = row.siteId
|
||||
try { editingEntries.value = JSON.parse(JSON.stringify(JSON.parse(row.entriesJson || '[]'))) }
|
||||
catch { editingEntries.value = [{key:'home',label:'首页',url:'{base}','method':'GET'}] }
|
||||
if (editingEntries.value.length === 0) editingEntries.value.push({key:'home',label:'首页',url:'{base}','method':'GET'})
|
||||
editorVisible.value = true
|
||||
const toggleEdit = (row) => {
|
||||
if (editSiteId.value === row.siteId) { editSiteId.value = ''; return }
|
||||
editSiteId.value = row.siteId
|
||||
editorMode.value = 'table'
|
||||
try { editingEntries.value = JSON.parse(JSON.stringify(JSON.parse(row.entriesJson||'[]'))) }
|
||||
catch { editingEntries.value = [{key:'home',label:'首页',url:'{base}',method:'GET'}] }
|
||||
if (editingEntries.value.length===0) editingEntries.value.push({key:'home',label:'首页',url:'{base}',method:'GET'})
|
||||
}
|
||||
|
||||
const savePages = async () => {
|
||||
saving.value = true
|
||||
try {
|
||||
const entries = editorMode.value === 'json' ? JSON.parse(editorJson.value) : editingEntries.value
|
||||
await api.raw.put('/sites/' + editorSiteId.value + '/pages', { entries })
|
||||
ElMessage.success('已保存')
|
||||
editorVisible.value = false
|
||||
fetchAll()
|
||||
const entries = editorMode.value==='json' ? JSON.parse(editorJson.value) : editingEntries.value
|
||||
await api.raw.put('/sites/'+editSiteId.value+'/pages', { entries })
|
||||
ElMessage.success('已保存'); editSiteId.value = ''; fetchAll()
|
||||
} catch { ElMessage.error('保存失败') }
|
||||
finally { saving.value = false }
|
||||
}
|
||||
|
||||
onMounted(fetchAll)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.expand-hide :deep(.el-table__expand-column .cell) { display:none }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user