From 8e0aa1df10036183ed7a42e9d1c7a3428fdee1c1 Mon Sep 17 00:00:00 2001
From: WuYongJie <WuYongJie@local>
Date: Wed, 11 Mar 2026 20:48:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=B5=84=E4=BA=A7=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=98=BE=E7=A4=BA=E5=B9=B6=E8=B0=83=E6=95=B4=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E8=80=85=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/equipment/EquipmentList.vue     | 43 ++++++++++++++-----
 .../settings/components/PersonManagement.vue  | 43 ++++++++++++++++---
 2 files changed, 70 insertions(+), 16 deletions(-)

diff --git a/frontend/src/views/equipment/EquipmentList.vue b/frontend/src/views/equipment/EquipmentList.vue
index 865754e..f0b4560 100644
--- a/frontend/src/views/equipment/EquipmentList.vue
+++ b/frontend/src/views/equipment/EquipmentList.vue
@@ -55,7 +55,7 @@
 
     <div class="card-apple overflow-hidden">
       <div class="overflow-x-auto">
-        <table class="w-full min-w-[1200px]">
+        <table class="w-full min-w-[1280px]">
           <thead>
             <tr class="border-b border-system-gray-5">
               <th class="text-left py-3 px-4 text-apple-subhead text-system-label-secondary whitespace-nowrap">
@@ -100,21 +100,36 @@
                   </div>
                 </td>
                 <td class="py-3 px-4 text-apple-body font-mono whitespace-nowrap">{{ equipment.equipment_code }}</td>
-                <td class="py-3 px-4 text-apple-body whitespace-nowrap">
+                <td class="py-3 px-4 text-apple-body">
                   <div class="flex items-center gap-2">
-                    {{ equipment.equipment_name }}
+                    <span class="max-w-[220px] break-words leading-6" :title="equipment.equipment_name">
+                      {{ equipment.equipment_name }}
+                    </span>
                     <!-- 父/子资产标记 -->
                     <span v-if="isParentAsset(equipment)" class="px-1.5 py-0.5 rounded text-xs bg-apple-blue/15 text-apple-blue">父</span>
                     <span v-if="equipment.parent_id" class="px-1.5 py-0.5 rounded text-xs bg-apple-purple/15 text-apple-purple">子</span>
                     <span v-if="hasChildren(equipment)" class="text-xs text-system-label-tertiary">({{ equipment.children?.length }}个配件)</span>
                   </div>
                 </td>
-                <td class="py-3 px-4 text-apple-subhead whitespace-nowrap">{{ equipment.equipment_model || '-' }}</td>
+                <td class="py-3 px-4 text-apple-subhead">
+                  <span class="block max-w-[180px] break-words leading-6" :title="equipment.equipment_model || '-'">
+                    {{ equipment.equipment_model || '-' }}
+                  </span>
+                </td>
                 <td class="py-3 px-4 text-apple-subhead whitespace-nowrap">{{ equipment.equipment_type }}</td>
-                <td class="py-3 px-4 text-apple-subhead whitespace-nowrap">{{ equipment.department?.name || '-' }}</td>
-                <td class="py-3 px-4 text-apple-subhead whitespace-nowrap">
-                  <template v-if="equipment.storageLocation">{{ equipment.storageLocation.name }}<span v-if="equipment.storageLocation.code">（{{ equipment.storageLocation.code }}）</span></template>
-                  <template v-else>-</template>
+                <td class="py-3 px-4 text-apple-subhead">
+                  <span class="block max-w-[160px] break-words leading-6" :title="equipment.department?.name || '-'">
+                    {{ equipment.department?.name || '-' }}
+                  </span>
+                </td>
+                <td class="py-3 px-4 text-apple-subhead">
+                  <span
+                    class="block max-w-[220px] break-words leading-6"
+                    :title="equipment.storageLocation ? `${equipment.storageLocation.name}${equipment.storageLocation.code ? `（${equipment.storageLocation.code}）` : ''}` : '-'"
+                  >
+                    <template v-if="equipment.storageLocation">{{ equipment.storageLocation.name }}<span v-if="equipment.storageLocation.code">（{{ equipment.storageLocation.code }}）</span></template>
+                    <template v-else>-</template>
+                  </span>
                 </td>
                 <td class="py-3 px-4 text-apple-body whitespace-nowrap">{{ formatCurrencyNoFraction(Number(equipment.unit_price || 0)) }}</td>
                 <td class="py-3 px-4 whitespace-nowrap">
@@ -141,13 +156,19 @@
                     <span class="text-system-label-tertiary">└</span>
                   </td>
                   <td class="py-2 px-4 text-apple-footnote font-mono whitespace-nowrap text-system-label-secondary">{{ child.equipment_code }}</td>
-                  <td class="py-2 px-4 text-apple-footnote whitespace-nowrap">
+                  <td class="py-2 px-4 text-apple-footnote">
                     <div class="flex items-center gap-2">
-                      <span class="text-system-label-secondary">{{ child.equipment_name }}</span>
+                      <span class="max-w-[220px] break-words leading-5 text-system-label-secondary" :title="child.equipment_name">
+                        {{ child.equipment_name }}
+                      </span>
                       <span class="px-1.5 py-0.5 rounded text-xs bg-apple-purple/15 text-apple-purple">配件</span>
                     </div>
                   </td>
-                  <td class="py-2 px-4 text-apple-footnote whitespace-nowrap text-system-label-tertiary">{{ child.equipment_model || '-' }}</td>
+                  <td class="py-2 px-4 text-apple-footnote text-system-label-tertiary">
+                    <span class="block max-w-[180px] break-words leading-5" :title="child.equipment_model || '-'">
+                      {{ child.equipment_model || '-' }}
+                    </span>
+                  </td>
                   <td class="py-2 px-4 text-apple-footnote whitespace-nowrap text-system-label-tertiary">{{ child.equipment_type }}</td>
                   <td class="py-2 px-4 text-apple-footnote whitespace-nowrap text-system-label-tertiary">-</td>
                   <td class="py-2 px-4 text-apple-footnote whitespace-nowrap text-system-label-tertiary">-</td>
diff --git a/frontend/src/views/settings/components/PersonManagement.vue b/frontend/src/views/settings/components/PersonManagement.vue
index 24f7b5d..f184c5d 100644
--- a/frontend/src/views/settings/components/PersonManagement.vue
+++ b/frontend/src/views/settings/components/PersonManagement.vue
@@ -12,16 +12,16 @@
             type="text"
             class="input-apple"
             placeholder="输入花名 / 姓名 / 证件编号"
-            @keyup.enter="fetchPersons"
+            @keyup.enter="handleSearch"
           />
         </div>
         <div class="flex flex-wrap gap-3">
-          <select v-model="statusFilter" class="input-apple">
+          <select v-model="statusFilter" class="input-apple" @change="handleSearch">
             <option value="">全部状态</option>
             <option value="active">启用</option>
             <option value="inactive">禁用</option>
           </select>
-          <button class="btn-apple-secondary" :disabled="listLoading" @click="fetchPersons">查询</button>
+          <button class="btn-apple-secondary" :disabled="listLoading" @click="handleSearch">查询</button>
           <button class="btn-apple-primary" @click="showCreateModal = true">新增使用者</button>
         </div>
       </div>
@@ -93,6 +93,19 @@
           </tbody>
         </table>
       </div>
+      <div v-if="total > 0" class="mt-4 flex items-center justify-between border-t border-system-gray-5 pt-4">
+        <p class="text-apple-footnote text-system-label-tertiary">
+          第 {{ currentPage }} / {{ totalPages }} 页，每页 {{ pageSize }} 人
+        </p>
+        <div class="flex items-center gap-2">
+          <button class="btn-apple-secondary" :disabled="currentPage === 1 || listLoading" @click="handlePrevPage">
+            上一页
+          </button>
+          <button class="btn-apple-secondary" :disabled="currentPage >= totalPages || listLoading" @click="handleNextPage">
+            下一页
+          </button>
+        </div>
+      </div>
       <p v-if="!listLoading && persons.length === 0" class="mt-6 text-center text-system-label-tertiary">暂无使用者数据。</p>
     </section>
 
@@ -211,6 +224,8 @@ import { batchImportPersons } from '@/api/batchImport'
 
 const persons = ref<Person[]>([])
 const total = ref(0)
+const currentPage = ref(1)
+const pageSize = 30
 const listLoading = ref(false)
 const createLoading = ref(false)
 const updateLoading = ref(false)
@@ -228,13 +243,19 @@ const editDraft = reactive({
 })
 
 const canCreate = computed(() => newPerson.nickname.trim() && newPerson.real_name.trim())
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
+
+const handleSearch = () => {
+  currentPage.value = 1
+  fetchPersons()
+}
 
 const fetchPersons = async () => {
   listLoading.value = true
   try {
     const response = await getPersonList({
-      page: 1,
-      pageSize: 500,
+      page: currentPage.value,
+      pageSize,
       keyword: keyword.value || undefined,
       status: statusFilter.value || undefined
     })
@@ -345,6 +366,18 @@ const toggleStatus = async (person: Person) => {
   }
 }
 
+const handlePrevPage = () => {
+  if (currentPage.value <= 1) return
+  currentPage.value -= 1
+  fetchPersons()
+}
+
+const handleNextPage = () => {
+  if (currentPage.value >= totalPages.value) return
+  currentPage.value += 1
+  fetchPersons()
+}
+
 const handleDeletePerson = async (person: Person) => {
   if (!confirm(`确定要删除使用者 "${person.nickname}" 吗？此操作不可恢复。`)) return
   try {