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,37 @@
+/**
+ * # 组件 网站公共布局 Layout
+ * 组合 Header + 页面内容 + Footer；样式入口（Tailwind v4 + shadcn/ui）在此引入一次。
+ * 布局数据（菜单/分类）由各路由 loader 通过 getLayoutData() 取得后传入。
+ */
+import "../../styles/app.css";
+import { Header } from "./Header";
+import { Footer, type FooterCategory } from "./Footer";
+import { createServerFn } from "@tanstack/react-start";
+import { getMenuTree, getProductCategoryTree, type MenuNode } from "~/server/data";
+
+/** # 类型 布局数据（Header/Footer 所需） */
+export type LayoutData = {
+  /** # 成员变量 顶部导航菜单树（max_mega_menu_1） **/
+  menu: MenuNode[];
+  /** # 成员变量 页脚公司链接菜单树（menu-2） **/
+  footerMenu: MenuNode[];
+  /** # 成员变量 产品分类树（含计数） **/
+  categories: FooterCategory[];
+};
+
+/** # 函数 Server Function：获取布局数据（菜单 + 分类） */
+export const getLayoutData = createServerFn({ method: "GET" }).handler(async (): Promise<LayoutData> => {
+  const [menu, footerMenu, cats] = await Promise.all([getMenuTree("max_mega_menu_1"), getMenuTree("menu-2"), getProductCategoryTree()]);
+  return { menu, footerMenu, categories: cats };
+});
+
+/** # 类型 Layout 属性 */
+export function Layout(props: { layout: LayoutData; children: React.ReactNode }) {
+  return (
+    <>
+      <Header menu={props.layout.menu} />
+      <main>{props.children}</main>
+      <Footer categories={props.layout.categories} menu={props.layout.footerMenu} />
+    </>
+  );
+}