修复:根据图片字段选择前台列表布局

This commit is contained in:
王鹏
2026-07-15 14:44:02 +08:00
parent 79dea897bc
commit 8247c86862
8 changed files with 92 additions and 53 deletions

View File

@@ -189,6 +189,13 @@
</el-row>
<el-divider content-position="left">页面布局策略</el-divider>
<el-alert
title="前台列表按字段自动布局:存在图片字段时使用卡片列表,否则使用标准列表。"
type="info"
:closable="false"
show-icon
style="margin-bottom: 18px"
/>
<el-row :gutter="18">
<el-col v-for="item in layoutPolicyFields" :key="item.key" :span="8">
<el-form-item :label="item.label">
@@ -258,12 +265,6 @@ function defaultAssets() {
return { iconStyle: 'outline', illustrationStyle: 'clean', chartPalette: ['#2563eb', '#06b6d4', '#7c3aed', '#f59e0b', '#10b981'] }
}
const FRONT_LIST_LAYOUTS = [
{ label: '标准表格', value: 'frontend-list-v1' }, { label: '卡片列表', value: 'frontend-list-card-v1' }, { label: '分栏列表', value: 'frontend-list-split-v1' }
]
const FRONT_MINE_LAYOUTS = [
{ label: '我的列表', value: 'frontend-current-user-list-v1' }, { label: '我的卡片', value: 'frontend-current-user-card-v1' }
]
const FRONT_DETAIL_LAYOUTS = [
{ label: '基础详情', value: 'frontend-detail-v1' }, { label: '图文详情', value: 'frontend-detail-media-v1' }
]
@@ -297,8 +298,6 @@ export default {
assetForm: defaultAssets(),
chartPaletteText: defaultAssets().chartPalette.join(', '),
layoutPolicyFields: [
{ key: 'frontend.list', label: '前台列表', options: FRONT_LIST_LAYOUTS },
{ key: 'frontend.current_user_list', label: '个人列表', options: FRONT_MINE_LAYOUTS },
{ key: 'frontend.detail', label: '前台详情', options: FRONT_DETAIL_LAYOUTS },
{ key: 'frontend.form', label: '前台表单', options: FRONT_FORM_LAYOUTS },
{ key: 'admin.list', label: '后台列表', options: ADMIN_LIST_LAYOUTS },
@@ -383,6 +382,12 @@ export default {
delete result.navigation
return result
},
normalizeLayoutPolicy(policy) {
const result = Object.assign({}, policy || {})
delete result['frontend.list']
delete result['frontend.current_user_list']
return result
},
rowPreviewStyle(row) {
const tokens = this.parseObject(row.tokensJson, defaultTokens())
return { '--mini-primary': tokens.primary, '--mini-accent': tokens.accent, '--mini-bg': tokens.background, '--mini-surface': tokens.surface, '--mini-border': tokens.border }
@@ -401,7 +406,7 @@ export default {
this.tokenForm = this.parseObject(this.form.tokensJson, defaultTokens())
this.componentForm = this.parseObject(this.form.componentDefaultsJson, defaultComponents())
this.shellForm = this.parseShell(this.form.shellJson)
this.layoutPolicyForm = this.parseObject(this.form.layoutPolicyJson, defaultLayoutPolicy())
this.layoutPolicyForm = this.normalizeLayoutPolicy(this.parseObject(this.form.layoutPolicyJson, defaultLayoutPolicy()))
this.assetForm = this.parseObject(this.form.assetPolicyJson, defaultAssets())
this.chartPaletteText = Array.isArray(this.assetForm.chartPalette) ? this.assetForm.chartPalette.join(', ') : ''
this.title = '修改视觉方案'
@@ -416,8 +421,9 @@ export default {
const shell = Object.assign({}, this.shellForm)
delete shell.navigation
this.form.shellJson = JSON.stringify(shell)
this.form.layoutPolicyJson = JSON.stringify(Object.keys(this.layoutPolicyForm).reduce((result, key) => {
if (this.layoutPolicyForm[key]) result[key] = this.layoutPolicyForm[key]
const layoutPolicy = this.normalizeLayoutPolicy(this.layoutPolicyForm)
this.form.layoutPolicyJson = JSON.stringify(Object.keys(layoutPolicy).reduce((result, key) => {
if (layoutPolicy[key]) result[key] = layoutPolicy[key]
return result
}, {}))
this.form.assetPolicyJson = JSON.stringify(Object.assign({}, this.assetForm, {