feat: 瀑布式列表以及当前文件名显示

fe/index.html

@@ -18,6 +18,20 @@
       button, input, span {
         -webkit-tap-highlight-color: transparent;
       }
+      *::-webkit-scrollbar { /*滚动条整体样式*/
+        width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+        height: 1px;
+      }
+
+      *::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
+        /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
+        background: #ffffff;
+        border-right: 2px solid #054ba8;
+      }
+      *::-webkit-scrollbar-track {/*滚动条里面轨道*/
+        padding: 2px;
+        background: #cccccc00;
+      }
     </style>
   </body>
 </html>

fe/src/components/NER/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="layout">
     <span class="home" @click="goHome">whaleAnno</span>
+    <span class="now-file">{{ nowFile }}</span>
     <h1 class="out-title">{{projectName}}（{{projectType}}）</h1>
     <div class="container" @dragover="stopPrev" @drop="setFiles($event)">
       <div class="left">
-        <div class="file-list">
+        <div class="file-list" id="file-list">
-          <div v-for="file in files" :key="file" @click="setNowText(file)"
+          <div v-for="file in files" :key="file" :id="file" @click="setNowText(file)"
             :title=file
             :class="['file', nowFile===file?'selected':'', isAnnoDic[`${projectName}_${file}`]||(nersCache[file]&&nersCache[file].length)?'checked':'', ].join(' ')"
           >
@@ -262,13 +263,17 @@ export default {
     getFiles () {
       const that = this
       get(`/v1/files/query?projectName=${that.projectName}&pageNumber=${that.pageNumber}&pageSize=${that.pageSize}`, function (info) {
-        that.$set(that, 'files', info.map((item) => {
+        let newFiles = info.map((item) => {
           if (typeof item === 'string') return item
           that.isAnnoDic[`${that.projectName}_${item.fileName}`] = item.isAnno
           return item.fileName
-        }))
+        })
+        if (that.files.indexOf(newFiles[0]) === -1) {
+          that.$set(that, 'files', [...that.files, ...newFiles])
+        }
+        console.log(that.files)
         // 如果文件未选中，就选中第一个
-        if (that.files[0] && that.nowFile !== that.files[0]) {
+        if (that.files[0] && !that.nowFile) {
           that.setNowText(that.files[0])
         }
       })
@@ -282,10 +287,10 @@ export default {
     },
     nextPage () {
       const that = this
-      if (that.files.length === that.pageSize) {
+      // if (that.files.length === that.pageSize) {
-        that.pageNumber = that.pageNumber + 1
+      that.pageNumber = that.pageNumber + 1
-        that.getFiles()
+      that.getFiles()
-      }
+      // }
     },
     goHome: function () {
       this.$router.push({path: '/'})
@@ -337,6 +342,17 @@ export default {
           that.nowText = that.textDic[newFile]
         })
       }
+      if (that.files.indexOf(newFile) >= (that.files.length - 1) - 2) {
+        // 到倒数第3个文件，就获取下一页
+        that.pageNumber = that.pageNumber + 1
+        that.getFiles()
+      }
+      // 列表滚动至选中文件
+      let selectFileDom = document.getElementById(newFile)
+      let fileListDom = document.getElementById('file-list')
+      if (selectFileDom && fileListDom) {
+        fileListDom.scrollTop = selectFileDom.offsetTop - 12 - 30 // 保持上方有一个前方文件
+      }
     },
     changeIdx: function (d, event) {
       if (event) {
@@ -353,7 +369,6 @@ export default {
      * @param idx 点击文字的定位
      */
     pointWord: function (idx, config = {}) {
-      console.log(this.mode, idx, config)
       if (this.mode === 'select') {
         if (!this.nowType) {
           alert('请先选择标签')
@@ -749,7 +764,8 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.home {
+.home,
+.now-file {
   position: absolute;
   top: 0;
   left: 0;
@@ -762,6 +778,10 @@ export default {
   font-weight: 700;
   vertical-align: center;
 }
+.now-file {
+  left: unset;
+  right: 0;
+}
 .out-title {
   display: inline-block;
   background: #1161ca;
@@ -1032,11 +1052,17 @@ export default {
   .out-title {
     text-align: right !important;
   }
+  .now-file  {
+    display: none;
+  }
 }
 @media only screen and (max-width: 600px) {
   .out-title {
     font-size: 0;
   }
+  .now-file  {
+    display: inline-block;
+  }
 }
 @media only screen and (max-width: 800px) {
   .result-box {