国际化配置更新

阅读论文保存当前滚动位置以及查找状态

nuxt.config.js

@@ -37,7 +37,7 @@ export default {
    ** Plugins to load before mounting the App
    ** https://nuxtjs.org/guide/plugins
    */
-  plugins: ['@/plugins/element-ui','@/plugins/vue-cookies','@/plugins/global','@/plugins/moment','@/plugins/contextmenu'],
+  plugins: ['@/plugins/element-ui','@/plugins/vue-cookies','@/plugins/global','@/plugins/moment','@/plugins/contextmenu','@/plugins/uuid'],
   /*
    ** Auto import components
    ** See https://nuxtjs.org/api/configuration-components
@@ -193,9 +193,10 @@ export default {
               "add_tip_fail": "笔记添加失败",
               "add_tip_ok": "笔记添加成功",
               "auto_save": "失去焦点自动保存",
-              "click_note_list": "选中内容定位笔记",
+              "click_note_list": "单击卡片定位笔记",
               "contextmenu_err": "请选中文本进行操作",
               "del_confirm": "确认删除此笔记？",
+              "note_zero": "还没有任何笔记，尝试正文选中文本右击添加一个笔记吧！",
               "rating_1": "本文对您的科研工作是否有帮助",
               "rating_2": "本文的内容是否科学严谨",
               "rating_3": "您对本文的推荐程度",
@@ -340,6 +341,7 @@ export default {
               "click_note_list": "",
               "contextmenu_err": "",
               "del_confirm": "",
+              "note_zero": "",
               "rating_1": "",
               "rating_2": "",
               "rating_3": "",

package.json

@@ -32,7 +32,8 @@
     "nuxt-i18n": "^6.13.1",
     "v-contextmenu": "^2.9.0",
     "vue-cookies": "^1.7.2",
-    "vue-runtime-helpers": "^1.1.2"
+    "vue-runtime-helpers": "^1.1.2",
+    "vue-uuid": "^2.0.2"
   },
   "devDependencies": {
     "@nuxt/typescript-build": "^1.0.3",

pages/index/read.vue

@@ -12,10 +12,12 @@
               <el-input autosize type="textarea" v-model="note_form.original_text" disabled></el-input>
             </el-form-item>
             <el-form-item :label="$t('read.form.note_title')" prop="note_title">
-                <el-input v-model="note_form.note_title" :placeholder="$t('input_please', { keyword: this.$t('read.form.note_title') })"></el-input>
+              <el-input v-model="note_form.note_title"
+                        :placeholder="$t('input_please', { keyword: this.$t('read.form.note_title') })"></el-input>
             </el-form-item>
             <el-form-item :label="$t('read.form.note_content')" prop="note_content">
-                <el-input autosize type="textarea" v-model="note_form.note_content" :placeholder="$t('input_please', { keyword: this.$t('read.form.note_content') })"></el-input>
+              <el-input autosize type="textarea" v-model="note_form.note_content"
+                        :placeholder="$t('input_please', { keyword: this.$t('read.form.note_content') })"></el-input>
             </el-form-item>
             <el-form-item>
               <el-button @click="addNote">{{$t('button.add')}}</el-button>
@@ -25,7 +27,9 @@
           <el-button slot="reference">{{$t('read.contextmenu.add')}}</el-button>
         </el-popover>
       </v-contextmenu-item>
-      <v-contextmenu-item><el-button @click="showSearch=true;queryContent()" class="w-100">{{$t('read.contextmenu.search')}}</el-button></v-contextmenu-item>
+      <v-contextmenu-item>
+        <el-button @click="updateFind(true);queryContent()" class="w-100">{{$t('read.contextmenu.search')}}</el-button>
+      </v-contextmenu-item>
     </v-contextmenu>
     <el-tabs v-model="activeName" type="card" closable @tab-remove="removeTab">
       <el-tab-pane :label="key" :name="key" v-for="(item,key) in openList" :key="key">
@@ -33,7 +37,8 @@
           <el-col :span="18">
             <el-form :inline="true" v-if="showSearch">
               <el-form-item :label="$t('read.form.keyword')">
-                  <el-input @input="queryContent" :placeholder="$t('input_please',{keyword:$t('read.form.keyword')})" v-model="search_form.keyword"
+                <el-input @input="queryContent" :placeholder="$t('input_please',{keyword:$t('read.form.keyword')})"
+                          v-model="search_form.keyword"
                           maxlength="10"
                           show-word-limit>
                   <i slot="prefix" class="el-input__icon el-icon-search"></i>
@@ -42,19 +47,23 @@
               <template v-if="num>0">
                 <el-form-item>{{search_index+1+'/'+num}}</el-form-item>
                 <el-tooltip :content="$t('read.tip.search_prev')">
-                  <el-image src="/prev.svg" class="img" @click="search_index>0?search_index--:search_index=num-1;change_search_index()"></el-image>
+                  <el-image src="/prev.svg" class="img"
+                            @click="search_index>0?search_index--:search_index=num-1;change_search_index()"></el-image>
                 </el-tooltip>
                 <el-tooltip :content="$t('read.tip.search_next')">
-                  <el-image src="/next.svg" class="img" @click="search_index<num-1?search_index++:search_index=0;change_search_index()"></el-image>
+                  <el-image src="/next.svg" class="img"
+                            @click="search_index<num-1?search_index++:search_index=0;change_search_index()"></el-image>
                 </el-tooltip>
               </template>
             </el-form>
             <pre class="content" v-contextmenu:contextmenu :ref="'edit'+item.title" @mouseup="show"
-                 @contextmenu="selectText" v-html="item.content"
+                 @contextmenu="selectText" @scroll="scrollContent" v-html="item.content"
             />
           </el-col>
           <el-col :span="5" class="ml3 note-list">
+            <template v-if="noteList.length>0">
               <el-row v-for="(item,index) in noteList" :key="index" class="mb2">
+                <el-tooltip :content="$t('read.tip.click_note_list')" :disabled="item.isEdit">
                   <el-card>
                     <div slot="header" class="clearfix">
                       <el-row type="flex" justify="space-around">
@@ -70,22 +79,29 @@
                         </el-button-group>
                       </el-row>
                     </div>
+
                     <div class="text item" @click="jump(item)" @mouseover="highlighting(item)"
                          @mouseout="reset(item)">
                       <transition v-if="item.isEdit" @after-leave="save(item)">
-                    <el-tooltip class="item" effect="dark" :content="$t('read.tip.auto_save')" v-model="item.isEdit">
+                        <el-tooltip class="item" effect="dark" :content="$t('read.tip.auto_save')"
+                                    v-model="item.isEdit">
                           <el-input autosize type="textarea" v-model="item.content"></el-input>
                         </el-tooltip>
                       </transition>
-                  <template v-else><pre style="background-color: white">{{item.content}}</pre></template>
+                      <template v-else>
+                        <pre style="background-color: white">{{item.content}}</pre>
+                      </template>
                     </div>
                   </el-card>
+                </el-tooltip>
                 <el-alert v-if="item.message"
                           @close="item.message=null;item.type=null"
                           :title="item.message"
                           :type="item.type">
                 </el-alert>
               </el-row>
+            </template>
+            <h1 v-else>{{$t('read.tip.note_zero')}}</h1>
           </el-col>
         </el-row>
       </el-tab-pane>
@@ -119,6 +135,7 @@
 
   export default Vue.extend({
     name: 'read',
+    layout: 'my-pre',
     data() {
       return {
         //显示搜索框
@@ -135,6 +152,7 @@
         search_index: -1,
         //笔记表单
         note_form: {
+          note_id: '',
           note_title: '',
           note_content: '',
           original_text: ''
@@ -168,16 +186,41 @@
       //打开的论文标签
       openList() {
         return this.$store.state.read.read
+      },
+      //当前激活的正文元素
+      pre() {
+        return this.$refs['edit' + this.activeName][0]
+      },
+      //当前激活的论文实体
+      activeContent() {
+        return this.$store.state.read.read[this.activeName]
       }
     },
     watch: {
       //激活的论文标签
       activeName(newVal) {
         this.$store.commit('read/choose', newVal)
+        this.doScroll()
+        if (this.activeContent.find && this.activeContent.find.showSearch) {
+          this.showSearch = this.activeContent.find.showSearch
+          this.search_form.keyword = this.activeContent.find.keyword
+          let search_index = this.activeContent.find.search_index
+          this.queryContent()
+          this.search_index = search_index
+          this.change_search_index()
+        } else {
+          this.showSearch = false
+          this.search_form = {
+            keyword: ''
+          }
+          this.num = 0
+          this.search_index = -1
+        }
+
       },
       showSearch(newVal) {
         if (!newVal) {
-          let pre:HTMLElement=this.$refs['edit'+this.$store.state.read.activeName][0]
+          let pre: HTMLElement = this.pre
           this.search_form.keyword = ''
           this.resetQuery(pre)
         }
@@ -185,19 +228,41 @@
     },
 
     methods: {
+      //滚动正文
+      scrollContent(e) {
+        this.$store.commit('read/scroll', e.target.scrollTop)
+      },
+      doScroll() {
+        this.$nextTick(() => {
+          if (this.activeContent.scrollTop) {
+            this.pre.scrollTo({
+              top: this.activeContent.scrollTop
+            })
+          }
+        })
+      },
       //激活选中的搜索结果
       change_search_index() {
-        let ele=document.getElementsByClassName('search-light')[this.search_index]
+        let ele = this.pre.querySelectorAll('span[class^=search-light]')[this.search_index]
         ele.classList.add('choose-search-text')
         ele.scrollIntoView({
           block: 'center'
         })
         for (let index = 0; index < this.num; index++) {
           if (index !== this.search_index) {
-            document.getElementsByClassName('search-light')[index].classList.remove('choose-search-text')
+            this.pre.querySelectorAll('span[class^=search-light]')[index].classList.remove('choose-search-text')
           }
         }
 
+        this.updateFind(this.showSearch)
+      },
+      updateFind(showSearch = false) {
+        this.showSearch = showSearch
+        this.$store.commit('read/find', {
+          showSearch: showSearch,
+          keyword: this.search_form.keyword,
+          search_index: this.search_index
+        })
       },
       //重置搜索
       resetQuery(pre: HTMLElement) {
@@ -211,7 +276,7 @@
       },
       //正文搜索
       queryContent() {
-        let pre:HTMLElement=this.$refs['edit'+this.$store.state.read.activeName][0]
+        let pre: HTMLElement = this.pre
         this.resetQuery(pre)
         if (this.search_form.keyword.length === 0) {
           let selection = getSelection()
@@ -323,6 +388,8 @@
             block: 'center'
           })
         }
+
+        this.highlighting(item)
       },
       //是否显示右键菜单
       show() {
@@ -344,6 +411,7 @@
       },
       resetNote() {
         this.replace = {}
+        this.note_form.note_id = ''
         this.note_form.note_title = ''
         this.note_form.note_content = ''
         this.note_form.original_text = ''
@@ -361,7 +429,7 @@
               that.replace.replaceVal[index - 1].after(that.replace.replaceVal[index])
             }
             that.noteList.unshift({
-              id: `fuck${(Math.random()*10).toFixed()}`,
+              id: this.note_form.note_id,
               title: this.note_form.note_title,
               content: this.note_form.note_content
             })
@@ -376,7 +444,7 @@
               showClose: true,
               duration: 1000
             })
-            return false;
+            return false
           }
           this.visible = false
         })
@@ -394,6 +462,8 @@
             let anchorNode = range.startContainer
             let bold = document.createElement('span')
             bold.classList.add('bold')
+            this.note_form.note_id = this.$uuid.v1()
+            bold.setAttribute('id', this.note_form.note_id)
             if (range.endOffset - range.startOffset === anchorNode.length) {
               console.info(tip + '全选')
               bold.innerText = anchorNode.wholeText
@@ -424,26 +494,20 @@
     },
     mounted() {
       this.activeName = this.$store.state.read.activeName
-      for (let n = 0; n < 10; n++) {
-        this.noteList.push({
-          id: `fuck${n}`,
-          title: `笔记${n}`,
-          content: `内容${n}`
-        })
-      }
 
       let that = this
       addEventListener('keyup', function(event) {
         //监听查找操作
         if (event.shiftKey && 'F' === event.key.toUpperCase()) {
-          event.preventDefault();
+          event.preventDefault()
           that.showSearch = !that.showSearch
         } else if ('ESCAPE' === event.key.toUpperCase()) {
           that.showSearch = false
         }
-
+        that.updateFind(that.showSearch)
       }, true)
     }
+
   })
 </script>
 <style>
@@ -459,10 +523,17 @@
   .choose-search-text {
     animation: changeshadow 1s ease-in infinite;
   }
+
   @keyframes changeshadow {
-    0%{ text-shadow: 0 0 4px blue}
+    0% {
-    50%{ text-shadow: 0 0 40px blue}
+      text-shadow: 0 0 4px blue
-    100%{ text-shadow: 0 0 4px blue}
+    }
+    50% {
+      text-shadow: 0 0 40px blue
+    }
+    100% {
+      text-shadow: 0 0 4px blue
+    }
   }
 
   .choose-note {

plugins/uuid.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import UUID from 'vue-uuid'
+
+Vue.use(UUID)

store/read.js

@@ -29,5 +29,13 @@ export const mutations = {
   //选择论文标签
   choose(state,title=Object.keys(state.read)[Object.keys(state.read).length-1]){
     state.activeName=title
+  },
+  //滚动正文
+  scroll(state,scrollTop){
+    state.read[state.activeName].scrollTop=scrollTop
+  },
+  //查找状态
+  find(state,item){
+    state.read[state.activeName].find=item
   }
 }

yarn.lock

@@ -1710,6 +1710,11 @@
   resolved "https://registry.npm.taobao.org/@types/unist/download/@types/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
   integrity sha1-nAiGeYdvN061mD8VDUeHqm+zLX4=
 
+"@types/uuid@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.npm.taobao.org/@types/uuid/download/@types/uuid-8.0.0.tgz#165aae4819ad2174a17476dbe66feebd549556c0"
+  integrity sha1-FlquSBmtIXShdHbb5m/uvVSVVsA=
+
 "@types/webpack-bundle-analyzer@^3.8.0":
   version "3.8.0"
   resolved "https://registry.npm.taobao.org/@types/webpack-bundle-analyzer/download/@types/webpack-bundle-analyzer-3.8.0.tgz?cache=0&sync_timestamp=1590133772527&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fwebpack-bundle-analyzer%2Fdownload%2F%40types%2Fwebpack-bundle-analyzer-3.8.0.tgz#d1f196f95159254f76a3c2283c4677585bdf354d"
@@ -10334,6 +10339,11 @@ uuid@^3.3.2:
   resolved "https://registry.npm.taobao.org/uuid/download/uuid-3.4.0.tgz?cache=0&sync_timestamp=1592944143460&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuuid%2Fdownload%2Fuuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=
 
+uuid@^8.1.0:
+  version "8.3.0"
+  resolved "https://registry.npm.taobao.org/uuid/download/uuid-8.3.0.tgz?cache=0&sync_timestamp=1595885088251&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuuid%2Fdownload%2Fuuid-8.3.0.tgz#ab738085ca22dc9a8c92725e459b1d507df5d6ea"
+  integrity sha1-q3OAhcoi3JqMknJeRZsdUH311uo=
+
 v-contextmenu@^2.9.0:
   version "2.9.0"
   resolved "https://registry.npm.taobao.org/v-contextmenu/download/v-contextmenu-2.9.0.tgz#1753a7afc42051f1ed5cb75c20498a16fd7ec332"
@@ -10491,6 +10501,14 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.npm.taobao.org/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=
 
+vue-uuid@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npm.taobao.org/vue-uuid/download/vue-uuid-2.0.2.tgz#0cfb739e660a3af1d4e3342743578114f79b2438"
+  integrity sha1-DPtznmYKOvHU4zQnQ1eBFPebJDg=
+  dependencies:
+    "@types/uuid" "^8.0.0"
+    uuid "^8.1.0"
+
 vue@^2.6.11:
   version "2.6.11"
   resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"