优化仓库模块层级关系

frontend/ops_vue_js/package.json

@@ -57,7 +57,7 @@
     "@vitejs/plugin-vue": "^6.0.1",
     "sass-embedded": "^1.93.3",
     "tailwindcss": "^4.2.2",
-    "vite": "^7.1.11",
+    "vite": "^8.0.16",
     "vite-plugin-vue-devtools": "^8.0.3"
   }
 }

frontend/ops_vue_js/src/i18n/en.json

@@ -344,6 +344,11 @@
     "items_in_containers": "Stored",
     "total_items": "{count} items",
     "search_item_placeholder": "Search by name or serial number",
+    "contents": "Contents",
+    "search_contents_placeholder": "Search containers or items...",
+    "no_contents": "No contents",
+    "type_container": "Container",
+    "type_item": "Item",
     "linked_customers": "Linked Customers",
     "linked_customer_placeholder": "Search customer by name or phone...",
     "linked_customer_not_found": "No matching customers found",

frontend/ops_vue_js/src/i18n/zh-CN.json

@@ -344,6 +344,11 @@
     "items_in_containers": "已入库",
     "total_items": "共 {count} 条",
     "search_item_placeholder": "搜索物品名称或序列号",
+    "contents": "内容",
+    "search_contents_placeholder": "搜索容器或物品...",
+    "no_contents": "暂无内容",
+    "type_container": "容器",
+    "type_item": "物品",
     "linked_customers": "关联客户",
     "linked_customer_placeholder": "搜索客户姓名或电话...",
     "linked_customer_not_found": "未找到匹配的客户",

frontend/ops_vue_js/src/views/warehouse/WarehouseContainerDetail.vue

@@ -11,6 +11,7 @@ import {
   IconChevronLeft,
   IconChevronRight,
   IconFolder,
+  IconFolders,
   IconPackage,
   IconPlus,
   IconEdit,
@@ -31,11 +32,9 @@ const containerId = computed(() => parseInt(route.params.id))
 
 // ── 路由参数变化时重新加载 ──
 watch(containerId, async () => {
-  subPage.value = 1
+  page.value = 1
-  itemPage.value = 1
   await fetchContainer()
-  fetchSubContainers()
+  fetchAll()
-  fetchItems()
 })
 
 // ── 容器详情 ──
@@ -47,38 +46,39 @@ const canModifyContainer = ref(false)
 const loadingDetail = ref(true)
 const notFound = ref(false)
 
-// ── 子容器列表 ──
+// ═══════════════════════════════════════════════════════
+//  合并列表（子容器 + 物品，类似文件管理器）
+// ═══════════════════════════════════════════════════════
+const FETCH_LIMIT = 500
+
 const subContainers = ref([])
-const subTotal = ref(0)
-const subPage = ref(1)
-const subPageSize = ref(10)
-const subSearch = ref('')
-const loadingSub = ref(false)
-
-const subTotalPages = computed(() => Math.ceil(subTotal.value / subPageSize.value) || 1)
-
-function subPageRange() {
-  const total = subTotalPages.value
-  const cur = subPage.value
-  let start = Math.max(1, cur - 2)
-  let end = Math.min(cur + 4, total)
-  if (end - start < 4) start = Math.max(1, end - 4)
-  return Array.from({ length: end - start + 1 }, (_, i) => start + i)
-}
-
-// ── 物品列表 ──
 const items = ref([])
+const subTotal = ref(0)
 const itemTotal = ref(0)
-const itemPage = ref(1)
-const itemPageSize = ref(10)
-const itemSearch = ref('')
-const loadingItems = ref(false)
 
-const itemTotalPages = computed(() => Math.ceil(itemTotal.value / itemPageSize.value) || 1)
+const search = ref('')
+const loading = ref(false)
 
-function itemPageRange() {
+const page = ref(1)
-  const total = itemTotalPages.value
+const pageSize = ref(20)
-  const cur = itemPage.value
+
+const entries = computed(() => {
+  const cs = subContainers.value.map(c => ({ kind: 'container', id: `c-${c.ID}`, data: c }))
+  const is = items.value.map(i => ({ kind: 'item', id: `i-${i.ID}`, data: i }))
+  return [...cs, ...is]
+})
+
+const totalEntries = computed(() => entries.value.length)
+const totalPages = computed(() => Math.ceil(totalEntries.value / pageSize.value) || 1)
+
+const pagedEntries = computed(() => {
+  const start = (page.value - 1) * pageSize.value
+  return entries.value.slice(start, start + pageSize.value)
+})
+
+function pageRange() {
+  const total = totalPages.value
+  const cur = page.value
   let start = Math.max(1, cur - 2)
   let end = Math.min(cur + 4, total)
   if (end - start < 4) start = Math.max(1, end - 4)
@@ -105,14 +105,11 @@ function fmtTs(ts) {
   if (!ts) return '—'
   let d
   if (typeof ts === 'number') {
-    // Unix timestamp in seconds (number)
     d = new Date(ts * 1000)
   } else if (typeof ts === 'string') {
-    // Check if it's a Unix timestamp string like "1712345678"
     if (/^\d+$/.test(ts)) {
       d = new Date(parseInt(ts, 10) * 1000)
     } else {
-      // ISO 8601 or other string format
       d = new Date(ts)
     }
   } else {
@@ -148,48 +145,63 @@ async function fetchContainer() {
   }
 }
 
-// ── 拉取子容器 ──
+// ── 同时拉取子容器和物品 ──
-async function fetchSubContainers() {
+async function fetchAll() {
-  subContainers.value = []
+  loading.value = true
-  loadingSub.value = true
   try {
-    const { errCode, data } = await warehouseApi.getContainers({
+    const [cRes, iRes] = await Promise.all([
-      search: subSearch.value,
+      warehouseApi.getContainers({
-      parent_id: containerId.value,
+        search: search.value.trim(),
-      entries: subPageSize.value,
+        parent_id: containerId.value,
-      page: subPage.value,
+        entries: FETCH_LIMIT,
-    })
+        page: 1,
-    if (errCode === 0) {
+      }),
-      subContainers.value = data.containers ?? []
+      warehouseApi.getItems({
-      subTotal.value = data.all_count ?? 0
+        search: search.value.trim(),
+        container_id: containerId.value,
+        entries: FETCH_LIMIT,
+        page: 1,
+      }),
+    ])
+    if (cRes.errCode === 0) {
+      subContainers.value = cRes.data.containers ?? []
+      subTotal.value = cRes.data.all_count ?? 0
+    } else {
+      subContainers.value = []
+      subTotal.value = 0
     }
+    if (iRes.errCode === 0) {
+      items.value = iRes.data.items ?? []
+      itemTotal.value = iRes.data.all_count ?? 0
+    } else {
+      items.value = []
+      itemTotal.value = 0
+    }
+    page.value = 1
   } catch {
-    // 拦截器已处理
+    /* interceptor handled */
   } finally {
-    loadingSub.value = false
+    loading.value = false
   }
 }
 
-// ── 拉取物品 ──
+let searchTimer = null
-async function fetchItems() {
+function onSearchInput() {
-  items.value = []
+  clearTimeout(searchTimer)
-  loadingItems.value = true
+  searchTimer = setTimeout(() => fetchAll(), 400)
-  try {
+}
-    const { errCode, data } = await warehouseApi.getItems({
+
-      search: itemSearch.value,
+function goPage(p) {
-      container_id: containerId.value,
+  if (p < 1 || p > totalPages.value) return
-      entries: itemPageSize.value,
+  page.value = p
-      page: itemPage.value,
+}
-    })
+
-    if (errCode === 0) {
+function handlePageSize(e) {
-      items.value = data.items ?? []
+  let val = parseInt(e.target.value) || 20
-      itemTotal.value = data.all_count ?? 0
+  if (val > 300) val = 300
-    }
+  if (val < 1) val = 1
-  } catch {
+  pageSize.value = val
-    // 拦截器已处理
+  page.value = 1
-  } finally {
-    loadingItems.value = false
-  }
 }
 
 // ── 新增子容器 ──
@@ -209,7 +221,7 @@ async function submitAddSub() {
       toast.success(t('message.save_success'))
       showAddSub.value = false
       Object.assign(addSubForm, { title: '', remark: '' })
-      fetchSubContainers()
+      fetchAll()
       fetchContainer()
     } else {
       toast.error(t('message.server_error'))
@@ -282,11 +294,18 @@ async function doDelete() {
   }
 }
 
+// ── 跳转 ──
+function jumpToContainer(id) {
+  router.push(`/warehouse/container/${id}`)
+}
+function jumpToItem(id) {
+  router.push(`/warehouse/item/${id}`)
+}
+
 // ── 初始化 ──
 onMounted(async () => {
   await fetchContainer()
-  fetchSubContainers()
+  fetchAll()
-  fetchItems()
 })
 </script>
 
@@ -398,149 +417,32 @@ onMounted(async () => {
         </div>
       </div>
 
-      <!-- 子容器列表 -->
+      <!-- 主卡片：子容器 + 物品（合并显示） -->
       <div class="rounded-xl border border-gray-200 bg-white shadow dark:border-dk-muted dark:bg-dk-card">
         <!-- 工具栏 -->
         <div class="flex items-center gap-2 px-5 py-3 border-b border-gray-100 dark:border-dk-muted">
-          <div class="relative flex-1 max-w-xs">
+          <div class="relative flex-1 max-w-md">
             <IconSearch class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" :size="15" />
             <input
-              v-model="subSearch"
+              v-model="search"
               type="text"
-              :placeholder="t('warehouse.search_placeholder')"
+              :placeholder="t('warehouse.search_contents_placeholder')"
               class="w-full rounded-lg border border-gray-300 bg-white py-1.5 pl-9 pr-3 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
-              @keyup.enter="subPage = 1; fetchSubContainers()"
+              @input="onSearchInput"
+              @keyup.enter="fetchAll"
             />
           </div>
+          <div class="flex-1 text-xs text-gray-400 dark:text-gray-500">
+            {{ t('warehouse.containers') }}: {{ subTotal }} · {{ t('warehouse.items') }}: {{ itemTotal }}
+          </div>
           <button
             v-if="containerDepth < 4"
-            class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+            class="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:bg-dk-base dark:text-white dark:hover:bg-dk-muted"
             @click="showAddSub = true"
           >
             <IconPlus :size="15" />
             {{ t('warehouse.add_container') }}
           </button>
-        </div>
-
-        <!-- 表格 -->
-        <div class="overflow-x-auto">
-          <table class="w-full text-left text-sm text-gray-900 dark:text-white">
-            <thead>
-              <tr class="border-b border-gray-200 bg-gray-50 text-gray-500 dark:border-dk-muted dark:bg-dk-base dark:text-gray-400">
-                <th class="px-5 py-3 font-medium">{{ t('warehouse.container_name') }}</th>
-                <th class="px-5 py-3 font-medium w-24 text-center">{{ t('warehouse.child_containers') }}</th>
-                <th class="px-5 py-3 font-medium w-24 text-center">{{ t('warehouse.items') }}</th>
-                <th class="px-5 py-3 font-medium whitespace-nowrap">{{ t('warehouse.created_at') }}</th>
-                <th class="px-5 py-3 font-medium whitespace-nowrap">{{ t('warehouse.updated_at') }}</th>
-                <th class="px-5 py-3 font-medium">{{ t('warehouse.created_by') }}</th>
-                <th class="px-5 py-3 font-medium w-24 text-right">{{ t('warehouse.actions') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-if="loadingSub">
-                <td colspan="7" class="px-5 py-8 text-center">
-                  <svg class="mx-auto h-5 w-5 animate-spin text-gray-400" viewBox="0 0 24 24" fill="none">
-                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
-                  </svg>
-                </td>
-              </tr>
-              <tr v-else-if="subContainers.length === 0">
-                <td colspan="7" class="px-5 py-8 text-center text-gray-400 dark:text-gray-500">
-                  {{ t('warehouse.no_containers') }}
-                </td>
-              </tr>
-              <tr
-                v-else
-                v-for="c in subContainers"
-                :key="c.ID"
-                class="border-b border-gray-100 cursor-pointer transition-colors hover:bg-gray-50 dark:border-dk-muted dark:hover:bg-dk-base"
-                @click="router.push(`/warehouse/container/${c.ID}`)"
-              >
-                <td class="px-5 py-3">
-                  <div class="flex items-center gap-2">
-                    <IconFolder class="text-blue-500 flex-shrink-0" :size="16" />
-                    <span class="font-medium max-w-xs truncate">{{ c.Title }}</span>
-                  </div>
-                </td>
-                <td class="px-5 py-3 text-center">
-                  <span class="inline-flex items-center gap-1 rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-400">
-                    {{ c.ChildCount }}
-                  </span>
-                </td>
-                <td class="px-5 py-3 text-center">
-                  <span class="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/40 dark:text-green-400">
-                    {{ c.ItemCount }}
-                  </span>
-                </td>
-                <td class="px-5 py-3 text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">{{ fmtTs(c.CreatedAt) }}</td>
-                <td class="px-5 py-3 text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">{{ fmtTs(c.UpdatedAt) }}</td>
-                <td class="px-5 py-3">
-                  <div class="flex items-center gap-1.5">
-                    <img
-                      :src="usersStore.getAvatarUrlFromUserID(c.CreatorID)"
-                      class="w-5 h-5 rounded-full object-cover flex-shrink-0"
-                    />
-                    <span class="truncate text-gray-600 dark:text-gray-400">{{ usersStore.getUsernameFromUserID(c.CreatorID) }}</span>
-                  </div>
-                </td>
-                <td class="px-5 py-3 text-right">
-                  <button
-                    class="text-xs text-blue-500 hover:underline"
-                    @click.stop="router.push(`/warehouse/container/${c.ID}`)"
-                  >
-                    {{ t('warehouse.view_items') }}
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <!-- 分页 -->
-        <div v-if="subTotalPages > 1" class="flex items-center justify-center gap-1 px-5 py-3 border-t border-gray-100 dark:border-dk-muted">
-          <button
-            class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
-            :disabled="subPage <= 1"
-            @click="subPage--; fetchSubContainers()"
-          >
-            <IconChevronLeft :size="15" />
-          </button>
-          <button
-            v-for="p in subPageRange()"
-            :key="p"
-            class="flex items-center justify-center w-7 h-7 rounded text-sm"
-            :class="p === subPage
-              ? 'bg-blue-600 text-white font-medium'
-              : 'text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-dk-muted'"
-            @click="subPage = p; fetchSubContainers()"
-          >
-            {{ p }}
-          </button>
-          <button
-            class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
-            :disabled="subPage >= subTotalPages"
-            @click="subPage++; fetchSubContainers()"
-          >
-            <IconChevronRight :size="15" />
-          </button>
-        </div>
-      </div>
-
-      <!-- 物品列表 -->
-      <div class="rounded-xl border border-gray-200 bg-white shadow dark:border-dk-muted dark:bg-dk-card">
-        <!-- 工具栏 -->
-        <div class="flex items-center gap-2 px-5 py-3 border-b border-gray-100 dark:border-dk-muted">
-          <div class="relative flex-1 max-w-xs">
-            <IconSearch class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" :size="15" />
-            <input
-              v-model="itemSearch"
-              type="text"
-              :placeholder="t('warehouse.search_placeholder')"
-              class="w-full rounded-lg border border-gray-300 bg-white py-1.5 pl-9 pr-3 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
-              @keyup.enter="itemPage = 1; fetchItems()"
-            />
-          </div>
           <button
             class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
             @click="router.push(`/warehouse/container/${containerId}/add-item`)"
@@ -555,120 +457,174 @@ onMounted(async () => {
           <table class="w-full text-left text-sm text-gray-900 dark:text-white">
             <thead>
               <tr class="border-b border-gray-200 bg-gray-50 text-gray-500 dark:border-dk-muted dark:bg-dk-base dark:text-gray-400">
-                <th class="px-5 py-3 font-medium w-80">{{ t('warehouse.item_name') }}</th>
+                <th class="px-5 py-3 font-medium w-80">{{ t('warehouse.container_name') }} / {{ t('warehouse.item_name') }}</th>
-                <th class="px-5 py-3 font-medium w-20">{{ t('warehouse.serial_number') }}</th>
+                <th class="px-5 py-3 font-medium">{{ t('warehouse.remark') }}</th>
-                <th class="px-5 py-3 font-medium w-50">{{ t('warehouse.remark') }}</th>
+                <th class="px-5 py-3 font-medium w-32 text-center">{{ t('warehouse.child_containers') }} / {{ t('warehouse.quantity') }}</th>
-                <th class="px-5 py-3 font-medium text-center">{{ t('warehouse.quantity') }}</th>
+                <th class="px-5 py-3 font-medium w-28 text-center">{{ t('work_order.work_order_count') }}</th>
-                <th class="px-5 py-3 font-medium text-center">{{ t('work_order.work_order_count') }}</th>
+                <th class="px-5 py-3 font-medium">{{ t('customer.related_customers') }}</th>
-                <th class="px-5 py-3 font-medium ">{{ t('customer.related_customers') }}</th>
+                <th class="px-5 py-3 font-medium whitespace-nowrap w-44">{{ t('warehouse.updated_at') }}</th>
-                <th class="px-5 py-3 font-medium whitespace-nowrap">{{ t('warehouse.updated_at') }}</th>
                 <th class="px-5 py-3 font-medium">{{ t('warehouse.created_by') }}</th>
-                <th class="px-5 py-3 font-medium w-20 text-right">{{ t('warehouse.actions') }}</th>
               </tr>
             </thead>
             <tbody>
-              <tr v-if="loadingItems">
+              <tr v-if="loading">
-                <td colspan="9" class="px-5 py-8 text-center">
+                <td colspan="7" class="px-5 py-8 text-center">
                   <svg class="mx-auto h-5 w-5 animate-spin text-gray-400" viewBox="0 0 24 24" fill="none">
                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
                     <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
                   </svg>
                 </td>
               </tr>
-              <tr v-else-if="items.length === 0">
+              <tr v-else-if="totalEntries === 0">
-                <td colspan="9" class="px-5 py-8 text-center text-gray-400 dark:text-gray-500">
+                <td colspan="7" class="px-5 py-8 text-center text-gray-400 dark:text-gray-500">
-                  {{ t('warehouse.no_items') }}
+                  {{ t('warehouse.no_contents') }}
-                </td>
-              </tr>
-              <tr
-                v-else
-                v-for="item in items"
-                :key="item.ID"
-                class="border-b border-gray-100 cursor-pointer transition-colors hover:bg-gray-50 dark:border-dk-muted dark:hover:bg-dk-base"
-                @click="router.push(`/warehouse/item/${item.ID}`)"
-              >
-                <td class="px-5 py-3">
-                  <div class="flex items-center gap-2">
-                    <IconPackage class="text-green-500 flex-shrink-0" :size="16" />
-                    <span class="font-medium max-w-[13rem] truncate">{{ item.Name }}</span>
-                  </div>
-                </td>
-                <td class="px-5 py-3 text-xs text-gray-500 dark:text-gray-400 max-w-[140px] truncate">{{ item.SerialNumber || '—' }}</td>
-                <td class="px-5 py-3 text-xs text-gray-500 dark:text-gray-400 max-w-[200px] truncate">{{ item.Remark || '—' }}</td>
-                <td class="px-5 py-3 text-center text-sm">{{ item.Quantity }}</td>
-                <td class="px-5 py-3 text-center">
-                  <span v-if="item.WorkOrderCount > 0" class="inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-900/40 dark:text-orange-400">
-                    <IconTool :size="12" />
-                    {{ item.WorkOrderCount }}
-                  </span>
-                  <span v-else class="text-gray-400">—</span>
-                </td>
-                <td class="px-5 py-3">
-                  <div v-if="item.Customers && item.Customers.length > 0" class="flex flex-wrap gap-1">
-                    <RouterLink
-                      v-for="customer in item.Customers.slice(0, 3)"
-                      :key="customer.id"
-                      :to="`/customer/detail/${customer.id}`"
-                      class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 hover:bg-blue-200 dark:bg-blue-900/40 dark:text-blue-400 dark:hover:bg-blue-900/60 whitespace-nowrap"
-                      @click.stop
-                    >
-                      <IconUser :size="10" />
-                      {{ customer.first_name }} {{ customer.last_name }}
-                    </RouterLink>
-                    <span v-if="item.Customers.length > 3" class="text-xs text-gray-400">+{{ item.Customers.length - 3 }}</span>
-                  </div>
-                  <span v-else class="text-gray-400">—</span>
-                </td>
-                <td class="px-5 py-3 text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">{{ fmtTs(item.UpdatedAt) }}</td>
-                <td class="px-5 py-3">
-                  <div class="flex items-center gap-1.5">
-                    <img
-                      :src="usersStore.getAvatarUrlFromUserID(item.CreatorID)"
-                      class="w-5 h-5 rounded-full object-cover flex-shrink-0"
-                    />
-                    <span class="truncate text-gray-600 dark:text-gray-400">{{ usersStore.getUsernameFromUserID(item.CreatorID) }}</span>
-                  </div>
-                </td>
-                <td class="px-5 py-3 text-right">
-                  <button
-                    class="text-xs text-blue-500 hover:underline whitespace-nowrap"
-                    @click.stop="router.push(`/warehouse/item/${item.ID}`)"
-                  >
-                    {{ t('warehouse.view_items') }}
-                  </button>
                 </td>
               </tr>
+              <template v-else>
+                <tr
+                  v-for="entry in pagedEntries"
+                  :key="entry.id"
+                  class="cursor-pointer border-b border-gray-100 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:hover:bg-dk-base"
+                  @click="entry.kind === 'container' ? jumpToContainer(entry.data.ID) : jumpToItem(entry.data.ID)"
+                >
+                  <!-- 名称 -->
+                  <td class="px-5 py-3">
+                    <div class="flex items-center gap-2">
+                      <IconFolder
+                        v-if="entry.kind === 'container'"
+                        class="flex-shrink-0 text-blue-500"
+                        :size="18"
+                      />
+                      <IconPackage
+                        v-else
+                        class="flex-shrink-0 text-green-500"
+                        :size="18"
+                      />
+                      <span class="max-w-xs truncate font-medium text-gray-900 dark:text-white">
+                        {{ entry.kind === 'container' ? entry.data.Title : entry.data.Name }}
+                      </span>
+                      <span
+                        v-if="entry.kind === 'item' && entry.data.SerialNumber"
+                        class="text-xs text-gray-400 dark:text-gray-500 truncate"
+                      >· {{ entry.data.SerialNumber }}</span>
+                    </div>
+                  </td>
+
+                  <!-- 备注 -->
+                  <td class="px-5 py-3 max-w-xs truncate text-gray-500 dark:text-gray-400">
+                    {{ entry.data.Remark || '—' }}
+                  </td>
+
+                  <!-- 容量 / 数量 -->
+                  <td class="px-5 py-3 text-center">
+                    <template v-if="entry.kind === 'container'">
+                      <span class="inline-flex items-center gap-1 rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-400">
+                        <IconFolders :size="12" />
+                        {{ entry.data.ChildCount }}
+                      </span>
+                      <span class="ml-1 inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/40 dark:text-green-400">
+                        <IconPackage :size="12" />
+                        {{ entry.data.ItemCount }}
+                      </span>
+                    </template>
+                    <span v-else class="text-sm text-gray-700 dark:text-gray-300">{{ entry.data.Quantity }}</span>
+                  </td>
+
+                  <!-- 工单数 -->
+                  <td class="px-5 py-3 text-center">
+                    <template v-if="entry.kind === 'item'">
+                      <span
+                        v-if="entry.data.WorkOrderCount > 0"
+                        class="inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-900/40 dark:text-orange-400"
+                      >
+                        <IconTool :size="12" />
+                        {{ entry.data.WorkOrderCount }}
+                      </span>
+                      <span v-else class="text-gray-400">—</span>
+                    </template>
+                    <span v-else class="text-gray-400">—</span>
+                  </td>
+
+                  <!-- 关联客户 -->
+                  <td class="px-5 py-3">
+                    <template v-if="entry.kind === 'item' && entry.data.Customers && entry.data.Customers.length > 0">
+                      <div class="flex flex-wrap gap-1">
+                        <RouterLink
+                          v-for="customer in entry.data.Customers.slice(0, 3)"
+                          :key="customer.id"
+                          :to="`/customer/detail/${customer.id}`"
+                          class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 hover:bg-blue-200 dark:bg-blue-900/40 dark:text-blue-400 dark:hover:bg-blue-900/60 whitespace-nowrap"
+                          @click.stop
+                        >
+                          <IconUser :size="10" />
+                          {{ customer.first_name }} {{ customer.last_name }}
+                        </RouterLink>
+                        <span v-if="entry.data.Customers.length > 3" class="text-xs text-gray-400">
+                          +{{ entry.data.Customers.length - 3 }}
+                        </span>
+                      </div>
+                    </template>
+                    <span v-else class="text-gray-400">—</span>
+                  </td>
+
+                  <!-- 更新时间 -->
+                  <td class="px-5 py-3 whitespace-nowrap text-xs text-gray-500 dark:text-gray-400">
+                    {{ fmtTs(entry.data.UpdatedAt) }}
+                  </td>
+
+                  <!-- 创建人 -->
+                  <td class="px-5 py-3">
+                    <div class="flex items-center gap-1.5">
+                      <img
+                        :src="usersStore.getAvatarUrlFromUserID(entry.data.CreatorID)"
+                        class="w-5 h-5 rounded-full object-cover flex-shrink-0"
+                      />
+                      <span class="truncate text-gray-600 dark:text-gray-400">
+                        {{ usersStore.getUsernameFromUserID(entry.data.CreatorID) }}
+                      </span>
+                    </div>
+                  </td>
+                </tr>
+              </template>
             </tbody>
           </table>
         </div>
 
         <!-- 分页 -->
-        <div v-if="itemTotalPages > 1" class="flex items-center justify-center gap-1 px-5 py-3 border-t border-gray-100 dark:border-dk-muted">
+        <div v-if="totalPages > 1 || pageSize !== 20" class="flex flex-col items-center gap-3 border-t border-gray-100 px-5 py-3 sm:flex-row sm:justify-between dark:border-dk-muted">
-          <button
+          <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-            class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
+            <span>{{ t('warehouse.total_items', { count: totalEntries }) }}</span>
-            :disabled="itemPage <= 1"
+            <span class="ml-2">{{ t('warehouse.containers') }}: {{ subContainers.length }}</span>
-            @click="itemPage--; fetchItems()"
+            <span>·</span>
-          >
+            <span>{{ t('warehouse.items') }}: {{ items.length }}</span>
-            <IconChevronLeft :size="15" />
+          </div>
-          </button>
+          <div class="flex items-center gap-1">
-          <button
+            <button
-            v-for="p in itemPageRange()"
+              class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
-            :key="p"
+              :disabled="page <= 1"
-            class="flex items-center justify-center w-7 h-7 rounded text-sm"
+              @click="goPage(page - 1)"
-            :class="p === itemPage
+            >
-              ? 'bg-blue-600 text-white font-medium'
+              <IconChevronLeft :size="15" />
-              : 'text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-dk-muted'"
+            </button>
-            @click="itemPage = p; fetchItems()"
+            <button
-          >
+              v-for="p in pageRange()"
-            {{ p }}
+              :key="p"
-          </button>
+              class="flex items-center justify-center w-7 h-7 rounded text-sm"
-          <button
+              :class="p === page
-            class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
+                ? 'bg-blue-600 text-white font-medium'
-            :disabled="itemPage >= itemTotalPages"
+                : 'text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-dk-muted'"
-            @click="itemPage++; fetchItems()"
+              @click="goPage(p)"
-          >
+            >
-            <IconChevronRight :size="15" />
+              {{ p }}
-          </button>
+            </button>
+            <button
+              class="flex items-center justify-center w-7 h-7 rounded text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed dark:text-gray-400 dark:hover:bg-dk-muted"
+              :disabled="page >= totalPages"
+              @click="goPage(page + 1)"
+            >
+              <IconChevronRight :size="15" />
+            </button>
+          </div>
         </div>
       </div>
 

frontend/ops_vue_js/src/views/warehouse/WarehouseOverview.vue

@@ -15,9 +15,6 @@ import {
   IconFolders,
   IconPackage,
   IconSearch,
-  IconTrash,
-  IconEdit,
-  IconArrowRight,
   IconTool,
   IconUser,
 } from '@tabler/icons-vue'
@@ -38,49 +35,52 @@ const stats = reactive({
 })
 
 // ═══════════════════════════════════════════════════════
-//  容器相关
+//  合并列表（容器 + 物品，类似文件管理器）
 // ═══════════════════════════════════════════════════════
-const containers = ref([])
+//
-const canModifyContainers = ref([]) // 并行数组：与 containers 下标对应
+// 策略：两个接口分别请求一较大窗口的数据（足以覆盖前端分页），
+// 在前端合并为统一的 entries 列表（容器在前、物品在后），
+// 共用一个搜索框 + 一个分页器。
+
+// 一次性向后端取的最大条数（足够覆盖大多数前端分页场景）
+const FETCH_LIMIT = 500
+
+const containers = ref([])           // 原始容器列表
+const items = ref([])                // 原始物品列表
 const containerTotal = ref(0)
-const containerPage = ref(1)
+const itemTotal = ref(0)
-const containerPageSize = ref(10)
-const containerSearch = ref('')
-const containerLoading = ref(false)
 
-// 新增/编辑弹窗
+const search = ref('')               // 共用搜索词
-const showContainerForm = ref(false)
+const loading = ref(false)
-const containerFormTitle = ref('')
-const editingContainerId = ref(null)
-const containerForm = reactive({ title: '', remark: '' })
-const submittingContainer = ref(false)
 
-// 删除确认
+const page = ref(1)
-const showDeleteConfirm = ref(false)
+const pageSize = ref(20)
-const deletingId = ref(null)
-const deletingName = ref('')
-const deleting = ref(false)
 
-const containerTotalPages = computed(() => Math.ceil(containerTotal.value / containerPageSize.value) || 1)
+// 合并后的 entries：[{kind:'container', data:c}, {kind:'item', data:i}]
+const entries = computed(() => {
+  const cs = containers.value.map(c => ({ kind: 'container', id: `c-${c.ID}`, data: c }))
+  const is = items.value.map(i => ({ kind: 'item', id: `i-${i.ID}`, data: i }))
+  return [...cs, ...is]
+})
 
-function containerPageRange() {
+const totalEntries = computed(() => entries.value.length)
-  const total = containerTotalPages.value
+const totalPages = computed(() => Math.ceil(totalEntries.value / pageSize.value) || 1)
-  const cur = containerPage.value
+
+const pagedEntries = computed(() => {
+  const start = (page.value - 1) * pageSize.value
+  return entries.value.slice(start, start + pageSize.value)
+})
+
+function pageRange() {
+  const total = totalPages.value
+  const cur = page.value
   let start = Math.max(1, cur - 2)
   let end = Math.min(cur + 4, total)
   if (end - start < 4) start = Math.max(1, end - 4)
   return Array.from({ length: end - start + 1 }, (_, i) => start + i)
 }
 
-// ── 权限判断 ──
+async function fetchStats() {
-function canModifyContainer(index) {
-  return canModifyContainers.value[index] === true
-}
-function canModifyItem(index) {
-  return canModifyItems.value[index] === true
-}
-
-async function fetchContainerStats() {
   try {
     const { errCode, data } = await warehouseApi.getCount()
     if (errCode === 0) {
@@ -91,40 +91,69 @@ async function fetchContainerStats() {
   } catch { /* silent */ }
 }
 
-async function fetchContainers() {
+async function fetchAll() {
-  containerLoading.value = true
+  loading.value = true
   try {
-    const { errCode, data } = await warehouseApi.getContainers({
+    const [cRes, iRes] = await Promise.all([
-      search: containerSearch.value,
+      warehouseApi.getContainers({
-      entries: containerPageSize.value,
+        search: search.value.trim(),
-      page: containerPage.value,
+        entries: FETCH_LIMIT,
-    })
+        page: 1,
-    if (errCode === 0) {
+      }),
-      containers.value = data.containers ?? []
+      warehouseApi.getItems({
-      canModifyContainers.value = data.canModifyContainers ?? []
+        search: search.value.trim(),
-      containerTotal.value = data.all_count ?? 0
+        entries: FETCH_LIMIT,
+        page: 1,
+      }),
+    ])
+    if (cRes.errCode === 0) {
+      containers.value = cRes.data.containers ?? []
+      containerTotal.value = cRes.data.all_count ?? 0
     } else {
-      toast.error(t('message.server_error'))
+      containers.value = []
+      containerTotal.value = 0
     }
-  } catch { /* interceptor handled */ }
+    if (iRes.errCode === 0) {
-  finally { containerLoading.value = false }
+      items.value = iRes.data.items ?? []
+      itemTotal.value = iRes.data.all_count ?? 0
+    } else {
+      items.value = []
+      itemTotal.value = 0
+    }
+    page.value = 1
+  } catch {
+    /* interceptor handled */
+  } finally {
+    loading.value = false
+  }
 }
 
-function goContainerPage(page) {
+let searchTimer = null
-  if (page < 1 || page > containerTotalPages.value) return
+function onSearchInput() {
-  containerPage.value = page
+  clearTimeout(searchTimer)
-  fetchContainers()
+  searchTimer = setTimeout(() => fetchAll(), 400)
 }
 
-function handleContainerPageSize(e) {
+function goPage(p) {
-  let val = parseInt(e.target.value) || 10
+  if (p < 1 || p > totalPages.value) return
+  page.value = p
+}
+
+function handlePageSize(e) {
+  let val = parseInt(e.target.value) || 20
   if (val > 300) val = 300
   if (val < 1) val = 1
-  containerPageSize.value = val
+  pageSize.value = val
-  containerPage.value = 1
+  page.value = 1
-  fetchContainers()
 }
 
+// ── 容器：新增 / 跳转 ──
+const showContainerForm = ref(false)
+const containerFormTitle = ref('')
+const editingContainerId = ref(null)
+const containerForm = reactive({ title: '', remark: '' })
+const submittingContainer = ref(false)
+
 function openAddContainer() {
   containerFormTitle.value = t('warehouse.add_container')
   editingContainerId.value = null
@@ -133,22 +162,6 @@ function openAddContainer() {
   showContainerForm.value = true
 }
 
-async function openEditContainer(id, e) {
-  e.stopPropagation()
-  try {
-    const { errCode, data } = await warehouseApi.getContainer(id)
-    if (errCode === 0) {
-      containerFormTitle.value = t('warehouse.edit_container')
-      editingContainerId.value = id
-      containerForm.title = data.container.title ?? ''
-      containerForm.remark = data.container.remark ?? ''
-      showContainerForm.value = true
-    } else {
-      toast.error(t('message.server_error'))
-    }
-  } catch { /* interceptor handled */ }
-}
-
 async function submitContainerForm() {
   if (!containerForm.title.trim()) {
     toast.warning(t('warehouse.title_required'))
@@ -163,8 +176,8 @@ async function submitContainerForm() {
     if (errCode === 0) {
       showContainerForm.value = false
       toast.success(t('message.save_success'))
-      fetchContainers()
+      fetchAll()
-      fetchContainerStats()
+      fetchStats()
     } else {
       toast.error(t('message.server_error'))
     }
@@ -172,170 +185,40 @@ async function submitContainerForm() {
   finally { submittingContainer.value = false }
 }
 
-function confirmDeleteContainer(id, title, e) {
-  e.stopPropagation()
-  deletingId.value = id
-  deletingName.value = title
-  showDeleteConfirm.value = true
-}
-
-async function doDeleteContainer() {
-  deleting.value = true
-  try {
-    const { errCode } = await warehouseApi.deleteContainer(deletingId.value)
-    if (errCode === 0) {
-      toast.success(t('message.delete_ok'))
-      showDeleteConfirm.value = false
-      fetchContainers()
-      fetchContainerStats()
-    } else {
-      toast.error(t('message.server_error'))
-    }
-  } catch { /* silent */ }
-  finally { deleting.value = false }
-}
-
 function jumpToContainer(id) {
   router.push(`/warehouse/container/${id}`)
 }
 
-// ═══════════════════════════════════════════════════════
+function jumpToItem(id) {
-//  物品相关
+  router.push(`/warehouse/item/${id}`)
-// ═══════════════════════════════════════════════════════
-const items = ref([])
-const canModifyItems = ref([]) // 并行数组：与 items 下标对应
-const itemTotal = ref(0)
-const itemPage = ref(1)
-const itemPageSize = ref(10)
-const itemSearch = ref('')
-const itemLoading = ref(false)
-const itemTotalPages = computed(() => Math.ceil(itemTotal.value / itemPageSize.value) || 1)
-
-const itemStats = reactive({ total: 0, inContainer: 0, unstored: 0 })
-
-async function fetchItems() {
-  itemLoading.value = true
-  try {
-    const { errCode, data } = await warehouseApi.getItems({
-      search: itemSearch.value.trim(),
-      entries: itemPageSize.value,
-      page: itemPage.value,
-    })
-    if (errCode === 0 && data) {
-      items.value = data.items || []
-      canModifyItems.value = data.canModifyItems || []
-      itemTotal.value = data.all_count || 0
-      itemStats.total = data.all_count || 0
-      itemStats.inContainer = items.value.filter(i => i.ContainerID != null).length
-      itemStats.unstored = items.value.filter(i => i.ContainerID == null).length
-    }
-  } catch { toast.error(t('message.server_error')) }
-  finally { itemLoading.value = false }
-}
-
-let searchTimer = null
-function onItemSearchInput() {
-  clearTimeout(searchTimer)
-  searchTimer = setTimeout(() => {
-    itemPage.value = 1
-    fetchItems()
-  }, 400)
-}
-
-function prevItemPage() {
-  if (itemPage.value > 1) { itemPage.value--; fetchItems() }
-}
-function nextItemPage() {
-  if (itemPage.value < itemTotalPages.value) { itemPage.value++; fetchItems() }
-}
-function goItemPage(p) {
-  if (p >= 1 && p <= itemTotalPages.value && p !== itemPage.value) { itemPage.value = p; fetchItems() }
-}
-
-const itemPageNumbers = computed(() => {
-  const total = itemTotalPages.value
-  const cur = itemPage.value
-  if (total <= 5) return Array.from({ length: total }, (_, i) => i + 1)
-  const pages = []
-  if (cur <= 3) pages.push(1, 2, 3, 4, '...', total)
-  else if (cur >= total - 2) pages.push(1, '...', total - 3, total - 2, total - 1, total)
-  else pages.push(1, '...', cur - 1, cur, cur + 1, '...', total)
-  return pages
-})
-
-function goToItemDetail(item) {
-  router.push(`/warehouse/item/${item.ID}`)
-}
-
-const deleteItemTarget = ref(null)
-const showDeleteItemConfirm = ref(false)
-const deletingItem = ref(false)
-
-function askDeleteItem(item) {
-  deleteItemTarget.value = item
-  showDeleteItemConfirm.value = true
-}
-
-async function doDeleteItem() {
-  if (!deleteItemTarget.value) return
-  deletingItem.value = true
-  try {
-    const { errCode } = await warehouseApi.deleteItem(deleteItemTarget.value.ID)
-    if (errCode === 0) {
-      toast.success(t('message.delete_success'))
-      showDeleteItemConfirm.value = false
-      deleteItemTarget.value = null
-      fetchItems()
-      fetchContainerStats()
-    } else {
-      toast.error(t('message.server_error'))
-    }
-  } catch { toast.error(t('message.server_error')) }
-  finally { deletingItem.value = false }
 }
 
 // ── 工具函数 ──
-function formatDate(dateStr) {
-  if (!dateStr) return '—'
-  try {
-    let d
-    if (typeof dateStr === 'string' && /^\d+$/.test(dateStr)) {
-      // Unix timestamp string like "1712345678"
-      d = new Date(parseInt(dateStr, 10) * 1000)
-    } else {
-      d = new Date(dateStr)
-    }
-    if (isNaN(d.getTime())) return '—'
-    return d.toLocaleString(isEn.value ? 'en-US' : 'zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false })
-  } catch { return dateStr }
-}
-
 function fmtTs(ts) {
   if (!ts) return '—'
   let d
   if (typeof ts === 'number') {
-    // Unix timestamp in seconds (number)
     d = new Date(ts * 1000)
   } else if (typeof ts === 'string') {
-    // Check if it's a Unix timestamp string like "1712345678"
     if (/^\d+$/.test(ts)) {
       d = new Date(parseInt(ts, 10) * 1000)
     } else {
-      // ISO 8601 or other string format
       d = new Date(ts)
     }
   } else {
     d = new Date(ts)
   }
   if (isNaN(d.getTime())) return '—'
-  return d.toLocaleString()
+  return d.toLocaleString(isEn.value ? 'en-US' : 'zh-CN', {
+    year: 'numeric', month: '2-digit', day: '2-digit',
+    hour: '2-digit', minute: '2-digit', hour12: false
+  })
 }
 
 // ── 初始化 ──
 onMounted(() => {
-  fetchContainerStats()
+  fetchStats()
-  fetchContainers()
+  fetchAll()
-  fetchItems()
 })
 </script>
 
@@ -367,166 +250,36 @@ onMounted(() => {
       </div>
     </div>
 
-    <!-- 主卡片：容器 -->
+    <!-- 主卡片：容器 + 物品（合并显示） -->
-    <div class="rounded-xl border border-gray-200 bg-white shadow dark:border-dk-muted dark:bg-dk-card">
-        <!-- Header -->
-        <div class="flex items-center justify-between border-b border-gray-100 px-6 py-4 dark:border-dk-muted">
-          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('warehouse.container_list') }}</h3>
-          <button
-            @click="openAddContainer"
-            class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
-          >
-            <IconPlus :size="16" />
-            {{ t('warehouse.add_container') }}
-          </button>
-        </div>
-
-        <!-- 搜索栏 -->
-        <div class="flex items-center gap-3 border-b border-gray-100 px-6 py-3 dark:border-dk-muted">
-          <div class="relative flex-1 max-w-xs">
-            <IconSearch class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" :size="16" />
-            <input
-              v-model="containerSearch"
-              type="text"
-              :placeholder="t('warehouse.search_placeholder')"
-              class="w-full rounded-lg border border-gray-300 bg-white py-1.5 pl-9 pr-3 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
-              @keyup.enter="containerPage = 1; fetchContainers()"
-            />
-          </div>
-          <button
-            @click="containerPage = 1; fetchContainers()"
-            class="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white hover:bg-gray-50 dark:hover:bg-dk-muted"
-          >
-            {{ t('purchase.search') }}
-          </button>
-        </div>
-
-        <!-- 表格 -->
-        <div class="overflow-x-auto">
-          <table class="w-full text-left text-sm text-gray-900">
-            <thead>
-              <tr class="border-b border-gray-200 bg-gray-50 text-gray-500 dark:border-dk-muted dark:bg-dk-base dark:text-gray-400">
-                <th class="px-6 py-3 font-medium w-16">ID</th>
-                <th class="px-6 py-3 font-medium">{{ t('warehouse.container_name') }}</th>
-                <th class="px-6 py-3 font-medium">{{ t('warehouse.remark') }}</th>
-                <th class="px-6 py-3 font-medium w-24 text-center">{{ t('warehouse.child_containers') }}</th>
-                <th class="px-6 py-3 font-medium w-24 text-center">{{ t('warehouse.items') }}</th>
-                <th class="px-6 py-3 font-medium whitespace-nowrap w-44">{{ t('warehouse.created_at') }}</th>
-                <th class="px-6 py-3 font-medium whitespace-nowrap w-44">{{ t('warehouse.updated_at') }}</th>
-                <th class="px-6 py-3 font-medium">{{ t('warehouse.created_by') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-if="containerLoading">
-                <td colspan="8" class="px-6 py-8 text-center text-gray-400">
-                  <svg class="mx-auto mb-2 h-5 w-5 animate-spin text-gray-400" viewBox="0 0 24 24" fill="none">
-                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
-                  </svg>
-                  {{ t('message.loading') }}
-                </td>
-              </tr>
-              <tr v-else-if="containers.length === 0">
-                <td colspan="8" class="px-6 py-8 text-center text-gray-400 dark:text-gray-500">
-                  {{ t('warehouse.no_containers') }}
-                </td>
-              </tr>
-              <tr
-                v-else
-                v-for="(c, idx) in containers"
-                :key="c.ID"
-                class="cursor-pointer border-b border-gray-100 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:hover:bg-dk-base"
-                @click="jumpToContainer(c.ID)"
-              >
-                <td class="px-6 py-3 text-gray-500 dark:text-gray-400">{{ c.ID }}</td>
-                <td class="px-6 py-3">
-                  <div class="flex items-center gap-2">
-                    <IconFolder class="flex-shrink-0 text-blue-500" :size="18" />
-                    <span class="max-w-xs truncate font-medium text-gray-900 dark:text-white">{{ c.Title }}</span>
-                  </div>
-                </td>
-                <td class="px-6 py-3 max-w-xs truncate text-gray-500 dark:text-gray-400">{{ c.Remark || '—' }}</td>
-                <td class="px-6 py-3 text-center">
-                  <span class="inline-flex items-center gap-1 rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-400">
-                    <IconFolders :size="12" />
-                    {{ c.ChildCount }}
-                  </span>
-                </td>
-                <td class="px-6 py-3 text-center">
-                  <span class="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/40 dark:text-green-400">
-                    <IconPackage :size="12" />
-                    {{ c.ItemCount }}
-                  </span>
-                </td>
-                <td class="px-6 py-3 whitespace-nowrap text-gray-500 dark:text-gray-400">{{ fmtTs(c.CreatedAt) }}</td>
-                <td class="px-6 py-3 whitespace-nowrap text-gray-500 dark:text-gray-400">{{ fmtTs(c.UpdatedAt) }}</td>
-                <td class="px-6 py-3">
-                  <div class="flex items-center gap-1.5">
-                    <img
-                      :src="usersStore.getAvatarUrlFromUserID(c.CreatorID)"
-                      class="w-5 h-5 rounded-full object-cover flex-shrink-0"
-                    />
-                    <span class="truncate text-gray-600 dark:text-gray-400">{{ usersStore.getUsernameFromUserID(c.CreatorID) }}</span>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <!-- 分页 -->
-        <div class="flex flex-col items-center gap-3 border-t border-gray-100 px-6 py-4 sm:flex-row sm:justify-between dark:border-dk-muted">
-          <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-            <span>共 {{ containerTotal }} 条</span>
-            <span>每页</span>
-            <input
-              type="number"
-              :value="containerPageSize"
-              min="1"
-              max="300"
-              class="w-14 rounded border border-gray-300 px-1.5 py-0.5 text-center text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
-              @change="handleContainerPageSize"
-            />
-            <span>条</span>
-          </div>
-          <div class="flex items-center gap-1">
-            <button @click="goContainerPage(1)" :disabled="containerPage === 1" class="rounded p-1.5 text-gray-500 hover:bg-gray-100 disabled:opacity-30 dark:hover:bg-dk-muted">
-              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 17l-5-5 5-5M18 17l-5-5 5-5"/></svg>
-            </button>
-            <button @click="goContainerPage(containerPage - 1)" :disabled="containerPage === 1" class="rounded p-1.5 text-gray-500 hover:bg-gray-100 disabled:opacity-30 dark:hover:bg-dk-muted">
-              <IconChevronLeft :size="16" />
-            </button>
-            <button
-              v-for="p in containerPageRange()" :key="p"
-              @click="goContainerPage(p)"
-              :class="['rounded px-2.5 py-1 text-sm', p === containerPage ? 'bg-blue-600 text-white' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-dk-muted']"
-            >{{ p }}</button>
-            <button @click="goContainerPage(containerPage + 1)" :disabled="containerPage === containerTotalPages" class="rounded p-1.5 text-gray-500 hover:bg-gray-100 disabled:opacity-30 dark:hover:bg-dk-muted">
-              <IconChevronRight :size="16" />
-            </button>
-            <button @click="goContainerPage(containerTotalPages)" :disabled="containerPage === containerTotalPages" class="rounded p-1.5 text-gray-500 hover:bg-gray-100 disabled:opacity-30 dark:hover:bg-dk-muted">
-              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 17l5-5-5-5M6 17l5-5-5-5"/></svg>
-            </button>
-          </div>
-        </div>
-      </div>
-
-    <!-- 主卡片：物品 -->
     <div class="rounded-xl border border-gray-200 bg-white shadow dark:border-dk-muted dark:bg-dk-card">
       <!-- Header -->
       <div class="flex items-center justify-between border-b border-gray-100 px-6 py-4 dark:border-dk-muted">
-        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('warehouse.item_list') }}</h3>
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('warehouse.contents') }}</h3>
+        <button
+          @click="openAddContainer"
+          class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+        >
+          <IconPlus :size="16" />
+          {{ t('warehouse.add_container') }}
+        </button>
       </div>
 
       <!-- 搜索栏 -->
       <div class="flex items-center gap-3 border-b border-gray-100 px-6 py-3 dark:border-dk-muted">
-        <IconSearch class="flex-shrink-0 text-gray-400" :size="18" />
+        <div class="relative flex-1 max-w-md">
-        <input
+          <IconSearch class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" :size="16" />
-          v-model="itemSearch"
+          <input
-          class="flex-1 bg-transparent text-sm text-gray-900 outline-none dark:text-white"
+            v-model="search"
-          :placeholder="t('warehouse.search_item_placeholder')"
+            type="text"
-          @input="onItemSearchInput"
+            :placeholder="t('warehouse.search_contents_placeholder')"
-        />
+            class="w-full rounded-lg border border-gray-300 bg-white py-1.5 pl-9 pr-3 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+            @input="onSearchInput"
+            @keyup.enter="fetchAll"
+          />
+        </div>
+        <div class="text-xs text-gray-400 dark:text-gray-500">
+          {{ t('warehouse.containers') }}: {{ containerTotal }} · {{ t('warehouse.items') }}: {{ itemTotal }}
+        </div>
       </div>
 
       <!-- 表格 -->
@@ -534,20 +287,18 @@ onMounted(() => {
         <table class="w-full text-left text-sm text-gray-900 dark:text-white">
           <thead>
             <tr class="border-b border-gray-200 bg-gray-50 text-gray-500 dark:border-dk-muted dark:bg-dk-base dark:text-gray-400">
-              <th class="px-5 py-3 font-medium w-80">{{ t('warehouse.item_name') }}</th>
+              <th class="px-5 py-3 font-medium w-80">{{ t('warehouse.container_name') }} / {{ t('warehouse.item_name') }}</th>
-              <th class="px-5 py-3 font-medium w-20">{{ t('warehouse.serial_number') }}</th>
+              <th class="px-5 py-3 font-medium">{{ t('warehouse.remark') }}</th>
-              <th class="px-5 py-3 font-medium w-50">{{ t('warehouse.remark') }}</th>
+              <th class="px-5 py-3 font-medium w-32 text-center">{{ t('warehouse.child_containers') }} / {{ t('warehouse.quantity') }}</th>
-              <th class="px-5 py-3 font-medium  text-center">{{ t('warehouse.quantity') }}</th>
+              <th class="px-5 py-3 font-medium w-28 text-center">{{ t('work_order.work_order_count') }}</th>
-              <th class="px-5 py-3 font-medium  text-center">{{ t('work_order.work_order_count') }}</th>
+              <th class="px-5 py-3 font-medium">{{ t('customer.related_customers') }}</th>
-              <th class="px-5 py-3 font-medium ">{{ t('customer.related_customers') }}</th>
+              <th class="px-5 py-3 font-medium whitespace-nowrap w-44">{{ t('warehouse.updated_at') }}</th>
-              <th class="px-5 py-3 font-medium whitespace-nowrap">{{ t('warehouse.updated_at') }}</th>
               <th class="px-5 py-3 font-medium">{{ t('warehouse.created_by') }}</th>
-              <th class="px-5 py-3 font-medium w-20 text-right">{{ t('warehouse.actions') }}</th>
             </tr>
           </thead>
           <tbody>
-            <tr v-if="itemLoading">
+            <tr v-if="loading">
-              <td colspan="9" class="px-6 py-8 text-center text-gray-400">
+              <td colspan="7" class="px-6 py-8 text-center text-gray-400">
                 <svg class="mx-auto mb-2 h-5 w-5 animate-spin text-gray-400" viewBox="0 0 24 24" fill="none">
                   <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
                   <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
@@ -555,97 +306,156 @@ onMounted(() => {
                 {{ t('message.loading') }}
               </td>
             </tr>
-            <tr v-else-if="items.length === 0">
+            <tr v-else-if="totalEntries === 0">
-              <td colspan="9" class="px-6 py-8 text-center text-gray-400 dark:text-gray-500">
+              <td colspan="7" class="px-6 py-8 text-center text-gray-400 dark:text-gray-500">
-                {{ t('warehouse.no_items') }}
+                {{ t('warehouse.no_contents') }}
-              </td>
-            </tr>
-            <tr
-              v-else
-              v-for="(item, idx) in items" :key="item.ID"
-              class="cursor-pointer border-b border-gray-100 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:hover:bg-dk-base"
-              @click="goToItemDetail(item)"
-            >
-              <td class="px-5 py-3 font-medium max-w-[13rem] truncate">{{ item.Name }}</td>
-              <td class="px-5 py-3 text-xs text-gray-500 dark:text-gray-400 max-w-[140px] truncate">{{ item.SerialNumber || '—' }}</td>
-              <td class="px-5 py-3 text-xs text-gray-500 dark:text-gray-400 max-w-[200px] truncate">{{ item.Remark || '—' }}</td>
-              <td class="px-5 py-3 text-center text-sm">{{ item.Quantity }}</td>
-              <td class="px-5 py-3 text-center">
-                <span v-if="item.WorkOrderCount > 0" class="inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-900/40 dark:text-orange-400">
-                  <IconTool :size="12" />
-                  {{ item.WorkOrderCount }}
-                </span>
-                <span v-else class="text-gray-400">—</span>
-              </td>
-              <td class="px-5 py-3">
-                <div v-if="item.Customers && item.Customers.length > 0" class="flex flex-wrap gap-1">
-                  <RouterLink
-                    v-for="customer in item.Customers.slice(0, 3)"
-                    :key="customer.id"
-                    :to="`/customer/detail/${customer.id}`"
-                    class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 hover:bg-blue-200 dark:bg-blue-900/40 dark:text-blue-400 dark:hover:bg-blue-900/60 whitespace-nowrap"
-                    @click.stop
-                  >
-                    <IconUser :size="10" />
-                    {{ customer.first_name }} {{ customer.last_name }}
-                  </RouterLink>
-                  <span v-if="item.Customers.length > 3" class="text-xs text-gray-400">+{{ item.Customers.length - 3 }}</span>
-                </div>
-                <span v-else class="text-gray-400">—</span>
-              </td>
-              <td class="px-5 py-3 text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">{{ formatDate(item.UpdatedAt) }}</td>
-              <td class="px-5 py-3">
-                <div class="flex items-center gap-1.5">
-                  <img
-                    :src="usersStore.getAvatarUrlFromUserID(item.CreatorID)"
-                    class="w-5 h-5 rounded-full object-cover flex-shrink-0"
-                  />
-                  <span class="truncate text-gray-600 dark:text-gray-400">{{ usersStore.getUsernameFromUserID(item.CreatorID) }}</span>
-                </div>
-              </td>
-              <td class="px-5 py-3 text-right">
-                <button
-                  class="text-xs text-blue-500 hover:underline whitespace-nowrap"
-                  @click.stop="goToItemDetail(item)"
-                >
-                  {{ t('warehouse.view_items') }}
-                </button>
               </td>
             </tr>
+            <template v-else>
+              <tr
+                v-for="entry in pagedEntries"
+                :key="entry.id"
+                class="cursor-pointer border-b border-gray-100 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:hover:bg-dk-base"
+                @click="entry.kind === 'container' ? jumpToContainer(entry.data.ID) : jumpToItem(entry.data.ID)"
+              >
+                <!-- 名称（容器：文件夹图标 / 物品：包裹图标） -->
+                <td class="px-5 py-3">
+                  <div class="flex items-center gap-2">
+                    <IconFolder
+                      v-if="entry.kind === 'container'"
+                      class="flex-shrink-0 text-blue-500"
+                      :size="18"
+                    />
+                    <IconPackage
+                      v-else
+                      class="flex-shrink-0 text-green-500"
+                      :size="18"
+                    />
+                    <span class="max-w-xs truncate font-medium text-gray-900 dark:text-white">
+                      {{ entry.kind === 'container' ? entry.data.Title : entry.data.Name }}
+                    </span>
+                    <span
+                      v-if="entry.kind === 'item' && entry.data.SerialNumber"
+                      class="text-xs text-gray-400 dark:text-gray-500 truncate"
+                    >· {{ entry.data.SerialNumber }}</span>
+                  </div>
+                </td>
+
+                <!-- 备注 -->
+                <td class="px-5 py-3 max-w-xs truncate text-gray-500 dark:text-gray-400">
+                  {{ entry.data.Remark || '—' }}
+                </td>
+
+                <!-- 容量 / 数量（容器显示子容器+物品数；物品显示数量） -->
+                <td class="px-5 py-3 text-center">
+                  <template v-if="entry.kind === 'container'">
+                    <span class="inline-flex items-center gap-1 rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-400">
+                      <IconFolders :size="12" />
+                      {{ entry.data.ChildCount }}
+                    </span>
+                    <span class="ml-1 inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/40 dark:text-green-400">
+                      <IconPackage :size="12" />
+                      {{ entry.data.ItemCount }}
+                    </span>
+                  </template>
+                  <span v-else class="text-sm text-gray-700 dark:text-gray-300">{{ entry.data.Quantity }}</span>
+                </td>
+
+                <!-- 工单数（仅物品） -->
+                <td class="px-5 py-3 text-center">
+                  <template v-if="entry.kind === 'item'">
+                    <span
+                      v-if="entry.data.WorkOrderCount > 0"
+                      class="inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-900/40 dark:text-orange-400"
+                    >
+                      <IconTool :size="12" />
+                      {{ entry.data.WorkOrderCount }}
+                    </span>
+                    <span v-else class="text-gray-400">—</span>
+                  </template>
+                  <span v-else class="text-gray-400">—</span>
+                </td>
+
+                <!-- 关联客户（仅物品） -->
+                <td class="px-5 py-3">
+                  <template v-if="entry.kind === 'item' && entry.data.Customers && entry.data.Customers.length > 0">
+                    <div class="flex flex-wrap gap-1">
+                      <RouterLink
+                        v-for="customer in entry.data.Customers.slice(0, 3)"
+                        :key="customer.id"
+                        :to="`/customer/detail/${customer.id}`"
+                        class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 hover:bg-blue-200 dark:bg-blue-900/40 dark:text-blue-400 dark:hover:bg-blue-900/60 whitespace-nowrap"
+                        @click.stop
+                      >
+                        <IconUser :size="10" />
+                        {{ customer.first_name }} {{ customer.last_name }}
+                      </RouterLink>
+                      <span v-if="entry.data.Customers.length > 3" class="text-xs text-gray-400">
+                        +{{ entry.data.Customers.length - 3 }}
+                      </span>
+                    </div>
+                  </template>
+                  <span v-else class="text-gray-400">—</span>
+                </td>
+
+                <!-- 更新时间 -->
+                <td class="px-5 py-3 whitespace-nowrap text-xs text-gray-500 dark:text-gray-400">
+                  {{ fmtTs(entry.data.UpdatedAt) }}
+                </td>
+
+                <!-- 创建人 -->
+                <td class="px-5 py-3">
+                  <div class="flex items-center gap-1.5">
+                    <img
+                      :src="usersStore.getAvatarUrlFromUserID(entry.data.CreatorID)"
+                      class="w-5 h-5 rounded-full object-cover flex-shrink-0"
+                    />
+                    <span class="truncate text-gray-600 dark:text-gray-400">
+                      {{ usersStore.getUsernameFromUserID(entry.data.CreatorID) }}
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </template>
           </tbody>
         </table>
       </div>
 
       <!-- 分页 -->
-      <div v-if="itemTotalPages > 1" class="flex items-center justify-between border-t border-gray-100 px-6 py-3 dark:border-dk-muted">
+      <div class="flex flex-col items-center gap-3 border-t border-gray-100 px-6 py-4 sm:flex-row sm:justify-between dark:border-dk-muted">
-        <div class="text-xs text-gray-400 dark:text-gray-500">
+        <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-          {{ t('warehouse.total_items', { count: itemTotal }) }}
+          <span>{{ t('warehouse.total_items', { count: totalEntries }) }}</span>
+          <span>·</span>
+          <span>{{ t('warehouse.containers') }}: {{ containers.length }}</span>
+          <span>·</span>
+          <span>{{ t('warehouse.items') }}: {{ items.length }}</span>
+          <span class="ml-3">{{ isEn ? 'Per page' : '每页' }}</span>
+          <input
+            type="number"
+            :value="pageSize"
+            min="1"
+            max="300"
+            class="w-14 rounded border border-gray-300 px-1.5 py-0.5 text-center text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white"
+            @change="handlePageSize"
+          />
         </div>
         <div class="flex items-center gap-1">
-          <button
+          <button @click="goPage(1)" :disabled="page === 1" class="rounded p-1.5 text-gray-500 hover:bg-gray-100 disabled:opacity-30 dark:hover:bg-dk-muted">
-            class="flex h-7 w-7 items-center justify-center rounded text-sm text-gray-500 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-30 dark:text-gray-400 dark:hover:bg-dk-muted"
+            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 17l-5-5 5-5M18 17l-5-5 5-5"/></svg>
-            :disabled="itemPage === 1"
+          </button>
-            @click="prevItemPage"
+          <button @click="goPage(page - 1)" :disabled="page === 1" class="rounded p-1.5 text-gray-500 hover:bg-gray-100 disabled:opacity-30 dark:hover:bg-dk-muted">
-          >
+            <IconChevronLeft :size="16" />
-            <IconChevronLeft :size="15" />
           </button>
-          <template v-for="p in itemPageNumbers" :key="p">
-            <span v-if="p === '...'" class="px-1 text-sm text-gray-400">…</span>
-            <button
-              v-else
-              class="flex h-7 w-7 items-center justify-center rounded text-sm"
-              :class="p === itemPage
-                ? 'bg-blue-600 font-medium text-white'
-                : 'text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-dk-muted'"
-              @click="goItemPage(p)"
-            >{{ p }}</button>
-          </template>
           <button
-            class="flex h-7 w-7 items-center justify-center rounded text-sm text-gray-500 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-30 dark:text-gray-400 dark:hover:bg-dk-muted"
+            v-for="p in pageRange()" :key="p"
-            :disabled="itemPage === itemTotalPages"
+            @click="goPage(p)"
-            @click="nextItemPage"
+            :class="['rounded px-2.5 py-1 text-sm', p === page ? 'bg-blue-600 text-white' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-dk-muted']"
-          >
+          >{{ p }}</button>
-            <IconChevronRight :size="15" />
+          <button @click="goPage(page + 1)" :disabled="page === totalPages" class="rounded p-1.5 text-gray-500 hover:bg-gray-100 disabled:opacity-30 dark:hover:bg-dk-muted">
+            <IconChevronRight :size="16" />
+          </button>
+          <button @click="goPage(totalPages)" :disabled="page === totalPages" class="rounded p-1.5 text-gray-500 hover:bg-gray-100 disabled:opacity-30 dark:hover:bg-dk-muted">
+            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 17l5-5-5-5M6 17l5-5-5-5"/></svg>
           </button>
         </div>
       </div>
@@ -702,23 +512,4 @@ onMounted(() => {
       </div>
     </div>
   </Transition>
-
-  <!-- 容器 删除确认 -->
-  <ConfirmDialog
-    v-model="showDeleteConfirm"
-    :title="t('warehouse.delete_confirm_title')"
-    :message="t('warehouse.delete_confirm_msg', { name: deletingName })"
-    :confirm-text="t('warehouse.delete')"
-    :cancel-text="t('message.cancel')"
-    danger
-    @confirm="doDeleteContainer"
-  />
-
-  <!-- 物品 删除确认 -->
-  <ConfirmDialog
-    v-model="showDeleteItemConfirm"
-    :title="t('warehouse.delete_item_title')"
-    :message="t('warehouse.delete_item_msg', { name: deleteItemTarget?.name })"
-    @confirm="doDeleteItem"
-  />
 </template>