wz-h5-design 1.0.4 → 1.0.5

package/dist/types/components/GridView/GridView.d.ts

@@ -5,8 +5,16 @@ export interface GridViewItemProps {
     icon?: React.ReactNode;
     /** 文本内容 */
     text?: React.ReactNode;
+    /** 文本颜色 */
+    textColor?: string;
+    /** 文本大小 */
+    textSize?: number | string;
     /** 描述文本 */
     description?: React.ReactNode;
+    /** 描述文本颜色 */
+    descriptionColor?: string;
+    /** 描述文本大小 */
+    descriptionSize?: number | string;
     /** 徽章内容 */
     badge?: React.ReactNode;
     /** 角标内容 */

package/dist/types/components/Input/Input.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import "./Input.scss";
-type InputTypes = "text" | "password" | "textarea" | "number";
+type InputTypes = "text" | "password" | "textarea" | "number" | "code";
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     clearable?: boolean;
     align?: "left" | "center" | "right";
@@ -12,6 +12,16 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     borderRadius?: string;
     backgroundColor?: string;
     bordered?: true;
+    /** 验证码倒计时秒数，默认60秒 */
+    codeCountdown?: number;
+    /** 点击获取验证码回调 */
+    onGetCode?: () => void | Promise<void>;
+    /** 获取验证码按钮文字 */
+    codeText?: string;
+    /** 倒计时中的文字，{s}会被替换为秒数 */
+    codeCountingText?: string;
+    /** 重新获取验证码文字 */
+    codeResendText?: string;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 export {};

package/dist/types/components/Search/Search.d.ts

@@ -11,6 +11,7 @@ export interface SearchProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     suffix?: React.ReactNode;
     leftIcon?: React.ReactNode;
     actionText?: React.ReactNode;
+    actionColor?: string;
     showCancel?: boolean;
     cancelText?: React.ReactNode;
     background?: string;

package/dist/types/components/Tabbar/Tabbar.d.ts

@@ -13,6 +13,8 @@ export interface TabbarItemProps {
     badge?: React.ReactNode;
     /** 将徽标渲染为气泡样式 */
     badgeAsBubble?: boolean;
+    /** 是否只显示小红点（无内容） */
+    dot?: boolean;
     /** 自定义激活状态下图标和文字颜色 */
     activeColor?: string;
     /** 是否为特殊突起按钮 */

package/dist/types/components/Tabs/Tabs.d.ts

@@ -7,7 +7,8 @@ export interface TabPaneProps {
     badge?: ReactNode;
 }
 export interface TabsProps {
-    type?: 'line' | 'card' | 'pills';
+    type?: 'line' | 'card' | 'text';
+    align?: 'center' | 'left';
     value?: number;
     defaultValue?: number;
     onChange?: (index: number) => void;
@@ -18,6 +19,8 @@ export interface TabsProps {
     contentClassName?: string;
     contentStyle?: React.CSSProperties;
     children: ReactNode;
+    /** 最大标签数量，默认5 */
+    maxTabs?: number;
 }
 export declare const TabPane: React.FC<TabPaneProps>;
 export declare const Tabs: React.FC<TabsProps> & {

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -11,7 +11,11 @@ export interface TooltipProps {
     visible?: boolean;
     onVisibleChange?: (visible: boolean) => void;
     showMask?: boolean;
-    action?: React.ReactNode;
-    closeIcon?: React.ReactNode;
+    /** 操作按钮文字 */
+    actionText?: string;
+    /** 操作按钮点击回调 */
+    onAction?: () => void;
+    /** 是否显示关闭按钮 */
+    closable?: boolean;
 }
 export declare const Tooltip: FC<TooltipProps>;

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",
@@ -121,7 +121,7 @@ const ButtonGroup = ({
   height,
   padding = "2px 10px",
   fixed = false,
-  gap = 12,
+  gap = 9,
   className = "",
   style = {},
   children
@@ -356,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;
@@ -379,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)` }
           }
         )
       ]
@@ -438,14 +445,17 @@ var classnames = { exports: {} };
 var classnamesExports = classnames.exports;
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
 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: [
@@ -474,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) => {
@@ -625,6 +635,7 @@ const TabPane = ({ children }) => {
 };
 const Tabs = ({
   type = "line",
+  align = "center",
   value,
   defaultValue = 0,
   onChange,
@@ -634,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] })
   ] });
 };
@@ -1051,7 +1101,7 @@ const Cascader = ({
 const Input = forwardRef(
   ({
     clearable = false,
-    align = "center",
+    align = "left",
     value,
     defaultValue,
     onChange,
@@ -1066,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);
@@ -1096,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;
@@ -1148,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 })
           ] })
         ]
       }
@@ -1238,6 +1330,7 @@ const Search = forwardRef(
     suffix,
     leftIcon = /* @__PURE__ */ jsx(Icon, { name: "search", size: 16 }),
     actionText = "搜索",
+    actionColor,
     showCancel = false,
     cancelText = "返回",
     background,
@@ -1334,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
+                    }
+                  )
                 ] })
               ]
             }
@@ -1925,7 +2025,11 @@ Grid.Item = GridItem;
 const GridViewItem = ({
   icon,
   text,
+  textColor,
+  textSize,
   description,
+  descriptionColor,
+  descriptionSize,
   badge,
   corner,
   onClick,
@@ -1972,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 })
@@ -2367,8 +2491,9 @@ const Tooltip = ({
   visible,
   onVisibleChange,
   showMask = false,
-  action,
-  closeIcon
+  actionText,
+  onAction,
+  closable = false
 }) => {
   const [internalVisible, setInternalVisible] = useState(false);
   const [computedStyle, setComputedStyle] = useState({});
@@ -2383,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();
@@ -2417,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);
@@ -2439,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 }),