添加图片懒加载，图片预览，优化grid view mode
This commit is contained in:
Aicirou
parent
40f9a15294
commit
53ef30577e
26
package-lock.json
generated
26
package-lock.json
generated
@ -12226,6 +12226,22 @@
|
||||
"resolved": "https://registry.npm.taobao.org/uuid/download/uuid-3.4.0.tgz?cache=0&sync_timestamp=1585683718911&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuuid%2Fdownload%2Fuuid-3.4.0.tgz",
|
||||
"integrity": "sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4="
|
||||
},
|
||||
"v-viewer": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npm.taobao.org/v-viewer/download/v-viewer-1.5.1.tgz",
|
||||
"integrity": "sha1-lIBNg4FMylZuaRM5/h5keTSG8gA=",
|
||||
"requires": {
|
||||
"throttle-debounce": "^2.0.1",
|
||||
"viewerjs": "^1.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"throttle-debounce": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-2.1.0.tgz",
|
||||
"integrity": "sha1-JX5kjwpWvZ5U/g8TLEq4YR304dU="
|
||||
}
|
||||
}
|
||||
},
|
||||
"v8-compile-cache": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.1.0.tgz",
|
||||
@ -12263,6 +12279,11 @@
|
||||
"extsprintf": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"viewerjs": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npm.taobao.org/viewerjs/download/viewerjs-1.5.0.tgz?cache=0&sync_timestamp=1574486727393&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fviewerjs%2Fdownload%2Fviewerjs-1.5.0.tgz",
|
||||
"integrity": "sha1-3r6pSSGJ+kEiPMVn3pFdeUNYmdA="
|
||||
},
|
||||
"vm-browserify": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz",
|
||||
@ -12503,6 +12524,11 @@
|
||||
"resolved": "https://registry.npm.taobao.org/vue-infinite-scroll/download/vue-infinite-scroll-2.0.2.tgz",
|
||||
"integrity": "sha1-yjepH+ku4K07dKz4aCwAkXFEtxE="
|
||||
},
|
||||
"vue-lazyload": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.3.3.tgz",
|
||||
"integrity": "sha1-TfUKJxvem3TDyveiKNbgr1DVaC8="
|
||||
},
|
||||
"vue-loader": {
|
||||
"version": "15.9.1",
|
||||
"resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.1.tgz?cache=0&sync_timestamp=1584584267698&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.1.tgz",
|
||||
|
||||
@ -22,11 +22,13 @@
|
||||
"markdown-it": "^10.0.0",
|
||||
"node-sass": "^4.14.0",
|
||||
"sass-loader": "^8.0.2",
|
||||
"v-viewer": "^1.5.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue-axios": "^2.1.5",
|
||||
"vue-clipboard2": "^0.3.1",
|
||||
"vue-i18n": "^8.17.3",
|
||||
"vue-infinite-scroll": "^2.0.2",
|
||||
"vue-lazyload": "^1.3.3",
|
||||
"vue-router": "^3.1.6",
|
||||
"vue2-ace-editor": "0.0.15",
|
||||
"vuex": "^3.4.0"
|
||||
|
||||
33
src/layout/viewmode/index.vue
Normal file
33
src/layout/viewmode/index.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<span
|
||||
class="icon"
|
||||
v-show="$route.meta.view === 'list'"
|
||||
:title="
|
||||
mode === 'list' ? $t('list.view.gridMode') : $t('list.view.listMode')
|
||||
"
|
||||
@click="toggleMode"
|
||||
>
|
||||
<i
|
||||
:class="'fa' + (mode === 'list' ? ' fa-th' : ' fa-th-list')"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState("acrou/view", ["mode"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions("acrou/view", ["toggle"]),
|
||||
toggleMode() {
|
||||
this.toggle(this.mode === "list" ? "grid" : "list");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -12,6 +12,9 @@ import i18n from './i18n'
|
||||
import store from '@/store/index'
|
||||
import VueClipboard from 'vue-clipboard2'
|
||||
import infiniteScroll from 'vue-infinite-scroll'
|
||||
import VueLazyload from 'vue-lazyload'
|
||||
import Viewer from 'v-viewer'
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
import "@/assets/style/theme/register.scss"
|
||||
|
||||
Vue.config.productionTip = false
|
||||
@ -19,6 +22,11 @@ Vue.use(ElementUI)
|
||||
Vue.use(VueAxios,axios)
|
||||
Vue.use(VueClipboard)
|
||||
Vue.use(infiniteScroll)
|
||||
Vue.use(VueLazyload,{
|
||||
// error: 'dist/error.png',
|
||||
loading: 'https://cloud.jsonpop.cn/go2index/vue/airplane.gif'
|
||||
})
|
||||
Vue.use(Viewer)
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<nav
|
||||
class="breadcrumb is-hidden-mobile is-hidden-touch level g2-breadcrumb"
|
||||
class="breadcrumb level g2-breadcrumb is-hidden-mobile is-hidden-touch"
|
||||
aria-label="breadcrumbs"
|
||||
>
|
||||
<div class="level-left">
|
||||
@ -28,22 +28,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div
|
||||
class="level-item"
|
||||
v-show="$route.meta.view === 'list'"
|
||||
:title="
|
||||
mode === 'list'
|
||||
? $t('list.view.gridMode')
|
||||
: $t('list.view.listMode')
|
||||
"
|
||||
@click="changeView"
|
||||
>
|
||||
<span class="icon">
|
||||
<i
|
||||
:class="'fa' + (mode === 'list' ? ' fa-th' : ' fa-th-list')"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</span>
|
||||
<div class="level-item">
|
||||
<view-mode />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -51,10 +37,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from "vuex";
|
||||
import ViewMode from "@/layout/viewmode";
|
||||
import { decode64 } from "@utils/AcrouUtil";
|
||||
export default {
|
||||
props: ["name"],
|
||||
components: {
|
||||
ViewMode,
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
navs: [],
|
||||
@ -67,11 +56,7 @@ export default {
|
||||
watch: {
|
||||
$route: "render",
|
||||
},
|
||||
computed: {
|
||||
...mapState("acrou/view", ["mode"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions("acrou/view", ["toggle"]),
|
||||
go(path) {
|
||||
this.$router.push({
|
||||
path: path,
|
||||
@ -114,9 +99,6 @@ export default {
|
||||
this.navs = navs;
|
||||
}
|
||||
},
|
||||
changeView() {
|
||||
this.toggle(this.mode === "list" ? "grid" : "list");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -71,6 +71,9 @@
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<header-setting />
|
||||
<a class="navbar-item is-hidden-desktop" @click.stop="$refs.viewMode.toggleMode">
|
||||
<view-mode ref="viewMode"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -80,10 +83,12 @@
|
||||
<script>
|
||||
import headerLocales from "@/layout/header-aside/components/header-locales";
|
||||
import headerSetting from "@/layout/header-aside/components/header-setting";
|
||||
import ViewMode from "@/layout/viewmode";
|
||||
export default {
|
||||
components: {
|
||||
headerLocales,
|
||||
headerSetting,
|
||||
ViewMode,
|
||||
},
|
||||
created() {
|
||||
this.siteName = document.getElementsByTagName("title")[0].innerText;
|
||||
@ -107,7 +112,8 @@ export default {
|
||||
currgd: {},
|
||||
gds: [],
|
||||
isActive: false,
|
||||
eyes: 'data:image/png;base64,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'
|
||||
eyes:
|
||||
"data:image/png;base64,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",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -85,6 +85,7 @@
|
||||
v-if="mode !== 'list'"
|
||||
:getIcon="getIcon"
|
||||
:go="go"
|
||||
:thum="thum"
|
||||
/>
|
||||
<div
|
||||
v-show="files.length === 0"
|
||||
@ -102,6 +103,24 @@
|
||||
</div>
|
||||
<hr />
|
||||
<readmemd :option="readmemd" v-if="readmemd.display"></readmemd>
|
||||
|
||||
<viewer
|
||||
v-if="images && images.length > 0"
|
||||
:images="images"
|
||||
class="is-hidden"
|
||||
ref="viewer"
|
||||
:options="{ toolbar: true, url: 'data-source' }"
|
||||
@inited="inited"
|
||||
>
|
||||
<img
|
||||
v-for="image in images"
|
||||
:src="thum(image.thumbnailLink)"
|
||||
:data-source="image.path"
|
||||
:key="image.path"
|
||||
:alt="image.name"
|
||||
class="image"
|
||||
/>
|
||||
</viewer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -185,18 +204,30 @@ export default {
|
||||
},
|
||||
buildFiles() {
|
||||
var path = this.$route.path;
|
||||
return this.files.map((item) => {
|
||||
var p = path + checkoutPath(item.name, item);
|
||||
let isFolder = item.mimeType === "application/vnd.google-apps.folder";
|
||||
let size = isFolder ? "-" : formatFileSize(item.size);
|
||||
return {
|
||||
path: p,
|
||||
...item,
|
||||
modifiedTime: formatDate(item.modifiedTime),
|
||||
size: size,
|
||||
isFolder: isFolder,
|
||||
};
|
||||
});
|
||||
return this.files
|
||||
.map((item) => {
|
||||
var p = path + checkoutPath(item.name, item);
|
||||
let isFolder = item.mimeType === "application/vnd.google-apps.folder";
|
||||
let size = isFolder ? "-" : formatFileSize(item.size);
|
||||
return {
|
||||
path: p,
|
||||
...item,
|
||||
modifiedTime: formatDate(item.modifiedTime),
|
||||
size: size,
|
||||
isFolder: isFolder,
|
||||
};
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (a.isFolder && b.isFolder) {
|
||||
return 0;
|
||||
}
|
||||
return a.isFolder ? -1 : 1;
|
||||
});
|
||||
},
|
||||
images() {
|
||||
return this.buildFiles.filter(
|
||||
(file) => file.mimeType.indexOf("image") != -1
|
||||
);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
@ -287,7 +318,19 @@ export default {
|
||||
});
|
||||
});
|
||||
},
|
||||
thum(url) {
|
||||
return url ? `/${this.$route.params.id}:view?url=${url}` : "";
|
||||
},
|
||||
inited(viewer) {
|
||||
this.$viewer = viewer;
|
||||
},
|
||||
go(file, target) {
|
||||
if (file.mimeType.indexOf("image") != -1) {
|
||||
this.$viewer.show();
|
||||
// const viewer = this.$el.querySelector(".images").$viewer;
|
||||
// viewer.show();
|
||||
return;
|
||||
}
|
||||
let path = file.path;
|
||||
let cmd = this.$route.params.cmd;
|
||||
if (cmd && cmd === "search") {
|
||||
|
||||
@ -20,31 +20,35 @@
|
||||
<span class="icon">
|
||||
<i class="fa fa-play-circle" aria-hidden="true"></i>
|
||||
</span>
|
||||
{{$t('page.video.play')}} /
|
||||
{{ $t("page.video.play") }} /
|
||||
<span class="icon">
|
||||
<i class="fa fa-download" aria-hidden="true"></i>
|
||||
</span>
|
||||
{{$t('page.video.download')}}
|
||||
{{ $t("page.video.download") }}
|
||||
</p>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<div class="field">
|
||||
<label class="label">{{$t('page.video.link')}}</label>
|
||||
<label class="label">{{ $t("page.video.link") }}</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" :value="videourl" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-mobile is-multiline has-text-centered">
|
||||
<div class="column" v-for="(item,index) in players" v-bind:key="index">
|
||||
<div
|
||||
class="column"
|
||||
v-for="(item, index) in players"
|
||||
v-bind:key="index"
|
||||
>
|
||||
<p class="heading">
|
||||
<a :href="item.scheme+(item.name==='Thunder'?getThunder:videourl)">
|
||||
<a :href="item.scheme">
|
||||
<figure class="image is-48x48" style="margin: 0 auto;">
|
||||
<img class="icon" :src="item.icon" />
|
||||
</figure>
|
||||
</a>
|
||||
</p>
|
||||
<p class>{{item.name}}</p>
|
||||
<p class>{{ item.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -56,65 +60,87 @@
|
||||
<script>
|
||||
import { decode64 } from "@utils/AcrouUtil";
|
||||
export default {
|
||||
data: function () {
|
||||
data: function() {
|
||||
return {
|
||||
apiurl: "",
|
||||
videourl: "",
|
||||
players: [
|
||||
{
|
||||
name: "IINA",
|
||||
icon: "https://www.iina.io/images/iina-icon-60.png",
|
||||
scheme: "iina://weblink?url="
|
||||
},
|
||||
{
|
||||
name: "PotPlayer",
|
||||
icon: "https://cloud.jsonpop.cn/go2index/player/potplayer.png",
|
||||
scheme: "potplayer://"
|
||||
},
|
||||
{
|
||||
name: "VLC",
|
||||
icon: "https://cloud.jsonpop.cn/go2index/player/vlc.png",
|
||||
scheme: "vlc://"
|
||||
},
|
||||
{
|
||||
name: "Thunder",
|
||||
icon: "https://cloud.jsonpop.cn/go2index/player/thunder.png",
|
||||
scheme: "thunder://"
|
||||
},
|
||||
{
|
||||
name: "MXPlayer",
|
||||
icon: "https://cloud.jsonpop.cn/go2index/player/mxplayer.png",
|
||||
scheme: "intent:"
|
||||
},
|
||||
{
|
||||
name: "nPlayer",
|
||||
icon: "https://cloud.jsonpop.cn/go2index/player/nplayer.png",
|
||||
scheme: "nplayer-"
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
render () {
|
||||
render() {
|
||||
// 便于开发环境调试
|
||||
this.videourl = window.location.origin + encodeURI(this.url);
|
||||
this.apiurl =
|
||||
"https://api.jsonpop.cn/demo/blplyaer/?url=" + this.videourl;
|
||||
}
|
||||
},
|
||||
},
|
||||
activated () {
|
||||
activated() {
|
||||
this.render();
|
||||
},
|
||||
computed: {
|
||||
url () {
|
||||
url() {
|
||||
if (this.$route.params.path) {
|
||||
return decode64(this.$route.params.path);
|
||||
}
|
||||
return ''
|
||||
return "";
|
||||
},
|
||||
getThunder () {
|
||||
players() {
|
||||
return [
|
||||
{
|
||||
name: "IINA",
|
||||
icon: "https://www.iina.io/images/iina-icon-60.png",
|
||||
scheme: "iina://weblink?url=" + this.videourl,
|
||||
},
|
||||
{
|
||||
name: "PotPlayer",
|
||||
icon: "https://cloud.jsonpop.cn/go2index/player/potplayer.png",
|
||||
scheme: "potplayer://" + this.videourl,
|
||||
},
|
||||
{
|
||||
name: "VLC",
|
||||
icon: "https://cloud.jsonpop.cn/go2index/player/vlc.png",
|
||||
scheme: "vlc://" + this.videourl,
|
||||
},
|
||||
{
|
||||
name: "Thunder",
|
||||
icon: "https://cloud.jsonpop.cn/go2index/player/thunder.png",
|
||||
scheme: "thunder://" + this.getThunder,
|
||||
},
|
||||
{
|
||||
name: "Aria2",
|
||||
icon: "https://cloud.jsonpop.cn/go2index/player/aria2.png",
|
||||
scheme: 'javascript:alert("暂未实现")',
|
||||
},
|
||||
{
|
||||
name: "nPlayer",
|
||||
icon: "https://cloud.jsonpop.cn/go2index/player/nplayer.png",
|
||||
scheme: "nplayer-" + this.videourl,
|
||||
},
|
||||
{
|
||||
name: "MXPlayer(Free)",
|
||||
icon: "https://cloud.jsonpop.cn/go2index/player/mxplayer.png",
|
||||
scheme:
|
||||
"intent:" +
|
||||
this.videourl +
|
||||
"#Intent;package=com.mxtech.videoplayer.ad;S.title=" +
|
||||
this.title +
|
||||
";end",
|
||||
},
|
||||
{
|
||||
name: "MXPlayer(Pro)",
|
||||
icon: "https://cloud.jsonpop.cn/go2index/player/mxplayer.png",
|
||||
scheme:
|
||||
"intent:" +
|
||||
this.videourl +
|
||||
"#Intent;package=com.mxtech.videoplayer.pro;S.title=" +
|
||||
this.title +
|
||||
";end",
|
||||
},
|
||||
];
|
||||
},
|
||||
getThunder() {
|
||||
return Buffer.from("AA" + this.videourl + "ZZ").toString("base64");
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -3,16 +3,11 @@
|
||||
<div class="columns is-multiline">
|
||||
<div
|
||||
class="column is-one-quarter"
|
||||
v-for="(file, index) in imgData"
|
||||
:key="index"
|
||||
@click="
|
||||
go(
|
||||
file,
|
||||
file.mimeType !== 'application/vnd.google-apps.folder' ? 'view' : ''
|
||||
)
|
||||
"
|
||||
v-for="(file, index) in folders"
|
||||
:key="'folder_' + index"
|
||||
@click="go(file)"
|
||||
>
|
||||
<div class="card g2-view-box g2-grid-folder" v-if="file.isFolder">
|
||||
<div class="card g2-grid-view-card g2-grid-view-folder">
|
||||
<div class="media">
|
||||
<div class="content">
|
||||
<svg class="iconfont" aria-hidden="true">
|
||||
@ -22,12 +17,21 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card g2-view-box" v-if="!file.isFolder">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-multiline">
|
||||
<div
|
||||
class="column is-one-quarter"
|
||||
v-for="(file, index) in files"
|
||||
:key="'file_' + index"
|
||||
@click="go(file, 'view')"
|
||||
>
|
||||
<div class="card g2-grid-view-card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-square">
|
||||
<img
|
||||
v-if="file.thumbnailLink"
|
||||
:src="thum(file.thumbnailLink)"
|
||||
v-lazy="thum(file.thumbnailLink)"
|
||||
alt="Placeholder image"
|
||||
/>
|
||||
</figure>
|
||||
@ -60,22 +64,22 @@ export default {
|
||||
go: {
|
||||
type: Function,
|
||||
},
|
||||
thum: {
|
||||
type: Function,
|
||||
},
|
||||
},
|
||||
data: function() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
imgData() {
|
||||
// return this.data.filter((file) => file.mimeType.indexOf("image/") != -1);
|
||||
// return this.data.filter((file) => !file.isFolder);
|
||||
return this.data;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
thum(url) {
|
||||
return url ? `/${this.$route.params.id}:view?url=${url}` : "";
|
||||
folders() {
|
||||
return this.data.filter((item) => item.isFolder);
|
||||
},
|
||||
files() {
|
||||
return this.data.filter((item) => !item.isFolder);
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@ -95,14 +99,14 @@ export default {
|
||||
.column {
|
||||
cursor: pointer;
|
||||
}
|
||||
.g2-view-box {
|
||||
.g2-grid-view-card {
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 1rem;
|
||||
&:hover {
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
.g2-grid-folder {
|
||||
.g2-grid-view-folder {
|
||||
padding: 10px;
|
||||
}
|
||||
.iconfont {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user