RS6 修复移动响应式布局体系
这个提交包含在:
@@ -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>
|
||||
|
||||
在新工单中引用
屏蔽一个用户