Skip to content

Commit

Permalink
优化移动端显示
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarSeventh
MarSeventh committed Sep 29, 2024
1 parent 4f1664d commit a11a0bd
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 21 deletions.
9 changes: 6 additions & 3 deletions src/components/UploadForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,17 @@
</el-text>
<div class="upload-list-dashboard-action">
<el-button-group>
<el-tooltip content="整体复制" placement="top">
<el-tooltip :disabled="disableTooltip" content="整体复制" placement="top">
<el-button type="primary" round @click="copyAll" alt="整体复制">
<font-awesome-icon icon="copy" />
</el-button>
</el-tooltip>
<el-tooltip content="失败重试" placement="top">
<el-tooltip :disabled="disableTooltip" content="失败重试" placement="top">
<el-button type="primary" @click="retryError">
<font-awesome-icon icon="redo" />
</el-button>
</el-tooltip>
<el-tooltip content="清空列表" placement="top" style="border: none;">
<el-tooltip :disabled="disableTooltip" content="清空列表" placement="top" style="border: none;">
<el-dropdown>
<el-button type="primary" round style="outline: none; border-right: none;">
<font-awesome-icon icon="trash-alt" />
Expand Down Expand Up @@ -197,6 +197,9 @@ computed: {
urlSize() {
// 移动端为small
return window.innerWidth < 768 ? 'small' : 'default'
},
disableTooltip() {
return window.innerWidth < 768
}
},
mounted() {
Expand Down
23 changes: 13 additions & 10 deletions src/views/AdminDashBoard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<font-awesome-icon icon="database" class="fa-database"></font-awesome-icon> 记录总数量: {{ Number }}
</span>
<div class="actions">
<el-tooltip content="排序" placement="bottom">
<el-tooltip :disabled="disableTooltip" content="排序" placement="bottom">
<el-dropdown @command="sort" :hide-on-click="false">
<span class="el-dropdown-link">
<font-awesome-icon :icon="sortIcon" class="header-icon"></font-awesome-icon>
Expand All @@ -24,19 +24,19 @@
</template>
</el-dropdown>
</el-tooltip>
<el-tooltip content="批量复制" placement="bottom">
<el-tooltip :disabled="disableTooltip" content="批量复制" placement="bottom">
<font-awesome-icon icon="link" class="header-icon" :class="{ disabled: selectedFiles.length === 0 }" @click="handleBatchCopy"></font-awesome-icon>
</el-tooltip>
<el-tooltip content="批量删除" placement="bottom">
<el-tooltip :disabled="disableTooltip" content="批量删除" placement="bottom">
<font-awesome-icon icon="trash-alt" class="header-icon" :class="{ disabled: selectedFiles.length === 0 }" @click="handleBatchDelete"></font-awesome-icon>
</el-tooltip>
<el-tooltip content="用户管理" placement="bottom">
<el-tooltip :disabled="disableTooltip" content="用户管理" placement="bottom">
<font-awesome-icon icon="user-cog" class="header-icon" @click="handleGoToAdmin"></font-awesome-icon>
</el-tooltip>
<el-tooltip content="返回上传页" placement="bottom">
<el-tooltip :disabled="disableTooltip" content="返回上传页" placement="bottom">
<font-awesome-icon icon="upload" class="header-icon" @click="handleGoUpload"></font-awesome-icon>
</el-tooltip>
<el-tooltip content="退出登录" placement="bottom">
<el-tooltip :disabled="disableTooltip" content="退出登录" placement="bottom">
<font-awesome-icon icon="sign-out-alt" class="header-icon" @click="handleLogout"></font-awesome-icon>
</el-tooltip>
</div>
Expand All @@ -51,22 +51,22 @@
<el-image v-else :preview-teleported="true" :src="'/file/' + item.name" :preview-src-list="item.previewSrcList" fit="cover" lazy class="image-preview"></el-image>
<div class="image-overlay">
<div class="overlay-buttons">
<el-tooltip content="复制链接" placement="top">
<el-tooltip :disabled="disableTooltip" content="复制链接" placement="top">
<el-button size="mini" type="primary" @click.stop="handleCopy(index, item.name)">
<font-awesome-icon icon="copy"></font-awesome-icon>
</el-button>
</el-tooltip>
<el-tooltip content="下载" placement="top">
<el-tooltip :disabled="disableTooltip" content="下载" placement="top">
<el-button size="mini" type="primary" @click.stop="handleDownload(item.name)">
<font-awesome-icon icon="download"></font-awesome-icon>
</el-button>
</el-tooltip>
<el-tooltip content="详情" placement="top">
<el-tooltip :disabled="disableTooltip" content="详情" placement="top">
<el-button size="mini" type="primary" @click.stop="openDetailDialog(index, item.name)">
<font-awesome-icon icon="info"></font-awesome-icon>
</el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-tooltip :disabled="disableTooltip" content="删除" placement="top">
<el-button size="mini" type="danger" @click.stop="handleDelete(index, item.name)">
<font-awesome-icon icon="trash-alt"></font-awesome-icon>
</el-button>
Expand Down Expand Up @@ -208,6 +208,9 @@ computed: {
},
tablePreviewSpan() {
return window.innerWidth > 768 ? 2 : 1;
},
disableTooltip() {
return window.innerWidth < 768;
}
},
watch: {
Expand Down
11 changes: 7 additions & 4 deletions src/views/CustomerConfig.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@
<div class="header-content">
<span class="title">用户管理</span>
<div class="header-action">
<el-tooltip content="返回主管理页" placement="bottom">
<el-tooltip :disabled="disableTooltip" content="返回主管理页" placement="bottom">
<font-awesome-icon icon="home" class="header-icon" @click="handleGoHome"></font-awesome-icon>
</el-tooltip>
<el-tooltip content="返回上传页" placement="bottom">
<el-tooltip :disabled="disableTooltip" content="返回上传页" placement="bottom">
<font-awesome-icon icon="upload" class="header-icon" @click="handleGoUpload"></font-awesome-icon>
</el-tooltip>
<el-tooltip content="退出登录" placement="bottom">
<el-tooltip :disabled="disableTooltip" content="退出登录" placement="bottom">
<font-awesome-icon icon="sign-out-alt" class="header-icon" @click="handleLogout"></font-awesome-icon>
</el-tooltip>
</div>
Expand All @@ -37,7 +37,10 @@ export default {
}
},
computed: {
...mapGetters(['credentials'])
...mapGetters(['credentials']),
disableTooltip() {
return window.innerWidth < 768;
}
},
methods: {
async fetchWithAuth(url, options = {}) {
Expand Down
11 changes: 7 additions & 4 deletions src/views/UploadHome.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,22 @@
<img id="bg1" class="background-image1" alt="Background Image"/>
<img id="bg2" class="background-image2" alt="Background Image"/>
<div class="toolbar">
<el-tooltip content="压缩设置" placement="left">
<el-tooltip :disabled="disableTooltip" content="压缩设置" placement="left">
<el-button class="toolbar-button" size="large" @click="openCompressDialog" circle>
<font-awesome-icon icon="file-archive" class="compress-icon" size="lg"/>
</el-button>
</el-tooltip>
<el-tooltip content="链接格式" placement="left">
<el-tooltip :disabled="disableTooltip" content="链接格式" placement="left">
<el-button class="toolbar-button" size="large" @click="openUrlDialog" circle>
<font-awesome-icon icon="link" class="link-icon" size="lg"/>
</el-button>
</el-tooltip>
<el-tooltip content="管理页面" placement="left">
<el-tooltip :disabled="disableTooltip" content="管理页面" placement="left">
<el-button class="toolbar-button" size="large" @click="handleManage" circle>
<font-awesome-icon icon="cog" class="config-icon" size="lg"/>
</el-button>
</el-tooltip>
<el-tooltip content="退出登录" placement="left">
<el-tooltip :disabled="disableTooltip" content="退出登录" placement="left">
<el-button class="toolbar-button" size="large" @click="handleLogout" circle>
<font-awesome-icon icon="sign-out-alt" class="sign-out-icon" size="lg"/>
</el-button>
Expand Down Expand Up @@ -145,6 +145,9 @@ export default {
},
dialogWidth() {
return window.innerWidth > 768 ? '40%' : '80%'
},
disableTooltip() {
return window.innerWidth < 768
}
},
mounted() {
Expand Down

0 comments on commit a11a0bd

Please sign in to comment.