From a9fddbfa9ed840248a629c2509b0901264ac7dbb Mon Sep 17 00:00:00 2001 From: qxz Date: Tue, 19 May 2020 18:10:44 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=BF=E6=8D=A2grid=20view=20=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E6=96=87=E4=BB=B6=E7=9A=84icon=20=EF=BC=8C=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E5=9B=BE=E7=89=87=E7=82=B9=E5=87=BB=E4=B8=8D=E8=83=BD?= =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E5=88=B0=E8=AF=A5=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- buildAppJSPlugin.js | 41 ++++++++++----------- dependencies-cdn.js | 2 +- public/index.html | 4 +-- src/assets/style/theme/acrou/index.scss | 10 ++++++ src/main.js | 2 ++ src/views/page/GoList.vue | 46 ++++++++++-------------- src/views/page/components/grid/index.vue | 40 ++++++++++++++------- 7 files changed, 81 insertions(+), 64 deletions(-) diff --git a/buildAppJSPlugin.js b/buildAppJSPlugin.js index 794db82..3577af7 100644 --- a/buildAppJSPlugin.js +++ b/buildAppJSPlugin.js @@ -17,14 +17,12 @@ class BuildAppJSPlugin { // 遍历所有编译过的资源文件， // 对于每个文件名称，都添加一行内容。 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 (process.env.NODE_ENV === "production") { + filename = (process.env.VUE_APP_PUBLIC_PATH || "/") + filename; + } else { + filename = "/" + filename; + } 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('
'); - 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(''); }); `; + 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; }, }; diff --git a/dependencies-cdn.js b/dependencies-cdn.js index 228d4f8..29096d3 100644 --- a/dependencies-cdn.js +++ b/dependencies-cdn.js @@ -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' }, diff --git a/public/index.html b/public/index.html index 9612800..f3480ff 100644 --- a/public/index.html +++ b/public/index.html @@ -43,11 +43,11 @@ <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %> <% } %> - - +
+ \ No newline at end of file diff --git a/src/assets/style/theme/acrou/index.scss b/src/assets/style/theme/acrou/index.scss index f97e6f1..2fad4e0 100644 --- a/src/assets/style/theme/acrou/index.scss +++ b/src/assets/style/theme/acrou/index.scss @@ -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; } diff --git a/src/main.js b/src/main.js index 24995a7..ad1a80b 100644 --- a/src/main.js +++ b/src/main.js @@ -17,6 +17,8 @@ import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' import "@/assets/style/theme/register.scss" +document.write(``); + Vue.config.productionTip = false Vue.use(ElementUI) Vue.use(VueAxios,axios) diff --git a/src/views/page/GoList.vue b/src/views/page/GoList.vue index 463d0e9..5e94cbc 100644 --- a/src/views/page/GoList.vue +++ b/src/views/page/GoList.vue @@ -8,13 +8,7 @@ infinite-scroll-disabled="busy" infinite-scroll-distance="10" > - + -
+
@@ -34,7 +25,7 @@
+ -->
@@ -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"); }, }, diff --git a/src/views/page/components/grid/index.vue b/src/views/page/components/grid/index.vue index 904e0f8..39c75fc 100644 --- a/src/views/page/components/grid/index.vue +++ b/src/views/page/components/grid/index.vue @@ -35,12 +35,9 @@ : '') " > +
- +
@@ -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 {