From 3439ec460dc747e48359554dc07ad40b392c4548 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Tue, 23 Apr 2019 01:11:37 +0800
Subject: [PATCH] Support theme file editable.

---
 src/api/theme.js                             | 21 ++++++++
 src/views/interface/ThemeEdit.vue            | 53 ++++++++++++++++----
 src/views/interface/components/ThemeFile.vue |  2 +-
 src/views/post/TagList.vue                   |  2 +-
 4 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/src/api/theme.js b/src/api/theme.js
index 07d103382..43dd2e853 100644
--- a/src/api/theme.js
+++ b/src/api/theme.js
@@ -96,4 +96,25 @@ themeApi.fetching = url => {
   })
 }
 
+themeApi.getContent = path => {
+  return service({
+    url: `${baseUrl}/files/content`,
+    params: {
+      path: path
+    },
+    method: 'get'
+  })
+}
+
+themeApi.saveContent = (path, content) => {
+  return service({
+    url: `${baseUrl}/files/content`,
+    params: {
+      path: path,
+      content: content
+    },
+    method: 'put'
+  })
+}
+
 export default themeApi
diff --git a/src/views/interface/ThemeEdit.vue b/src/views/interface/ThemeEdit.vue
index f7630cd19..ddf0d4ee9 100644
--- a/src/views/interface/ThemeEdit.vue
+++ b/src/views/interface/ThemeEdit.vue
@@ -7,15 +7,14 @@
         :md="18"
         :sm="24"
         :xs="24"
-        :style="{'padding-bottom':'12px'}"
-      >
+        :style="{'padding-bottom':'12px'}">
         <a-card>
           <a-form layout="vertical">
             <a-form-item>
-              <codemirror :value="value"></codemirror>
+              <codemirror v-model="content" :options="options"></codemirror>
             </a-form-item>
             <a-form-item>
-              <a-button type="primary">保存</a-button>
+              <a-button type="primary" @click="handlerSaveContent" :disabled="buttonDisabled">保存</a-button>
             </a-form-item>
           </a-form>
         </a-card>
@@ -26,10 +25,9 @@
         :md="6"
         :sm="24"
         :xs="24"
-        :style="{'padding-bottom':'12px'}"
-      >
+        :style="{'padding-bottom':'12px'}">
         <a-card title="Anatole 主题">
-          <theme-file :files="files" />
+          <theme-file :files="files" @listenToSelect="catchSelectFile"/>
         </a-card>
       </a-col>
     </a-row>
@@ -40,6 +38,7 @@
 import themeApi from '@/api/theme'
 import ThemeFile from './components/ThemeFile'
 import { codemirror } from 'vue-codemirror-lite'
+import 'codemirror/mode/htmlmixed/htmlmixed.js'
 export default {
   components: {
     codemirror,
@@ -47,8 +46,16 @@ export default {
   },
   data() {
     return {
+      buttonDisabled: true,
+      options: {
+        tabSize: 4,
+        mode: 'text/html',
+        lineNumbers: true,
+        line: true
+      },
       files: [],
-      value: 'Hello world'
+      file: {},
+      content: ''
     }
   },
   created() {
@@ -65,6 +72,34 @@ export default {
       themeApi.listFiles().then(response => {
         this.files = response.data.data
       })
+    },
+    catchSelectFile(file) {
+      const _this = this
+      if (!file.editable) {
+        this.$message.info('该文件不支持修改')
+        return
+      }
+      if (file.name === 'options.yaml' || file.name === 'options.yml') {
+        this.$confirm({
+          title: '警告：请谨慎修改该配置文件',
+          content: '修改之后可能会产生不可预料的问题',
+          onCancel() {
+            _this.content = ''
+            _this.file = {}
+            _this.buttonDisabled = true
+          }
+        })
+      }
+      themeApi.getContent(file.path).then(response => {
+        this.content = response.data.data
+        this.file = file
+        this.buttonDisabled = false
+      })
+    },
+    handlerSaveContent() {
+      themeApi.saveContent(this.file.path, this.content).then(response => {
+        this.$message.success('保存成功')
+      })
     }
   }
 }
@@ -72,7 +107,7 @@ export default {
 
 <style lang="less">
 .CodeMirror {
-    height: 560px;
+  height: 560px;
 }
 .CodeMirror-gutters {
   border-right: 1px solid #fff3f3;
diff --git a/src/views/interface/components/ThemeFile.vue b/src/views/interface/components/ThemeFile.vue
index c52f8865f..0d6a23693 100644
--- a/src/views/interface/components/ThemeFile.vue
+++ b/src/views/interface/components/ThemeFile.vue
@@ -10,7 +10,7 @@ export default {
   },
   methods: {
     handleSelectFile(file) {
-      this.$log.debug('加载文件', file)
+      this.$emit('listenToSelect', file)
     },
     renderNode(h, file) {
       const _this = this
diff --git a/src/views/post/TagList.vue b/src/views/post/TagList.vue
index 6b3314b70..a6087b907 100644
--- a/src/views/post/TagList.vue
+++ b/src/views/post/TagList.vue
@@ -34,7 +34,7 @@
             <template slot="title">
               <span>{{ tag.postCount }} 篇文章</span>
             </template>
-            <a-tag closable @close="deleteTag(tag.id)" color="green">{{ tag.name }}</a-tag>
+            <a-tag closable @close="deleteTag(tag.id)" color="blue">{{ tag.name }}</a-tag>
           </a-tooltip>
         </a-card>
       </a-col>