lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改：分析界面添加复制下载链接

Browse Source
This commit is contained in:
jmal 2021-02-04 14:13:01 +08:00
parent af3a0a7d62
commit c97f67603c
9 changed files with 66 additions and 709 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Icon/Icon.vue
View File

@ -5,7 +5,7 @@
import { Icon } from 'ant-design-vue'
const IconFont = Icon.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2024484_dczwxweaavk.js'
scriptUrl: '//at.alicdn.com/t/font_2024484_q3oifn59jr.js'
})
// 把此段代码贴到iconfont项目页面的控制台中, 以获取图标列表
@ -16,7 +16,7 @@ const IconFont = Icon.createFromIconfontCN({
// console.log(iconNames.slice(80,160))
export const iconFonts = {
list: ["iso", "zuijinhuoyue","key", "shouquan", "sort", "grid", "list", "emoji-a", "emoji-bizui", "emoji-baiyan", "emoji-aixin", "emoji-dajing", "emoji-ziya", "emoji-daxiao", "emoji-esi", "emoji-fadai", "emoji-fankun", "emoji-ganga", "emoji-fennu", "emoji-hanyan", "emoji-jingkong", "emoji-haochi", "emoji-emo", "emoji-jingsong", "emoji-jingya", "emoji-kaixin", "emoji-lengku", "emoji-danao", "emoji-liukoushui", "emoji-liulei", "emoji-mengbi", "mianwubiaoqing", "nanguo", "shuizhuo", "taoyan", "tanchi", "siliao", "tiaopi", "xiaochulei", "wuliao", "xingxingyan", "xieyan", "xiasi", "xiaolian", "ku", "shengqi", "yousiliao", "en", "bushufu", "bianbian", "fankun1", "feiwen", "ganmao", "huaixiao", "liuhan", "outu", "keshui", "renzhe", "santiaoxian", "guaiwu", "shoushang", "tianshi", "shuai", "xianwen", "xiaodiaodaya", "xiong", "yiwen", "yun", "liubixie", "shimo", "dianzan", "biti", "fendou", "huqi", "heng", "kulou", "leng", "taoyan1", "shuixing", "aini", "aixin1", "zhadan", "xinsui",
list: ["menu-fuzhi", "iso", "zuijinhuoyue","key", "shouquan", "sort", "grid", "list", "emoji-a", "emoji-bizui", "emoji-baiyan", "emoji-aixin", "emoji-dajing", "emoji-ziya", "emoji-daxiao", "emoji-esi", "emoji-fadai", "emoji-fankun", "emoji-ganga", "emoji-fennu", "emoji-hanyan", "emoji-jingkong", "emoji-haochi", "emoji-emo", "emoji-jingsong", "emoji-jingya", "emoji-kaixin", "emoji-lengku", "emoji-danao", "emoji-liukoushui", "emoji-liulei", "emoji-mengbi", "mianwubiaoqing", "nanguo", "shuizhuo", "taoyan", "tanchi", "siliao", "tiaopi", "xiaochulei", "wuliao", "xingxingyan", "xieyan", "xiasi", "xiaolian", "ku", "shengqi", "yousiliao", "en", "bushufu", "bianbian", "fankun1", "feiwen", "ganmao", "huaixiao", "liuhan", "outu", "keshui", "renzhe", "santiaoxian", "guaiwu", "shoushang", "tianshi", "shuai", "xianwen", "xiaodiaodaya", "xiong", "yiwen", "yun", "liubixie", "shimo", "dianzan", "biti", "fendou", "huqi", "heng", "kulou", "leng", "taoyan1", "shuixing", "aini", "aixin1", "zhadan", "xinsui",
"maren", "zhutou", "qie", "youling", "apple-fill", "attachment", "android-fill", "apple", "download", "arrow-up-circle", "arrow-right-circle", "arrow-down", "ashbin", "add", "file_music", "menu", "role", "jiaoseguanli", "yemianshezhi", "drop_down", "yuandian", "tag", "service-directory", "fabu", "wailian", "bianji-", "WEBSITE", "wangzhanguanli", "Up", "up", "fenlei", "guanlizhuanjiawenzhang", "pifu", "tuichudenglu", "shezhi", "wangzhan", "huaban", "yunshezhi", "UserSettings", "blogger", "biaoqian", "myself", "guidang", "quxiaoyulan1-copy", "yulan-copy", "quxiaoyulan1", "yulan"]
}

15
src/components/button/CopyButton.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div>
<el-button type="primary" class="copy-text" @click="copyText" :data-clipboard-text="shareLink">复制链接</el-button>
</div>
</template>
<script>
export default {
name: "CopyButton"
}
</script>
<style scoped>
</style>

11
src/utils/file-config.js
View File

@ -28,8 +28,7 @@ export default {
})
},
publicDownload: function(shareId, file) {
let url = `${this.baseUrl}/public/s/download/${file.id}/${shareId}`
window.open(url, '_self')
window.open(this.publicDownloadUrl(shareId, file), '_self')
},
packageDownload: function(fileIds, token) {
fileApi.isAllowDownload().then(() => {
@ -37,6 +36,12 @@ export default {
})
},
publicPackageDownload: function(shareId, fileIds) {
window.open(`${this.baseUrl}/public/s/packageDownload?shareId=${shareId}&fileIds=${fileIds}`, '_self')
window.open(this.publicPackageDownloadUrl(shareId, fileIds), '_self')
},
publicDownloadUrl: function(shareId, file) {
return window.location.origin + `${this.baseUrl}/public/s/download/${file.id}/${shareId}`
},
publicPackageDownloadUrl: function(shareId, fileIds) {
return window.location.origin + `${this.baseUrl}/public/s/packageDownload?shareId=${shareId}&fileIds=${fileIds}`
},
}

79
src/views/public/article/ArticleTop.vue
View File

@ -1,79 +0,0 @@
<template>
<div class="navbar animated fadeIn fast delay-1s">
<div class="container-fluid">
<a class="navbar-brand text-brand" href="/articles">{{setting.siteName}}</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="https://www.jmal.top/archives.html" title="归档"><svg-icon icon-class="guidang"></svg-icon><span class="nav-link-label">归档</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.jmal.top/archives.html" title="分类"><svg-icon icon-class="fenlei"></svg-icon><span class="nav-link-label">分类</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.jmal.top/archives.html" title="关于"><svg-icon icon-class="myself"></svg-icon><span class="nav-link-label">关于</span></a>
</li>
</ul>
<ul class="navbar-nav side-toolbar-list">
<li v-for="operatingButton in operatingButtons">
<a :href="operatingButton.url" :title="operatingButton.title" target="_blank">
<dl v-html="operatingButton.fontHtml">
{{operatingButton.fontHtml}}
</dl>
</a>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import '../../../assets/fontawesome-free-5.11.2-web/css/all.min.css'
import Icon from '@/components/Icon/Icon.vue'
export default {
name: 'ArticleTop',
components: {
Icon
},
props: {
setting: {
type: Object,
default: {}
}
},
data() {
return {
operatingButtons: []
}
},
watch: {
setting(setting){
if(setting.operatingButtons) {
setting.operatingButtons.split(/[\n]/).forEach(button => {
let operatingButton = {}
const splitIndex = button.indexOf(":")
const ihtml = button.substring(0, splitIndex)
// 获取标签里的内容
let regLabel = /[^><]+(?=<\/i>)/img
const title = ihtml.match(regLabel)
operatingButton.title = title ? title[0] : ''
// 去掉标签里的内容
operatingButton.fontHtml = ihtml.replace(regLabel, '')
operatingButton.url = button.substring(splitIndex + 1, button.length)
this.operatingButtons.push(operatingButton)
})
}
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import "src/styles/index";
@import "src/styles/markdown";
@import "src/styles/articles";
@import "src/styles/article";
</style>

95
src/views/public/article/SidebarNav.vue
View File

@ -1,95 +0,0 @@
<template>
<div>
<div id="toggle-nav">
<el-button class="nav-button" round size="small" @click="toggle">MENU</el-button>
</div>
<div id="sidebar-nav">
<div class="author navbar-header">
<a href="/articles">
<img src="https://www.jmal.top/avatar.jpg" alt="Avatar" width="100" height="100">
</a>
</div>
<ul id="menu-menu-1" class="menu navbar-nav">
<li class="menu-item">
<a href="/articles">首页</a>
</li>
<li class="menu-item">
<a class="nav-link" href="https://www.jmal.top/archives.html" title="归档"><svg-icon icon-class="guidang"></svg-icon><span class="nav-link-label">归档</span></a>
</li>
<li class="menu-item">
<a class="nav-link" href="https://www.jmal.top/archives.html" title="分类"><svg-icon icon-class="fenlei"></svg-icon><span class="nav-link-label">分类</span></a>
</li>
<li class="menu-item">
<a class="nav-link" href="https://www.jmal.top/archives.html" title="关于"><svg-icon icon-class="myself"></svg-icon><span class="nav-link-label">关于</span></a>
</li>
<li class="menu-item" v-for="operatingButton in operatingButtons">
<a :href="operatingButton.url" :title="operatingButton.title" target="_blank">
<i v-html="operatingButton.fontHtml">
{{operatingButton.fontHtml}}
</i>
<span>{{operatingButton.title}}</span>
</a>
</li>
</ul>
</div>
</div>
</template>
<script>
import '../../../assets/fontawesome-free-5.11.2-web/css/all.min.css'
import Icon from '@/components/Icon/Icon.vue'
export default {
name: 'SidebarNav',
components: {
Icon
},
props: {
setting: {
type: Object,
default: {}
}
},
data() {
return {
operatingButtons: []
}
},
watch: {
setting(setting){
if(setting.operatingButtons) {
setting.operatingButtons.split(/[\n]/).forEach(button => {
let operatingButton = {}
const splitIndex = button.indexOf(":")
const ihtml = button.substring(0, splitIndex)
// 获取标签里的内容
let regLabel = /[^><]+(?=<\/i>)/img
const title = ihtml.match(regLabel)
operatingButton.title = title ? title[0] : ''
// 去掉标签里的内容
operatingButton.fontHtml = ihtml.replace(regLabel, '')
operatingButton.url = button.substring(splitIndex + 1, button.length)
this.operatingButtons.push(operatingButton)
})
}
}
},
methods: {
toggle() {
let body = document.getElementById("body")
let toggleNav = document.getElementById("toggle-nav")
let sidebarNav = document.getElementById("sidebar-nav")
if(body.style.transform.length > 0){
body.style.transform = ''
toggleNav.style.transform = ''
sidebarNav.style.transform = ''
} else {
body.style.transform = 'translateX(17.5rem)'
toggleNav.style.transform = 'translateX(14.5rem)'
sidebarNav.style.transform = 'translateX(17.5rem)'
}
},
}
}
</script>
<style lang="scss" scoped>
@import "src/styles/markdown";
</style>

295
src/views/public/article/index.vue
View File

@ -1,295 +0,0 @@
<template>
<div v-wechat-title="pageTitle">
<transition name="fade">
<al-loading v-if="isLoading"></al-loading>
</transition>
<al-back-top></al-back-top>
<SidebarNav :setting="userSetting"/>
<div id="body">
<div id="top" class="animateIn">
<ArticleTop :setting="userSetting"/>
<div class="scrollbar gradient-bg-rev" style="width: 0;"></div>
</div>
<div class="article-header">
<div class="article-background" :style="{backgroundImage: `url(${file.cover})`}"></div>
<div class="inner">
<div class="blog-title"><span id="article-title">{{pageTitle}}</span><span class="typed-cursor">_</span></div>
<div class="blog-description font-mono">
<a itemprop="name" href="https://www.jmal.top/author/1/" rel="author">{{file.username}}</a>
· {{file.uploadDate}}
<span v-if="isEditor">
· <a :href="'/setting/website/manager-articles?operation=editor&id='+file.id" target="_blank">编辑</a>
</span>
</div>
</div>
</div>
<div class="body-wrapper">
<el-main id="main_body" :content="titleList.length > 0?'show':'hide'" class="l_main article_l_main">
<!-- <div id="vditor" class="article-body"></div>-->
<vditor-preview
:content="content"
class="article-body"
@after="renderContents"
/>
</el-main>
<div v-show="titleList.length > 0" class="right-bj">
<a-affix>
<div class="slimScrollDiv">
<div class="right-menu" :style="{maxHeight:maxMenuHeight+'px'}">
<div class="toc-content">
<header class="toc-header"><svg-icon icon-class="contents"></svg-icon><span>目录</span></header>
</div>
<div class="j-titleList titleList">
<div class="j-bj" style="height: 30px; top: 0;"></div>
</div>
</div>
</div>
</a-affix>
</div>
</div>
<footer class="clearfix">
<div class="copyright"><p><a href="/articles">Copyright © 2020 jmal</a></p></div>
</footer>
</div>
</div>
</template>
<script>
import AlLoading from "@/components/loading/AlLoading";
import AlBackTop from "@/components/backtop/AlBackTop";
import markdownApi from '@/api/markdown-api'
import $ from 'jquery'
import ArticleTop from "@/views/public/article/ArticleTop";
import {getSetting} from '@/api/user'
import SidebarNav from "@/views/public/article/SidebarNav";
import VditorPreview from "@/components/preview/VditorPreview";
// import VditorPreview from 'vditor/dist/method.min'
// import "vditor/src/assets/scss/index.scss"
export default {
components: {SidebarNav, ArticleTop, AlBackTop, AlLoading, VditorPreview },
data() {
return {
file: {},
isLoading: true,
pageTitle: "",
showList: true,
toolbars: null,
toolbarsFlag: true,
content:'',
html:'',
userSetting: {},
titleList: [],
tocMaxHeight: 500,
befterScrollTop: 0,
maxMenuHeight: document.documentElement.clientHeight - 155,
top: 70,
isEditor : false,
contentEditor: '',
direction: 'up'
}
},
mounted() {
this.getSetting()
if(this.$route.query.mark){
this.getMarkDown()
this.showList = false
}
let that = this
window.onresize = function temp() {
that.maxMenuHeight= document.documentElement.clientHeight - 155
}
},
methods: {
getSetting() {
getSetting({userId: this.$store.state.user.userId}).then((res) => {
this.userSetting = res.data;
})
},
onScroll() {
// let befterScrollTop = document.documentElement.scrollTop;
},
dynamicTyping() {
let divTyping = document.getElementById('article-title')
let i = 0,timer = 0,str = this.pageTitle
function typing () {
if (i <= str.length) {
divTyping.innerHTML = str.slice(0, i++)
timer = setTimeout(typing, 100)
} else {
// 结束打字
clearTimeout(timer)
}
}
typing()
},
getMarkDown() {
markdownApi.getMarkdown({
mark: this.$route.query.mark
}).then((res) => {
this.file = res.data
if(this.file.userId === this.$store.state.user.userId) {
this.isEditor = true
}
const filename = res.data.name
this.pageTitle = filename.substring(0,filename.length - res.data.suffix.length-1)
this.content = res.data.contentText
this.$nextTick(()=>{
// 动态打字效果
this.dynamicTyping()
const hTag = document.querySelector("h1");
if(hTag){
this.pageTitle = hTag.innerText
}
})
this.isLoading = false
})
},
addUpdateTime(){
// DOM更新之后获取子元素
// 在文章最前面添加更新时间
let main = document.getElementById('vditor')
let p = document.createElement("p")
p.className = "note-update-date"
p.innerText = `本文最后更新于：${this.file.updateDate}`
main.insertBefore(p , main.childNodes[0])
},
titleOneItem(index, jqel, tagName){
const h = tagName.substring(1,2)
if(index === 0){
return '<li first class="pl h-'+h+'"><a href="#'+jqel.attr('id')+'">'+jqel.text()+'</a></li>'
}
return '<li class="pl h-'+h+'"><a href="#'+jqel.attr('id')+'">'+jqel.text()+'</a></li>'
},
// 渲染目录
renderContents(){
// 添加更新时间
this.addUpdateTime()
let contents = []
let headers = $('.article-body').find(":header")
if(!headers || headers.length < 1){
return
}
const that = this
headers.each(function (index) {
contents.push(that.titleOneItem(index, $(this), $(this).prop("tagName")))
that.titleList.push(index)
})
$('.j-titleList').prepend(contents)
// 获取id数组
for (let i = 0; i < contents.length; i++) {
contents[i] = contents[i].replace(/.*?#(.*)".*/g, '$1')
}
this.renderContentsAfter(contents)
},
// 渲染目录后的操作
renderContentsAfter(contents){
const that = this
let beforeScrollTop = document.documentElement.scrollTop;
let fn = fn || function (direction) {
that.direction = direction
// 判断是上滑显示,下滑隐藏
const top = $('#top')
const toogleNav = $('#toggle-nav')
const body = document.getElementById("body")
if(direction === 'down'){
top.removeClass('animateIn')
top.addClass('animateOut')
toogleNav.removeClass('animateRight')
toogleNav.addClass('animateLeft')
if(body.style.transform.length > 0) {
document.getElementById("sidebar-nav").style.transform = ''
body.style.transform = ''
document.getElementById("toggle-nav").style.transform = ''
}
}
if(direction === 'up'){
top.removeClass('animateOut')
top.addClass('animateIn')
toogleNav.removeClass('animateLeft')
toogleNav.addClass('animateRight')
}
};
console.log(contents[1])
let scrollAfterTimer = null
$(window).on("scroll",function (event) {
for (let i = 0; i < contents.length; i++) {
if ($(window).scrollTop() > $('#' + contents[i]).offset().top - 100 || $(this).scrollTop() + $(this).height() == $(document).height()) {
$('.j-titleList').find('li').eq(i).addClass('active').siblings('li').removeClass('active');
$('.j-bj').css('top', i * 34)
}
}
if(scrollAfterTimer != null){
clearTimeout(scrollAfterTimer)
}
scrollAfterTimer = setTimeout(function (){
that.$router.replace({path: that.$route.path, query: that.$route.query, hash: $('.j-titleList').find('li.active').find('a').attr('href')})
}, 50)
// 判断是上滑还是下滑
var afterScrollTop = document.documentElement.scrollTop
let delta = afterScrollTop - beforeScrollTop
beforeScrollTop = afterScrollTop
var scrollTop = $(this).scrollTop()
var scrollHeight = $(document).height()
var windowHeight = $(this).height()
var progress = ((afterScrollTop + document.body.clientHeight)/scrollHeight) * 100
// 改变top bar 进度条
document.querySelector(".scrollbar").style.width = progress +'%'
if (scrollTop + windowHeight > scrollHeight - 10) { //滚动到底部执行事件
fn('bottom')
return
}
if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {
fn('up')
} else {
if (Math.abs(delta) < 10) {
return false
}
fn(delta > 0 ? "down" : "up")
}
})
let $root = $('html, body')
$('.j-titleList li').on("click", function () {
let top = 75
if (typeof($(this).attr("first"))!=="undefined") {
// 点击第一个目录
top = 168
}
let herf = $.attr(this.querySelector("a"), 'href')
$root.animate({
scrollTop: $(herf).offset().top - top
}, 400)
return false
})
// 滚动到响应的锚点
setTimeout(function (){
if(that.$route.hash){
$root.animate({
scrollTop: $(decodeURIComponent(that.$route.hash)).offset().top - 75
}, 400)
}
},100)
},
},
destroyed() {
$(window).unbind("scroll")
$('.j-titleList li').unbind("click");
}
}
</script>
<style lang="scss" scoped>
@import "src/styles/index";
@import "src/styles/markdown";
@import "src/styles/articles";
@import "src/styles/article";
</style>

219
src/views/public/articles/index.vue
View File

@ -1,219 +0,0 @@
<template>
<div class="articles" v-wechat-title="pageTitle">
<transition name="fade">
<al-loading v-if="isLoading"></al-loading>
</transition>
<al-back-top ref="alBackTop"></al-back-top>
<SidebarNav :setting="userSetting"/>
<div id="body">
<div id="top" class="animateIn">
<ArticleTop :setting="userSetting"/>
</div>
<div class="cover-wrapper">
<div class="cover half" style="position: relative; z-index: 0; background-image: none;">
<div class="cover-body">
<div class="a">
<p class="title"><span id="article-title">{{ userSetting.backgroundTextSite }}</span><span class="typed-cursor">_</span></p >
<p class="subtitle">{{ userSetting.backgroundDescSite }}</p>
</div>
</div>
<div class="backstretch">
<img class="blog-background" :src="userSetting.backgroundSite"
onerror="this.src='https://images.unsplash.com/photo-1603910062519-69a9616d34c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80'">
</div>
</div>
</div>
<div class="l_body">
<div class="body-wrapper articles_l_main">
<el-main class="l_main">
<section class="post-list">
<div v-for="article in articleList" class="post-wrapper">
<article class="post white-box shadow reveal">
<section class="meta">
<div class="meta" id="header-meta">
<h2 class="title">
<router-link :to="$route.path+'/article?mark='+article.id">{{article.name}}</router-link>
</h2>
<div class="new-meta-box">
<div class="new-meta-item author">
<a href="http://www.jmal.top" rel="nofollow">
<img :src="imageUrl+article.avatar" :data-original="imageUrl+article.avatar">
<p>{{article.username}}</p>
</a>
</div>
<div class="new-meta-item date">
<a class="notlink">
<svg-icon icon-class="release"></svg-icon>
<p>发布于 {{article.uploadDate}}</p>
</a>
</div>
</div>
<hr>
</div>
</section>
<section class="article typo">
<router-link :to="$route.path+'/article?mark='+article.id">
<div class="article-entry" itemprop="articleBody">
<p><img v-if="article.cover" class="blog-background articles-list" :src="article.cover" onerror="this.src='https://images.unsplash.com/photo-1582230587856-7fec01506148?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'"/></p>
</div>
</router-link>
</section>
</article>
</div>
</section>
<el-pagination
style="text-align: center"
:hide-on-single-page="true"
:current-page.sync="pagination.pageIndex"
:page-sizes="pagination.pageSizes"
:page-size="pagination.pageSize"
:total="pagination.total"
@current-change="currentChange"
layout="prev, pager, next">
</el-pagination>
</el-main>
</div>
</div>
<footer class="clearfix">
<br><br><br>
<div class="copyright"><p><a href="http://blog.jmal.top">Copyright © 2020 journey magical AL</a></p></div>
</footer>
</div>
</div>
</template>
<script>
import { getSetting } from '@/api/user'
import AlBackTop from "@/components/backtop/AlBackTop";
import AlLoading from "@/components/loading/AlLoading";
import markdownApi from '@/api/markdown-api'
import ArticleTop from "@/views/public/article/ArticleTop";
import SidebarNav from "@/views/public/article/SidebarNav"
export default {
components: { SidebarNav, ArticleTop, AlBackTop, AlLoading },
data() {
return {
imageUrl: process.env.VUE_APP_BASE_API + '/public/s/view/thumbnail?id=',
isLoading: true,
pageTitle: '',
articleList: [],
backImageSrc: "~@/assets/img/widget-img1.jpg",
userSetting: {},
pagination: {
pageIndex: this.$route.query.page ? parseInt(decodeURI(this.$route.query.page)) : 1,
pageSize: 10,
total: 0,
},
scrollTop: 0
}
},
mounted() {
this.getSetting()
this.getMarkDown()
},
activated() {
console.log('activated',this.scrollTop)
},
deactivated() {
console.log('deactivated')
// this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
},
methods: {
getSetting() {
getSetting({userId: this.$store.state.user.userId}).then((res) => {
this.userSetting = res.data;
this.pageTitle = this.userSetting.siteName
this.$nextTick(()=>{
this.dynamicTyping()
})
})
},
dynamicTyping() {
let divTyping = document.getElementById('article-title')
let i = 0,timer = 0,str = this.userSetting.backgroundTextSite
function typing () {
if (str && i <= str.length) {
divTyping.innerHTML = str.slice(0, i++)
timer = setTimeout(typing, 100)
} else {
// 结束打字
clearTimeout(timer)
}
}
typing()
},
getCookie (name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
},
currentChange() {
this.$router.push(`?page=${this.pagination.pageIndex}`)
this.getMarkDown()
this.$refs.alBackTop.nextPageScrollTop()
},
getMarkDown() {
markdownApi.getMarkdown({pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize}).then((res) => {
this.articleList = res.data
this.pagination.total = res.count
this.$nextTick(() => {
this.isLoading = false
this.pagination.pageIndex = parseInt(decodeURI(this.$route.query.page))
})
})
},
},
}
</script>
<style lang="scss" scoped>
@import "src/styles/index";
@import "src/styles/markdown";
@import "src/styles/articles";
@import "src/styles/article";
.l_side {
width: 285px;
float: right;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
@media screen and (max-width: 1440px){
.l_side {
width: 240px;
}
}
.widget.blogger {
transition: all .28s ease;
-moz-transition: all .28s ease;
-webkit-transition: all .28s ease;
-o-transition: all .28s ease;
}
.widget.desktop {
display: block;
}
.widget {
z-index: 0;
background: #fff;
margin-top: 16px;
border-radius: 12px;
width: 100%;
display: none;
}
.articles {
height: 100%;
background: #f5f5f5;
}
.articles-list {
max-height: 15rem;
}
.articles_l_main {
max-width: 960px;
}
</style>

56
src/views/public/share/shareList.vue
View File

@ -3,6 +3,7 @@
<transition name="fade">
<al-loading v-if="isLoading"></al-loading>
</transition>
<!-- <el-button ref="downloadLink" style="display: block" type="primary" class="download-link" @click="copyDownloadLink" :data-clipboard-text="downloadLink">复制链接</el-button>-->
<div class="share-h">
<div class="share-header">
<a href="">
@ -38,21 +39,10 @@
<e-vue-contextmenu ref="contextShow" class="newFileMenu" :class="menuTriangle" @ctx-show="show" @ctx-hide="hide">
<div class="popper-arrow"></div>
<ul v-for="item in menus" :key="item.label">
<li
v-if="item.operation === 'unFavorite' || item.operation === 'favorite'"
@click="menusOperations(item.operation)"
>
<li class="menu-option" @click="menusOperations(item.operation)">
<label class="menuitem"><svg-icon :icon-class="item.iconClass" /><span class="menuitem text">{{ item.label }}</span>
</label>
</li>
<li
v-else
@click="menusOperations(item.operation)"
>
<label class="menuitem"><svg-icon :icon-class="item.iconClass" /><span class="menuitem text">{{ item.label }}</span>
</label>
</li>
</ul>
</e-vue-contextmenu>
@ -258,7 +248,7 @@
import VideoPreview from "@/components/preview/VideoPreview";
import AudioPreview from "@/components/preview/AudioPreview";
import fileConfig from "@/utils/file-config";
import Clipboard from "clipboard";
export default {
components: { IconFile, BreadcrumbFilePath,AlLoading,
AudioPreview, VideoPreview, ImageViewer, SimTextPreview
@ -317,10 +307,12 @@
singleMenus: [
{ iconClass: 'menu-open', label: '打开', operation: 'open' },
{ iconClass: 'menu-download', label: '下载', operation: 'download' },
{ iconClass: 'menu-fuzhi', label: '复制下载连接', operation: 'copyDownloadUrl' },
],
singleMenusEdit: [
{ iconClass: 'menu-open', label: '打开', operation: 'open' },
{ iconClass: 'menu-download', label: '下载', operation: 'download' },
{ iconClass: 'menu-fuzhi', label: '复制下载连接', operation: 'copyDownloadUrl' },
],
multipleMenus: [
{ iconClass: 'menu-download', label: '下载', operation: 'download' },
@ -840,10 +832,13 @@
case 'download':
this.downloadFile()
break
case 'copyDownloadUrl':
this.downloadFile(true)
break
}
this.$refs.contextShow.hideMenu()
},
downloadFile() {
downloadFile(copy) {
let totalSize = 0
if(this.indexList.length > 0){
this.selectRowData.forEach(item => {
@ -862,10 +857,18 @@
fileIds.push(this.rowContextData.id)
}
if (fileIds.length > 1 || this.rowContextData.isFolder){
fileConfig.publicPackageDownload(this.shareId, fileIds, this.$store.state.user.token)
if(copy){
this.copyDownloadLink(fileConfig.publicPackageDownloadUrl(this.shareId, fileIds))
} else {
fileConfig.publicPackageDownload(this.shareId, fileIds)
}
return
}
fileConfig.publicDownload( this.shareId, this.rowContextData)
if(copy){
this.copyDownloadLink(fileConfig.publicDownloadUrl( this.shareId, this.rowContextData))
} else {
fileConfig.publicDownload( this.shareId, this.rowContextData)
}
} else {
this.$message({
message: '所选文件为空',
@ -873,6 +876,24 @@
});
}
},
// 复制下载连接
copyDownloadLink(url) {
let clipboard = new Clipboard('.menu-option', {
text: function (){
return url
}
})
clipboard.on('success', e => {
this.$message({message: '复制成功',type: 'success',duration: 1000});
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
this.$message({message: '该浏览器不支持自动复制',type: 'warning',duration: 1000});
clipboard.destroy()
})
},
// 点击文件或文件夹
fileClick(row) {
if (row.isFolder) {
@ -985,5 +1006,8 @@
position: relative;
}
}
.newFileMenu li>.menuitem>.text {
margin-left: 10px;
}
</style>

1
src/views/share/index.vue
View File

@ -480,6 +480,7 @@
// 复制分享链接
copyShareLink() {
var clipboard = new Clipboard('.tag-share-link')
console.log(clipboard)
clipboard.on('success', e => {
this.$message({
message: '复制成功',