halo/src/views/system/OptionForm.vue

667 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="page-header-index-wide">
<a-row>
<a-col
:xl="24"
:lg="24"
:md="24"
:sm="24"
:xs="24"
>
<div class="card-container">
<a-tabs type="card">
<a-tab-pane key="general">
<span slot="tab">
<a-icon type="tool" />常规设置
</span>
<a-form layout="vertical">
<a-form-item
label="博客标题:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.blog_title" />
</a-form-item>
<a-form-item
label="博客地址:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.blog_url" />
</a-form-item>
<a-form-item
label="LOGO"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.blog_logo" />
</a-form-item>
<a-form-item
label="Favicon"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.blog_favicon" />
</a-form-item>
<a-form-item
label="页脚信息:"
:wrapper-col="wrapperCol"
>
<a-input
type="textarea"
:autosize="{ minRows: 5 }"
v-model="options.blog_footer_info"
/>
</a-form-item>
<a-form-item>
<a-button
type="primary"
@click="handleSaveOptions"
>保存</a-button>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane key="seo">
<span slot="tab">
<a-icon type="global" />SEO设置
</span>
<a-form layout="vertical">
<a-form-item
label="关键词: "
:wrapper-col="wrapperCol"
>
<a-tooltip
:trigger="['focus']"
placement="right"
title="多个关键词以英文逗号隔开"
>
<a-input v-model="options.seo_keywords" />
</a-tooltip>
</a-form-item>
<a-form-item
label="博客描述:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.seo_description" />
</a-form-item>
<a-form-item
label="百度推送 Token "
:wrapper-col="wrapperCol"
>
<a-input v-model="options.seo_baidu_token" />
</a-form-item>
<a-form-item
label="百度站点验证:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.seo_verification_baidu" />
</a-form-item>
<a-form-item
label="Google 站点验证:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.seo_verification_google" />
</a-form-item>
<a-form-item
label="Bing 站点验证:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.seo_verification_bing" />
</a-form-item>
<a-form-item
label="360 站点验证:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.seo_verification_qihu" />
</a-form-item>
<a-form-item>
<a-button
type="primary"
@click="handleSaveOptions"
>保存</a-button>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane key="post">
<span slot="tab">
<a-icon type="form" />文章设置
</span>
<a-form layout="vertical">
<a-form-item
label="首页显示条数:"
:wrapper-col="wrapperCol"
>
<a-input
type="number"
defaultValue="10"
v-model="options.post_index_page_size"
/>
</a-form-item>
<a-form-item
label="RSS 显示条数:"
:wrapper-col="wrapperCol"
>
<a-input
type="number"
defaultValue="10"
v-model="options.rss_page_size"
/>
</a-form-item>
<a-form-item
label="文章摘要字数:"
:wrapper-col="wrapperCol"
>
<a-input
type="number"
defaultValue="200"
v-model="options.post_summary_length"
/>
</a-form-item>
<a-form-item>
<a-button
type="primary"
@click="handleSaveOptions"
>保存</a-button>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane key="comment">
<span slot="tab">
<a-icon type="message" />评论设置
</span>
<a-form layout="vertical">
<a-form-item
label="评论者头像:"
:wrapper-col="wrapperCol"
>
<a-select
defaultValue="mm"
v-model="options.comment_gavatar_default"
>
<a-select-option value="mm">默认</a-select-option>
<a-select-option value="identicon">抽象几何图形</a-select-option>
<a-select-option value="monsterid">小怪物</a-select-option>
<a-select-option value="wavatar">Wavatar</a-select-option>
<a-select-option value="retro">复古</a-select-option>
<a-select-option value="robohash">机器人</a-select-option>
<a-select-option value="blank">不显示头像</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="评论审核后才显示:"
:wrapper-col="wrapperCol"
>
<a-radio-group
v-decorator="['radio-group']"
defaultValue="true"
v-model="options.comment_new_need_check"
>
<a-radio value="true">启用</a-radio>
<a-radio value="false">禁用</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
label="新评论通知:"
:wrapper-col="wrapperCol"
>
<a-radio-group
v-decorator="['radio-group']"
defaultValue="true"
v-model="options.comment_new_notice"
>
<a-radio value="true">启用</a-radio>
<a-radio value="false">禁用</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
label="评论审核通过通知对方:"
:wrapper-col="wrapperCol"
>
<a-radio-group
v-decorator="['radio-group']"
defaultValue="false"
v-model="options.comment_pass_notice"
>
<a-radio value="true">启用</a-radio>
<a-radio value="false">禁用</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
label="评论回复通知对方:"
:wrapper-col="wrapperCol"
>
<a-radio-group
v-decorator="['radio-group']"
defaultValue="false"
v-model="options.comment_reply_notice"
>
<a-radio value="true">启用</a-radio>
<a-radio value="false">禁用</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
label="API 评论开关:"
:wrapper-col="wrapperCol"
>
<a-radio-group
v-decorator="['radio-group']"
defaultValue="false"
v-model="options.comment_api_enabled"
>
<a-radio value="true">启用</a-radio>
<a-radio value="false">禁用</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
label="每页显示条数: "
:wrapper-col="wrapperCol"
>
<a-input
type="number"
defaultValue="10"
v-model="options.comment_page_size"
/>
</a-form-item>
<a-form-item
label="占位提示:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.comment_content_placeholder" />
</a-form-item>
<a-form-item
label="自定义样式:"
:wrapper-col="wrapperCol"
>
<a-input
type="textarea"
:autosize="{ minRows: 5 }"
v-model="options.comment_custom_style"
/>
</a-form-item>
<a-form-item>
<a-button
type="primary"
@click="handleSaveOptions"
>保存</a-button>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane key="attachment">
<span slot="tab">
<a-icon type="picture" />附件设置
</span>
<a-form layout="vertical">
<a-form-item
label="存储位置:"
:wrapper-col="wrapperCol"
>
<a-select
defaultValue="local"
@change="handleAttachChange"
v-model="options.attachment_type"
>
<a-select-option value="local">本地</a-select-option>
<a-select-option value="smms">SM.MS</a-select-option>
<a-select-option value="upyun">又拍云</a-select-option>
<a-select-option value="qnyun">七牛云</a-select-option>
<a-select-option value="aliyun">阿里云</a-select-option>
</a-select>
</a-form-item>
<div
class="upyunForm"
v-show="upyunFormHidden"
>
<a-form-item
label="域名:"
:wrapper-col="wrapperCol"
>
<a-tooltip
:trigger="['focus']"
placement="right"
title="需要加上 http:// 或者 https://"
>
<a-input v-model="options.oss_upyun_domain" />
</a-tooltip>
</a-form-item>
<a-form-item
label="空间名称:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.oss_upyun_bucket" />
</a-form-item>
<a-form-item
label="操作员名称:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.oss_upyun_operator" />
</a-form-item>
<a-form-item
label="操作员密码:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.oss_upyun_password" />
</a-form-item>
<a-form-item
label="文件目录:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.oss_upyun_source" />
</a-form-item>
<a-form-item
label="处理策略:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.oss_upyun_small_url" />
</a-form-item>
</div>
<div
class="qnyunForm"
v-show="qnyunFormHidden"
>
<a-form-item
label="区域:"
:wrapper-col="wrapperCol"
>
<a-select
defaultValue="auto"
v-model="options.oss_qiniu_zone"
>
<a-select-option value="auto">自动选择</a-select-option>
<a-select-option value="z0">华东</a-select-option>
<a-select-option value="z1">华北</a-select-option>
<a-select-option value="z2">华南</a-select-option>
<a-select-option value="na0">北美</a-select-option>
<a-select-option value="as0">东南亚</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="域名:"
:wrapper-col="wrapperCol"
>
<a-tooltip
:trigger="['focus']"
placement="right"
title="需要加上 http:// 或者 https://"
>
<a-input v-model="options.oss_qiniu_domain" />
</a-tooltip>
</a-form-item>
<a-form-item
label="Access Key"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.oss_qiniu_access_key" />
</a-form-item>
<a-form-item
label="Secret Key"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.oss_qiniu_secret_key" />
</a-form-item>
<a-form-item
label="Bucket"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.oss_qiniu_bucket" />
</a-form-item>
<a-form-item
label="处理策略:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.oss_qiniu_small_url" />
</a-form-item>
</div>
<div
class="aliyunForm"
v-show="aliyunFormHidden"
>
<a-form-item
label="域名:"
:wrapper-col="wrapperCol"
>
<a-tooltip
:trigger="['focus']"
placement="right"
title="需要加上 http:// 或者 https://"
>
<a-input v-model="options.oss_aliyun_endpoint" />
</a-tooltip>
</a-form-item>
<a-form-item
label="Access Key"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.oss_aliyun_access_key" />
</a-form-item>
<a-form-item
label="Access Secret"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.oss_aliyun_access_secret" />
</a-form-item>
<a-form-item
label="Bucket"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.oss_aliyun_bucket_name" />
</a-form-item>
</div>
<a-form-item>
<a-button
type="primary"
@click="handleSaveOptions"
>保存</a-button>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane key="smtp">
<span slot="tab">
<a-icon type="mail" />SMTP 服务
</span>
<a-tabs defaultActiveKey="1">
<a-tab-pane
tab="发信设置"
key="1"
>
<a-form layout="vertical">
<a-form-item
label="是否启用:"
:wrapper-col="wrapperCol"
>
<a-radio-group
v-decorator="['radio-group']"
defaultValue="false"
v-model="options.email_enabled"
>
<a-radio value="true">启用</a-radio>
<a-radio value="false">禁用</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
label="SMTP 地址:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.email_host" />
</a-form-item>
<a-form-item
label="发送协议:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.email_protocol" />
</a-form-item>
<a-form-item
label="SSL 端口:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.email_ssl_port" />
</a-form-item>
<a-form-item
label="邮箱账号:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.email_username" />
</a-form-item>
<a-form-item
label="邮箱密码:"
:wrapper-col="wrapperCol"
>
<a-tooltip
:trigger="['focus']"
placement="right"
title="部分邮箱可能是授权码"
>
<a-input v-model="options.email_password" />
</a-tooltip>
</a-form-item>
<a-form-item
label="发件人:"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.email_from_name" />
</a-form-item>
<a-form-item>
<a-button
type="primary"
@click="handleSaveOptions"
>保存</a-button>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane
tab="发送测试"
key="2"
>
<a-form layout="vertical">
<a-form-item
label="收件人:"
:wrapper-col="wrapperCol"
>
<a-input />
</a-form-item>
<a-form-item
label="主题:"
:wrapper-col="wrapperCol"
>
<a-input />
</a-form-item>
<a-form-item
label="内容:"
:wrapper-col="wrapperCol"
>
<a-input
type="textarea"
:autosize="{ minRows: 5 }"
/>
</a-form-item>
<a-form-item>
<a-button type="primary">发送</a-button>
</a-form-item>
</a-form>
</a-tab-pane>
</a-tabs>
</a-tab-pane>
<a-tab-pane key="other">
<span slot="tab">
<a-icon type="align-left" />其他设置
</span>
<a-form layout="vertical">
<a-form-item
label="API服务"
:wrapper-col="wrapperCol"
>
<a-radio-group
v-decorator="['radio-group']"
defaultValue="false"
v-model="options.api_enabled"
>
<a-radio value="true">启用</a-radio>
<a-radio value="false"></a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
label="Access key"
:wrapper-col="wrapperCol"
>
<a-input v-model="options.blog_api_access_key" />
</a-form-item>
<a-form-item
label="统计代码:"
:wrapper-col="wrapperCol"
>
<a-input
type="textarea"
:autosize="{ minRows: 5 }"
v-model="options.blog_statistics_code"
/>
</a-form-item>
<a-form-item>
<a-button
type="primary"
@click="handleSaveOptions"
>保存</a-button>
</a-form-item>
</a-form>
</a-tab-pane>
</a-tabs>
</div>
</a-col>
</a-row>
</div>
</template>
<script>
import optionApi from '@/api/option'
export default {
data() {
return {
wrapperCol: {
xl: { span: 8 },
lg: { span: 8 },
sm: { span: 12 },
xs: { span: 24 }
},
upyunFormHidden: false,
qnyunFormHidden: false,
aliyunFormHidden: false,
options: []
}
},
mounted() {
this.loadOptions()
},
methods: {
loadOptions() {
optionApi.listAll().then(response => {
this.options = response.data.data
})
},
handleSaveOptions() {
optionApi.save(this.options).then(response => {
this.loadOptions()
this.$message.success('保存成功!')
})
},
handleAttachChange(e) {
switch (e) {
case 'local':
case 'smms':
this.upyunFormHidden = false
this.qnyunFormHidden = false
this.aliyunFormHidden = false
break
case 'upyun':
this.upyunFormHidden = true
this.qnyunFormHidden = false
this.aliyunFormHidden = false
break
case 'qnyun':
this.qnyunFormHidden = true
this.upyunFormHidden = false
this.aliyunFormHidden = false
break
case 'aliyun':
this.aliyunFormHidden = true
this.qnyunFormHidden = false
this.upyunFormHidden = false
break
}
}
}
}
</script>