refactor(*): 稳定期治理 - 收敛核心架构、错误语义并修复跨项目数据竞态

web/src/components/ui/README.md

@@ -41,8 +41,7 @@
 - `base/tooltip/` — Tooltip（RAC 浮层，AntD 8 向 placement 映射，title 空不渲染）
 - `base/switch/` — Switch（button role=switch + data-state，checkedChildren 文本轨、loading、Form.Item 注入）
 - `product/empty-state/` — EmptyState（空态占位）
-- `product/callout/` — Callout（规划中，P0）
-- `base/badges/` — StatusBadge（状态点徽章；NodeTypeBadge 规划中）
-- `product/empty-state/` — EmptyState（空态占位）
-- `product/callout/` — Callout（规划中，P0）
+- `product/callout/` — Callout
+- `product/app-modal/` — AppModal（产品弹窗壳，`flush` 去掉 AntD 默认内边距）
+- `product/app-drawer/` — AppDrawer（产品侧栏壳）
 - `base/buttons/` — IconButton / ToolButton / ButtonGroup（规划中，P0）

web/src/components/ui/product/app-drawer/app-drawer.tsx

@@ -0,0 +1,22 @@
+import { Drawer, type DrawerProps } from "antd";
+import type { CSSProperties } from "react";
+
+// 用途：产品侧栏壳。消费 token 由内容自己负责。默认 destroyOnHidden，可选 flush 去内边距。
+export type AppDrawerProps = DrawerProps & {
+    flush?: boolean;
+};
+
+export function AppDrawer({ flush = false, destroyOnHidden = true, styles, className, rootClassName, ...props }: AppDrawerProps) {
+    const mergeResolvedStyles = (resolved: unknown) => {
+        const base = resolved && typeof resolved === "object" ? (resolved as Record<string, unknown>) : {};
+        if (!flush) return base;
+        const body = base.body && typeof base.body === "object" ? (base.body as CSSProperties) : {};
+        return { ...base, body: { ...body, padding: 0 } };
+    };
+    const mergedStyles =
+        typeof styles === "function"
+            ? (info: { props: DrawerProps }) => mergeResolvedStyles(styles(info))
+            : mergeResolvedStyles(styles);
+
+    return <Drawer destroyOnHidden={destroyOnHidden} className={className} rootClassName={rootClassName} {...props} styles={mergedStyles as DrawerProps["styles"]} />;
+}

web/src/components/ui/product/app-drawer/index.ts

@@ -0,0 +1 @@
+export { AppDrawer, type AppDrawerProps } from "./app-drawer";

web/src/components/ui/product/app-modal/app-modal.tsx

@@ -0,0 +1,33 @@
+import { Modal, type ModalProps } from "antd";
+import type { CSSProperties } from "react";
+
+// 用途：产品弹窗壳。消费 token 由内容自己负责。接管 AntD Modal 的重复 flush 内边距。
+const FLUSH_STYLES = {
+    container: { padding: 0, overflow: "hidden" },
+    body: { padding: 0 },
+} as const;
+
+export type AppModalProps = ModalProps & {
+    /** 内容自带外壳时去掉 AntD 默认内边距，避免每个业务弹窗复制同一套 styles。 */
+    flush?: boolean;
+};
+
+export function AppModal({ flush = false, destroyOnHidden = true, styles, ...props }: AppModalProps) {
+    const mergeResolvedStyles = (resolved: unknown) => {
+        const base = resolved && typeof resolved === "object" ? (resolved as Record<string, unknown>) : {};
+        if (!flush) return base;
+        const container = base.container && typeof base.container === "object" ? (base.container as CSSProperties) : {};
+        const body = base.body && typeof base.body === "object" ? (base.body as CSSProperties) : {};
+        return {
+            ...base,
+            container: { ...container, ...FLUSH_STYLES.container },
+            body: { ...body, ...FLUSH_STYLES.body },
+        };
+    };
+    const mergedStyles =
+        typeof styles === "function"
+            ? (info: { props: ModalProps }) => mergeResolvedStyles(styles(info))
+            : mergeResolvedStyles(styles);
+
+    return <Modal destroyOnHidden={destroyOnHidden} {...props} styles={mergedStyles as ModalProps["styles"]} />;
+}

web/src/components/ui/product/app-modal/index.ts

@@ -0,0 +1 @@
+export { AppModal, type AppModalProps } from "./app-modal";