ow
This commit is contained in:
1 parent
428c94951b
commit
eb7a9e9b88
4 files changed
+57
-33
No files matched your search
@@ -3,42 +3,42 @@
|
||||
<a-col flex="auto">
|
||||
<a-row>
|
||||
<a-col flex="400px">
|
||||
<a-row justify="start">
|
||||
<a-col :span="2" style="margin-left: 8px">
|
||||
<a-row justify="start" class="ops-row">
|
||||
<a-col flex="32px" style="margin-left: 8px">
|
||||
<a-tooltip title="新建文件夹">
|
||||
<a-button v-if="canCreate" class="nav-btn" :icon="h(FolderAddOutlined)"
|
||||
@click="$emit('create-folder')"></a-button>
|
||||
</a-tooltip>
|
||||
</a-col>
|
||||
<a-col :span="2">
|
||||
<a-col flex="32px">
|
||||
<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 :span="2" v-if="!isDirectorySelected && isSingleItem">
|
||||
<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 :span="2" v-if="!isDirectorySelected && (isSingleItem || isSameMediaTypeSelected)">
|
||||
<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 :span="2" v-if="isSingleItem">
|
||||
<a-col flex="32px" v-if="isSingleItem">
|
||||
<a-tooltip title="重命名">
|
||||
<a-button class="nav-btn" :icon="h(EditOutlined)" :disabled="!canAmend"
|
||||
@click="$emit('rename', selectedItems)"></a-button>
|
||||
</a-tooltip>
|
||||
</a-col>
|
||||
<a-col :span="2" v-if="isSingleItem">
|
||||
<a-col flex="32px" v-if="isSingleItem">
|
||||
<a-tooltip title="移动">
|
||||
<a-button class="nav-btn" :icon="h(RotateRightOutlined)" :disabled="!canAmend"
|
||||
@click="$emit('move', selectedItems)"></a-button>
|
||||
</a-tooltip>
|
||||
</a-col>
|
||||
<a-col :span="2" v-if="hasSelection">
|
||||
<a-col flex="32px" v-if="hasSelection">
|
||||
<a-tooltip title="删除">
|
||||
<a-popconfirm title="确定是否删除?" ok-text="是" cancel-text="否" @confirm="$emit('delete', selectedItems)">
|
||||
<a-button class="nav-btn" :icon="h(DeleteOutlined, { style: { color: 'red' } })"
|
||||
@@ -46,24 +46,24 @@
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
</a-col>
|
||||
<a-col :span="2" v-if="!isDirectorySelected && (isSingleItem || isSameMediaTypeSelected)">
|
||||
<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 :span="2" v-if="!isDirectorySelected && isSingleItem">
|
||||
<a-col flex="32px" v-if="!isDirectorySelected && isSingleItem">
|
||||
<a-tooltip :title="previewTooltip">
|
||||
<a-button class="nav-btn" @click="onViewPreview"><cust-icon-font size="16"
|
||||
type="icon-qingbaojiankong" /></a-button>
|
||||
</a-tooltip>
|
||||
</a-col>
|
||||
<a-col :span="2" 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 :span="2" v-if="!isDirectorySelected && isSingleItem && isSingleAudio" style="margin-left: 4px">
|
||||
<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>
|
||||
@@ -298,13 +298,21 @@ const onContinueAudio = () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 按钮之间统一 8px 间距。
|
||||
原来是靠 24 栅格 span=2 撑开的,间距会随容器宽度变化(400px 时只有 1px 左右),
|
||||
现在按钮列固定 32px(与 .nav-btn 同宽),真正的间距交给 gap:8px */
|
||||
.ops-row {
|
||||
gap: 8px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 28px;
|
||||
height: 26px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
|
||||
@@ -3,21 +3,21 @@
|
||||
<a-col flex="auto">
|
||||
<a-row>
|
||||
<a-col flex="300px">
|
||||
<a-row justify="start">
|
||||
<a-col :span="3" style="margin-left: 8px">
|
||||
<a-row justify="start" class="ops-row">
|
||||
<a-col flex="28px" 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 :span="3">
|
||||
<a-col flex="28px">
|
||||
<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 :span="3" v-if="hasSelection">
|
||||
<a-col flex="28px" 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 :span="3" v-if="!isDirectorySelected && isSingleItem && isSingleVideo">
|
||||
<a-col flex="28px" 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 :span="3" v-if="!isDirectorySelected && isSingleItem && isSingleAudio">
|
||||
<a-col flex="28px" 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>
|
||||
@@ -184,6 +184,14 @@ const onContinueAudio = () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 按钮之间统一 8px 间距。
|
||||
原来是靠 24 栅格 span=3 撑开的,间距会随容器宽度变化,
|
||||
现在按钮列固定 28px(与 .nav-btn 同宽),真正的间距交给 gap */
|
||||
.ops-row {
|
||||
gap: 8px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 28px;
|
||||
height: 26px;
|
||||
|
||||
@@ -3,33 +3,33 @@
|
||||
<a-col flex="auto">
|
||||
<a-row>
|
||||
<a-col flex="300px">
|
||||
<a-row justify="start">
|
||||
<a-col :span="3" style="margin-left: 8px">
|
||||
<a-row justify="start" class="ops-row">
|
||||
<a-col flex="32px" style="margin-left: 8px">
|
||||
<a-tooltip title="新建文件夹">
|
||||
<a-button class="nav-btn" v-if="canCreate" :icon="h(FolderAddOutlined)" :disabled="isDirectoryTop"
|
||||
@click="$emit('create-folder')"></a-button>
|
||||
</a-tooltip>
|
||||
</a-col>
|
||||
<a-col :span="3" v-if="!isDirectorySelected && isSingleItem">
|
||||
<a-col flex="32px" v-if="!isDirectorySelected && isSingleItem">
|
||||
<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 :span="3" v-if="hasSelection">
|
||||
<a-col flex="32px" v-if="hasSelection">
|
||||
<a-tooltip title="删除">
|
||||
<a-popconfirm title="确定是否删除?" ok-text="是" cancel-text="否" @confirm="$emit('delete', selectedItems)">
|
||||
<a-button class="nav-btn" :icon="h(DeleteOutlined)" style="color:red;"></a-button>
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
</a-col>
|
||||
<a-col :span="3" 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 :span="3" 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>
|
||||
@@ -42,7 +42,7 @@
|
||||
@click="onContinueAudio"></a-button>
|
||||
</a-tooltip>
|
||||
</a-col>
|
||||
<a-col :span="3" v-if="isDirectorySelected">
|
||||
<a-col flex="32px" v-if="isDirectorySelected">
|
||||
<a-tooltip :title="favorite">
|
||||
<a-button class="nav-btn" :icon="h(ShareAltOutlined)"
|
||||
@click="$emit('set-share-folder')"></a-button>
|
||||
@@ -211,6 +211,14 @@ const onContinueAudio = () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 按钮之间统一 8px 间距。
|
||||
原来是靠 24 栅格 span=3 撑开的,间距会随容器宽度变化,
|
||||
现在按钮列固定 32px,真正的间距交给 gap */
|
||||
.ops-row {
|
||||
gap: 8px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.operator-station {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -109,7 +109,7 @@
|
||||
>
|
||||
</a-input-search>
|
||||
<a-button size="small" type="default" @click="viewMode = 'list'" style="height: 32px;">
|
||||
<cust-icon-font size="16" type="icon-gongcheng" />
|
||||
<cust-icon-font size="32" type="icon-gongcheng" />
|
||||
</a-button>
|
||||
</div>
|
||||
</a-col> </a-row
|
||||
@@ -133,7 +133,7 @@
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
<a-button size="small" type="default" @click="viewMode = 'search'">
|
||||
@@ -156,7 +156,7 @@
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
<a-button
|
||||
@@ -263,11 +263,11 @@ const onRefresh = () => {
|
||||
<style lang="less">
|
||||
.nav-btn {
|
||||
width: 36px;
|
||||
height: 32px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
|
||||
Reference in new issue
Block a user