best-unit 1.5.2 → 2.0.1

package/src/components/business/payment-sdk/select-payment/theme.tsx

@@ -0,0 +1,235 @@
+import { Size, Theme, type ThemeConfig } from "@/types";
+import { getInitParams } from "@/utils/business";
+
+function createSelectPaymentThemes() {
+  const size = getInitParams<Size>("size");
+  const base = {
+    left: {
+      background: "#fff",
+      borderRadius: 8,
+      padding: 16,
+      border: "1px solid #E5E6EB",
+    },
+    blockTitle: {
+      fontSize: size === Size.SMALL ? 16 : 18,
+      fontWeight: 700,
+      marginBottom: size === Size.SMALL ? 12 : 16,
+      textAlign: "left",
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+    },
+    titleBar: {
+      width: 3,
+      height: size === Size.SMALL ? 16 : 20,
+      background: "#1890ff",
+      borderRadius: 2,
+    },
+    fieldLabel: {
+      fontSize: size === Size.SMALL ? 14 : 16,
+      marginBottom: 6,
+      fontWeight: 500,
+      textAlign: "left",
+    },
+    required: {
+      color: "#ff4d4f",
+      marginRight: 4,
+    },
+    currencyRow: {
+      display: "flex",
+      gap: 10,
+      flexWrap: "wrap",
+      // 响应式设计
+      "@media (max-width: 600px)": {
+        gap: 8,
+      },
+    },
+    currencyItem: (active: boolean) => ({
+      padding: "6px 12px",
+      borderRadius: 6,
+      border: `1px solid ${active ? "#1890ff" : "#E5E6EB"}`,
+      color: active ? "#1890ff" : "#222",
+      background: active ? "#EEF7FF" : "#fff",
+      cursor: "pointer",
+    }),
+    inputWrapper: { position: "relative" },
+    input: {
+      width: "100%",
+      padding: size === Size.SMALL ? "8px 10px" : "10px 12px",
+      borderRadius: 6,
+      outline: "none",
+      border: "1px solid",
+      boxSizing: "border-box",
+      paddingRight: size === Size.SMALL ? 48 : 64,
+    },
+    inputError: { border: "1px solid #ff4d4f" },
+    inputSuffixAbs: {
+      position: "absolute",
+      top: 0,
+      right: size === Size.SMALL ? 10 : 12,
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      color: "#999",
+      pointerEvents: "none",
+      fontSize: size === Size.SMALL ? 12 : 13,
+    },
+    subTitle: {
+      fontSize: size === Size.SMALL ? 12 : 14,
+      marginTop: size === Size.SMALL ? 10 : 14,
+      marginBottom: size === Size.SMALL ? 8 : 10,
+      textAlign: "left",
+    },
+    methodList: {
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: 10,
+      // 响应式设计
+      "@media (max-width: 600px)": {
+        gridTemplateColumns: "1fr",
+        gap: 8,
+      },
+    },
+    methodItem: (active: boolean) => ({
+      padding: "12px 16px",
+      textAlign: "left",
+      borderRadius: 10,
+      border: `1px solid ${active ? "#1890ff" : "#F0F1F3"}`,
+      background: active ? "#EEF7FF" : "#F7F8FA",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+      minHeight: 44,
+    }),
+    channelIcon: {
+      width: 22,
+      height: 22,
+      objectFit: "contain" as const,
+      marginRight: 8,
+      display: "inline-block",
+    },
+    bankList: {
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: 10,
+      // 响应式设计
+      "@media (max-width: 600px)": {
+        gridTemplateColumns: "1fr",
+        gap: 8,
+      },
+    },
+    bankItem: (active: boolean) => ({
+      padding: "12px 16px",
+      borderRadius: 10,
+      border: `1px solid ${active ? "#1890ff" : "#F0F1F3"}`,
+      background: active ? "#EEF7FF" : "#F7F8FA",
+      textAlign: "left",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+      minHeight: 44,
+    }),
+    error: {
+      color: "#ff4d4f",
+      marginTop: 6,
+      fontSize: size === Size.SMALL ? 12 : 13,
+    },
+  } as const;
+
+  return {
+    white: {
+      ...base,
+      input: {
+        ...base.input,
+        border: "1px solid #E5E6EB",
+        background: "#fff",
+        color: "#222",
+      },
+    },
+    dark: {
+      ...base,
+      left: {
+        background: "#181A20",
+        borderRadius: 8,
+        padding: 16,
+        border: "1px solid #2B2E38",
+      },
+      titleBar: {
+        ...base.titleBar,
+        background: "#00E8C6",
+      },
+      currencyItem: (active: boolean) => ({
+        padding: "6px 12px",
+        borderRadius: 6,
+        border: `1px solid ${active ? "#00E8C6" : "#374151"}`,
+        color: active ? "#00E8C6" : "#fff",
+        background: active ? "#0F2824" : "#23262F",
+        cursor: "pointer",
+      }),
+      input: {
+        ...base.input,
+        border: "1px solid #374151",
+        background: "#23262F",
+        color: "#fff",
+      },
+      methodItem: (active: boolean) => ({
+        padding: "10px 12px",
+        textAlign: "left",
+        borderRadius: 8,
+        border: `1px solid ${active ? "#00E8C6" : "#374151"}`,
+        background: active ? "#0F2824" : "#23262F",
+        color: "#fff",
+        cursor: "pointer",
+      }),
+      bankItem: (active: boolean) => ({
+        padding: "10px 12px",
+        borderRadius: 8,
+        border: `1px solid ${active ? "#00E8C6" : "#374151"}`,
+        background: active ? "#0F2824" : "#23262F",
+        textAlign: "left",
+        color: "#fff",
+        cursor: "pointer",
+      }),
+    },
+  } as const;
+}
+
+export function getSelectPaymentTheme() {
+  const theme = getInitParams<Theme>("theme");
+  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
+  const white = theme === Theme.WHITE;
+  const themes = createSelectPaymentThemes();
+  const base = white ? themes.white : themes.dark;
+
+  if (themeConfig) {
+    const cfg = white ? themeConfig.white : themeConfig.dark;
+    if (cfg?.color) {
+      return {
+        ...base,
+        titleBar: { ...base.titleBar, background: cfg.color },
+        currencyItem: (active: boolean) => ({
+          ...base.currencyItem(active),
+          border: `1px solid ${
+            active ? cfg.color : white ? "#E5E6EB" : "#374151"
+          }`,
+          color: active ? cfg.color : white ? "#222" : "#fff",
+        }),
+        methodItem: (active: boolean) => ({
+          ...base.methodItem(active),
+          border: `1px solid ${
+            active ? cfg.color : white ? "#F0F1F3" : "#374151"
+          }`,
+        }),
+        bankItem: (active: boolean) => ({
+          ...base.bankItem(active),
+          border: `1px solid ${
+            active ? cfg.color : white ? "#F0F1F3" : "#374151"
+          }`,
+        }),
+      } as any;
+    }
+  }
+  return base as any;
+}

package/src/components/common/date-picker/index.tsx

@@ -0,0 +1,338 @@
+import { useState, useRef, useEffect } from "preact/hooks";
+import { t } from "@/local";
+import { getDatePickerTheme } from "./theme";
+
+export interface DatePickerProps {
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  size?: "small" | "middle" | "large";
+  onChange?: (value: string) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  className?: string;
+  style?: Record<string, any>;
+}
+
+export function DatePicker({
+  value = "",
+  placeholder = t("请选择日期"),
+  disabled = false,
+  size = "middle",
+  onChange,
+  onFocus,
+  onBlur,
+  className = "",
+  style = {},
+}: DatePickerProps) {
+  const theme = getDatePickerTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedDate, setSelectedDate] = useState(value);
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+  const [showYearPicker, setShowYearPicker] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // 格式化日期显示
+  const formatDate = (dateStr: string) => {
+    if (!dateStr) return "";
+    const date = new Date(dateStr);
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
+      2,
+      "0"
+    )}-${String(date.getDate()).padStart(2, "0")}`;
+  };
+
+  // 获取月份的天数
+  const getDaysInMonth = (year: number, month: number) => {
+    return new Date(year, month + 1, 0).getDate();
+  };
+
+  // 获取月份第一天是星期几
+  const getFirstDayOfMonth = (year: number, month: number) => {
+    return new Date(year, month, 1).getDay();
+  };
+
+  // 生成日历数据
+  const generateCalendar = () => {
+    const year = currentMonth.getFullYear();
+    const month = currentMonth.getMonth();
+    const daysInMonth = getDaysInMonth(year, month);
+    const firstDay = getFirstDayOfMonth(year, month);
+
+    const days = [];
+
+    // 添加上个月的末尾几天
+    const prevMonth = month === 0 ? 11 : month - 1;
+    const prevYear = month === 0 ? year - 1 : year;
+    const prevMonthDays = getDaysInMonth(prevYear, prevMonth);
+
+    for (let i = firstDay - 1; i >= 0; i--) {
+      days.push({
+        date: prevMonthDays - i,
+        isCurrentMonth: false,
+        isToday: false,
+        isSelected: false,
+        fullDate: `${prevYear}-${String(prevMonth + 1).padStart(
+          2,
+          "0"
+        )}-${String(prevMonthDays - i).padStart(2, "0")}`,
+      });
+    }
+
+    // 添加当前月的天数
+    const today = new Date();
+    const selectedDateObj = selectedDate ? new Date(selectedDate) : null;
+
+    for (let day = 1; day <= daysInMonth; day++) {
+      const fullDate = `${year}-${String(month + 1).padStart(2, "0")}-${String(
+        day
+      ).padStart(2, "0")}`;
+      const dateObj = new Date(fullDate);
+
+      days.push({
+        date: day,
+        isCurrentMonth: true,
+        isToday: dateObj.toDateString() === today.toDateString(),
+        isSelected:
+          selectedDateObj &&
+          dateObj.toDateString() === selectedDateObj.toDateString(),
+        fullDate,
+      });
+    }
+
+    // 添加下个月的开头几天
+    const nextMonth = month === 11 ? 0 : month + 1;
+    const nextYear = month === 11 ? year + 1 : year;
+    const remainingDays = 42 - days.length; // 6行 x 7天 = 42
+
+    for (let day = 1; day <= remainingDays; day++) {
+      days.push({
+        date: day,
+        isCurrentMonth: false,
+        isToday: false,
+        isSelected: false,
+        fullDate: `${nextYear}-${String(nextMonth + 1).padStart(
+          2,
+          "0"
+        )}-${String(day).padStart(2, "0")}`,
+      });
+    }
+
+    return days;
+  };
+
+  // 处理日期选择
+  const handleDateSelect = (fullDate: string) => {
+    setSelectedDate(fullDate);
+    setIsOpen(false);
+    onChange?.(fullDate);
+  };
+
+  // 切换月份
+  const changeMonth = (direction: "prev" | "next") => {
+    const newMonth = new Date(currentMonth);
+    if (direction === "prev") {
+      newMonth.setMonth(newMonth.getMonth() - 1);
+    } else {
+      newMonth.setMonth(newMonth.getMonth() + 1);
+    }
+    setCurrentMonth(newMonth);
+  };
+
+  // 切换年份
+  const changeYear = (direction: "prev" | "next") => {
+    const newMonth = new Date(currentMonth);
+    if (direction === "prev") {
+      newMonth.setFullYear(newMonth.getFullYear() - 1);
+    } else {
+      newMonth.setFullYear(newMonth.getFullYear() + 1);
+    }
+    setCurrentMonth(newMonth);
+  };
+
+  // 选择年份
+  const selectYear = (year: number) => {
+    const newMonth = new Date(currentMonth);
+    newMonth.setFullYear(year);
+    setCurrentMonth(newMonth);
+    setShowYearPicker(false);
+  };
+
+  // 生成年份列表
+  const generateYearList = () => {
+    const currentYear = new Date().getFullYear();
+    const years = [];
+    for (let year = currentYear - 50; year <= currentYear + 50; year++) {
+      years.push(year);
+    }
+    return years;
+  };
+
+  // 点击外部关闭
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+
+  const calendarDays = generateCalendar();
+  const monthNames = [
+    t("一月"),
+    t("二月"),
+    t("三月"),
+    t("四月"),
+    t("五月"),
+    t("六月"),
+    t("七月"),
+    t("八月"),
+    t("九月"),
+    t("十月"),
+    t("十一月"),
+    t("十二月"),
+  ];
+  const weekDays = [
+    t("日"),
+    t("一"),
+    t("二"),
+    t("三"),
+    t("四"),
+    t("五"),
+    t("六"),
+  ];
+
+  return (
+    <div
+      ref={containerRef}
+      className={`date-picker-container ${className}`}
+      style={{ ...theme.container, ...style }}
+    >
+      {/* 输入框 */}
+      <div
+        style={{
+          ...theme.input,
+          ...theme[size],
+          ...(disabled ? theme.disabled : {}),
+        }}
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        onFocus={onFocus}
+        onBlur={onBlur}
+      >
+        <span style={theme.inputText}>
+          {selectedDate ? formatDate(selectedDate) : placeholder}
+        </span>
+        <span style={theme.calendarIcon}>📅</span>
+      </div>
+
+      {/* 日历面板 */}
+      {isOpen && (
+        <div style={theme.panel}>
+          {/* 头部 */}
+          <div style={theme.header}>
+            <button
+              type="button"
+              style={theme.navButton}
+              onClick={() => changeYear("prev")}
+            >
+              ‹‹
+            </button>
+            <button
+              type="button"
+              style={theme.navButton}
+              onClick={() => changeMonth("prev")}
+            >
+              ‹
+            </button>
+            <span
+              style={theme.monthYear}
+              onClick={() => setShowYearPicker(!showYearPicker)}
+            >
+              {currentMonth.getFullYear()}年
+              {monthNames[currentMonth.getMonth()]}
+            </span>
+            <button
+              type="button"
+              style={theme.navButton}
+              onClick={() => changeMonth("next")}
+            >
+              ›
+            </button>
+            <button
+              type="button"
+              style={theme.navButton}
+              onClick={() => changeYear("next")}
+            >
+              ››
+            </button>
+          </div>
+
+          {/* 年份选择器 */}
+          {showYearPicker && (
+            <div style={theme.yearPicker}>
+              <div style={theme.yearGrid}>
+                {generateYearList().map((year) => (
+                  <button
+                    key={year}
+                    type="button"
+                    style={{
+                      ...theme.yearButton,
+                      ...(year === currentMonth.getFullYear()
+                        ? theme.yearSelected
+                        : {}),
+                    }}
+                    onClick={() => selectYear(year)}
+                  >
+                    {year}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* 星期标题 */}
+          <div style={theme.weekHeader}>
+            {weekDays.map((day) => (
+              <div key={day} style={theme.weekDay}>
+                {day}
+              </div>
+            ))}
+          </div>
+
+          {/* 日期网格 */}
+          <div style={theme.calendarGrid}>
+            {calendarDays.map((day, index) => (
+              <button
+                key={index}
+                type="button"
+                style={{
+                  ...theme.dayButton,
+                  ...(day.isCurrentMonth
+                    ? theme.dayCurrentMonth
+                    : theme.dayOtherMonth),
+                  ...(day.isToday ? theme.dayToday : {}),
+                  ...(day.isSelected ? theme.daySelected : {}),
+                }}
+                onClick={() => handleDateSelect(day.fullDate)}
+                disabled={disabled}
+              >
+                {day.date}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default DatePicker;