集成列表无限加载，美化搜索框

package-lock.json

@@ -12498,6 +12498,11 @@
         }
       }
     },
+    "vue-infinite-scroll": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npm.taobao.org/vue-infinite-scroll/download/vue-infinite-scroll-2.0.2.tgz",
+      "integrity": "sha1-yjepH+ku4K07dKz4aCwAkXFEtxE="
+    },
     "vue-loader": {
       "version": "15.9.1",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.1.tgz?cache=0&sync_timestamp=1584584267698&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.1.tgz",

package.json

@@ -26,6 +26,7 @@
     "vue-axios": "^2.1.5",
     "vue-clipboard2": "^0.3.1",
     "vue-i18n": "^8.17.3",
+    "vue-infinite-scroll": "^2.0.2",
     "vue-router": "^3.1.6",
     "vue2-ace-editor": "0.0.15",
     "vuex": "^3.4.0"

src/assets/style/theme/acrou/index.scss

@@ -54,8 +54,8 @@ body {
   td span {
     vertical-align: middle;
   }
-  td .g2-file-desc{
-    font-size:12px;
+  td .g2-file-desc {
+    font-size: 12px;
   }
 }
 
@@ -87,6 +87,11 @@ body {
   }
 }
 
+// 搜索框
+.search-input,.search-input::-webkit-input-placeholder {
+  color: whitesmoke;
+}
+
 .golist {
   min-height: 240px;
   position: relative;

src/locales/en.json

@@ -23,10 +23,12 @@
       "copy": "Copy link",
       "newTab": "Open a new tab",
       "download": "Download"
-    }
+    },
+    "total": "Total",
+    "item": "item"
   },
   "search": {
-    "placeholder": "Search or jump to…"
+    "placeholder": "Search resources..."
   },
   "page": {
     "video": {

src/locales/zh-chs.json

@@ -23,7 +23,9 @@
       "copy": "复制链接",
       "newTab": "打开新的标签页",
       "download": "下载"
-    }
+    },
+    "total": "共",
+    "item": "项"
   },
   "search": {
     "placeholder": "搜索..."

src/locales/zh-cht.json

@@ -23,7 +23,9 @@
       "copy": "復制鏈接",
       "newTab": "打開新的標簽頁",
       "download": "下載"
-    }
+    },
+    "total": "共",
+    "item": "項"
   },
   "search": {
     "placeholder": "搜索..."

src/main.js

@@ -11,12 +11,14 @@ import i18n from './i18n'
 // store
 import store from '@/store/index'
 import VueClipboard from 'vue-clipboard2'
+import infiniteScroll from 'vue-infinite-scroll'
 import "@/assets/style/theme/register.scss"
 
 Vue.config.productionTip = false
 Vue.use(ElementUI)
 Vue.use(VueAxios,axios)
 Vue.use(VueClipboard)
+Vue.use(infiniteScroll)
 
 new Vue({
   router,

src/views/common/Navbar.vue

@@ -44,16 +44,18 @@
           <!-- is-hidden-desktop -->
           <div class="navbar-item">
             <div class="field is-grouped">
-              <p class="control has-icons-left" style="width:100%;">
+              <p class="control has-icons-left is-dark" style="width:100%;">
                 <input
-                  class="input is-rounded has-text-grey"
+                  class="input is-rounded search-input"
                   @keyup.enter="query"
                   v-model="param"
                   type="search"
                   :placeholder="$t('search.placeholder')"
+                  style="background-color: rgb(68, 66, 66);border-color: #272727;"
                 />
-                <span class="icon is-small is-left">
-                  <i class="fas fa-search"></i>
+                <span class="icon is-small is-left" style="padding:0 5px;">
+                  <!-- <i class="fas fa-search"></i> -->
+                  <img :src="eyes" />
                 </span>
               </p>
             </div>
@@ -105,6 +107,7 @@ export default {
       currgd: {},
       gds: [],
       isActive: false,
+      eyes: 'data:image/png;base64,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'
     };
   },
   methods: {

src/views/page/GoList.vue

@@ -2,7 +2,12 @@
   <div>
     <headmd :option="headmd" v-if="headmd.display"></headmd>
     <div class="golist" v-loading="loading">
-      <table class="table is-hoverable">
+      <table
+        class="table is-hoverable"
+        v-infinite-scroll="pageLoad"
+        infinite-scroll-disabled="busy"
+        infinite-scroll-distance="10"
+      >
         <thead>
           <tr>
             <th
@@ -40,7 +45,9 @@
                 </figure>
               </span>-->
               {{ file.name }}
-              <span class="has-text-grey g2-file-desc">{{ file.description }}</span>
+              <span class="has-text-grey g2-file-desc">{{
+                file.description
+              }}</span>
             </td>
             <td class="is-hidden-mobile is-hidden-touch">
               {{ file.modifiedTime }}
@@ -77,12 +84,18 @@
         </tbody>
       </table>
       <div
-        v-show="files.length == 0"
+        v-show="files.length === 0"
         class="has-text-centered no-content"
       ></div>
-      <!-- <div v-show="loading" class="pageloader is-active">
-        <span class="title">{{ $t("list.loading") }}</span>
-      </div> -->
+      <center>
+        <div :class="!busy ? 'is-hidden' : ''">
+          <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
+          <span class="sr-only">Loading...</span>
+        </div>
+        <span v-if="page.page_token === null && files.length !== 0" class="tag">
+          {{ $t("list.total") }} {{ files.length }} {{ $t("list.item") }}
+        </span>
+      </center>
     </div>
     <hr />
     <readmemd :option="readmemd" v-if="readmemd.display"></readmemd>
@@ -106,13 +119,13 @@ export default {
   },
   data: function() {
     return {
+      busy: false,
       page: {
         page_token: null,
         page_index: 0,
       },
       files: [],
       loading: true,
-      copyTooltip: "",
       icon: {
         "application/vnd.google-apps.folder": "icon-morenwenjianjia",
         "video/mp4": "icon-mp",
@@ -168,7 +181,7 @@ export default {
       return this.files.map((item) => {
         var p = path + checkoutPath(item.name, item);
         let isFolder = item.mimeType === "application/vnd.google-apps.folder";
-        let size = isFolder ? this.$t("folder") : formatFileSize(item.size);
+        let size = isFolder ? '-' : formatFileSize(item.size);
         return {
           path: p,
           ...item,
@@ -183,11 +196,20 @@ export default {
     this.render();
   },
   methods: {
-    render() {
+    pageLoad() {
+      if (!this.page.page_token) return;
+      this.page.page_index++;
+      this.render("scroll");
+    },
+    render(scroll) {
+      if (scroll) {
+        this.busy = true;
+      } else {
+        this.loading = true;
+      }
       this.headmd = { display: false, file: {}, path: "" };
       this.readmemd = { display: false, file: {}, path: "" };
       var path = this.$route.path;
-      this.loading = true;
       var password = localStorage.getItem("password" + path);
       let q = this.$route.query.q;
       var p = {
@@ -212,16 +234,22 @@ export default {
               page_index: body.curPageIndex,
             };
             try {
-              this.files = data.files;
+              if (scroll) {
+                this.files = this.files.concat(data.files);
+              } else {
+                this.files = data.files;
+              }
               this.renderMd(data.files, path);
             } catch (e) {
               console.log(e);
             }
           }
           this.loading = false;
+          this.busy = false;
         })
         .catch(() => {
           this.loading = false;
+          this.busy = false;
           this.$router.go(-1);
         });
     },