This commit is contained in:
owenchen committed 2026-09-23 16:32:57 +08:00
1 parent 0814ec40a2
commit 70e1c729ae
5 files changed
+140 -235

No files matched your search

+16 -13
View File
@@ -14,18 +14,25 @@
<a-tooltip title="上传文件">
<a-button v-if="canCreate" :icon="h(UploadOutlined)" type="primary" class="nav-btn"
@click="triggerUpload">
</a-button> </a-tooltip></a-col>
<a-col flex="32px" v-if="!isDirectorySelected && isSingleItem">
<a-tooltip title="下载">
<a-button class="nav-btn" :icon="h(DownloadOutlined)" :disabled="!canAmend"
@click="onDownload"></a-button>
</a-tooltip>
</a-button> </a-tooltip>
</a-col>
<a-col flex="32px" v-if="!isDirectorySelected && (isSingleItem || isSameMediaTypeSelected)">
<a-tooltip title="共享">
<a-button class="nav-btn" :icon="h(ShareAltOutlined)" @click="onShare"></a-button>
</a-tooltip>
</a-col>
<a-col flex="32px" v-if="!isDirectorySelected && (isSingleItem || isSameMediaTypeSelected)">
<a-tooltip :title="publishTooltip">
<a-button class="nav-btn" :icon="h(NotificationOutlined)" @click="onPublish"></a-button>
</a-tooltip>
</a-col>
<a-col flex="32px" v-if="!isDirectorySelected && isSingleItem">
<a-tooltip title="下载">
<a-button class="nav-btn" :icon="h(DownloadOutlined)" :disabled="!canAmend"
@click="onDownload"></a-button>
</a-tooltip>
</a-col>
<a-col flex="32px" v-if="isSingleItem">
<a-tooltip title="重命名">
<a-button class="nav-btn" :icon="h(EditOutlined)" :disabled="!canAmend"
@@ -46,11 +53,6 @@
</a-popconfirm>
</a-tooltip>
</a-col>
<a-col flex="32px" v-if="!isDirectorySelected && (isSingleItem || isSameMediaTypeSelected)">
<a-tooltip :title="publishTooltip">
<a-button class="nav-btn" :icon="h(NotificationOutlined)" @click="onPublish"></a-button>
</a-tooltip>
</a-col>
<a-col flex="32px" v-if="!isDirectorySelected && isSingleItem">
<a-tooltip :title="previewTooltip">
<a-button class="nav-btn" @click="onViewPreview"><cust-icon-font size="16"
@@ -302,7 +304,8 @@ const onContinueAudio = () => {
原来是靠 24 栅格 span=2 撑开的,间距会随容器宽度变化(400px 时只有 1px 左右),
现在按钮列固定 32px(与 .nav-btn 同宽),真正的间距交给 gap:8px */
.ops-row {
gap: 8px;
gap: 4px;
margin-top: 4px;
flex-wrap: nowrap;
}
@@ -312,7 +315,7 @@ const onContinueAudio = () => {
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border-radius: 4px;
}
.nav-btn:hover:not(:disabled) {
@@ -2,22 +2,22 @@
<a-row :wrap="false">
<a-col flex="auto">
<a-row>
<a-col flex="300px">
<a-col flex="400px">
<a-row justify="start" class="ops-row">
<a-col flex="28px" style="margin-left: 8px">
<a-col flex="32px" style="margin-left: 8px">
<a-tooltip title="还原">
<a-button class="nav-btn" :icon="h(UndoOutlined)" style="color:green;"
:disabled="!hasSelection" @click="$emit('restore', selectedItems)"></a-button>
</a-tooltip>
</a-col>
<a-col flex="28px">
<a-col flex="32px">
<a-tooltip title="下载">
<a-button class="nav-btn" :icon="h(DownloadOutlined)"
:disabled="!hasSelection || isDirectorySelected || !isSingleItem"
@click="onDownload"></a-button>
</a-tooltip>
</a-col>
<a-col flex="28px" v-if="hasSelection">
<a-col flex="32px" v-if="hasSelection">
<a-tooltip title="删除">
<a-popconfirm title="确定是否删除?" ok-text="是" cancel-text="否"
@confirm="$emit('delete', selectedItems)">
@@ -25,13 +25,13 @@
:disabled="!canCreate"></a-button></a-popconfirm>
</a-tooltip>
</a-col>
<a-col flex="28px" v-if="!isDirectorySelected && isSingleItem && isSingleVideo">
<a-col flex="32px" v-if="!isDirectorySelected && isSingleItem && isSingleVideo">
<a-tooltip>
<a-button class="nav-btn" @click="onPlayVideo"><cust-icon-font size="16"
type="icon-foldervideo" /></a-button>
</a-tooltip>
</a-col>
<a-col flex="28px" v-if="!isDirectorySelected && isSingleItem && isSingleAudio">
<a-col flex="32px" v-if="!isDirectorySelected && isSingleItem && isSingleAudio">
<a-tooltip v-if="selectedItem.IsPlay != 'Y'">
<a-button class="nav-btn" :icon="h(PlayCircleOutlined, { style: { color: 'red' } })"
@click="onPlayAudio"></a-button>
@@ -188,17 +188,19 @@ const onContinueAudio = () => {
原来是靠 24 栅格 span=3 撑开的,间距会随容器宽度变化,
现在按钮列固定 28px(与 .nav-btn 同宽),真正的间距交给 gap */
.ops-row {
gap: 8px;
flex-wrap: nowrap;
gap: 4px;
margin-top: 4px;
flex-wrap: nowrap;
}
.nav-btn {
width: 28px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.nav-btn:hover:not(:disabled) {
@@ -2,7 +2,7 @@
<a-row :wrap="false">
<a-col flex="auto">
<a-row>
<a-col flex="300px">
<a-col flex="400px">
<a-row justify="start" class="ops-row">
<a-col flex="32px" style="margin-left: 8px">
<a-tooltip title="新建文件夹">
@@ -215,7 +215,8 @@ const onContinueAudio = () => {
原来是靠 24 栅格 span=3 撑开的,间距会随容器宽度变化,
现在按钮列固定 32px,真正的间距交给 gap */
.ops-row {
gap: 8px;
gap: 4px;
margin-top: 4px;
flex-wrap: nowrap;
}
+64 -128
View File
@@ -2,183 +2,109 @@
<a-row :wrap="false">
<a-col flex="auto">
<a-row>
<a-col flex="100px">
<a-row justify="start">
<a-col :span="8"
><a-tooltip title="返回顶层">
<a-button
type="text"
class="nav-btn"
:disabled="!canGoTop"
@click="$emit('go-top')"
>
<a-col>
<a-row justify="start" class="ops-row" style="margin-left: 8px">
<a-col :span="8"><a-tooltip title="返回顶层">
<a-button class="nav-btn" :disabled="!canGoTop" @click="$emit('go-top')">
<HomeOutlined />
</a-button> </a-tooltip
></a-col>
<a-col :span="8"
><a-tooltip title="返回上层">
<a-button
type="text"
class="nav-btn"
:disabled="!canGoBack"
@click="$emit('go-back')"
>
</a-button> </a-tooltip></a-col>
<a-col :span="8"><a-tooltip title="返回上层">
<a-button class="nav-btn" :disabled="!canGoBack" @click="$emit('go-back')">
<ArrowLeftOutlined />
</a-button> </a-tooltip
></a-col>
<a-col :span="8"
><a-tooltip title="刷新">
<a-button
type="text"
class="nav-btn"
:loading="loading"
@click="onRefresh"
>
</a-button> </a-tooltip></a-col>
<a-col :span="8"><a-tooltip title="刷新">
<a-button class="nav-btn" :loading="loading" @click="onRefresh">
<ReloadOutlined />
</a-button> </a-tooltip
></a-col>
</a-button> </a-tooltip></a-col>
</a-row>
</a-col>
<a-col :xs="0" :sm="0" :lg="20" flex="auto">
<div
class="toolbar-center"
style="margin-top: 5px; margin-left: 10px"
>
<div class="toolbar-center" style="margin-top: 5px; margin-left: 10px">
<a-breadcrumb class="breadcrumb">
<a-breadcrumb-item
v-for="(item, index) in breadcrumbItems"
:key="index"
@click="onBreadcrumbClick(item, index)"
:class="{ clickable: index < breadcrumbItems.length - 1 }"
>
<a-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index"
@click="onBreadcrumbClick(item, index)" :class="{ clickable: index < breadcrumbItems.length - 1 }">
<template v-if="index === 0">
<LaptopOutlined style="margin-right: 4px" />
</template>
<template v-else>
<FolderOutlined style="margin-right: 4px" />
</template>
<span
:style="{
cursor:
index < breadcrumbItems.length - 1
? 'pointer'
: 'default',
color: index < breadcrumbItems.length - 1 ? '#1677ff' : '',
}"
>{{ item.displayName }}</span
>
<span :style="{
cursor:
index < breadcrumbItems.length - 1
? 'pointer'
: 'default',
color: index < breadcrumbItems.length - 1 ? '#1677ff' : '',
}">{{ item.displayName }}</span>
</a-breadcrumb-item>
</a-breadcrumb>
</div>
</a-col>
<a-col :xs="10" :sm="10" :lg="0" flex="auto">
<div
v-if="viewMode == 'list'"
style="
<a-col :xs="20" :sm="20" :lg="0" flex="auto" :style="viewMode === 'list' ? {
border: '1px solid #e5e5e5',
borderLeft: 'none',
borderRight: 'none'
} : {}">
<div v-if="viewMode == 'list'" style="
margin-top: 8px;
margin-left: 10px;
display: flex;
align-items: center;
"
>
">
<FolderOutlined style="margin-right: 4px" />
<span class="breadcrumb-text">{{
<span @click="viewMode = 'search'" class="breadcrumb-text">{{
breadcrumbItems.length > 0
? breadcrumbItems[breadcrumbItems.length - 1].displayName
: ""
}}</span>
</div>
<div
style="
<div style="
max-width: 260px;
min-width: 220px;
margin-left: 20px;
margin-top: -2px;
display: flex;
justify-content: center;
margin-left:6px;
gap: 4px;
"
v-else
>
<a-input-search
v-model:value="searchKeyword"
placeholder="搜索文件名称"
allow-clear
@search="onSearch"
@pressEnter="onSearch"
>
" v-else>
<a-input-search v-model:value="searchKeyword" placeholder="搜索文件名称" allow-clear @search="onSearch"
@pressEnter="onSearch">
</a-input-search>
<a-button size="small" type="default" @click="viewMode = 'list'" style="height: 32px;">
<cust-icon-font size="32" type="icon-gongcheng" />
</a-button>
<!-- <a-button size="small" type="default" @click="viewMode = 'list'" style="height: 32px;">
<cust-icon-font size="32" type="icon-gongcheng" />
</a-button> -->
</div>
</a-col> </a-row
></a-col>
</a-col>
</a-row>
</a-col>
<a-col :xs="0" :sm="0" :lg="10" flex="none">
<div style="margin-bottom: 8px; margin-right: 8px">
<a-input-search
v-model:value="searchKeyword"
placeholder="搜索文件名称"
allow-clear
@search="onSearch"
@pressEnter="onSearch"
>
<a-input-search v-model:value="searchKeyword" placeholder="搜索文件名称" allow-clear @search="onSearch"
@pressEnter="onSearch">
</a-input-search>
</div>
</a-col>
<a-col :xs="4" :sm="4" :lg="0" flex="none">
<div
v-if="viewMode == 'list'"
style="
<div v-if="viewMode == 'list'" style="
margin-right: 20px;
display: flex;
justify-content: center;
gap: 8px;
"
>
<a-button size="small" type="default" @click="viewMode = 'search'">
gap: 2px;
">
<a-button class="nav-btn" @click="viewMode = 'search'">
<cust-icon-font size="14" type="icon-sousuo" />
</a-button>
<a-button
size="small"
type="default"
title="使用帮助"
@click="helpVisible = true"
>
<!-- <a-button size="small" type="default" title="使用帮助" @click="helpVisible = true">
<cust-icon-font size="14" type="icon-help" />
</a-button>
</a-button> -->
</div>
</a-col>
<a-col :xs="0" :sm="0" :lg="1" flex="none">
<div
v-if="viewMode == 'list'"
style="
margin-right: 20px;
display: flex;
justify-content: center;
gap: 8px;
"
>
<a-button
style="height: 32px"
size="small"
type="default"
title="使用帮助"
@click="helpVisible = true"
>
<cust-icon-font size="16" type="icon-help" />
</a-button>
</div>
</a-col>
<!-- 使用帮助弹窗:内容默认取「我的云盘」页面说明,父组件可用 #help 插槽覆盖 -->
<!-- 宽度不写死:跟随 DragModal 的默认宽度(视口 90%) -->
<dragModal
v-model:open="helpVisible"
title="我的云盘 · 使用帮助"
:footer="null"
:fullscreen="width < 640"
>
<dragModal v-model:open="helpVisible" title="我的云盘 · 使用帮助" :footer="null" :fullscreen="width < 640">
<slot name="help">
<DmsFileEnquiryHelp />
</slot>
@@ -254,6 +180,7 @@ const onBreadcrumbClick = (item: BreadcrumbItem, index: number) => {
* 不能取第一个节点,否则会把路径截回到根目录,变成跳转而不是刷新。
*/
const onRefresh = () => {
viewMode.value = 'list';
const lastIndex = breadcrumbItems.value.length - 1;
if (lastIndex < 0) return;
onBreadcrumbClick(breadcrumbItems.value[lastIndex], lastIndex);
@@ -261,13 +188,21 @@ const onRefresh = () => {
</script>
<style lang="less">
/* 按钮之间统一 8px 间距。
原来是靠 24 栅格 span=2 撑开的,间距会随容器宽度变化(400px 时只有 1px 左右),
现在按钮列固定 32px(与 .nav-btn 同宽),真正的间距交给 gap:8px */
.ops-row {
gap: 2px;
flex-wrap: nowrap;
}
.nav-btn {
width: 36px;
height: 36px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border-radius: 4px;
}
.nav-btn:hover:not(:disabled) {
@@ -303,7 +238,8 @@ const onRefresh = () => {
.breadcrumb-text {
display: inline-block;
max-width: 16ch; /* 6个字符宽度,ch 按字符计算 */
max-width: 16ch;
/* 6个字符宽度,ch 按字符计算 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;