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

style: 优化样式和布局

Browse Source
This commit is contained in:
jmal 2025-04-30 16:36:16 +08:00
parent 7f1c1a2cf4
commit 24bd725f15
6 changed files with 86 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Icon/IconFile.vue
View File

@ -53,10 +53,10 @@
<svg-icon v-if="item.isFolder" icon-class="folder"/>
<div v-else-if="item.contentType && item.contentType.indexOf('video') > -1">
<div v-if="item.mediaCover === undefined || item.mediaCover === 'true'">
<div v-if="grid && pc" class="grid-play-icon">
<div v-if="grid && pc && !details" class="grid-play-icon">
<svg-icon icon-class="play1"/>
</div>
<el-image :lazy="lazy" v-if="grid" :style="{'height':details?'110px':(gridWidth-50) + 'px'}" fit="contain"
<el-image :lazy="lazy" v-if="grid" :style="{'height': videoImageHeight}" fit="contain"
:src="item.fileId ? (audioCoverUrl+item.fileId) : (audioCoverUrl+item.id)">
<div slot="error" class="image-slot-error">
<svg-icon icon-class="video"/>
@ -91,7 +91,7 @@
<svg-icon v-else icon-class="audio"/>
</div>
<div v-else-if="(item.contentType && item.contentType.startsWith('image')) || item.showCover">
<el-image v-if="grid || grid === 'details'" :style="{'height':details?'110px':(gridWidth-35) + 'px'}"
<el-image v-if="grid || grid === 'details'" :style="imageHeightStyle"
fit="contain" :src="item.fileId ? (imageUrl+item.fileId) : (imageUrl+item.id)" :class="item.showCover ? 'cover' : ''">
<div slot="error" class="image-slot-error">
<svg-icon icon-class="image"/>
@ -153,6 +153,24 @@ export default {
mounted() {
},
computed: {
videoImageHeight() {
if (this.details) {
return "110px"
}
if (this.item.video && this.item.video.width > this.item.video.height) {
return ""
}
return this.gridWidth - 35 + "px"
},
imageHeightStyle() {
if (this.details) {
return "height: 110px;"
}
if (this.item.w > this.item.h) {
return `max-height: ${this.gridWidth - 35}px`
}
return `height: ${this.gridWidth - 35}px;`
},
findIconClass() {
let suffix = this.item.suffix;
if (!suffix && this.item.fileName) {

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

@ -89,6 +89,7 @@
<div class="search-content">
<div class="search-class">
<el-popover
popper-class="upload-file"
v-if="showUploadButton"
v-show="!(isRootPath && homeHidden)"
v-model="isShowNewFolder"
@ -329,10 +330,7 @@
>
<div class="popper-arrow"></div>
<ul v-for="(item, index) in menus" :key="item.label">
<li
v-if="
item.operation === 'unFavorite' || item.operation === 'favorite'
"
<li v-if="item.operation === 'unFavorite' || item.operation === 'favorite'"
class="menu-option"
@click="menusOperations(item.operation, $event)"
@mouseover.prevent.stop="
@ -342,19 +340,23 @@
menuFavoriteLeave(index, rowContextData.isFavorite)
"
>
<label class="menuitem">
<div class="menuitem home-contextmenu">
<svg-icon :icon-class="item.iconClass" />
<span class="menuitem text">{{ item.label }}</span>
</label>
<div class="home-contextmenu-title">
<span class="menuitem text">{{ item.label }}</span>
</div>
</div>
</li>
<li v-else @click="menusOperations(item.operation, $event)">
<label class="menuitem">
<div class="menuitem home-contextmenu">
<svg-icon :icon-class="item.iconClass" />
<span class="menuitem text">{{ item.label }}</span>
<span v-if="item.shortcut" style="position: absolute;right: 10px;">
<div class="home-contextmenu-title">
<span class="menuitem text">{{ item.label }}</span>
<span v-if="item.shortcut">
<kbd v-for="key in item.shortcut" :style="{fontSize: key === '⌘' ? '14px' : '12px'}">{{ key }}</kbd>
</span>
</label>
</div>
</div>
</li>
</ul>
</e-vue-contextmenu>
@ -1243,7 +1245,9 @@ export default {
if (item.isFolder || !this.grid) {
return filename;
}
const singleLine = (item.contentType && item.contentType.startsWith('image')) || item.showCover
const verticalImage = item.w && item.h && (item.w / item.h < 1.6)
const verticalVideo = item.video && (item.video.width / item.video.height < 1.6)
const singleLine = verticalImage || verticalVideo || item.showCover
const gridFilenameLength = singleLine ? 13 : 28
// 分离文件名和后缀
let parts = filename.split('.');
@ -2144,8 +2148,8 @@ export default {
node.firstChild.style.marginRight = '20px'
}
if (index === 2) {
node.style.borderRadius = '0 5px 5px 0'
node.style.borderRight = '1px solid #409eff'
node.style.borderRadius = '0 12px 12px 0'
node.style.borderRight = 'solid 1px var(--apple-shadow-color)'
node.firstChild.style.height = '44px'
node.firstChild.style.lineHeight = '44px'
node.firstChild.style.width = '80px'
@ -3286,35 +3290,35 @@ export default {
if (columnIndex === 0) {
return {
backgroundColor: '#e0f3fc !important',
borderRadius: '50px 0 0 50px',
borderLeft: '1px solid #409eff',
borderTop: '1px solid #409eff',
borderBottom: '1px solid #409eff',
borderRadius: '12px 0 0 12px',
borderLeft: 'solid 1px var(--apple-shadow-color)',
borderTop: 'solid 1px var(--apple-shadow-color)',
borderBottom: 'solid 1px var(--apple-shadow-color)',
}
}
if (columnIndex === 3) {
return {
backgroundColor: '#e0f3fc !important',
borderRadius: '0 50px 50px 0',
borderRight: '1px solid #409eff',
borderTop: '1px solid #409eff',
borderBottom: '1px solid #409eff',
borderRadius: '0 12px 12px 0',
borderRight: 'solid 1px var(--apple-shadow-color)',
borderTop: 'solid 1px var(--apple-shadow-color)',
borderBottom: 'solid 1px var(--apple-shadow-color)',
}
}
return {
backgroundColor: '#e0f3fc !important',
borderTop: '1px solid #409eff',
borderBottom: '1px solid #409eff',
borderTop: 'solid 1px var(--apple-shadow-color)',
borderBottom: 'solid 1px var(--apple-shadow-color)',
}
} else {
if (columnIndex === 0) {
return {
borderRadius: '50px 0 0 50px',
borderRadius: '12px 0 0 12px',
}
}
if (columnIndex === 3) {
return {
borderRadius: '0 50px 50px 0',
borderRadius: '0 12px 12px 0',
}
}
}
@ -4666,7 +4670,7 @@ export default {
.is-sortable:hover {
background-color: #e0f3fc;
border-radius: 40px;
border-radius: 12px;
}
}

3
src/components/preview/FileDetails.vue
View File

@ -23,6 +23,7 @@
<icon-file
v-else
class="drawer-icon-font"
:lazy="false"
:grid="true"
:details="true"
:item="file"
@ -80,7 +81,7 @@
<span> {{ formatSize(file.size) }}</span>
</el-form-item>
<el-form-item label="位置:" class="details-position">
<span><a :href="pathUrl">{{ filepath }}</a></span>
<span><a :href="pathUrl" title="跳转至文件所在位置">{{ filepath }}</a></span>
</el-form-item>
<el-form-item label="上传时间:">
<span>{{ file.uploadDate }}</span>

3
src/layout/components/Sidebar/index.vue
View File

@ -445,6 +445,9 @@ $tagMenuBorderRadius: 8px;
padding: 0;
min-width: 110px;
}
.tag-menu {
padding: 5px 5px;
}
.tag-menu li:hover {
cursor: pointer;
border-radius: $tagMenuBorderRadius;

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

@ -45,7 +45,6 @@
padding-inline-start: 0;
margin-top: 0;
margin-bottom: 0;
padding: 0 5px;
}
.newFileMenu li {
cursor: pointer;
@ -63,7 +62,6 @@
.newFileMenu li > .menuitem {
cursor: pointer;
line-height: 38px;
margin-left: 10%;
}
.newFileMenu li > .menuitem > .text {
cursor: pointer;
@ -137,6 +135,26 @@
border: 0 solid rgba(0, 0, 0, 0);
min-width: 160px;
border-radius: $dialogBorderRadius;
padding: 10px 10px;
box-shadow: 0 5px 12px #ccc;
.home-contextmenu {
padding: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
.svg-icon {
margin-right: 10px;
}
}
.home-contextmenu-title {
width: 100%;
display: flex;
justify-content: space-between;
}
}
.menu-triangle-bottom {

10
src/styles/index.scss
View File

@ -28,10 +28,18 @@ body {
border-radius: $popperBorderRadius;
}
.el-message, .el-notification .el-popover, .el-tooltip__popper, .el-dropdown-menu, .el-select-dropdown, .el-picker-panel, .el-picker-panel__body, .el-picker-panel__sidebar {
.el-message, .el-notification, .el-popover, .el-tooltip__popper, .el-dropdown-menu, .el-select-dropdown, .el-picker-panel, .el-picker-panel__body, .el-picker-panel__sidebar {
border-radius: $popperBorderRadius;
}
.el-popover.el-popper.upload-file {
border-radius: 16px;
padding: 10px 10px;
li {
padding: 0 10px;
}
}
.v-contextmenu {
border-radius: 8px;
}