feat: add option to show deleted objects in object list

AGENTS.md

@@ -19,6 +19,7 @@
 ## Coding Style & Naming Conventions
 
 - Use Prettier defaults (see `.prettierrc.ts`); run `pnpm lint` or `pnpm lint:fix`.
+- **Always run `pnpm run lint:fix` after making code changes to ensure formatting compliance before committing.**
 - Vue files use `<script setup>` with TypeScript; prefer composables for shared logic.
 - Component files use **kebab-case** (e.g. `bucket-selector.vue`), but reference them using **StudlyCase** in templates (e.g. `<BucketSelector />`).
 - Override shadcn primitives **outside** `components/ui/`; never edit files in that directory directly.

components/object/list.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="space-y-6">
     <page-header>
-      <SearchInput v-model="searchTerm" :placeholder="t('Search')" clearable />
+      <div class="flex flex-wrap items-center gap-4 min-w-[40vw]">
+        <SearchInput v-model="searchTerm" :placeholder="t('Search')" clearable class="lg:max-w-sm" />
+        <label class="flex items-center gap-2 text-sm text-muted-foreground">
+          <Checkbox v-model="showDeleted" />
+          <span>{{ t('Show Deleted Objects') }}</span>
+        </label>
+      </div>
       <template #actions>
         <object-upload-stats />
         <object-delete-stats />
@@ -81,11 +87,15 @@
 
 <script setup lang="ts">
 import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+
+import { useLocalStorage } from '@vueuse/core'
 
 import { Icon, NuxtLink } from '#components'
 import DataTable from '@/components/data-table/data-table.vue'
 import { useDataTable } from '@/components/data-table/useDataTable'
 import { ListObjectsV2Command } from '@aws-sdk/client-s3'
+import type { HttpRequest } from '@smithy/protocol-http'
 import type { ColumnDef } from '@tanstack/vue-table'
 import dayjs from 'dayjs'
 import { saveAs } from 'file-saver'
@@ -107,6 +117,7 @@ const newObjectFormVisible = ref(false)
 const newObjectAsPrefix = ref(false)
 const searchTerm = ref('')
 const loading = ref(false)
+const showDeleted = useLocalStorage('object-list-show-deleted', false)
 
 const debounce = (fn: Function, delay: number) => {
   let timer: NodeJS.Timeout | null = null
@@ -172,15 +183,26 @@ const handleObjectDeleted = () => {
 const fetchObjects = async (): Promise<ObjectRow[]> => {
   loading.value = true
   try {
-    const response = await $s3Client.send(
-      new ListObjectsV2Command({
-        Bucket: bucketName.value,
-        Prefix: prefix.value,
-        Delimiter: '/',
-        ContinuationToken: continuationToken.value,
-        MaxKeys: pageSize.value,
-      })
-    )
+    const command = new ListObjectsV2Command({
+      Bucket: bucketName.value,
+      Prefix: prefix.value,
+      Delimiter: '/',
+      ContinuationToken: continuationToken.value,
+      MaxKeys: pageSize.value,
+    })
+
+    if (showDeleted.value) {
+      command.middlewareStack.add(
+        next => async args => {
+          const request = args.request as HttpRequest
+          request.headers['X-Rustfs-Include-Deleted'] = 'true'
+          return next(args)
+        },
+        { step: 'build', name: 'includeDeletedObjectsMiddleware', tags: ['INCLUDE_DELETED'] }
+      )
+    }
+
+    const response = await $s3Client.send(command)
 
     nextToken.value = response.NextContinuationToken
 
@@ -200,12 +222,17 @@ const fetchObjects = async (): Promise<ObjectRow[]> => {
 
     return [...prefixItems, ...objectItems]
   } finally {
-    loading.value = false
+    // 200ms delay to avoid flickering
+    setTimeout(() => {
+      loading.value = false
+    }, 200)
   }
 }
 
 const asyncDataCacheKey = computed(() => {
-  return `objects-${bucketName.value}-${prefix.value}-${continuationToken.value || 'start'}-${searchTerm.value || 'all'}`
+  return `objects-${bucketName.value}-${prefix.value}-${continuationToken.value || 'start'}-${searchTerm.value || 'all'}-${
+    showDeleted.value ? 'withDeleted' : 'withoutDeleted'
+  }`
 })
 
 const displayKey = (key: string) => {
@@ -229,10 +256,16 @@ const { data, refresh } = await useAsyncData<ObjectRow[]>(
   },
   {
     default: () => [],
-    watch: [bucketName, prefix, continuationToken, searchTerm],
+    watch: [bucketName, prefix, continuationToken, searchTerm, showDeleted],
   }
 )
 
+watch(showDeleted, () => {
+  continuationToken.value = undefined
+  tokenHistory.value = []
+  refresh()
+})
+
 const columns = computed<ColumnDef<ObjectRow, any>[]>(() => {
   return [
     {

components/page-header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sticky bg-background top-0 z-10 flex flex-col justify-between gap-2 md:flex-row">
+  <div class="sticky bg-background top-0 z-10 flex flex-col justify-between gap-2 lg:flex-row">
     <div class="space-y-2">
       <slot />
       <slot name="description"></slot>

i18n/locales/en-US.json

@@ -444,6 +444,7 @@
   "No KMS keys found": "No KMS keys found",
   "No License": "No License",
   "No Objects": "No Objects",
+  "Show Deleted Objects": "Show Deleted Objects",
   "No Policies": "No Policies",
   "No Selection": "No Selection",
   "No Tasks": "No Tasks",

i18n/locales/tr-TR.json

@@ -444,6 +444,7 @@
   "No KMS keys found": "KMS anahtarı bulunamadı",
   "No License": "No License",
   "No Objects": "No Objects",
+  "Show Deleted Objects": "Show Deleted Objects",
   "No Policies": "No Policies",
   "No Selection": "Seçim Yok",
   "No Tasks": "Görev Yok",

i18n/locales/zh-CN.json

@@ -445,6 +445,7 @@
   "No KMS keys found": "未找到KMS密钥",
   "No License": "无许可证",
   "No Objects": "无对象",
+  "Show Deleted Objects": "显示已删除的对象",
   "No Policies": "无策略",
   "No Selection": "未选择文件/文件夹",
   "No Tasks": "暂无任务",

package.json

@@ -111,7 +111,9 @@
   },
   "pnpm": {
     "overrides": {
-      "tar": ">=7.5.2"
+      "tar": ">=7.5.2",
+      "glob": ">=10.5.0",
+      "js-yaml": ">=4.1.1"
     }
   }
 }