v0.10.5 首页 H2 产品线入口 ×6:ImageBoxWidget 重构为 Elementor 忠实 DOM + slim 白名单补齐 + H2 scoped CSS(post-18 对齐,桌面/移动/hover 实测一致)

2026-11-01 00:15:29 +08:00
commit 5b83e71ad9
128 changed files with 20008 additions and 0 deletions
@@ -0,0 +1,39 @@
+/**
+ * # 组件 产品卡片 ProductCard（Tailwind + shadcn/ui 实现）
+ * 产品网格卡片：图 / 标题 / Read more 链接。首页、列表页、搜索页复用。
+ * 整卡为链接，文字继承品牌橙（与原 .card 于 a 上同色一致）。
+ */
+import { Link } from "@tanstack/react-router";
+import { useT } from "~/i18n";
+
+/** # 类型 产品卡片数据（listProducts.items 元素子集） */
+export type ProductCardData = {
+  id: number;
+  slug: string;
+  title: string;
+  sku: string | null;
+  imageUrl: string | null;
+  imageAlt?: string | null;
+};
+
+/** # 组件 产品卡片 */
+export function ProductCard({ p }: { p: ProductCardData }) {
+  const t = useT();
+  return (
+    <Link
+      to="/product/$slug/"
+      params={{ slug: p.slug }}
+      className="block overflow-hidden rounded-lg border border-line bg-white text-brand transition-[box-shadow,transform] duration-200 hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(16,42,76,0.1)]"
+    >
+      <div className="flex aspect-[4/3] items-center justify-center bg-white p-3">
+        {p.imageUrl ? <img src={p.imageUrl} alt={p.imageAlt || p.title} loading="lazy" className="max-h-full object-contain" /> : null}
+      </div>
+      <div className="px-4 pt-3.5 pb-[18px] text-center">
+        <div className="mb-1.5 text-[15px] leading-[1.45] font-semibold">{p.title}</div>
+        <span className="mt-2.5 inline-block rounded-[4px] border border-brand bg-white px-4 py-1.5 text-sm font-semibold text-brand hover:bg-soft">
+          {t("card_read_more")}
+        </span>
+      </div>
+    </Link>
+  );
+}