clxx 2.1.8 → 3.0.1

package/build/utils/createApp.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -8,140 +41,140 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.history = void 0;
 exports.getHistory = getHistory;
 exports.createApp = createApp;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const client_1 = require("react-dom/client");
 const history_1 = require("history");
 const Container_1 = require("../Container");
-const pick_1 = __importDefault(require("lodash/pick"));
 // 存储历史记录对象
 exports.history = null;
 // 获取历史记录对象
 function getHistory(mode = "browser") {
     if (exports.history === null) {
-        const createMap = {
+        const factories = {
             browser: history_1.createBrowserHistory,
             hash: history_1.createHashHistory,
             memory: history_1.createMemoryHistory,
         };
-        exports.history = createMap[mode]();
+        exports.history = factories[mode]();
     }
     return exports.history;
 }
+const VALID_MODES = new Set(["browser", "hash", "memory"]);
+// 模块级常量，移除路径首尾斜杠；g 标志确保首尾各自替换一次
+const PATH_TRIM_RE = /^\/*|\/*$/g;
 /**
- * 创建带路由的APP对象，全局对象，绝大部分情况下只需要调用一次
+ * 创建带路由的 App，全局单例，通常只调用一次。
  * @param option CreateAppOption
  */
 function createApp(option) {
-    return __awaiter(this, void 0, void 0, function* () {
-        // 设置默认的路由方式
-        if (!option.mode ||
-            ["browser", "hash", "memory"].indexOf(option.mode) === -1) {
-            option.mode = "browser";
-        }
-        // 设置默认路由路径
-        if (!option.default) {
-            option.default = "/index";
-        }
-        // 这里是为了确保历史记录对象在组件渲染之前一定存在
-        exports.history = getHistory(option.mode);
-        // 提取关键数据
-        const containerProps = (0, pick_1.default)(option, [
-            "designWidth",
-            "globalStyle",
-        ]);
-        const { onBefore, onAfter, loading, render, notFound } = option;
-        // 规范化路径：移除首尾斜杠
-        const PATH_TRIM_REGEX = /^\/*|\/*$/g;
-        const normalizePath = (path) => {
-            const normalized = path.replace(PATH_TRIM_REGEX, "");
-            return normalized || option.default.replace(PATH_TRIM_REGEX, "");
-        };
-        /**
-         * 全局APP组件对象
-         * @returns
-         */
-        const App = () => {
-            const [page, setPage] = (0, react_1.useState)(null);
-            /**
-             * 加载并渲染页面
-             */
-            const loadAndRenderPage = (0, react_1.useCallback)((pathname) => __awaiter(this, void 0, void 0, function* () {
-                const normalizedPath = normalizePath(pathname);
-                // 如果有 loading 占位符，先显示
-                if (typeof loading === "function") {
-                    setPage(yield loading(normalizedPath));
+    var _a;
+    // 不修改入参，用局部变量保存规范化后的值
+    const mode = option.mode && VALID_MODES.has(option.mode) ? option.mode : "browser";
+    const defaultPath = ((_a = option.default) !== null && _a !== void 0 ? _a : "/index").replace(PATH_TRIM_RE, "");
+    const scrollToTop = option.scrollToTop !== false;
+    // 确保 history 在组件渲染前已就绪
+    exports.history = getHistory(mode);
+    // 提取 ContainerProps（含 maxWidth，原 pick 遗漏此项）
+    const { designWidth, maxWidth, globalStyle } = option;
+    const containerProps = { designWidth, maxWidth, globalStyle };
+    const { onBefore, onAfter, loading, render, notFound, onError } = option;
+    // 规范化路径：移除首尾斜杠，空路径回退到 defaultPath
+    const normalizePath = (path) => {
+        const normalized = path.replace(PATH_TRIM_RE, "");
+        return normalized || defaultPath;
+    };
+    /**
+     * 全局 App 组件，仅在 createApp 内实例化一次
+     */
+    const App = () => {
+        const [page, setPage] = (0, react_1.useState)(null);
+        // 导航版本号：每次发起新导航自增；过时的异步回调检测到不匹配后静默丢弃，
+        // 防止慢请求在更新的导航完成后覆盖页面（竞态条件）
+        const navIdRef = (0, react_1.useRef)(0);
+        const loadPage = (0, react_1.useCallback)((pathname) => __awaiter(this, void 0, void 0, function* () {
+            const navId = ++navIdRef.current;
+            const path = normalizePath(pathname);
+            // 1. 展示加载占位
+            if (typeof loading === "function") {
+                const loadingNode = yield loading(path);
+                if (navId !== navIdRef.current)
+                    return;
+                setPage(loadingNode);
+            }
+            // 2. 前置钩子
+            yield (onBefore === null || onBefore === void 0 ? void 0 : onBefore(path));
+            if (navId !== navIdRef.current)
+                return;
+            // 3. 渲染页面
+            if (typeof render === "function") {
+                let content;
+                let loadError;
+                let hasError = false;
+                try {
+                    content = yield render(path);
                 }
-                // 页面加载前钩子
-                yield (onBefore === null || onBefore === void 0 ? void 0 : onBefore(normalizedPath));
-                // 加载并显示页面
-                if (typeof render === "function") {
-                    try {
-                        const pageContent = yield render(normalizedPath);
-                        // 如果返回 null/undefined，视为页面未找到
-                        if (pageContent === null || pageContent === undefined) {
-                            if (typeof notFound === "function") {
-                                setPage(yield notFound(normalizedPath));
-                            }
-                            else {
-                                // 默认 404 页面
-                                setPage((0, jsx_runtime_1.jsxs)("div", { children: ["Not Found: ", normalizedPath] }));
-                            }
-                            return;
-                        }
-                        setPage(pageContent);
-                    }
-                    catch (_a) {
-                        // 动态 import 失败等场景
-                        if (typeof notFound === "function") {
-                            setPage(yield notFound(normalizedPath));
-                        }
-                        else {
-                            setPage((0, jsx_runtime_1.jsxs)("div", { children: ["Not Found: ", normalizedPath] }));
-                        }
+                catch (err) {
+                    loadError = err;
+                    hasError = true;
+                }
+                if (navId !== navIdRef.current)
+                    return;
+                if (hasError) {
+                    // render 抛出异常：优先 onError，降级 notFound，再降级内置提示
+                    const errNode = typeof onError === "function" ? (yield onError(path, loadError)) : typeof notFound === "function" ? (yield notFound(path)) : ((0, jsx_runtime_1.jsxs)("div", { children: ["Error: ", path] }));
+                    if (navId !== navIdRef.current)
                         return;
-                    }
+                    setPage(errNode);
+                    return;
                 }
-                // 页面加载后钩子
-                yield (onAfter === null || onAfter === void 0 ? void 0 : onAfter(normalizedPath));
-            }), 
-            // 所有外部变量在闭包创建时已捕获，不会变化
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-            []);
-            /**
-             * 监听路由变化
-             */
-            (0, react_1.useEffect)(() => {
-                // 监听页面变化，一旦变化渲染新页面
-                const unlisten = exports.history.listen(({ location }) => {
-                    loadAndRenderPage(location.pathname);
-                });
-                // 初始化时渲染当前路径对应的页面
-                loadAndRenderPage(exports.history.location.pathname);
-                // 卸载时，取消监听
-                return unlisten;
-            }, [loadAndRenderPage]);
-            return (0, jsx_runtime_1.jsx)(Container_1.Container, Object.assign({}, containerProps, { children: page }));
-        };
-        // 获取挂载对象
-        let mount = null;
-        if (typeof option.target === "string") {
-            mount = document.querySelector(option.target);
-        }
-        else if (option.target instanceof HTMLElement) {
-            mount = option.target;
-        }
-        if (!mount) {
-            throw new Error(`Mount target not found: ${typeof option.target === "string" ? option.target : "invalid element"}`);
-        }
-        const root = (0, client_1.createRoot)(mount);
-        root.render((0, jsx_runtime_1.jsx)(App, {}));
-    });
+                if (content == null) {
+                    // render 返回 null/undefined：404
+                    const notFoundNode = typeof notFound === "function" ? (yield notFound(path)) : ((0, jsx_runtime_1.jsxs)("div", { children: ["Not Found: ", path] }));
+                    if (navId !== navIdRef.current)
+                        return;
+                    setPage(notFoundNode);
+                    return;
+                }
+                // 成功：切换前滚回顶部，再替换页面内容
+                if (scrollToTop)
+                    window.scrollTo(0, 0);
+                setPage(content);
+            }
+            if (navId !== navIdRef.current)
+                return;
+            // 4. 后置钩子（仅成功渲染后调用）
+            yield (onAfter === null || onAfter === void 0 ? void 0 : onAfter(path));
+        }), 
+        // 所有依赖均来自 createApp 闭包，生命周期内不变
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        []);
+        (0, react_1.useEffect)(() => {
+            // 初始渲染当前路径
+            loadPage(exports.history.location.pathname);
+            // 监听后续路由变化，返回 unlisten 作为 cleanup
+            return exports.history.listen(({ location }) => loadPage(location.pathname));
+        }, [loadPage]);
+        return (0, jsx_runtime_1.jsx)(Container_1.Container, Object.assign({}, containerProps, { children: page }));
+    };
+    // 解析挂载目标
+    let mount;
+    if (typeof option.target === "string") {
+        mount = document.querySelector(option.target);
+    }
+    else if (option.target instanceof HTMLElement) {
+        mount = option.target;
+    }
+    else {
+        mount = null;
+    }
+    if (!mount) {
+        throw new Error(`createApp: mount target not found — "${typeof option.target === "string" ? option.target : "[invalid element]"}"`);
+    }
+    const root = (0, client_1.createRoot)(mount);
+    root.render(option.strict ? ((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(App, {}) })) : ((0, jsx_runtime_1.jsx)(App, {})));
 }

package/build/utils/dom.js

@@ -23,12 +23,13 @@ function createPortalDOM(point) {
             root.render(component);
         },
         unmount() {
-            // 先从 DOM 移除容器，再卸载 React 树
-            // 避免 React 18+ 在已卸载的根上发出警告
+            // 先卸载 React 根，再从 DOM 移除容器
+            // React 18+ 推荐先 unmount 让 React 完成清理（包括 effect 的 cleanup），
+            // 然后再移除真实 DOM 节点；倒过来在严格模式下可能产生警告
+            root.unmount();
             if (container.parentNode) {
                 container.parentNode.removeChild(container);
             }
-            root.unmount();
         },
     };
 }

package/build/utils/theme.d.ts

@@ -0,0 +1,2 @@
+export declare const fontStack = "-apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif";
+export declare const numberFontStack = "\"SF Pro Text\", -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif";

package/build/utils/theme.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.numberFontStack = exports.fontStack = void 0;
+// 设计通用字体栈（与 iOS / 桌面/ 中文常见系统字体兼容）
+exports.fontStack = '-apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif';
+// 数字场景优先使用 SF Pro Text（iOS），其它退化到通用字体栈
+exports.numberFontStack = `"SF Pro Text", ${exports.fontStack}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clxx",
-  "version": "2.1.8",
+  "version": "3.0.1",
   "description": "Basic JS library for mobile devices",
   "main": "./build/index.js",
   "module": "./build/index.js",

package/test/src/date-picker/index.jsx

@@ -0,0 +1,119 @@
+import { showDatePicker } from "@";
+import { useState } from "react";
+
+export default function DatePickerDemo() {
+  const [result, setResult] = useState("");
+
+  const open = (precision) => {
+    showDatePicker({
+      precision,
+      title: `选择日期（${precision}）`,
+      onConfirm: (d) => {
+        const fmt =
+          precision === "day"
+            ? "YYYY-MM-DD"
+            : precision === "hour"
+              ? "YYYY-MM-DD HH时"
+              : precision === "minute"
+                ? "YYYY-MM-DD HH:mm"
+                : "YYYY-MM-DD HH:mm:ss";
+        setResult(d.format(fmt));
+      },
+      onCancel: () => {
+        console.log("取消选择");
+      },
+    });
+  };
+
+  return (
+    <div style={{ padding: "0.3rem" }}>
+      <div style={{ display: "flex", flexDirection: "column", gap: "0.2rem" }}>
+        <button onClick={() => open("day")}>选择年/月/日</button>
+        <button onClick={() => open("hour")}>选择年/月/日 + 时</button>
+        <button onClick={() => open("minute")}>选择年/月/日 + 时分</button>
+        <button onClick={() => open("second")}>选择年/月/日 + 时分秒</button>
+        <button
+          onClick={() => {
+            showDatePicker({
+              precision: "minute",
+              value: "2024-06-15 10:30",
+              primary: "#16a34a",
+              minDate: "2024-01-01",
+              maxDate: "2026-12-31 23:59",
+              title: "自定义范围 + 绿色主题",
+              onConfirm: (d) => {
+                setResult(d.format("YYYY-MM-DD HH:mm"));
+              },
+            });
+          }}
+        >
+          自定义初值 / 范围 / 主题
+        </button>
+        <button
+          onClick={() => {
+            showDatePicker({
+              precision: "minute",
+              showUnit: false,
+              title: "不显示单位",
+              onConfirm: (d) => setResult(d.format("YYYY-MM-DD HH:mm")),
+            });
+          }}
+        >
+          不显示单位
+        </button>
+        <button
+          onClick={() => {
+            showDatePicker({
+              precision: "second",
+              units: {
+                year: "Y",
+                month: "M",
+                day: "D",
+                hour: "h",
+                minute: "m",
+                second: "s",
+              },
+              title: "英文单位",
+              onConfirm: (d) => setResult(d.format("YYYY-MM-DD HH:mm:ss")),
+            });
+          }}
+        >
+          自定义单位（英文）
+        </button>
+        <button
+          onClick={() => {
+            showDatePicker({
+              precision: "day",
+              rounded: false,
+              title: "无圆角（rounded=false）",
+              onConfirm: (d) => setResult(d.format("YYYY-MM-DD")),
+            });
+          }}
+        >
+          无圆角
+        </button>
+        <button
+          onClick={() => {
+            showDatePicker({
+              precision: "day",
+              title: (
+                <span style={{ display: "inline-flex", alignItems: "center", gap: "0.08rem" }}>
+                  <span style={{ color: "#ef4444" }}>★</span>
+                  <span>ReactNode 标题</span>
+                </span>
+              ),
+              cancelText: <span style={{ color: "#ef4444" }}>✕ 关</span>,
+              confirmText: <strong>OK ✓</strong>,
+              onConfirm: (d) => setResult(d.format("YYYY-MM-DD")),
+            });
+          }}
+        >
+          ReactNode 标题/按钮文案
+        </button>
+      </div>
+      <div style={{ marginTop: "0.4rem", fontSize: "0.3rem" }}>
+        选择结果：<span style={{ color: "#2f7dff" }}>{result || "（未选择）"}</span>
+      </div>
+    </div>
+  );
+}

package/test/src/index/index.jsx

@@ -17,6 +17,8 @@ const pageConfig = [
   // { path: 'privacy', title: 'Privacy去标识化', enable: true },
   { path: "autogrid", title: "AutoGrid生成自动对齐的表格", enable: true },
   { path: "city-select", title: "CitySelect城市选择器", enable: true },
+  { path: "date-picker", title: "DatePicker日期时间选择器", enable: true },
+  { path: "region-picker", title: "RegionPicker省市区选择器", enable: true },
 ];
 
 export default function Index() {

package/test/src/index.jsx

@@ -6,6 +6,7 @@ import Home from './index/index';
 createApp({
   target: "#root",
   // maxDocWidth: 10000,
+  maxWidth: 750,
   async render(pathname) {
     const module = await import(`./${pathname}/index.jsx`);
     const Page = module.default;

package/test/src/loading/index.jsx

@@ -8,7 +8,7 @@ export default function Index () {
       <button
         onClick={async () => {
           const close = await showLoading();
-          window.setTimeout(close, 5000);
+          window.setTimeout(close, 500000);
         }}
       >
         显示Loading
@@ -17,7 +17,7 @@ export default function Index () {
       <button
         onClick={async () => {
           const close = await showLoading("数据加载中...");
-          window.setTimeout(close, 5000);
+          window.setTimeout(close, 500000);
         }}
       >
         显示Loading

package/test/src/region-picker/index.jsx

@@ -0,0 +1,120 @@
+import { showRegionPicker } from "@";
+import { useState } from "react";
+
+export default function RegionPickerDemo() {
+  const [result, setResult] = useState("");
+  const [initial, setInitial] = useState(null);
+
+  const openDefault = () => {
+    showRegionPicker({
+      value: initial || undefined,
+      onConfirm: (sel) => {
+        const text = `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`;
+        setResult(text);
+        setInitial([sel.province.value, sel.city.value, sel.district.value]);
+      },
+      onCancel: () => {
+        console.log("取消选择");
+      },
+    });
+  };
+
+  const openWithInitial = () => {
+    showRegionPicker({
+      // 广东 / 广州 / 天河区
+      value: ["440000", "440100", "440106"],
+      title: "带初始值",
+      onConfirm: (sel) => {
+        setResult(
+          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
+        );
+      },
+    });
+  };
+
+  const openCustomTheme = () => {
+    showRegionPicker({
+      primary: "#e53935",
+      title: "京东红主题",
+      onConfirm: (sel) => {
+        setResult(
+          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
+        );
+      },
+    });
+  };
+
+  const openNoRounded = () => {
+    showRegionPicker({
+      rounded: false,
+      title: "无圆角",
+      onConfirm: (sel) => {
+        setResult(
+          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
+        );
+      },
+    });
+  };
+
+  const openCustomLabels = () => {
+    showRegionPicker({
+      labels: { province: "选省份", city: "选城市", district: "选区县" },
+      cancelText: "放弃",
+      confirmText: "选好了",
+      title: "自定义文案",
+      onConfirm: (sel) => {
+        setResult(
+          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
+        );
+      },
+    });
+  };
+
+  const openNoMaskClose = () => {
+    showRegionPicker({
+      maskClosable: false,
+      title: "点击遮罩不关闭",
+      onConfirm: (sel) => {
+        setResult(
+          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
+        );
+      },
+    });
+  };
+
+  const openReactNodeTitle = () => {
+    showRegionPicker({
+      title: (
+        <span style={{ display: "inline-flex", alignItems: "center", gap: "0.08rem" }}>
+          <span style={{ color: "#f59e0b" }}>★</span>
+          <span>ReactNode 标题</span>
+        </span>
+      ),
+      cancelText: <span style={{ color: "#ef4444" }}>✕ 关</span>,
+      confirmText: <strong>OK ✓</strong>,
+      onConfirm: (sel) => {
+        setResult(
+          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
+        );
+      },
+    });
+  };
+
+  return (
+    <div style={{ padding: "0.3rem" }}>
+      <div style={{ display: "flex", flexDirection: "column", gap: "0.2rem" }}>
+        <button onClick={openDefault}>默认（保留上次选择）</button>
+        <button onClick={openWithInitial}>带初始值（广东/广州/天河）</button>
+        <button onClick={openCustomTheme}>自定义主色（京东红）</button>
+        <button onClick={openNoRounded}>无圆角</button>
+        <button onClick={openCustomLabels}>自定义 tab 占位 / 按钮文案</button>
+        <button onClick={openNoMaskClose}>点击遮罩不关闭</button>
+        <button onClick={openReactNodeTitle}>ReactNode 标题/按钮</button>
+      </div>
+      <div style={{ marginTop: "0.4rem", fontSize: "0.3rem" }}>
+        选择结果：
+        <span style={{ color: "#2f7dff" }}>{result || "（未选择）"}</span>
+      </div>
+    </div>
+  );
+}

package/test/src/scrollview/BasicSection.jsx

@@ -0,0 +1,56 @@
+import { useRef, useState } from "react";
+import { ScrollView } from "@";
+
+export default function BasicSection() {
+  const [list, setList] = useState(() =>
+    Array.from({ length: 8 }, (_, i) => i + 1),
+  );
+  const [hasMore, setHasMore] = useState(true);
+  const loadingRef = useRef(false);
+  const [stat, setStat] = useState({ scrollTop: 0, dir: "-" });
+
+  const loadMore = () => {
+    if (loadingRef.current || !hasMore) return;
+    loadingRef.current = true;
+    window.setTimeout(() => {
+      setList((prev) => {
+        const next = [...prev];
+        const start = prev.length;
+        for (let i = 1; i <= 8; i++) next.push(start + i);
+        if (next.length >= 40) setHasMore(false);
+        return next;
+      });
+      loadingRef.current = false;
+    }, 700);
+  };
+
+  return (
+    <div className="section">
+      <div className="section-title">基础：触底加载更多 + 触顶事件</div>
+      <div className="stat">
+        scrollTop: {stat.scrollTop.toFixed(0)}px / 方向: {stat.dir} / 共{" "}
+        {list.length} 项
+        {!hasMore && <span className="badge">已全部加载</span>}
+      </div>
+      <div className="section-body" style={{ height: "4.4rem" }}>
+        <ScrollView
+          showLoading={hasMore}
+          onScroll={(e) =>
+            setStat({ scrollTop: e.scrollTop, dir: e.direction })
+          }
+          onReachTop={() => console.log("[basic] reach top")}
+          onReachBottom={() => {
+            console.log("[basic] reach bottom => loadMore");
+            loadMore();
+          }}
+        >
+          {list.map((n) => (
+            <div className="item" key={n}>
+              第 {n} 项 — 内容占位行
+            </div>
+          ))}
+        </ScrollView>
+      </div>
+    </div>
+  );
+}