|
33 | 33 | title="刷新" |
34 | 34 | class="panel-action-btn" |
35 | 35 | /> |
| 36 | + <a-button |
| 37 | + type="text" |
| 38 | + @click="toggleSelectionMode" |
| 39 | + :icon="h(CheckSquare)" |
| 40 | + title="多选" |
| 41 | + class="panel-action-btn" |
| 42 | + :class="{ 'active': isSelectionMode }" |
| 43 | + /> |
36 | 44 | <!-- <a-button |
37 | 45 | @click="toggleAutoRefresh" |
38 | 46 | size="small" |
|
130 | 138 | :pagination="paginationCompact" |
131 | 139 | v-model:expandedRowKeys="expandedRowKeys" |
132 | 140 | :custom-row="customRow" |
133 | | - :row-selection="{ |
| 141 | + :row-selection="isSelectionMode ? { |
134 | 142 | selectedRowKeys: selectedRowKeys, |
135 | 143 | onChange: onSelectChange, |
136 | 144 | getCheckboxProps: getCheckboxProps |
137 | | - }" |
| 145 | + } : null" |
138 | 146 | :locale="{ |
139 | 147 | emptyText: emptyText |
140 | 148 | }"> |
@@ -230,6 +238,7 @@ import { |
230 | 238 | ChevronLast, |
231 | 239 | Ellipsis, |
232 | 240 | FolderPlus, |
| 241 | + CheckSquare, |
233 | 242 | } from 'lucide-vue-next'; |
234 | 243 |
|
235 | 244 | const store = useDatabaseStore(); |
@@ -259,6 +268,8 @@ const selectedRowKeys = computed({ |
259 | 268 | set: (keys) => store.selectedRowKeys = keys, |
260 | 269 | }); |
261 | 270 |
|
| 271 | +const isSelectionMode = ref(false); |
| 272 | +
|
262 | 273 | const expandedRowKeys = ref([]); |
263 | 274 |
|
264 | 275 | // 新建文件夹相关 |
@@ -288,6 +299,13 @@ const toggleExpand = (record) => { |
288 | 299 | } |
289 | 300 | }; |
290 | 301 |
|
| 302 | +const toggleSelectionMode = () => { |
| 303 | + isSelectionMode.value = !isSelectionMode.value; |
| 304 | + if (!isSelectionMode.value) { |
| 305 | + selectedRowKeys.value = []; |
| 306 | + } |
| 307 | +}; |
| 308 | +
|
291 | 309 | const handleCreateFolder = async () => { |
292 | 310 | if (!newFolderName.value.trim()) { |
293 | 311 | message.warning('请输入文件夹名称'); |
@@ -863,7 +881,7 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue'; |
863 | 881 | .panel-actions { |
864 | 882 | display: flex; |
865 | 883 | align-items: center; |
866 | | - gap: 6px; |
| 884 | + gap: 0px; |
867 | 885 |
|
868 | 886 | .action-searcher { |
869 | 887 | width: 120px; |
@@ -1030,6 +1048,11 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue'; |
1030 | 1048 | /* border: 1px solid var(--main-100); */ |
1031 | 1049 | } |
1032 | 1050 |
|
| 1051 | +.panel-action-btn.active { |
| 1052 | + color: var(--main-color); |
| 1053 | + background-color: var(--main-10); |
| 1054 | +} |
| 1055 | +
|
1033 | 1056 | .action-trigger-btn { |
1034 | 1057 | padding: 0; |
1035 | 1058 | width: 24px; |
|
0 commit comments