@svton/taro-ui 1.0.0

package/dist/index.mjs

@@ -0,0 +1,680 @@
+// src/components/TabBar/index.tsx
+import React2, { useState, useEffect } from "react";
+import { View, Text } from "@tarojs/components";
+import { usePersistFn } from "@svton/hooks";
+function TabBar(props) {
+  var _a;
+  const {
+    items,
+    activeKey: controlledActiveKey,
+    defaultActiveKey,
+    onChange,
+    className = "",
+    style,
+    indicatorWidth = 48,
+    showIndicator = true,
+    sticky = true
+  } = props;
+  const [internalActiveKey, setInternalActiveKey] = useState(defaultActiveKey || ((_a = items[0]) == null ? void 0 : _a.key));
+  const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey;
+  const activeIndex = items.findIndex((item) => item.key === activeKey);
+  const indicatorLeft = items.length > 0 ? `${(activeIndex + 0.5) * (100 / items.length)}%` : "50%";
+  const handleTabChange = usePersistFn((key, disabled) => {
+    if (disabled) return;
+    if (controlledActiveKey === void 0) {
+      setInternalActiveKey(key);
+    }
+    onChange == null ? void 0 : onChange(key);
+  });
+  useEffect(() => {
+    if (controlledActiveKey !== void 0) {
+      setInternalActiveKey(controlledActiveKey);
+    }
+  }, [controlledActiveKey]);
+  return /* @__PURE__ */ React2.createElement(View, { className: `svton-tab-bar ${sticky ? "sticky" : ""} ${className}`, style }, /* @__PURE__ */ React2.createElement(View, { className: "svton-tab-bar__list" }, items.map((item) => /* @__PURE__ */ React2.createElement(
+    View,
+    {
+      key: item.key,
+      className: `svton-tab-bar__item ${activeKey === item.key ? "active" : ""} ${item.disabled ? "disabled" : ""}`,
+      onClick: () => handleTabChange(item.key, item.disabled)
+    },
+    item.render ? item.render() : /* @__PURE__ */ React2.createElement(Text, { className: "svton-tab-bar__text" }, item.label)
+  ))), showIndicator && items.length > 0 && /* @__PURE__ */ React2.createElement(View, { className: "svton-tab-bar__indicator-wrapper" }, /* @__PURE__ */ React2.createElement(
+    View,
+    {
+      className: "svton-tab-bar__indicator",
+      style: {
+        left: indicatorLeft,
+        width: `${indicatorWidth}px`,
+        marginLeft: `-${indicatorWidth / 2}px`
+      }
+    }
+  )));
+}
+
+// src/components/Button/index.tsx
+import React3 from "react";
+import { View as View2, Text as Text2 } from "@tarojs/components";
+import { usePersistFn as usePersistFn2 } from "@svton/hooks";
+function Button(props) {
+  const {
+    type = "default",
+    size = "medium",
+    loading = false,
+    disabled = false,
+    block = false,
+    children,
+    className = "",
+    style,
+    onClick
+  } = props;
+  const handleClick = usePersistFn2(() => {
+    if (disabled || loading) return;
+    onClick == null ? void 0 : onClick();
+  });
+  return /* @__PURE__ */ React3.createElement(
+    View2,
+    {
+      className: `svton-button svton-button--${type} svton-button--${size} ${block ? "svton-button--block" : ""} ${disabled ? "svton-button--disabled" : ""} ${loading ? "svton-button--loading" : ""} ${className}`,
+      style,
+      onClick: handleClick
+    },
+    loading && /* @__PURE__ */ React3.createElement(View2, { className: "svton-button__loading" }, /* @__PURE__ */ React3.createElement(Text2, { className: "svton-button__loading-icon" }, "\u23F3")),
+    /* @__PURE__ */ React3.createElement(Text2, { className: "svton-button__text" }, children)
+  );
+}
+
+// src/components/List/index.tsx
+import React4 from "react";
+import { View as View3, ScrollView, Text as Text3 } from "@tarojs/components";
+import Taro, { usePullDownRefresh, useReachBottom } from "@tarojs/taro";
+function List(props) {
+  const {
+    data,
+    renderItem,
+    keyExtractor = (_, index) => String(index),
+    loading = false,
+    hasMore = true,
+    onRefresh,
+    onLoadMore,
+    renderEmpty,
+    emptyText = "\u6682\u65E0\u6570\u636E",
+    loadingText = "\u52A0\u8F7D\u4E2D...",
+    noMoreText = "\u6CA1\u6709\u66F4\u591A\u4E86",
+    className = "",
+    style,
+    enableRefresh = true,
+    enableLoadMore = true,
+    header,
+    footer
+  } = props;
+  usePullDownRefresh(async () => {
+    if (!enableRefresh || !onRefresh) {
+      Taro.stopPullDownRefresh();
+      return;
+    }
+    try {
+      await (onRefresh == null ? void 0 : onRefresh());
+    } finally {
+      Taro.stopPullDownRefresh();
+    }
+  });
+  useReachBottom(async () => {
+    if (!enableLoadMore || !hasMore || loading || !onLoadMore) return;
+    await (onLoadMore == null ? void 0 : onLoadMore());
+  });
+  const renderEmptyContent = () => {
+    if (renderEmpty) {
+      return renderEmpty();
+    }
+    return /* @__PURE__ */ React4.createElement(View3, { className: "svton-list__empty" }, /* @__PURE__ */ React4.createElement(Text3, { className: "svton-list__empty-text" }, emptyText));
+  };
+  const renderLoadingTip = () => {
+    if (!loading && !hasMore) {
+      return /* @__PURE__ */ React4.createElement(View3, { className: "svton-list__tip svton-list__tip--no-more" }, /* @__PURE__ */ React4.createElement(Text3, null, noMoreText));
+    }
+    if (loading && data.length > 0) {
+      return /* @__PURE__ */ React4.createElement(View3, { className: "svton-list__tip svton-list__tip--loading" }, /* @__PURE__ */ React4.createElement(Text3, null, loadingText));
+    }
+    return null;
+  };
+  return /* @__PURE__ */ React4.createElement(ScrollView, { className: `svton-list ${className}`, style, scrollY: true, enableBackToTop: true }, header && /* @__PURE__ */ React4.createElement(View3, { className: "svton-list__header" }, header), data.length === 0 && !loading ? renderEmptyContent() : /* @__PURE__ */ React4.createElement(View3, { className: "svton-list__content" }, data.map((item, index) => /* @__PURE__ */ React4.createElement(View3, { key: keyExtractor(item, index), className: "svton-list__item" }, renderItem(item, index)))), renderLoadingTip(), footer && /* @__PURE__ */ React4.createElement(View3, { className: "svton-list__footer" }, footer));
+}
+
+// src/components/NavBar/index.tsx
+import React6, { useEffect as useEffect3, useState as useState3 } from "react";
+import { View as View5, Text as Text4, Image } from "@tarojs/components";
+import Taro3 from "@tarojs/taro";
+
+// src/utils/systemInfo.ts
+import Taro2 from "@tarojs/taro";
+var SystemInfoManager = class {
+  info = null;
+  async init() {
+    try {
+      const systemInfo = await Taro2.getSystemInfo();
+      const statusBarHeight = systemInfo.statusBarHeight || 44;
+      const windowWidth = systemInfo.windowWidth || 375;
+      const windowHeight = systemInfo.windowHeight || 667;
+      const safeArea = systemInfo.safeArea || {
+        top: statusBarHeight,
+        right: windowWidth,
+        bottom: windowHeight,
+        left: 0
+      };
+      const safeAreaInsets = {
+        top: safeArea.top,
+        right: windowWidth - safeArea.right,
+        bottom: windowHeight - safeArea.bottom,
+        left: safeArea.left
+      };
+      let menuButton;
+      let navBarHeight = statusBarHeight + 44;
+      try {
+        if (Taro2.getEnv() === Taro2.ENV_TYPE.WEAPP) {
+          menuButton = Taro2.getMenuButtonBoundingClientRect();
+          navBarHeight = menuButton.bottom + (menuButton.top - statusBarHeight);
+        }
+      } catch (e) {
+        console.warn("\u83B7\u53D6\u80F6\u56CA\u6309\u94AE\u4FE1\u606F\u5931\u8D25", e);
+      }
+      this.info = {
+        statusBarHeight,
+        safeAreaInsets,
+        menuButton,
+        navBarHeight,
+        windowWidth,
+        windowHeight
+      };
+      this.setCSSVariables();
+      console.log("\u7CFB\u7EDF\u4FE1\u606F\u521D\u59CB\u5316\u6210\u529F:", this.info);
+      return this.info;
+    } catch (error) {
+      console.error("\u83B7\u53D6\u7CFB\u7EDF\u4FE1\u606F\u5931\u8D25", error);
+      this.info = {
+        statusBarHeight: 44,
+        safeAreaInsets: { top: 44, right: 0, bottom: 0, left: 0 },
+        navBarHeight: 88,
+        windowWidth: 375,
+        windowHeight: 667
+      };
+      this.setCSSVariables();
+      return this.info;
+    }
+  }
+  setCSSVariables() {
+    if (!this.info) return;
+    try {
+      if (typeof document !== "undefined" && document.documentElement) {
+        const root = document.documentElement;
+        root.style.setProperty("--status-bar-height", `${this.info.statusBarHeight}px`);
+        root.style.setProperty("--safe-area-top", `${this.info.safeAreaInsets.top}px`);
+        root.style.setProperty("--safe-area-right", `${this.info.safeAreaInsets.right}px`);
+        root.style.setProperty("--safe-area-bottom", `${this.info.safeAreaInsets.bottom}px`);
+        root.style.setProperty("--safe-area-left", `${this.info.safeAreaInsets.left}px`);
+        root.style.setProperty("--nav-bar-height", `${this.info.navBarHeight}px`);
+        if (this.info.menuButton) {
+          root.style.setProperty("--menu-button-width", `${this.info.menuButton.width}px`);
+          root.style.setProperty("--menu-button-height", `${this.info.menuButton.height}px`);
+          root.style.setProperty("--menu-button-top", `${this.info.menuButton.top}px`);
+          root.style.setProperty("--menu-button-right", `${this.info.menuButton.right}px`);
+          root.style.setProperty("--menu-button-bottom", `${this.info.menuButton.bottom}px`);
+          root.style.setProperty("--menu-button-left", `${this.info.menuButton.left}px`);
+        }
+        console.log("CSS \u53D8\u91CF\u8BBE\u7F6E\u6210\u529F");
+      }
+    } catch (e) {
+      console.warn("\u8BBE\u7F6E CSS \u53D8\u91CF\u5931\u8D25", e);
+    }
+  }
+  getInfo() {
+    return this.info;
+  }
+  getStatusBarHeight() {
+    var _a;
+    return ((_a = this.info) == null ? void 0 : _a.statusBarHeight) || 44;
+  }
+  getNavBarHeight() {
+    var _a;
+    return ((_a = this.info) == null ? void 0 : _a.navBarHeight) || 88;
+  }
+  getSafeAreaInsets() {
+    var _a;
+    return ((_a = this.info) == null ? void 0 : _a.safeAreaInsets) || { top: 44, right: 0, bottom: 0, left: 0 };
+  }
+};
+var systemInfoManager = new SystemInfoManager();
+
+// src/components/StatusBar/index.tsx
+import React5, { useEffect as useEffect2, useState as useState2 } from "react";
+import { View as View4 } from "@tarojs/components";
+function StatusBar({ backgroundColor, className = "" }) {
+  const [height, setHeight] = useState2(44);
+  useEffect2(() => {
+    const info = systemInfoManager.getInfo();
+    if (info) {
+      setHeight(info.statusBarHeight);
+    }
+  }, []);
+  return /* @__PURE__ */ React5.createElement(
+    View4,
+    {
+      className: `status-bar ${className}`,
+      style: {
+        height: `${height}px`,
+        backgroundColor: backgroundColor || "transparent"
+      }
+    }
+  );
+}
+
+// src/components/NavBar/index.tsx
+var BACK_ICON_SVG = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTUgMThMOSAxMkwxNSA2IiBzdHJva2U9IiMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=";
+function CustomNavBar({
+  title = "",
+  showBack = false,
+  showClose = false,
+  backgroundColor = "#ffffff",
+  textColor = "#333333",
+  onBack,
+  onClose,
+  rightContent,
+  fixed = false,
+  scrollOpacity = 1
+}) {
+  const [navBarContentHeight, setNavBarContentHeight] = useState3(44);
+  const [statusBarHeight, setStatusBarHeight] = useState3(44);
+  const [menuButtonLeft, setMenuButtonLeft] = useState3(0);
+  const getBackgroundColor = () => {
+    if (scrollOpacity >= 1) {
+      return backgroundColor;
+    }
+    const hex = backgroundColor.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${scrollOpacity})`;
+  };
+  useEffect3(() => {
+    const info = systemInfoManager.getInfo();
+    if (info) {
+      setNavBarContentHeight(info.navBarHeight - info.statusBarHeight);
+      setStatusBarHeight(info.statusBarHeight);
+      if (info.menuButton) {
+        setMenuButtonLeft(info.menuButton.left);
+      }
+    }
+  }, []);
+  const handleBack = () => {
+    if (onBack) {
+      onBack();
+    } else {
+      const pages = Taro3.getCurrentPages();
+      if (pages.length > 1) {
+        Taro3.navigateBack().catch((err) => {
+          console.warn("\u8FD4\u56DE\u5931\u8D25:", err);
+          Taro3.switchTab({ url: "/pages/index/index" }).catch(() => {
+            console.error("\u8DF3\u8F6C\u9996\u9875\u5931\u8D25");
+          });
+        });
+      } else {
+        Taro3.switchTab({ url: "/pages/index/index" }).catch(() => {
+          console.error("\u8DF3\u8F6C\u9996\u9875\u5931\u8D25");
+        });
+      }
+    }
+  };
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    } else {
+      const pages = Taro3.getCurrentPages();
+      if (pages.length > 1) {
+        Taro3.navigateBack().catch((err) => {
+          console.warn("\u5173\u95ED\u5931\u8D25:", err);
+          Taro3.switchTab({ url: "/pages/index/index" }).catch(() => {
+            console.error("\u8DF3\u8F6C\u9996\u9875\u5931\u8D25");
+          });
+        });
+      } else {
+        Taro3.switchTab({ url: "/pages/index/index" }).catch(() => {
+          console.error("\u8DF3\u8F6C\u9996\u9875\u5931\u8D25");
+        });
+      }
+    }
+  };
+  const getRightSafeDistance = () => {
+    if (menuButtonLeft > 0) {
+      const info = systemInfoManager.getInfo();
+      if (info) {
+        return info.windowWidth - menuButtonLeft + 8;
+      }
+    }
+    return 100;
+  };
+  const navBarClass = `custom-nav-bar ${fixed ? "fixed" : ""}`;
+  const actualBgColor = getBackgroundColor();
+  const totalHeight = statusBarHeight + navBarContentHeight;
+  const navBarContent = /* @__PURE__ */ React6.createElement(View5, { className: navBarClass, style: { backgroundColor: actualBgColor } }, /* @__PURE__ */ React6.createElement(StatusBar, { backgroundColor: actualBgColor }), /* @__PURE__ */ React6.createElement(
+    View5,
+    {
+      className: "nav-bar-content",
+      style: {
+        height: `${navBarContentHeight}px`,
+        backgroundColor: actualBgColor
+      }
+    },
+    (showBack || showClose) && /* @__PURE__ */ React6.createElement(View5, { className: "nav-left" }, showBack && /* @__PURE__ */ React6.createElement(View5, { className: "nav-btn", onClick: handleBack }, /* @__PURE__ */ React6.createElement(
+      Image,
+      {
+        className: "nav-icon-img back-icon-img",
+        src: BACK_ICON_SVG,
+        mode: "aspectFit"
+      }
+    )), showClose && /* @__PURE__ */ React6.createElement(View5, { className: "nav-btn", onClick: handleClose }, /* @__PURE__ */ React6.createElement(Text4, { className: "nav-icon close-icon", style: { color: textColor } }, "\u2715"))),
+    title && /* @__PURE__ */ React6.createElement(View5, { className: "nav-title" }, /* @__PURE__ */ React6.createElement(Text4, { className: "title-text", style: { color: textColor } }, title)),
+    rightContent && /* @__PURE__ */ React6.createElement(View5, { className: "nav-right", style: { right: `${getRightSafeDistance()}px` } }, rightContent)
+  ));
+  if (fixed) {
+    return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+      View5,
+      {
+        className: "nav-bar-placeholder",
+        style: { height: `${totalHeight}px` }
+      }
+    ), navBarContent);
+  }
+  return navBarContent;
+}
+
+// src/components/ImageUploader/index.tsx
+import React7, { useState as useState4 } from "react";
+import { View as View6, Image as Image2 } from "@tarojs/components";
+import Taro4 from "@tarojs/taro";
+function ImageUploader({
+  value = [],
+  onChange,
+  maxCount = 9,
+  uploadUrl = process.env.TARO_APP_API + "/upload/image"
+}) {
+  const [uploading, setUploading] = useState4(false);
+  const handleChooseImage = async () => {
+    try {
+      const res = await Taro4.chooseImage({
+        count: maxCount - value.length,
+        sizeType: ["compressed"],
+        sourceType: ["album", "camera"]
+      });
+      setUploading(true);
+      const uploadPromises = res.tempFilePaths.map(async (filePath) => {
+        const token = Taro4.getStorageSync("token");
+        const uploadRes = await Taro4.uploadFile({
+          url: uploadUrl,
+          filePath,
+          name: "file",
+          header: {
+            Authorization: `Bearer ${token}`
+          }
+        });
+        const data = JSON.parse(uploadRes.data);
+        return data.url;
+      });
+      const urls = await Promise.all(uploadPromises);
+      const newImages = [...value, ...urls];
+      onChange == null ? void 0 : onChange(newImages);
+      Taro4.showToast({
+        title: "\u4E0A\u4F20\u6210\u529F",
+        icon: "success"
+      });
+    } catch (error) {
+      Taro4.showToast({
+        title: error.errMsg || "\u4E0A\u4F20\u5931\u8D25",
+        icon: "none"
+      });
+    } finally {
+      setUploading(false);
+    }
+  };
+  const handlePreview = (index) => {
+    Taro4.previewImage({
+      urls: value,
+      current: value[index]
+    });
+  };
+  const handleDelete = (index) => {
+    Taro4.showModal({
+      title: "\u63D0\u793A",
+      content: "\u786E\u5B9A\u5220\u9664\u8FD9\u5F20\u56FE\u7247\u5417\uFF1F",
+      success: (res) => {
+        if (res.confirm) {
+          const newImages = value.filter((_, i) => i !== index);
+          onChange == null ? void 0 : onChange(newImages);
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ React7.createElement(View6, { className: "image-uploader" }, /* @__PURE__ */ React7.createElement(View6, { className: "image-list" }, value.map((url, index) => /* @__PURE__ */ React7.createElement(View6, { key: index, className: "image-item" }, /* @__PURE__ */ React7.createElement(
+    Image2,
+    {
+      src: url,
+      mode: "aspectFill",
+      className: "image",
+      onClick: () => handlePreview(index)
+    }
+  ), /* @__PURE__ */ React7.createElement(View6, { className: "delete-btn", onClick: () => handleDelete(index) }, "\xD7"))), value.length < maxCount && /* @__PURE__ */ React7.createElement(
+    View6,
+    {
+      className: `add-btn ${uploading ? "disabled" : ""}`,
+      onClick: uploading ? void 0 : handleChooseImage
+    },
+    uploading ? /* @__PURE__ */ React7.createElement(View6, { className: "loading" }, "\u4E0A\u4F20\u4E2D...") : /* @__PURE__ */ React7.createElement(View6, { className: "add-icon" }, "+")
+  )), /* @__PURE__ */ React7.createElement(View6, { className: "tip" }, "\u6700\u591A\u4E0A\u4F20 ", maxCount, " \u5F20\u56FE\u7247"));
+}
+
+// src/components/ImageGrid/index.tsx
+import React8 from "react";
+import { View as View7, Image as Image3 } from "@tarojs/components";
+import Taro5 from "@tarojs/taro";
+function ImageGrid({ images, maxCount = 9, onImageClick }) {
+  const displayImages = images.slice(0, maxCount);
+  const count = displayImages.length;
+  const getGridClass = () => {
+    if (count === 1) return "grid-single";
+    if (count === 2 || count === 4) return "grid-2";
+    return "grid-3";
+  };
+  const handleImageClick = (index) => {
+    if (onImageClick) {
+      onImageClick(index);
+    } else {
+      Taro5.previewImage({
+        urls: images,
+        current: images[index]
+      });
+    }
+  };
+  return /* @__PURE__ */ React8.createElement(View7, { className: `image-grid ${getGridClass()}` }, displayImages.map((url, index) => /* @__PURE__ */ React8.createElement(View7, { key: index, className: "image-item", onClick: () => handleImageClick(index) }, /* @__PURE__ */ React8.createElement(
+    Image3,
+    {
+      src: url,
+      mode: count === 1 ? "widthFix" : "aspectFill",
+      className: "image",
+      lazyLoad: true
+    }
+  ), index === maxCount - 1 && images.length > maxCount && /* @__PURE__ */ React8.createElement(View7, { className: "image-overlay" }, /* @__PURE__ */ React8.createElement(View7, { className: "image-count" }, "+", images.length - maxCount + 1)))));
+}
+
+// src/components/Tabs/index.tsx
+import { View as View8, Text as Text5 } from "@tarojs/components";
+function Tabs({ activeKey, items, onChange, className = "" }) {
+  const handleItemClick = (e) => {
+    const key = e.currentTarget.dataset.key;
+    if (key && key !== activeKey) {
+      onChange(key);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(View8, { className: `svton-tabs ${className}` }, items.map((item) => /* @__PURE__ */ React.createElement(
+    View8,
+    {
+      key: item.key,
+      "data-key": item.key,
+      className: `svton-tabs__item ${activeKey === item.key ? "svton-tabs__item--active" : ""}`,
+      onClick: handleItemClick
+    },
+    /* @__PURE__ */ React.createElement(Text5, { className: "svton-tabs__label" }, item.label),
+    item.count !== void 0 && /* @__PURE__ */ React.createElement(Text5, { className: "svton-tabs__count" }, "(", item.count, ")")
+  )));
+}
+var Tabs_default = Tabs;
+
+// src/components/ContentActionBar/index.tsx
+import React9, { useState as useState5 } from "react";
+import { View as View9, Text as Text6, Textarea, Image as Image4 } from "@tarojs/components";
+var ICONS = {
+  // 点赞图标（未点赞） - 空心心形
+  like: "https://miaoduo.fbcontent.cn/private/resource/image/19a9ba374ebbee0-0aa9c734-e868-4861-9bfd-37de7ed3a123.svg",
+  // 点赞图标（已点赞） - 实心红色心形
+  liked: "https://miaoduo.fbcontent.cn/private/resource/image/19a9d0909e270e7-fdf153f2-b3d2-4800-a63a-213c242beed8.svg",
+  // 收藏图标（未收藏） - 星形
+  favorite: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTIgMi41TDE1LjA5IDguMjZMMjEuMTggOS4yN0wxNi41OSAxMy45N0wxNy42NCAyMEwxMiAxNy4yN0w2LjM2IDIwTDcuNDEgMTMuOTdMMi44MiA5LjI3TDguOTEgOC4yNkwxMiAyLjV6IiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+",
+  // 收藏图标（已收藏） - 金黄色星形
+  favorited: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTIgMi41TDE1LjA5IDguMjZMMjEuMTggOS4yN0wxNi41OSAxMy45N0wxNy42NCAyMEwxMiAxNy4yN0w2LjM2IDIwTDcuNDEgMTMuOTdMMi44MiA5LjI3TDguOTEgOC4yNkwxMiAyLjV6IiBmaWxsPSIjRkZDQzAwIiBzdHJva2U9IiNGRkNDMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+",
+  // 分享图标
+  share: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIxOCIgY3k9IjUiIHI9IjMiIHN0cm9rZT0iIzMzMyIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KICA8Y2lyY2xlIGN4PSI2IiBjeT0iMTIiIHI9IjMiIHN0cm9rZT0iIzMzMyIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KICA8Y2lyY2xlIGN4PSIxOCIgY3k9IjE5IiByPSIzIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41Ii8+CiAgPHBhdGggZD0iTTguNTkgMTMuNTFMMTUuNDIgMTcuNDlNMTUuNDEgNi41MUw4LjU5IDEwLjQ5IiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41Ii8+Cjwvc3ZnPg=="
+};
+function ContentActionBar({
+  onComment,
+  onLike,
+  onFavorite,
+  onShare,
+  liked = false,
+  favorited = false,
+  placeholder = "\u8BF4\u70B9\u4EC0\u4E48...",
+  maxLength = 500,
+  disabled = false
+}) {
+  const [isExpanded, setIsExpanded] = useState5(false);
+  const [inputValue, setInputValue] = useState5("");
+  const [submitting, setSubmitting] = useState5(false);
+  const handleExpand = () => {
+    if (disabled) return;
+    setIsExpanded(true);
+  };
+  const handleCollapse = () => {
+    setIsExpanded(false);
+    setInputValue("");
+  };
+  const handleSubmit = async () => {
+    if (!inputValue.trim() || submitting || disabled) return;
+    setSubmitting(true);
+    try {
+      await (onComment == null ? void 0 : onComment(inputValue.trim()));
+      handleCollapse();
+    } catch (error) {
+      console.error("\u8BC4\u8BBA\u5931\u8D25:", error);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const handleLike = (e) => {
+    e.stopPropagation();
+    if (disabled) return;
+    onLike == null ? void 0 : onLike();
+  };
+  const handleFavorite = (e) => {
+    e.stopPropagation();
+    if (disabled) return;
+    onFavorite == null ? void 0 : onFavorite();
+  };
+  const handleShare = (e) => {
+    e.stopPropagation();
+    if (disabled) return;
+    onShare == null ? void 0 : onShare();
+  };
+  return /* @__PURE__ */ React9.createElement(View9, { className: "content-action-bar" }, !isExpanded ? (
+    // 收起状态：输入框占位 + 操作按钮
+    /* @__PURE__ */ React9.createElement(View9, { className: "action-bar-collapsed" }, /* @__PURE__ */ React9.createElement(View9, { className: "input-placeholder", onClick: handleExpand }, /* @__PURE__ */ React9.createElement(Text6, { className: "placeholder-text" }, placeholder)), /* @__PURE__ */ React9.createElement(View9, { className: "action-buttons" }, /* @__PURE__ */ React9.createElement(
+      View9,
+      {
+        className: `action-btn ${liked ? "active" : ""}`,
+        onClick: handleLike
+      },
+      /* @__PURE__ */ React9.createElement(
+        Image4,
+        {
+          className: `action-icon-img ${liked ? "liked" : ""}`,
+          src: liked ? ICONS.liked : ICONS.like,
+          mode: "aspectFit"
+        }
+      )
+    ), /* @__PURE__ */ React9.createElement(
+      View9,
+      {
+        className: `action-btn ${favorited ? "active" : ""}`,
+        onClick: handleFavorite
+      },
+      /* @__PURE__ */ React9.createElement(
+        Image4,
+        {
+          className: `action-icon-img ${favorited ? "favorited" : ""}`,
+          src: favorited ? ICONS.favorited : ICONS.favorite,
+          mode: "aspectFit"
+        }
+      )
+    ), /* @__PURE__ */ React9.createElement(View9, { className: "action-btn", onClick: handleShare }, /* @__PURE__ */ React9.createElement(
+      Image4,
+      {
+        className: "action-icon-img",
+        src: ICONS.share,
+        mode: "aspectFit"
+      }
+    ))))
+  ) : (
+    // 展开状态：多行输入框 + 发送按钮
+    /* @__PURE__ */ React9.createElement(View9, { className: "action-bar-expanded" }, /* @__PURE__ */ React9.createElement(
+      Textarea,
+      {
+        className: "comment-textarea",
+        value: inputValue,
+        onInput: (e) => setInputValue(e.detail.value),
+        placeholder,
+        maxlength: maxLength,
+        autoHeight: true,
+        focus: true,
+        disabled
+      }
+    ), /* @__PURE__ */ React9.createElement(View9, { className: "expanded-actions" }, /* @__PURE__ */ React9.createElement(Text6, { className: "char-count" }, inputValue.length, "/", maxLength), /* @__PURE__ */ React9.createElement(View9, { className: "action-btns" }, /* @__PURE__ */ React9.createElement(View9, { className: "cancel-btn", onClick: handleCollapse }, /* @__PURE__ */ React9.createElement(Text6, { className: "btn-text" }, "\u53D6\u6D88")), /* @__PURE__ */ React9.createElement(
+      View9,
+      {
+        className: `send-btn ${inputValue.trim() && !submitting ? "active" : "disabled"}`,
+        onClick: handleSubmit
+      },
+      /* @__PURE__ */ React9.createElement(Text6, { className: "btn-text" }, submitting ? "\u53D1\u9001\u4E2D..." : "\u53D1\u9001")
+    ))))
+  ));
+}
+
+// src/hooks/useScrollOpacity.ts
+import { useState as useState6, useCallback } from "react";
+function useScrollOpacity(threshold = 200) {
+  const [scrollOpacity, setScrollOpacity] = useState6(1);
+  const handleScroll = useCallback((scrollTop) => {
+    const opacity = Math.max(1 - scrollTop / threshold, 0);
+    setScrollOpacity(opacity);
+  }, [threshold]);
+  return [scrollOpacity, handleScroll];
+}
+export {
+  Button,
+  ContentActionBar,
+  ImageGrid,
+  ImageUploader,
+  List,
+  CustomNavBar as NavBar,
+  StatusBar,
+  TabBar,
+  Tabs,
+  Tabs_default as TabsDefault,
+  systemInfoManager,
+  useScrollOpacity
+};