feat(FileTable): 添加多选模式切换功能

添加多选按钮用于切换表格的选择模式,当退出多选模式时清空已选项
This commit is contained in:
Wenjie Zhang 2026-01-02 15:02:04 +08:00
parent 302175e0b0
commit f8ee1df96c

View File

@ -33,6 +33,14 @@
title="刷新" title="刷新"
class="panel-action-btn" class="panel-action-btn"
/> />
<a-button
type="text"
@click="toggleSelectionMode"
:icon="h(CheckSquare)"
title="多选"
class="panel-action-btn"
:class="{ 'active': isSelectionMode }"
/>
<!-- <a-button <!-- <a-button
@click="toggleAutoRefresh" @click="toggleAutoRefresh"
size="small" size="small"
@ -130,11 +138,11 @@
:pagination="paginationCompact" :pagination="paginationCompact"
v-model:expandedRowKeys="expandedRowKeys" v-model:expandedRowKeys="expandedRowKeys"
:custom-row="customRow" :custom-row="customRow"
:row-selection="{ :row-selection="isSelectionMode ? {
selectedRowKeys: selectedRowKeys, selectedRowKeys: selectedRowKeys,
onChange: onSelectChange, onChange: onSelectChange,
getCheckboxProps: getCheckboxProps getCheckboxProps: getCheckboxProps
}" } : null"
:locale="{ :locale="{
emptyText: emptyText emptyText: emptyText
}"> }">
@ -230,6 +238,7 @@ import {
ChevronLast, ChevronLast,
Ellipsis, Ellipsis,
FolderPlus, FolderPlus,
CheckSquare,
} from 'lucide-vue-next'; } from 'lucide-vue-next';
const store = useDatabaseStore(); const store = useDatabaseStore();
@ -259,6 +268,8 @@ const selectedRowKeys = computed({
set: (keys) => store.selectedRowKeys = keys, set: (keys) => store.selectedRowKeys = keys,
}); });
const isSelectionMode = ref(false);
const expandedRowKeys = ref([]); const expandedRowKeys = ref([]);
// //
@ -288,6 +299,13 @@ const toggleExpand = (record) => {
} }
}; };
const toggleSelectionMode = () => {
isSelectionMode.value = !isSelectionMode.value;
if (!isSelectionMode.value) {
selectedRowKeys.value = [];
}
};
const handleCreateFolder = async () => { const handleCreateFolder = async () => {
if (!newFolderName.value.trim()) { if (!newFolderName.value.trim()) {
message.warning('请输入文件夹名称'); message.warning('请输入文件夹名称');
@ -863,7 +881,7 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue';
.panel-actions { .panel-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 0px;
.action-searcher { .action-searcher {
width: 120px; width: 120px;
@ -1030,6 +1048,11 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue';
/* border: 1px solid var(--main-100); */ /* border: 1px solid var(--main-100); */
} }
.panel-action-btn.active {
color: var(--main-color);
background-color: var(--main-10);
}
.action-trigger-btn { .action-trigger-btn {
padding: 0; padding: 0;
width: 24px; width: 24px;