mirror of https://github.com/halo-dev/halo-admin
主题设置页面加载效果
parent
5c2c9e05b4
commit
327ce1c017
|
@ -36,81 +36,85 @@
|
||||||
>
|
>
|
||||||
<a-row :gutter="12" type="flex">
|
<a-row :gutter="12" type="flex">
|
||||||
<a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
<a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
<img
|
<a-skeleton active :loading="optionLoading" :paragraph="{rows: 10}">
|
||||||
v-if="themeProperty"
|
<img
|
||||||
:alt="themeProperty.name"
|
v-if="themeProperty"
|
||||||
:src="themeProperty.screenshots"
|
:alt="themeProperty.name"
|
||||||
width="100%"
|
:src="themeProperty.screenshots"
|
||||||
>
|
width="100%"
|
||||||
|
>
|
||||||
|
</a-skeleton>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
<a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
<a-tabs defaultActiveKey="0">
|
<a-skeleton active :loading="optionLoading" :paragraph="{rows: 20}">
|
||||||
<a-tab-pane
|
<a-tabs defaultActiveKey="0">
|
||||||
v-for="(group, index) in themeConfiguration"
|
<a-tab-pane
|
||||||
:key="index"
|
v-for="(group, index) in themeConfiguration"
|
||||||
:tab="group.label"
|
:key="index"
|
||||||
>
|
:tab="group.label"
|
||||||
<a-form layout="vertical">
|
>
|
||||||
<a-form-item
|
<a-form layout="vertical">
|
||||||
v-for="(item, index1) in group.items"
|
<a-form-item
|
||||||
:label="item.label + ':'"
|
v-for="(item, index1) in group.items"
|
||||||
:key="index1"
|
:label="item.label + ':'"
|
||||||
:wrapper-col="wrapperCol"
|
:key="index1"
|
||||||
>
|
:wrapper-col="wrapperCol"
|
||||||
<a-input
|
|
||||||
v-model="themeSettings[item.name]"
|
|
||||||
:defaultValue="item.defaultValue"
|
|
||||||
v-if="item.type == 'TEXT'"
|
|
||||||
/>
|
|
||||||
<a-input
|
|
||||||
type="textarea"
|
|
||||||
:autosize="{ minRows: 5 }"
|
|
||||||
v-model="themeSettings[item.name]"
|
|
||||||
v-else-if="item.type == 'TEXTAREA'"
|
|
||||||
/>
|
|
||||||
<a-radio-group
|
|
||||||
v-decorator="['radio-group']"
|
|
||||||
:defaultValue="item.defaultValue"
|
|
||||||
v-model="themeSettings[item.name]"
|
|
||||||
v-else-if="item.type == 'RADIO'"
|
|
||||||
>
|
>
|
||||||
<a-radio
|
<a-input
|
||||||
v-for="(option, index2) in item.options"
|
v-model="themeSettings[item.name]"
|
||||||
:key="index2"
|
:defaultValue="item.defaultValue"
|
||||||
:value="option.value"
|
v-if="item.type == 'TEXT'"
|
||||||
>{{ option.label }}</a-radio>
|
/>
|
||||||
</a-radio-group>
|
<a-input
|
||||||
<a-select
|
type="textarea"
|
||||||
v-model="themeSettings[item.name]"
|
:autosize="{ minRows: 5 }"
|
||||||
:defaultValue="item.defaultValue"
|
v-model="themeSettings[item.name]"
|
||||||
v-else-if="item.type == 'SELECT'"
|
v-else-if="item.type == 'TEXTAREA'"
|
||||||
>
|
/>
|
||||||
<a-select-option
|
<a-radio-group
|
||||||
v-for="option in item.options"
|
v-decorator="['radio-group']"
|
||||||
:key="option.value"
|
:defaultValue="item.defaultValue"
|
||||||
:value="option.value"
|
v-model="themeSettings[item.name]"
|
||||||
>{{ option.label }}</a-select-option>
|
v-else-if="item.type == 'RADIO'"
|
||||||
</a-select>
|
>
|
||||||
</a-form-item>
|
<a-radio
|
||||||
|
v-for="(option, index2) in item.options"
|
||||||
|
:key="index2"
|
||||||
|
:value="option.value"
|
||||||
|
>{{ option.label }}</a-radio>
|
||||||
|
</a-radio-group>
|
||||||
|
<a-select
|
||||||
|
v-model="themeSettings[item.name]"
|
||||||
|
:defaultValue="item.defaultValue"
|
||||||
|
v-else-if="item.type == 'SELECT'"
|
||||||
|
>
|
||||||
|
<a-select-option
|
||||||
|
v-for="option in item.options"
|
||||||
|
:key="option.value"
|
||||||
|
:value="option.value"
|
||||||
|
>{{ option.label }}</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button type="primary" @click="saveSettings">保存</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="about" tab="关于">
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
<a-button type="primary" @click="saveSettings">保存</a-button>
|
<a-popconfirm
|
||||||
|
:title="'确定删除【' + themeProperty.name + '】主题?'"
|
||||||
|
@confirm="deleteTheme(themeProperty.id)"
|
||||||
|
okText="确定"
|
||||||
|
cancelText="取消"
|
||||||
|
>
|
||||||
|
<a-button type="danger">删除该主题</a-button>
|
||||||
|
</a-popconfirm>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-tab-pane>
|
||||||
</a-tab-pane>
|
</a-tabs>
|
||||||
<a-tab-pane key="about" tab="关于">
|
<a-skeleton :loading="optionLoading">
|
||||||
<a-form-item>
|
</a-skeleton></a-skeleton></a-col>
|
||||||
<a-popconfirm
|
|
||||||
:title="'确定删除【' + themeProperty.name + '】主题?'"
|
|
||||||
@confirm="deleteTheme(themeProperty.id)"
|
|
||||||
okText="确定"
|
|
||||||
cancelText="取消"
|
|
||||||
>
|
|
||||||
<a-button type="danger">删除该主题</a-button>
|
|
||||||
</a-popconfirm>
|
|
||||||
</a-form-item>
|
|
||||||
</a-tab-pane>
|
|
||||||
</a-tabs>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
</a-row>
|
||||||
</a-drawer>
|
</a-drawer>
|
||||||
</page-view>
|
</page-view>
|
||||||
|
@ -127,6 +131,7 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
optionLoading: true,
|
||||||
wrapperCol: {
|
wrapperCol: {
|
||||||
xl: { span: 12 },
|
xl: { span: 12 },
|
||||||
lg: { span: 12 },
|
lg: { span: 12 },
|
||||||
|
@ -163,6 +168,7 @@ export default {
|
||||||
that.loadSettings()
|
that.loadSettings()
|
||||||
that.getThemeProperty(themeId)
|
that.getThemeProperty(themeId)
|
||||||
})
|
})
|
||||||
|
that.optionLoading = false
|
||||||
}, 500)
|
}, 500)
|
||||||
},
|
},
|
||||||
activeTheme(theme) {
|
activeTheme(theme) {
|
||||||
|
@ -196,6 +202,7 @@ export default {
|
||||||
this.visible = false
|
this.visible = false
|
||||||
this.themeConfiguration = {}
|
this.themeConfiguration = {}
|
||||||
this.themeProperty = {}
|
this.themeProperty = {}
|
||||||
|
this.optionLoading = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue