root/geo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(publish): enhance compliance feedback and UI elements in PublishArticleModal
Deployment Config CI / Deployment Config (push) Successful in 28s
Details
Backend CI / Backend (push) Successful in 14m8s
Details
Frontend CI / Frontend (push) Failing after 2m1s
Details

Browse Source
This commit is contained in:
liangxu
2026-05-05 21:01:11 +08:00
parent 745cdd79cf
commit 337bb6f9ac
1 changed files with 138 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin-web/src/components/PublishArticleModal.vue
+138 -77
View File
@@ -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>
<span class="required-star">*</span>
目标账号
</h3>
<div class="publish-modal__title-row">
<h3>
<span class="required-star">*</span>
目标账号
</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;
padding: 20px;
display: flex;
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(to bottom, #fff5f5, #ffffff);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.05);
background: linear-gradient(145deg, #fef2f2, #fff5f5);
border-color: #fee2e2;
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(to bottom, #fffbeb, #ffffff);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.05);
background: linear-gradient(145deg, #fffbeb, #fffde7);
border-color: #fef3c7;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.06);
}
.publish-modal__compliance--success {
border-color: #bbf7d0;
background: linear-gradient(to bottom, #f0fdf4, #ffffff);
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.05);
.publish-modal__compliance--warning .publish-modal__compliance-icon {
color: #f59e0b;
}
.publish-modal__compliance--warning .publish-modal__compliance-title {
color: #92400e;
}
.publish-modal__compliance--warning .publish-modal__compliance-desc {
color: #92400e;
}
.publish-modal__compliance--info {
border-color: #bfdbfe;
background: linear-gradient(to bottom, #eff6ff, #ffffff);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.05);
background: linear-gradient(145deg, #eff6ff, #f5f8ff);
border-color: #dbeafe;
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) {
border: none;
background: transparent;
padding: 0;
.publish-modal__compliance--success {
background: linear-gradient(145deg, #f0fdf4, #f5fdf7);
border-color: #dcfce7;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.06);
}
.publish-modal__compliance :deep(.ant-alert-icon) {
font-size: 20px;
margin-top: 2px;
.publish-modal__compliance--success .publish-modal__compliance-icon {
color: #22c55e;
}
.publish-modal__compliance :deep(.ant-alert-message) {
font-size: 16px;
font-weight: 600;
color: #111827;
margin-bottom: 6px;
.publish-modal__compliance--success .publish-modal__compliance-title {
color: #166534;
}
.publish-modal__compliance :deep(.ant-alert-description) {
font-size: 14px;
color: #4b5563;
.publish-modal__compliance--success .publish-modal__compliance-desc {
color: #166534;
}
.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: 8px 12px;
border: 1px solid #fed7aa;
padding: 10px 14px;
border: 1px solid #ffedd5;
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));