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

style: 优化grid视图下的文件图标

Browse Source
This commit is contained in:
jmal 2024-05-24 10:12:12 +08:00
parent 5b77d57a41
commit 3a977a5a71
5 changed files with 10 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template>
<span :style="{position: grid ? 'relative': 'unset'}">
<div :style="{position: grid ? 'relative': 'unset'}">
<div v-if="item.isFavorite && !public">
<div v-if="pc">
<svg-icon v-if="!grid" class="pc list icon-favorite" icon-class="Favoritestarrate"/>
@ -32,7 +32,7 @@
</div>
<div v-if="item.tags && item.tags.length > 0 && !public">
<div v-if="pc">
<svg-icon v-if="grid" class="pc grid icon-tag" icon-class="tag2" :style="{left: 14 * index + 10 + 'px', color: tag.color}" v-for="(tag,index) in item.tags.slice(0, 3)" :key="tag.tagId"/>
<svg-icon v-if="grid" class="pc grid icon-tag" icon-class="tag2" :style="{left: 14 * index + 'px', color: tag.color}" v-for="(tag,index) in item.tags.slice(0, 3)" :key="tag.tagId"/>
<!-- 列表模式下只能显示一个标签 -->
<svg-icon v-else class="pc list icon-tag" icon-class="tag2" :style="{color: tag.color}" v-for="tag in item.tags.slice(0, 1)" :key="tag.tagId"/>
</div>
@ -57,7 +57,7 @@
<div v-if="grid && pc" class="grid-play-icon">
<svg-icon icon-class="play1"/>
</div>
<el-image lazy v-if="grid" :style="{'height':details?'110px':(gridWidth-35) + 'px'}" fit="contain"
<el-image lazy v-if="grid" :style="{'height':details?'110px':(gridWidth-50) + 'px'}" fit="contain"
:src="item.fileId ? (audioCoverUrl+item.fileId) : (audioCoverUrl+item.id)">
<div slot="error" class="image-slot-error">
<svg-icon icon-class="video"/>
@ -75,7 +75,7 @@
<div v-else-if="item.contentType && item.contentType.indexOf('audio') > -1">
<div v-if="item.music !== undefined">
<div v-if="item.music.name !== null">
<el-image v-if="grid" :style="{'height':details?'110px':(gridWidth-35) + 'px'}" fit="contain"
<el-image v-if="grid" :style="{'height':details?'110px':(gridWidth-50) + 'px'}" fit="contain"
:src="item.fileId ? (audioCoverUrl+item.fileId) : (audioCoverUrl+item.id)">
<div slot="error" class="image-slot-error">
<svg-icon icon-class="audio"/>
@ -102,12 +102,8 @@
<el-avatar v-if="!grid" shape="square"
:src="item.fileId ? (imageUrl+item.fileId) : (imageUrl+item.id)"></el-avatar>
</div>
<!--<svg-icon v-else-if="item.contentType.indexOf('application/pdf') > -1" icon-class="file-pdf"/>-->
<!--<svg-icon v-else-if="item.contentType.indexOf('word') > -1" icon-class="file-word"/>-->
<!--<svg-icon v-else-if="item.contentType.indexOf('zip') > -1" icon-class="zip"/>-->
<!--<svg-icon v-else-if="item.contentType.indexOf('excel') > -1" icon-class="file-excel"/>-->
<svg-icon v-else :icon-class="findIconClass"/>
</span>
</div>
</template>
<script>
import {iconClass} from '@/utils/file-type'
@ -192,7 +188,6 @@ export default {
}
>>> .image-slot-error {
margin-top: 10px;
}
.icon-favorite {

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

@ -1207,7 +1207,7 @@ export default {
if (item.isFolder || !this.grid) {
return filename;
}
const singleLine = item.contentType && item.contentType.indexOf('audio') > -1 || item.contentType.indexOf('video') > -1 || item.contentType.startsWith('image')
const singleLine = item.contentType && item.contentType.startsWith('image')
const gridFilenameLength = singleLine ? 14 : 32
// 分离文件名和后缀
let parts = filename.split('.');

1
src/icons/svg/file-c.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716514768273" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40143" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M923.2 245.6L536.8 23.2c-6.4-4-15.2-5.6-24.8-5.6-9.6 0-18.4 2.4-24.8 5.6l-384 223.2c-13.6 8-23.2 28-23.2 43.2v445.6c0 8.8 1.6 19.2 8 28l854.4-496c-4.8-9.6-12-16.8-19.2-21.6z" fill="#659AD3" p-id="40144"></path><path d="M85.6 762.4c4 6.4 9.6 12 15.2 15.2l385.6 223.2c6.4 4 15.2 5.6 24.8 5.6 9.6 0 18.4-2.4 24.8-5.6l384-223.2c13.6-8 23.2-28 23.2-43.2V288.8c0-7.2-0.8-15.2-4.8-22.4l-852.8 496z" fill="#03599C" p-id="40145"></path><path d="M682.4 608.8C648.8 668 584.8 708 512 708c-108 0-196-88-196-196s88-196 196-196c72.8 0 136.8 40 170.4 100l104-60c-54.4-95.2-156.8-160-274.4-160-174.4 0-316 141.6-316 316s141.6 316 316 316c116.8 0 219.2-64 273.6-158.4l-103.2-60.8z" fill="#FFFFFF" p-id="40146"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

10
src/icons/svg/file-drawio.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

2
src/utils/file-type.js
View File

@ -25,6 +25,7 @@ export const lineWrapping = [
export const iconClass = new Map()
iconClass.set('php','file-php')
iconClass.set('c','file-c')
iconClass.set('js','file-js')
iconClass.set('vue','file-vue')
iconClass.set('xml','file-xml')
@ -68,6 +69,7 @@ iconClass.set('iml','file-idea')
iconClass.set('key','file-key')
iconClass.set('pem','file-pem')
iconClass.set('gz','file-gzip')
iconClass.set('tar.gz','file-gzip')
iconClass.set('json','file-json')
iconClass.set('tar','file-tar')
iconClass.set('sh','file-shell')