feat(hall): 支持全保金额整除校验与规则提示，优化桌面端转账按钮布局

2026-07-15 13:40:19 +08:00
parent 295cfb97cd
commit 406ebb7671
14 changed files with 510 additions and 74 deletions
--- a/src/features/wallet/wallet-logs-block.tsx
+++ b/src/features/wallet/wallet-logs-block.tsx
@@ -152,27 +152,28 @@ export function WalletLogsBlock({
          <div>
            <h2 className="text-sm font-black text-[#0b3f96] lg:text-base">{resolvedTitle}</h2>
          </div>
-          {/* 移动端：小胶囊；PC：大厅 4D/3D 同款分段控件 */}
-          <div className="flex flex-wrap gap-1.5 lg:inline-flex lg:max-w-full lg:flex-nowrap lg:items-center lg:gap-1 lg:overflow-x-auto lg:rounded-lg lg:bg-[#f3f6fb] lg:p-1">
-            {filters.map((f) => {
-              const active = filter === f.value;
-              return (
-                <button
-                  key={f.value || "all"}
-                  type="button"
-                  disabled={logsLoading && active}
-                  onClick={() => onFilterChange(f.value)}
-                  aria-pressed={active}
-                  className={
-                    active
-                      ? "inline-flex h-8 items-center justify-center rounded-full bg-[#07459f] px-3 text-xs font-bold text-white transition-colors hover:bg-[#063b88] disabled:opacity-60 lg:h-auto lg:min-w-[4.5rem] lg:rounded-lg lg:bg-[#2d63e2] lg:px-3.5 lg:py-2 lg:text-sm lg:shadow-[0_4px_12px_rgba(45,99,226,0.28)] lg:hover:bg-[#2556c7]"
-                      : "inline-flex h-8 items-center justify-center rounded-full border border-[#dce7f7] bg-white px-3 text-xs font-bold text-[#32518d] transition-colors hover:bg-[#f8fbff] lg:h-auto lg:min-w-[4.5rem] lg:rounded-lg lg:border-0 lg:bg-transparent lg:px-3.5 lg:py-2 lg:text-sm lg:text-[#5b7fbf] lg:hover:bg-[#f3f7ff] lg:hover:text-[#2d63e2]"
-                  }
-                >
-                  {f.label}
-                </button>
-              );
-            })}
+          <div className="w-full overflow-x-auto overscroll-x-contain [scrollbar-width:none] lg:w-auto lg:max-w-full">
+            <div className="inline-flex min-w-max items-center gap-1 rounded-lg bg-[#f3f6fb] p-1">
+              {filters.map((f) => {
+                const active = filter === f.value;
+                return (
+                  <button
+                    key={f.value || "all"}
+                    type="button"
+                    disabled={logsLoading && active}
+                    onClick={() => onFilterChange(f.value)}
+                    aria-pressed={active}
+                    className={
+                      active
+                        ? "inline-flex h-8 items-center justify-center rounded-md bg-[#2d63e2] px-3 text-sm font-bold text-white shadow-[0_3px_8px_rgba(45,99,226,0.24)] transition-colors hover:bg-[#2556c7] disabled:opacity-60 lg:h-auto lg:min-w-[4.5rem] lg:px-3.5 lg:py-2"
+                        : "inline-flex h-8 items-center justify-center rounded-md px-3 text-sm font-bold text-[#5b7fbf] transition-colors hover:bg-[#f3f7ff] hover:text-[#2d63e2] lg:h-auto lg:min-w-[4.5rem] lg:px-3.5 lg:py-2"
+                    }
+                  >
+                    {f.label}
+                  </button>
+                );
+              })}
+            </div>
          </div>
        </div>

--- a/src/features/wallet/wallet-screen.tsx
+++ b/src/features/wallet/wallet-screen.tsx
@@ -498,7 +498,7 @@ export function WalletScreen() {
                </div>
              </div>
            </section>
-            <div className="mt-3 grid grid-cols-2 gap-3 lg:mt-0 lg:grid-cols-1 lg:gap-3">
+            <aside className="mt-3 grid grid-cols-2 gap-3 lg:mt-0 lg:grid-cols-1 lg:grid-rows-2 lg:rounded-xl lg:border lg:border-[#dce7f7] lg:bg-[#f8fbff] lg:p-3">
              <TransferInDialog
                idPrefix="wallet-"
                currency={currency}
@@ -511,7 +511,7 @@ export function WalletScreen() {
                onSuccess={refreshAll}
                triggerVariant="hall"
                triggerLabel={t("wallet.transferIn", { defaultValue: "Transfer In" })}
-                triggerClassName="h-14 rounded-2xl text-base font-black lg:h-full lg:min-h-[4.5rem]"
+                triggerClassName="h-10 rounded-lg text-sm font-bold lg:h-full lg:min-h-0 lg:rounded-xl lg:text-lg lg:font-black"
                open={transferInOpen}
                onOpenChange={setTransferInOpen}
              />
@@ -522,11 +522,11 @@ export function WalletScreen() {
                onSuccess={refreshAll}
                triggerVariant="hall"
                triggerLabel={t("wallet.transferOut", { defaultValue: "Transfer Out" })}
-                triggerClassName="h-14 rounded-2xl text-base font-black lg:h-full lg:min-h-[4.5rem]"
+                triggerClassName="h-10 rounded-lg border-[#cddbf1] bg-white text-sm font-bold text-[#0b3f96] shadow-none hover:bg-[#f1f6ff] lg:h-full lg:min-h-0 lg:rounded-xl lg:text-lg lg:font-black"
                open={transferOutOpen}
                onOpenChange={setTransferOutOpen}
              />
-            </div>
+            </aside>
          </div>
        ) : (
          <div className="space-y-3 lg:grid lg:grid-cols-[minmax(0,1.1fr)_minmax(20rem,0.9fr)] lg:items-stretch lg:gap-4 lg:space-y-0">
--- a/src/features/wallet/wallet-transfer-dialogs.tsx
+++ b/src/features/wallet/wallet-transfer-dialogs.tsx
@@ -36,6 +36,8 @@ export function TransferInDialog({
  triggerClassName,
  triggerVariant = "wallet",
  triggerLabel,
+  triggerDescription,
+  triggerIconOnly = false,
  open: controlledOpen,
  onOpenChange: controlledOnOpenChange,
 }: BaseProps & {
@@ -44,6 +46,8 @@ export function TransferInDialog({
  triggerClassName?: string;
  triggerVariant?: "wallet" | "hall";
  triggerLabel?: string;
+  triggerDescription?: string;
+  triggerIconOnly?: boolean;
 }) {
  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
  const isControlled = controlledOpen !== undefined;
@@ -72,9 +76,20 @@ export function TransferInDialog({
          triggerClassName,
        )}
        onClick={() => setOpen(true)}
+        aria-label={triggerIconOnly ? resolvedTriggerLabel : undefined}
+        title={triggerIconOnly ? resolvedTriggerLabel : undefined}
      >
        <ArrowDownLeft className="size-4 shrink-0" />
-        {resolvedTriggerLabel}
+        {triggerIconOnly ? (
+          <span className="sr-only">{resolvedTriggerLabel}</span>
+        ) : triggerDescription ? (
+          <span className="flex min-w-0 flex-col text-left">
+            <span>{resolvedTriggerLabel}</span>
+            <span className="mt-0.5 text-xs font-medium opacity-75">{triggerDescription}</span>
+          </span>
+        ) : (
+          resolvedTriggerLabel
+        )}
      </Button>
      <DialogContent showCloseButton className="gap-0 overflow-hidden p-0 sm:max-w-md">
        <DialogHeader className="space-y-1.5 border-b border-border px-4 py-3 text-left">
@@ -110,6 +125,8 @@ export function TransferOutDialog({
  triggerClassName,
  triggerVariant = "wallet",
  triggerLabel,
+  triggerDescription,
+  triggerIconOnly = false,
  open: controlledOpen,
  onOpenChange: controlledOnOpenChange,
 }: BaseProps & {
@@ -117,6 +134,8 @@ export function TransferOutDialog({
  triggerClassName?: string;
  triggerVariant?: "wallet" | "hall";
  triggerLabel?: string;
+  triggerDescription?: string;
+  triggerIconOnly?: boolean;
 }) {
  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
  const isControlled = controlledOpen !== undefined;
@@ -145,9 +164,20 @@ export function TransferOutDialog({
          triggerClassName,
        )}
        onClick={() => setOpen(true)}
+        aria-label={triggerIconOnly ? resolvedTriggerLabel : undefined}
+        title={triggerIconOnly ? resolvedTriggerLabel : undefined}
      >
        <ArrowUpRight className="size-4 shrink-0" />
-        {resolvedTriggerLabel}
+        {triggerIconOnly ? (
+          <span className="sr-only">{resolvedTriggerLabel}</span>
+        ) : triggerDescription ? (
+          <span className="flex min-w-0 flex-col text-left">
+            <span>{resolvedTriggerLabel}</span>
+            <span className="mt-0.5 text-xs font-medium opacity-75">{triggerDescription}</span>
+          </span>
+        ) : (
+          resolvedTriggerLabel
+        )}
      </Button>
      <DialogContent showCloseButton className="gap-0 overflow-hidden p-0 sm:max-w-md">
        <DialogHeader className="space-y-1.5 border-b border-border px-4 py-3 text-left">