wz-h5-design 1.0.3 → 1.0.5

package/dist/wz-h5-design.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React, { forwardRef, useState, useRef, useMemo, useContext, createContext, createElement, Children, useEffect, useImperativeHandle, useLayoutEffect } from "react";
+import React, { forwardRef, useState, useRef, useMemo, useContext, createContext, createElement, useCallback, Children, useEffect, useImperativeHandle, useLayoutEffect } from "react";
 import { createRoot } from "react-dom/client";
 const Button = forwardRef(({
   type = "primary",
@@ -9,6 +9,9 @@ const Button = forwardRef(({
   color = "",
   textColor = "",
   borderColor = "",
+  width,
+  height,
+  fontSize,
   className = "",
   style = {},
   children,
@@ -18,12 +21,22 @@ const Button = forwardRef(({
 }, ref) => {
   const [isActive, setIsActive] = useState(false);
   const timerRef = useRef(null);
+  const formatSize = (value) => {
+    if (value === void 0) return void 0;
+    return typeof value === "number" ? `${value}px` : value;
+  };
   const buttonStyle = useMemo(() => {
+    const customStyle = {
+      width: formatSize(width),
+      height: formatSize(height),
+      fontSize: formatSize(fontSize)
+    };
     if (type === "cancel") {
       return {
         background: "#D6D6D6",
         color: textColor || "#fff",
-        ...style
+        ...style,
+        ...customStyle
       };
     }
     if (type === "outline") {
@@ -31,7 +44,8 @@ const Button = forwardRef(({
         color: textColor || "var(--wz-primary-color)",
         borderColor: borderColor || "var(--wz-primary-color)",
         background: "transparent",
-        ...style
+        ...style,
+        ...customStyle
       };
     }
     if (type === "text") {
@@ -40,7 +54,8 @@ const Button = forwardRef(({
         background: "transparent",
         border: "none",
         boxShadow: "none",
-        ...style
+        ...style,
+        ...customStyle
       };
     }
     if (type === "plain") {
@@ -48,7 +63,8 @@ const Button = forwardRef(({
         color: textColor || "#666666",
         borderColor: borderColor || "#666666",
         background: "transparent",
-        ...style
+        ...style,
+        ...customStyle
       };
     }
     if (type === "primary") {
@@ -57,10 +73,10 @@ const Button = forwardRef(({
         s.background = color || "var(--wz-primary-gradient, var(--wz-primary-color))";
       }
       s.color = textColor || "#fff";
-      return s;
+      return { ...s, ...customStyle };
     }
-    return style;
-  }, [type, color, textColor, borderColor, style]);
+    return { ...style, ...customStyle };
+  }, [type, color, textColor, borderColor, width, height, fontSize, style]);
   const handleClick = (e) => {
     if (disabled) return;
     setIsActive(true);
@@ -100,6 +116,62 @@ const Button = forwardRef(({
   );
 });
 Button.displayName = "Button";
+const ButtonGroup = ({
+  bgColor = "#fff",
+  height,
+  padding = "2px 10px",
+  fixed = false,
+  gap = 9,
+  className = "",
+  style = {},
+  children
+}) => {
+  const formatSize = (value) => {
+    if (value === void 0) return void 0;
+    return typeof value === "number" ? `${value}px` : value;
+  };
+  const containerStyle = {
+    backgroundColor: bgColor,
+    height: formatSize(height),
+    padding: formatSize(padding),
+    gap: formatSize(gap),
+    ...style
+  };
+  const classNames2 = [
+    "wz-button-group",
+    fixed ? "wz-button-group--fixed" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classNames2, style: containerStyle, children });
+};
+ButtonGroup.displayName = "ButtonGroup";
+const Icon = ({
+  name,
+  size = 24,
+  color = "currentColor",
+  className = "",
+  style,
+  onClick,
+  type = "yunying"
+  // 默认使用yunying图标库
+}) => {
+  const iconStyle = {
+    fontSize: typeof size === "number" ? `${size}px` : size,
+    color,
+    ...style
+  };
+  const iconFontClass = `iconfont-${type}`;
+  const iconPrefix = "icon-";
+  const iconClass = `${iconPrefix}${name}`;
+  return /* @__PURE__ */ jsx(
+    "i",
+    {
+      className: `wz-icon ${iconFontClass} ${iconClass} ${className}`,
+      style: iconStyle,
+      onClick
+    }
+  );
+};
 const RadioGroupContext = createContext({});
 const Radio = ({
   size,
@@ -127,6 +199,11 @@ const Radio = ({
   const isChecked = isInGroup ? groupContext.value === value : checked;
   const isDisabled = disabled || groupContext.disabled;
   const radioSize = size || groupContext.size || "medium";
+  const iconSizeMap = {
+    small: 16,
+    medium: 18,
+    large: 20
+  };
   return /* @__PURE__ */ jsxs(
     "label",
     {
@@ -145,7 +222,7 @@ const Radio = ({
             ...rest
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "wz-radio-inner" }),
+        /* @__PURE__ */ jsx("span", { className: "wz-radio-inner", children: /* @__PURE__ */ jsx(Icon, { name: isChecked ? "radio-sel" : "radio-nor", type: "yunying", size: iconSizeMap[radioSize] }) }),
         children && /* @__PURE__ */ jsx("span", { className: "wz-radio-label", children })
       ]
     }
@@ -206,6 +283,11 @@ const Checkbox = ({
   const isChecked = isInGroup ? (_a = groupContext.value) == null ? void 0 : _a.includes(value) : checked;
   const isDisabled = disabled || groupContext.disabled;
   const checkboxSize = size || groupContext.size || "medium";
+  const iconSizeMap = {
+    small: 16,
+    medium: 18,
+    large: 20
+  };
   return /* @__PURE__ */ jsxs(
     "label",
     {
@@ -224,7 +306,7 @@ const Checkbox = ({
             ...rest
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "wz-checkbox-inner" }),
+        /* @__PURE__ */ jsx("span", { className: "wz-checkbox-inner", children: /* @__PURE__ */ jsx(Icon, { name: isChecked ? "checkbox-checked" : "checkbox", type: "yunying", size: iconSizeMap[checkboxSize] }) }),
         children && /* @__PURE__ */ jsx("span", { className: "wz-checkbox-label", children })
       ]
     }
@@ -274,11 +356,17 @@ const Switch = ({
   const [innerValue, setInnerValue] = useState(defaultValue);
   const isControlled = value !== void 0;
   const checked = isControlled ? value : innerValue;
-  const text = checked ? activeText || DEFAULT_ACTIVE_TEXT : inactiveText || DEFAULT_INACTIVE_TEXT;
+  const activeTextDisplay = activeText || DEFAULT_ACTIVE_TEXT;
+  const inactiveTextDisplay = inactiveText || DEFAULT_INACTIVE_TEXT;
+  const text = checked ? activeTextDisplay : inactiveTextDisplay;
   const textWidth = showText ? `${text.length * 12 + 8}px` : "0px";
+  const maxTextLen = Math.max(activeTextDisplay.length, inactiveTextDisplay.length);
   const baseWidth = size === "large" ? 62 : 60;
-  const switchWidthNum = showText ? text.length * 12 + 40 : baseWidth;
+  const calculatedWidth = showText ? maxTextLen * 12 + 40 : baseWidth;
+  const switchWidthNum = Math.max(calculatedWidth, baseWidth);
   const switchWidth = `${switchWidthNum}px`;
+  const sliderSize = size === "large" ? 24 : 22;
+  const sliderTranslateX = checked ? switchWidthNum - sliderSize - 4 : 0;
   const onBg = activeColor ? activeColor.includes("gradient") ? activeColor : activeColor : void 0;
   const handleClick = () => {
     if (disabled) return;
@@ -297,7 +385,8 @@ const Switch = ({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: `wz-switch-slider ${checked ? "wz-switch-slider-on" : "wz-switch-slider-off"}`
+            className: `wz-switch-slider ${checked ? "wz-switch-slider-on" : "wz-switch-slider-off"}`,
+            style: { transform: `translateX(${sliderTranslateX}px)` }
           }
         )
       ]
@@ -355,42 +444,18 @@ var classnames = { exports: {} };
 })(classnames);
 var classnamesExports = classnames.exports;
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const Icon = ({
-  name,
-  size = 24,
-  color = "currentColor",
-  className = "",
-  style,
-  onClick,
-  type = "yunying"
-  // 默认使用yunying图标库
-}) => {
-  const iconStyle = {
-    fontSize: typeof size === "number" ? `${size}px` : size,
-    color,
-    ...style
-  };
-  const iconFontClass = `iconfont-${type}`;
-  const iconPrefix = "icon-";
-  const iconClass = `${iconPrefix}${name}`;
-  return /* @__PURE__ */ jsx(
-    "i",
-    {
-      className: `wz-icon ${iconFontClass} ${iconClass} ${className}`,
-      style: iconStyle,
-      onClick
-    }
-  );
-};
 const TabbarItem = (props) => {
-  const { title, icon, activeIcon, badge, badgeAsBubble, hump, active, onItemClick, onClick, activeColor } = props;
+  const { title, icon, activeIcon, badge, badgeAsBubble, dot, hump, active, onItemClick, onClick, activeColor } = props;
   const renderIcon = (iconSource) => {
     if (typeof iconSource === "string") {
-      return /* @__PURE__ */ jsx(Icon, { name: iconSource });
+      return /* @__PURE__ */ jsx(Icon, { size: 22, name: iconSource });
     }
     return iconSource;
   };
   const renderBadge = () => {
+    if (dot) {
+      return /* @__PURE__ */ jsx("div", { className: "wz-tabbar-item-dot" });
+    }
     if (!badge) return null;
     if (badgeAsBubble) {
       return /* @__PURE__ */ jsx("div", { className: "wz-tabbar-item-badge-custom", children: /* @__PURE__ */ jsxs("div", { className: "wz-tabbar-item-badge-bubble", children: [
@@ -419,7 +484,7 @@ const TabbarItem = (props) => {
       active ? renderIcon(activeIcon || icon) : renderIcon(icon),
       renderBadge()
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "wz-tabbar-item-title", children: title })
+    !hump && /* @__PURE__ */ jsx("div", { className: "wz-tabbar-item-title", children: title })
   ] });
 };
 const Tabbar = (props) => {
@@ -544,7 +609,7 @@ const Cell$1 = (props) => {
   };
   const renderRightIcon = () => {
     if (arrow) {
-      return /* @__PURE__ */ jsx("div", { className: "wz-cell-arrow" });
+      return /* @__PURE__ */ jsx("div", { className: "wz-cell-arrow", children: /* @__PURE__ */ jsx(Icon, { name: "right-arrow", size: 16 }) });
     }
     return null;
   };
@@ -570,6 +635,7 @@ const TabPane = ({ children }) => {
 };
 const Tabs = ({
   type = "line",
+  align = "center",
   value,
   defaultValue = 0,
   onChange,
@@ -579,33 +645,72 @@ const Tabs = ({
   headerStyle,
   contentClassName = "",
   contentStyle,
-  children
+  children,
+  maxTabs = 5
 }) => {
   const isControlled = value !== void 0;
   const [innerValue, setInnerValue] = useState(defaultValue);
   const activeIndex = isControlled ? value : innerValue;
-  const panes = Children.toArray(children).filter(Boolean);
+  const headerRef = useRef(null);
+  const isDragging = useRef(false);
+  const startX = useRef(0);
+  const scrollLeft = useRef(0);
+  const handleMouseDown = useCallback((e) => {
+    if (align !== "left" || !headerRef.current) return;
+    isDragging.current = true;
+    startX.current = e.pageX - headerRef.current.offsetLeft;
+    scrollLeft.current = headerRef.current.scrollLeft;
+  }, [align]);
+  const handleMouseMove = useCallback((e) => {
+    if (!isDragging.current || !headerRef.current) return;
+    e.preventDefault();
+    const x = e.pageX - headerRef.current.offsetLeft;
+    const walk = (x - startX.current) * 1.5;
+    headerRef.current.scrollLeft = scrollLeft.current - walk;
+  }, []);
+  const handleMouseUp = useCallback(() => {
+    isDragging.current = false;
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    isDragging.current = false;
+  }, []);
+  const allPanes = Children.toArray(children).filter(Boolean);
+  const panes = allPanes.slice(0, maxTabs);
   const handleTabClick = (idx, disabled) => {
     if (disabled) return;
     if (!isControlled) setInnerValue(idx);
     onChange == null ? void 0 : onChange(idx);
   };
-  return /* @__PURE__ */ jsxs("div", { className: `wz-tabs wz-tabs-${type} ${className}`, style, children: [
-    /* @__PURE__ */ jsx("div", { className: `wz-tabs-header ${headerClassName}`, style: headerStyle, children: panes.map((pane, idx) => /* @__PURE__ */ jsxs(
+  const cardTabStyle = type === "card" ? {
+    flex: panes.length > 3 ? "0 0 calc((100% - 28px) / 3)" : "1"
+  } : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: `wz-tabs wz-tabs-${type}${align === "left" ? " wz-tabs-align-left" : ""} ${className}`, style, children: [
+    /* @__PURE__ */ jsx(
       "div",
       {
-        className: `wz-tabs-tab${idx === activeIndex ? " wz-tabs-tab-active" : ""}${pane.props.disabled ? " wz-tabs-tab-disabled" : ""}`,
-        onClick: () => handleTabClick(idx, pane.props.disabled),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "wz-tabs-tab-text", children: [
-            pane.props.title,
-            pane.props.badge && /* @__PURE__ */ jsx("div", { className: "wz-tabs-badge", children: pane.props.badge })
-          ] }),
-          idx === activeIndex && type === "line" && /* @__PURE__ */ jsx("div", { className: "wz-tabs-underline" })
-        ]
-      },
-      idx
-    )) }),
+        ref: headerRef,
+        className: `wz-tabs-header ${headerClassName}`,
+        style: headerStyle,
+        onMouseDown: handleMouseDown,
+        onMouseMove: handleMouseMove,
+        onMouseUp: handleMouseUp,
+        onMouseLeave: handleMouseLeave,
+        children: panes.map((pane, idx) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `wz-tabs-tab${idx === activeIndex ? " wz-tabs-tab-active" : ""}${pane.props.disabled ? " wz-tabs-tab-disabled" : ""}`,
+            style: cardTabStyle,
+            onClick: () => handleTabClick(idx, pane.props.disabled),
+            children: /* @__PURE__ */ jsxs("div", { className: "wz-tabs-tab-text", children: [
+              pane.props.title,
+              pane.props.badge && /* @__PURE__ */ jsx("div", { className: "wz-tabs-badge", children: pane.props.badge }),
+              idx === activeIndex && type === "line" && /* @__PURE__ */ jsx("div", { className: "wz-tabs-underline" })
+            ] })
+          },
+          idx
+        ))
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: `wz-tabs-content ${contentClassName}`, style: contentStyle, children: panes[activeIndex] })
   ] });
 };
@@ -996,7 +1101,7 @@ const Cascader = ({
 const Input = forwardRef(
   ({
     clearable = false,
-    align = "center",
+    align = "left",
     value,
     defaultValue,
     onChange,
@@ -1011,12 +1116,49 @@ const Input = forwardRef(
     borderRadius,
     backgroundColor,
     bordered,
+    codeCountdown = 60,
+    onGetCode,
+    codeText = "获取验证码",
+    codeCountingText = "{s}s后重新获取",
+    codeResendText = "重新获取验证码",
     ...props
   }, ref) => {
     const isControlled = value !== void 0;
     const [innerValue, setInnerValue] = useState(defaultValue || "");
     const showClear = clearable && !!(isControlled ? value : innerValue);
     const [passwordVisible, setPasswordVisible] = useState(false);
+    const [counting, setCounting] = useState(false);
+    const [countdown, setCountdown] = useState(codeCountdown);
+    const [hasSent, setHasSent] = useState(false);
+    const [suffixWidth, setSuffixWidth] = useState(0);
+    const suffixRef = useRef(null);
+    useEffect(() => {
+      if (suffixRef.current) {
+        const width = suffixRef.current.offsetWidth;
+        setSuffixWidth(width);
+      }
+    }, [counting, countdown, hasSent, suffix, codeText, codeCountingText, codeResendText]);
+    useEffect(() => {
+      let timer;
+      if (counting && countdown > 0) {
+        timer = setInterval(() => {
+          setCountdown((prev) => prev - 1);
+        }, 1e3);
+      } else if (countdown === 0) {
+        setCounting(false);
+        setCountdown(codeCountdown);
+      }
+      return () => clearInterval(timer);
+    }, [counting, countdown, codeCountdown]);
+    const handleGetCode = useCallback(async () => {
+      if (counting) return;
+      try {
+        await (onGetCode == null ? void 0 : onGetCode());
+        setCounting(true);
+        setHasSent(true);
+      } catch {
+      }
+    }, [counting, onGetCode]);
     const handleChange = (e) => {
       if (!isControlled) setInnerValue(e.target.value);
       onChange == null ? void 0 : onChange(e);
@@ -1041,7 +1183,8 @@ const Input = forwardRef(
       textAlign: align,
       borderRadius,
       backgroundColor,
-      border: bordered !== void 0 ? void 0 : "none"
+      border: bordered !== void 0 ? void 0 : "none",
+      ...suffixWidth > 0 && (suffix || type === "code") ? { paddingRight: suffixWidth + 22 + 12 } : {}
     };
     const currentValue = isControlled ? value : innerValue;
     const count = (currentValue == null ? void 0 : currentValue.toString().length) || 0;
@@ -1093,15 +1236,19 @@ const Input = forwardRef(
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `wz-input-affix-wrapper ${type === "textarea" ? "wz-input-affix-wrapper-textarea" : ""} ${suffix ? "wz-input-has-suffix" : ""} ${bordered === void 0 ? "wz-input-no-border" : ""}`,
+        className: `wz-input-affix-wrapper ${type === "textarea" ? "wz-input-affix-wrapper-textarea" : ""} ${suffix || type === "code" ? "wz-input-has-suffix" : ""} ${bordered === void 0 ? "wz-input-no-border" : ""} ${clearable ? "wz-input-has-clear" : ""} ${type === "password" ? "wz-input-has-password" : ""}`,
         style: wrapperStyle,
         children: [
           renderInput(),
           showClear && !props.disabled && type !== "textarea" && !suffix && /* @__PURE__ */ jsx("span", { className: "wz-input-clear", onClick: handleClear, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 22 }) }),
           type === "password" && !suffix && /* @__PURE__ */ jsx("span", { className: "wz-input-password", onClick: handlePasswordVisible, children: /* @__PURE__ */ jsx(Icon, { name: passwordVisible ? "eyes-close" : "eyes-open", size: 22 }) }),
-          suffix && /* @__PURE__ */ jsxs("div", { className: "wz-input-suffix", children: [
+          suffix && /* @__PURE__ */ jsxs("div", { className: "wz-input-suffix", ref: suffixRef, children: [
             /* @__PURE__ */ jsx("span", { className: "wz-input-suffix-divider" }),
             suffix
+          ] }),
+          type === "code" && /* @__PURE__ */ jsxs("div", { className: "wz-input-suffix", ref: !suffix ? suffixRef : void 0, children: [
+            /* @__PURE__ */ jsx("span", { className: "wz-input-suffix-divider" }),
+            counting ? /* @__PURE__ */ jsx("span", { className: "wz-input-code-btn wz-input-code-btn--disabled", children: codeCountingText.replace("{s}", String(countdown)) }) : /* @__PURE__ */ jsx("span", { className: "wz-input-code-btn", onClick: handleGetCode, children: hasSent ? codeResendText : codeText })
           ] })
         ]
       }
@@ -1109,23 +1256,32 @@ const Input = forwardRef(
   }
 );
 Input.displayName = "Input";
+const COLOR_MAP = {
+  horizontal: {
+    default: "#f7f7f7",
+    emphasis: "#eeeeee"
+  },
+  vertical: "rgba(0, 0, 0, 0.1)"
+};
 const Divider = ({
   direction = "horizontal",
-  color = "#eee",
+  type = "default",
+  color,
   length,
   margin,
   style,
   className = ""
 }) => {
   const isVertical = direction === "vertical";
+  const defaultColor = isVertical ? COLOR_MAP.vertical : COLOR_MAP.horizontal[type];
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: `wz-divider wz-divider--${direction} ${className}`,
       style: {
-        background: color,
-        width: isVertical ? 1 : length || "100%",
-        height: isVertical ? length || 24 : 1,
+        background: color || defaultColor,
+        width: isVertical ? 2 : length || "100%",
+        height: isVertical ? length || 24 : 2,
         margin,
         ...style
       }
@@ -1156,7 +1312,7 @@ const CheckList = ({ options, value, onChange, multiple = false, style, classNam
       onClick: () => handleClick(item),
       children: [
         /* @__PURE__ */ jsx("span", { className: "wz-check-list__label", children: item }),
-        isChecked(item) && /* @__PURE__ */ jsx("span", { className: "wz-check-list__icon", children: "✔" })
+        isChecked(item) && /* @__PURE__ */ jsx("span", { className: "wz-check-list__icon", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 18, type: "yunying" }) })
       ]
     },
     item
@@ -1174,6 +1330,7 @@ const Search = forwardRef(
     suffix,
     leftIcon = /* @__PURE__ */ jsx(Icon, { name: "search", size: 16 }),
     actionText = "搜索",
+    actionColor,
     showCancel = false,
     cancelText = "返回",
     background,
@@ -1270,13 +1427,20 @@ const Search = forwardRef(
                           ...props
                         }
                       ),
-                      showClear && /* @__PURE__ */ jsx("div", { className: "wz-search-clear", onMouseDown: handleClear, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16, color: "#BDBDBD" }) })
+                      showClear && /* @__PURE__ */ jsx("div", { className: "wz-search-clear", onMouseDown: handleClear, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16, color: "#CCCCCC" }) })
                     ]
                   }
                 ),
                 actionText && /* @__PURE__ */ jsxs("div", { className: "wz-search-action", onClick: handleSearch, children: [
                   /* @__PURE__ */ jsx("div", { className: "wz-search-divider" }),
-                  /* @__PURE__ */ jsx("div", { className: "wz-search-action-text", children: actionText })
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "wz-search-action-text",
+                      style: actionColor ? { color: actionColor } : void 0,
+                      children: actionText
+                    }
+                  )
                 ] })
               ]
             }
@@ -1641,7 +1805,10 @@ const DateRangePicker = ({
   startLabel = "开始时间",
   endLabel = "结束时间",
   className = "",
-  style
+  style,
+  showLongTerm = false,
+  longTermLabel = "长期有效",
+  longTermValue = "9999-12-31"
 }) => {
   const todayStr = React.useMemo(() => {
     const today = /* @__PURE__ */ new Date();
@@ -1653,6 +1820,7 @@ const DateRangePicker = ({
   const [innerValue, setInnerValue] = useState(value || [todayStr, todayStr]);
   const range = value || innerValue;
   const [active, setActive] = useState("start");
+  const isLongTerm = range[1] === longTermValue;
   const handleSelect = (val) => {
     if (active === "start") {
       const newRange = [val, range[1] && range[1] >= val ? range[1] : val];
@@ -1664,6 +1832,17 @@ const DateRangePicker = ({
       onChange == null ? void 0 : onChange(newRange);
     }
   };
+  const handleLongTermToggle = () => {
+    if (isLongTerm) {
+      const newRange = [range[0], range[0]];
+      setInnerValue(newRange);
+      onChange == null ? void 0 : onChange(newRange);
+    } else {
+      const newRange = [range[0], longTermValue];
+      setInnerValue(newRange);
+      onChange == null ? void 0 : onChange(newRange);
+    }
+  };
   return /* @__PURE__ */ jsxs("div", { className: `wz-date-range-picker ${className}`, style, children: [
     /* @__PURE__ */ jsxs("div", { className: "wz-date-range-picker-label-row", children: [
       /* @__PURE__ */ jsx("div", { className: "wz-date-range-picker-label", children: startLabel }),
@@ -1679,14 +1858,28 @@ const DateRangePicker = ({
         }
       ) }),
       /* @__PURE__ */ jsx("div", { className: "wz-date-range-picker-sep", children: "至" }),
-      /* @__PURE__ */ jsx("div", { className: "wz-date-range-picker-col", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `wz-date-range-picker-value${active === "end" ? " active" : ""}`,
-          onClick: () => setActive("end"),
-          children: range[1] || "请选择"
-        }
-      ) })
+      /* @__PURE__ */ jsxs("div", { className: "wz-date-range-picker-col", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `wz-date-range-picker-value${active === "end" ? " active" : ""}${isLongTerm ? " disabled" : ""}`,
+            onClick: () => !isLongTerm && setActive("end"),
+            children: isLongTerm ? longTermLabel : range[1] || "请选择"
+          }
+        ),
+        showLongTerm && /* @__PURE__ */ jsxs("div", { className: "wz-date-range-picker-long-term", onClick: handleLongTermToggle, children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: isLongTerm ? "radio-sel" : "radio-nor",
+              type: "yunying",
+              size: 20,
+              color: isLongTerm ? "var(--active-color)" : "#ccc"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "wz-date-range-picker-long-term-text", children: longTermLabel })
+        ] })
+      ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "wz-date-range-picker-picker", children: /* @__PURE__ */ jsx(
       DatePicker,
@@ -1832,7 +2025,11 @@ Grid.Item = GridItem;
 const GridViewItem = ({
   icon,
   text,
+  textColor,
+  textSize,
   description,
+  descriptionColor,
+  descriptionSize,
   badge,
   corner,
   onClick,
@@ -1879,8 +2076,28 @@ const GridViewItem = ({
     /* @__PURE__ */ jsxs("div", { className: "wz-grid-view-item__content", children: [
       icon && /* @__PURE__ */ jsx("div", { className: "wz-grid-view-item__icon", children: icon }),
       /* @__PURE__ */ jsxs("div", { className: "wz-grid-view-item__text", children: [
-        text && /* @__PURE__ */ jsx("div", { className: "wz-grid-view-item__title", children: text }),
-        description && /* @__PURE__ */ jsx("div", { className: "wz-grid-view-item__desc", children: description })
+        text && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "wz-grid-view-item__title",
+            style: {
+              ...textColor ? { color: textColor } : {},
+              ...textSize ? { fontSize: typeof textSize === "number" ? `${textSize}px` : textSize } : {}
+            },
+            children: text
+          }
+        ),
+        description && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "wz-grid-view-item__desc",
+            style: {
+              ...descriptionColor ? { color: descriptionColor } : {},
+              ...descriptionSize ? { fontSize: typeof descriptionSize === "number" ? `${descriptionSize}px` : descriptionSize } : {}
+            },
+            children: description
+          }
+        )
       ] })
     ] }),
     badge && /* @__PURE__ */ jsx("div", { className: "wz-grid-view-item__badge", children: badge })
@@ -1960,20 +2177,42 @@ const Tip = ({
   className,
   visible = true,
   onClose,
-  action,
-  marquee = false
+  marquee = false,
+  bold = false,
+  icon,
+  showAction = false,
+  actionText = "查看",
+  onAction
 }) => {
+  const contentRef = useRef(null);
+  const [isMultiLine, setIsMultiLine] = useState(false);
+  useEffect(() => {
+    if (contentRef.current && !marquee) {
+      const el = contentRef.current;
+      const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 20;
+      setIsMultiLine(el.scrollHeight > lineHeight * 1.5);
+    }
+  }, [content, marquee]);
   if (!visible) {
     return null;
   }
   const baseClass = "wz-tip";
+  const hasRightArea = showAction || onClose;
   const tipClass = classNames(baseClass, className, {
-    [`${baseClass}--marquee`]: marquee
+    [`${baseClass}--marquee`]: marquee,
+    [`${baseClass}--bold`]: bold,
+    [`${baseClass}--center`]: !marquee && !isMultiLine,
+    [`${baseClass}--left`]: !marquee && isMultiLine,
+    [`${baseClass}--has-icon`]: !!icon,
+    [`${baseClass}--has-right`]: hasRightArea
   });
   const contentNode = marquee ? /* @__PURE__ */ jsx("div", { className: `${baseClass}-marquee-box`, children: /* @__PURE__ */ jsx("span", { children: content }) }) : content;
   return /* @__PURE__ */ jsxs("div", { className: tipClass, children: [
-    /* @__PURE__ */ jsx("div", { className: `${baseClass}-content`, children: contentNode }),
-    action && /* @__PURE__ */ jsx("div", { className: `${baseClass}-action`, children: action }),
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}-content`, ref: contentRef, children: [
+      icon && /* @__PURE__ */ jsx("span", { className: `${baseClass}-icon`, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 16 }) }),
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}-text`, children: contentNode })
+    ] }),
+    showAction && /* @__PURE__ */ jsx("div", { className: `${baseClass}-action`, onClick: onAction, children: actionText }),
     onClose && /* @__PURE__ */ jsx("div", { className: `${baseClass}-close`, onClick: onClose, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 }) })
   ] });
 };
@@ -2252,8 +2491,9 @@ const Tooltip = ({
   visible,
   onVisibleChange,
   showMask = false,
-  action,
-  closeIcon
+  actionText,
+  onAction,
+  closable = false
 }) => {
   const [internalVisible, setInternalVisible] = useState(false);
   const [computedStyle, setComputedStyle] = useState({});
@@ -2268,8 +2508,8 @@ const Tooltip = ({
     }
     onVisibleChange == null ? void 0 : onVisibleChange(newVisible);
   };
-  useLayoutEffect(() => {
-    if (currentVisible && tooltipRef.current && triggerRef.current) {
+  const updatePosition = useCallback(() => {
+    if (tooltipRef.current && triggerRef.current) {
       const bubbleEl = tooltipRef.current;
       const triggerEl = triggerRef.current;
       const { width: bubbleWidth, height: bubbleHeight } = bubbleEl.getBoundingClientRect();
@@ -2302,7 +2542,24 @@ const Tooltip = ({
         "--wz-tooltip-arrow-left": `${arrowLeft}px`
       });
     }
-  }, [currentVisible]);
+  }, []);
+  useLayoutEffect(() => {
+    if (currentVisible) {
+      updatePosition();
+    }
+  }, [currentVisible, updatePosition]);
+  useEffect(() => {
+    if (!currentVisible) return;
+    const handleScroll = () => {
+      updatePosition();
+    };
+    window.addEventListener("scroll", handleScroll, true);
+    window.addEventListener("resize", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", handleScroll);
+    };
+  }, [currentVisible, updatePosition]);
   const handleWrapperClick = () => {
     if (trigger === "click") {
       handleVisibleChange(!currentVisible);
@@ -2324,17 +2581,17 @@ const Tooltip = ({
   const renderBubble = () => {
     if (!currentVisible) return null;
     const renderAction = () => {
-      if (!action) return null;
-      const originalOnClick = action.props.onClick;
-      const newOnClick = (e) => {
-        originalOnClick == null ? void 0 : originalOnClick(e);
+      if (!actionText) return null;
+      const handleActionClick = (e) => {
+        e.stopPropagation();
+        onAction == null ? void 0 : onAction();
         handleVisibleChange(false);
       };
-      return /* @__PURE__ */ jsx("div", { className: "wz-tooltip-bubble__action-slot", children: React.cloneElement(action, { onClick: newOnClick }) });
+      return /* @__PURE__ */ jsx("div", { className: "wz-tooltip-bubble__action-slot", children: /* @__PURE__ */ jsx("span", { className: "wz-tooltip-bubble__action-btn", onClick: handleActionClick, children: actionText }) });
     };
     const renderCloseIcon = () => {
-      if (!closeIcon) return null;
-      return /* @__PURE__ */ jsx("div", { className: "wz-tooltip-bubble__close-slot", children: React.cloneElement(closeIcon, { onClick: handleClose }) });
+      if (!closable) return null;
+      return /* @__PURE__ */ jsx("div", { className: "wz-tooltip-bubble__close-slot", children: /* @__PURE__ */ jsx("span", { className: "wz-tooltip-bubble__close-btn", onClick: handleClose, children: /* @__PURE__ */ jsx(Icon, { name: "close", type: "yunying" }) }) });
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       showMask && /* @__PURE__ */ jsx("div", { className: "wz-tooltip-mask", onClick: handleClose }),
@@ -2499,6 +2756,7 @@ const ConfigProvider = ({
 };
 export {
   Button,
+  ButtonGroup,
   Card,
   Cascader,
   Cell,