mirror of https://github.com/halo-dev/halo-admin
Complete theme setting
johnniang
parent
4a1ff54737
commit
9168146c9f
|
|
@ -27,7 +27,14 @@ themeApi.customTpls = () => {
|
||||||
|
|
||||||
themeApi.active = theme => {
|
themeApi.active = theme => {
|
||||||
return service({
|
return service({
|
||||||
url: `${baseUrl}/active?theme=${theme}`,
|
url: `${baseUrl}/${theme}/activation`,
|
||||||
|
method: 'post'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
themeApi.getActivatedTheme = () => {
|
||||||
|
return service({
|
||||||
|
url: `${baseUrl}/activation`,
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -39,9 +46,25 @@ themeApi.delete = key => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
themeApi.listOptions = theme => {
|
themeApi.fetchConfiguration = () => {
|
||||||
return service({
|
return service({
|
||||||
url: `${baseUrl}/configurations?name=${theme}`
|
url: `${baseUrl}/activation/configurations`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
themeApi.fetchSettings = () => {
|
||||||
|
return service({
|
||||||
|
url: `${baseUrl}/activation/settings`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
themeApi.saveSettings = settings => {
|
||||||
|
return service({
|
||||||
|
url: `${baseUrl}/activation/settings`,
|
||||||
|
data: settings,
|
||||||
|
method: 'post'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="page-header-index-wide">
|
<div class="page-header-index-wide">
|
||||||
<a-row :gutter="12" type="flex" align="middle">
|
<a-row
|
||||||
|
:gutter="12"
|
||||||
|
type="flex"
|
||||||
|
align="middle"
|
||||||
|
>
|
||||||
<a-col
|
<a-col
|
||||||
class="theme-item"
|
class="theme-item"
|
||||||
:xl="6"
|
:xl="6"
|
||||||
|
|
@ -13,23 +17,34 @@
|
||||||
>
|
>
|
||||||
<a-card :bodyStyle="{ padding: '14px' }">
|
<a-card :bodyStyle="{ padding: '14px' }">
|
||||||
<img
|
<img
|
||||||
:alt="theme.properties.name"
|
:alt="theme.name"
|
||||||
:src="'http://localhost:8090/' + theme.key + '/screenshot.png'"
|
:src="theme.screenshots"
|
||||||
slot="cover"
|
slot="cover"
|
||||||
/>
|
/>
|
||||||
<a-divider></a-divider>
|
<a-divider></a-divider>
|
||||||
<div class="theme-control">
|
<div class="theme-control">
|
||||||
<span class="theme-title">{{ theme.properties.name }}</span>
|
<span class="theme-title">{{ theme.name }}</span>
|
||||||
<a-button-group class="theme-button">
|
<a-button-group class="theme-button">
|
||||||
<a-button type="primary" v-if="activatedTheme == theme.key" disabled>已启用</a-button>
|
<a-button
|
||||||
<a-button type="primary" @click="activeTheme(theme.key)" v-else>启用</a-button>
|
type="primary"
|
||||||
<a-button @click="optionDrawer(theme.key)" v-if="activatedTheme == theme.key && theme.hasOptions">设置</a-button>
|
v-if="theme.activated"
|
||||||
|
disabled
|
||||||
|
>已启用</a-button>
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
@click="activeTheme(theme.id)"
|
||||||
|
v-else
|
||||||
|
>启用</a-button>
|
||||||
|
<a-button
|
||||||
|
@click="settingDrawer(theme.id)"
|
||||||
|
v-if="activatedTheme.id === theme.id && theme.hasOptions"
|
||||||
|
>设置</a-button>
|
||||||
<a-popconfirm
|
<a-popconfirm
|
||||||
:title="'确定删除【' + theme.properties.name + '】主题？'"
|
:title="'确定删除【' + theme.name + '】主题？'"
|
||||||
@confirm="deleteTheme(theme.key)"
|
@confirm="deleteTheme(theme.id)"
|
||||||
okText="确定"
|
okText="确定"
|
||||||
cancelText="取消"
|
cancelText="取消"
|
||||||
v-else-if="activatedTheme != theme.key"
|
v-else-if="activatedTheme != theme.id"
|
||||||
>
|
>
|
||||||
<a-button type="dashed">删除</a-button>
|
<a-button type="dashed">删除</a-button>
|
||||||
</a-popconfirm>
|
</a-popconfirm>
|
||||||
|
|
@ -38,18 +53,45 @@
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
<a-drawer :title="optionTheme + ' 主题设置'" width="100%" :closable="true" @close="onClose" :visible="visible">
|
<a-drawer
|
||||||
<a-row :gutter="12" type="flex">
|
v-if="activatedTheme"
|
||||||
<a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
:title="activatedTheme.name + ' 主题设置'"
|
||||||
|
width="100%"
|
||||||
|
:closable="true"
|
||||||
|
@close="onClose"
|
||||||
|
:visible="visible"
|
||||||
|
>
|
||||||
|
<a-row
|
||||||
|
:gutter="12"
|
||||||
|
type="flex"
|
||||||
|
>
|
||||||
|
<a-col
|
||||||
|
:xl="12"
|
||||||
|
:lg="12"
|
||||||
|
:md="12"
|
||||||
|
:sm="24"
|
||||||
|
:xs="24"
|
||||||
|
>
|
||||||
<img
|
<img
|
||||||
:alt="activatedTheme"
|
v-if="activatedTheme"
|
||||||
:src="'http://localhost:8090/' + activatedTheme + '/screenshot.png'"
|
:alt="activatedTheme.name"
|
||||||
|
:src="activatedTheme.screenshots"
|
||||||
width="100%"
|
width="100%"
|
||||||
/>
|
/>
|
||||||
</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>
|
<a-tabs>
|
||||||
<a-tab-pane v-for="(group, index) in themeConfiguration" :key="index" :tab="group.label">
|
<a-tab-pane
|
||||||
|
v-for="(group, index) in themeConfiguration"
|
||||||
|
:key="index"
|
||||||
|
:tab="group.label"
|
||||||
|
>
|
||||||
<a-form layout="vertical">
|
<a-form layout="vertical">
|
||||||
<a-form-item
|
<a-form-item
|
||||||
v-for="(item, index1) in group.items"
|
v-for="(item, index1) in group.items"
|
||||||
|
|
@ -57,31 +99,44 @@
|
||||||
:key="index1"
|
:key="index1"
|
||||||
:wrapper-col="wrapperCol"
|
:wrapper-col="wrapperCol"
|
||||||
>
|
>
|
||||||
<a-input v-model="themeOptions[item.name]" v-if="item.type == 'text'" />
|
<a-input
|
||||||
|
v-model="themeSettings[item.name]"
|
||||||
|
v-if="item.type == 'text'"
|
||||||
|
/>
|
||||||
<a-input
|
<a-input
|
||||||
type="textarea"
|
type="textarea"
|
||||||
:autosize="{ minRows: 5 }"
|
:autosize="{ minRows: 5 }"
|
||||||
v-model="themeOptions[item.name]"
|
v-model="themeSettings[item.name]"
|
||||||
v-else-if="item.type == 'textarea'"
|
v-else-if="item.type == 'textarea'"
|
||||||
/>
|
/>
|
||||||
<a-radio-group
|
<a-radio-group
|
||||||
v-decorator="['radio-group']"
|
v-decorator="['radio-group']"
|
||||||
defaultValue="false"
|
defaultValue="false"
|
||||||
v-model="themeOptions[item.name]"
|
v-model="themeSettings[item.name]"
|
||||||
v-else-if="item.type == 'radio'"
|
v-else-if="item.type == 'radio'"
|
||||||
>
|
>
|
||||||
<a-radio v-for="(option, index2) in item.options" :key="index2" :value="option.value">{{
|
<a-radio
|
||||||
option.label
|
v-for="(option, index2) in item.options"
|
||||||
}}</a-radio>
|
:key="index2"
|
||||||
|
:value="option.value"
|
||||||
|
>{{ option.label }}</a-radio>
|
||||||
</a-radio-group>
|
</a-radio-group>
|
||||||
<a-select v-model="themeOptions[item.name]" v-else-if="item.type == 'select'">
|
<a-select
|
||||||
<a-select-option v-for="(option, index3) in item.options" :key="index3" :value="option.value">{{
|
v-model="themeSettings[item.name]"
|
||||||
option.label
|
v-else-if="item.type == 'select'"
|
||||||
}}</a-select-option>
|
>
|
||||||
|
<a-select-option
|
||||||
|
v-for="(option, index3) in item.options"
|
||||||
|
:key="index3"
|
||||||
|
:value="option.value"
|
||||||
|
>{{ option.label }}</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
<a-button type="primary" @click="saveOptions">保存</a-button>
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
@click="saveSettings"
|
||||||
|
>保存</a-button>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
|
|
@ -94,7 +149,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import themeApi from '@/api/theme'
|
import themeApi from '@/api/theme'
|
||||||
import optionApi from '@/api/option'
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -106,13 +161,15 @@ export default {
|
||||||
},
|
},
|
||||||
themes: [],
|
themes: [],
|
||||||
visible: false,
|
visible: false,
|
||||||
optionTheme: '',
|
|
||||||
optionUrl: 'https://ryanc.cc',
|
optionUrl: 'https://ryanc.cc',
|
||||||
// TODO 从api获取当前使用的主题
|
// TODO 从api获取当前使用的主题
|
||||||
activatedTheme: 'anatole',
|
themeConfiguration: {},
|
||||||
themeConfiguration: [],
|
themeSettings: {}
|
||||||
options: {},
|
}
|
||||||
themeOptions: {}
|
},
|
||||||
|
computed: {
|
||||||
|
activatedTheme() {
|
||||||
|
return this.themes.find(theme => theme.activated)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -124,17 +181,15 @@ export default {
|
||||||
this.themes = response.data.data
|
this.themes = response.data.data
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
optionDrawer(theme) {
|
settingDrawer() {
|
||||||
themeApi.listOptions(theme).then(response => {
|
themeApi.fetchConfiguration().then(response => {
|
||||||
this.visible = true
|
this.visible = true
|
||||||
this.themeConfiguration = response.data.data
|
this.themeConfiguration = response.data.data
|
||||||
this.optionTheme = theme
|
this.loadSettings()
|
||||||
this.loadOptions()
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
activeTheme(theme) {
|
activeTheme(theme) {
|
||||||
themeApi.active(theme).then(response => {
|
themeApi.active(theme).then(response => {
|
||||||
this.activatedTheme = theme
|
|
||||||
this.$message.success('设置成功！')
|
this.$message.success('设置成功！')
|
||||||
this.loadThemes()
|
this.loadThemes()
|
||||||
})
|
})
|
||||||
|
|
@ -145,15 +200,14 @@ export default {
|
||||||
this.loadThemes()
|
this.loadThemes()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
saveOptions() {
|
saveSettings() {
|
||||||
optionApi.save(this.options).then(response => {
|
themeApi.saveSettings(this.themeSettings).then(response => {
|
||||||
this.loadOptions()
|
|
||||||
this.$message.success('保存成功！')
|
this.$message.success('保存成功！')
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
loadOptions() {
|
loadSettings() {
|
||||||
optionApi.listAll().then(response => {
|
themeApi.fetchSettings().then(response => {
|
||||||
this.options = response.data.data
|
this.themeSettings = response.data.data
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
onClose() {
|
onClose() {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue