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-04-06 17:03:41 +08:00
parent da12fc816e
commit 31026de22e
6 changed files with 61 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "jmal-cloud-view",
"version": "2.1.9",
"description": "jmal cloud",
"description": "jmalcloud",
"author": "Jmal <zhushilun084@163.com>",
"license": "MIT",
"scripts": {

8
src/api/file-api.js
View File

@ -188,6 +188,14 @@ export default {
params
})
},
// 获取分享者信息
getSharer: function(params) {
return request({
url: 'public/get/sharer',
method: 'get',
params
})
},
// 访问分享链接里的文件夹
accessShareOpenDir: function(params) {
return request({

36
src/components/ShowFile/ShowFile.vue
View File

@ -357,8 +357,6 @@
}"
@click="gridItemClick(item)"
@dblclick="fileClick(item)"
@mouseover="gridItemHover(item,index)"
@mouseout="gridItemOut(item,index)"
@contextmenu.prevent="rowContextmenu(item)"
>
<div class="grid-item-icon">
@ -761,8 +759,6 @@ export default {
vmode: this.defaultGrid ? 'grid' : 'list',
gridColumnNum: -1,
gridColumnWidth: 120,
gridHoverItemIndex: -1,
gridHoverIntermediate: -1,
allChecked: false,
summaries: '',
shareDialog: false,
@ -972,35 +968,6 @@ export default {
load() {
this.getFileList(true)
},
gridItemHover(item, index) {
this.gridHoverItemIndex = index;
this.gridHoverIntermediate = index;
},
gridItemOut(item, index) {
this.gridHoverIntermediate = -1
const _this = this
setTimeout(function () {
if (_this.gridHoverIntermediate !== _this.gridHoverItemIndex) {
_this.gridHoverItemIndex = -1;
}
}, 10)
},
clickGridItemCheckBox(row, index) {
// 同步列表的checkbox
if (this.selectRowData.includes(row)) {
this.$refs.fileListTable.toggleRowSelection([{row: row, selected: false}])
} else {
this.$refs.fileListTable.toggleRowSelection([{row: row, selected: true}])
}
this.pinSelect(null, row)
},
clickGridAllCheckBox() {
if (this.selectRowData.length !== this.fileList.length) {
this.$refs.fileListTable.toggleAllSelection()
} else {
this.$refs.fileListTable.clearSelection();
}
},
gridItemClick(row) {
if (this.isCmd) {
this.pinSelect(null, row)
@ -1013,9 +980,6 @@ export default {
this.$refs.fileListTable.clearSelection()
this.$refs.fileListTable.toggleRowSelection([{row: row}])
this.pinSelect(null, row)
},
containerClick() {
},
containerResize() {
const container = document.querySelector(".dashboard-container")

2
src/layout/components/Sidebar/Logo.vue
View File

@ -26,7 +26,7 @@ export default {
},
data() {
return {
title: 'Jmal Cloud',
title: 'jmalcloud',
}
}
}

12
src/styles/home-index.scss
View File

@ -310,16 +310,16 @@
top: 70%;
color: #ffffff;
}
/deep/ .grid-item-checkbox {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
}
/deep/ .grid-time {
border-radius: 5px;
padding: 0 8px;
border: solid 1px #ccc0;
.grid-item-checkbox {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
}
.grid-item-icon{
text-align: center;
position: absolute;

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

@ -3,14 +3,16 @@
<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="">
<div class="share-header-content">
<svg-icon icon-class="jmal-cloud"/><span>jmal Cloud</span>
<div class="share-header-content logo">
<svg-icon icon-class="jmal-cloud"/>
<span>jmalcloud</span>
</div>
</a>
<div class="share-header-content sharer">
<span><span class="user">{{sharer.showName}}</span>的分享</span>
<el-avatar :src="sharer.avatar"></el-avatar>
</div>
</div>
<el-divider class="header-location"></el-divider>
<el-breadcrumb class="app-breadcrumb" separator="" v-if="!linkFailed">
@ -22,10 +24,7 @@
</transition-group>
<div class="search-content">
<div class="search-class">
<!-- <el-button v-if="indexList.length > 0" type="text" @click="downloadFile">-->
<!-- 下载-->
<!-- </el-button>-->
<el-button v-if="indexList.length > 0" type="text" @click="downloadFile" class="sort" title="下载">
<el-button v-if="indexList.length > 0" type="text" @click="downloadFile(false)" class="sort" title="下载">
<svg-icon icon-class="menu-download"/>
</el-button>
<el-button type="text" class="vmode" @click="changeVmode">
@ -124,9 +123,6 @@
</el-table-column>
<el-table-column v-if="index === 3 && showUpdateDateItem" :key="index" width="50" :index="index" align="center" header-align="center">
<!--<template slot-scope="scope">-->
<!--<svg-icon v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="share" />-->
<!--</template>-->
</el-table-column>
<el-table-column v-if="index === 4 && showUpdateDateItem" :key="index" width="50" :prop="item.name" :label="item.label" :index="index" class="el-icon-more" align="center" header-align="center">
@ -193,11 +189,11 @@
:style="{'background': indexList.includes(index)?'#baebff91':'','cursor':indexList.length>0?'default':'pointer'}"
@mouseover="gridItemHover(item,index)"
@mouseout="gridItemOut(item,index)"
@click="gridItemClick(item)"
@click="gridItemClick(item,$event)"
@contextmenu.prevent="rowContextmenu(item)"
>
<van-checkbox v-show="gridHoverItemIndex === index || indexList.includes(index)" class="grid-item-checkbox" :name="item" @click.stop="clickGridItemCheckBox(item,index)"/>
<div class="grid-item-icon"><icon-file :item="item" :image-url="imageUrl" :grid="true" :public="true"></icon-file></div>
<div class="grid-item-icon"><icon-file :item="item" :image-url="imageUrl" :grid="true" :grid-width="gridColumnWidth" :public="true"></icon-file></div>
<span class="grid-item-text">{{item.name}}</span>
</div>
</van-grid-item>
@ -339,6 +335,7 @@
grid: false,
vmode: 'list',
gridColumnNum: -1,
gridColumnWidth: 120,
gridHoverItemIndex: -1,
gridHoverIntermediate: -1,
allChecked: false,
@ -360,6 +357,7 @@
audioPreviewVisible: false,
showUpdateDateItem: this.$pc,// 列表模式下是否显示修改时间
showSizeItem: this.$pc,// 列表模式下是否显示文件大小
sharer: {},//分享者信息
}
},
computed: {
@ -450,7 +448,7 @@
clickGridItemCheckBox(item,index) {
// 同步列表的checkbox
if(this.indexList.includes(index)){
this.$refs.fileListTable.toggleRowSelection(item,false)
this.$refs.fileListTable.toggleRowSelection(item, true)
}
},
clickGridAllCheckBox() {
@ -461,7 +459,12 @@
this.$refs.fileListTable.clearSelection();
}
},
gridItemClick(row) {
gridItemClick(row, e) {
const elPath = e.path || (e.composedPath && e.composedPath())
let findIndex = elPath.findIndex(el => el.className === 'grid-item-checkbox van-checkbox')
if (findIndex > -1){
return
}
if (this.indexList.length < 1) {
if (row.index !== this.editingIndex) {
this.fileClick(row)
@ -475,16 +478,10 @@
}
}
},
containerResize(f) {
containerResize() {
let clientWidth = document.querySelector(".dashboard-container").clientWidth
if(clientWidth > 1024){
this.gridColumnNum = Math.round(clientWidth / 100 - 4)
} else {
this.gridColumnNum = Math.round(clientWidth / 100 - 2)
if(clientWidth < 500){
this.gridColumnNum = 3
}
}
this.gridColumnNum = Math.round((clientWidth-10)/135)
this.gridColumnWidth = (clientWidth - 11 * this.gridColumnNum) / this.gridColumnNum - 4.5
},
// 格式化最近时间
formatTime(time) {
@ -556,6 +553,11 @@
this.fileList.map((item,index) => {
item.index = index
})
if(this.fileList.length > 0) {
api.getSharer({userId: this.fileList[0].userId}).then(res => {
this.sharer = res.data
})
}
this.loadClientHeight()
this.listModeSearch = false
this.listModeSearchOpenDir = false
@ -697,7 +699,7 @@
}
for (let i = 0; i < this.indexList.length; i++) {
if (rowIndex === this.indexList[i]) {
return { backgroundColor: '#f5f7fa', color: '#b7b5b6', cursor: 'default' }
return { backgroundColor: '#baebff91', cursor: 'default' }
}
}
},
@ -835,6 +837,7 @@
this.$refs.contextShow.hideMenu()
},
downloadFile(copy) {
console.log('downloadFile', copy)
let totalSize = 0
if(this.indexList.length > 0){
this.selectRowData.forEach(item => {
@ -959,30 +962,31 @@
padding: 0 15px;
}
.share-header {
height: 50px;
text-align: center;
margin-bottom: 10px;
-webkit-display:flex;
display:flex;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
height: 45px;
.logo {
font-size: 20px;
}
.share-header-content {
display: flex;
align-items: center;
svg {
font-size: 50px;
font-size: 2rem;
}
span {
margin-left: 10px;
font-size: 30px;
}
}
.share-header-content:hover {
cursor: pointer;
.sharer {
font-size: 14px;
float: right;
top: 10px;
margin-top: -34px;
/deep/.el-avatar {
margin: 0 0 0 10px;
}
.user {
font-weight: 600;
}
}
}
/deep/.el-table{