导出面板图标盒恒为正方形

卡片图标盒改回 aspect-square、tab 图标盒改回 size-5，只用 object-contain 等比缩放。 TapTap 横向 logo 在方盒里按宽度居中留白，不再用矩形盒。
2026-10-05 13:15:20 +08:00
parent 477e60c3f8
commit bef4151b10
3 changed files with 5 additions and 4 deletions
@@ -21,7 +21,8 @@ export function TargetCard({
      className="group flex aspect-square w-full flex-col items-center justify-center gap-4 rounded-3xl border border-[#e2cbb8] bg-[#fffaf5] p-6 text-center shadow-[0_18px_40px_rgba(112,57,30,0.08)] transition hover:-translate-y-0.5 hover:border-[#c7653d] hover:shadow-[0_22px_48px_rgba(112,57,30,0.14)]"
      onClick={() => onOpen(target)}
    >
-      <span className="flex min-h-0 w-4/5 flex-1 items-center justify-center">
+      {/* 图标盒恒为正方形：只许按比例缩放，不许拉成矩形。 */}
+      <span className="flex aspect-square w-3/5 items-center justify-center">
        <TargetIcon
          target={target}
          size={200}
@@ -9,8 +9,8 @@ import { Target } from '../model';
 * 陶泥儿用 IP 图；小红书（RedNote）与 TapTap 用各自的真实图标。三个目标的图源在这里
 * 一处收口，卡片与 tab 都只认 `Target`，换图不用改调用方。
 *
- * TapTap 那张是横向 logo（宽高比约 3.6:1），所以调用方给的是矩形盒 + `object-contain`：
- * 它按宽度贴满，方形图标则按高度贴满，互不拉伸。
+ * TapTap 那张是横向 logo（宽高比约 3.6:1），卡片与 tab 的图标盒**恒为正方形**，
+ * 用 `object-contain` 等比缩放：方图贴满，横图按宽度居中留白，任何情况都不拉成矩形。
 */
 const TARGET_ICON: Record<Target, string> = {
  [Target.Taonier]: taonierIcon,
@@ -38,7 +38,7 @@ export function TargetTabs({
            <TargetIcon
              target={target}
              size={20}
-              className="h-5 w-7 shrink-0 object-contain"
+              className="size-5 shrink-0 object-contain"
            />
            <span className="truncate">{TARGET_META[target].label}</span>
          </button>