优化页面

This commit is contained in:
Aicirou 2020-05-02 13:00:29 +08:00
parent 5892b79b38
commit 7b86fc1e1d
11 changed files with 177 additions and 93 deletions

View File

@ -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: '' },

View File

@ -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>

View File

@ -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;

View File

@ -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}">`);

View File

@ -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:/*.(bmp|jpg|jpeg|png|gif)\\?a=view', component: _import('page/GoImg') },
{ path: '/:id::cmd?(/??.*)', component: _import('page/GoList') },
{ path: '/:id:/*.(mp4|webm|mkv)', component: _import('page/GoVideo') },
{ path: '/:id:/*.(bmp|jpg|jpeg|png|gif)', component: _import('page/GoImg') },
{ path: '/:id::cmd?(/?/??.*)', component: _import('page/GoList') },
]
export default frameIn

View File

@ -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 "";

View File

@ -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("/");

View File

@ -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() {

View File

@ -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>

View File

@ -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"
title="Download"
@click="go(file,'down')"
class="fa fa-external-link faa-shake animated-hover"
title="Open a new tab"
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;
// HEAD.md
if (item.name === "HEAD.md") {
this.headmd = {
display: true,
file: item,
path: p
};
}
// REDEME.md
if (item.name === "README.md") {
this.readmemd = {
display: true,
file: item,
path: p
};
}
var ext = p.split(".").pop();
if (exts.indexOf(`${ext}`) >= 0) {
p += "?a=view";
} else {
if (item.mimeType === "application/vnd.google-apps.folder") {
p += "/";
var p =
path.replace("search", "search/") +
checkoutPath(item.name, item);
if (!path.match("/[0-9]+:search")) {
// HEAD.md
if (item.name === "HEAD.md") {
this.$emit("headmd", {
display: true,
file: item,
path: path + item.name
});
}
// REDEME.md
if (item.name === "README.md") {
this.$emit("readmemd", {
display: true,
file: item,
path: path + item.name
});
}
}
return {
@ -229,24 +205,48 @@ export default {
// },
go(file, target) {
let path = file.path;
let cmd = this.$route.params.cmd || "";
if (cmd === "search") {
this.$refs.goSearchResult.go(file, target);
if (path.match("/[0-9]+:search/")) {
this.goSearchResult(file, target);
return;
}
if (target === "down") {
path = path.replace("?a=view", "");
window.open(path)
window.open(path);
return;
}
if(target === '_blank'){
window.open(path)
}else{
if (target === "_blank") {
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");
}

View File

@ -1,17 +1,19 @@
<template>
<div class="content">
<iframe
width="100%"
height="600px;"
:src="apiurl"
frameborder="0"
border="0"
marginwidth="0"
marginheight="0"
scrolling="no"
allowtransparency="true"
allowfullscreen="true"
></iframe>
<div class="video-content">
<iframe
width="100%"
height="100%"
:src="apiurl"
frameborder="0"
border="0"
marginwidth="0"
marginheight="0"
scrolling="no"
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">
@ -47,30 +55,40 @@
<script>
export default {
data: function () {
data: function() {
return {
apiurl: "",
videourl: "",
players: [
{
name: 'IINA',
icon: 'https://www.iina.io/images/iina-icon-60.png',
scheme: 'iina://weblink?url='
name: "IINA",
icon: "https://www.iina.io/images/iina-icon-60.png",
scheme: "iina://weblink?url="
},
{
name: 'PotPlayer',
icon: 'https://cloud.jsonpop.cn/go2index/player/potplayer.png',
scheme: 'potplayer://'
name: "PotPlayer",
icon: "https://cloud.jsonpop.cn/go2index/player/potplayer.png",
scheme: "potplayer://"
},
{
name: 'VLC',
icon: 'https://cloud.jsonpop.cn/go2index/player/vlc.png',
scheme: 'vlc://'
name: "VLC",
icon: "https://cloud.jsonpop.cn/go2index/player/vlc.png",
scheme: "vlc://"
},
{
name: 'Thunder',
icon: 'https://cloud.jsonpop.cn/go2index/player/thunder.png',
scheme: 'thunder://'
name: "Thunder",
icon: "https://cloud.jsonpop.cn/go2index/player/thunder.png",
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-"
}
]
};
@ -88,9 +106,9 @@ export default {
this.apiurl = "https://api.jsonpop.cn/demo/blplyaer/?url=" + this.videourl;
},
computed: {
getThunder () {
return Buffer.from("AA" + this.videourl + "ZZ").toString("base64")
getThunder() {
return Buffer.from("AA" + this.videourl + "ZZ").toString("base64");
}
}
}
};
</script>