替换grid view 视频文件的icon ，修复图片点击不能定位到该图
This commit is contained in:
qxz
parent
d015fe2d3f
commit
a9fddbfa9e
@ -17,14 +17,12 @@ class BuildAppJSPlugin {
|
||||
// 遍历所有编译过的资源文件，
|
||||
// 对于每个文件名称，都添加一行内容。
|
||||
for (let filename in compilation.assets) {
|
||||
if (filename.match(".*\\.js$")) {
|
||||
if (process.env.NODE_ENV === "production") {
|
||||
filename = (process.env.VUE_APP_PUBLIC_PATH || "/") + filename;
|
||||
} else {
|
||||
filename = "/" + filename;
|
||||
}
|
||||
// filename = "/" + filename;
|
||||
|
||||
if (filename.match(".*\\.js$")) {
|
||||
jsarr.push(filename);
|
||||
}
|
||||
if (filename.match(".*\\.css$")) {
|
||||
@ -47,33 +45,32 @@ class BuildAppJSPlugin {
|
||||
.map((e) => e.css));
|
||||
}
|
||||
let content = `
|
||||
var styles = ${JSON.stringify(cssarr)};
|
||||
var scripts = ${JSON.stringify(jsarr)};
|
||||
${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) => {
|
||||
document.write('<script src="' + item + '"></script>');
|
||||
});
|
||||
`;
|
||||
let cssContent = ''
|
||||
cssarr.forEach(item=>{
|
||||
cssContent += `@import url(${item});\n`
|
||||
})
|
||||
// 将这个列表作为一个新的文件资源，插入到 webpack 构建中：
|
||||
compilation.assets["app.js"] = {
|
||||
source: function() {
|
||||
return content;
|
||||
},
|
||||
size: function() {
|
||||
return cssarr.length + jsarr.length;
|
||||
return jsarr.length;
|
||||
},
|
||||
};
|
||||
|
||||
compilation.assets["style.css"] = {
|
||||
source: function() {
|
||||
return cssContent;
|
||||
},
|
||||
size: function() {
|
||||
return cssarr.length;
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -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: '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: '', 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://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' },
|
||||
|
||||
@ -43,11 +43,11 @@
|
||||
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
|
||||
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
|
||||
<% } %>
|
||||
<script src="/app.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="app"></div>
|
||||
<script src="/app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -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 {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -17,6 +17,8 @@ import Viewer from 'v-viewer'
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
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.use(ElementUI)
|
||||
Vue.use(VueAxios,axios)
|
||||
|
||||
@ -8,13 +8,7 @@
|
||||
infinite-scroll-disabled="busy"
|
||||
infinite-scroll-distance="10"
|
||||
>
|
||||
<list-view
|
||||
:data="buildFiles"
|
||||
v-if="mode === 'list'"
|
||||
:icons="getIcon"
|
||||
:go="go"
|
||||
:copy="copy"
|
||||
/>
|
||||
<list-view :data="buildFiles" v-if="mode === 'list'" :icons="getIcon" :go="go" :copy="copy" />
|
||||
<grid-view
|
||||
class="g2-content"
|
||||
:data="buildFiles"
|
||||
@ -23,10 +17,7 @@
|
||||
:go="go"
|
||||
:thum="thum"
|
||||
/>
|
||||
<div
|
||||
v-show="files.length === 0"
|
||||
class="has-text-centered no-content"
|
||||
></div>
|
||||
<div v-show="files.length === 0" class="has-text-centered no-content"></div>
|
||||
<center>
|
||||
<div :class="!busy ? 'is-hidden' : ''">
|
||||
<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
|
||||
@ -34,7 +25,7 @@
|
||||
</div>
|
||||
<!-- <span v-if="page.page_token === null && files.length !== 0" class="tag">
|
||||
{{ $t("list.total") }} {{ files.length }} {{ $t("list.item") }}
|
||||
</span> -->
|
||||
</span>-->
|
||||
</center>
|
||||
</div>
|
||||
<div class="is-divider" :data-content="$t('list.total')+' '+files.length+' ' + $t('list.item')"></div>
|
||||
@ -80,7 +71,7 @@ export default {
|
||||
Headmd: Markdown,
|
||||
Readmemd: Markdown,
|
||||
},
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
busy: false,
|
||||
page: {
|
||||
@ -121,7 +112,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapState("acrou/view", ["mode"]),
|
||||
buildFiles() {
|
||||
buildFiles () {
|
||||
var path = this.$route.path;
|
||||
return this.files
|
||||
.map((item) => {
|
||||
@ -143,22 +134,22 @@ export default {
|
||||
return a.isFolder ? -1 : 1;
|
||||
});
|
||||
},
|
||||
images() {
|
||||
images () {
|
||||
return this.buildFiles.filter(
|
||||
(file) => file.mimeType.indexOf("image") != -1
|
||||
);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
created () {
|
||||
this.render();
|
||||
},
|
||||
methods: {
|
||||
pageLoad() {
|
||||
pageLoad () {
|
||||
if (!this.page.page_token) return;
|
||||
this.page.page_index++;
|
||||
this.render("scroll");
|
||||
},
|
||||
render(scroll) {
|
||||
render (scroll) {
|
||||
if (scroll) {
|
||||
this.busy = true;
|
||||
} else {
|
||||
@ -210,7 +201,7 @@ export default {
|
||||
this.$router.go(-1);
|
||||
});
|
||||
},
|
||||
checkPassword(path) {
|
||||
checkPassword (path) {
|
||||
var pass = prompt(this.$t("list.auth"), "");
|
||||
localStorage.setItem("password" + path, pass);
|
||||
if (pass != null && pass != "") {
|
||||
@ -219,7 +210,7 @@ export default {
|
||||
this.$router.go(-1);
|
||||
}
|
||||
},
|
||||
copy(path) {
|
||||
copy (path) {
|
||||
let origin = window.location.origin;
|
||||
path = origin + encodeURI(path);
|
||||
this.$copyText(path)
|
||||
@ -237,17 +228,18 @@ export default {
|
||||
});
|
||||
});
|
||||
},
|
||||
thum(url) {
|
||||
thum (url) {
|
||||
return url ? `/${this.$route.params.id}:view?url=${url}` : "";
|
||||
},
|
||||
inited(viewer) {
|
||||
inited (viewer) {
|
||||
this.$viewer = viewer;
|
||||
},
|
||||
go(file, target) {
|
||||
go (file, target) {
|
||||
if (file.mimeType.indexOf("image") != -1) {
|
||||
this.viewer = true;
|
||||
this.$nextTick(() => {
|
||||
this.$viewer.show();
|
||||
let index = this.images.findIndex(item => item.path === file.path)
|
||||
this.$viewer.view(index);
|
||||
});
|
||||
return;
|
||||
}
|
||||
@ -279,7 +271,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
},
|
||||
renderMd(files, path) {
|
||||
renderMd (files, path) {
|
||||
var cmd = this.$route.params.cmd;
|
||||
if (cmd) {
|
||||
return;
|
||||
@ -303,7 +295,7 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
goSearchResult(file, target) {
|
||||
goSearchResult (file, target) {
|
||||
this.loading = true;
|
||||
let cur = window.current_drive_order;
|
||||
axios
|
||||
@ -328,7 +320,7 @@ export default {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
getIcon(type) {
|
||||
getIcon (type) {
|
||||
return "#" + (this.icon[type] ? this.icon[type] : "icon-weizhi");
|
||||
},
|
||||
},
|
||||
|
||||
@ -35,12 +35,9 @@
|
||||
: '')
|
||||
"
|
||||
>
|
||||
<i></i>
|
||||
<figure class="image is-square">
|
||||
<img
|
||||
v-if="file.thumbnailLink"
|
||||
v-lazy="thum(file.thumbnailLink)"
|
||||
:alt="file.name"
|
||||
/>
|
||||
<img v-if="file.thumbnailLink" v-lazy="thum(file.thumbnailLink)" :alt="file.name" />
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media g2-grid-view-file">
|
||||
@ -75,14 +72,14 @@ export default {
|
||||
type: Function,
|
||||
},
|
||||
},
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
folders() {
|
||||
folders () {
|
||||
return this.data.filter((item) => item.isFolder);
|
||||
},
|
||||
files() {
|
||||
files () {
|
||||
return this.data.filter((item) => !item.isFolder);
|
||||
},
|
||||
},
|
||||
@ -129,16 +126,35 @@ export default {
|
||||
.g2-grid-view-play {
|
||||
&:before {
|
||||
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;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user