From 0d6fb1e4575dc1ca4961d11f488ce621791e41da Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 4 Mar 2020 20:00:06 +0800
Subject: [PATCH] feat: support meta_keywords and meta_description. (#79)

---
 package-lock.json                             | 18 +++---
 package.json                                  |  6 +-
 .../post/components/PostSettingDrawer.vue     | 56 +++++++++++++++---
 .../sheet/components/SheetSettingDrawer.vue   | 57 +++++++++++++++++--
 4 files changed, 112 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b91625a7..b26d77dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2474,9 +2474,9 @@
       }
     },
     "ant-design-vue": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-1.4.11.tgz",
-      "integrity": "sha512-XwddZpasH8WuWSxvDHakSZSuKAMi1KVbLP49nWpYxCpAk/MiSTsMZvsmxA6BaSoRwSTJ57Y6WJJZ6fOJSR/nxg==",
+      "version": "1.4.12",
+      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-1.4.12.tgz",
+      "integrity": "sha512-m+hWKF208DN8XX4s4BHCnh+XlUhJy8FUs13a9+jtZCoiQB2zpZdafJeu1LEcFaFlK7fxXfp61fWJJJm0S6ek0g==",
       "requires": {
         "@ant-design/icons": "^2.1.1",
         "@ant-design/icons-vue": "^2.0.0",
@@ -6670,9 +6670,9 @@
       "optional": true
     },
     "filepond": {
-      "version": "4.11.0",
-      "resolved": "https://registry.npmjs.org/filepond/-/filepond-4.11.0.tgz",
-      "integrity": "sha512-BCzpBBnv8DgBUeEZPNQyltdD1YIXemm8VjQJ9+vKKhVkGMRQcAzGBFZBtWJSI4dbZF8KVQn+jIvRGujcm5T+EA=="
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/filepond/-/filepond-4.12.0.tgz",
+      "integrity": "sha512-43+WI8R3RtSiPsKTcofnf9CW3i26sENIJFC1VERlu593mg/c5o74SU+gUfoocRWqDWQxjwE2qrobe+CUCPRASg=="
     },
     "filepond-plugin-image-preview": {
       "version": "4.6.1",
@@ -14584,9 +14584,9 @@
       "integrity": "sha512-UzD8t1CG+aoWVOOpGd5KcaCNtCgUc0byaKhJMH+6N7H/p1ThVkYl/VCt7DmCrdhUlzZK+hT5JPTKAdrbWi0nNw=="
     },
     "vue-router": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.5.tgz",
-      "integrity": "sha512-BszkPvhl7I9h334GjckCh7sVFyjTPMMJFJ4Bsrem/Ik+B/9gt5tgrk8k4gGLO4ZpdvciVdg7O41gW4DisQWurg=="
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",
+      "integrity": "sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA=="
     },
     "vue-style-loader": {
       "version": "4.1.2",
diff --git a/package.json b/package.json
index ce06fdce..5676dca8 100644
--- a/package.json
+++ b/package.json
@@ -9,10 +9,10 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "ant-design-vue": "^1.4.11",
+    "ant-design-vue": "^1.4.12",
     "axios": "^0.19.2",
     "enquire.js": "^2.1.6",
-    "filepond": "^4.11.0",
+    "filepond": "^4.12.0",
     "filepond-plugin-image-preview": "^4.6.1",
     "halo-editor": "^2.8.2",
     "marked": "^0.8.0",
@@ -25,7 +25,7 @@
     "vue-dplayer": "0.0.10",
     "vue-filepond": "^6.0.2",
     "vue-ls": "^3.2.1",
-    "vue-router": "^3.1.5",
+    "vue-router": "^3.1.6",
     "vuejs-logger": "^1.5.3",
     "vuex": "^3.1.1"
   },
diff --git a/src/views/post/components/PostSettingDrawer.vue b/src/views/post/components/PostSettingDrawer.vue
index fcd1093c..4de73a2a 100644
--- a/src/views/post/components/PostSettingDrawer.vue
+++ b/src/views/post/components/PostSettingDrawer.vue
@@ -158,7 +158,7 @@
                   type="textarea"
                   :autosize="{ minRows: 5 }"
                   v-model="selectedPost.summary"
-                  placeholder="不填写则会自动生成"
+                  placeholder="如不填写，会从文章中自动截取"
                 />
               </a-form-item>
             </a-form>
@@ -193,6 +193,43 @@
             </div>
           </div>
         </div>
+        <a-divider class="divider-transparent" />
+      </div>
+    </a-skeleton>
+    <AttachmentSelectDrawer
+      v-model="thumbDrawerVisible"
+      @listenToSelect="handleSelectPostThumb"
+      :drawerWidth="460"
+    />
+
+    <a-drawer
+      title="高级设置"
+      :width="isMobile()?'100%':'480'"
+      placement="right"
+      closable
+      destroyOnClose
+      @close="onAdvancedClose"
+      :visible="advancedVisible"
+    >
+      <div class="post-setting-drawer-content">
+        <div :style="{ marginBottom: '16px' }">
+          <h3 class="post-setting-drawer-title">SEO 设置</h3>
+          <div class="post-setting-drawer-item">
+            <a-form layout="vertical">
+              <a-form-item label="关键词：">
+                <a-input v-model="selectedPost.metaKeywords" placeholder="以英文逗号隔开，如不填写，将使用标签作为关键词"/>
+              </a-form-item>
+              <a-form-item label="描述：">
+                <a-input
+                  type="textarea"
+                  :autosize="{ minRows: 5 }"
+                  v-model="selectedPost.metaDescription"
+                  placeholder="如不填写，会从文章中自动截取"
+                />
+              </a-form-item>
+            </a-form>
+          </div>
+        </div>
         <a-divider />
         <div :style="{ marginBottom: '16px' }">
           <h3 class="post-setting-drawer-title">元数据</h3>
@@ -230,13 +267,14 @@
         </div>
         <a-divider class="divider-transparent" />
       </div>
-    </a-skeleton>
-    <AttachmentSelectDrawer
-      v-model="thumbDrawerVisible"
-      @listenToSelect="handleSelectPostThumb"
-      :drawerWidth="460"
-    />
+    </a-drawer>
+
     <div class="bottom-control">
+      <a-button
+        style="marginRight: 8px"
+        type="dashed"
+        @click="()=>this.advancedVisible = true"
+      >高级</a-button>
       <a-button
         style="marginRight: 8px"
         @click="handleDraftClick"
@@ -282,6 +320,7 @@ export default {
     return {
       thumbDrawerVisible: false,
       categoryFormVisible: false,
+      advancedVisible: false,
       settingLoading: true,
       selectedPost: this.post,
       selectedTagIds: this.tagIds,
@@ -503,6 +542,9 @@ export default {
     onClose() {
       this.$emit('close', false)
     },
+    onAdvancedClose() {
+      this.advancedVisible = false
+    },
     onPostDateChange(value, dateString) {
       this.selectedPost.createTime = value.valueOf()
     },
diff --git a/src/views/sheet/components/SheetSettingDrawer.vue b/src/views/sheet/components/SheetSettingDrawer.vue
index 53b96f73..d88406ef 100644
--- a/src/views/sheet/components/SheetSettingDrawer.vue
+++ b/src/views/sheet/components/SheetSettingDrawer.vue
@@ -111,6 +111,46 @@
             </div>
           </div>
         </div>
+        <a-divider class="divider-transparent" />
+      </div>
+    </a-skeleton>
+    <AttachmentSelectDrawer
+      v-model="thumbDrawerVisible"
+      @listenToSelect="handleSelectSheetThumb"
+      :drawerWidth="460"
+    />
+
+    <a-drawer
+      title="高级设置"
+      :width="isMobile()?'100%':'480'"
+      placement="right"
+      closable
+      destroyOnClose
+      @close="onAdvancedClose"
+      :visible="advancedVisible"
+    >
+      <div class="post-setting-drawer-content">
+        <div :style="{ marginBottom: '16px' }">
+          <h3 class="post-setting-drawer-title">SEO 设置</h3>
+          <div class="post-setting-drawer-item">
+            <a-form layout="vertical">
+              <a-form-item label="关键词：">
+                <a-input
+                  v-model="selectedSheet.metaKeywords"
+                  placeholder="以英文逗号隔开，如不填写，将使用标签作为关键词"
+                />
+              </a-form-item>
+              <a-form-item label="描述：">
+                <a-input
+                  type="textarea"
+                  :autosize="{ minRows: 5 }"
+                  v-model="selectedSheet.metaDescription"
+                  placeholder="如不填写，会从页面中自动截取"
+                />
+              </a-form-item>
+            </a-form>
+          </div>
+        </div>
         <a-divider />
         <div :style="{ marginBottom: '16px' }">
           <h3 class="post-setting-drawer-title">元数据</h3>
@@ -148,13 +188,14 @@
         </div>
         <a-divider class="divider-transparent" />
       </div>
-    </a-skeleton>
-    <AttachmentSelectDrawer
-      v-model="thumbDrawerVisible"
-      @listenToSelect="handleSelectSheetThumb"
-      :drawerWidth="460"
-    />
+    </a-drawer>
+
     <div class="bottom-control">
+      <a-button
+        style="marginRight: 8px"
+        type="dashed"
+        @click="()=>this.advancedVisible = true"
+      >高级</a-button>
       <a-button
         style="marginRight: 8px"
         @click="handleDraftClick"
@@ -184,6 +225,7 @@ export default {
   data() {
     return {
       thumbDrawerVisible: false,
+      advancedVisible: false,
       settingLoading: true,
       selectedSheet: this.sheet,
       customTpls: [],
@@ -337,6 +379,9 @@ export default {
     onClose() {
       this.$emit('close', false)
     },
+    onAdvancedClose() {
+      this.advancedVisible = false
+    },
     onSheetDateChange(value, dateString) {
       this.selectedSheet.createTime = value.valueOf()
     },