clxx 2.1.3 → 2.1.4

package/build/utils/defaultScroll.d.ts

@@ -6,7 +6,6 @@ export declare let passiveSupported: boolean;
  * 禁用和启用默认滚动
  */
 export declare const defaultScroll: {
-    handler(event: TouchEvent): void;
     disable(): void;
     enable(): void;
 };

package/build/utils/defaultScroll.js

@@ -11,17 +11,20 @@ try {
     // eslint-disable-next-line no-empty
 }
 catch (err) { }
+/**
+ * 触摸移动事件处理器
+ */
+const touchMoveHandler = (event) => {
+    event.preventDefault();
+};
 /**
  * 禁用和启用默认滚动
  */
 export const defaultScroll = {
-    handler(event) {
-        event.preventDefault();
-    },
     disable() {
-        document.documentElement.addEventListener('touchmove', this.handler, passiveSupported ? { capture: false, passive: false } : false);
+        document.documentElement.addEventListener('touchmove', touchMoveHandler, passiveSupported ? { capture: false, passive: false } : false);
     },
     enable() {
-        document.documentElement.removeEventListener('touchmove', this.handler, passiveSupported ? { capture: false } : false);
+        document.documentElement.removeEventListener('touchmove', touchMoveHandler, passiveSupported ? { capture: false } : false);
     },
 };

package/build/utils/is.d.ts

@@ -1,6 +1,25 @@
 /**
- * 一些常用的简单环境判断
- * @param env
- * @returns
+ * 环境类型定义
  */
-export declare function is(env: "ios" | "android" | "wechat" | "qq" | "alipay" | "weibo" | "douyin" | "touchable"): boolean;
+export type EnvType = "ios" | "android" | "wechat" | "qq" | "alipay" | "weibo" | "douyin" | "xiaohongshu" | "toutiao" | "baidu" | "touchable";
+/**
+ * 常用的简单环境判断
+ * @param env 环境类型
+ * @returns 是否匹配该环境
+ *
+ * @example
+ * ```typescript
+ * if (is('ios')) {
+ *   // iOS 特定逻辑
+ * }
+ *
+ * if (is('wechat')) {
+ *   // 微信内逻辑
+ * }
+ * ```
+ */
+export declare function is(env: EnvType): boolean;
+/**
+ * 清除缓存（用于测试或特殊场景）
+ */
+export declare function clearIsCache(): void;

package/build/utils/is.js

@@ -1,29 +1,111 @@
+// 缓存 UserAgent，避免重复获取
+const UA = window.navigator.userAgent;
+// 预编译正则表达式，提升性能
+const REGEX_PATTERNS = {
+    ios: /iPhone|iPad|iPod/i,
+    // iPadOS 13+ 会显示为 Mac，需要通过 maxTouchPoints 判断
+    ipad: /Macintosh/i,
+    android: /Android/i,
+    wechat: /MicroMessenger/i,
+    // QQ 有多种形式：手Q、QQ浏览器等
+    qq: /\s(QQ|MQQBrowser)\//i,
+    alipay: /AlipayClient/i,
+    weibo: /Weibo/i,
+    douyin: /aweme/i,
+    xiaohongshu: /xhsdiscover/i,
+    toutiao: /NewsArticle/i,
+    baidu: /baiduboxapp/i,
+};
+// 结果缓存，避免重复判断
+const cache = new Map();
 /**
- * 一些常用的简单环境判断
- * @param env
- * @returns
+ * 判断是否为触摸设备
+ * 综合多种方式判断，提高准确性
  */
-export function is(env // 可触摸环境
-) {
-    const ua = window.navigator.userAgent;
+function isTouchable() {
+    // 1. 检查是否支持触摸事件
+    const hasTouchEvent = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    // 2. 检查是否为移动设备 UA
+    const isMobileUA = /Mobile|Android|iPhone|iPad|iPod/i.test(UA);
+    // 3. 综合判断
+    return hasTouchEvent && isMobileUA;
+}
+/**
+ * 判断是否为 iPad（包括 iPadOS 13+ 伪装成 Mac 的情况）
+ */
+function isIPad() {
+    // iPadOS 13+ 显示为 Mac，但有触摸点
+    if (REGEX_PATTERNS.ipad.test(UA) && navigator.maxTouchPoints > 1) {
+        return true;
+    }
+    return /iPad/i.test(UA);
+}
+/**
+ * 常用的简单环境判断
+ * @param env 环境类型
+ * @returns 是否匹配该环境
+ *
+ * @example
+ * ```typescript
+ * if (is('ios')) {
+ *   // iOS 特定逻辑
+ * }
+ *
+ * if (is('wechat')) {
+ *   // 微信内逻辑
+ * }
+ * ```
+ */
+export function is(env) {
+    // 从缓存中获取结果
+    if (cache.has(env)) {
+        return cache.get(env);
+    }
+    let result = false;
     switch (env.toLowerCase()) {
         case "ios":
-            return /iPhone|iPad/i.test(ua);
+            result = REGEX_PATTERNS.ios.test(UA) || isIPad();
+            break;
         case "android":
-            return /Android/i.test(ua);
+            result = REGEX_PATTERNS.android.test(UA);
+            break;
         case "wechat":
-            return /MicroMessenger/i.test(ua);
+            result = REGEX_PATTERNS.wechat.test(UA);
+            break;
         case "qq":
-            return /QQ/i.test(ua);
+            result = REGEX_PATTERNS.qq.test(UA);
+            break;
         case "alipay":
-            return /AlipayClient/i.test(ua);
+            result = REGEX_PATTERNS.alipay.test(UA);
+            break;
         case "weibo":
-            return /Weibo/i.test(ua);
+            result = REGEX_PATTERNS.weibo.test(UA);
+            break;
         case "douyin":
-            return /aweme/i.test(ua);
+            result = REGEX_PATTERNS.douyin.test(UA);
+            break;
+        case "xiaohongshu":
+            result = REGEX_PATTERNS.xiaohongshu.test(UA);
+            break;
+        case "toutiao":
+            result = REGEX_PATTERNS.toutiao.test(UA);
+            break;
+        case "baidu":
+            result = REGEX_PATTERNS.baidu.test(UA);
+            break;
         case "touchable":
-            return window.ontouchstart !== undefined;
+            result = isTouchable();
+            break;
         default:
-            return false;
+            result = false;
     }
+    // 缓存结果
+    cache.set(env, result);
+    return result;
+}
+/**
+ * 清除缓存（用于测试或特殊场景）
+ */
+export function clearIsCache() {
+    cache.clear();
 }

package/build/utils/jsonp.js

@@ -13,8 +13,8 @@ let JSONP_INDEX = 1;
  * @param url
  * @param callbackName
  */
-export function jsonp(url, callbackName = 'callback') {
-    return __awaiter(this, void 0, void 0, function* () {
+export function jsonp(url_1) {
+    return __awaiter(this, arguments, void 0, function* (url, callbackName = 'callback') {
         return new Promise((resolve, reject) => {
             // 生成全局唯一的
             JSONP_INDEX += 1;

package/build/utils/request.js

@@ -209,16 +209,25 @@ export function parseRequestOption(option) {
 export function sendRequest(option) {
     return __awaiter(this, void 0, void 0, function* () {
         const { url, fetchOption, timeout } = parseRequestOption(option);
+        const controller = new AbortController();
         return Promise.race([
             // 网络请求
-            fetch(url, fetchOption)
+            fetch(url, Object.assign(Object.assign({}, fetchOption), { signal: controller.signal }))
                 .then((response) => {
                 return response.json();
             })
                 .then((result) => {
                 return result;
             })
-                .catch(() => {
+                .catch((error) => {
+                // 如果是主动取消的请求，返回超时错误
+                if (error.name === 'AbortError') {
+                    const result = {
+                        code: -10001,
+                        message: "Network request timeout",
+                    };
+                    return result;
+                }
                 const result = {
                     code: -10000,
                     message: "An exception occurred in the network request",
@@ -228,6 +237,7 @@ export function sendRequest(option) {
             // 超时逻辑
             new Promise((resolve) => {
                 window.setTimeout(() => {
+                    controller.abort(); // 取消请求
                     const result = {
                         code: -10001,
                         message: "Network request timeout",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clxx",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Basic JS library for mobile devices",
   "main": "./build/index.js",
   "module": "./build/index.js",
@@ -9,7 +9,7 @@
   },
   "scripts": {
     "start": "tsc -w --pretty",
-    "build": "rm -rfv ./build && tsc",
+    "build": "rimraf ./build && tsc",
     "pub": "npm run build && npm publish"
   },
   "repository": {
@@ -34,18 +34,21 @@
     "access": "public"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "dayjs": "^1.11.5",
+    "@emotion/react": "^11.14.0",
+    "dayjs": "^1.11.18",
     "history": "^5.3.0",
-    "lodash": "^4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "lodash": "^4.17.21"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.182",
-    "@types/react": "^18.0.37",
-    "@types/react-dom": "^18.0.11",
-    "csstype": "^3.1.0",
-    "typescript": "^4.9.5"
+    "@types/lodash": "^4.17.20",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "csstype": "^3.1.3",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.9.3"
   }
 }

package/test/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

package/test/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

package/test/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>test</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>

package/test/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["../build/*"]
+    }
+  }
+}

package/test/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "test",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.4",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.22",
+    "globals": "^16.4.0",
+    "vite": "^7.1.7"
+  }
+}

package/test/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/test/src/ago/index.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Ago } from "@";
+
+export default function Index() {
+  return (
+    <div>
+      <p>2019-11-2</p>
+      <Ago date="2019-11-2" style={{ color: "red" }} />
+      <hr />
+      <p>2020-06-02</p>
+      <Ago date="2020-6-2" style={{ color: "red" }} />
+      <hr />
+      <p>2018/06/02</p>
+      <Ago date="2018/06/02" style={{ color: "red" }} />
+      <hr />
+      <p>2018/07/06 12:04:36</p>
+      <Ago date="2018/07/06 12:04:36" style={{ color: "red" }} />
+      <hr />
+      <p>Date.now()</p>
+      <Ago date={Date.now()} style={{ color: "red" }} />
+      <hr />
+      <p>new Date("2012-07-16 12:30:06")</p>
+      <Ago date={new Date("2012-07-16 12:30:06")} style={{ color: "red" }} />
+      <hr />
+      <p>(时间戳：毫秒)1583314718595</p>
+      <Ago date={1583314718595} style={{ color: "red" }} />
+      <hr />
+    </div>
+  );
+}

package/test/src/alert/index.jsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { showAlert, RowCenter } from "@";
+
+export default function Index () {
+  return (
+    <div>
+      <p>
+        <button
+          onClick={() => {
+            showAlert({
+              title: "允许“车轮查违章”在您使用该应用时访问你的位置吗",
+              description: "访问位置将查找定位信息",
+              // showCancel: true,
+              onCancel() {
+                console.log("cancel");
+              },
+              onConfirm() {
+                console.log("confirm");
+              },
+            });
+          }}
+        >
+          普通弹框
+        </button>
+      </p>
+      <p>
+        <button
+          onClick={() => {
+            showAlert({
+              title: "这是一个带取消的弹框",
+              confirm: "知道了",
+              showCancel: true,
+            });
+          }}
+        >
+          带取消弹框
+        </button>
+      </p>
+      <p>
+        <button
+          onClick={() => {
+            showAlert({
+              description: "这是一个带标题的弹框",
+              showCancel: true,
+              onCancel() {
+                console.log("cancel");
+              },
+              onConfirm() {
+                console.log("confirm");
+              },
+            });
+          }}
+        >
+          带标题弹框
+        </button>
+      </p>
+
+      <p>
+        <button
+          onClick={() => {
+            showAlert({
+              description: "定制按钮的内容",
+              showCancel: true,
+              confirm: (
+                <RowCenter style={{ height: "100%" }}>
+                  <svg style={{ width: ".24rem" }} viewBox="0 0 24 24">
+                    <path
+                      fill="gray"
+                      d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+                    />
+                  </svg>
+                  用户信息
+                </RowCenter>
+              ),
+            });
+          }}
+        >
+          定制按钮的内容
+        </button>
+      </p>
+      <p>
+        <button
+          onClick={() => {
+            showAlert({
+              description: "标题、按钮、内容都是可定制的",
+              title: (
+                <h2 style={{ textAlign: "center", color: "red", margin: 0 }}>
+                  大标题
+                </h2>
+              ),
+              showCancel: true,
+              confirm: (
+                <RowCenter style={{ height: "100%" }}>
+                  <svg style={{ width: ".24rem" }} viewBox="0 0 24 24">
+                    <path
+                      fill="gray"
+                      d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+                    />
+                  </svg>
+                  用户信息
+                </RowCenter>
+              ),
+            });
+          }}
+        >
+          标题、按钮、内容都是可定制的
+        </button>
+      </p>
+    </div>
+  );
+}

package/test/src/autogrid/index.jsx

@@ -0,0 +1,26 @@
+import "./index.css";
+import React from "react";
+import { AutoGrid } from "@";
+
+export default function Index() {
+  return (
+    <div>
+      <p>简单测试</p>
+      <AutoGrid cols={4} gap={".1rem"} isSquare itemStyle={{ background: "yellow" }}>
+        <div style={{ width: "400px", backgroundColor: "red" }}>3143214112</div>
+        {[<span key={1}>1</span>, <span key={2}>2</span>, <span key={3}>3</span>]}, . :<span>1</span>
+        <span>2</span>
+        <span>3</span>
+        {false}
+        {null}
+        {undefined}
+        {0}
+        {[]}
+        {""}
+        {true}
+        {() => <>123</>}
+        <p>最后一个</p>
+      </AutoGrid>
+    </div>
+  );
+}

package/test/src/carouse-notice/index.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { CarouselNotice } from '@';
+
+export default function Index () {
+  return (
+    <div>
+      <p>轮播条目只有一条（不滚动）：</p>
+      <CarouselNotice
+        list={['第一条滚动']}
+        style={{ border: '1px solid blue' }}
+        itemStyle={{
+          color: "blue"
+        }}
+      />
+
+      <p>轮播条目为纯文本：</p>
+      <CarouselNotice
+        list={['第一条滚动', '第二条滚动测试']}
+        style={{ border: '1px solid red' }}
+      />
+
+      <p>轮播条目为任意React组件：</p>
+      <CarouselNotice
+        list={[
+          <p>
+            第一条<span style={{ color: 'pink' }}>粉色</span>滚动
+          </p>,
+          <p style={{ fontSize: '12px', color: 'red' }}>
+            第二条红色文字要小一些
+          </p>,
+          <p style={{ fontWeight: 'bold' }}>第3条滚动文字加粗</p>,
+          <p
+            onClick={() => {
+              alert('点击了第4条轮播条目');
+            }}
+            style={{ textDecoration: 'underline' }}
+          >
+            第4条可点击
+          </p>,
+        ]}
+        style={{ background: '#f0f0f0' }}
+      />
+
+      <p>轮播条目左对齐：</p>
+      <CarouselNotice
+        justify="start"
+        list={['第一条滚动', '第二条滚动测试']}
+        style={{ border: '1px solid red' }}
+      />
+
+      <p>轮播条目右对齐：</p>
+      <CarouselNotice
+        justify="end"
+        list={['第一条滚动', '第二条滚动测试']}
+        style={{ border: '1px solid red' }}
+      />
+    </div>
+  );
+}

package/test/src/clickable/index.css

@@ -0,0 +1,21 @@
+.Touchable {
+  padding: 0.1rem;
+  user-select: none;
+  .btntest {
+    margin-top: 0.5rem;
+    background-color: gray;
+    padding: 0.1rem;
+    > div {
+      padding: 0.1rem;
+      margin: 0.1rem;
+      background-color: #f0f0f0;
+      color: red;
+    }
+  }
+
+  .as {
+    margin-top: 0.2rem;
+    background-color: gray;
+    padding: 0.1rem;
+  }
+}