feat(publish): enhance compliance feedback and UI elements in PublishArticleModal

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

@@ -1,5 +1,11 @@
 <script setup lang="ts">
-import { MinusCircleFilled } from '@ant-design/icons-vue'
+import {
+  CheckCircleFilled,
+  CloseCircleFilled,
+  ExclamationCircleFilled,
+  InfoCircleFilled,
+  MinusCircleFilled,
+} from '@ant-design/icons-vue'
 import { ApiClientError } from '@geo/http-client'
 import type {
   ArticleDetail,
@@ -230,12 +236,12 @@ const accountSelectionLockMessage = computed(() => {
     return '发布任务提交中，请稍候。'
   }
   if (accountSelectionLockSpinning.value) {
-    return '强制敏感词检测中，检测通过后可选择目标账号。'
+    return '强制敏感词检测中，检测通过后可选择目标账号。\n请回到文章编辑页，使用合规检测查看全部命中词并逐项修改。'
   }
   if (publishAdmissionError.value) {
-    return '强制敏感词检测暂时不可用，当前不能选择目标账号。'
+    return '强制敏感词检测暂时不可用，当前不能选择目标账号。\n请回到文章编辑页，使用合规检测查看全部命中词并逐项修改。' 
   }
-  return '当前文章未通过强制敏感词检测，暂不能选择目标账号。'
+  return '当前文章未通过强制敏感词检测，暂不能选择目标账号。\n请回到文章编辑页，使用合规检测查看全部命中词并逐项修改。'
 })
 const okText = computed(() => {
   if (publishComplianceMandatory.value && publishAdmissionLoading.value) {
@@ -746,41 +752,26 @@ function decisionAlertType(result: ComplianceCheckResult | null | undefined) {
         </div>
       </section>
 
-      <section
-        v-if="publishCompliancePanelVisible"
-        class="publish-modal__section publish-modal__compliance"
-        :class="`publish-modal__compliance--${publishCompliancePanelTone}`"
-      >
-        <a-alert
-          v-if="publishAdmissionLoading"
-          type="info"
-          show-icon
-          :message="publishCompliancePanelTitle"
-          :description="publishCompliancePanelDescription"
-        />
-        <a-alert
-          v-else-if="publishAdmissionError"
-          :type="publishComplianceMandatory ? 'error' : 'warning'"
-          show-icon
-          :message="publishCompliancePanelTitle"
-          :description="publishCompliancePanelDescription"
-        />
-        <a-alert
-          v-else-if="displayedComplianceResult"
-          :type="decisionAlertType(displayedComplianceResult)"
-          show-icon
-          :message="publishCompliancePanelTitle"
-          :description="publishCompliancePanelDescription"
-        />
-
-      </section>
-
       <section class="publish-modal__section">
         <div class="publish-modal__section-header">
-          <h3>
+          <div class="publish-modal__title-row">
-            <span class="required-star">*</span>
+            <h3>
-            目标账号
+              <span class="required-star">*</span>
-          </h3>
+              目标账号
+            </h3>
+            <div
+              v-if="accountSelectionLocked && !accountsQuery.isPending.value && !platformsQuery.isPending.value"
+              class="publish-modal__account-lock publish-modal__account-lock--inline"
+              :class="{
+                'publish-modal__account-lock--error': !accountSelectionLockSpinning && (mandatoryAdmissionBlocking || publishAdmissionError)
+              }"
+            >
+              <a-spin v-if="accountSelectionLockSpinning" size="small" />
+              <CloseCircleFilled v-else-if="mandatoryAdmissionBlocking || publishAdmissionError" class="publish-modal__account-lock-icon" />
+              <InfoCircleFilled v-else class="publish-modal__account-lock-icon" />
+              <span>{{ accountSelectionLockMessage }}</span>
+            </div>
+          </div>
           <p class="muted">
             优先预选文章里已经勾选的平台账号。支持同平台多账号；授权异常或未绑定桌面客户端的账号不可选。
           </p>
@@ -794,11 +785,6 @@ function decisionAlertType(result: ComplianceCheckResult | null | undefined) {
         </div>
 
         <template v-else>
-          <div v-if="accountSelectionLocked" class="publish-modal__account-lock">
-            <a-spin v-if="accountSelectionLockSpinning" size="small" />
-            <span>{{ accountSelectionLockMessage }}</span>
-          </div>
-
           <div v-if="accountCards.length" class="publish-modal__list">
             <button
               v-for="account in accountCards"
@@ -1025,55 +1011,99 @@ function decisionAlertType(result: ComplianceCheckResult | null | undefined) {
 }
 
 .publish-modal__compliance {
-  gap: 16px;
+  display: flex;
-  padding: 20px;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 16px 20px;
   border-radius: 12px;
   border: 1px solid transparent;
   transition: all 0.3s ease;
 }
 
+.publish-modal__compliance-icon {
+  font-size: 24px;
+  line-height: 1;
+}
+
+.publish-modal__compliance-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+}
+
+.publish-modal__compliance-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.publish-modal__compliance-desc {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  opacity: 0.9;
+}
+
 .publish-modal__compliance--error {
-  border-color: #fecaca;
+  background: linear-gradient(145deg, #fef2f2, #fff5f5);
-  background: linear-gradient(to bottom, #fff5f5, #ffffff);
+  border-color: #fee2e2;
-  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.05);
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.06);
+}
+.publish-modal__compliance--error .publish-modal__compliance-icon {
+  color: #ef4444;
+}
+.publish-modal__compliance--error .publish-modal__compliance-title {
+  color: #991b1b;
+}
+.publish-modal__compliance--error .publish-modal__compliance-desc {
+  color: #991b1b;
 }
 
 .publish-modal__compliance--warning {
-  border-color: #fde68a;
+  background: linear-gradient(145deg, #fffbeb, #fffde7);
-  background: linear-gradient(to bottom, #fffbeb, #ffffff);
+  border-color: #fef3c7;
-  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.05);
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.06);
 }
-
+.publish-modal__compliance--warning .publish-modal__compliance-icon {
-.publish-modal__compliance--success {
+  color: #f59e0b;
-  border-color: #bbf7d0;
+}
-  background: linear-gradient(to bottom, #f0fdf4, #ffffff);
+.publish-modal__compliance--warning .publish-modal__compliance-title {
-  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.05);
+  color: #92400e;
+}
+.publish-modal__compliance--warning .publish-modal__compliance-desc {
+  color: #92400e;
 }
 
 .publish-modal__compliance--info {
-  border-color: #bfdbfe;
+  background: linear-gradient(145deg, #eff6ff, #f5f8ff);
-  background: linear-gradient(to bottom, #eff6ff, #ffffff);
+  border-color: #dbeafe;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.05);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.06);
+}
+.publish-modal__compliance--info .publish-modal__compliance-icon {
+  color: #3b82f6;
+}
+.publish-modal__compliance--info .publish-modal__compliance-title {
+  color: #1e40af;
+}
+.publish-modal__compliance--info .publish-modal__compliance-desc {
+  color: #1e40af;
 }
 
-.publish-modal__compliance :deep(.ant-alert) {
+.publish-modal__compliance--success {
-  border: none;
+  background: linear-gradient(145deg, #f0fdf4, #f5fdf7);
-  background: transparent;
+  border-color: #dcfce7;
-  padding: 0;
+  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.06);
 }
-.publish-modal__compliance :deep(.ant-alert-icon) {
+.publish-modal__compliance--success .publish-modal__compliance-icon {
-  font-size: 20px;
+  color: #22c55e;
-  margin-top: 2px;
 }
-.publish-modal__compliance :deep(.ant-alert-message) {
+.publish-modal__compliance--success .publish-modal__compliance-title {
-  font-size: 16px;
+  color: #166534;
-  font-weight: 600;
-  color: #111827;
-  margin-bottom: 6px;
 }
-.publish-modal__compliance :deep(.ant-alert-description) {
+.publish-modal__compliance--success .publish-modal__compliance-desc {
-  font-size: 14px;
+  color: #166534;
-  color: #4b5563;
 }
 
 .publish-modal__section-header {
@@ -1087,12 +1117,19 @@ function decisionAlertType(result: ComplianceCheckResult | null | undefined) {
 }
 
 .publish-modal__section-header h3 {
-  margin: 0 0 6px;
+  margin: 0;
   color: #1f2937;
   font-size: 16px;
   font-weight: 600;
 }
 
+.publish-modal__title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 6px;
+}
+
 .publish-modal__section-header--inline h3 {
   margin: 0;
 }
@@ -1119,9 +1156,8 @@ function decisionAlertType(result: ComplianceCheckResult | null | undefined) {
   gap: 8px;
   width: fit-content;
   max-width: 100%;
-  margin-bottom: 12px;
+  padding: 10px 14px;
-  padding: 8px 12px;
+  border: 1px solid #ffedd5;
-  border: 1px solid #fed7aa;
   border-radius: 8px;
   background: #fff7ed;
   color: #9a3412;
@@ -1129,6 +1165,31 @@ function decisionAlertType(result: ComplianceCheckResult | null | undefined) {
   line-height: 1.5;
 }
 
+.publish-modal__account-lock--inline {
+  padding: 6px 12px;
+  border-radius: 6px;
+}
+
+.publish-modal__account-lock--inline span {
+  white-space: pre-wrap;
+  line-height: 1.5;
+}
+
+.publish-modal__account-lock--error {
+  background: #fef2f2;
+  border-color: #fee2e2;
+  color: #991b1b;
+}
+
+.publish-modal__account-lock--error .publish-modal__account-lock-icon {
+  color: #ef4444;
+}
+
+.publish-modal__account-lock-icon {
+  color: #ea580c;
+  font-size: 15px;
+}
+
 .publish-modal__list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));