🐞 fix: 修复表格内容不刷新的问题

src/components/layout/AppTableEllipsis.vue

@@ -1,20 +1,47 @@
 <template>
   <a-typography-text
+    :key="instanceKey"
     class="app-table-ellipsis"
     :ellipsis="ellipsisConfig"
   >
-    <slot>{{ content }}</slot>
+    {{ displayText }}
   </a-typography-text>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, useSlots } from 'vue'
 
 const props = defineProps({
-  content: { type: String, default: '' },
+  /** 单元格展示文本，优先于默认插槽 */
+  content: { type: [String, Number], default: '' },
+  /** 行/列唯一标识，避免表格复用单元格时省略组件状态残留 */
+  rowKey: { type: [String, Number], default: '' },
   rows: { type: Number, default: 3 }
 })
 
+const slots = useSlots()
+
+const displayText = computed(() => {
+  if (props.content !== '' && props.content !== null && props.content !== undefined) {
+    return String(props.content)
+  }
+  const slot = slots.default?.()
+  if (!slot || slot.length === 0) return '-'
+  const text = slot
+    .map((node) => {
+      if (typeof node.children === 'string') return node.children
+      if (Array.isArray(node.children)) {
+        return node.children.filter((item) => typeof item === 'string').join('')
+      }
+      return ''
+    })
+    .join('')
+    .trim()
+  return text || '-'
+})
+
+const instanceKey = computed(() => `${props.rowKey}::${displayText.value}`)
+
 const ellipsisConfig = computed(() => ({
   rows: props.rows,
   showTooltip: true,

src/pages/admin/qkClient/index.vue

@@ -78,11 +78,8 @@
         </a-col>
       </a-row>
 
-      <a-alert type="info" class="info-alert">
-        客户端首次上线时会自动注册，无需在此手动创建。可在此查看在线状态，对异常客户端执行禁用，或对已禁用客户端执行解禁。
-      </a-alert>
-
       <a-table
+        row-key="client_id"
         :data="data"
         :bordered="false"
         hoverable
@@ -128,7 +125,10 @@
           <a-table-column title="登录用户" data-index="os_username" :width="120" ellipsis tooltip />
           <a-table-column title="CPU" :width="220">
             <template #cell="{ record }">
-              <AppTableEllipsis>{{ record.cpu_model || '-' }} ({{ record.cpu_threads || '-' }}线程)</AppTableEllipsis>
+              <AppTableEllipsis
+                :row-key="`${record.client_id}-cpu`"
+                :content="`${record.cpu_model || '-'} (${record.cpu_threads || '-'}线程)`"
+              />
             </template>
           </a-table-column>
           <a-table-column title="内存" :width="140">

src/pages/admin/qkReport/index.vue

@@ -72,6 +72,7 @@
       </AppQueryFilter>
 
       <a-table
+        row-key="id"
         :data="data"
         :bordered="false"
         hoverable
@@ -111,12 +112,15 @@
           </a-table-column>
           <a-table-column title="课程" :width="180">
             <template #cell="{ record }">
-              <AppTableEllipsis>{{ record.course_name || '-' }}</AppTableEllipsis>
+              <AppTableEllipsis :row-key="`${record.id}-course`" :content="record.course_name || '-'" />
             </template>
           </a-table-column>
           <a-table-column title="回报信息" :width="320">
             <template #cell="{ record }">
-              <AppTableEllipsis>{{ record.display_message || record.message || '-' }}</AppTableEllipsis>
+              <AppTableEllipsis
+                :row-key="`${record.id}-message`"
+                :content="record.display_message || record.message || '-'"
+              />
             </template>
           </a-table-column>
           <a-table-column title="任务状态" data-index="task_status" :width="100">

src/pages/admin/qkTask/index.vue

@@ -174,12 +174,12 @@
           </a-table-column>
           <a-table-column title="课程" :width="260">
             <template #cell="{ record }">
-              <AppTableEllipsis>{{ formatCourseList(record) }}</AppTableEllipsis>
+              <AppTableEllipsis :row-key="`${record.id}-course`" :content="formatCourseList(record)" />
             </template>
           </a-table-column>
           <a-table-column title="错误" :width="220">
             <template #cell="{ record }">
-              <AppTableEllipsis>{{ record.error_msg || '-' }}</AppTableEllipsis>
+              <AppTableEllipsis :row-key="`${record.id}-error`" :content="record.error_msg || '-'" />
             </template>
           </a-table-column>
           <a-table-column title="备注" :width="140" ellipsis tooltip>

src/pages/qk/taskList.vue

@@ -82,6 +82,7 @@
       </AppQueryFilter>
 
       <a-table
+        row-key="id"
         :data="data"
         :bordered="false"
         hoverable
@@ -113,7 +114,7 @@
           </a-table-column>
           <a-table-column title="结果" :width="220">
             <template #cell="{ record }">
-              <AppTableEllipsis>{{ resultText(record) }}</AppTableEllipsis>
+              <AppTableEllipsis :row-key="`${record.id}-result`" :content="resultText(record)" />
             </template>
           </a-table-column>
           <a-table-column title="备注" :width="140" ellipsis tooltip>