From 69b2ad828780c15fd9a86c5e9d1014327644f558 Mon Sep 17 00:00:00 2001
From: Rokita <35868425+Ruukita@users.noreply.github.com>
Date: Sun, 3 May 2020 09:06:17 +0800
Subject: [PATCH 1/4] Finish rename function

---
 src/api/static.js                             | 11 ++++
 .../system/developer/tabs/StaticStorage.vue   | 65 ++++++++++++++++++-
 2 files changed, 75 insertions(+), 1 deletion(-)

diff --git a/src/api/static.js b/src/api/static.js
index 648392059..911a62386 100644
--- a/src/api/static.js
+++ b/src/api/static.js
@@ -46,4 +46,15 @@ staticApi.upload = (formData, uploadProgress, cancelToken, basePath) => {
   })
 }
 
+staticApi.rename = (basePath, newName) => {
+  return service({
+    url: `${baseUrl}/rename`,
+    params: {
+      basePath: basePath,
+      newName: newName
+    },
+    method: 'post'
+  })
+}
+
 export default staticApi
diff --git a/src/views/system/developer/tabs/StaticStorage.vue b/src/views/system/developer/tabs/StaticStorage.vue
index fadfbfacd..b5c26daa7 100644
--- a/src/views/system/developer/tabs/StaticStorage.vue
+++ b/src/views/system/developer/tabs/StaticStorage.vue
@@ -91,6 +91,14 @@
                     <a href="javascript:;">删除</a>
                   </a-popconfirm>
                 </a-menu-item>
+                <a-menu-item
+                  key="3"
+                >
+                  <a
+                    href="javascript:;"
+                    @click="handleShowRenameModal(record)"
+                  >重命名</a>
+                </a-menu-item>
               </a-menu>
             </a-dropdown>
           </span>
@@ -132,9 +140,32 @@
         </a-form-item>
       </a-form>
     </a-modal>
+    <a-modal
+      v-model="renameModal"
+      :afterClose="onRenameClose"
+      title="重命名"
+    >
+      <template slot="footer">
+        <a-button
+          key="submit"
+          type="primary"
+          @click="handleRename()"
+        >重命名</a-button>
+      </template>
+      <a-form layout="vertical">
+        <a-form-item :label="isFile?'文件名：':'文件夹名：'">
+          <a-input
+            ref="renameModalInput"
+            v-model="renameName"
+            @keyup.enter="handleRename"
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 <script>
+import Vue from 'vue'
 import { mapGetters } from 'vuex'
 import staticApi from '@/api/static'
 const columns = [
@@ -172,7 +203,10 @@ export default {
       uploadVisible: false,
       selectedFile: {},
       createFolderModal: false,
-      createFolderName: ''
+      createFolderName: '',
+      renameModal: false,
+      renameName: '',
+      isFile: false
     }
   },
   created() {
@@ -209,6 +243,24 @@ export default {
       this.selectedFile = file
       this.createFolderModal = true
     },
+    handleShowRenameModal(file) {
+      this.selectedFile = file
+      this.renameName = file.name
+      this.isFile = file.isFile
+      this.renameModal = true
+      const that = this
+      Vue.nextTick()
+        .then(() => {
+          const inputRef = that.$refs.renameModalInput
+          const tmp = inputRef.value.split('.')
+          inputRef.focus()
+          if (tmp.length <= 1) {
+            inputRef.$el.setSelectionRange(0, inputRef.value.length)
+          } else {
+            inputRef.$el.setSelectionRange(0, inputRef.value.length - tmp.pop().length - 1)
+          }
+        })
+    },
     handleCreateFolder() {
       staticApi.createFolder(this.selectedFile.relativePath, this.createFolderName).then(response => {
         this.$message.success(`创建文件夹成功！`)
@@ -216,10 +268,21 @@ export default {
         this.loadStaticList()
       })
     },
+    handleRename() {
+      staticApi.rename(this.selectedFile.relativePath, this.renameName).then(response => {
+        this.$message.success(`重命名成功！`)
+        this.renameModal = false
+        this.loadStaticList()
+      })
+    },
     onCreateFolderClose() {
       this.selectedFile = {}
       this.createFolderName = ''
     },
+    onRenameClose() {
+      this.selectedFile = {}
+      this.renameName = ''
+    },
     onUploadClose() {
       this.$refs.upload.handleClearFileList()
       this.selectedFile = {}

From c9a09e8922179e1955922bb6e324ee8556c80032 Mon Sep 17 00:00:00 2001
From: Rokita <35868425+Ruukita@users.noreply.github.com>
Date: Sun, 3 May 2020 19:49:13 +0800
Subject: [PATCH 2/4] Finish edit function and fix a bug

---
 src/api/static.js                             |  18 +++
 .../system/developer/tabs/StaticStorage.vue   | 107 +++++++++++++++++-
 .../staticpages/tabs/StaticPagesList.vue      |   2 +-
 3 files changed, 121 insertions(+), 6 deletions(-)

diff --git a/src/api/static.js b/src/api/static.js
index 911a62386..67e4f092f 100644
--- a/src/api/static.js
+++ b/src/api/static.js
@@ -57,4 +57,22 @@ staticApi.rename = (basePath, newName) => {
   })
 }
 
+staticApi.getContent = url => {
+  return service({
+    url: `${url}`,
+    method: 'get'
+  })
+}
+
+staticApi.save = (basePath, content) => {
+  return service({
+    url: `${baseUrl}/save`,
+    data: {
+      basePath: basePath,
+      content: content
+    },
+    method: 'put'
+  })
+}
+
 export default staticApi
diff --git a/src/views/system/developer/tabs/StaticStorage.vue b/src/views/system/developer/tabs/StaticStorage.vue
index b5c26daa7..de678ba13 100644
--- a/src/views/system/developer/tabs/StaticStorage.vue
+++ b/src/views/system/developer/tabs/StaticStorage.vue
@@ -12,7 +12,7 @@
         >上传</a-button>
         <a-button
           icon="plus"
-          @click="() => (createFolderModal = true)"
+          @click="handleShowCreateFolderModal({})"
         >
           新建文件夹
         </a-button>
@@ -39,7 +39,7 @@
             slot-scope="name"
           >
             <ellipsis
-              length="64"
+              :length="64"
               tooltip
             >
               {{ name }}
@@ -99,6 +99,15 @@
                     @click="handleShowRenameModal(record)"
                   >重命名</a>
                 </a-menu-item>
+                <a-menu-item
+                  key="4"
+                  v-if="record.isFile"
+                >
+                  <a
+                    href="javascript:;"
+                    @click="handleShowEditModal(record)"
+                  >编辑</a>
+                </a-menu-item>
               </a-menu>
             </a-dropdown>
           </span>
@@ -134,6 +143,7 @@
       <a-form layout="vertical">
         <a-form-item label="文件夹名：">
           <a-input
+            ref="createFoldeInput"
             v-model="createFolderName"
             @keyup.enter="handleCreateFolder"
           />
@@ -153,7 +163,7 @@
         >重命名</a-button>
       </template>
       <a-form layout="vertical">
-        <a-form-item :label="isFile?'文件名：':'文件夹名：'">
+        <a-form-item :label="renameFile?'文件名：':'文件夹名：'">
           <a-input
             ref="renameModalInput"
             v-model="renameName"
@@ -162,12 +172,50 @@
         </a-form-item>
       </a-form>
     </a-modal>
+    <a-modal
+      v-model="editModal"
+      title="编辑文件"
+      width="80%"
+      style="max-width: 1000px"
+      :maskClosable="false"
+      :keyboard="false"
+      :closable="false"
+    >
+      <template slot="footer">
+        <a-popconfirm
+          title="未保存的内容将会丢失，确定要退出吗？"
+          okText="确定"
+          cancelText="取消"
+          @confirm="handleEditClose"
+        >
+          <a-button>取消</a-button>
+        </a-popconfirm>
+        <a-button
+          key="submit"
+          type="primary"
+          @click="handleEditSave()"
+        >保存</a-button>
+      </template>
+      <a-form layout="vertical">
+        <a-form-item>
+          <codemirror
+            ref="editor"
+            :value="editContent"
+            :options="codemirrorOptions"
+          ></codemirror>
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 <script>
 import Vue from 'vue'
 import { mapGetters } from 'vuex'
 import staticApi from '@/api/static'
+import { codemirror } from 'vue-codemirror-lite'
+const context = require.context('codemirror/mode', true, /\.js$/)
+console.log(context)
+context.keys().map(context)
 const columns = [
   {
     title: '文件名',
@@ -193,6 +241,9 @@ const columns = [
   }
 ]
 export default {
+  components: {
+    codemirror
+  },
   name: 'StaticStorage',
   data() {
     return {
@@ -206,11 +257,21 @@ export default {
       createFolderName: '',
       renameModal: false,
       renameName: '',
-      isFile: false
+      renameFile: false,
+      codemirrorOptions: {
+        tabSize: 4,
+        lineNumbers: true,
+        line: true
+      },
+      editModal: false,
+      editContent: '',
+      CodeMirror: null
     }
   },
   created() {
     this.loadStaticList()
+    this.CodeMirror = require('codemirror')
+    this.CodeMirror.modeURL = 'codemirror/mode/%N/%N.js'
   },
   computed: {
     ...mapGetters(['options']),
@@ -242,11 +303,16 @@ export default {
     handleShowCreateFolderModal(file) {
       this.selectedFile = file
       this.createFolderModal = true
+      const that = this
+      Vue.nextTick()
+        .then(() => {
+          that.$refs.createFoldeInput.focus()
+        })
     },
     handleShowRenameModal(file) {
       this.selectedFile = file
       this.renameName = file.name
-      this.isFile = file.isFile
+      this.renameFile = file.isFile
       this.renameModal = true
       const that = this
       Vue.nextTick()
@@ -261,6 +327,26 @@ export default {
           }
         })
     },
+    handleShowEditModal(file) {
+      this.selectedFile = file
+      const arr = file.name.split('.')
+      const postfix = arr[arr.length - 1]
+      staticApi.getContent(this.options.blog_url + file.relativePath).then(response => {
+        this.editContent = response.data
+        const info = this.CodeMirror.findModeByExtension(postfix)
+        if (info === undefined) {
+          this.$message.error(`不支持编辑 "${postfix}" 类型的文件`)
+        } else {
+          this.editModal = true
+          Vue.nextTick()
+            .then(() => {
+              const editor = this.$refs.editor.editor
+              editor.setOption('mode', info.mime)
+              this.CodeMirror.autoLoadMode(editor, info.mode)
+            })
+        }
+      })
+    },
     handleCreateFolder() {
       staticApi.createFolder(this.selectedFile.relativePath, this.createFolderName).then(response => {
         this.$message.success(`创建文件夹成功！`)
@@ -275,6 +361,12 @@ export default {
         this.loadStaticList()
       })
     },
+    handleEditSave() {
+      staticApi.save(this.selectedFile.relativePath, this.$refs.editor.editor.getValue()).then(response => {
+        this.$message.success(`文件保存成功！`)
+        this.editModal = false
+      })
+    },
     onCreateFolderClose() {
       this.selectedFile = {}
       this.createFolderName = ''
@@ -287,6 +379,11 @@ export default {
       this.$refs.upload.handleClearFileList()
       this.selectedFile = {}
       this.loadStaticList()
+    },
+    handleEditClose() {
+      this.editModal = false
+      this.selectedFile = {}
+      this.editContent = ''
     }
   }
 }
diff --git a/src/views/system/staticpages/tabs/StaticPagesList.vue b/src/views/system/staticpages/tabs/StaticPagesList.vue
index 56fc626e6..47ee79db8 100644
--- a/src/views/system/staticpages/tabs/StaticPagesList.vue
+++ b/src/views/system/staticpages/tabs/StaticPagesList.vue
@@ -41,7 +41,7 @@
             slot-scope="name"
           >
             <ellipsis
-              :length="64"
+              :length=64
               tooltip
             >
               {{ name }}

From 02eb044fad23c4f2dd44476871b4b70f85e080b2 Mon Sep 17 00:00:00 2001
From: Rokita <35868425+Ruukita@users.noreply.github.com>
Date: Mon, 4 May 2020 08:10:04 +0800
Subject: [PATCH 3/4] Delete a console.log

---
 src/views/system/developer/tabs/StaticStorage.vue     | 1 -
 src/views/system/staticpages/tabs/StaticPagesList.vue | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/views/system/developer/tabs/StaticStorage.vue b/src/views/system/developer/tabs/StaticStorage.vue
index de678ba13..b61ed5034 100644
--- a/src/views/system/developer/tabs/StaticStorage.vue
+++ b/src/views/system/developer/tabs/StaticStorage.vue
@@ -214,7 +214,6 @@ import { mapGetters } from 'vuex'
 import staticApi from '@/api/static'
 import { codemirror } from 'vue-codemirror-lite'
 const context = require.context('codemirror/mode', true, /\.js$/)
-console.log(context)
 context.keys().map(context)
 const columns = [
   {
diff --git a/src/views/system/staticpages/tabs/StaticPagesList.vue b/src/views/system/staticpages/tabs/StaticPagesList.vue
index 47ee79db8..56fc626e6 100644
--- a/src/views/system/staticpages/tabs/StaticPagesList.vue
+++ b/src/views/system/staticpages/tabs/StaticPagesList.vue
@@ -41,7 +41,7 @@
             slot-scope="name"
           >
             <ellipsis
-              :length=64
+              :length="64"
               tooltip
             >
               {{ name }}

From a3cf80975c31ffaba66d1eec5bdca3a3ec566f6d Mon Sep 17 00:00:00 2001
From: Rokita <35868425+Ruukita@users.noreply.github.com>
Date: Mon, 4 May 2020 13:47:37 +0800
Subject: [PATCH 4/4] Change save API url

---
 src/api/static.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/api/static.js b/src/api/static.js
index 67e4f092f..ae3790645 100644
--- a/src/api/static.js
+++ b/src/api/static.js
@@ -64,11 +64,11 @@ staticApi.getContent = url => {
   })
 }
 
-staticApi.save = (basePath, content) => {
+staticApi.save = (path, content) => {
   return service({
-    url: `${baseUrl}/save`,
+    url: `${baseUrl}/files`,
     data: {
-      basePath: basePath,
+      path: path,
       content: content
     },
     method: 'put'