增加 README 展示

README.md

@@ -99,7 +99,7 @@
 
 如果我的工作对您有帮助，请我喝杯咖啡吧 ^_^。**附言可以留下您的 github 用户名或网站连接**。
 
-<img alt="微信" src="./wechat.png" width="17%">　<img alt="支付宝" src="./alipay.jpg" width="17%">　<img alt="支付宝红包" src="./hb.jpg" width="17%">
+<img alt="微信" src="./wechat.png" width="17%" style="display: inline-block">　<img alt="支付宝" src="./alipay.jpg" width="17%" style="display: inline-block">　<img alt="支付宝红包" src="./hb.jpg" width="17%" style="display: inline-block">
 
 1. [wangyedong66](https://github.com/wangyedong66) 2元
 1. [yubingcen](https://github.com/yubingcen) 0.1元
@@ -138,10 +138,9 @@
 + [ ] ~~git 备份，// 使用 OneDrive 同步备份~~
 + [ ] 移动端展示
 
-![截图](./7.png)
+![截图](./0.png)
 ![截图](./1.png)
 ![截图](./2.png)
 ![截图](./3.png)
-![截图](./4.png)
 ![截图](./5.gif)
 ![截图](./6.png)

backend/main.js

@@ -1,3 +1,4 @@
+const fs = require('fs')
 const os = require('os')
 const path = require('path')
 const Koa = require('koa')
@@ -141,6 +142,21 @@ const proxy = async (ctx, next) => {
     }
 }
 
+const readme = async (ctx, next) => {
+    if (ctx.path.startsWith('/api/readme')) {
+        if (ctx.query.path) {
+            ctx.type = mime.getType(ctx.query.path)
+            ctx.body = fs.readFileSync(path.join(__dirname, '../', ctx.query.path))
+        } else {
+            ctx.body = result('ok', '获取成功', {
+                content: fs.readFileSync(path.join(__dirname, '../README.md')).toString()
+            })
+        }
+    } else {
+        await next()
+    }
+}
+
 const app = new Koa()
 
 app.use(static(
@@ -171,6 +187,7 @@ app.use(async (ctx, next) => await wrapper(ctx, next, convertFile))
 app.use(async (ctx, next) => await wrapper(ctx, next, searchFile))
 app.use(async (ctx, next) => await wrapper(ctx, next, repository))
 app.use(async (ctx, next) => await wrapper(ctx, next, proxy))
+app.use(async (ctx, next) => await wrapper(ctx, next, readme))
 
 const port = 3000
 

frontend/src/components/Editor.vue

@@ -235,7 +235,6 @@ export default {
       }
     },
     setPosition (position) {
-      console.log(position)
       this.editor.setScrollTop(0)
     },
     toggleWrap () {

frontend/src/components/StatusBar.vue

@@ -2,6 +2,7 @@
   <div class="status-bar">
     <RepositorySwitch class="left"></RepositorySwitch>
 
+    <div class="view-control right" @click="toggleReadme" title="Alt + h">README</div>
     <div class="view-control right" @click="toggleView" title="Alt + v">切换预览</div>
     <div class="wrap-control right" @click="toggleWrap" title="Alt + w">切换换行</div>
     <div class="wrap-control right" @click="toggleXterm" title="Alt + o">切换终端</div>
@@ -54,6 +55,9 @@ export default {
     toggleXterm () {
       this.$bus.emit('toggle-xterm')
     },
+    toggleReadme () {
+      this.$bus.emit('toggle-readme')
+    },
     toggleWrap () {
       this.$bus.emit('editor-toggle-wrap')
     },
@@ -75,6 +79,12 @@ export default {
         e.preventDefault()
         e.stopPropagation()
       }
+
+      if (e.key === 'h' && e.altKey) {
+        this.toggleReadme()
+        e.preventDefault()
+        e.stopPropagation()
+      }
     }
   },
   watch: {

frontend/src/components/Tree.vue

@@ -43,8 +43,6 @@ export default {
     this.$bus.on('editor-ready', this.handleReady)
     this.$bus.on('tree-refresh', this.change)
   },
-  mounted () {
-  },
   beforeDestroy () {
     window.removeEventListener('keydown', this.keydownHandler)
     this.$bus.off('switch-repository', this.init)
@@ -52,6 +50,9 @@ export default {
     this.$bus.off('tree-refresh', this.change)
   },
   methods: {
+    closeCurrentFile () {
+      this.file = null
+    },
     handleSelect (file) {
       if (this.editorReady) {
         this.file = file
@@ -60,6 +61,11 @@ export default {
     },
     handleReady () {
       this.editorReady = true
+
+      // 第一次打开此程序
+      if (!Object.keys(window.localStorage).find(x => x.endsWith('_open_time'))) {
+        this.$bus.$emit('toggle-readme')
+      }
     },
     init (repo = null) {
       if (repo) {

frontend/src/components/View.vue

@@ -124,6 +124,15 @@ export default {
       this.syncScroll(1)
     },
     replaceRelativeLink (md) {
+      if (!this.fileRepo) {
+        return md
+      }
+
+      if (this.fileRepo === '__readme__') {
+        return md.replace(/\[([^\]]*)\]\((\.\/[^)]*)\)/g, `[$1](api/readme/file?path=$2)`)
+          .replace(/<img([^>]*)src=["']?([^\s'"]*)["']?/ig, `<img$1src="api/readme/file?path=$2"`)
+      }
+
       if (!this.filePath) {
         return md
       }

frontend/src/file.js

@@ -193,5 +193,16 @@ export default {
   },
   openInOS (repo, path) {
     fetch(`/api/open?repo=${encodeURIComponent(repo)}&path=${encodeURIComponent(path)}`)
+  },
+  readme (call) {
+    fetch('/api/readme').then(response => {
+      response.json().then(result => {
+        if (result.status === 'ok') {
+          call(result.data.content)
+        } else {
+          alert(result.message)
+        }
+      })
+    })
   }
 }

frontend/src/pages/Home.vue

@@ -2,14 +2,7 @@
   <div>
     <header class="header" :style="unsaved ? 'background: orange' : ''">
       <div>
-        <h4 style="margin: 0;text-align: center">
-          <span v-if="file">
-            {{ file.path }}-{{ status }} [{{file.repo}}]
-          </span>
-          <span v-else>
-            未打开文件
-          </span>
-        </h4>
+        <h4 style="margin: 0;text-align: center"> {{statusText}}</h4>
       </div>
     </header>
     <div style="display: flex; justify-content: space-between;" :class="{'show-view': showView}">
@@ -76,6 +69,7 @@ export default {
 
     this.$bus.on('toggle-view', this.toggleView)
     this.$bus.on('toggle-xterm', this.toggleXterm)
+    this.$bus.on('toggle-readme', this.toggleReadme)
 
     window.onbeforeunload = () => {
       return this.unsaved || null
@@ -84,9 +78,24 @@ export default {
   beforeDestroy () {
     this.$bus.off('toggle-view', this.toggleView)
     this.$bus.off('toggle-xterm', this.toggleXterm)
+    this.$bus.off('toggle-readme', this.toggleReadme)
     this.clearTimer()
   },
   methods: {
+    toggleReadme () {
+      if (this.file && this.file.repo === '__readme__') {
+        this.$refs.tree.closeCurrentFile()
+        this.file = null
+      } else {
+        File.readme(content => {
+          this.file = {
+            repo: '__readme__',
+            title: 'README.md',
+            content
+          }
+        })
+      }
+    },
     toggleView () {
       this.showView = !this.showView
     },
@@ -108,6 +117,10 @@ export default {
     restartTimer () {
       this.clearTimer()
 
+      if (!(this.file && this.file.repo && this.file.path)) {
+        return
+      }
+
       this.timer = window.setTimeout(() => {
         if (!this.file || this.file.path.endsWith('.c.md')) { // 加密文件不自动保存
           return
@@ -119,7 +132,7 @@ export default {
     saveFile (f = null) {
       const file = f || this.file
 
-      if (!file) {
+      if (!(file && file.repo && file.path)) {
         return
       }
 
@@ -175,21 +188,27 @@ export default {
     file (f, oldf) {
       this.clearTimer()
 
-      if (oldf) {
+      if (oldf && oldf.repo && oldf.path) {
         this.saveFile(oldf)
       }
 
       if (f) {
-        File.read(f.repo, f.path, (data, hash) => {
-          this.lastSaveContent = data
-          this.$refs.editor.setValue(data)
-          this.oldHash = hash
-          this.status = '加载完毕'
-          window.document.title = f.name
-        }, e => {
-          this.file = null
-          alert(e.message)
-        })
+        if (f.title) {
+          window.document.title = f.title
+          this.lastSaveContent = f.content
+          this.$refs.editor.setValue(f.content)
+        } else {
+          File.read(f.repo, f.path, (data, hash) => {
+            this.lastSaveContent = data
+            this.$refs.editor.setValue(data)
+            this.oldHash = hash
+            this.status = '加载完毕'
+            window.document.title = f.name
+          }, e => {
+            this.file = null
+            alert(e.message)
+          })
+        }
       } else {
         window.document.title = '未打开文件'
         this.lastSaveContent = '\n'
@@ -212,6 +231,17 @@ export default {
     },
     fileRepo () {
       return this.file ? this.file.repo : null
+    },
+    statusText () {
+      if (this.file) {
+        if (this.file.path && this.file.repo) {
+          return `${this.file.path}-${this.status} [${this.file.repo}]`
+        } else {
+          return this.file.title
+        }
+      } else {
+        return '未打开文件'
+      }
     }
   }
 }