diff --git a/docs/first-version-development-requirements.md b/docs/first-version-development-requirements.md index c0b72fc..45ad9fa 100644 --- a/docs/first-version-development-requirements.md +++ b/docs/first-version-development-requirements.md @@ -423,6 +423,8 @@ - 企业应用新增时选择企业必须使用通用下拉控件和真实企业接口；下拉控件的视觉、尺寸、禁用态、错误态应与系统内其他 Select 保持一致。 - 所有企业和企业应用下拉控件必须支持按名称搜索；企业应用管理列表不展示 AppID。 - 企业短信模板列表必须采用自适应布局，在常用桌面及平板视口下无需水平滚动即可看到编辑、删除等操作。 +- 运营端“企业模板管理”以响应式列表行展示模板、归属、内容、状态和更新时间；预览、编辑、删除操作在常用视口内始终可见，不得依赖水平滚动。 +- 运营端“企业签名管理”的移动、联通、电信报备状态必须将状态文字与通过数/总数允许分行展示；报备详情、报备状态、编辑、删除四个操作按钮在空间不足时按每行两个排列，不得将按钮文字挤成单字换行。 ### 5.12 运营端审核 diff --git a/docs/system-functional-test-cases.md b/docs/system-functional-test-cases.md index 4b17329..3bb0f73 100644 --- a/docs/system-functional-test-cases.md +++ b/docs/system-functional-test-cases.md @@ -3207,6 +3207,8 @@ npm run verify:phase8 | TC-MOCK-CLEAN-002 | 访问运营端数据统计、账务账户、发送监控、安全控制、手机号段库、报备字段库、通道组、报备任务、报备记录。 | 所有列表和卡片来自真实 API；新增动作写入数据库；后端缺失的编辑/删除能力不得用本地状态伪造。 | | TC-UI-ENTERPRISE-SELECT-001 | 逐一打开包含企业或企业应用选择的表单和筛选项，输入部分企业/应用名称。 | 下拉面板提供搜索框并实时缩小真实 API 选项范围；清空后恢复全部选项。 | | TC-UI-TEMPLATE-RESPONSIVE-001 | 在 1024px、1366px 和宽屏视口打开企业短信模板页。 | 模板卡片自适应换列，页面不出现水平滚动，每张卡片的编辑和删除按钮直接可见。 | +| TC-ADMIN-ENTERPRISE-TEMPLATE-RESPONSIVE-001 | 在 1024px、1366px 和宽屏视口打开运营端“企业模板管理”，查看长企业名、长模板内容和包含多变量的真实记录。 | 列表行按视口自适应重排，无水平滚动；预览、编辑、删除始终可见且可操作，内容摘要不撑破容器。 | +| TC-ADMIN-ENTERPRISE-SIGNATURE-LAYOUT-001 | 在运营端“企业签名管理”打开移动/联通/电信显示“未报备（0/2）”的真实签名，分别使用 1024px 和 1366px 视口。 | 状态标签和数量可分行但各自保持完整；四个操作按钮按两列两行排列，文字不被挤成单字换行，卡片不产生水平滚动。 | | TC-ADMIN-REPORT-FIELD-CODE-001 | 在报备字段库分别提交 `License2026`、`license_code`、中文和空白代码，并直接调用真实新增 API 复验。 | 只有 `License2026` 写入 PostgreSQL；前端阻止非法值，API 同样返回 400，不依赖前端校验。 | | TC-ADMIN-CHANNEL-REPORT-SIGNATURE-001 | 打开包含数据库签名 `【安徽航天信息】` 的通道报备详情及签名详情弹窗。 | 两处均只显示单层 `【安徽航天信息】`，不出现重复中括号。 | | TC-MOCK-CLEAN-003 | 运营端创建企业、编辑企业、禁用/启用企业、删除企业，再刷新页面和重新登录客户端。 | Tenant 状态持久化；列表刷新后状态不丢；禁用/删除企业阻断客户端业务访问；动作写系统日志。 | diff --git a/docs/testing-progress.md b/docs/testing-progress.md index 9b38353..9d9eaf4 100644 --- a/docs/testing-progress.md +++ b/docs/testing-progress.md @@ -1659,3 +1659,10 @@ git diff --check - 报备字段代码在前端和 NestJS API 双层限制为 `A-Z/a-z/0-9`；API 会拒绝下划线、中文、空白等非法代码，防止绕过页面写入 PostgreSQL。 - 运营端浏览器标题更新为“聆界短信管理平台”。通道报备详情和签名详情弹窗在展示前剔除数据中已存在的外层中/英文括号，统一只渲染一层中括号。 - 本地验证：API 全量 13 suites、137 项通过，API build、前端 build 和 `git diff --check` 通过；前端仅有既有 chunk size warning。应用内浏览器确认本地运营端登录路由、非空 DOM、无框架错误覆盖，且标题为“聆界短信管理平台”；因本地未启动真实 API，验证码请求返回 502，无法进入登录后页面完成模板响应式、下拉搜索和签名实数据的视觉点击验收，未注入 mock 或绕过认证。截图阶段应用内浏览器页面挂载超时，未将截图标记为通过。 + +## 2026-07-13 运营端企业模板与企业签名布局优化 + +- 确认上一次自适应修正落在客户端 `/client/templates`，而运营端 `/admin/enterprise-templates` 仍使用累计最小宽度约 1820px 的表格，操作列必须水平滚动才能看到。 +- 企业模板管理改为响应式列表行：将模板名称/审核状态、企业/应用/签名归属、两行内容摘要/变量数、更新时间和操作分区展示。在 1180px 以下重排为三列，860px 以下变为单列，预览/编辑/删除始终保留在当前视口。分页仍基于真实 API 结果，每页 10 条。 +- 企业签名管理将三网报备标签与 `（approved/total）` 数量拆开，容器可换行但文字和数量各自保持完整；报备详情/报备状态/编辑/删除固定为两列两行。同时修正签名摘要网格少一列导致“引流信息”和操作区被挤到下一行的布局问题。 +- 本地验证：API 全量 13 suites、137 项通过，API build、前端 build、`git diff --check` 通过；前端仅有既有 chunk size warning。Chrome 当前无已登录生产标签，部署前未绕过图形验证码或注入 mock 数据。 diff --git a/src/apps/admin/AdminEnterpriseSignaturesPage.tsx b/src/apps/admin/AdminEnterpriseSignaturesPage.tsx index 3870bb3..ed29947 100644 --- a/src/apps/admin/AdminEnterpriseSignaturesPage.tsx +++ b/src/apps/admin/AdminEnterpriseSignaturesPage.tsx @@ -82,12 +82,14 @@ type CarrierReportSummary = { status: string; approved: number; total: number }; function CarrierReportTag({ summary }: { summary?: CarrierReportSummary }) { if (!summary || summary.status === 'not_applicable' || summary.total === 0) return 不适用; - if (summary.status === 'approved') return 全部通过（{summary.approved}/{summary.total}）; - if (summary.status === 'failed' || summary.status === 'rejected') return 报备失败（{summary.approved}/{summary.total}）; - if (summary.status === 'waiting_material') return 资料待补充（{summary.approved}/{summary.total}）; - if (summary.approved > 0) return 部分通过（{summary.approved}/{summary.total}）; - if (summary.status === 'reporting' || summary.status === 'exporting') return 报备中（0/{summary.total}）; - return 未报备（0/{summary.total}）; + let label = '未报备'; + let tone: 'success' | 'danger' | 'warning' | 'info' | 'neutral' = 'neutral'; + if (summary.status === 'approved') { label = '全部通过'; tone = 'success'; } + else if (summary.status === 'failed' || summary.status === 'rejected') { label = '报备失败'; tone = 'danger'; } + else if (summary.status === 'waiting_material') { label = '资料待补充'; tone = 'warning'; } + else if (summary.approved > 0) { label = '部分通过'; tone = 'info'; } + else if (summary.status === 'reporting' || summary.status === 'exporting') { label = '报备中'; tone = 'info'; } + return {label}（{summary.approved}/{summary.total}）; } function AuditStatusTag({ status }: { status: string }) { diff --git a/src/apps/admin/AdminEnterpriseTemplatesPage.tsx b/src/apps/admin/AdminEnterpriseTemplatesPage.tsx index 6990a54..50a40ef 100644 --- a/src/apps/admin/AdminEnterpriseTemplatesPage.tsx +++ b/src/apps/admin/AdminEnterpriseTemplatesPage.tsx @@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react'; import { Edit3, Eye, Plus, Search, Trash2 } from 'lucide-react'; import { adminApi, type ClientSmsApplication, type ClientSmsSignature, type ClientSmsTemplate, type TenantOption } from '@/api/adminApi'; import { formatDateTime } from '@/utils/dateTime'; -import { Breadcrumb, Button, Input, Modal, Select, Table, Tabs, Tag, Textarea, type TableColumn } from '@/components/ui'; +import { Breadcrumb, Button, Input, Modal, Pagination, Select, Tabs, Tag, Textarea } from '@/components/ui'; type TemplateFormState = { tenantId: string; @@ -259,6 +259,7 @@ export function AdminEnterpriseTemplatesPage() { const [templateKeyword, setTemplateKeyword] = useState(''); const [appliedTemplateKeyword, setAppliedTemplateKeyword] = useState(''); const [tenants, setTenants] = useState([]); + const [page, setPage] = useState(1); async function loadData(filters = { enterpriseKeyword: appliedEnterpriseKeyword, templateKeyword: appliedTemplateKeyword }) { try { @@ -288,6 +289,14 @@ export function AdminEnterpriseTemplatesPage() { return (!appliedEnterpriseKeyword || enterprise.includes(appliedEnterpriseKeyword)) && (!appliedTemplateKeyword || item.name.includes(appliedTemplateKeyword) || item.content.includes(appliedTemplateKeyword) || application.includes(appliedTemplateKeyword)); }), [appliedEnterpriseKeyword, appliedTemplateKeyword, templates]); + const pageSize = 10; + const totalPages = Math.max(1, Math.ceil(filteredTemplates.length / pageSize)); + const currentPage = Math.min(page, totalPages); + const visibleTemplates = filteredTemplates.slice((currentPage - 1) * pageSize, currentPage * pageSize); + + useEffect(() => { + setPage(1); + }, [appliedEnterpriseKeyword, appliedTemplateKeyword]); async function saveTemplate(state: TemplateFormState) { const existing = templateModal && templateModal !== 'new' ? templateModal : null; @@ -328,30 +337,6 @@ export function AdminEnterpriseTemplatesPage() { await loadData(); } - const columns: Array> = [ - { key: 'name', title: '模板名称', width: '180px', render: (record) => {record.name} }, - { key: 'tenant', title: '企业', width: '240px', render: (record) => record.tenant?.name ?? record.tenantId }, - { key: 'application', title: '应用', width: '180px', render: (record) => record.application?.name ?? record.applicationId }, - { key: 'signature', title: '签名', width: '160px', render: (record) => record.signature?.name ?? '-' }, - { key: 'content', title: '模板内容', width: '420px', render: (record) => {record.content} }, - { key: 'variables', title: '变量', width: '120px', render: (record) => `${record.variables?.length ?? 0} 个` }, - { key: 'status', title: '审核状态', width: '130px', render: (record) => {auditStatusLabel[record.auditStatus] ?? record.auditStatus} }, - { key: 'updatedAt', title: '更新时间', width: '170px', render: (record) => formatDate(record.updatedAt) }, - { - key: 'actions', - title: '操作', - align: 'right', - width: '220px', - render: (record) => ( -
- - - -
- ), - }, - ]; - return (
@@ -387,7 +372,50 @@ export function AdminEnterpriseTemplatesPage() { onChange={(value) => setActiveTab(value as 'sms' | 'mms')} value={activeTab} items={[ - { label: '短信模板', value: 'sms', content: }, + { label: '短信模板', value: 'sms', content: ( +
+ {visibleTemplates.map((template) => ( +
+
+
+ {template.name} + {auditStatusLabel[template.auditStatus] ?? template.auditStatus} +
+
+
企业
{template.tenant?.name ?? template.tenantId}
+
应用
{template.application?.name ?? template.applicationId}
+
签名
{template.signature?.name ?? '未绑定'}
+
+
+
+ 模板内容 +

{template.content}

+ {template.variables?.length ?? 0} 个变量 +
+
+ 更新时间 + {formatDate(template.updatedAt)} +
+
+ + + +
+
+ ))} + {filteredTemplates.length === 0 ?
暂无企业模板
: null} + = totalPages} + onNext={() => setPage((value) => Math.min(totalPages, value + 1))} + onPageChange={setPage} + onPrevious={() => setPage((value) => Math.max(1, value - 1))} + page={currentPage} + previousDisabled={currentPage <= 1} + total={filteredTemplates.length} + totalPages={totalPages} + /> +
+ ) }, { label: '彩信模板', pending: true, value: 'mms', content:
彩信模板待后端能力确认，本页不展示演示数据。
}, ]} /> diff --git a/src/styles/global.css b/src/styles/global.css index 9231a6a..2615e35 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -2817,25 +2817,194 @@ h3 { .admin-enterprise-signature-list .signature-summary { gap: var(--space-2); - grid-template-columns: 22px minmax(96px, 0.9fr) minmax(132px, 1fr) minmax(104px, 0.85fr) repeat(4, minmax(64px, 0.55fr)) minmax(206px, auto); - min-width: 1040px; + grid-template-columns: 22px minmax(104px, 0.85fr) minmax(132px, 1fr) minmax(104px, 0.8fr) repeat(5, minmax(76px, 0.55fr)) 184px; + min-width: 0; padding-inline: var(--space-3); } .admin-enterprise-signature-list .signature-actions { - display: flex; + display: grid; gap: 6px; - justify-content: flex-end; + grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: end; - min-width: 206px; - white-space: nowrap; + min-width: 184px; + width: 184px; } .admin-enterprise-signature-list .signature-actions .ui-button { + justify-content: center; + min-width: 0; padding-left: 8px; padding-right: 8px; } +.carrier-report-summary { + align-items: flex-start; + display: inline-flex; + flex-wrap: wrap; + gap: 4px; +} + +.carrier-report-summary small { + color: var(--color-text-muted); + font-size: var(--font-size-xs); + line-height: 24px; + white-space: nowrap; +} + +.admin-enterprise-template-list { + display: grid; + gap: var(--space-3); +} + +.admin-enterprise-template-row { + align-items: center; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + display: grid; + gap: var(--space-5); + grid-template-columns: minmax(220px, 1.15fr) minmax(280px, 1.6fr) minmax(136px, 0.65fr) 188px; + min-width: 0; + padding: var(--space-5); + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); +} + +.admin-enterprise-template-row:hover { + border-color: var(--color-border-strong); + box-shadow: var(--shadow-sm); +} + +.admin-enterprise-template-row__identity, +.admin-enterprise-template-row__content, +.admin-enterprise-template-row__meta { + min-width: 0; +} + +.admin-enterprise-template-row__title { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: var(--space-2); +} + +.admin-enterprise-template-row__title > strong { + color: var(--color-text-strong); + font-size: var(--font-size-lg); +} + +.admin-enterprise-template-row dl { + display: grid; + gap: 5px; + margin: var(--space-3) 0 0; +} + +.admin-enterprise-template-row dl div { + display: grid; + gap: var(--space-2); + grid-template-columns: 42px minmax(0, 1fr); +} + +.admin-enterprise-template-row dt, +.admin-enterprise-template-row__content > span, +.admin-enterprise-template-row__meta > span { + color: var(--color-text-muted); + font-size: var(--font-size-xs); +} + +.admin-enterprise-template-row dd { + color: var(--color-text-strong); + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.admin-enterprise-template-row__content p { + color: var(--color-text-strong); + display: -webkit-box; + line-height: 1.65; + margin: var(--space-2) 0; + overflow: hidden; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.admin-enterprise-template-row__content small { + color: var(--color-text-muted); +} + +.admin-enterprise-template-row__meta { + display: grid; + gap: var(--space-2); +} + +.admin-enterprise-template-row__meta strong { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); +} + +.admin-enterprise-template-row__actions { + display: grid; + gap: var(--space-2); + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.admin-enterprise-template-row__actions .ui-button { + justify-content: center; + min-width: 0; +} + +@media (max-width: 1180px) { + .admin-enterprise-template-row { + grid-template-columns: minmax(210px, 1fr) minmax(260px, 1.35fr) 168px; + } + + .admin-enterprise-template-row__meta { + grid-column: 1; + } + + .admin-enterprise-template-row__actions { + grid-column: 3; + grid-row: 1 / span 2; + } + + .admin-enterprise-signature-list .signature-summary { + grid-template-columns: 22px repeat(7, minmax(76px, 1fr)) 184px; + } + + .admin-enterprise-signature-list .signature-summary > div:nth-of-type(3) { + display: none; + } +} + +@media (max-width: 860px) { + .admin-enterprise-template-row { + align-items: stretch; + grid-template-columns: 1fr; + } + + .admin-enterprise-template-row__meta, + .admin-enterprise-template-row__actions { + grid-column: auto; + grid-row: auto; + } + + .admin-enterprise-signature-list .signature-summary { + grid-template-columns: 22px repeat(2, minmax(0, 1fr)); + } + + .admin-enterprise-signature-list .signature-summary > div, + .admin-enterprise-signature-list .signature-summary > div:nth-of-type(3) { + display: grid; + } + + .admin-enterprise-signature-list .signature-actions { + grid-column: 2 / -1; + justify-self: stretch; + width: 100%; + } +} + .admin-split-filter { align-items: end; display: grid;