weifuwu 0.38.1 → 0.38.2

package/README.md

@@ -32,7 +32,7 @@ npm install weifuwu
 | `weifuwu/client` | **ErrorBoundary** | 错误边界组件 | createApp |
 | `weifuwu/client` | **confirm** | Promise 化确认对话框 | createApp |
 | `weifuwu/client** | **lockScroll/trapFocus** | 滚动锁定 / 焦点陷阱工具 | — |
-| `weifuwu/components` | **37 个组件** | Button/Table/Modal/Toast/... | weifuwu/client |
+| `weifuwu/components` | **38 个组件** | Button/Table/Modal/Toast/... | weifuwu/client |
 | `weifuwu/layout` | **CSS 布局** | 35 个布局原语 + 72 个主题 Token | — |
 
 ---
@@ -1246,7 +1246,7 @@ import type { RouterOptions } from 'weifuwu/client'
 
 # 组件库 (`weifuwu/components`)
 
-37 个 HTML 原语组件。每个是 `(props, ctx) => VNode` 纯函数，引用 `--wf-*` CSS 变量做主题。
+38 个 HTML 原语组件。每个是 `(props, ctx) => VNode` 纯函数，引用 `--wf-*` CSS 变量做主题。
 
 ```ts
 import { Button, Input, Table, Modal, Toast } from 'weifuwu/components'
@@ -1295,6 +1295,7 @@ import 'weifuwu/components/style.css'
 | StatCard | `StatCard` | `title`, `value`, `trend`, `icon`, `variant` | 统计卡片 |
 | PageHeader | `PageHeader` | `title`, `subtitle`, `actions`, `onBack`, `breadcrumb` | 页面标题 |
 | Img | `Img` | `src`, `alt`, `fallback`, `lazy`, `fit` | 图片（含 fallback） |
+| InView | `InView` | `once`, `threshold`, `rootMargin`, `placeholder`, `onEnter` | 进入视窗后懒加载内容 |
 
 ### 数据反馈
 

package/dist/client/index.js

@@ -237,6 +237,7 @@ function patchValue(parent, oldNode, oldInput, newInput, ctx) {
     if (oldNode && oldNode.nodeType === 1) {
       patchProps(oldNode, oldV.props, newV.props);
       patchChildren(oldNode, oldV, newV, ctx);
+      if (oldV._cleanup) newV._cleanup = oldV._cleanup;
     } else if (oldNode) {
       callRefCleanup(oldInput);
       const node = renderValue(newInput, ctx);

package/dist/components/InView/InView.d.ts

@@ -0,0 +1,31 @@
+/**
+ * weifuwu/components — InView
+ *
+ * 进入视窗组件。通过 IntersectionObserver 监听元素是否进入视窗，
+ * 实现内容懒加载：只有用户滚动到该区域时才渲染 children。
+ *
+ * 用法：
+ *   <InView>
+ *     <ExpensiveComponent />
+ *   </InView>
+ *
+ *   <InView once={false} rootMargin="200px">
+ *     <img src="large.jpg" />
+ *   </InView>
+ */
+import type { Component } from '../../client/vnode.ts';
+export interface InViewProps {
+    /** 是否只触发一次（默认 true，进入后一直显示） */
+    once?: boolean;
+    /** IntersectionObserver threshold（默认 0） */
+    threshold?: number;
+    /** IntersectionObserver rootMargin（默认 '0px'） */
+    rootMargin?: string;
+    /** 进入视窗前渲染的占位内容（默认轻量占位块） */
+    placeholder?: any;
+    /** 进入视窗回调 */
+    onEnter?: () => void;
+    /** 懒加载内容 */
+    children?: any;
+}
+export declare const InView: Component<InViewProps>;

package/dist/components/index.d.ts

@@ -79,3 +79,5 @@ export { Skeleton } from './Skeleton/Skeleton.ts';
 export type { SkeletonProps, SkeletonVariant } from './Skeleton/Skeleton.ts';
 export { Img } from './Img/Img.ts';
 export type { ImgProps } from './Img/Img.ts';
+export { InView } from './InView/InView.ts';
+export type { InViewProps } from './InView/InView.ts';

package/dist/components/index.js

@@ -1023,6 +1023,50 @@ var Img = (props) => {
   }
   return h("img", imgProps);
 };
+
+// src/components/InView/InView.ts
+var InView = (props, ctx) => {
+  const {
+    once = true,
+    threshold = 0,
+    rootMargin = "0px",
+    placeholder,
+    onEnter,
+    children
+  } = props;
+  const $ = ctx.ui.$;
+  if (!ctx.ui.ready) {
+    $.inView = false;
+  }
+  const sentinelRef = (el) => {
+    if (!el) return;
+    if ($.inView && once) return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          $.inView = true;
+          onEnter?.();
+          if (once) io.disconnect();
+        } else if (!once) {
+          $.inView = false;
+        }
+      },
+      { threshold, rootMargin }
+    );
+    io.observe(el);
+    return () => {
+      io.disconnect();
+    };
+  };
+  if ($.inView) {
+    return h("div", { class: "wf-inview wf-inview--loaded" }, children);
+  }
+  const placeholderEl = placeholder !== void 0 ? placeholder : h("div", { class: "wf-inview-placeholder" });
+  return h("div", {
+    class: "wf-inview wf-inview--pending",
+    ref: sentinelRef
+  }, placeholderEl);
+};
 export {
   Accordion,
   Alert,
@@ -1040,6 +1084,7 @@ export {
   FileUpload,
   Form,
   Img,
+  InView,
   Input,
   Loading,
   Modal,

package/dist/components/style.css

@@ -2003,3 +2003,29 @@
   width: 60%;
 }
 
+/* weifuwu/components — InView */
+
+.wf-inview {
+  width: 100%;
+}
+
+.wf-inview--loaded {
+  /* 加载后无额外样式，让 children 自然布局 */;
+}
+
+.wf-inview-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+  background: var(--wf-color-bg-secondary, #f9fafb);
+  border-radius: var(--wf-radius-md, 8px);
+  border: 1px dashed var(--wf-color-border, #e5e7eb);
+  color: var(--wf-color-text-tertiary, #9ca3af);
+  font-size: var(--wf-font-size-sm, 13px);
+}
+
+.wf-inview-placeholder::after {
+  content: '滚动到此处加载内容';
+}
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "weifuwu",
   "type": "module",
-  "version": "0.38.1",
+  "version": "0.38.2",
   "description": "AI SaaS framework — (req, ctx) => Response",
   "exports": {
     ".": {