Randall/goindex-theme-r
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add Drive switch and Optimize page

Browse Source
This commit is contained in:
Aicirou 2020-04-28 02:16:41 +08:00
parent 6d08cee899
commit 524c163396
14 changed files with 357 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
README.md
View File

@ -1,24 +1,50 @@
# go2index-theme-acrou
![GoIndex](https://raw.githubusercontent.com/donwa/goindex/master/themes/logo.png)
## Project setup
```
npm install
```
# GoIndex-theme-acrou
### Compiles and hot-reloads for development
```
npm run serve
```
[README](README.md) | [中文文档](README_zh.md)
### Compiles and minifies for production
```
npm run build
```
## Demo
### Lints and fixes files
```
npm run lint
```
Acrou: [https://oss.achirou.workers.dev/](https://oss.achirou.workers.dev/)
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
## Use
The theme files can be downloaded from the dist directory and uploaded to your own CDN or you can use the link below.
Modify the app.js used in index.js of goindex to (https://cdn.jsdelivr.net/gh/Aicirou/goindex-theme-acrou/dist/app.mini.js).
The goindex author's `index.js` does not support search. Use this [index.js](https://oss.achirou.workers.dev/go2index/index.js?a=view) if you need a search function.
## TODO
- [x] Drive switch
- [ ] Pagination display
- [ ] Picture list display
- [ ] More file format preview
GoIndex
====
Google Drive Directory Index
Combining the power of [Cloudflare Workers](https://workers.cloudflare.com/) and [Google Drive](https://www.google.com/drive/) will allow you to index you files on the browser on Cloudflare Workers.
[index.js](https://github.com/donwa/goindex/) is the content of the Workers script.
## Deployment
1.Install `rclone` software locally
2.Follow [https://rclone.org/drive/]( https://rclone.org/drive/) bind a drive
3.Execute the command`rclone config file` to find the file `rclone.conf` path
4.Open `rclone.conf`,find the configuration `root_folder_id` and `refresh_token`
5.Download index.js in https://github.com/donwa/goindex and fill in root and refresh_token
6.Deploy the code to [Cloudflare Workers](https://www.cloudflare.com/)
## Quick Deployment
1.Open https://installen.gd.workers.dev/
2.Auth and get the code
3.Deploy the code to [Cloudflare Workers](https://www.cloudflare.com/)
## About
Cloudflare Workers allow you to write JavaScript which runs on all of Cloudflare's 150+ global data centers.

53
README_zh.md Normal file
View File

@ -0,0 +1,53 @@
![GoIndex](https://raw.githubusercontent.com/donwa/goindex/master/themes/logo.png)
# GoIndex-theme-acrou
[README](README.md) | [中文文档](README_zh.md)
## 预览
Acrou: [https://oss.achirou.workers.dev/](https://oss.achirou.workers.dev/)
## 使用
主题文件在dist目录可以下载下来上传到自己cdn或者使用下面的链接也可以
修改goindex的index.js中所使用的app.js为(https://cdn.jsdelivr.net/gh/Aicirou/goindex-theme-acrou/dist/app.mini.js)
goindex作者的`index.js`不支持搜索，需要搜索功能请使用[index.js](https://oss.achirou.workers.dev/go2index/index.js?a=view)
## 即将支持
- [x] 多盘切换
- [ ] 分页显示
- [ ] 图片列表显示
- [ ] 更多文件格式预览
GoIndex
====
Google Drive Directory Index
Combining the power of [Cloudflare Workers](https://workers.cloudflare.com/) and [Google Drive](https://www.google.com/drive/) will allow you to index you files on the browser on Cloudflare Workers.
[index.js](https://github.com/donwa/goindex/) is the content of the Workers script.
## Deployment
1.Install `rclone` software locally
2.Follow [https://rclone.org/drive/]( https://rclone.org/drive/) bind a drive
3.Execute the command`rclone config file` to find the file `rclone.conf` path
4.Open `rclone.conf`,find the configuration `root_folder_id` and `refresh_token`
5.Download index.js in https://github.com/donwa/goindex and fill in root and refresh_token
6.Deploy the code to [Cloudflare Workers](https://www.cloudflare.com/)
## Quick Deployment
1.Open https://installen.gd.workers.dev/
2.Auth and get the code
3.Deploy the code to [Cloudflare Workers](https://www.cloudflare.com/)
## About
Cloudflare Workers allow you to write JavaScript which runs on all of Cloudflare's 150+ global data centers.

19
public/index.html
View File

@ -1,17 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<script>
var authConfig = {
roots: [
{
id: "team",
id: "0AEofxddwF4bAUk9PVA",
name: "TeamDrive",
pass: "",
},
@ -19,15 +18,17 @@
id: "root",
name: "PriveDrive",
pass: "",
}
},
],
};
window.gds = JSON.parse(JSON.stringify(authConfig.roots.map(it => it.name)));
window.gds = JSON.parse(
JSON.stringify(authConfig.roots.map((it) => it.name))
);
// window.MODEL = { q: "the" };
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>

26
src/App.vue
View File

@ -5,10 +5,10 @@
</template>
<script>
import Layout from './view/Layout'
import Layout from "./view/Layout";
export default {
name: 'App',
name: "App",
components: {
Layout
},
@ -17,21 +17,13 @@ export default {
config: {
siteName: "",
title: "",
path: "",
}
path: ""
}
};
},
mounted() {
let favicon = document.createElement("link");
favicon.rel = "icon";
favicon.href =
"https://cdn.jsdelivr.net/gh/Aicirou/goindex-theme-acrou/favicon.ico";
document.getElementsByTagName("head")[0].appendChild(favicon);
let scripts = [
"https://at.alicdn.com/t/font_1760192_ud2z97y6kba.js"
];
scripts.map((item) => {
let scripts = ["https://at.alicdn.com/t/font_1760192_zf96psu0uo.js"];
scripts.map(item => {
let script = document.createElement("script");
script.type = "text/javascript";
script.src = item;
@ -40,11 +32,9 @@ export default {
let path = window.location.pathname;
this.config.path = path;
this.config.siteName = document.getElementsByTagName(
"title"
)[0].innerText;
this.config.siteName = document.getElementsByTagName("title")[0].innerText;
this.config.title = this.siteName + "-" + decodeURI(path);
this.$refs.layout.render(this.config);
}
}
};
</script>

62
src/assets/style/public.scss
View File

@ -1,62 +0,0 @@
@import "~/node_modules/bulma"
// .icon {
// width: 2em;
// height: 2em;
// vertical-align: -0.5em;
// fill: currentColor;
// overflow: hidden;
// }
// th,td {
// border: 0 !important;
// }
// .breadcrumb:not(:last-child) {
// margin: 0.5rem 0;
// padding: 0 0.75em;
// }
// .breadcrumb ul {
// flex-wrap: inherit;
// }
// .breadcrumb li:not(:first-child):not(:last-child) {
// margin: 0 5px;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// }
// body {
// overflow: hidden;
// }
// .section {
// padding: 0.5rem 0.5rem 1.5rem 0.5rem;
// }
// .container {
// max-width: 980px !important;
// }
// .table {
// width: 100%;
// table-layout: fixed;
// }
// .table td {
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// }
// .no-content {
// background: url(https://s1.hdslb.com/bfs/static/jinkela/search/asserts/no-data.png) no-repeat 50% 50%;
// height: 240px;
// line-height: 240px;
// text-align: center;
// margin-top: 20px;
// }
$widescreen-enabled: false

57
src/assets/style/theme/acrou/index.scss Normal file
View File

@ -0,0 +1,57 @@
body {
overflow: hidden;
}
.section {
padding: 0.5rem 0.5rem 1.5rem 0.5rem;
}
.container {
max-width: 980px;
}
.icon {
width: 2em;
height: 2em;
vertical-align: middle;
fill: currentColor;
overflow: hidden;
}
.breadcrumb:not(:last-child) {
margin: 0.5rem 0;
padding: 0 0.75em;
}
.breadcrumb ul {
flex-wrap: inherit;
}
.breadcrumb li:not(:first-child):not(:last-child) {
margin: 0 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table {
width: 100%;
table-layout: fixed;
th,td {
border: 0 !important;
}
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
}
.no-content {
background: url(https://s1.hdslb.com/bfs/static/jinkela/search/asserts/no-data.png) no-repeat 50% 50%;
height: 240px;
line-height: 240px;
text-align: center;
margin-top: 20px;
}

2
src/assets/style/theme/register.scss Normal file
View File

@ -0,0 +1,2 @@
@import 'bulma';
@import '~@/assets/style/theme/acrou/index.scss';

32
src/main.js
View File

@ -2,7 +2,6 @@ import Vue from 'vue'
import App from './App.vue'
import axios from '@utils/axios'
import VueAxios from 'vue-axios'
// import bulma from 'bulma'
var styles = [
// 'https://cdn.jsdelivr.net/npm/bulma@0.8.1/css/bulma.min.css',
@ -13,38 +12,9 @@ styles.forEach(item=>{
document.write(`<link rel="stylesheet" href="${item}">`);
})
// document.write(
// `<style>.icon{width:2em;height:2em;vertical-align:-0.5em;fill:currentColor;overflow:hidden;}th,td{border:0 !important;}.breadcrumb:not(:last-child){margin:0.5rem 0;padding:0 0.75em;}.breadcrumb ul{flex-wrap:inherit;}.breadcrumb li:not(:first-child):not(:last-child){margin:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
// body {
// overflow: hidden;
// }
// .section {
// padding: 0.5rem 0.5rem 1.5rem 0.5rem;
// }
// .container {
// max-width: 980px !important;
// }
// .table{
// width:100%;
// table-layout: fixed;
// }
// .table td{
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// }
// .no-content {
// background: url(https://s1.hdslb.com/bfs/static/jinkela/search/asserts/no-data.png) no-repeat 50% 50%;
// height: 240px;
// line-height: 240px;
// text-align: center;
// margin-top: 20px;
// }
// </style>`
// );
document.write('<div id="app"></div>');
Vue.config.productionTip = false
// Vue.use(bulma)
Vue.use(VueAxios,axios)
new Vue({

5
src/view/Layout.vue
View File

@ -67,7 +67,7 @@ export default {
var name = path.split("/").pop();
var ext = name.split(".").pop().toLowerCase();
if (
"|html|php|css|go|java|js|json|txt|sh|md|".indexOf(`|${ext}|`) >= 0
"|html|php|css|go|java|py|js|json|txt|sh|md|".indexOf(`|${ext}|`) >= 0
) {
this.show = "text";
this.text = {
@ -96,3 +96,6 @@ export default {
}
}
</script>
<style lang="scss">
@import "~@/assets/style/theme/register.scss";
</style>

20
src/view/common/BreadCrumb.vue
View File

@ -1,9 +1,6 @@
<template>
<nav class="breadcrumb is-hidden-mobile is-hidden-touch" aria-label="breadcrumbs">
<ul>
<li v-show="navs.length>0">
<a href="/">首页</a>
</li>
<li
v-for="(item,index) in navs"
:class="(index+1)==navs.length?'is-active':''"
@ -21,10 +18,15 @@ export default {
data: function() {
return {
navs: [],
index: "/"
};
},
methods: {
render(path) {
// 如果是搜索不进行渲染
if (path.match("/[0-9]+:search")) {
return;
}
var arr = path.trim("/").split("/");
var p = "/";
if (arr.length > 0) {
@ -36,14 +38,20 @@ export default {
}
n = decodeURI(n);
p += n + "/";
if (p.match("/[0-9]+:/")[0] === p) {
n = "首页";
}
navs.push({
path: p,
title: n,
title: n
});
}
this.navs = navs;
}
},
if (navs.length == 1 && navs[0].title === "首页") {
this.navs = [];
}
}
}
}
};
</script>

22
src/view/common/Navbar.vue
View File

@ -2,7 +2,7 @@
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<a class="navbar-item" :href="currgd.id">
<h3 class="title is-3 has-text-white">{{siteName}}</h3>
</a>
<a
@ -75,10 +75,15 @@ export default {
this.gds = window.gds.map((item, index) => {
return {
name: item,
id: ":" + index + "/",
id: "/" + index + ":/"
};
});
this.currgd = this.gds[0];
this.currgd = localStorage.getItem("currgd")
? JSON.parse(localStorage.getItem("currgd"))
: this.gds[0];
}
if (window.MODEL) {
this.param = window.MODEL.q ? window.MODEL.q : "";
}
},
data: function() {
@ -93,20 +98,23 @@ export default {
methods: {
changeItem(item) {
this.currgd = item;
localStorage.setItem("currgd", JSON.stringify(item));
location.href = item.id;
},
query() {
if (this.param) {
location.href = "/?q=" + this.param;
location.href =
this.currgd.id.match("/[0-9]+:") + "search?q=" + this.param;
}
},
burgerClick() {
this.isActive = !this.isActive
this.isActive = !this.isActive;
}
},
computed: {
getCurrGD() {
return this.gds.filter((item) => item.name !== this.currgd.name);
},
return this.gds.filter(item => item.name !== this.currgd.name);
}
}
};
</script>

12
src/view/page/GoImg.vue
View File

@ -1,7 +1,11 @@
<template>
<div class="content">
<figure class="image">
<img :src="imgurl" />
<img :src="imgurl" :class="!display?'is-hidden':''" @load="loading" />
<center :class="display?'is-hidden':''">
<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
<span class="sr-only">Loading...</span>
</center>
</figure>
</div>
</template>
@ -11,12 +15,18 @@ export default {
data: function() {
return {
imgurl: "",
display: false
};
},
methods: {
render(path) {
this.imgurl = path;
},
loading(event) {
if (event.target.complete == true) {
this.display = true
}
}
}
};
</script>

121
src/view/page/GoList.vue
View File

@ -31,41 +31,17 @@
class="is-hidden-mobile is-hidden-touch"
v-if="file.mimeType!=='application/vnd.google-apps.folder'"
>
<!-- <span class="icon" @click="copy(file.path)">
<i class="fa fa-copy" title="copy link" aria-hidden="true"></i>
</span> -->
<span class="icon">
<i class="fa fa-download" @click="go(file.path,'down')"></i>
<i class="fa fa-download" title="Download" @click="go(file.path,'down')"></i>
</span>
</td>
</tr>
</tbody>
</table>
<div v-show="files.length==0" class="has-text-centered no-content"></div>
<nav class="pagination is-centered is-small" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="pagination-link" aria-label="Goto page 1">1</a>
</li>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 45">45</a>
</li>
<li>
<a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 47">47</a>
</li>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 86">86</a>
</li>
</ul>
</nav>
</div>
</template>
@ -74,7 +50,10 @@ import { utc2beijing, formatFileSize } from "@utils/AcrouUtil";
export default {
data: function() {
return {
page: {},
page: {
page_token: null,
page_index: 0
},
files: [],
loading: false,
columns: [
@ -82,18 +61,18 @@ export default {
{
name: "修改时间",
style: "width:20%",
class: "is-hidden-mobile is-hidden-touch",
class: "is-hidden-mobile is-hidden-touch"
},
{
name: "大小",
style: "width:10%",
class: "is-hidden-mobile is-hidden-touch",
style: "width:10.5%",
class: "is-hidden-mobile is-hidden-touch"
},
{
name: "下载",
style: "width:6%",
class: "is-hidden-mobile is-hidden-touch",
},
class: "is-hidden-mobile is-hidden-touch"
}
],
icon: {
"application/vnd.google-apps.folder": "icon-morenwenjianjia",
@ -104,8 +83,21 @@ export default {
"text/plain": "icon-txt",
"text/markdown": "icon-markdown",
"text/x-ssa": "icon-ASS",
"text/html": "icon-html",
"text/x-python-script": "icon-python",
"text/x-java": "icon-java1",
"text/x-sh": "icon-SH",
"application/x-subrip": "icon-srt",
},
"application/zip": "icon-zip",
"application/rar": "icon-rar",
"application/pdf": "icon-pdf",
"application/json": "icon-JSON1",
"application/x-yaml": "icon-YML",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": "icon-word",
"image/bmp": "icon-img",
"image/jpeg": "icon-img",
"image/png": "icon-img"
}
};
},
methods: {
@ -113,27 +105,26 @@ export default {
this.loading = true;
var password = localStorage.getItem("password" + path);
var p = {
q: param,
password: password || null,
page_token: null,
page_index: 0
...this.page
};
this.axios
.post(path, p)
.then((res) => {
var data = res.data.data;
if (
typeof data != "null" &&
data.hasOwnProperty("error") &&
data.error.code == "401"
) {
var pass = prompt("目录加密，请输入密码", "");
localStorage.setItem("password" + path, pass);
if (pass != null && pass != "") {
this.render(path);
} else {
history.go(-1);
.then(res => {
var body = res.data;
if (body) {
// 判断响应状态
if (body.error && body.error.code == "401") {
this.checkPassword(path);
return;
}
} else if (typeof data != "null") {
let data = body.data;
if (!data) return;
this.page = {
page_token: body.nextPageToken,
page_index: body.curPageIndex
};
var exts = [
"html",
"php",
@ -142,6 +133,7 @@ export default {
"java",
"js",
"json",
"py",
"txt",
"sh",
"md",
@ -152,17 +144,17 @@ export default {
"jpg",
"jpeg",
"png",
"gif",
"gif"
];
try {
this.files = data.files.map((item) => {
this.files = data.files.map(item => {
var p = path + item.name;
// HEAD.md
if (item.name === "HEAD.md") {
this.$emit("headmd", {
display: true,
file: item,
path: p,
path: p
});
}
// REDEME.md
@ -170,7 +162,7 @@ export default {
this.$emit("readmemd", {
display: true,
file: item,
path: p,
path: p
});
}
@ -186,7 +178,7 @@ export default {
path: p,
...item,
modifiedTime: utc2beijing(item.modifiedTime),
size: formatFileSize(item.size),
size: formatFileSize(item.size)
};
});
} catch (e) {
@ -195,10 +187,23 @@ export default {
}
this.loading = false;
})
.catch((ex) => {
.catch(err => {
this.loading = false;
});
},
checkPassword(path) {
var pass = prompt("目录加密，请输入密码", "");
localStorage.setItem("password" + path, pass);
if (pass != null && pass != "") {
this.render(path);
} else {
history.go(-1);
}
},
copy(path) {
path = path.replace("?a=view", "");
// TODO
},
go(path, type = "view") {
if (type === "down") {
path = path.replace("?a=view", "");
@ -207,7 +212,7 @@ export default {
},
getIcon(type) {
return "#" + (this.icon[type] ? this.icon[type] : "icon-weizhi");
},
}
}
};
</script>

34
vue.config.js
View File

@ -1,17 +1,26 @@
const path = require('path');
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
// 设置 scss 公用变量文件
sass: {
prependData: `@import '~@/assets/style/public.scss';`
}
}
// css: {
// loaderOptions: {
// sass: {
// prependData: `@import '~@/assets/style/public.scss';`,
// },
// }
// },
chainWebpack: (config) => {
config.resolve.alias
.set("@", resolve("src"))
.set("@assets", resolve("src/assets"))
.set("@utils", resolve("src/utils"))
.set("@node_modules", resolve("node_modules"));
config.output
.filename("js/app.mini.js")
.end();
},
devServer: {
proxy: {
@ -23,13 +32,6 @@ module.exports = {
"^/api": "",
},
},
}
},
chainWebpack: (config) => {
config.resolve.alias
.set('@', resolve('src'))
.set('@assets', resolve('src/assets'))
.set('@utils', resolve('src/utils'))
.set('@node_modules', resolve('node_modules'))
}
},
};