@yoka-ui/ui 1.0.1

package/dist/lib/components/YkDateRangePicker/index.module.less

@@ -0,0 +1,304 @@
+/**
+ * YkDateRangePicker 样式 (CSS Modules)
+ *
+ * Less 变量映射：
+ *   @primary-color  → #1890ff
+ *   @error-color    → #ff4d4f
+ *
+ * 命名前缀规则：
+ *   .YkDateRangePicker  → 根容器（CSS Modules 驼峰命名）
+ *   .yoka*                → 组件内部元素（yoka 前缀 + 驼峰命名）
+ */
+
+/* ─── 根容器 ──────────────────────────────────────────────────────────────── */
+
+.YkDateRangePicker {
+  display: inline-block;
+  position: relative;
+}
+
+/* ─── 紧凑 Tag 模式（对应 Vue .preset-picker） ────────────────────────────── */
+
+.yokaCompactTag {
+  display: inline-flex;
+  align-items: center;
+  /* 图标绝对定位后，内容区可以真正居中 */
+  position: relative;
+  min-width: 220px;
+  height: 30px;
+  padding: 0 10px 0 32px; /* 左侧为图标留出空间 */
+  border: 1px solid #1890ff;
+  border-radius: 2px;
+  line-height: 28px;
+  cursor: pointer;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+  white-space: nowrap;
+
+  &:hover {
+    border-color: #66a8ff;
+  }
+}
+
+/* 日历图标：绝对定位固定在左侧，不参与内容排布 */
+.yokaCompactTagIcon {
+  position: absolute;
+  left: 10px;
+  color: #0a6bfd;
+  font-size: 14px;
+}
+
+/* 内容区：flex:1 撑满剩余空间，内容水平居中 */
+.yokaCompactTagContent {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-size: 14px;
+  color: #333;
+}
+
+/* 预设模式：标签名，如「近 5 分钟」 */
+.yokaCompactTagPresetLabel {
+  /* 跟随 __content 的 justify-content:center 即可 */
+}
+
+/* 预设模式：格式化时间，如「(12:00:00 ~ 13:00:00)」 */
+.yokaCompactTagPresetFormat {
+  margin-left: 8px;
+  color: #666;
+}
+
+/* 自定义模式：起止时间项 */
+.yokaCompactTagDatetime {
+  display: inline-block;
+  min-width: 110px;
+  text-align: center;
+}
+
+/* 自定义模式：分隔符「~」 */
+.yokaCompactTagSeparator {
+  display: inline-block;
+  margin: 0 2px;
+}
+
+/* 清空/无值时的 placeholder 文本居中 */
+.yokaCompactTagPlaceholder {
+  color: rgba(0, 0, 0, 0.25);
+  text-align: center;
+  width: 100%;
+  display: block;
+}
+
+/* ─── 完整 RangePicker 包装容器（对应 Vue .date-time-range-picker） ──────── */
+
+.yokaPickerWrapper {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: 30px;
+  gap: 10px;
+  padding-left: 10px;
+  border: 1px solid #e7e7e7;
+  border-radius: 2px;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+  box-sizing: border-box;
+  /* 撑满宽度（当 display: flex 时生效） */
+  width: 100%;
+
+  &:hover {
+    border-color: #66a8ff;
+  }
+
+  /* 包含聚焦状态的 picker 时，模拟 antd focus-ring */
+  &:has(:global(.ant-picker-focused)) {
+    border-color: #66a8ff;
+    box-shadow: 0 0 0 2px rgba(5, 138, 255, 0.06);
+  }
+
+  /* 包含错误状态的 picker 时 */
+  &:has(:global(.ant-picker-status-error)) {
+    border-color: #ff4d4f;
+
+    &:hover,
+    &:has(:global(.ant-picker-focused)) {
+      border-color: #ff4d4f;
+    }
+  }
+
+  /* 无边框 RangePicker：撑满宽度，去除左侧 padding 避免双缩进 */
+  :global(.ant-picker) {
+    width: 100%;
+    padding-left: 0;
+  }
+
+  :global(.ant-picker-borderless) {
+    border: none;
+  }
+}
+
+/* 日历图标 */
+.yokaPickerWrapperIcon {
+  color: #0a6bfd;
+  font-size: 14px;
+}
+
+/* ─── 预设下拉面板：2 列 Grid 布局 ────────────────────────────────────────── */
+
+/*
+ * 需要穿透 antd 在 body 下生成的 .ant-picker-dropdown Portal。
+ * 使用 :global 显式声明全局样式作用域，通过 .yoka-daterangepicker-popup 类名
+ * 限定为仅影响本组件实例的下拉面板，避免全局样式污染。
+ */
+
+:global {
+  .yoka-daterangepicker-popup .ant-picker-panel-layout {
+    .ant-picker-presets {
+      ul {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 10px;
+        align-content: start;
+        padding: 15px 10px 10px 10px !important;
+
+        li {
+          position: relative;
+          width: 100%;
+          min-width: 0;
+          height: 30px;
+          margin-top: 0 !important;
+          margin-bottom: 0;
+          line-height: 30px;
+          text-align: center;
+          border: 1px solid #ededed;
+          border-radius: 2px !important;
+          box-sizing: border-box;
+        }
+
+        .ant-picker-presets-li {
+          position: absolute;
+          font-size: 12px;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+
+          &.ant-picker-presets-li-item {
+            color: #fff;
+            background-color: #3b86f9;
+          }
+        }
+      }
+    }
+  }
+  /* antd 5.x: 快捷预设面板的列表容器 */
+  .yoka-daterangepicker-popup .ant-picker-presets {
+    max-height: none !important;
+    overflow: hidden !important;
+    display: flex !important;
+    flex-direction: column !important;
+  }
+
+  .yoka-daterangepicker-popup .ant-picker-presets li {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+
+  .yoka-daterangepicker-popup .ant-picker-presets ul {
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+    width: auto !important;
+    min-width: 140px !important;
+    max-width: 200px !important;
+    margin: 0 !important;
+    list-style: none !important;
+    overflow: hidden !important;
+    flex-wrap: wrap !important;
+  }
+
+  .yoka-daterangepicker-popup .ant-picker-presets ul li {
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    box-sizing: border-box !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+
+  /* 最后一个预设项不加底部 margin（对应 Vue li:last-of-type 规则） */
+  .yoka-daterangepicker-popup .ant-picker-presets li:last-of-type {
+    margin-bottom: 0 !important;
+  }
+
+  /* 快捷选项底部操作栏行高（缩减后与面板整体协调） */
+  .yoka-daterangepicker-popup .ant-picker-ranges {
+    line-height: 36px;
+    overflow: hidden !important;
+  }
+}
+
+/* ─── 预设列表项自定义样式（对应 Vue .ant-picker-presets-li） ──────────── */
+
+.yokaPresetItem {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  text-align: center;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+  box-sizing: border-box;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 1;
+  outline: none;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px rgba(5, 138, 255, 0.2);
+  }
+}
+
+/* 当前激活（选中）的预设高亮 */
+.yokaPresetItemActive {
+  color: #fff;
+  background-color: #3b86f9;
+
+  &:hover {
+    background-color: #bae7ff;
+  }
+}
+
+/* ─── 禁用状态 ────────────────────────────────────────────────────────── */
+
+.yokaDisabled {
+  pointer-events: none;
+  opacity: 0.5;
+
+  .yokaCompactTag,
+  .yokaPickerWrapper {
+    cursor: not-allowed;
+    border-color: #d9d9d9;
+
+    &:hover {
+      border-color: #d9d9d9;
+    }
+  }
+}

package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.d.ts

@@ -0,0 +1,16 @@
+import { Dayjs } from 'dayjs';
+import React from 'react';
+type DateValue = Dayjs | null;
+type RangeValue = [DateValue, DateValue] | null;
+export interface YkRangeDateWithVSCompareProps {
+    timeType: string;
+    rangeDate: [DateValue, DateValue];
+    originDate: RangeValue;
+    dayLine: number;
+    disableCompare?: boolean;
+    onChange: (value: {
+        rangeDate: RangeValue;
+    }) => void;
+}
+declare const YkRangeDateWithVSCompare: React.FC<YkRangeDateWithVSCompareProps>;
+export default YkRangeDateWithVSCompare;

package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.js

@@ -0,0 +1,223 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.tsx
+var YkRangeDateWithVSCompare_exports = {};
+__export(YkRangeDateWithVSCompare_exports, {
+  default: () => YkRangeDateWithVSCompare_default
+});
+module.exports = __toCommonJS(YkRangeDateWithVSCompare_exports);
+var import_antd = require("antd");
+var import_zh_CN = __toESM(require("antd/es/date-picker/locale/zh_CN"));
+var import_classnames = __toESM(require("classnames"));
+var import_dayjs = __toESM(require("dayjs"));
+var import_react = __toESM(require("react"));
+var import_YkRangeDateWithVSSelect = __toESM(require("./YkRangeDateWithVSSelect"));
+var import_styles = __toESM(require("./styles"));
+var itemCheckIconClass = (className) => {
+  return (0, import_classnames.default)("iconfont", className, import_styles.default.active);
+};
+var shortcutClass = (v) => {
+  return (0, import_classnames.default)(
+    {
+      [import_styles.default.checked]: v
+    },
+    import_styles.default.ykRangeDateWithVsShortcutItem
+  );
+};
+var comparedOptions = [
+  { label: "前一日", value: 1, filter: ["date"] },
+  { label: "前一周", value: 7, filter: ["date", "week"] },
+  { label: "前一月", value: 30, filter: ["date", "week", "month"] },
+  { label: "自定义时间", value: "customize", filter: ["date", "week", "month"] }
+];
+var pickerMap = {
+  按自然周: "week",
+  按自然月: "month",
+  按周: "week",
+  按月: "month"
+};
+var YkRangeDateWithVSCompare = ({
+  timeType,
+  rangeDate,
+  originDate,
+  dayLine,
+  onChange,
+  disableCompare = false
+}) => {
+  const [hasDate, setHasDate] = (0, import_react.useState)(false);
+  const [dateOpen, setDateOpen] = (0, import_react.useState)(false);
+  const [cacheStartTime, setCacheStartTime] = (0, import_react.useState)(null);
+  const [comparedIndex, setComparedIndex] = (0, import_react.useState)(null);
+  const picker = pickerMap[timeType] || "date";
+  const options = comparedOptions.filter((v) => {
+    return v.filter.includes(picker);
+  }).map((v) => ({
+    label: v.label,
+    value: v.value
+  }));
+  (0, import_react.useEffect)(() => {
+    if (rangeDate && rangeDate[0] && rangeDate[1]) {
+      setHasDate(true);
+      setCacheStartTime(rangeDate[0]);
+    }
+  }, [rangeDate]);
+  (0, import_react.useEffect)(() => {
+    if (dateOpen && originDate && originDate[0] && cacheStartTime) {
+      const num = originDate[0].diff(cacheStartTime, "day");
+      setComparedIndex(
+        options.findIndex((v) => {
+          return v.value === num;
+        })
+      );
+    } else {
+      setComparedIndex(null);
+    }
+  }, [dateOpen]);
+  const checkDate = (n) => {
+    const arr = [null, null];
+    if (originDate && originDate[0] && originDate[1]) {
+      arr[0] = (0, import_dayjs.default)(originDate[0]).add(-n, "day");
+      (0, import_dayjs.default)(originDate[1]).add(-n) > (0, import_dayjs.default)().endOf("day") ? arr[1] = (0, import_dayjs.default)(originDate[1]) : arr[1] = (0, import_dayjs.default)(originDate[1]).add(-n, "day");
+    }
+    return arr;
+  };
+  const customFormat = (value) => {
+    const endTime = (0, import_dayjs.default)(value).add(dayLine, "day") > (0, import_dayjs.default)().endOf("day") ? (0, import_dayjs.default)().format("YYYY-MM-DD") : (0, import_dayjs.default)(value).add(dayLine, "day").format("YYYY-MM-DD");
+    return `${(0, import_dayjs.default)(value).format("YYYY-MM-DD")} ~ ${endTime}`;
+  };
+  const dateRender = (panelNode) => {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: import_styles.default.ykRangeDateWithVsGroup }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_styles.default.ykRangeDateWithVsShortcut }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_styles.default.ykRangeDateWithVsShortcutContent }, options.filter((v) => v.value !== "customize").map((v, i) => /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        onClick: () => {
+          const arr = checkDate(Number(v.value));
+          setComparedIndex(i);
+          if (arr[0]) {
+            const endTime = arr[0].add(dayLine, "day") > (0, import_dayjs.default)().endOf("day") ? (0, import_dayjs.default)() : arr[0].add(dayLine, "day");
+            onChange({
+              rangeDate: [arr[0], endTime]
+            });
+          }
+          setDateOpen(false);
+        },
+        key: v.label,
+        className: shortcutClass(comparedIndex === i)
+      },
+      v.label
+    )))), /* @__PURE__ */ import_react.default.createElement("div", null, panelNode));
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: import_styles.default.globalMl }, hasDate ? /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ import_react.default.createElement("i", { className: (0, import_classnames.default)("iconfont icon-duibi", import_styles.default.globalDuibiIcon) }), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(import_styles.default.globalMl, import_styles.default.globalItem, import_styles.default.globalItemChecked) }, /* @__PURE__ */ import_react.default.createElement("i", { className: itemCheckIconClass("") }), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.DatePicker,
+    {
+      locale: import_zh_CN.default,
+      classNames: {
+        popup: {
+          root: import_styles.default.globalItemDatePanel
+        }
+      },
+      getPopupContainer: (triggerNode) => triggerNode.parentNode,
+      disabledDate: (current) => {
+        return current && current > (0, import_dayjs.default)().endOf("day");
+      },
+      picker,
+      value: cacheStartTime,
+      open: dateOpen,
+      placeholder: "开始日期",
+      className: import_styles.default.globalItemDateSingle,
+      variant: "borderless",
+      showNow: false,
+      allowClear: false,
+      suffixIcon: false,
+      panelRender: dateRender,
+      format: customFormat,
+      onChange: (val) => {
+        setCacheStartTime(val);
+        const endTime = val.add(dayLine, "day") > (0, import_dayjs.default)().endOf("day") ? (0, import_dayjs.default)() : val.add(dayLine, "day");
+        onChange({
+          rangeDate: [val, endTime]
+        });
+      },
+      onOpenChange: (flag) => {
+        setDateOpen(flag);
+      }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("div", { className: import_styles.default.globalItemDateDel }, /* @__PURE__ */ import_react.default.createElement(
+    "i",
+    {
+      className: (0, import_classnames.default)("iconfont icon-guanbi2"),
+      onClick: (e) => {
+        e.stopPropagation();
+        onChange({ rangeDate: [null, null] });
+        setHasDate(false);
+        setCacheStartTime(null);
+      }
+    }
+  )))) : /* @__PURE__ */ import_react.default.createElement(
+    import_YkRangeDateWithVSSelect.default,
+    {
+      options,
+      disabled: disableCompare,
+      onChange: (v) => {
+        switch (v.value) {
+          case "customize":
+            setHasDate(true);
+            setDateOpen(true);
+            break;
+          default:
+            const arr = checkDate(Number(v.value));
+            onChange({ rangeDate: arr });
+            break;
+        }
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Tooltip,
+      {
+        placement: "top",
+        title: disableCompare ? "日期对比不支持细分" : picker === "month" ? "实际数据为选择的日期所在月份的整月数据" : null,
+        color: "#fff",
+        styles: {
+          body: {
+            color: "#333"
+          }
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_classnames.default)(import_styles.default.globalMl, import_styles.default.globalItem, disableCompare ? import_styles.default.globalDisabled : "")
+        },
+        /* @__PURE__ */ import_react.default.createElement("i", { className: itemCheckIconClass("icon-jiahao2") }),
+        /* @__PURE__ */ import_react.default.createElement("div", null, "日期对比")
+      )
+    )
+  ));
+};
+var YkRangeDateWithVSCompare_default = YkRangeDateWithVSCompare;
+//# sourceMappingURL=YkRangeDateWithVSCompare.js.map

package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.tsx"],
+  "sourcesContent": ["import type { DatePickerProps } from 'antd';\nimport { DatePicker, Tooltip } from 'antd';\nimport datePickerZhCN from 'antd/es/date-picker/locale/zh_CN';\nimport classNames from 'classnames';\nimport dayjs, { Dayjs } from 'dayjs';\nimport React, { useEffect, useState } from 'react';\nimport YkRangeDateWithVSSelect from './YkRangeDateWithVSSelect';\nimport styles from './styles';\ntype DateValue = Dayjs | null;\ntype RangeValue = [DateValue, DateValue] | null;\ntype optionsType = {\n  label: string;\n  value: number | string;\n  filter: string[];\n};\n\nconst itemCheckIconClass = (className: string) => {\n  return classNames('iconfont', className, styles.active);\n};\nconst shortcutClass = (v: boolean) => {\n  return classNames(\n    {\n      [styles.checked]: v,\n    },\n    styles.ykRangeDateWithVsShortcutItem,\n  );\n};\n\nexport interface YkRangeDateWithVSCompareProps {\n  timeType: string;\n  rangeDate: [DateValue, DateValue];\n  originDate: RangeValue;\n  dayLine: number;\n  disableCompare?: boolean;\n  onChange: (value: { rangeDate: RangeValue }) => void;\n}\n\nconst comparedOptions: optionsType[] = [\n  { label: '前一日', value: 1, filter: ['date'] },\n  { label: '前一周', value: 7, filter: ['date', 'week'] },\n  { label: '前一月', value: 30, filter: ['date', 'week', 'month'] },\n  { label: '自定义时间', value: 'customize', filter: ['date', 'week', 'month'] },\n];\nconst pickerMap: {\n  [key: string]: 'date' | 'week' | 'month';\n} = {\n  按自然周: 'week',\n  按自然月: 'month',\n  按周: 'week',\n  按月: 'month',\n};\n\nconst YkRangeDateWithVSCompare: React.FC<YkRangeDateWithVSCompareProps> = ({\n  timeType,\n  rangeDate,\n  originDate,\n  dayLine,\n  onChange,\n  disableCompare = false,\n}) => {\n  const [hasDate, setHasDate] = useState(false);\n  const [dateOpen, setDateOpen] = useState(false);\n  const [cacheStartTime, setCacheStartTime] = useState<DateValue | null>(null);\n  const [comparedIndex, setComparedIndex] = useState<number | null>(null);\n  const picker = pickerMap[timeType] || 'date';\n  const options = comparedOptions\n    .filter((v) => {\n      return v.filter.includes(picker);\n    })\n    .map((v) => ({\n      label: v.label,\n      value: v.value,\n    }));\n\n  useEffect(() => {\n    if (rangeDate && rangeDate[0] && rangeDate[1]) {\n      setHasDate(true);\n      setCacheStartTime(rangeDate[0]);\n    }\n  }, [rangeDate]);\n\n  useEffect(() => {\n    if (dateOpen && originDate && originDate[0] && cacheStartTime) {\n      const num = originDate[0].diff(cacheStartTime, 'day');\n      setComparedIndex(\n        options.findIndex((v) => {\n          return v.value === num;\n        }),\n      );\n    } else {\n      setComparedIndex(null);\n    }\n  }, [dateOpen]);\n\n  const checkDate = (n: number) => {\n    const arr: [DateValue, DateValue] = [null, null];\n    if (originDate && originDate[0] && originDate[1]) {\n      arr[0] = dayjs(originDate[0]).add(-n, 'day');\n      dayjs(originDate[1]).add(-n) > dayjs().endOf('day')\n        ? (arr[1] = dayjs(originDate[1]))\n        : (arr[1] = dayjs(originDate[1]).add(-n, 'day'));\n    }\n    return arr;\n  };\n\n  const customFormat: DatePickerProps['format'] = (value) => {\n    const endTime =\n      dayjs(value).add(dayLine, 'day') > dayjs().endOf('day')\n        ? dayjs().format('YYYY-MM-DD')\n        : dayjs(value).add(dayLine, 'day').format('YYYY-MM-DD');\n    return `${dayjs(value).format('YYYY-MM-DD')} ~ ${endTime}`;\n  };\n\n  const dateRender = (panelNode: React.ReactNode) => {\n    return (\n      <div className={styles.ykRangeDateWithVsGroup}>\n        <div className={styles.ykRangeDateWithVsShortcut}>\n          <div className={styles.ykRangeDateWithVsShortcutContent}>\n            {options\n              .filter((v) => v.value !== 'customize')\n              .map((v, i) => (\n                <span\n                  onClick={() => {\n                    const arr = checkDate(Number(v.value));\n                    setComparedIndex(i);\n                    if (arr[0]) {\n                      const endTime =\n                        arr[0].add(dayLine, 'day') > dayjs().endOf('day') ? dayjs() : arr[0].add(dayLine, 'day');\n                      onChange({\n                        rangeDate: [arr[0], endTime],\n                      });\n                    }\n                    setDateOpen(false);\n                  }}\n                  key={v.label}\n                  className={shortcutClass(comparedIndex === i)}\n                >\n                  {v.label}\n                </span>\n              ))}\n          </div>\n        </div>\n        <div>{panelNode}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.globalMl}>\n      {hasDate ? (\n        <div style={{ display: 'flex' }}>\n          <i className={classNames('iconfont icon-duibi', styles.globalDuibiIcon)} />\n          <div className={classNames(styles.globalMl, styles.globalItem, styles.globalItemChecked)}>\n            <i className={itemCheckIconClass('')} />\n            <DatePicker\n              locale={datePickerZhCN}\n              classNames={{\n                popup: {\n                  root: styles.globalItemDatePanel,\n                },\n              }}\n              getPopupContainer={(triggerNode) => triggerNode.parentNode as HTMLElement}\n              disabledDate={(current) => {\n                return current && current > dayjs().endOf('day');\n              }}\n              picker={picker}\n              value={cacheStartTime}\n              open={dateOpen}\n              placeholder='开始日期'\n              className={styles.globalItemDateSingle}\n              variant='borderless'\n              showNow={false}\n              allowClear={false}\n              suffixIcon={false}\n              panelRender={dateRender}\n              format={customFormat}\n              onChange={(val) => {\n                setCacheStartTime(val);\n                const endTime = val.add(dayLine, 'day') > dayjs().endOf('day') ? dayjs() : val.add(dayLine, 'day');\n                onChange({\n                  rangeDate: [val, endTime],\n                });\n              }}\n              onOpenChange={(flag: boolean) => {\n                setDateOpen(flag);\n              }}\n            />\n            <div className={styles.globalItemDateDel}>\n              <i\n                className={classNames('iconfont icon-guanbi2')}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onChange({ rangeDate: [null, null] });\n                  setHasDate(false);\n                  setCacheStartTime(null);\n                }}\n              ></i>\n            </div>\n          </div>\n        </div>\n      ) : (\n        <YkRangeDateWithVSSelect\n          options={options}\n          disabled={disableCompare}\n          onChange={(v) => {\n            switch (v.value) {\n              case 'customize':\n                setHasDate(true);\n                setDateOpen(true);\n                // setIsFocus(true);\n                break;\n              default:\n                const arr = checkDate(Number(v.value));\n                onChange({ rangeDate: arr });\n                break;\n            }\n          }}\n        >\n          <Tooltip\n            placement='top'\n            title={\n              disableCompare\n                ? '日期对比不支持细分'\n                : picker === 'month'\n                  ? '实际数据为选择的日期所在月份的整月数据'\n                  : null\n            }\n            color='#fff'\n            styles={{\n              body: {\n                color: '#333',\n              },\n            }}\n          >\n            <div\n              className={classNames(styles.globalMl, styles.globalItem, disableCompare ? styles.globalDisabled : '')}\n            >\n              <i className={itemCheckIconClass('icon-jiahao2')} />\n              <div>日期对比</div>\n            </div>\n          </Tooltip>\n        </YkRangeDateWithVSSelect>\n      )}\n    </div>\n  );\n};\n\nexport default YkRangeDateWithVSCompare;\n"],
+  "mappings": "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",
+  "names": ["classNames", "styles", "dayjs", "React", "datePickerZhCN", "YkRangeDateWithVSSelect"]
+}

package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSRange.d.ts

@@ -0,0 +1,31 @@
+import type { DatePickerProps } from 'antd';
+import { Dayjs } from 'dayjs';
+import React, { type ReactNode } from 'react';
+type DateValue = Dayjs | null;
+type RangeValue = [DateValue, DateValue] | null;
+export type YkRangeDateWithVSRangeProps = {
+    timeType: string;
+    rangeDate: RangeValue;
+    timeOptions: string[];
+    dateCompare: boolean;
+    onChange: (value: {
+        timeType: string;
+        rangeDate: RangeValue;
+    }) => void;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    disabledDate?: DatePickerProps['disabledDate'];
+    presetsOptions?: {
+        label: string;
+        value: () => [Dayjs, Dayjs];
+    }[];
+    /** 1: 运营节点 2: 广告节点 */
+    milestoneFilterType?: 1 | 2;
+    /** 项目节点列表（日历侧栏与日期标记） */
+    milestone?: ProjectNodeItem[];
+    /** 节假日（与里程碑一并用于日期 cell 标记） */
+    holidays?: ProjectNodeItem[];
+    /** 自定义主区间输入框展示文案（string / ReactNode）；传入后默认日期格式文案由覆盖层展示，仍通过面板改期 */
+    rangeDisplayLabel?: ReactNode;
+};
+declare const YkRangeDateWithVSRange: React.FC<YkRangeDateWithVSRangeProps>;
+export default YkRangeDateWithVSRange;