配置lowdb和对话回复功能

.gitignore

@@ -8,3 +8,4 @@ npm-debug.log
 npm-debug.log.*
 thumbs.db
 !.gitkeep
+marisa-win32-x64

package.json

@@ -1,9 +1,9 @@
 {
   "name": "marisa",
   "productName": "marisa",
-  "version": "0.0.0",
+  "version": "0.0.001",
   "author": "gutrse3321 <[email protected]>",
-  "description": "An electron-vue project",
+  "description": "大家的老朋友，莎莎",
   "license": "",
   "main": "./dist/electron/main.js",
   "scripts": {
@@ -24,6 +24,8 @@
   },
   "dependencies": {
     "axios": "^0.16.1",
+    "fs-extra": "^6.0.1",
+    "lowdb": "^1.0.0",
     "vue": "^2.3.3",
     "vue-electron": "^1.0.6",
     "vue-router": "^2.5.3",

src/datastore/index.js

@@ -0,0 +1,29 @@
+import Datastore from 'lowdb'
+import FileSync from 'lowdb/adapters/FileSync'
+import path from 'path'
+import fs from 'fs-extra'
+import { app, remote } from 'electron'
+
+// 根据process.type判断在那个模式使用
+const APP = process.type === 'renderer' ? remote.app : app
+
+// 获取electron应用的用户目录
+const STORE_PATH = APP.getPath('userData')
+
+if (process.type !== 'renderer') {
+  if (!fs.pathExistsSync(STORE_PATH)) {
+    fs.mkdirpSync(STORE_PATH)
+  }
+}
+
+// 初始化lowdb读取的json文件名以及存储路径
+const adapter = new FileSync(path.join(STORE_PATH, '/data.json'))
+
+const db = Datastore(adapter)
+
+//
+if (!db.has('memorise').value()) {
+  db.set('memorise', []).write()
+}
+
+export default db

src/renderer/main.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import axios from 'axios'
-
+import db from '../datastore'
 import App from './App'
 import router from './router'
 import store from './store'
@@ -10,6 +10,21 @@ Vue.http = Vue.prototype.$http = axios
 Vue.config.productionTip = false
 if (process.env.NODE_ENV !== 'production') Vue.config.debug = false // 开启debug模式
 
+// 自定义全局指令
+// 自动聚焦focus
+Vue.directive('focus', {
+  inserted: (el, binding) => {
+    if (binding.value) {
+      el.focus()
+    } else {
+      el.blur()
+    }
+  }
+})
+
+// 注册全局$db
+Vue.prototype.$db = db
+
 /* eslint-disable no-new */
 new Vue({
   components: { App },

src/renderer/views/Home/chatroom.vue

@@ -3,7 +3,7 @@
     <div class="container">
       <div class="talk-panel">
         <span>うるさい! うるさい.. うるさい...</span>
-        <div class="talk-place">
+        <div ref="talk_place" class="talk-place">
           <div class="talk_entry"
               v-for="item in talk_list"
               :class="{'you_color': item.name == 'You'}"
@@ -12,7 +12,10 @@
           </div>
         </div>
         <div class="speak">
-          <input @keydown="sendMessage($event)" ref="you" type="text" name="you" />
+          <input @keydown="sendMessage($event)"
+                ref="you"
+                v-focus="true" type="text" name="you"
+          />
           <input @click="sendMessage($event)" ref="submit" type="submit" value="发送" />
         </div>
       </div>
@@ -42,6 +45,9 @@
   </div>
 </template>
 <script>
+const MARISA = '白絲魔理沙'
+const YOU = 'You'
+
 export default {
   data () {
     return {
@@ -50,19 +56,40 @@ export default {
   },
   methods: {
     async sendMessage (event) {
+      let _content = await this.$refs.you.value
+      if (_content === '') return false
       if (event.keyCode === 13 || event.button === 0) {
         let _youTalk = {
-          name: 'You',
-          content: await this.$refs.you.value
+          name: YOU,
+          content: _content
         }
         this.talk_list.push(_youTalk)
         this.$refs.you.value = ''
+        this._marisaRelpy(_content)
+      }
+    },
+    _marisaRelpy () {
+      let _marisaTalk = {
+        name: MARISA,
+        content: '人类的本质就是复读机。'
       }
+      setTimeout(() => {
+        this.talk_list.push(_marisaTalk)
+      }, 300)
+    },
+    _scrollBottom () {
+      this.$nextTick(() => {
+        let _scrollHeight = this.$refs.talk_place.scrollHeight
+        this.$refs.talk_place.scrollTop = _scrollHeight
+      })
     }
   },
+  updated () {
+    this._scrollBottom()
+  },
   created () {
     let _startTalk = {
-      name: '白絲魔理沙',
+      name: MARISA,
       content: '白絲魔理沙 Type 0.001,还在继续升级da★ze！'
     }
     this.talk_list.push(_startTalk)
@@ -172,7 +199,6 @@ export default {
       margin-bottom: 13px
       margin-top: 13px
     .cmd-collect
-      text-decoration: line-through
       text-indent: 1em
     .marisa-cmd
       display: inline

src/renderer/views/_header.vue

@@ -4,6 +4,9 @@
       <span class="close no_drag" @click="closeWindow"></span>
       <span class="hidden no_drag" @click="minimizeWindow"></span>
     </div>
+    <div class="header_title">
+      白絲魔理沙 -連線中-
+    </div>
   </div>
 </template>
 <script>
@@ -26,7 +29,7 @@ export default {
 <style lang="stylus" scoped>
 .header
   display: flex
-  justify-content: flex-start
+  flex-direction: row
   width: 714px
   height: 28px
   background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%)
@@ -88,4 +91,9 @@ export default {
       background: #EE9A00
       &:before
         opacity: 1
+.header_title
+  margin-left: 35%
+  height: 100%
+  font-size: 12px
+  line-height: 28px
 </style>

yarn.lock

@@ -3198,6 +3198,14 @@ fs-extra@^3.0.0, fs-extra@^3.0.1:
     jsonfile "^3.0.0"
     universalify "^0.1.0"
 
+fs-extra@^6.0.1:
+  version "6.0.1"
+  resolved "http://registry.npm.taobao.org/fs-extra/download/fs-extra-6.0.1.tgz#8abc128f7946e310135ddc93b98bddb410e7a34b"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
 fs-minipass@^1.2.5:
   version "1.2.5"
   resolved "http://registry.npm.taobao.org/fs-minipass/download/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
@@ -4167,6 +4175,12 @@ jsonfile@^3.0.0:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "http://registry.npm.taobao.org/jsonfile/download/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
 jsonify@~0.0.0:
   version "0.0.0"
   resolved "http://registry.npm.taobao.org/jsonify/download/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
@@ -4450,7 +4464,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "http://registry.npm.taobao.org/lodash.uniq/download/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0:
+lodash@4, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0:
   version "4.17.10"
   resolved "http://registry.npm.taobao.org/lodash/download/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
 
@@ -4488,6 +4502,16 @@ loud-rejection@^1.0.0:
     currently-unhandled "^0.4.1"
     signal-exit "^3.0.0"
 
+lowdb@^1.0.0:
+  version "1.0.0"
+  resolved "http://registry.npm.taobao.org/lowdb/download/lowdb-1.0.0.tgz#5243be6b22786ccce30e50c9a33eac36b20c8064"
+  dependencies:
+    graceful-fs "^4.1.3"
+    is-promise "^2.1.0"
+    lodash "4"
+    pify "^3.0.0"
+    steno "^0.4.1"
+
 lower-case-first@^1.0.0:
   version "1.0.2"
   resolved "http://registry.npm.taobao.org/lower-case-first/download/lower-case-first-1.0.2.tgz#e5da7c26f29a7073be02d52bac9980e5922adfa1"
@@ -6571,6 +6595,12 @@ statuses@~1.4.0:
   version "1.4.0"
   resolved "http://registry.npm.taobao.org/statuses/download/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
 
+steno@^0.4.1:
+  version "0.4.4"
+  resolved "http://registry.npm.taobao.org/steno/download/steno-0.4.4.tgz#071105bdfc286e6615c0403c27e9d7b5dcb855cb"
+  dependencies:
+    graceful-fs "^4.1.3"
+
 stream-browserify@^2.0.1:
   version "2.0.1"
   resolved "http://registry.npm.taobao.org/stream-browserify/download/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"