refactor(admin-web): tighten publish modal status display

Move publish-state pill next to account name, surface device name in the
client-status tag with truncation + tooltip, and switch the card click
target from disabled to aria-disabled so tooltips remain interactive.
Also disable the keyword selector in the brand question form to prevent
mid-edit reassignment.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/admin-web/src/components/PublishArticleModal.vue

@@ -35,6 +35,7 @@ import {
   buildPublishPlatformMap,
   clientStatusColor,
   clientStatusLabel,
+  clientStatusTooltip,
   healthColor,
   healthLabel,
   publishStateLabel,
@@ -795,7 +796,7 @@ function decisionAlertType(result: ComplianceCheckResult | null | undefined) {
                 'publish-modal__card--active': isSelected(account.id),
                 'publish-modal__card--disabled': !account.selectable || accountSelectionLocked,
               }"
-              :disabled="!account.selectable || accountSelectionLocked"
+              :aria-disabled="!account.selectable || accountSelectionLocked"
               @click="toggleAccount(account.id, account.selectable)"
             >
               <div class="publish-modal__card-header">
@@ -810,7 +811,17 @@ function decisionAlertType(result: ComplianceCheckResult | null | undefined) {
                     <span v-else>{{ accountInitial(account) }}</span>
                   </span>
                   <div class="publish-modal__identity-copy">
-                    <strong :title="account.displayName">{{ account.displayName }}</strong>
+                    <div class="publish-modal__account-name-row">
+                      <strong :title="account.displayName">{{ account.displayName }}</strong>
+                      <a-tooltip :title="account.statusText" placement="top">
+                        <span
+                          class="publish-modal__state-pill publish-modal__state-pill--compact"
+                          :class="`publish-modal__state-pill--${account.publishState}`"
+                        >
+                          {{ publishStateLabel(account.publishState) }}
+                        </span>
+                      </a-tooltip>
+                    </div>
                     <span
                       class="publish-modal__platform-line"
                       :title="`${account.platformName} · ${account.platformUid}`"
@@ -845,17 +856,15 @@ function decisionAlertType(result: ComplianceCheckResult | null | undefined) {
                   <a-tag :color="healthColor(account.health)">
                     {{ healthLabel(account.health) }}
                   </a-tag>
-                  <a-tag :color="clientStatusColor(account)">{{ clientStatusLabel(account) }}</a-tag>
+                  <a-tooltip :title="clientStatusTooltip(account)" placement="topLeft">
+                    <a-tag
+                      :color="clientStatusColor(account)"
+                      class="publish-modal__client-status-tag"
+                    >
+                      {{ clientStatusLabel(account) }}
+                    </a-tag>
+                  </a-tooltip>
                 </div>
-
-                <a-tooltip :title="account.statusText" placement="top">
-                  <span
-                    class="publish-modal__state-pill"
-                    :class="`publish-modal__state-pill--${account.publishState}`"
-                  >
-                    {{ publishStateLabel(account.publishState) }}
-                  </span>
-                </a-tooltip>
               </div>
             </button>
           </div>
@@ -1339,7 +1348,15 @@ function decisionAlertType(result: ComplianceCheckResult | null | undefined) {
   min-width: 0;
 }
 
+.publish-modal__account-name-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
 .publish-modal__identity-copy strong {
+  min-width: 0;
   color: #111827;
   font-size: 15px;
   font-weight: 600;
@@ -1405,6 +1422,13 @@ function decisionAlertType(result: ComplianceCheckResult | null | undefined) {
   flex-shrink: 0;
 }
 
+.publish-modal__state-pill--compact {
+  min-width: 0;
+  height: 22px;
+  padding: 0 9px;
+  font-size: 12px;
+}
+
 .publish-modal__state-pill--immediate {
   background: #ecfdf5;
   color: #059669;
@@ -1434,6 +1458,15 @@ function decisionAlertType(result: ComplianceCheckResult | null | undefined) {
   border-radius: 4px;
 }
 
+.publish-modal__client-status-tag {
+  display: inline-block;
+  max-width: 118px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
 .publish-modal__cover-body {
   display: flex;
   margin-top: 12px;

apps/admin-web/src/lib/publish-account-cards.ts

@@ -194,7 +194,20 @@ export function clientStatusLabel(card: PublishAccountCard): string {
   if (!card.clientId) {
     return '未绑定客户端'
   }
-  return card.clientOnline ? '客户端在线' : '客户端离线'
+
+  const state = card.clientOnline ? '在线' : '离线'
+  const deviceName = card.clientDeviceName?.trim()
+  return deviceName ? `${state} · ${deviceName}` : `客户端${state}`
+}
+
+export function clientStatusTooltip(card: PublishAccountCard): string {
+  if (!card.clientId) {
+    return '未绑定桌面客户端'
+  }
+
+  const state = card.clientOnline ? '在线' : '离线'
+  const deviceName = card.clientDeviceName?.trim()
+  return deviceName ? `${state} · ${deviceName}` : `客户端${state}`
 }
 
 export function clientStatusColor(card: PublishAccountCard): string {

apps/admin-web/src/views/BrandsView.vue

@@ -877,6 +877,7 @@ async function submitCompetitor(): Promise<void> {
         <a-form-item :label="t('brands.sections.keywords')">
           <a-select
             v-model:value="questionForm.keyword_id"
+            disabled
             :options="
               (keywordsQuery.data.value || []).map((item) => ({ label: item.name, value: item.id }))
             "