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

替换grid view 视频文件的icon ，修复图片点击不能定位到该图

Browse Source
This commit is contained in:
qxz 2020-05-19 18:10:44 +08:00
parent d015fe2d3f
commit a9fddbfa9e
7 changed files with 81 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
buildAppJSPlugin.js
View File

@ -17,14 +17,12 @@ class BuildAppJSPlugin {
// 遍历所有编译过的资源文件， // 遍历所有编译过的资源文件，
// 对于每个文件名称，都添加一行内容。 // 对于每个文件名称，都添加一行内容。
for (let filename in compilation.assets) { for (let filename in compilation.assets) {
if (process.env.NODE_ENV === "production") {
filename = (process.env.VUE_APP_PUBLIC_PATH || "/") + filename;
} else {
filename = "/" + filename;
}
// filename = "/" + filename;
if (filename.match(".*\\.js$")) { if (filename.match(".*\\.js$")) {
if (process.env.NODE_ENV === "production") {
filename = (process.env.VUE_APP_PUBLIC_PATH || "/") + filename;
} else {
filename = "/" + filename;
}
jsarr.push(filename); jsarr.push(filename);
} }
if (filename.match(".*\\.css$")) { if (filename.match(".*\\.css$")) {
@ -47,33 +45,32 @@ class BuildAppJSPlugin {
.map((e) => e.css)); .map((e) => e.css));
} }
let content = ` let content = `
var styles = ${JSON.stringify(cssarr)};
var scripts = ${JSON.stringify(jsarr)}; var scripts = ${JSON.stringify(jsarr)};
${cdnjs} ${cdnjs}
document.write('<div id="app"></div>');
var title = document.getElementsByTagName('title')
styles.forEach((item) => {
let link = document.createElement('link');
link.href=item;
link.rel = 'preload';
link.as = 'style';
title[0].parentNode.insertBefore(link,title[0])
link = document.createElement('link');
link.href=item;
link.rel = 'stylesheet';
title[0].parentNode.insertBefore(link,title[0])
});
scripts.forEach((item) => { scripts.forEach((item) => {
document.write('<script src="' + item + '"></script>'); document.write('<script src="' + item + '"></script>');
}); });
`; `;
let cssContent = ''
cssarr.forEach(item=>{
cssContent += `@import url(${item});\n`
})
// 将这个列表作为一个新的文件资源，插入到 webpack 构建中： // 将这个列表作为一个新的文件资源，插入到 webpack 构建中：
compilation.assets["app.js"] = { compilation.assets["app.js"] = {
source: function() { source: function() {
return content; return content;
}, },
size: function() { size: function() {
return cssarr.length + jsarr.length; return jsarr.length;
},
};
compilation.assets["style.css"] = {
source: function() {
return cssContent;
},
size: function() {
return cssarr.length;
}, },
}; };

2
dependencies-cdn.js
View File

@ -18,7 +18,7 @@ module.exports = [
// { name: 'brace/snippets/javascript', library: 'javascript', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/snippets/javascript.js', css: '' }, // { name: 'brace/snippets/javascript', library: 'javascript', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/snippets/javascript.js', css: '' },
// { name: 'vue2-ace-editor', library: 'Vue2ACEEditor', js: 'https://cdn.jsdelivr.net/npm/vue2-ace-editor@0.0.15/index.min.js', css: '' }, // { name: 'vue2-ace-editor', library: 'Vue2ACEEditor', js: 'https://cdn.jsdelivr.net/npm/vue2-ace-editor@0.0.15/index.min.js', css: '' },
{ name: 'markdown-it', library: 'markdownit', js: 'https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js', css: '' }, { name: 'markdown-it', library: 'markdownit', js: 'https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js', css: '' },
{ name: '', library: '', js: 'https://at.alicdn.com/t/font_1760192_zf96psu0uo.js', css: '' }, { name: '', library: '', js: 'https://at.alicdn.com/t/font_1760192_axq33n6snd.js', css: '' },
{ name: '', library: '', js: '', css: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css' }, { name: '', library: '', js: '', css: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css' },
{ name: '', library: '', js: '', css: 'https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css' }, { name: '', library: '', js: '', css: 'https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css' },
{ name: '', library: '', js: '', css: 'https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css' }, { name: '', library: '', js: '', css: 'https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css' },

4
public/index.html
View File

@ -43,11 +43,11 @@
<% 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>
</head> </head>
<body> <body>
<div id="app"></div>
<script src="/app.js"></script>
</body> </body>
</html> </html>

10
src/assets/style/theme/acrou/index.scss
View File

@ -1,3 +1,13 @@
@font-face {
font-family: 'iconfont'; /* project id 1760192 */
src: url('//at.alicdn.com/t/font_1760192_tl9awsq3di.eot');
src: url('//at.alicdn.com/t/font_1760192_tl9awsq3di.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1760192_tl9awsq3di.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1760192_tl9awsq3di.woff') format('woff'),
url('//at.alicdn.com/t/font_1760192_tl9awsq3di.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1760192_tl9awsq3di.svg#iconfont') format('svg');
}
body { body {
overflow: hidden; overflow: hidden;
} }

2
src/main.js
View File

@ -17,6 +17,8 @@ import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css' import 'viewerjs/dist/viewer.css'
import "@/assets/style/theme/register.scss" import "@/assets/style/theme/register.scss"
document.write(`<script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?b5880d23c0d350f0a4c8ac671320847e";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();</script>`);
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(ElementUI) Vue.use(ElementUI)
Vue.use(VueAxios,axios) Vue.use(VueAxios,axios)

46
src/views/page/GoList.vue
View File

@ -8,13 +8,7 @@
infinite-scroll-disabled="busy" infinite-scroll-disabled="busy"
infinite-scroll-distance="10" infinite-scroll-distance="10"
> >
<list-view <list-view :data="buildFiles" v-if="mode === 'list'" :icons="getIcon" :go="go" :copy="copy" />
:data="buildFiles"
v-if="mode === 'list'"
:icons="getIcon"
:go="go"
:copy="copy"
/>
<grid-view <grid-view
class="g2-content" class="g2-content"
:data="buildFiles" :data="buildFiles"
@ -23,10 +17,7 @@
:go="go" :go="go"
:thum="thum" :thum="thum"
/> />
<div <div v-show="files.length === 0" class="has-text-centered no-content"></div>
v-show="files.length === 0"
class="has-text-centered no-content"
></div>
<center> <center>
<div :class="!busy ? 'is-hidden' : ''"> <div :class="!busy ? 'is-hidden' : ''">
<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i> <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
@ -34,7 +25,7 @@
</div> </div>
<!-- <span v-if="page.page_token === null && files.length !== 0" class="tag"> <!-- <span v-if="page.page_token === null && files.length !== 0" class="tag">
{{ $t("list.total") }} {{ files.length }} {{ $t("list.item") }} {{ $t("list.total") }} {{ files.length }} {{ $t("list.item") }}
</span> --> </span>-->
</center> </center>
</div> </div>
<div class="is-divider" :data-content="$t('list.total')+' '+files.length+' ' + $t('list.item')"></div> <div class="is-divider" :data-content="$t('list.total')+' '+files.length+' ' + $t('list.item')"></div>
@ -80,7 +71,7 @@ export default {
Headmd: Markdown, Headmd: Markdown,
Readmemd: Markdown, Readmemd: Markdown,
}, },
data: function() { data: function () {
return { return {
busy: false, busy: false,
page: { page: {
@ -121,7 +112,7 @@ export default {
}, },
computed: { computed: {
...mapState("acrou/view", ["mode"]), ...mapState("acrou/view", ["mode"]),
buildFiles() { buildFiles () {
var path = this.$route.path; var path = this.$route.path;
return this.files return this.files
.map((item) => { .map((item) => {
@ -143,22 +134,22 @@ export default {
return a.isFolder ? -1 : 1; return a.isFolder ? -1 : 1;
}); });
}, },
images() { images () {
return this.buildFiles.filter( return this.buildFiles.filter(
(file) => file.mimeType.indexOf("image") != -1 (file) => file.mimeType.indexOf("image") != -1
); );
}, },
}, },
created() { created () {
this.render(); this.render();
}, },
methods: { methods: {
pageLoad() { pageLoad () {
if (!this.page.page_token) return; if (!this.page.page_token) return;
this.page.page_index++; this.page.page_index++;
this.render("scroll"); this.render("scroll");
}, },
render(scroll) { render (scroll) {
if (scroll) { if (scroll) {
this.busy = true; this.busy = true;
} else { } else {
@ -210,7 +201,7 @@ export default {
this.$router.go(-1); this.$router.go(-1);
}); });
}, },
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 != "") {
@ -219,7 +210,7 @@ export default {
this.$router.go(-1); this.$router.go(-1);
} }
}, },
copy(path) { copy (path) {
let origin = window.location.origin; let origin = window.location.origin;
path = origin + encodeURI(path); path = origin + encodeURI(path);
this.$copyText(path) this.$copyText(path)
@ -237,17 +228,18 @@ export default {
}); });
}); });
}, },
thum(url) { thum (url) {
return url ? `/${this.$route.params.id}:view?url=${url}` : ""; return url ? `/${this.$route.params.id}:view?url=${url}` : "";
}, },
inited(viewer) { inited (viewer) {
this.$viewer = viewer; this.$viewer = viewer;
}, },
go(file, target) { go (file, target) {
if (file.mimeType.indexOf("image") != -1) { if (file.mimeType.indexOf("image") != -1) {
this.viewer = true; this.viewer = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$viewer.show(); let index = this.images.findIndex(item => item.path === file.path)
this.$viewer.view(index);
}); });
return; return;
} }
@ -279,7 +271,7 @@ export default {
return; return;
} }
}, },
renderMd(files, path) { renderMd (files, path) {
var cmd = this.$route.params.cmd; var cmd = this.$route.params.cmd;
if (cmd) { if (cmd) {
return; return;
@ -303,7 +295,7 @@ export default {
} }
}); });
}, },
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
@ -328,7 +320,7 @@ 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");
}, },
}, },

40
src/views/page/components/grid/index.vue
View File

@ -35,12 +35,9 @@
: '') : '')
" "
> >
<i></i>
<figure class="image is-square"> <figure class="image is-square">
<img <img v-if="file.thumbnailLink" v-lazy="thum(file.thumbnailLink)" :alt="file.name" />
v-if="file.thumbnailLink"
v-lazy="thum(file.thumbnailLink)"
:alt="file.name"
/>
</figure> </figure>
</div> </div>
<div class="media g2-grid-view-file"> <div class="media g2-grid-view-file">
@ -75,14 +72,14 @@ export default {
type: Function, type: Function,
}, },
}, },
data: function() { data: function () {
return {}; return {};
}, },
computed: { computed: {
folders() { folders () {
return this.data.filter((item) => item.isFolder); return this.data.filter((item) => item.isFolder);
}, },
files() { files () {
return this.data.filter((item) => !item.isFolder); return this.data.filter((item) => !item.isFolder);
}, },
}, },
@ -129,16 +126,35 @@ export default {
.g2-grid-view-play { .g2-grid-view-play {
&:before { &:before {
z-index: 10; z-index: 10;
background-image: url("https://cloud.jsonpop.cn/go2index/vue/play.png");
background-repeat: no-repeat;
background-position: center;
background-size: 50px;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
content: ""; content: "";
background: rgba(0, 0, 0, 0.15);
opacity: 1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000);
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
i {
font-style: normal;
}
i:before {
z-index: 10;
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
height: 0;
color: hsla(0, 0%, 100%, 0.67);
content: "\e6f6";
font-size: 3rem;
font-family: iconfont !important;
line-height: 0;
} }
} }
.iconfont { .iconfont {