From 769118ae06556bebea44685941cc72164d1d71ae Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Tue, 16 Apr 2019 19:12:12 +0800
Subject: [PATCH] Add icon for option tabs.

---
 src/views/system/OptionForm.vue | 177 +++++++++++++++++++++-----------
 1 file changed, 119 insertions(+), 58 deletions(-)

diff --git a/src/views/system/OptionForm.vue b/src/views/system/OptionForm.vue
index a3c081cb..2d68fc80 100644
--- a/src/views/system/OptionForm.vue
+++ b/src/views/system/OptionForm.vue
@@ -4,75 +4,91 @@
       <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
         <div class="card-container">
           <a-tabs type="card">
-            <a-tab-pane tab="常规设置" key="general">
+            <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-input v-model="options.blog_title"/>
                 </a-form-item>
                 <a-form-item label="博客地址：" :wrapper-col="wrapperCol">
-                  <a-input v-model="options.blog_url" />
+                  <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-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-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-input
+                    type="textarea"
+                    :autosize="{ minRows: 5 }"
+                    v-model="options.blog_footer_info"
+                  />
                 </a-form-item>
                 <a-form-item>
                   <a-button type="primary" @click="saveOptions">保存</a-button>
                 </a-form-item>
               </a-form>
             </a-tab-pane>
-            <a-tab-pane tab="SEO设置" key="seo">
+            <a-tab-pane key="seo">
+              <span slot="tab">
+                <a-icon type="read" />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-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-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-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-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-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-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-input v-model="options.seo_verification_qihu"/>
                 </a-form-item>
                 <a-form-item>
                   <a-button type="primary" @click="saveOptions">保存</a-button>
                 </a-form-item>
               </a-form>
             </a-tab-pane>
-            <a-tab-pane tab="文章设置" key="post">
+            <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-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-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-input type="number" defaultValue="200" v-model="options.post_summary_length"/>
                 </a-form-item>
                 <a-form-item>
                   <a-button type="primary" @click="saveOptions">保存</a-button>
                 </a-form-item>
               </a-form>
             </a-tab-pane>
-            <a-tab-pane tab="评论设置" key="comment">
+            <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">
@@ -96,7 +112,11 @@
                   </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-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>
@@ -132,23 +152,34 @@
                   </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-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-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-input
+                    type="textarea"
+                    :autosize="{ minRows: 5 }"
+                    v-model="options.comment_custom_style"
+                  />
                 </a-form-item>
                 <a-form-item>
                   <a-button type="primary" @click="saveOptions">保存</a-button>
                 </a-form-item>
               </a-form>
             </a-tab-pane>
-            <a-tab-pane tab="附件设置" key="attachment">
+            <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
+                    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="ypyun">又拍云</a-select-option>
@@ -158,24 +189,28 @@
                 </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
+                      :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-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-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-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-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-input v-model="options.oss_upyun_small_url"/>
                   </a-form-item>
                 </div>
                 <div class="qnyunForm" v-show="qnyunFormHidden">
@@ -190,37 +225,45 @@
                     </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
+                      :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-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-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-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-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
+                      :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-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-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-input v-model="options.oss_aliyun_bucket_name"/>
                   </a-form-item>
                 </div>
                 <a-form-item>
@@ -228,35 +271,42 @@
                 </a-form-item>
               </a-form>
             </a-tab-pane>
-            <a-tab-pane tab="SMTP 服务" key="smtp">
+            <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-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-input v-model="options.email_host"/>
                     </a-form-item>
                     <a-form-item label="发送协议：" :wrapper-col="wrapperCol">
-                      <a-input v-model="options.email_protocol" />
+                      <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-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-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-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-input v-model="options.email_from_name"/>
                     </a-form-item>
                     <a-form-item>
                       <a-button type="primary" @click="saveOptions">保存</a-button>
@@ -266,13 +316,13 @@
                 <a-tab-pane tab="发送测试" key="2">
                   <a-form layout="vertical">
                     <a-form-item label="收件人：" :wrapper-col="wrapperCol">
-                      <a-input />
+                      <a-input/>
                     </a-form-item>
                     <a-form-item label="主题：" :wrapper-col="wrapperCol">
-                      <a-input />
+                      <a-input/>
                     </a-form-item>
                     <a-form-item label="内容：" :wrapper-col="wrapperCol">
-                      <a-input type="textarea" :autosize="{ minRows: 5 }" />
+                      <a-input type="textarea" :autosize="{ minRows: 5 }"/>
                     </a-form-item>
                     <a-form-item>
                       <a-button type="primary">发送</a-button>
@@ -281,19 +331,30 @@
                 </a-tab-pane>
               </a-tabs>
             </a-tab-pane>
-            <a-tab-pane tab="其他设置" key="other">
+            <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-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-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-input
+                    type="textarea"
+                    :autosize="{ minRows: 5 }"
+                    v-model="options.blog_statistics_code"
+                  />
                 </a-form-item>
                 <a-form-item>
                   <a-button type="primary" @click="saveOptions">保存</a-button>