From b00a13011436182aa1d24bac138405a550ba3c8f Mon Sep 17 00:00:00 2001
From: xiaomai <xiaomai@ramatex.com.my>
Date: Tue, 14 Oct 2025 23:07:11 +0800
Subject: [PATCH] feat(table): enhance item table with sticky header and
 improved search

This commit introduces two key improvements to the items table. A sticky header and max-height are added for better
usability on long lists. The global search is enhanced to allow filtering by brand and tags. This is achieved by adding
a hidden column for the brand and using an accessorFn to convert the tags array into a searchable string.
---
 app/pages/index.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index f07dc6a..c986753 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -48,9 +48,11 @@
         <!-- 给 UTable 一个 key（tableKey）用于在需要时强制重挂载 -->
         <UTable
           :key="tableKey"
+          sticky
           v-model:global-filter="globalFilter"
           :data="itemsList"
           :columns="itemColumns"
+          class="max-h-[640px]"
         >
           <template #select-cell="{ row }">
             <UCheckbox
@@ -69,7 +71,8 @@
               />
               <div>
                 <p class="font-medium text-highlighted">
-                  <strong>{{ row.original.brand }}</strong> {{ row.original.name }}
+                  <strong>{{ row.original.brand }}</strong>
+                  {{ row.original.name }}
                 </p>
               </div>
             </div>
@@ -204,6 +207,15 @@ const itemColumns: TableColumn<Item>[] = [
     header: "#",
     cell: ({ row }) => `#${row.getValue("id")}`,
   },
+  // 新增一个 brand 列 —— 让它参与全局搜索，但不实际渲染内容（brand 已在 name-cell 中显示）
+  {
+    accessorKey: "brand",
+    header: "", // 留空，避免影响布局
+    // 明确允许全局过滤（通常是默认 true，但写上更明确）
+    enableGlobalFilter: true,
+    // 不在表格中重复显示 brand（因为你在 name-cell 已经显示了）
+    cell: () => null,
+  },
   {
     accessorKey: "name",
     header: "标品名称",
@@ -211,6 +223,9 @@ const itemColumns: TableColumn<Item>[] = [
   {
     accessorKey: "tags",
     header: "标签",
+    accessorFn: (row: Item) => (row.tags ?? []).join(" "), // <-- 关键：把数组转成字符串
+    enableGlobalFilter: true,
+    // 注意：你仍然使用 template #tags-cell 来渲染标签外观（badge），slot 会优先显示
   },
   {
     id: "actions",