继续优化页面

This commit is contained in:
qxz 2020-05-07 14:54:04 +08:00
parent a9cae08aa2
commit f83cfaba0d
11 changed files with 163 additions and 89 deletions

View File

@ -1,45 +1,53 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" /> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- 使用 CDN 加速的 CSS 文件,配置在 vue.config.js 下 --> <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %> <!-- 使用 CDN 加速的 CSS 文件,配置在 vue.config.js 下 -->
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style"> <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet"> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
<% } %> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<title><%= htmlWebpackPlugin.options.title %></title> <% } %>
<script> <title><%= htmlWebpackPlugin.options.title %></title>
var authConfig = { <script>
roots: [ var authConfig = {
{ version: '1.1.0',
id: "0AEofxddwF4bAUk9PVA", roots: [
name: "TeamDrive", {
pass: "", id: "0AEofxddwF4bAUk9PVA",
}, name: "TeamDrive",
{ pass: "",
id: "root", },
name: "PriveDrive", {
pass: "", id: "root",
}, name: "PriveDrive",
], pass: "",
}; },
window.gds = JSON.parse( ],
JSON.stringify(authConfig.roots.map((it) => it.name)) };
); var themeOptions = {
window.current_drive_order = 0; // en/zh-chs/zh-cht
languages: 'en'
}
window.gdconfig = JSON.parse(JSON.stringify({ version: authConfig.version, themeOptions: themeOptions }));
window.gds = JSON.parse(
JSON.stringify(authConfig.roots.map((it) => it.name))
);
window.current_drive_order = 0;
// window.MODEL = { q: "the" }; // window.MODEL = { q: "the" };
</script> </script>
<!-- 使用 CDN 加速的 JS 文件,配置在 vue.config.js 下 --> <!-- 使用 CDN 加速的 JS 文件,配置在 vue.config.js 下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %> <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script> <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %> <% } %>
<script src="/app.js"></script> <script src="/app.js"></script>
</head> </head>
<body> <body>
</body>
</body>
</html> </html>

View File

@ -25,7 +25,7 @@ Vue.prototype.$languages = Object.keys(messages).map(langlage => ({
})) }))
export default new VueI18n({ export default new VueI18n({
locale: util.cookies.get('lang') || process.env.VUE_APP_I18N_LOCALE, locale: util.cookies.get('lang') || window.gdconfig.themeOptions.languages || process.env.VUE_APP_I18N_LOCALE,
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE, fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE,
messages messages
}) })

View File

@ -30,7 +30,7 @@ const router = new VueRouter({
*/ */
router.beforeEach(async (to, from, next) => { router.beforeEach(async (to, from, next) => {
console.log("before:"); console.log("before:");
console.log(to); console.log(to,from);
next(); next();
}); });

View File

@ -1,12 +1,50 @@
// 由于懒加载页面太多的话会造成webpack热更新太慢所以开发环境不使用懒加载只有生产环境使用懒加载 // 由于懒加载页面太多的话会造成webpack热更新太慢所以开发环境不使用懒加载只有生产环境使用懒加载
const _import = require("@/libs/util.import." + process.env.NODE_ENV); const _import = require("@/libs/util.import." + process.env.NODE_ENV);
const frameIn = [ const meta = {
{ path: "/:id:(text)/:path", component: _import("page/GoText"), props: true }, keepAlive: true
{ path: "/:id:(pdf)/:path", component: _import("page/GoPdf"), props: true }, }
{ path: "/:id:(video)/:path", component: _import("page/GoVideo") },
{ path: "/:id:(image)/:path", component: _import("page/GoImg") }, const frameIn = [{
{ path: "/:id::cmd?(/?/??.*/)", component: _import("page/GoList") }, path: "/:id:(text)/:path",
component: _import("page/GoText"),
meta: {
...meta,
view: 'text'
}
},
{
path: "/:id:(pdf)/:path",
component: _import("page/GoPdf"),
meta: {
...meta,
view: 'pdf'
}
},
{
path: "/:id:(video)/:path",
component: _import("page/GoVideo"),
meta: {
...meta,
view: 'video'
}
},
{
path: "/:id:(image)/:path",
component: _import("page/GoImg"),
meta: {
...meta,
view: 'image'
}
},
{
path: "/:id::cmd?(/?/??.*)",
component: _import("page/GoList"),
meta: {
...meta,
view: 'list'
}
},
]; ];
export default frameIn; export default frameIn;

View File

@ -4,9 +4,9 @@
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<bread-crumb ref="breadcrumb"></bread-crumb> <bread-crumb ref="breadcrumb"></bread-crumb>
<!-- <keep-alive> --> <keep-alive>
<router-view></router-view> <router-view></router-view>
<!-- </keep-alive> --> </keep-alive>
<Footer></Footer> <Footer></Footer>
</div> </div>
</section> </section>

View File

@ -38,7 +38,7 @@
<div class="navbar-end"> <div class="navbar-end">
<!-- is-hidden-desktop --> <!-- is-hidden-desktop -->
<!-- <div class="navbar-item"> <div class="navbar-item">
<div class="field is-grouped"> <div class="field is-grouped">
<p class="control has-icons-left" style="width:100%;"> <p class="control has-icons-left" style="width:100%;">
<input <input
@ -53,8 +53,8 @@
</span> </span>
</p> </p>
</div> </div>
</div> --> </div>
<header-search /> <!-- <header-search /> -->
<header-locales /> <header-locales />
<div class="navbar-item"> <div class="navbar-item">
<header-color/> <header-color/>

View File

@ -23,7 +23,10 @@ export default {
}, },
computed: { computed: {
url() { url() {
return decode64(this.$route.params.path); if (this.$route.params.path) {
return decode64(this.$route.params.path);
}
return ''
} }
}, },
created() { created() {
@ -33,7 +36,7 @@ export default {
render() { render() {
let path = this.url; let path = this.url;
// 便 // 便
path = process.env.NODE_ENV === "development" ? "/api" + path : ""; // path = process.env.NODE_ENV === "development" ? "/api" + path : "";
this.imgurl = path; this.imgurl = path;
}, },
loading(event) { loading(event) {

View File

@ -25,6 +25,11 @@
<svg class="iconfont" aria-hidden="true"> <svg class="iconfont" aria-hidden="true">
<use :xlink:href="getIcon(file.mimeType)" /> <use :xlink:href="getIcon(file.mimeType)" />
</svg> </svg>
<!-- <span class="icon">
<figure class="image is-24x24">
<img :src="file.thumbnailLink" />
</figure>
</span>-->
{{file.name}} {{file.name}}
</td> </td>
<td class="is-hidden-mobile is-hidden-touch">{{file.modifiedTime}}</td> <td class="is-hidden-mobile is-hidden-touch">{{file.modifiedTime}}</td>
@ -84,7 +89,7 @@ export default {
Headmd: Markdown, Headmd: Markdown,
Readmemd: Markdown Readmemd: Markdown
}, },
data: function() { data: function () {
return { return {
page: { page: {
page_token: null, page_token: null,
@ -123,7 +128,7 @@ export default {
}; };
}, },
computed: { computed: {
columns() { columns () {
return [ return [
{ name: this.$t("list.title.file"), style: "" }, { name: this.$t("list.title.file"), style: "" },
{ {
@ -138,22 +143,22 @@ export default {
}, },
{ {
name: this.$t("list.title.operation"), name: this.$t("list.title.operation"),
style: "width:13%", style: "width:13.5%",
class: "is-hidden-mobile is-hidden-touch" class: "is-hidden-mobile is-hidden-touch"
} }
]; ];
} }
}, },
mounted() { mounted () {
this.render(); this.render();
}, },
methods: { methods: {
cellClass(row) { cellClass (row) {
if (row.columnIndex != 0) { if (row.columnIndex != 0) {
return "is-hidden-mobile is-hidden-touch has-text-drak"; return "is-hidden-mobile is-hidden-touch has-text-drak";
} }
}, },
render() { render () {
let path = window.location.pathname; let path = window.location.pathname;
this.loading = true; this.loading = true;
var password = localStorage.getItem("password" + path); var password = localStorage.getItem("password" + path);
@ -220,7 +225,7 @@ export default {
this.loading = false; this.loading = false;
}); });
}, },
checkPassword(path) { checkPassword (path) {
var pass = prompt(this.$t("list.auth"), ""); var pass = prompt(this.$t("list.auth"), "");
localStorage.setItem("password" + path, pass); localStorage.setItem("password" + path, pass);
if (pass != null && pass != "") { if (pass != null && pass != "") {
@ -229,12 +234,12 @@ export default {
history.go(-1); history.go(-1);
} }
}, },
copy(path) { copy (path) {
let origin = window.location.origin; let origin = window.location.origin;
path = origin + path; path = origin + path;
clipboard.writeText(path); clipboard.writeText(path);
}, },
go(file, target) { go (file, target) {
let path = file.path; let path = file.path;
if (path.match("/[0-9]+:search/")) { if (path.match("/[0-9]+:search/")) {
this.goSearchResult(file, target); this.goSearchResult(file, target);
@ -261,7 +266,7 @@ export default {
return; return;
} }
}, },
goSearchResult(file, target) { goSearchResult (file, target) {
this.loading = true; this.loading = true;
let cur = window.current_drive_order; let cur = window.current_drive_order;
axios axios
@ -286,19 +291,25 @@ export default {
console.log(e); console.log(e);
}); });
}, },
getIcon(type) { getIcon (type) {
return "#" + (this.icon[type] ? this.icon[type] : "icon-weizhi"); return "#" + (this.icon[type] ? this.icon[type] : "icon-weizhi");
} }
}, },
watch: { watch: {
$route(to, from) { $route (to, from) {
// 退page_token if (!to.path.indexOf(':search')) {
if (to.path.length < from.path.length) { // 退page_token
this.page.page_token = null; if (to.path.length < from.path.length) {
this.page.page_token = null;
}
if (to.path.substr(-1) !== '/' && from.meta.view !== "list") {
return
}
} }
if (to.path.substr(-1) === '/') {
this.render(); this.headmd = { display: false, file: {}, path: "" },
} this.readmemd = { display: false, file: {}, path: "" }
this.render();
} }
} }
}; };

View File

@ -14,7 +14,10 @@ export default {
}, },
computed: { computed: {
url() { url() {
return decode64(this.$route.params.path); if (this.$route.params.path) {
return decode64(this.$route.params.path);
}
return ''
} }
}, },
methods: {} methods: {}

View File

@ -15,32 +15,40 @@
<script> <script>
import { get_file, decode64 } from "@utils/AcrouUtil"; import { get_file, decode64 } from "@utils/AcrouUtil";
export default { export default {
data: function() { data: function () {
return { return {
path: "", path: "",
content: "" content: ""
}; };
}, },
created() { watch: {
$route (to, from) {
this.render();
}
},
created () {
this.render(); this.render();
}, },
computed: { computed: {
url() { url () {
return decode64(this.$route.params.path); if (this.$route.params.path) {
return decode64(this.$route.params.path);
}
return ''
} }
}, },
components: { components: {
editor: require("@/components/ace-editor") editor: require("@/components/ace-editor")
}, },
methods: { methods: {
render() { render () {
let path = this.url; let path = this.url;
this.content = this.$t("page.text.loading"); this.content = this.$t("page.text.loading");
get_file({ path: path, file: {} }, data => { get_file({ path: path, file: {} }, data => {
this.content = data; this.content = data;
}); });
}, },
editorInit(editor) { editorInit (editor) {
editor.setFontSize(18); editor.setFontSize(18);
editor.session.setUseWrapMode(false); editor.session.setUseWrapMode(false);
require("brace/ext/language_tools"); //language extension prerequsite... require("brace/ext/language_tools"); //language extension prerequsite...

View File

@ -56,7 +56,7 @@
<script> <script>
import { decode64 } from "@utils/AcrouUtil"; import { decode64 } from "@utils/AcrouUtil";
export default { export default {
data: function() { data: function () {
return { return {
apiurl: "", apiurl: "",
videourl: "", videourl: "",
@ -95,21 +95,24 @@ export default {
}; };
}, },
methods: { methods: {
render() { render () {
// 便 // 便
this.videourl = window.location.origin + this.url; this.videourl = window.location.origin + this.url;
this.apiurl = this.apiurl =
"https://api.jsonpop.cn/demo/blplyaer/?url=" + this.videourl; "https://api.jsonpop.cn/demo/blplyaer/?url=" + this.videourl;
} }
}, },
created() { created () {
this.render(); this.render();
}, },
computed: { computed: {
url() { url () {
return decode64(this.$route.params.path); if (this.$route.params.path) {
return decode64(this.$route.params.path);
}
return ''
}, },
getThunder() { getThunder () {
return Buffer.from("AA" + this.videourl + "ZZ").toString("base64"); return Buffer.from("AA" + this.videourl + "ZZ").toString("base64");
} }
} }