调整为vue-router模式
This commit is contained in:
Aicirou
parent
aa24cefccd
commit
5892b79b38
@ -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-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: '' },
|
||||
// { name: 'brace/ext/language_tools', library: 'language_tools', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/ext/language_tools.js', css: '' },
|
||||
|
||||
5
package-lock.json
generated
5
package-lock.json
generated
@ -11823,6 +11823,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "3.1.6",
|
||||
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.6.tgz?cache=0&sync_timestamp=1588196200689&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.6.tgz",
|
||||
"integrity": "sha1-RfWjo4Q+MXAsBh3YKTk1VOQyj4k="
|
||||
},
|
||||
"vue-style-loader": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "http://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz",
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue": "^2.6.11",
|
||||
"vue-axios": "^2.1.5",
|
||||
"vue-router": "^3.1.6",
|
||||
"vue2-ace-editor": "0.0.15"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Layout from "./view/Layout";
|
||||
import Layout from "./views/Layout";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
@ -34,7 +34,7 @@ export default {
|
||||
this.config.path = path;
|
||||
this.config.siteName = document.getElementsByTagName("title")[0].innerText;
|
||||
this.config.title = this.siteName + "-" + decodeURI(path);
|
||||
this.$refs.layout.render(this.config);
|
||||
// this.$refs.layout.render(this.config);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -10,10 +10,10 @@ body {
|
||||
max-width: 980px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
.iconfont {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
vertical-align: middle;
|
||||
vertical-align: -0.5em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -45,13 +45,43 @@ body {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
&:hover,& .icon{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.golist {
|
||||
min-height: 240px;
|
||||
position: relative;
|
||||
|
||||
.pageloader:not(.is-bottom-to-top) {
|
||||
-webkit-transform: initial;
|
||||
transform: initial;
|
||||
}
|
||||
.pageloader{
|
||||
position: absolute;
|
||||
padding-top: 0;
|
||||
background: hsla(0,0%,100%,.6);
|
||||
will-change: initial;
|
||||
|
||||
.title {
|
||||
color: hsl(0, 0%, 4%);
|
||||
}
|
||||
}
|
||||
.pageloader::after {
|
||||
border: 0 solid black;
|
||||
}
|
||||
}
|
||||
1
src/libs/util.import.development.js
Executable file
1
src/libs/util.import.development.js
Executable file
@ -0,0 +1 @@
|
||||
module.exports = file => require('@/views/' + file).default
|
||||
1
src/libs/util.import.production.js
Executable file
1
src/libs/util.import.production.js
Executable file
@ -0,0 +1 @@
|
||||
module.exports = file => () => import('@/views/' + file)
|
||||
@ -2,11 +2,15 @@ import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import axios from '@utils/axios'
|
||||
import VueAxios from 'vue-axios'
|
||||
import router from './router'
|
||||
|
||||
var styles = [
|
||||
// 'https://cdn.jsdelivr.net/npm/bulma@0.8.1/css/bulma.min.css',
|
||||
// 'https://cdn.jsdelivr.net/npm/bulma-tooltip@3.0.2/dist/css/bulma-tooltip.min.css',
|
||||
'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'
|
||||
]
|
||||
styles.forEach(item=>{
|
||||
document.write(`<link rel="stylesheet" href="${item}">`);
|
||||
@ -18,5 +22,6 @@ Vue.config.productionTip = false
|
||||
Vue.use(VueAxios,axios)
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
|
||||
44
src/router/index.js
Executable file
44
src/router/index.js
Executable file
@ -0,0 +1,44 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
// 路由数据
|
||||
import routes from './routes'
|
||||
|
||||
// fix vue-router NavigationDuplicated
|
||||
const VueRouterPush = VueRouter.prototype.push
|
||||
VueRouter.prototype.push = function push (location) {
|
||||
return VueRouterPush.call(this, location).catch(err => err)
|
||||
}
|
||||
const VueRouterReplace = VueRouter.prototype.replace
|
||||
VueRouter.prototype.replace = function replace (location) {
|
||||
return VueRouterReplace.call(this, location).catch(err => err)
|
||||
}
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
// 导出路由 在 main.js 里使用
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
/* scrollBehavior(to,from,savePosition){
|
||||
if(savePosition) {
|
||||
return savePosition;
|
||||
}else{
|
||||
return {x:0,y:0}
|
||||
}
|
||||
}, */
|
||||
routes
|
||||
})
|
||||
|
||||
/**
|
||||
* 路由拦截
|
||||
* 权限验证
|
||||
*/
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
console.log(to)
|
||||
next()
|
||||
})
|
||||
|
||||
router.afterEach(to => {
|
||||
console.log(to)
|
||||
})
|
||||
|
||||
export default router
|
||||
11
src/router/routes.js
Normal file
11
src/router/routes.js
Normal file
@ -0,0 +1,11 @@
|
||||
// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
|
||||
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') },
|
||||
]
|
||||
|
||||
export default frameIn
|
||||
@ -1,101 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Navbar ref="navbar"></Navbar>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<go-headmd :option="headmd" v-show="headmd.display"></go-headmd>
|
||||
<bread-crumb ref="breadcrumb"></bread-crumb>
|
||||
<go-list
|
||||
ref="list"
|
||||
v-on:headmd="setHeadmd"
|
||||
v-on:readmemd="setReadmemd"
|
||||
v-show="show=='list'"
|
||||
></go-list>
|
||||
<hr />
|
||||
<go-readmemd :option="readmemd" v-show="readmemd.display"></go-readmemd>
|
||||
<go-video ref="govideo" v-show="show=='video'"></go-video>
|
||||
<go-text :option="text" v-show="show=='text'"></go-text>
|
||||
<go-img ref="goimg" v-show="show=='img'"></go-img>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "./common/Navbar"
|
||||
import BreadCrumb from "./common/BreadCrumb"
|
||||
import GoVideo from "./page/GoVideo"
|
||||
import Markdown from "./common/Markdown"
|
||||
import GoList from "./page/GoList"
|
||||
import GoText from "./page/GoText"
|
||||
import GoImg from "./page/GoImg"
|
||||
import Footer from "./common/Footer"
|
||||
import { getQueryString } from "@utils/AcrouUtil"
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
path: "",
|
||||
show: "list",
|
||||
text: { file: {}, path: "" },
|
||||
headmd: { display: false, file: {}, path: "" },
|
||||
readmemd: { display: false, file: {}, path: "" },
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Navbar: Navbar,
|
||||
BreadCrumb: BreadCrumb,
|
||||
GoHeadmd: Markdown,
|
||||
GoReadmemd: Markdown,
|
||||
GoList: GoList,
|
||||
GoVideo: GoVideo,
|
||||
GoText: GoText,
|
||||
GoImg: GoImg,
|
||||
Footer: Footer,
|
||||
},
|
||||
methods: {
|
||||
render (config) {
|
||||
let path = config.path;
|
||||
this.$refs.navbar.siteName = config.siteName;
|
||||
this.$refs.breadcrumb.render(path);
|
||||
var param = window.location.search;
|
||||
var reg = /\/\d+:$/g;
|
||||
if (path.match(reg) || param.indexOf("?a=view") < 0) {
|
||||
this.show = "list";
|
||||
this.$refs.list.render(path, getQueryString(param, "q"));
|
||||
} else {
|
||||
var name = path.split("/").pop();
|
||||
var ext = name.split(".").pop().toLowerCase();
|
||||
if (
|
||||
"|html|php|css|go|java|py|js|json|txt|sh|md|".indexOf(`|${ext}|`) >= 0
|
||||
) {
|
||||
this.show = "text";
|
||||
this.text = {
|
||||
path: path,
|
||||
file: {},
|
||||
};
|
||||
}
|
||||
|
||||
if ("|mp4|webm|mkv|".indexOf(`|${ext}|`) >= 0) {
|
||||
this.show = "video";
|
||||
this.$refs.govideo.render(path);
|
||||
}
|
||||
|
||||
if ("|bmp|jpg|jpeg|png|gif|".indexOf(`|${ext}|`) >= 0) {
|
||||
this.show = "img";
|
||||
this.$refs.goimg.render(path);
|
||||
}
|
||||
}
|
||||
},
|
||||
setHeadmd (val) {
|
||||
this.headmd = val;
|
||||
},
|
||||
setReadmemd (val) {
|
||||
this.readmemd = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "~@/assets/style/theme/register.scss";
|
||||
</style>
|
||||
@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<editor
|
||||
ref="myEditor"
|
||||
v-model="content"
|
||||
@init="editorInit"
|
||||
lang="html"
|
||||
theme="chrome"
|
||||
width="100%"
|
||||
height="600"
|
||||
></editor>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { get_file } from "@utils/AcrouUtil"
|
||||
export default {
|
||||
props: {
|
||||
option: {
|
||||
path: "",
|
||||
file: {},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
option () {
|
||||
this.content = "加载中...";
|
||||
get_file(this.option, (data) => {
|
||||
this.content = data;
|
||||
});
|
||||
},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
content: "",
|
||||
};
|
||||
},
|
||||
components: {
|
||||
editor: import('@/components/ace-editor'),
|
||||
},
|
||||
methods: {
|
||||
editorInit (editor) {
|
||||
editor.setFontSize(18)
|
||||
editor.session.setUseWrapMode(false);
|
||||
import("brace/ext/language_tools"); //language extension prerequsite...
|
||||
import("brace/mode/html");
|
||||
import("brace/mode/javascript"); //language
|
||||
import("brace/mode/less");
|
||||
import("brace/theme/chrome");
|
||||
import("brace/snippets/javascript"); //snippet
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
47
src/views/Layout.vue
Normal file
47
src/views/Layout.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<Head></Head>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<bread-crumb ref="breadcrumb"></bread-crumb>
|
||||
<!-- <keep-alive> -->
|
||||
<router-view></router-view>
|
||||
<!-- </keep-alive> -->
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Head from "./common/Head"
|
||||
import BreadCrumb from "./common/BreadCrumb";
|
||||
import Footer from "./common/Footer"
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
path: "",
|
||||
show: "list",
|
||||
text: { file: {}, path: "" },
|
||||
headmd: { display: false, file: {}, path: "" },
|
||||
readmemd: { display: false, file: {}, path: "" },
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Head,
|
||||
BreadCrumb,
|
||||
Footer: Footer,
|
||||
},
|
||||
methods: {
|
||||
setHeadmd (val) {
|
||||
this.headmd = val;
|
||||
},
|
||||
setReadmemd (val) {
|
||||
this.readmemd = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "~@/assets/style/theme/register.scss";
|
||||
</style>
|
||||
@ -7,7 +7,7 @@
|
||||
v-bind:key="index"
|
||||
>
|
||||
<a v-if="(index+1)==navs.length" aria-current="page" href="#">{{item.title}}</a>
|
||||
<a v-else :href="item.path">{{item.title}}</a>
|
||||
<a v-else @click="go(item.path)">{{item.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
@ -21,8 +21,22 @@ export default {
|
||||
index: "/"
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.render();
|
||||
},
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
this.render();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
render(path) {
|
||||
go(path) {
|
||||
this.$router.push({
|
||||
path: path
|
||||
});
|
||||
},
|
||||
render() {
|
||||
let path = window.location.pathname;
|
||||
// 如果是搜索不进行渲染
|
||||
if (path.match("/[0-9]+:search")) {
|
||||
return;
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="content has-text-centered is-fixed-bottom">
|
||||
<footer class="footer">
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control">
|
||||
@ -16,23 +16,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
data: function () {
|
||||
props: {},
|
||||
watch: {},
|
||||
data: function() {
|
||||
return {
|
||||
content: "",
|
||||
content: ""
|
||||
};
|
||||
},
|
||||
components: {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
components: {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
19
src/views/common/Head.vue
Normal file
19
src/views/common/Head.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
<Navbar ref="navbar"></Navbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "./Navbar";
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {};
|
||||
},
|
||||
methods: {},
|
||||
components: {
|
||||
Navbar
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -3,38 +3,44 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { get_file } from "@utils/AcrouUtil"
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import { get_file } from "@utils/AcrouUtil";
|
||||
import MarkdownIt from "markdown-it";
|
||||
export default {
|
||||
props: {
|
||||
option: {},
|
||||
option: {}
|
||||
},
|
||||
watch: {
|
||||
option () {
|
||||
this.render()
|
||||
},
|
||||
option() {
|
||||
this.render();
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
data: function() {
|
||||
return {
|
||||
content: `
|
||||
content: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
defaultContent() {
|
||||
return `
|
||||
<center>
|
||||
<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
|
||||
<span class="sr-only">Loading...</span>
|
||||
</center>
|
||||
`,
|
||||
};
|
||||
`
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
render () {
|
||||
const md = new MarkdownIt()
|
||||
render() {
|
||||
this.content = this.defaultContent
|
||||
const md = new MarkdownIt();
|
||||
// if (window.md == undefined) {
|
||||
// window.md = window.markdownit();
|
||||
// }
|
||||
get_file(this.option, (data) => {
|
||||
get_file(this.option, data => {
|
||||
this.content = md.render(data);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -86,6 +86,9 @@ export default {
|
||||
this.param = window.MODEL.q ? window.MODEL.q : "";
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.siteName = document.getElementsByTagName("title")[0].innerText;
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
siteName: "",
|
||||
@ -103,8 +106,11 @@ export default {
|
||||
},
|
||||
query() {
|
||||
if (this.param) {
|
||||
location.href =
|
||||
this.currgd.id.match("/[0-9]+:") + "search?q=" + this.param;
|
||||
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() {
|
||||
@ -18,13 +18,19 @@ export default {
|
||||
display: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
let path = window.location.pathname;
|
||||
// 便于开发环境调试
|
||||
path = process.env.NODE_ENV === "development" ? "/api" + path : "";
|
||||
this.imgurl = path;
|
||||
},
|
||||
methods: {
|
||||
render(path) {
|
||||
this.imgurl = path;
|
||||
},
|
||||
// render(path) {
|
||||
// this.imgurl = path;
|
||||
// },
|
||||
loading(event) {
|
||||
if (event.target.complete == true) {
|
||||
this.display = true
|
||||
this.display = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,52 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<progress
|
||||
v-if="loading"
|
||||
class="progress is-small is-primary"
|
||||
style="height: .25rem;"
|
||||
max="100"
|
||||
>15%</progress>
|
||||
<table class="table is-hoverable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
v-for="(column,index) in columns"
|
||||
v-bind:key="index"
|
||||
:class="column.class"
|
||||
:style="column.style"
|
||||
>{{column.name}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(file,index) in files" v-bind:key="index">
|
||||
<td @click="go(file.path)">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use :xlink:href="getIcon(file.mimeType)" />
|
||||
</svg>
|
||||
{{file.name}}
|
||||
</td>
|
||||
<td class="is-hidden-mobile is-hidden-touch">{{file.modifiedTime}}</td>
|
||||
<td class="is-hidden-mobile is-hidden-touch">{{file.size}}</td>
|
||||
<td
|
||||
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" 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>
|
||||
<headmd :option="headmd" v-show="headmd.display"></headmd>
|
||||
<div class="golist">
|
||||
<table class="table is-hoverable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
v-for="(column,index) in columns"
|
||||
v-bind:key="index"
|
||||
:class="column.class"
|
||||
:style="column.style"
|
||||
>{{column.name}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(file,index) in files" v-bind:key="index">
|
||||
<td @click="go(file)">
|
||||
<svg class="iconfont" aria-hidden="true">
|
||||
<use :xlink:href="getIcon(file.mimeType)" />
|
||||
</svg>
|
||||
{{file.name}}
|
||||
</td>
|
||||
<td class="is-hidden-mobile is-hidden-touch">{{file.modifiedTime}}</td>
|
||||
<td class="is-hidden-mobile is-hidden-touch">{{file.size}}</td>
|
||||
<td
|
||||
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" @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')"
|
||||
></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-show="files.length==0" class="has-text-centered no-content"></div>
|
||||
<div v-show="loading" class="pageloader is-active">
|
||||
<span class="title">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<readmemd :option="readmemd" v-show="readmemd.display"></readmemd>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { utc2beijing, formatFileSize } from "@utils/AcrouUtil";
|
||||
import Markdown from "../common/Markdown";
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
@ -55,7 +65,7 @@ export default {
|
||||
page_index: 0
|
||||
},
|
||||
files: [],
|
||||
loading: false,
|
||||
loading: true,
|
||||
columns: [
|
||||
{ name: "文件", style: "" },
|
||||
{
|
||||
@ -70,7 +80,7 @@ export default {
|
||||
},
|
||||
{
|
||||
name: "下载",
|
||||
style: "width:6%",
|
||||
style: "width:10%",
|
||||
class: "is-hidden-mobile is-hidden-touch"
|
||||
}
|
||||
],
|
||||
@ -93,19 +103,32 @@ export default {
|
||||
"application/pdf": "icon-pdf",
|
||||
"application/json": "icon-JSON1",
|
||||
"application/x-yaml": "icon-YML",
|
||||
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": "icon-word",
|
||||
"application/vnd.openxmlformats-officedocument.wordprocessingml.document":
|
||||
"icon-word",
|
||||
"image/bmp": "icon-img",
|
||||
"image/jpeg": "icon-img",
|
||||
"image/png": "icon-img"
|
||||
}
|
||||
},
|
||||
headmd: { display: false, file: {}, path: "" },
|
||||
readmemd: { display: false, file: {}, path: "" }
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Headmd: Markdown,
|
||||
Readmemd: Markdown
|
||||
},
|
||||
mounted() {
|
||||
this.render();
|
||||
},
|
||||
methods: {
|
||||
render(path, param) {
|
||||
render() {
|
||||
let path = window.location.pathname;
|
||||
this.loading = true;
|
||||
var password = localStorage.getItem("password" + path);
|
||||
// var param = window.location.search;
|
||||
let q = this.$route.query.q;
|
||||
var p = {
|
||||
q: param,
|
||||
q: q ? decodeURIComponent(q) : "",
|
||||
password: password || null,
|
||||
...this.page
|
||||
};
|
||||
@ -151,19 +174,19 @@ export default {
|
||||
var p = path + item.name;
|
||||
// HEAD.md
|
||||
if (item.name === "HEAD.md") {
|
||||
this.$emit("headmd", {
|
||||
this.headmd = {
|
||||
display: true,
|
||||
file: item,
|
||||
path: p
|
||||
});
|
||||
};
|
||||
}
|
||||
// REDEME.md
|
||||
if (item.name === "README.md") {
|
||||
this.$emit("readmemd", {
|
||||
this.readmemd = {
|
||||
display: true,
|
||||
file: item,
|
||||
path: p
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
var ext = p.split(".").pop();
|
||||
@ -204,15 +227,38 @@ export default {
|
||||
// path = path.replace("?a=view", "");
|
||||
// // TODO
|
||||
// },
|
||||
go(path, type = "view") {
|
||||
if (type === "down") {
|
||||
path = path.replace("?a=view", "");
|
||||
go(file, target) {
|
||||
let path = file.path;
|
||||
let cmd = this.$route.params.cmd || "";
|
||||
if (cmd === "search") {
|
||||
this.$refs.goSearchResult.go(file, target);
|
||||
return;
|
||||
}
|
||||
if (target === "down") {
|
||||
path = path.replace("?a=view", "");
|
||||
window.open(path)
|
||||
return;
|
||||
}
|
||||
if(target === '_blank'){
|
||||
window.open(path)
|
||||
}else{
|
||||
this.$router.push({
|
||||
path: path
|
||||
});
|
||||
}
|
||||
location.href = path;
|
||||
},
|
||||
getIcon(type) {
|
||||
return "#" + (this.icon[type] ? this.icon[type] : "icon-weizhi");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
// 后退设置page_token为空
|
||||
if (to.path.length < from.path.length) {
|
||||
this.page.page_token = null;
|
||||
}
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
11
src/views/page/GoRouter.vue
Normal file
11
src/views/page/GoRouter.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="card">324567</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
72
src/views/page/GoText.vue
Normal file
72
src/views/page/GoText.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<editor
|
||||
ref="myEditor"
|
||||
v-model="content"
|
||||
@init="editorInit"
|
||||
lang="html"
|
||||
theme="chrome"
|
||||
width="100%"
|
||||
height="600"
|
||||
></editor>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { get_file } from "@utils/AcrouUtil"
|
||||
export default {
|
||||
// props: {
|
||||
// option: {
|
||||
// path: "",
|
||||
// file: {},
|
||||
// },
|
||||
// },
|
||||
// watch: {
|
||||
// option () {
|
||||
// this.content = "加载中...";
|
||||
// get_file(this.option, (data) => {
|
||||
// this.content = data;
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
data: function () {
|
||||
return {
|
||||
path: "",
|
||||
content: ""
|
||||
};
|
||||
},
|
||||
// watch: {
|
||||
// '$route' (to, from) {
|
||||
// this.content = "加载中...";
|
||||
// get_file({path: to.replace('?a=view','/'),file: {}}, (data) => {
|
||||
// this.content = data;
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
created() {
|
||||
this.render()
|
||||
},
|
||||
components: {
|
||||
editor: require('@/components/ace-editor'),
|
||||
},
|
||||
methods: {
|
||||
render() {
|
||||
let path = window.location.pathname
|
||||
this.content = "加载中...";
|
||||
get_file({path: path.replace('?a=view','/'),file: {}}, (data) => {
|
||||
this.content = data;
|
||||
});
|
||||
},
|
||||
editorInit (editor) {
|
||||
editor.setFontSize(18)
|
||||
editor.session.setUseWrapMode(false);
|
||||
require("brace/ext/language_tools"); //language extension prerequsite...
|
||||
require("brace/mode/html");
|
||||
require("brace/mode/javascript"); //language
|
||||
require("brace/mode/less");
|
||||
require("brace/theme/chrome");
|
||||
require("brace/snippets/javascript"); //snippet
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -76,11 +76,16 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
render (path) {
|
||||
this.videourl = window.location.origin + path;
|
||||
this.apiurl =
|
||||
"https://api.jsonpop.cn/demo/blplyaer/?url=" + this.videourl;
|
||||
},
|
||||
// render (path) {
|
||||
// this.videourl = window.location.origin + path;
|
||||
// this.apiurl =
|
||||
// "https://api.jsonpop.cn/demo/blplyaer/?url=" + this.videourl;
|
||||
// },
|
||||
},
|
||||
mounted() {
|
||||
// 便于开发环境调试
|
||||
this.videourl = window.location.origin + window.location.pathname;
|
||||
this.apiurl = "https://api.jsonpop.cn/demo/blplyaer/?url=" + this.videourl;
|
||||
},
|
||||
computed: {
|
||||
getThunder () {
|
||||
131
vue.config.js
131
vue.config.js
@ -1,5 +1,4 @@
|
||||
const path = require("path");
|
||||
const fs = require('fs')
|
||||
const cdnDependencies = require('./dependencies-cdn')
|
||||
|
||||
function resolve(dir) {
|
||||
@ -25,136 +24,6 @@ module.exports = {
|
||||
const configNew = {}
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
configNew.externals = externals
|
||||
config.plugins.push({
|
||||
apply: (compiler) => {
|
||||
compiler.hooks.done.tap('JSWebpackPluginHooks', compilation => {
|
||||
// console.log(compilation.assetsInfo)
|
||||
const chunkOnlyConfig = {
|
||||
assets: false,
|
||||
cached: false,
|
||||
children: false,
|
||||
chunks: true,
|
||||
chunkModules: false,
|
||||
chunkOrigins: false,
|
||||
errorDetails: false,
|
||||
hash: false,
|
||||
modules: false,
|
||||
reasons: false,
|
||||
source: false,
|
||||
timings: false,
|
||||
version: false
|
||||
};
|
||||
const allChunks = compilation.toJson(chunkOnlyConfig).chunks;
|
||||
// console.log(JSON.stringify(allChunks))
|
||||
let chunks = filterChunks(allChunks, 'all', []);
|
||||
const assets = htmlWebpackPluginAssets(compilation, chunks);
|
||||
function filterChunks (chunks, includedChunks, excludedChunks) {
|
||||
return chunks.filter(chunk => {
|
||||
const chunkName = chunk.names[0];
|
||||
// This chunk doesn't have a name. This script can't handled it.
|
||||
if (chunkName === undefined) {
|
||||
return false;
|
||||
}
|
||||
// Skip if the chunk should be lazy loaded
|
||||
if (typeof chunk.isInitial === 'function') {
|
||||
if (!chunk.isInitial()) {
|
||||
return false;
|
||||
}
|
||||
} else if (!chunk.initial) {
|
||||
return false;
|
||||
}
|
||||
// Skip if the chunks should be filtered and the given chunk was not added explicity
|
||||
if (Array.isArray(includedChunks) && includedChunks.indexOf(chunkName) === -1) {
|
||||
return false;
|
||||
}
|
||||
// Skip if the chunks should be filtered and the given chunk was excluded explicity
|
||||
if (Array.isArray(excludedChunks) && excludedChunks.indexOf(chunkName) !== -1) {
|
||||
return false;
|
||||
}
|
||||
// Add otherwise
|
||||
return true;
|
||||
});
|
||||
}
|
||||
function htmlWebpackPluginAssets (compilation, chunks) {
|
||||
const self = this;
|
||||
const compilationHash = compilation.hash;
|
||||
|
||||
// Use the configured public path or build a relative path
|
||||
let publicPath = typeof compilation.options.output.publicPath !== 'undefined'
|
||||
// If a hard coded public path exists use it
|
||||
? compilation.mainTemplate.getPublicPath({hash: compilationHash})
|
||||
// If no public path was set get a relative url path
|
||||
: path.relative(path.resolve(compilation.options.output.path, path.dirname(self.childCompilationOutputName)), compilation.options.output.path)
|
||||
.split(path.sep).join('/');
|
||||
|
||||
if (publicPath.length && publicPath.substr(-1, 1) !== '/') {
|
||||
publicPath += '/';
|
||||
}
|
||||
|
||||
const assets = {
|
||||
// The public path
|
||||
publicPath: publicPath,
|
||||
// Will contain all js & css files by chunk
|
||||
chunks: {},
|
||||
// Will contain all js files
|
||||
js: [],
|
||||
// Will contain all css files
|
||||
css: [],
|
||||
// Will contain the html5 appcache manifest files if it exists
|
||||
manifest: Object.keys(compilation.assets).filter(assetFile => path.extname(assetFile) === '.appcache')[0]
|
||||
};
|
||||
|
||||
// Append a hash for cache busting
|
||||
if (this.options.hash) {
|
||||
assets.manifest = self.appendHash(assets.manifest, compilationHash);
|
||||
assets.favicon = self.appendHash(assets.favicon, compilationHash);
|
||||
}
|
||||
|
||||
for (let i = 0; i < chunks.length; i++) {
|
||||
const chunk = chunks[i];
|
||||
const chunkName = chunk.names[0];
|
||||
|
||||
assets.chunks[chunkName] = {};
|
||||
|
||||
// Prepend the public path to all chunk files
|
||||
let chunkFiles = [].concat(chunk.files).map(chunkFile => publicPath + chunkFile);
|
||||
|
||||
// Append a hash for cache busting
|
||||
if (this.options.hash) {
|
||||
chunkFiles = chunkFiles.map(chunkFile => self.appendHash(chunkFile, compilationHash));
|
||||
}
|
||||
|
||||
// Webpack outputs an array for each chunk when using sourcemaps
|
||||
// or when one chunk hosts js and css simultaneously
|
||||
const js = chunkFiles.find(chunkFile => /.js($|\?)/.test(chunkFile));
|
||||
if (js) {
|
||||
assets.chunks[chunkName].size = chunk.size;
|
||||
assets.chunks[chunkName].entry = js;
|
||||
assets.chunks[chunkName].hash = chunk.hash;
|
||||
assets.js.push(js);
|
||||
}
|
||||
|
||||
// Gather all css files
|
||||
const css = chunkFiles.filter(chunkFile => /.css($|\?)/.test(chunkFile));
|
||||
assets.chunks[chunkName].css = css;
|
||||
assets.css = assets.css.concat(css);
|
||||
}
|
||||
|
||||
// Duplicate css assets can occur on occasion if more than one chunk
|
||||
// requires the same css.
|
||||
assets.css = _.uniq(assets.css);
|
||||
|
||||
return assets;
|
||||
}
|
||||
fs.writeFile(path.resolve('dist/app.js'),JSON.stringify(assets),function(err){
|
||||
if(err){
|
||||
return console.log(err)
|
||||
}
|
||||
console.log("Success")
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
return configNew
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user