RS6 修复移动响应式布局体系

这个提交包含在:
2026-05-11 12:52:30 +08:00
父节点 5dd4c96bec
当前提交 e399376e25
共修改 16 个文件,包含 841 行新增和 97 行删除
@@ -761,7 +761,7 @@ export function MobileReimbursementDetailPage() {
"space-y-4",
showStickyActions ? "mobile-fixed-action-page" : "",
showStickyActions
? "pb-[calc(var(--mobile-sticky-action-height,76px)+env(safe-area-inset-bottom,0px)+1.25rem)]"
? "pb-[calc(var(--mobile-sticky-action-height,78px)+env(safe-area-inset-bottom,0px)+1.25rem)]"
: "pb-6",
)}
data-testid="mobile-reimbursement-detail"
@@ -779,10 +779,10 @@ export function MobileReimbursementDetailPage() {
</span>
</header>
<section className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm">
<section className="mobile-card">
<div className="text-xs text-zinc-500">合计金额</div>
<div className="mt-1 text-3xl font-semibold text-zinc-900">{formatCurrency(detail.totalAmount)}</div>
<div className="mt-4 grid grid-cols-3 gap-2 text-sm">
<div className="mobile-metric-grid mt-4 text-sm">
<div className="rounded-lg bg-zinc-50 px-3 py-2">
<div className="text-xs text-zinc-500">明细</div>
<div className="mt-1 font-semibold text-zinc-900">{detail.items.length}</div>
@@ -799,7 +799,7 @@ export function MobileReimbursementDetailPage() {
{detail.description ? <p className="mt-3 text-sm leading-6 text-zinc-600">{detail.description}</p> : null}
</section>
<section className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm" data-testid="mobile-reimbursement-items">
<section className="mobile-card" data-testid="mobile-reimbursement-items">
<div className="flex items-center justify-between gap-3">
<h2 className="text-base font-semibold text-zinc-900">报销明细</h2>
{canEdit ? (
@@ -815,7 +815,7 @@ export function MobileReimbursementDetailPage() {
{itemForm ? (
<div className="mt-3 space-y-3 rounded-lg border border-primary-100 bg-primary-50/40 p-3">
<div className="grid grid-cols-2 gap-3">
<div className="mobile-info-grid">
<label className="col-span-2 block space-y-1 text-sm text-zinc-700">
<span>费用类型</span>
<select
@@ -861,7 +861,7 @@ export function MobileReimbursementDetailPage() {
/>
</label>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="mobile-two-action-grid">
<Button
type="button"
disabled={!itemForm.expenseTypeId || !itemForm.expenseDate || !itemForm.amount.trim() || itemSaveMutation.isPending}
@@ -889,7 +889,7 @@ export function MobileReimbursementDetailPage() {
</div>
{item.description ? <p className="mt-2 text-sm leading-5 text-zinc-600">{item.description}</p> : null}
{canEdit ? (
<div className="mt-3 grid grid-cols-2 gap-2">
<div className="mobile-two-action-grid mt-3">
<Button size="sm" variant="secondary" type="button" onClick={() => startEditItem(item)}>
编辑
</Button>
@@ -914,7 +914,7 @@ export function MobileReimbursementDetailPage() {
</div>
</section>
<section className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm" data-testid={TEST_IDS.reimbursement.invoices}>
<section className="mobile-card" data-testid={TEST_IDS.reimbursement.invoices}>
<div className="flex items-center justify-between gap-3">
<h2 className="text-base font-semibold text-zinc-900">发票</h2>
{canOpenInvoiceDialog ? (
@@ -971,7 +971,7 @@ export function MobileReimbursementDetailPage() {
)}
</section>
<section className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm" data-testid="mobile-reimbursement-attachments">
<section className="mobile-card" data-testid="mobile-reimbursement-attachments">
<div className="flex items-center justify-between gap-3">
<div>
<h2 className="text-base font-semibold text-zinc-900">附件材料</h2>
@@ -1031,7 +1031,7 @@ export function MobileReimbursementDetailPage() {
{Math.ceil(attachment.fileSize / 1024)} KB · {formatDateTime(attachment.createdAt)}
</div>
</div>
<div className="mt-3 grid grid-cols-2 gap-2">
<div className="mobile-two-action-grid mt-3">
<Button
size="sm"
variant="secondary"
@@ -1064,7 +1064,7 @@ export function MobileReimbursementDetailPage() {
</section>
{showSecondaryActions ? (
<section className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm" data-testid="mobile-reimbursement-actions">
<section className="mobile-card" data-testid="mobile-reimbursement-actions">
<h2 className="text-base font-semibold text-zinc-900">操作</h2>
{actionError ? (
<div className="mt-3 whitespace-pre-wrap rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
@@ -1090,10 +1090,10 @@ export function MobileReimbursementDetailPage() {
{showStickyActions ? (
<div
className="fixed inset-x-0 bottom-0 z-50 border-t border-zinc-200 bg-white/95 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 shadow-[0_-10px_24px_rgba(15,23,42,0.10)] backdrop-blur"
className="mobile-sticky-action-surface fixed inset-x-0 bottom-0 z-50 border-t border-zinc-200 bg-white/95 shadow-[0_-10px_24px_rgba(15,23,42,0.10)] backdrop-blur"
data-testid="mobile-reimbursement-sticky-actions"
>
<div className={cn("grid gap-2", canOpenInvoiceDialog && showSubmitAction ? "grid-cols-2" : "grid-cols-1")}>
<div className={cn(canOpenInvoiceDialog && showSubmitAction ? "mobile-two-action-grid" : "grid grid-cols-1 gap-2")}>
{canOpenInvoiceDialog ? (
<Button
className="min-h-11 min-w-0 px-2 text-sm whitespace-nowrap"
@@ -1132,7 +1132,7 @@ export function MobileReimbursementDetailPage() {
<DialogDescription>可一次上传多张,识别完成后会自动添加。</DialogDescription>
</DialogHeader>
<div className="mt-4 grid grid-cols-2 gap-2 rounded-lg bg-zinc-100 p-1">
<div className="mobile-two-action-grid mt-4 rounded-lg bg-zinc-100 p-1">
<button
type="button"
className={cn("rounded-md px-3 py-2 text-sm font-medium", invoicePanel === "upload" ? "bg-white text-zinc-900 shadow-sm" : "text-zinc-500")}
@@ -1348,7 +1348,7 @@ export function MobileReimbursementDetailPage() {
<div className="whitespace-pre-wrap rounded-lg border border-zinc-200 bg-zinc-50 p-3 text-sm text-zinc-700">
{buildPrecheckDialogMessage(submitConfirmPrecheck)}
</div>
<div className="grid grid-cols-2 gap-2">
<div className="mobile-two-action-grid">
<Button type="button" variant="secondary" onClick={() => setSubmitConfirmPrecheck(null)}>
取消
</Button>