feat(docs): add bilingual package documentation site

2026-09-20 15:53:28 +08:00
parent 60f6f1fb1a
commit dc80bd8ae0
111 changed files with 6531 additions and 0 deletions
@@ -0,0 +1,31 @@
+---
+title: 添加响应式行为
+description: 当 CSS 无法表达行为变化时，使用共享的断点和交互 Hooks。
+order: 20
+toc:
+  - id: breakpoints
+    title: 断点
+  - id: server-rendering
+    title: 服务端渲染
+  - id: ripple
+    title: 波纹交互
+---
+
+## 断点 {#breakpoints}
+
+```tsx
+import { useBreakpoint, useIsMobile } from "@workspace/ui/hooks/use-breakpoint"
+
+const breakpoint = useBreakpoint()
+const isMobile = useIsMobile()
+```
+
+视觉变化优先使用 CSS 响应式变体。只有组件行为或挂载内容必须变化时才使用这些 Hooks。
+
+## 服务端渲染 {#server-rendering}
+
+断点 Store 使用确定的桌面端服务端快照。当应用需要 CSS 与行为断点在水合前保持一致时，可用 `getBreakpointInitializationScript` 提前设置匹配的根节点类名。
+
+## 波纹交互 {#ripple}
+
+`useRipple` 返回一个 ref 回调，为交互元素加入指针反馈。元素应创建定位上下文，使生成的覆盖层使用正确边界。