优化页面

dependencies-cdn.js

@@ -1,5 +1,6 @@
 module.exports = [
   { name: 'vue', library: 'Vue', js: 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', css: '' },
+  // { name: 'vue-i18n', library: 'VueI18n', js: 'https://cdn.jsdelivr.net/npm/vue-i18n@8.17.4/dist/vue-i18n.min.js', css: '' },
   { name: 'vue-router', library: 'VueRouter', js: 'https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js', css: '' },
   { name: 'axios', library: 'axios', js: 'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js', css: '' },
   // { name: 'brace', library: 'ace', js: 'https://cdn.jsdelivr.net/npm/brace@0.11.1/index.min.js', css: '' },

public/index.html

@@ -33,6 +33,7 @@
       window.gds = JSON.parse(
         JSON.stringify(authConfig.roots.map((it) => it.name))
       );
+      window.current_drive_order = 0;
       // window.MODEL = { q: "the" };
     </script>
   </head>

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

@@ -63,6 +63,22 @@ body {
 	margin-top: 20px;
 }
 
+.video-content{
+	width: 100%;
+	background: #000;
+	position: relative;
+	padding-bottom: 56.25%;
+	height: 0;
+	iframe{
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+  }
+
+
 .golist {
 	min-height: 240px;
 	position: relative;

src/main.js

@@ -10,7 +10,7 @@ var styles = [
   'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css',
   'https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css',
   'https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css',
-  'https://cdn.jsdelivr.net/npm/bulma-pageloader@0.3.0/dist/css/bulma-pageloader.min.css'
+  // 'https://cdn.jsdelivr.net/npm/bulma-pageloader@0.3.0/dist/css/bulma-pageloader.min.css'
 ]
 styles.forEach(item=>{
   document.write(`<link rel="stylesheet" href="${item}">`);

src/router/routes.js

@@ -3,9 +3,9 @@ const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
 
 const frameIn = [
   { path: '/:id:/*.(html|php|css|go|java|py|js|json|txt|sh|md)', component: _import('page/GoText') },
-  { path: '/:id:/*.(mp4|webm|mkv)\\?a=view', component: _import('page/GoVideo') },
+  { path: '/:id:/*.(mp4|webm|mkv)', component: _import('page/GoVideo') },
-  { path: '/:id:/*.(bmp|jpg|jpeg|png|gif)\\?a=view', component: _import('page/GoImg') },
+  { path: '/:id:/*.(bmp|jpg|jpeg|png|gif)', component: _import('page/GoImg') },
-  { path: '/:id::cmd?(/??.*)', component: _import('page/GoList') },
+  { path: '/:id::cmd?(/?/??.*)', component: _import('page/GoList') },
 ]
 
 export default frameIn

src/utils/AcrouUtil.js

@@ -1,5 +1,42 @@
 import axios from "@utils/axios";
 
+const exts = [
+  "html",
+  "php",
+  "css",
+  "go",
+  "java",
+  "js",
+  "json",
+  "py",
+  "txt",
+  "sh",
+  "md",
+  "mp4",
+  "webm",
+  "mkv",
+  "bmp",
+  "jpg",
+  "jpeg",
+  "png",
+  "gif",
+];
+
+export const checkoutPath = (path, file) => {
+  // 解决/css这种也会匹配的问题
+  var ext = path.split(".").length > 1 ? path.split(".").pop() : "";
+  if (exts.indexOf(`${ext}`) >= 0) {
+    path += "?a=view";
+  } else {
+    if (file.mimeType === "application/vnd.google-apps.folder") {
+      if (path.substr(-1) !== "/") {
+        path += "/";
+      }
+    }
+  }
+  return path;
+};
+
 export const getQueryString = (path, param) => {
   if (!path) {
     return "";

src/views/common/BreadCrumb.vue

@@ -39,6 +39,7 @@ export default {
       let path = window.location.pathname;
       // 如果是搜索不进行渲染
       if (path.match("/[0-9]+:search")) {
+        this.navs = [];
         return;
       }
       var arr = path.trim("/").split("/");

src/views/common/Navbar.vue

@@ -53,6 +53,16 @@
               </p>
             </div>
           </div>
+          <div class="navbar-item has-dropdown is-hoverable">
+            <a class="navbar-link">
+              <i class="fa fa-language"></i>
+            </a>
+            <div class="navbar-dropdown is-boxed">
+              <a class="navbar-item">中文简体</a>
+              <a class="navbar-item">中文繁体</a>
+              <a class="navbar-item">English</a>
+            </div>
+          </div>
           <a
             class="navbar-item"
             target="_blank"
@@ -109,8 +119,6 @@ export default {
         this.$router.push({
           path: this.currgd.id.match("/[0-9]+:") + "search?q=" + this.param
         });
-        // location.href =
-        //   this.currgd.id.match("/[0-9]+:") + "search?q=" + this.param;
       }
     },
     burgerClick() {

src/views/page/GoImg.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="content">
+    <hr/>
     <figure class="image">
       <img :src="imgurl" :class="!display?'is-hidden':''" @load="loading" />
       <center :class="display?'is-hidden':''">
@@ -7,6 +8,7 @@
         <span class="sr-only">Loading...</span>
       </center>
     </figure>
+    <hr/>
   </div>
 </template>
 

src/views/page/GoList.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-pageloader@0.3.0/dist/css/bulma-pageloader.min.css" />
     <headmd :option="headmd" v-show="headmd.display"></headmd>
     <div class="golist">
       <table class="table is-hoverable">
@@ -31,15 +32,15 @@
                 <i class="fa fa-copy" title="copy link" aria-hidden="true"></i>
               </span>-->
               <span class="icon" @click.stop="go(file,'_blank')">
-                <i class="fa fa-external-link" title="Open a new tab" aria-hidden="true"></i>
-              </span>
-              <span class="icon">
                 <i
-                  class="fa fa-download faa-shake animated-hover"
+                  class="fa fa-external-link faa-shake animated-hover"
-                  title="Download"
+                  title="Open a new tab"
-                  @click="go(file,'down')"
+                  aria-hidden="true"
                 ></i>
               </span>
+              <span class="icon" @click="go(file,'down')">
+                <i class="fa fa-download faa-shake animated-hover" title="Download"></i>
+              </span>
             </td>
           </tr>
         </tbody>
@@ -55,7 +56,8 @@
 </template>
 
 <script>
-import { utc2beijing, formatFileSize } from "@utils/AcrouUtil";
+import { utc2beijing, formatFileSize, checkoutPath } from "@utils/AcrouUtil";
+import axios from "@/utils/axios";
 import Markdown from "../common/Markdown";
 export default {
   data: function() {
@@ -148,53 +150,27 @@ export default {
               page_token: body.nextPageToken,
               page_index: body.curPageIndex
             };
-            var exts = [
-              "html",
-              "php",
-              "css",
-              "go",
-              "java",
-              "js",
-              "json",
-              "py",
-              "txt",
-              "sh",
-              "md",
-              "mp4",
-              "webm",
-              "mkv",
-              "bmp",
-              "jpg",
-              "jpeg",
-              "png",
-              "gif"
-            ];
             try {
               this.files = data.files.map(item => {
-                var p = path + item.name;
+                var p =
+                  path.replace("search", "search/") +
+                  checkoutPath(item.name, item);
+                if (!path.match("/[0-9]+:search")) {
                   // HEAD.md
                   if (item.name === "HEAD.md") {
-                  this.headmd = {
+                    this.$emit("headmd", {
                       display: true,
                       file: item,
-                    path: p
+                      path: path + item.name
-                  };
+                    });
                   }
                   // REDEME.md
                   if (item.name === "README.md") {
-                  this.readmemd = {
+                    this.$emit("readmemd", {
                       display: true,
                       file: item,
-                    path: p
+                      path: path + item.name
-                  };
+                    });
-                }
-
-                var ext = p.split(".").pop();
-                if (exts.indexOf(`${ext}`) >= 0) {
-                  p += "?a=view";
-                } else {
-                  if (item.mimeType === "application/vnd.google-apps.folder") {
-                    p += "/";
                   }
                 }
                 return {
@@ -229,24 +205,48 @@ export default {
     // },
     go(file, target) {
       let path = file.path;
-      let cmd = this.$route.params.cmd || "";
+      if (path.match("/[0-9]+:search/")) {
-      if (cmd === "search") {
+        this.goSearchResult(file, target);
-        this.$refs.goSearchResult.go(file, target);
         return;
       }
       if (target === "down") {
         path = path.replace("?a=view", "");
-        window.open(path)
+        window.open(path);
         return;
       }
-      if(target === '_blank'){
+      if (target === "_blank") {
-        window.open(path)
+        window.open(path);
       } else {
         this.$router.push({
           path: path
         });
       }
     },
+    goSearchResult(file, target) {
+      this.loading = true;
+      let cur = window.current_drive_order;
+      axios
+        .post(`/${cur}:id2path`, { id: file.id })
+        .then(res => {
+          this.loading = false;
+          let data = res.data;
+          if (data) {
+            var href = `/${cur}:${data}`;
+            href = checkoutPath(href, file);
+            if (target === "_blank") {
+              window.open(href);
+            } else {
+              this.$router.push({
+                path: href
+              });
+            }
+          }
+        })
+        .catch(e => {
+          this.loading = false;
+          console.log(e);
+        });
+    },
     getIcon(type) {
       return "#" + (this.icon[type] ? this.icon[type] : "icon-weizhi");
     }

src/views/page/GoVideo.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="content">
+    <div class="video-content">
       <iframe
         width="100%"
-      height="600px;"
+        height="100%"
         :src="apiurl"
         frameborder="0"
         border="0"
@@ -12,6 +13,7 @@
         allowtransparency="true"
         allowfullscreen="true"
       ></iframe>
+    </div>
     <div class="card">
       <header class="card-header">
         <p class="card-header-title">
@@ -27,6 +29,12 @@
       </header>
       <div class="card-content">
         <div class="content">
+          <div class="field">
+            <label class="label">下载地址</label>
+            <div class="control">
+              <input class="input" type="text" :value="decodeURIComponent(videourl)" />
+            </div>
+          </div>
           <div class="columns is-mobile is-multiline has-text-centered">
             <div class="column" v-for="(item,index) in players" v-bind:key="index">
               <p class="heading">
@@ -53,24 +61,34 @@ export default {
       videourl: "",
       players: [
         {
-          name: 'IINA',
+          name: "IINA",
-          icon: 'https://www.iina.io/images/iina-icon-60.png',
+          icon: "https://www.iina.io/images/iina-icon-60.png",
-          scheme: 'iina://weblink?url='
+          scheme: "iina://weblink?url="
         },
         {
-          name: 'PotPlayer',
+          name: "PotPlayer",
-          icon: 'https://cloud.jsonpop.cn/go2index/player/potplayer.png',
+          icon: "https://cloud.jsonpop.cn/go2index/player/potplayer.png",
-          scheme: 'potplayer://'
+          scheme: "potplayer://"
         },
         {
-          name: 'VLC',
+          name: "VLC",
-          icon: 'https://cloud.jsonpop.cn/go2index/player/vlc.png',
+          icon: "https://cloud.jsonpop.cn/go2index/player/vlc.png",
-          scheme: 'vlc://'
+          scheme: "vlc://"
         },
         {
-          name: 'Thunder',
+          name: "Thunder",
-          icon: 'https://cloud.jsonpop.cn/go2index/player/thunder.png',
+          icon: "https://cloud.jsonpop.cn/go2index/player/thunder.png",
-          scheme: 'thunder://'
+          scheme: "thunder://"
+        },
+        {
+          name: "MXPlayer",
+          icon: "https://cloud.jsonpop.cn/go2index/player/mxplayer.png",
+          scheme: "intent:"
+        },
+        {
+          name: "nPlayer",
+          icon: "https://cloud.jsonpop.cn/go2index/player/nplayer.png",
+          scheme: "nplayer-"
         }
       ]
     };
@@ -89,8 +107,8 @@ export default {
   },
   computed: {
     getThunder() {
-      return Buffer.from("AA" + this.videourl + "ZZ").toString("base64")
+      return Buffer.from("AA" + this.videourl + "ZZ").toString("base64");
-    }
     }
   }
+};
 </script>