clxx 2.1.7 → 2.1.8

package/build/Alert/Wrapper.js

@@ -6,23 +6,20 @@ const Clickable_1 = require("../Clickable");
 const Row_1 = require("../Flex/Row");
 const style_1 = require("./style");
 function AlertWrapper(props) {
-    const { title = '提示', description, confirm = '确定', confirmColor = '#007afe', cancel = '取消', cancelColor = '#666', showCancel = false, onConfirm, onCancel, 
+    const { title = '提示', description, confirm = '确定', confirmColor = '#007aff', cancel = '取消', cancelColor = '#6b7280', showCancel = false, onConfirm, onCancel, 
     // 可定制的样式
     titleStyle, descStyle, btnStyle, cancelStyle, confirmStyle, } = props;
-    // 标题样式
-    let titleCss = [
-        style_1.style.title,
-        description ? { paddingBottom: 0 } : {},
-        titleStyle
-    ];
     // 展示按钮组
-    let btnBoxCss = [
+    const btnBoxCss = [
         style_1.style.btnBox,
         showCancel ? style_1.style.btnBoxWithCancel : {}
     ];
-    return ((0, jsx_runtime_1.jsxs)("div", { css: style_1.style.container, children: [(0, jsx_runtime_1.jsxs)("div", { css: style_1.style.content, children: [(0, jsx_runtime_1.jsx)("div", { css: titleCss, children: title }), description && (0, jsx_runtime_1.jsx)("div", { css: [style_1.style.desc, descStyle], children: description })] }), (0, jsx_runtime_1.jsxs)(Row_1.Row, { alignItems: "stretch", css: btnBoxCss, children: [showCancel && ((0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: [style_1.style.btn, btnStyle, cancelStyle, { color: cancelColor }], onClick: onCancel, activeStyle: {
-                            backgroundColor: `#c0c0c022`,
-                        }, children: cancel })), (0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: [style_1.style.btn, btnStyle, confirmStyle, { color: confirmColor }], onClick: onConfirm, activeStyle: {
-                            backgroundColor: `#c0c0c022`,
-                        }, children: confirm })] })] }));
+    const activeBg = { backgroundColor: 'rgba(0,0,0,.04)' };
+    return ((0, jsx_runtime_1.jsxs)("div", { css: style_1.style.container, children: [(0, jsx_runtime_1.jsxs)("div", { css: style_1.style.content, children: [(0, jsx_runtime_1.jsx)("div", { css: [style_1.style.title, titleStyle], children: title }), description && (0, jsx_runtime_1.jsx)("div", { css: [style_1.style.desc, descStyle], children: description })] }), (0, jsx_runtime_1.jsxs)(Row_1.Row, { alignItems: "stretch", css: btnBoxCss, children: [showCancel && ((0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: [style_1.style.btn, btnStyle, cancelStyle, { color: cancelColor }], onClick: onCancel, activeStyle: activeBg, children: cancel })), (0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: [
+                            style_1.style.btn,
+                            style_1.style.btnConfirm,
+                            btnStyle,
+                            confirmStyle,
+                            { color: confirmColor },
+                        ], onClick: onConfirm, activeStyle: activeBg, children: confirm })] })] }));
 }

package/build/Alert/style.js

@@ -1,17 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = void 0;
+// 1px 硬边框（高清屏 hairline）
+const hairline = 1 / (typeof window !== "undefined" ? window.devicePixelRatio : 1);
+const fontStack = '-apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif';
 exports.style = {
     container: {
         position: "relative",
         overflow: "hidden",
-        backgroundColor: "#fff",
-        boxShadow: "0 0 2px 0 #00000055",
-        borderRadius: '.16rem',
-        width: 750 * 0.84 / 100 + 'rem',
+        backgroundColor: "#ffffff",
+        borderRadius: ".28rem",
+        width: (750 * 0.78) / 100 + "rem",
+        fontFamily: fontStack,
+        color: "#1f2328",
+        WebkitFontSmoothing: "antialiased",
+        MozOsxFontSmoothing: "grayscale",
+        boxShadow: "0 .2rem .6rem rgba(0,0,0,.18)",
     },
     content: {
         position: "relative",
+        paddingTop: ".4rem",
+        paddingBottom: ".4rem",
+        paddingLeft: ".36rem",
+        paddingRight: ".36rem",
         "&:after,&::after": {
             content: "''",
             position: "absolute",
@@ -19,33 +30,30 @@ exports.style = {
             left: 0,
             right: 0,
             height: "1px",
-            backgroundColor: "#c0c0c0",
-            transform: `scale(1, ${1 / window.devicePixelRatio})`,
+            backgroundColor: "#e5e7eb",
+            transform: `scale(1, ${hairline})`,
+            transformOrigin: "0 100%",
         },
     },
     title: {
         textAlign: "center",
-        lineHeight: 1.4,
-        color: "#000",
-        paddingTop: '.5rem',
-        paddingLeft: '.4rem',
-        paddingRight: '.4rem',
-        paddingBottom: '.5rem',
-        fontSize: '.33rem',
+        lineHeight: 1.45,
+        color: "#1f2328",
+        fontSize: ".34rem",
+        fontWeight: 600,
+        letterSpacing: ".01rem",
     },
     desc: {
         textAlign: "center",
-        lineHeight: 1.4,
-        color: "#666",
-        paddingTop: '.2rem',
-        paddingLeft: '.4rem',
-        paddingRight: '.4rem',
-        paddingBottom: '.5rem',
-        fontSize: '.29rem',
+        lineHeight: 1.55,
+        color: "#6b7280",
+        fontSize: ".28rem",
+        marginTop: ".18rem",
+        wordBreak: "break-word",
     },
     btnBox: {
         position: "relative",
-        height: '.9rem',
+        height: ".92rem",
     },
     btnBoxWithCancel: {
         "&:after,&::after": {
@@ -56,8 +64,9 @@ exports.style = {
             left: "50%",
             marginLeft: "-.5px",
             width: "1px",
-            backgroundColor: "#c0c0c0",
-            transform: `scale(${1 / window.devicePixelRatio}, 1)`,
+            backgroundColor: "#e5e7eb",
+            transform: `scale(${hairline}, 1)`,
+            transformOrigin: "0 0",
         },
     },
     btn: {
@@ -66,7 +75,13 @@ exports.style = {
         alignItems: "center",
         justifyContent: "center",
         userSelect: "none",
-        letterSpacing: "1px",
-        fontSize: '.33rem',
+        fontSize: ".32rem",
+        fontWeight: 500,
+        letterSpacing: ".01rem",
+        cursor: "pointer",
+        transition: "background-color .12s",
+    },
+    btnConfirm: {
+        fontWeight: 600,
     },
 };

package/build/CitySelect/index.js

@@ -201,7 +201,7 @@ function CitySelect(props) {
         if (!el)
             return;
         let lastLetter = null;
-        const updateByTouch = (clientY) => {
+        const updateByY = (clientY) => {
             var _a;
             const list = lettersRef.current;
             if (list.length === 0)
@@ -221,28 +221,63 @@ function CitySelect(props) {
                 (_a = onLetterChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onLetterChangeRef, letter);
             }
         };
-        const handleTouchStart = (e) => {
+        // 优先使用触摸事件；不支持触摸才回退到鼠标事件，避免两套并存冲突
+        const isTouch = typeof window !== "undefined" &&
+            ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+        if (isTouch) {
+            const handleTouchStart = (e) => {
+                setTouching(true);
+                updateByY(e.touches[0].clientY);
+            };
+            const handleTouchMove = (e) => {
+                // 阻止滚动，需要非 passive 监听器
+                e.preventDefault();
+                updateByY(e.touches[0].clientY);
+            };
+            const handleTouchEnd = () => {
+                setTouching(false);
+                lastLetter = null;
+            };
+            el.addEventListener("touchstart", handleTouchStart, { passive: false });
+            el.addEventListener("touchmove", handleTouchMove, { passive: false });
+            el.addEventListener("touchend", handleTouchEnd);
+            el.addEventListener("touchcancel", handleTouchEnd);
+            return () => {
+                el.removeEventListener("touchstart", handleTouchStart);
+                el.removeEventListener("touchmove", handleTouchMove);
+                el.removeEventListener("touchend", handleTouchEnd);
+                el.removeEventListener("touchcancel", handleTouchEnd);
+            };
+        }
+        // 鼠标端：按下后拖动，move/up 绑在 document 以支持拖出 sidebar
+        let dragging = false;
+        const handleMouseDown = (e) => {
+            if (e.button !== 0)
+                return;
+            e.preventDefault();
+            dragging = true;
             setTouching(true);
-            updateByTouch(e.touches[0].clientY);
+            updateByY(e.clientY);
         };
-        const handleTouchMove = (e) => {
-            // 阻止滚动，需要非 passive 监听器
-            e.preventDefault();
-            updateByTouch(e.touches[0].clientY);
+        const handleMouseMove = (e) => {
+            if (!dragging)
+                return;
+            updateByY(e.clientY);
         };
-        const handleTouchEnd = () => {
+        const handleMouseUp = () => {
+            if (!dragging)
+                return;
+            dragging = false;
             setTouching(false);
             lastLetter = null;
         };
-        el.addEventListener("touchstart", handleTouchStart, { passive: false });
-        el.addEventListener("touchmove", handleTouchMove, { passive: false });
-        el.addEventListener("touchend", handleTouchEnd);
-        el.addEventListener("touchcancel", handleTouchEnd);
+        el.addEventListener("mousedown", handleMouseDown);
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
         return () => {
-            el.removeEventListener("touchstart", handleTouchStart);
-            el.removeEventListener("touchmove", handleTouchMove);
-            el.removeEventListener("touchend", handleTouchEnd);
-            el.removeEventListener("touchcancel", handleTouchEnd);
+            el.removeEventListener("mousedown", handleMouseDown);
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
         };
     }, [isSearching]);
     // 手动滚动城市列表时，根据当前最靠上的区块激活对应字母（rAF 节流）

package/build/Toast/style.d.ts

@@ -37,9 +37,6 @@ export declare const bottomHideAnimation: {
 } & string;
 /**
  * 根据位置和类型获取动画
- * @param position
- * @param type
- * @returns
  */
 export declare function getAnimation(position: "top" | "middle" | "bottom", type: "show" | "hide"): {
     keyframes: Keyframes;

package/build/Toast/style.js

@@ -3,10 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.bottomHideAnimation = exports.bottomShowAnimation = exports.topHideAnimation = exports.topShowAnimation = exports.middleHideAnimation = exports.middleShowAnimation = void 0;
 exports.getAnimation = getAnimation;
 const react_1 = require("@emotion/react");
+const fontStack = '-apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif';
+const easing = "cubic-bezier(.22,.61,.36,1)";
 exports.middleShowAnimation = (0, react_1.keyframes) `
   from {
     opacity: 0;
-    transform: translateX(-50%) scale(0.9);
+    transform: translateX(-50%) scale(0.92);
   }
   to {
     opacity: 1;
@@ -20,13 +22,13 @@ exports.middleHideAnimation = (0, react_1.keyframes) `
   }
   to {
     opacity: 0;
-    transform: translateX(-50%) scale(0.9);
+    transform: translateX(-50%) scale(0.92);
   }
 `;
 exports.topShowAnimation = (0, react_1.keyframes) `
   from {
     opacity: 0;
-    transform: translate(-50%, -100%);
+    transform: translate(-50%, -120%);
   }
   to {
     opacity: 1;
@@ -40,13 +42,13 @@ exports.topHideAnimation = (0, react_1.keyframes) `
   }
   to {
     opacity: 0;
-    transform: translate(-50%, -100%);
+    transform: translate(-50%, -120%);
   }
 `;
 exports.bottomShowAnimation = (0, react_1.keyframes) `
   from {
     opacity: 0;
-    transform: translate(-50%, 100%);
+    transform: translate(-50%, 120%);
   }
   to {
     opacity: 1;
@@ -60,14 +62,11 @@ exports.bottomHideAnimation = (0, react_1.keyframes) `
   }
   to {
     opacity: 0;
-    transform: translate(-50%, 100%);
+    transform: translate(-50%, 120%);
   }
 `;
 /**
  * 根据位置和类型获取动画
- * @param position
- * @param type
- * @returns
  */
 function getAnimation(position, type) {
     const animation = {
@@ -85,7 +84,7 @@ function getAnimation(position, type) {
     return {
         keyframes,
         animation: (0, react_1.css)({
-            animation: `${keyframes} 300ms ease`,
+            animation: `${keyframes} 260ms ${easing}`,
         }),
     };
 }
@@ -96,32 +95,37 @@ exports.style = {
             left: "50%",
             transform: "translateX(-50%)",
             zIndex: 9999,
-            maxWidth: '6rem',
+            maxWidth: "6rem",
+            pointerEvents: "none",
+            fontFamily: fontStack,
+            WebkitFontSmoothing: "antialiased",
+            MozOsxFontSmoothing: "grayscale",
         });
     },
     top(offset) {
-        return (0, react_1.css)({ top: offset / 100 + 'rem' });
+        return (0, react_1.css)({ top: offset / 100 + "rem" });
     },
     middle: (0, react_1.css)({ top: "50%" }),
     bottom(offset) {
-        return (0, react_1.css)({ bottom: offset / 100 + 'rem' });
+        return (0, react_1.css)({ bottom: offset / 100 + "rem" });
     },
     content: (radius) => {
         return (0, react_1.css)({
             position: "relative",
-            backgroundColor: "rgba(0, 0, 0, .8)",
-            color: "#fff",
+            backgroundColor: "rgba(17,24,39,.88)",
+            color: "#ffffff",
             margin: 0,
-            whiteSpace: "nowrap",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            lineHeight: 1,
-            fontSize: '.26rem',
-            paddingLeft: '.3rem',
-            paddingRight: '.3rem',
-            paddingTop: '.4rem',
-            paddingBottom: '.4rem',
-            borderRadius: radius ? radius / 100 + 'rem' : 0,
+            // 允许多行，超过 maxWidth 时自然换行
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+            lineHeight: 1.5,
+            fontSize: ".28rem",
+            fontWeight: 400,
+            letterSpacing: ".01rem",
+            textAlign: "center",
+            padding: ".2rem .32rem",
+            borderRadius: radius ? radius / 100 + "rem" : 0,
+            boxShadow: "0 .12rem .32rem rgba(0,0,0,.25)",
         });
     },
     contentMiddle: {

package/package.json

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

package/test/src/toast/index.jsx

@@ -44,6 +44,7 @@ export default function Index () {
           showToast({
             content: "一个简单的Toast轻提示Toast轻提示Toast轻提示Toast轻提示",
             position: "bottom",
+            // duration: 500000,
           });
         }}
       >