fix(ticket): repair the ticket status panel color and table cells

工单状态 Tab 三处渲染问题：

- 状态名称与标识两列空白：h() 的第三个参数对原生元素必须是文本本身，
  写成 () => row.name 的插槽函数只对组件生效，单元格因此为空
- 编辑弹窗「状态颜色」区域失灵：取色器未限定 modes，默认
  ['rgb','hex','hsl']，拖动色板回传 rgb(...)，被 setColor 的十六进制
  守卫丢弃，色块与输入框都不跟随。改为 :modes="['hex']"，与
  AksField 的 color 字段一致
- 颜色列原本只是纯文本，按需求补上色块预览；标识改用等宽 span 渲染

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

assets/admin/src/pages/users/partials/ticket/TicketStatusPanel.vue

@@ -32,8 +32,13 @@
           <n-input v-model:value="form.name" placeholder="如：处理中" maxlength="60" />
         </n-form-item>
         <n-form-item label="状态颜色" path="color">
-          <n-space align="center">
-            <n-color-picker :value="previewColor" :swatches="SWATCHES" @update:value="setColor" />
+          <n-space align="center" :wrap="true">
+            <n-color-picker
+              :value="previewColor"
+              :modes="['hex']"
+              :swatches="SWATCHES"
+              @update:value="setColor"
+            />
             <n-input v-model:value="form.color" style="width: 120px;" placeholder="#6b7280" />
             <span class="aksrt-ticket-badge" :style="{ '--aksrt-ticket-color': previewColor }">
               {{ form.name || '预览' }}
@@ -116,9 +121,19 @@ const columns = computed(() => [
     title: '状态',
     key: 'name',
     minWidth: 160,
-    render: (row) => h('span', { class: 'aksrt-ticket-badge', style: { '--aksrt-ticket-color': row.color } }, () => row.name),
+    // 注意：原生元素用 h('span', ...) 时，文本必须作为 children 直接传入；
+    // 写成 () => row.name 的插槽函数对原生元素不生效，单元格会是空的。
+    render: (row) => h('span', { class: 'aksrt-ticket-badge', style: { '--aksrt-ticket-color': row.color } }, row.name),
+  },
+  {
+    title: '颜色',
+    key: 'color',
+    width: 140,
+    render: (row) => h('span', { class: 'aksrt-ticket-color-cell' }, [
+      h('i', { class: 'aksrt-ticket-color-dot', style: { background: row.color } }),
+      h('span', { class: 'aksrt-ticket-color-value' }, row.color),
+    ]),
   },
-  { title: '颜色值', key: 'color', width: 120 },
   {
     title: '完结',
     key: 'is_closed',
@@ -135,7 +150,7 @@ const columns = computed(() => [
     title: '标识',
     key: 'status_key',
     minWidth: 140,
-    render: (row) => h('code', null, () => row.status_key),
+    render: (row) => h('span', { class: 'aksrt-ticket-key' }, row.status_key),
   },
   {
     title: '操作',
@@ -247,6 +262,33 @@ defineExpose({ reload: load })
   font-size: 12px;
 }
 
+/* 颜色列：色块 + 十六进制值，色块边界在浅色主题下也能看清。 */
+.aksrt-ticket-color-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.aksrt-ticket-color-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
+  flex: 0 0 auto;
+}
+
+.aksrt-ticket-color-value {
+  font-family: var(--n-font-family-mono, monospace);
+  font-size: 12px;
+  color: var(--aksrt-color-muted);
+}
+
+.aksrt-ticket-key {
+  font-family: var(--n-font-family-mono, monospace);
+  font-size: 12px;
+  color: var(--aksrt-color-muted);
+}
+
 /* 徽章与前台 assets/css/routes/tickets.css 的 .aksrt-ticket-badge 同构。 */
 .aksrt-ticket-badge {
   display: inline-block;

tools/admin-contract-report.json

@@ -1,5 +1,5 @@
 {
-    "generated_at": "2026-10-26T11:36:52+00:00",
+    "generated_at": "2026-10-26T12:40:28+00:00",
     "errors": [],
     "warnings": [
         "customPage tools-update section 'tools/update' not in PHP schema (ok if pure operational page)",
@@ -287,7 +287,7 @@
             "UsersLevel.BnvrTSj0.js",
             "UsersBadge.CZSYaoC4.js",
             "UsersWechatTemplate.BGKwGvbY.js",
-            "UsersTicket.DmhmPeKC.js",
+            "UsersTicket.CoFrcj_8.js",
             "ToolsImportExport.CuVI1mrN.js",
             "ToolsHealth.BT7gJFVm.js",
             "ToolsUpdate.59iH8s4m.js"