@blueking/date-picker 2.0.0-beta.8 → 3.0.0-beta.1

package/vue3/index.es.min.js

@@ -1,36 +1,43 @@
-var se = Object.defineProperty;
-var ce = (l, a, i) => a in l ? se(l, a, { enumerable: !0, configurable: !0, writable: !0, value: i }) : l[a] = i;
-var na = (l, a, i) => (ce(l, typeof a != "symbol" ? a + "" : a, i), i);
-import d from "dayjs";
-import { default as ni } from "dayjs";
-import Oa from "dayjs/plugin/customParseFormat";
-import ue from "dayjs/plugin/localizedFormat";
-import qa from "dayjs/plugin/timezone";
-import Fa from "dayjs/plugin/utc";
-import { provide as oe, inject as de, defineComponent as X, openBlock as p, createElementBlock as z, createVNode as E, unref as t, withCtx as j, Fragment as U, renderList as q, createBlock as K, createCommentVNode as sa, createTextVNode as G, toDisplayString as k, shallowRef as Q, watch as ma, createElementVNode as v, normalizeClass as da, withModifiers as Ga, ref as L, computed as J, normalizeStyle as Ja, withDirectives as fa, withKeys as ja, mergeProps as Ya, KeepAlive as me, resolveDynamicComponent as he, vShow as ve, onBeforeUnmount as be } from "vue";
-import { Tab as Ba, PopConfirm as fe, Popover as ca, Button as wa, Checkbox as pe, Select as Z, Input as Za, Exception as Ae, provideGlobalConfig as ge } from "bkui-vue";
-import { clickoutside as Aa } from "bkui-vue/lib/directives";
-import { Del as xe, AngleDoubleLeft as Ie, AngleLeft as Wa, AngleRight as Qa, AngleDoubleRight as ke, Close as ye } from "bkui-vue/lib/icon";
-import "bkui-vue/lib/styles/reset.css";
-import _e from "dayjs/locale/en";
-import we from "dayjs/locale/zh-cn";
-const De = (l) => {
-  const a = document.cookie.match(new RegExp(`(^| )${l}=([^;]*)(;|$)`));
-  return a ? a[2] : "";
-}, Me = {
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import dayjs from "dayjs";
+import { default as default2 } from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import tz from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+import { defineComponent, useAttrs, useSlots, openBlock, createBlock, resolveDynamicComponent, h, renderSlot, effectScope, getCurrentScope, onScopeDispose, provide, inject, createElementBlock, createVNode, unref, withCtx, Fragment, renderList, ref, customRef, normalizeClass, toDisplayString, createElementVNode, createTextVNode, createCommentVNode, shallowRef, watch, withModifiers, computed, onActivated, normalizeStyle, withDirectives, withKeys, onMounted, vShow, nextTick, KeepAlive, onBeforeUnmount } from "vue";
+import { Select, Tab, Exception, $bkPopover, Popover, Button, Checkbox, clickoutside, PopConfirm, Input, provideGlobalConfig } from "bkui-vue";
+import { AngleDoubleLeft, AngleLeft, AngleRight, AngleDoubleRight, Close, Transfer, Del } from "bkui-vue/lib/icon";
+import en from "dayjs/locale/en";
+import cn from "dayjs/locale/zh-cn";
+const getCookieByName = (name) => {
+  const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]*)(;|$)`));
+  if (match) {
+    return match[2];
+  }
+  return "";
+};
+const naturalDateLangData = {
+  "N 天前": "N days ago",
   上周: "Last week",
   上月: "Last month",
   今天: "Today",
   今年: "This year",
+  具体时间: "Specific time",
   "前 N 周": "Previous N weeks",
   "前 N 天": "Previous N days",
   前天: "The day before yesterday",
   前年: "The year before last",
   去年: "Last year",
+  基于: "Based on",
+  天前: "days ago",
   昨天: "Yesterday",
   本周: "This week",
   本月: "This month"
-}, ze = {
+};
+const timeUnitLangData = {
   分钟: "minute",
   周: "week",
   天: "day",
@@ -39,7 +46,8 @@ const De = (l) => {
   月: "month",
   毫秒: "millisecond",
   秒: "second"
-}, la = {
+};
+const shortTimeUnitLangData = {
   M: "月",
   d: "天",
   h: "小时",
@@ -48,7 +56,8 @@ const De = (l) => {
   s: "秒",
   w: "周",
   y: "年"
-}, ga = {
+};
+const langData = {
   前: "Previous",
   取消: "Cancel",
   将来: "Future",
@@ -73,6 +82,7 @@ const De = (l) => {
   格式: "Format",
   此刻: "now",
   浏览器时区: "Browser timezone",
+  的最近: "Last",
   确定: "Confirm",
   示例: "Example",
   结束时间: "End Time",
@@ -80,205 +90,29 @@ const De = (l) => {
   至今: "so far",
   请输入: "Please enter",
   "请输入搜索（国家，城市，简称）": "Please enter search (country, city, abbreviation)",
+  超出可选范围: "Out of range",
   近: "Last",
-  "（至今）": " so far"
+  "（至今）": " so far",
+  "，无法选择": ", cannot be selected",
+  时间范围不能小于: "Time range cannot be less than",
+  时间范围不能大于: "Time range cannot be greater than",
+  时间格式转换: "Time format conversion"
 };
-Object.keys(ga).reduce((l, a) => (l[ga[a]] = a, l), {});
-const pa = De("blueking_language") || "zh-cn", r = (l) => pa !== "en" ? la[l] || l : la[l] || ze[l] || Me[l] || ga[l] || l;
-var I = /* @__PURE__ */ ((l) => (l.Date = "date", l.FUTURE = "now+", l.NATURAL = "natural", l.RECENT = "now-", l))(I || {});
-const Xa = [
-  {
-    id: "s",
-    name: r("秒")
-  },
-  {
-    id: "m",
-    name: r("分钟")
-  },
-  {
-    id: "h",
-    name: r("小时")
-  },
-  {
-    id: "d",
-    name: r("天")
-  },
-  {
-    id: "w",
-    name: r("周")
-  },
-  {
-    id: "M",
-    name: r("月")
-  },
-  {
-    id: "y",
-    name: r("年")
-  }
-], ua = Xa.map((l) => l.id).join("");
-var ia = /* @__PURE__ */ ((l) => (l.custom = "custom", l.default = "default", l.edit = "edit", l))(ia || {});
-const xa = [
-  {
-    id: "now/d",
-    name: r("今天"),
-    type: "default"
-    /* default */
-  },
-  {
-    id: "now-1d/d",
-    name: r("昨天"),
-    type: "default"
-    /* default */
-  },
-  {
-    id: "now-2d/d",
-    name: r("前天"),
-    type: "default"
-    /* default */
-  },
-  {
-    id: "now/w",
-    name: r("本周"),
-    type: "default"
-    /* default */
-  },
-  {
-    id: "now-1w/w",
-    name: r("上周"),
-    type: "default"
-    /* default */
-  },
-  {
-    id: "now/M",
-    name: r("本月"),
-    type: "default"
-    /* default */
-  },
-  {
-    id: "now-1M/M",
-    name: r("上月"),
-    type: "default"
-    /* default */
-  },
-  {
-    id: "now-nd/d",
-    name: r("前 N 天"),
-    prefix: r("前"),
-    suffix: r("天"),
-    type: "edit",
-    unit: "d"
-  },
-  {
-    id: "now-nw/w",
-    name: r("前 N 周"),
-    prefix: r("前"),
-    suffix: r("周"),
-    type: "edit",
-    unit: "w"
-  }
-];
-var ba = /* @__PURE__ */ ((l) => (l.ALL = "all", l.NOW = "now", l))(ba || {});
-const Ra = [
-  {
-    id: "all",
-    name: r("整")
-  },
-  {
-    id: "now",
-    name: r("至今")
-  }
-], Ee = [
-  {
-    id: "common",
-    name: r("常用时间")
+Object.keys(langData).reduce(
+  (pre, cur) => {
+    pre[langData[cur]] = cur;
+    return pre;
   },
-  {
-    id: "recent",
-    name: r("最近使用")
-  }
-], Se = [
-  {
-    id: I.RECENT,
-    name: r("最近")
-  },
-  {
-    id: I.FUTURE,
-    name: r("未来")
-  },
-  {
-    id: I.NATURAL,
-    name: r("自然日期")
-  },
-  {
-    id: I.Date,
-    name: r("日期选择")
-  }
-], Ce = "BK_DATE_PICKER_STORE", Pe = "BK_DATE_PICKER_STORE_TAB", Te = "blueking_timezone", Ia = (l = 1) => `${Ce}_${l}`, La = (l = 1) => `${Pe}_${l}`, Ve = [
-  "YYYY-MM-DD HH:mm:ss",
-  "YYYY-MM-DD HH:mm:ss,SSS",
-  "YYYY-MM-DD HH:mm:ss.SSS",
-  "YYYY-MM-DD+HH:mm:ss",
-  "MM/DD/YYYY HH:mm:ss",
-  "YYYYMMDDHHmmss",
-  "YYYYMMDD HHmmss",
-  "YYYYMMDD HHmmss.SSS",
-  "DD/MMM/YYYY:HH:mm:ss",
-  "DD/MMM/YYYY:HH:mm:ssZ",
-  "DD/MMM/YYYY:HH:mm:ss Z",
-  "DD/MMM/YYYY:HH:mm:ssZZ",
-  "DD/MMM/YYYY:HH:mm:ss ZZ",
-  "YYYY-MM-DDTHH:mm:ss",
-  "YYYY-MM-DDTHH:mm:ss.SSS",
-  "YYYYMMDDTHHmmssZ",
-  "YYYYMMDDTHHmmss.SSSSSSZ",
-  "YYYY-MM-DDTHH:mm:ss.SSSZ",
-  "YYYY-MM-DDTHH:mm:ssZ",
-  "YYYY-MM-DDTHH:mm:ss.SSSSSSZ"
-], Ne = {
-  "now/M~now/M": r("本月"),
-  "now/d~now/d": r("今天"),
-  "now/w~now/w": r("本周"),
-  "now/y~now/y": r("今年"),
-  "now-1M/M~now-1M/M": r("上月"),
-  "now-1d/d~now-1d/d": r("昨天"),
-  "now-1w/w~now-1w/w": r("上周"),
-  "now-1y/y~now-1y/y": r("去年"),
-  "now-2d/d~now-2d/d": r("前天"),
-  "now-2y/y~now-2y/y": r("前年")
-}, ka = [
-  ["now-5m", "now"],
-  ["now-15m", "now"],
-  ["now-30m", "now"],
-  ["now-1h", "now"],
-  ["now-6h", "now"],
-  ["now-12h", "now"],
-  ["now-24h", "now"],
-  ["now-7d", "now"],
-  ["now-30d", "now"],
-  ["now/d", "now/d"],
-  ["now/d", "now"],
-  ["now-1d/d", "now-1d/d"],
-  ["now-2d/d", "now-2d/d"],
-  ["now/w", "now/w"],
-  ["now/w", "now"],
-  ["now-1w/w", "now-1w/w"],
-  ["now/M", "now/M"],
-  ["now/M", "now"],
-  ["now-1M/M", "now-1M/M"],
-  ["now-1M/M", "now"]
-], C = "now", $e = /^(\d{4})[-/](\d+)[-/](\d+)[Tt\s]*(\d+)?:(\d+)?:(\d+)?[.:]?(\d*)$/, Xt = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, ae = Symbol("DATE_PICKER_PROVIDER_KEY"), je = (l) => {
-  oe(ae, l);
-}, ee = () => de(ae);
-d.extend(Fa);
-d.extend(qa);
-const Ye = [
-  // {
-  //   label: '',
-  //   options: [
-  //     { label: 'Browser Time', searchIndex: 'browser time|cst|utc+08:00|china|cn', value: 'browser' },
-  //     // { label: 'Coordinated Universal Time', searchIndex: 'coordinated universal time|utc, gmt|utc', value: 'utc' },
-  //   ],
-  // },
+  {}
+);
+const lang = getCookieByName("blueking_language") || "zh-cn";
+const t = (key) => {
+  if (lang !== "en") return shortTimeUnitLangData[key] || key;
+  return shortTimeUnitLangData[key] || timeUnitLangData[key] || naturalDateLangData[key] || langData[key] || key;
+};
+dayjs.extend(utc);
+dayjs.extend(tz);
+const timezoneData = [
   {
     label: "Africa",
     options: [
@@ -1115,7 +949,7 @@ const Ye = [
         searchIndex: "asia/srednekolymsk||utc+11:00|russian federation|ru",
         value: "Asia/Srednekolymsk"
       },
-      { label: "Asia/Taipei", searchIndex: "asia/taipei|cst|utc+08:00|taiwan|tw", value: "Asia/Taipei" },
+      { label: "Asia/Taipei", searchIndex: "asia/taipei|cst|utc+08:00|china|cn", value: "Asia/Taipei" },
       { label: "Asia/Tashkent", searchIndex: "asia/tashkent||utc+05:00|uzbekistan|uz", value: "Asia/Tashkent" },
       { label: "Asia/Tbilisi", searchIndex: "asia/tbilisi||utc+04:00|georgia|ge", value: "Asia/Tbilisi" },
       {
@@ -1614,315 +1448,1079 @@ const Ye = [
       }
     ]
   }
-], Be = () => {
-  const l = d.tz.guess(), a = [], i = Ye.map((e) => ({
-    label: e.label,
-    options: e.options.map((n) => {
-      const b = {
-        ...n,
-        ...Re(n.searchIndex)
-      };
-      return n.value === l && a.push({
-        ...n,
-        ...b,
-        label: b.label
-      }), b;
-    })
-  }));
-  return i.unshift({
+];
+const getTimezoneDetails = () => {
+  const browserTimeZone = dayjs.tz.guess();
+  const defaultTimezoneList = [];
+  const list = timezoneData.map((group) => {
+    return {
+      label: group.label,
+      options: group.options.map((option) => {
+        const info = {
+          ...option,
+          ...getTimezoneInfo(option.searchIndex)
+        };
+        if (option.value === browserTimeZone) {
+          defaultTimezoneList.push({
+            ...option,
+            ...info,
+            label: info.label
+          });
+        }
+        return info;
+      })
+    };
+  });
+  list.unshift({
     label: "",
-    options: a
-  }), i;
-}, Re = (l) => {
-  const a = l.split("|");
+    options: defaultTimezoneList
+  });
+  return list;
+};
+const getTimezoneInfo = (searchIndex) => {
+  const list = searchIndex.split("|");
   return {
-    abbreviation: a[1].toLocaleUpperCase(),
-    country: (a[3] || "").replace(/(\b\w)/g, (i) => i.toLocaleUpperCase()),
-    countryCode: a[4] || "",
-    utc: a[2].toLocaleUpperCase()
+    abbreviation: list[1].toLocaleUpperCase(),
+    country: (list[3] || "").replace(/(\b\w)/g, (v) => v.toLocaleUpperCase()),
+    countryCode: list[4] || "",
+    utc: list[2].toLocaleUpperCase()
   };
-}, te = Be(), ie = (l) => te.reduce((a, i) => (a == null ? void 0 : a.label) === l ? a : i.options.find((e) => e.label === l), {}), oa = new RegExp(`now([+-]?\\d*)([${ua}]?)\\/?([${ua}]?)`), Le = new RegExp(`now[-](\\d+)([${ua}]{1})$`), Ue = new RegExp(`now[+](\\d+)([${ua}]{1})$`), ya = new RegExp(`now([+-]?\\d*)([${ua}]?)\\/([${ua}])$`);
-class ra {
-  constructor(a = ["", ""], i = "YYYY-MM-DD HH:mm:ss", e = d.tz.guess()) {
-    na(this, "endDate");
-    na(this, "endNum");
-    na(this, "endUnit");
-    na(this, "startDate");
-    na(this, "startNum");
-    na(this, "startUnit");
-    this.dateValue = a, this.format = i, this.timezome = e;
-    const [n, b] = a;
-    this.startDate = n ? this.transformValue2Dayjs(n) : null, this.endDate = b ? this.transformValue2Dayjs(b, "end") : null;
-  }
-  dateDuration() {
-    if (!this.startDate || !this.endDate || !this.isValidate)
-      return;
-    let a = this.endDate.diff(this.startDate);
-    const i = 24 * 60 * 60 * 1e3;
-    switch (this.dateMode) {
-      case I.RECENT:
-        a = d().add(this.startNum, this.startUnit).diff(d());
-        break;
-      case I.FUTURE:
-        a = d().diff(
-          d().add(this.endNum, this.endUnit),
-          this.endUnit
-        );
-        break;
-      case I.NATURAL:
-        a = this.endDate.diff(this.startDate);
-        const n = 24 * 60 * 60 * 1e3;
-        a % n === n - 1 && (a += 1);
-        break;
-      default:
-      case I.Date:
-        a = this.endDate.diff(this.startDate);
-        break;
-    }
-    const e = a % i;
-    return e === i - 1 ? a += 1 : e === i - 1e3 && (a += 1e3), a;
-  }
-  toDisplayString() {
-    var b, h, m;
-    if (!this.startDate || !this.endDate || !this.isValidate)
-      return ((b = this.dateValue) == null ? void 0 : b.join(" ~ ")) || "";
-    if (this.dateMode === I.RECENT)
-      return `${r("近")} ${Math.abs(this.startNum)} ${r(
-        la[this.startUnit]
-      )}`;
-    if (this.dateMode === I.FUTURE)
-      return `${r("未来")} ${Math.abs(this.endNum)} ${r(
-        la[this.endUnit]
-      )}`;
-    const [a, i] = this.dateValue;
-    if (this.dateMode === I.NATURAL) {
-      const c = i !== C ? "" : r("（至今）"), s = xa.find((o) => o.id === a);
-      return s ? r(s.name) + c : `${`${r("前")} ${this.startNum} ${r(
-        la[this.startUnit]
-      )}`}${c}`;
-    }
-    let e = this.format;
-    if (a === C)
-      return `${r("此刻")} ~ ${(h = this.endDate) == null ? void 0 : h.format(this.format)}`;
-    if (i === C)
-      return `${(m = this.startDate) == null ? void 0 : m.format(this.format)} ~ ${r("此刻")}`;
-    const n = ["Y", "M", "D", "H", "m", "s"].reduce(
-      (c, s, o, y) => (o < 1 || (this.format.indexOf(s) > this.format.indexOf(y[o - 1]) ? c.push(s) : c = []), c),
-      ["Y"]
-    );
-    if (n.length > 1 && n.includes("D") && this.startDate.isSame(this.endDate, "year")) {
-      const [, c] = this.format.match(/(Y+)/) || [];
-      let s = this.format.replace(c, this.startDate.format(c));
-      if (e = e.replace(/Y+[^\w\s]*/, ""), this.startDate.isSame(this.endDate, "day") && this.startDate.isSame(this.endDate, "month")) {
-        const [, y] = this.format.match(/(M+)/) || [];
-        if (s = s.replace(y, this.startDate.format(y)), e = e.replace(/M+[^\w\s]*/, ""), this.startDate.isSame(this.endDate, "day")) {
-          const [, S] = this.format.match(/(d+|D+)/) || [];
-          s = s.replace(S, this.startDate.format(S)), e = e.replace(/(d|D)+[^\w\s]*/, "");
-        }
-      }
-      const o = s.replace(e, "").slice(-1);
-      return s.length <= e.length ? `${this.startDate.format(this.format)} ~ ${this.endDate.format(this.format)}` : s.replace(
-        `${o.match(/([^\w\s]{1})/) ? o : ""}${e}`,
-        ` ( ${this.startDate.format(e)} ~ ${this.endDate.format(e)} )`
-      );
-    }
-    return `${this.startDate.format(this.format)} ~ ${this.endDate.format(this.format)}`;
-  }
-  toEmitValue() {
-    var a, i, e, n;
-    return [
-      this.dateMode === I.Date ? [
-        this.dateValue[0] === C ? C : (a = this.startDate) == null ? void 0 : a.valueOf(),
-        this.dateValue[1] === C ? C : (i = this.endDate) == null ? void 0 : i.valueOf()
-      ] : [...this.dateValue],
-      [
+};
+const timezoneDetails = getTimezoneDetails();
+const getTimezoneInfoByValue = (value) => {
+  return timezoneDetails.reduce((pre, group) => {
+    if ((pre == null ? void 0 : pre.label) === value) return pre;
+    return group.options.find((option) => option.label === value);
+  }, void 0);
+};
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "TimezonePicker",
+    inheritAttrs: false
+  },
+  __name: "timezone-picker",
+  props: {
+    timezoneOptions: { default: () => timezoneDetails },
+    value: {}
+  },
+  emits: ["update:value"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const $attrs = useAttrs();
+    const props = __props;
+    const slots = useSlots();
+    const TimezonePicker = () => {
+      return h(
+        Select,
         {
-          dayjs: this.startDate,
-          formatText: (e = this.startDate) == null ? void 0 : e.format(this.format)
+          class: $attrs.class + " bk-timezone-picker",
+          clearable: $attrs.clearable ?? false,
+          filterOption: handleSearch,
+          filterable: true,
+          inputSearch: false,
+          modelValue: props.value,
+          noMatchText: t("无匹配数据"),
+          placeholder: t("请输入搜索（国家，城市，简称）"),
+          popoverOptions: {
+            "ext-cls": "__bk-date-picker-popover__ __bk-timezone-picker-popover__ ",
+            minWidth: 1600
+          },
+          searchPlaceholder: t("请输入搜索（国家，城市，简称）"),
+          onChange: handleChange,
+          ...$attrs
         },
         {
-          dayjs: this.endDate,
-          formatText: (n = this.endDate) == null ? void 0 : n.format(this.format)
+          default: () => [
+            renderSlot(slots, "default", { options: props.timezoneOptions }, () => {
+              return props.timezoneOptions.map((group) => {
+                if (group.label.length < 1) {
+                  return group.options.map((item) => {
+                    return renderSlot(slots, "option", { option: item }, () => [
+                      h(
+                        Select.Option,
+                        {
+                          ...item,
+                          id: item.label,
+                          key: item.label,
+                          name: item.label
+                        },
+                        {
+                          default: () => [
+                            h(
+                              "div",
+                              {
+                                class: {
+                                  "bk-timezone-picker-option": true,
+                                  "is-selected": item.label === props.value
+                                }
+                              },
+                              [
+                                h("span", { class: "option-name" }, `${t("浏览器时区")} ${item.label}`),
+                                h("span", { class: "option-country" }, `${item.country}, ${item.abbreviation}`),
+                                h("span", { class: "option-utc" }, item.utc)
+                              ]
+                            )
+                          ]
+                        }
+                      )
+                    ]);
+                  });
+                } else {
+                  if (!group.options.length) return null;
+                  return h(
+                    Select.Group,
+                    {
+                      key: group.label,
+                      label: group.label
+                    },
+                    {
+                      default: () => group.options.map((item) => {
+                        return renderSlot(slots, "option", { option: item }, () => [
+                          h(
+                            Select.Option,
+                            {
+                              ...item,
+                              id: item.label,
+                              key: item.label,
+                              name: item.label
+                            },
+                            {
+                              default: () => [
+                                h(
+                                  "div",
+                                  {
+                                    class: {
+                                      "bk-timezone-picker-option": true,
+                                      "is-selected": item.label === props.value
+                                    }
+                                  },
+                                  [
+                                    h("span", { class: "option-name" }, item.label),
+                                    h("span", { class: "option-country" }, `${item.country}, ${item.abbreviation}`),
+                                    h("span", { class: "option-utc" }, item.utc)
+                                  ]
+                                )
+                              ]
+                            }
+                          )
+                        ]);
+                      })
+                    }
+                  );
+                }
+              });
+            })
+          ]
         }
-      ]
-    ];
-  }
-  transformValue2Dayjs(a, i = "start") {
-    const e = isNaN(a) ? a : +a;
-    let n = d(e);
-    if (typeof e == "number" || d.isDayjs(e) || n.isValid())
-      return d.tz(n.valueOf(), this.timezome);
-    const [, b, h, m] = e.match(oa) || [];
-    return i === "start" ? (this.startNum = Math.abs(+b), this.startUnit = h || m) : i === "end" && (this.endNum = Math.abs(+b), this.endUnit = h || m), b ? n = d().add(+b, h || m) : e === C && (n = d()), m ? (n = i === "start" ? d(d(n.isValid() ? n : void 0).valueOf()) : d(d(n.isValid() ? n : void 0)), i === "start" ? d.tz(n.valueOf(), this.timezome).startOf(m) : d.tz(n.valueOf(), this.timezome).endOf(m)) : d.tz(n.valueOf(), this.timezome);
-  }
-  updateDateValue(a, i) {
-    this.dateValue = a;
-    const [e, n] = a;
-    i && (this.timezome = i), this.startDate = e ? this.transformValue2Dayjs(e) : null, this.endDate = n ? this.transformValue2Dayjs(n, "end") : null;
-  }
-  updateFormat(a) {
-    this.format = a;
+      );
+    };
+    const handleChange = (val) => {
+      const info = getTimezoneInfoByValue(val);
+      emits("update:value", val, info);
+    };
+    const handleSearch = (keyword, timezone) => {
+      var _a, _b, _c, _d;
+      return ((_a = timezone.label) == null ? void 0 : _a.toLowerCase().includes(keyword.toLowerCase())) || ((_b = timezone.country) == null ? void 0 : _b.toLowerCase().includes(keyword.toLowerCase())) || ((_c = timezone.abbreviation) == null ? void 0 : _c.toLowerCase().includes(keyword.toLowerCase())) || ((_d = timezone.utc) == null ? void 0 : _d.toLowerCase().includes(keyword.toLowerCase()));
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(TimezonePicker));
+    };
   }
-  get dateMode() {
-    const [a, i] = this.dateValue;
-    if (typeof a == "number" || typeof i == "number" || d.isDayjs(a) || d.isDayjs(i) || d(a).isValid() || d(i).isValid())
-      return I.Date;
-    if (a === C && Ue.test(i))
-      return I.FUTURE;
-    if (i === C && Le.test(a))
-      return I.RECENT;
-    if (Ne[this.dateValue.join("~")])
-      return I.NATURAL;
-    if (ya.test(a) && (ya.test(i) || i === C)) {
-      const [, e, n, b] = a.match(oa) || [], [, h, m, c] = i.match(oa) || [];
-      if (b && (i === C || e && +h == -1 && n === b && m === c && n === m))
-        return I.NATURAL;
+});
+function useKeydownEnter(callback) {
+  const scope = effectScope();
+  const handleKeydown = (event) => {
+    if (event.key === "Enter") {
+      callback(event);
     }
-    return I.Date;
-  }
-  get endDisplayText() {
-    var a;
-    return d.tz(((a = this.endDate) == null ? void 0 : a.valueOf()) || void 0, this.timezome).format(this.format);
-  }
-  get isValidate() {
-    var a, i;
-    return ((a = this.startDate) == null ? void 0 : a.isValid()) && ((i = this.endDate) == null ? void 0 : i.isValid());
-  }
-  get recentOrFuturedateNum() {
-    if (this.dateMode === I.RECENT)
-      return this.startNum;
-    if (this.dateMode === I.FUTURE)
-      return this.endNum;
-  }
-  get recentOrFuturedateUnit() {
-    return this.dateMode === I.RECENT ? this.startUnit : this.dateMode === I.FUTURE ? this.endUnit : "m";
-  }
-  get startDisplayText() {
-    var a;
-    return d.tz(((a = this.startDate) == null ? void 0 : a.valueOf()) || void 0, this.timezome).format(this.format);
+  };
+  scope.run(() => {
+    window.addEventListener("keydown", handleKeydown);
+  });
+  const stop = () => {
+    scope.stop();
+    window.removeEventListener("keydown", handleKeydown);
+  };
+  if (getCurrentScope()) {
+    onScopeDispose(stop);
   }
+  return stop;
 }
-const _a = (l, a = "start", i) => {
-  const e = isNaN(l) ? l : +l;
-  let n = d(e);
-  if (typeof e == "number" || d.isDayjs(e) || n.isValid())
-    return d.tz(n.valueOf(), i || d.tz.guess());
-  const [, b, h, m] = e.match(oa) || [];
-  return b ? n = d().add(+b, h || m || "d") : e === C && (n = d()), m ? (n = a === "start" ? d.tz(d(n.isValid() ? n : void 0).valueOf(), i).startOf(m) : d.tz(d(n.isValid() ? n : void 0), i).endOf(m), n != null && n.isValid() ? n : void 0) : n.isValid() ? d.tz(n.valueOf(), i || d.tz.guess()) : void 0;
-}, ai = (l, a) => {
-  if (!Array.isArray(l) || l.length < 1)
-    return [];
-  const [i, e] = l || [], n = _a(i, "start", a), b = _a(e, "end", a);
-  return [n, b];
-}, ne = (l, a = "local") => {
-  const e = (a === "local" ? localStorage : sessionStorage).getItem(l);
-  let n = [];
-  if (e)
-    try {
-      n = JSON.parse(e);
-    } catch {
-      n = [];
-    }
-  return Array.isArray(n) || (n = []), n;
-}, re = (l, a, i = "local") => {
-  let e = [];
-  const n = i === "local" ? localStorage : sessionStorage, b = n.getItem(a);
-  if (b)
-    try {
-      e = JSON.parse(b);
-    } catch {
-      e = [];
-    }
-  Array.isArray(e) || (e = []), !e.some((h) => h[0] === l[0] && h[1] === l[1]) && (e.unshift(l), n.setItem(a, JSON.stringify(e.slice(0, 10))));
-}, He = { class: "common-panel-tab" }, Ua = /* @__PURE__ */ X({
-  __name: "common-tab",
-  props: {
-    /** modelValue 选中的tab */
-    modelValue: {
-      required: !0,
-      type: String
-    },
-    /** panels */
-    panels: {
-      required: !0,
-      type: Array
-    },
-    showDeleteAll: {
-      default: !1,
-      type: Boolean
-    }
+var DateMode = /* @__PURE__ */ ((DateMode2) => {
+  DateMode2["Date"] = "date";
+  DateMode2["FUTURE"] = "now+";
+  DateMode2["NATURAL"] = "natural";
+  DateMode2["RECENT"] = "now-";
+  return DateMode2;
+})(DateMode || {});
+const DateUnitList = [
+  {
+    id: "s",
+    name: t("秒")
   },
-  setup(l) {
-    return (a, i) => (p(), z("div", He, [
-      E(t(Ba), {
-        active: l.modelValue,
-        "onUpdate:active": i[0] || (i[0] = (e) => a.$emit("update:modelValue", e)),
-        type: "unborder-card"
-      }, {
-        default: j(() => [
-          (p(!0), z(
-            U,
-            null,
-            q(l.panels, (e) => (p(), K(t(Ba).TabPanel, {
-              key: e.id,
-              label: e.name,
-              name: e.id
-            }, null, 8, ["label", "name"]))),
-            128
-            /* KEYED_FRAGMENT */
-          ))
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["active"]),
-      l.showDeleteAll ? (p(), K(t(fe), {
-        key: 0,
-        "cancel-text": t(r)("取消"),
-        "confirm-text": t(r)("确定"),
-        content: t(r)("是否清空最近使用？"),
-        trigger: "click",
-        width: 189,
-        onConfirm: i[1] || (i[1] = (e) => a.$emit("confirm")),
-        "ext-cls": "__bk-date-picker-popover__ __bk-date-picker-popover-delete__"
-      }, {
-        default: j(() => [
-          E(t(xe), { class: "delete-all" })
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["cancel-text", "confirm-text", "content"])) : sa("v-if", !0)
-    ]));
+  {
+    id: "m",
+    name: t("分钟")
+  },
+  {
+    id: "h",
+    name: t("小时")
+  },
+  {
+    id: "d",
+    name: t("天")
+  },
+  {
+    id: "w",
+    name: t("周")
+  },
+  {
+    id: "M",
+    name: t("月")
+  },
+  {
+    id: "y",
+    name: t("年")
   }
-}), Da = /* @__PURE__ */ X({
-  __name: "common-submit",
-  props: {
-    disableTips: {},
-    disabled: { type: Boolean }
+];
+const dateUnit = DateUnitList.map((item) => item.id).join("");
+var NaturalOptionType = /* @__PURE__ */ ((NaturalOptionType2) => {
+  NaturalOptionType2["custom"] = "custom";
+  NaturalOptionType2["default"] = "default";
+  NaturalOptionType2["edit"] = "edit";
+  NaturalOptionType2["specific"] = "specific";
+  return NaturalOptionType2;
+})(NaturalOptionType || {});
+const CommonNaturalOptions = [
+  {
+    id: "now/d",
+    name: t("今天"),
+    type: "default"
+    /* default */
   },
-  emits: ["submit"],
-  setup(l) {
-    return (a, i) => {
-      var e;
-      return p(), z(
-        U,
-        null,
-        [
-          E(t(ca), {
-            content: a.disableTips,
-            disabled: !a.disabled || !((e = a.disableTips) != null && e.length)
-          }, {
-            default: j(() => [
-              E(t(wa), {
-                disabled: a.disabled,
-                outline: !0,
-                onClick: i[0] || (i[0] = (n) => a.$emit("submit")),
-                class: "common-submit",
-                theme: "primary"
-              }, {
-                default: j(() => [
-                  G(
-                    k(t(r)("确定")),
-                    1
+  {
+    id: "now-1d/d",
+    name: t("昨天"),
+    type: "default"
+    /* default */
+  },
+  {
+    id: "now-2d/d",
+    name: t("前天"),
+    type: "default"
+    /* default */
+  },
+  {
+    id: "now/w",
+    name: t("本周"),
+    type: "default"
+    /* default */
+  },
+  {
+    id: "now-1w/w",
+    name: t("上周"),
+    type: "default"
+    /* default */
+  },
+  {
+    id: "now/M",
+    name: t("本月"),
+    type: "default"
+    /* default */
+  },
+  {
+    id: "now-1M/M",
+    name: t("上月"),
+    type: "default"
+    /* default */
+  },
+  {
+    id: "now-nd/d",
+    name: t("前 N 天"),
+    prefix: t("前"),
+    suffix: t("天"),
+    type: "edit",
+    unit: "d"
+  },
+  {
+    id: "now-nw/w",
+    name: t("前 N 周"),
+    prefix: t("前"),
+    suffix: t("周"),
+    type: "edit",
+    unit: "w"
+  }
+];
+var NaturalUnit = /* @__PURE__ */ ((NaturalUnit2) => {
+  NaturalUnit2["ALL"] = "all";
+  NaturalUnit2["NOW"] = "now";
+  return NaturalUnit2;
+})(NaturalUnit || {});
+const naturalUnitOptions = [
+  {
+    id: "all",
+    name: t("整")
+  },
+  {
+    id: "now",
+    name: t("至今")
+  }
+];
+const panels = [
+  {
+    id: "common",
+    name: t("常用时间")
+  },
+  {
+    id: "recent",
+    name: t("最近使用")
+  }
+];
+const datePickTabList = [
+  {
+    id: DateMode.Date,
+    name: t("日期选择")
+  },
+  {
+    id: DateMode.RECENT,
+    name: t("最近")
+  },
+  {
+    id: DateMode.FUTURE,
+    name: t("未来")
+  },
+  {
+    id: DateMode.NATURAL,
+    name: t("自然日期")
+  }
+];
+const storeKey = "BK_DATE_PICKER_STORE";
+const storeTabKey = "BK_DATE_PICKER_STORE_TAB";
+const timezoneStoreKey = "blueking_timezone";
+const getStoreKey = (key = 1) => `${storeKey}_${key}`;
+const getStoreTabKey = (key = 1) => `${storeTabKey}_${key}`;
+const dateFormatList = [
+  "YYYY-MM-DD HH:mm:ss",
+  "YYYY-MM-DD HH:mm:ss.SSS",
+  "YYYY-MM-DD+HH:mm:ss",
+  "MM/DD/YYYY HH:mm:ss",
+  "YYYYMMDDHHmmss",
+  "YYYYMMDD HHmmss",
+  "YYYYMMDD HHmmss.SSS",
+  "DD/MMM/YYYY:HH:mm:ss",
+  "DD/MMM/YYYY:HH:mm:ssZ",
+  "DD/MMM/YYYY:HH:mm:ss Z",
+  "DD/MMM/YYYY:HH:mm:ssZZ",
+  "DD/MMM/YYYY:HH:mm:ss ZZ",
+  "YYYY-MM-DDTHH:mm:ss",
+  "YYYY-MM-DDTHH:mm:ss.SSS",
+  "YYYYMMDDTHHmmssZ",
+  "YYYYMMDDTHHmmss.SSSSSSZ",
+  "YYYY-MM-DDTHH:mm:ss.SSSZ",
+  "YYYY-MM-DDTHH:mm:ssZ",
+  "YYYY-MM-DDTHH:mm:ss.SSSSSSZ"
+];
+const naturalDateShortcutMap = {
+  "now/M~now/M": t("本月"),
+  "now/d~now/d": t("今天"),
+  "now/w~now/w": t("本周"),
+  "now/y~now/y": t("今年"),
+  "now-1M/M~now-1M/M": t("上月"),
+  "now-1d/d~now-1d/d": t("昨天"),
+  "now-1w/w~now-1w/w": t("上周"),
+  "now-1y/y~now-1y/y": t("去年"),
+  "now-2d/d~now-2d/d": t("前天"),
+  "now-2y/y~now-2y/y": t("前年")
+};
+const commonDateList = [
+  ["now-5m", "now"],
+  ["now-15m", "now"],
+  ["now-30m", "now"],
+  ["now-1h", "now"],
+  ["now-6h", "now"],
+  ["now-12h", "now"],
+  ["now-24h", "now"],
+  ["now-7d", "now"],
+  ["now-30d", "now"],
+  ["now/d", "now/d"],
+  ["now/d", "now"],
+  ["now-1d/d", "now-1d/d"],
+  ["now-2d/d", "now-2d/d"],
+  ["now/w", "now/w"],
+  ["now/w", "now"],
+  ["now-1w/w", "now-1w/w"],
+  ["now/M", "now/M"],
+  ["now/M", "now"],
+  ["now-1M/M", "now-1M/M"],
+  ["now-1M/M", "now"]
+];
+const NowConstant = "now";
+const DATE_REGEX_PARSE = /^(\d{4})[-/](\d+)[-/](\d+)[Tt\s]*(\d+)?:(\d+)?:(\d+)?[.:]?(\d*)$/;
+const DATE_REGEX_FORMAT = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g;
+const DEFAULT_TIMEZONE = "Asia/Shanghai";
+const MAX_NUMBER_VALUE = 1e4;
+const baselineDateRegexp = new RegExp(`(\\(.+\\)|now)([+-]?\\d*)([${dateUnit}]?)\\/?([${dateUnit}]?)`);
+const commonDateRegexp = new RegExp(`now([+-]?\\d*)([${dateUnit}]?)\\/?([${dateUnit}]?)`);
+const recentDateRegexp = new RegExp(`now[-](\\d+)([${dateUnit}]{1})$`);
+const futureDateRegexp = new RegExp(`now[+](\\d+)([${dateUnit}]{1})$`);
+const naturalDateRegexp = new RegExp(`now([+-]?\\d*)([${dateUnit}]?)\\/([${dateUnit}])$`);
+class DateRange {
+  constructor(dateValue = ["", ""], format = "YYYY-MM-DD HH:mm:ss", timezone = dayjs.tz.guess()) {
+    __publicField(this, "endBaselineNum");
+    __publicField(this, "endBaselineTime");
+    __publicField(this, "endBaselineUnit");
+    __publicField(this, "endDate");
+    __publicField(this, "endNum");
+    __publicField(this, "endUnit");
+    __publicField(this, "startBaselineNum");
+    __publicField(this, "startBaselineTime");
+    __publicField(this, "startBaselineUnit");
+    __publicField(this, "startDate");
+    __publicField(this, "startNum");
+    __publicField(this, "startUnit");
+    __publicField(this, "userDisplayName");
+    this.dateValue = dateValue;
+    this.format = format;
+    this.timezone = timezone;
+    const [start, end] = dateValue;
+    this.startDate = start ? this.transformValue2Dayjs(start) : null;
+    this.endDate = end ? this.transformValue2Dayjs(end, "end") : null;
+  }
+  get dateMode() {
+    const [start, end] = this.dateValue;
+    if (typeof start === "number" || typeof end === "number") return DateMode.Date;
+    if (dayjs.isDayjs(start) || dayjs.isDayjs(end)) return DateMode.Date;
+    if (dayjs(start).isValid() || dayjs(end).isValid()) return DateMode.Date;
+    if (start === NowConstant && futureDateRegexp.test(end)) return DateMode.FUTURE;
+    if (end === NowConstant && recentDateRegexp.test(start) || start.includes("(") && end.includes("("))
+      return DateMode.RECENT;
+    if (naturalDateShortcutMap[this.dateValue.join("~")]) {
+      return DateMode.NATURAL;
+    }
+    if (naturalDateRegexp.test(start) && (naturalDateRegexp.test(end) || end === NowConstant)) {
+      const [, startNum, startUnit, startDiffUnit] = start.match(commonDateRegexp) || [];
+      const [, endNum, endUnit, endDiffUnit] = end.match(commonDateRegexp) || [];
+      if (startDiffUnit) {
+        if (end === NowConstant) return DateMode.NATURAL;
+        if (startNum && +endNum == -1) {
+          if (startUnit === startDiffUnit && endUnit === endDiffUnit && startUnit === endUnit) return DateMode.NATURAL;
+        }
+      }
+    }
+    return DateMode.Date;
+  }
+  get endDisplayText() {
+    var _a;
+    return dayjs.tz(((_a = this.endDate) == null ? void 0 : _a.valueOf()) || void 0, this.timezone).format(this.format);
+  }
+  get isValidate() {
+    var _a, _b;
+    return ((_a = this.startDate) == null ? void 0 : _a.isValid()) && ((_b = this.endDate) == null ? void 0 : _b.isValid());
+  }
+  get recentOrFutureDateNum() {
+    if (this.dateMode === DateMode.RECENT) {
+      return this.startNum;
+    }
+    if (this.dateMode === DateMode.FUTURE) {
+      return this.endNum;
+    }
+    return void 0;
+  }
+  get recentOrFutureDateUnit() {
+    if (this.dateMode === DateMode.RECENT) {
+      return this.startUnit;
+    }
+    if (this.dateMode === DateMode.FUTURE) {
+      return this.endUnit;
+    }
+    return "m";
+  }
+  get startDisplayText() {
+    var _a;
+    return dayjs.tz(((_a = this.startDate) == null ? void 0 : _a.valueOf()) || void 0, this.timezone).format(this.format);
+  }
+  dateDuration(unit) {
+    if (!this.startDate || !this.endDate || !this.isValidate) return;
+    let durations = this.endDate.diff(this.startDate);
+    const dayDuration = 24 * 60 * 60 * 1e3;
+    switch (this.dateMode) {
+      case DateMode.RECENT:
+        durations = dayjs().add(this.startNum, this.startUnit).diff(dayjs(), unit);
+        break;
+      case DateMode.FUTURE:
+        durations = dayjs().diff(
+          dayjs().add(this.endNum, this.endUnit),
+          unit || this.endUnit
+        );
+        break;
+      case DateMode.NATURAL: {
+        durations = this.endDate.diff(this.startDate, unit);
+        const dayDuration2 = 24 * 60 * 60 * 1e3;
+        if (durations % dayDuration2 === dayDuration2 - 1) {
+          durations += 1;
+        }
+        break;
+      }
+      default:
+      case DateMode.Date:
+        durations = this.endDate.diff(this.startDate, unit);
+        break;
+    }
+    const durationMod = durations % dayDuration;
+    if (durationMod === dayDuration - 1) {
+      durations += 1;
+    } else if (durationMod === dayDuration - 1e3) {
+      durations += 1e3;
+    }
+    return durations;
+  }
+  isInValidDateRange(date) {
+    if (!this.startDate || !this.endDate) return false;
+    return (this.startDate.isSame(date.startDate, "ms") || this.startDate.isBefore(date.startDate)) && (this.endDate.isSame(date.endDate, "ms") || this.endDate.isAfter(date.endDate));
+  }
+  isInValidDuration(minDuration = 0, maxDuration = Number.MAX_SAFE_INTEGER) {
+    if (!this.startDate || !this.endDate) return false;
+    const durations = this.dateDuration();
+    if (durations === void 0) return false;
+    return durations >= minDuration && durations <= maxDuration;
+  }
+  setUserDisplayName(v) {
+    this.userDisplayName = v;
+  }
+  toDisplayString() {
+    var _a, _b;
+    const {
+      dateMode,
+      endDate,
+      endNum,
+      format,
+      isValidate,
+      startBaselineNum,
+      startBaselineTime,
+      startDate,
+      startNum,
+      startUnit
+    } = this;
+    if (this.userDisplayName) return this.userDisplayName;
+    if (!startDate || !endDate || !isValidate) {
+      return ((_a = this.dateValue) == null ? void 0 : _a.join(" ~ ")) || "";
+    }
+    if (this.dateMode === DateMode.RECENT) {
+      let displayStr = startBaselineTime ? `${t("基于")} ` : "";
+      const item = CommonNaturalOptions.find((option) => option.id === startBaselineTime);
+      if (item == null ? void 0 : item.name) {
+        displayStr += `${t(item.name)} `;
+      } else if (startBaselineNum) {
+        displayStr += `${startBaselineNum} ${t("天前")} `;
+      } else if (startBaselineTime) {
+        displayStr += `${startBaselineTime} `;
+      }
+      return `${displayStr}${t(startBaselineTime ? "的最近" : "近")} ${Math.abs(startNum)} ${t(
+        shortTimeUnitLangData[startUnit]
+      )}`;
+    }
+    if (dateMode === DateMode.FUTURE) {
+      return `${t("未来")} ${Math.abs(endNum)} ${t(
+        shortTimeUnitLangData[this.endUnit]
+      )}`;
+    }
+    const [start, end] = this.dateValue;
+    if (this.dateMode === DateMode.NATURAL) {
+      const suffix = end !== NowConstant ? "" : t("（至今）");
+      const item = CommonNaturalOptions.find((option) => option.id === start);
+      if (item) {
+        return t(item.name) + suffix;
+      }
+      return naturalDateShortcutMap[this.dateValue.join("~")] || `${`${t("前")} ${this.startNum} ${t(
+        shortTimeUnitLangData[this.startUnit]
+      )}`}${suffix}`;
+    }
+    if (start === NowConstant) {
+      return `${t("此刻")} ~ ${(_b = this.endDate) == null ? void 0 : _b.format(format)}`;
+    }
+    if (end === NowConstant) {
+      return `${startDate == null ? void 0 : startDate.format(format)} ~ ${t("此刻")}`;
+    }
+    const dateUnits = [
+      { regex: /Y{2,4}|y{2,4}/, unit: "year" },
+      // { regex: /M{1,2}/, unit: 'month' },
+      { regex: /D{1,2}|d{1,2}/, unit: "day" }
+      // { regex: /H{1,2}|h{1,2}/, unit: 'hour' },
+      // { regex: /m{1,2}/, unit: 'minute' },
+      // { regex: /s{1,2}/, unit: 'second' },
+    ];
+    let remainingFormat = format;
+    let commonFormat = "";
+    let lastEndIndex = 0;
+    for (const { regex, unit } of dateUnits) {
+      if (startDate.isSame(endDate, unit)) {
+        const match = regex.exec(format.slice(lastEndIndex));
+        if (match) {
+          commonFormat += format.slice(lastEndIndex, lastEndIndex + match.index + match[0].length);
+          lastEndIndex += match.index + match[0].length;
+        }
+      } else {
+        break;
+      }
+    }
+    remainingFormat = format.slice(lastEndIndex).trim().replace(/^[:\-\\/]/, "");
+    const commonPrefix = startDate.format(commonFormat.trim());
+    if (!remainingFormat || remainingFormat == format) {
+      return `${startDate.format(format)} ~ ${endDate.format(format)}`;
+    }
+    const formattedStart = startDate.format(remainingFormat);
+    const formattedEnd = endDate.format(remainingFormat);
+    return `${commonPrefix.trim()} (${formattedStart} ~ ${formattedEnd})`;
+  }
+  toEmitValue() {
+    var _a, _b;
+    return [
+      this.dateMode === DateMode.Date ? [
+        this.dateValue[0] === NowConstant ? NowConstant : this.startDate.valueOf(),
+        this.dateValue[1] === NowConstant ? NowConstant : this.endDate.valueOf()
+      ] : [...this.dateValue],
+      [
+        {
+          dayjs: this.startDate,
+          formatText: ((_a = this.startDate) == null ? void 0 : _a.format(this.format)) || null
+        },
+        {
+          dayjs: this.endDate,
+          formatText: ((_b = this.endDate) == null ? void 0 : _b.format(this.format)) || null
+        }
+      ]
+    ];
+  }
+  transformValue2Dayjs(val, type = "start") {
+    const value = isNaN(val) ? val : +val;
+    let date = dayjs(value);
+    if (typeof value === "number" || dayjs.isDayjs(value) || date.isValid())
+      return dayjs.tz(date.valueOf(), this.timezone);
+    const [, baselineTimeStr, num, unit, diffUnit] = value.match(baselineDateRegexp) || [];
+    const baselineTime = baselineTimeStr.replace(/[()]/g, "");
+    let baselineDayjs = dayjs();
+    if (baselineTime && baselineTime !== NowConstant) {
+      baselineDayjs = dayjs(baselineTime);
+      if (baselineDayjs.isValid()) {
+        date = baselineDayjs.add(-1, "ms").endOf("ms");
+      } else {
+        const [, , baseNum, baseUnit, baseDiffUnit] = baselineTime.match(baselineDateRegexp) || [];
+        this[`${type}BaselineNum`] = Math.abs(+baseNum);
+        this[`${type}BaselineUnit`] = baseUnit || baseDiffUnit;
+        baselineDayjs = transformValue2Dayjs(baselineTime, "start") || dayjs();
+        if (baselineTimeStr === value && baselineTimeStr.includes(NowConstant)) {
+          date = baselineDayjs.add(-1, "d").endOf("d");
+        }
+      }
+      this[`${type}BaselineTime`] = baselineTime;
+    }
+    if (type === "start") {
+      this.startNum = Math.abs(+num);
+      this.startUnit = unit || diffUnit;
+    } else if (type === "end") {
+      this.endNum = Math.abs(+num);
+      this.endUnit = unit || diffUnit;
+    }
+    if (num) {
+      date = baselineDayjs.add(+num, unit || diffUnit);
+    } else if (value === NowConstant) {
+      date = baselineDayjs;
+    }
+    if (diffUnit) {
+      date = type === "start" ? dayjs(date.isValid() ? date : baselineDayjs.valueOf()) : dayjs(date.isValid() ? date : baselineDayjs);
+      return type === "start" ? dayjs.tz(date.valueOf(), this.timezone).startOf(diffUnit) : dayjs.tz(date.valueOf(), this.timezone).endOf(diffUnit);
+    }
+    return dayjs.tz(date.valueOf(), this.timezone);
+  }
+  updateDateValue(dateValue, timezone) {
+    this.dateValue = dateValue;
+    const [start, end] = dateValue;
+    if (timezone) this.timezone = timezone;
+    this.startDate = start ? this.transformValue2Dayjs(start) : null;
+    this.endDate = end ? this.transformValue2Dayjs(end, "end") : null;
+  }
+  updateFormat(format) {
+    this.format = format;
+  }
+}
+const transformValue2Dayjs = (val, type = "start", timezone) => {
+  const value = isNaN(val) ? val : +val;
+  let date = dayjs(value);
+  if (typeof value === "number" || dayjs.isDayjs(value) || date.isValid())
+    return dayjs.tz(date.valueOf(), timezone || dayjs.tz.guess());
+  const [, baselineTimeStr, num, unit, diffUnit] = value.match(baselineDateRegexp) || [];
+  const baselineTime = baselineTimeStr.replace(/[()]/g, "");
+  let baselineDayjs = dayjs();
+  if (baselineTime && baselineTime !== NowConstant) {
+    baselineDayjs = transformValue2Dayjs(baselineTime, "start") || dayjs();
+    if (baselineTimeStr === value) {
+      date = baselineDayjs;
+    }
+  }
+  if (num) {
+    date = dayjs().add(+num, unit || diffUnit || "d");
+  } else if (value === NowConstant) {
+    date = dayjs();
+  }
+  if (diffUnit) {
+    date = type === "start" ? dayjs.tz(dayjs(date.isValid() ? date : void 0).valueOf(), timezone).startOf(diffUnit) : dayjs.tz(dayjs(date.isValid() ? date : void 0), timezone).endOf(diffUnit);
+    return (date == null ? void 0 : date.isValid()) ? date : void 0;
+  }
+  return date.isValid() ? dayjs.tz(date.valueOf(), timezone || dayjs.tz.guess()) : void 0;
+};
+const transformDateRange2Dayjs = (dateValue, timezone) => {
+  if (!Array.isArray(dateValue) || dateValue.length < 1) return [];
+  const [start, end] = dateValue || [];
+  const startDate = transformValue2Dayjs(start, "start", timezone);
+  const endDate = transformValue2Dayjs(end, "end", timezone);
+  return [startDate, endDate];
+};
+const inputVal2Dayjs = (val, format, defaultDate) => {
+  let date;
+  if (commonDateRegexp.test(val)) {
+    date = transformValue2Dayjs(val);
+  }
+  if (!date && !/Z$/i.test(val) && "YYYY-MM-DD HH:mm:ss".includes(format)) {
+    const d = val.match(DATE_REGEX_PARSE) || [];
+    if (d.length) {
+      let validate = true;
+      const ms = (d[7] || "0").substring(0, 3);
+      const s = d[6] || 0;
+      validate = +s < 60;
+      const m = d[5] || 0;
+      validate = validate && +m < 60;
+      const h2 = d[4] || 0;
+      validate = validate && +h2 < 24;
+      const day = d[3] || 1;
+      validate = validate && +day < 32;
+      const M = +d[2] - 1 || 0;
+      validate = validate && M < 12;
+      const y = d[1];
+      validate = validate && y.length < 5;
+      date = validate ? dayjs(new Date(+y, M, +day, +h2, +m, +s, +ms)) : defaultDate;
+    }
+  }
+  if (!date) {
+    date = dayjs(val);
+  }
+  return date;
+};
+function getTimezoneOffset(timezone) {
+  const localTime = dayjs().tz(timezone);
+  const offset = localTime.utcOffset() / 60;
+  return offset;
+}
+const isValidTimeZone = (timeZone) => {
+  try {
+    new Intl.DateTimeFormat("en-US", { timeZone });
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+const timeUnits = {
+  天: 24 * 60 * 60 * 1e3,
+  小时: 60 * 60 * 1e3,
+  分钟: 60 * 1e3,
+  秒: 1e3
+};
+const formatDuration = (milliseconds) => {
+  let remainingTime = milliseconds;
+  let result = "";
+  for (const [unit, value] of Object.entries(timeUnits)) {
+    const amount = Math.floor(remainingTime / value);
+    if (amount > 0) {
+      result += `${amount} ${t(unit)} `;
+      remainingTime %= value;
+    }
+  }
+  return result.trim();
+};
+const DATE_PICKER_PROVIDER_KEY = Symbol("DATE_PICKER_PROVIDER_KEY");
+const useDatePickerProvider = (data) => {
+  provide(DATE_PICKER_PROVIDER_KEY, data);
+};
+const useDatePickerInject = () => inject(DATE_PICKER_PROVIDER_KEY);
+const getStoreDateList = (storeKey2, type = "local") => {
+  const store = type === "local" ? localStorage : sessionStorage;
+  const storeListStr = store.getItem(storeKey2);
+  let list = [];
+  if (storeListStr) {
+    try {
+      list = JSON.parse(storeListStr);
+    } catch {
+      list = [];
+    }
+  }
+  if (!Array.isArray(list)) {
+    list = [];
+  }
+  return list;
+};
+const setStoreDateList = (val, storeKey2, type = "local") => {
+  let list = [];
+  const store = type === "local" ? localStorage : sessionStorage;
+  const storeListStr = store.getItem(storeKey2);
+  if (storeListStr) {
+    try {
+      list = JSON.parse(storeListStr);
+    } catch {
+      list = [];
+    }
+  }
+  if (!Array.isArray(list)) {
+    list = [];
+  }
+  if (list.some((item) => item[0] === val[0] && item[1] === val[1])) return;
+  list.unshift(val);
+  store.setItem(storeKey2, JSON.stringify(list.slice(0, 10)));
+};
+const _hoisted_1$9 = { class: "common-panel-tab" };
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "common-tab",
+  props: {
+    /** modelValue 选中的tab */
+    modelValue: {
+      required: true,
+      type: String
+    },
+    /** panels */
+    panels: {
+      required: true,
+      type: Array
+    }
+  },
+  emits: ["confirm", "update:modelValue"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+        createVNode(unref(Tab), {
+          active: __props.modelValue,
+          type: "unborder-card",
+          "onUpdate:active": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(__props.panels, (item) => {
+                return openBlock(), createBlock(unref(Tab).TabPanel, {
+                  key: item.id,
+                  label: item.name,
+                  name: item.id
+                }, null, 8, ["label", "name"]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["active"])
+      ]);
+    };
+  }
+});
+const useValidate = () => {
+  var _a;
+  const { format, timezoneInfo, validateTimeRange, minDuration, maxDuration } = useDatePickerInject();
+  const validMsg = ref("");
+  const validDateRange = customRef((track) => {
+    const date = new DateRange(validateTimeRange.value, format.value, timezoneInfo.value.label);
+    return {
+      get() {
+        var _a2;
+        track();
+        if (((_a2 = validateTimeRange.value) == null ? void 0 : _a2.length) !== 2) return void 0;
+        if (validateTimeRange.value.some((v) => typeof v === "string" && v.includes("now")))
+          return new DateRange(validateTimeRange.value, format.value, timezoneInfo.value.label);
+        return date;
+      },
+      set() {
+      }
+    };
+  });
+  const rangeMsg = t("超出可选范围") + " (" + ((_a = validDateRange.value) == null ? void 0 : _a.toDisplayString()) + ") " + t("，无法选择");
+  const validDuration = (validDate) => {
+    let date;
+    if (validDate instanceof DateRange) {
+      date = validDate;
+    } else {
+      date = new DateRange(validDate, format.value, timezoneInfo.value.label);
+    }
+    const durations = Math.abs(date.dateDuration("ms") || 0);
+    let message = "";
+    if (minDuration.value && durations < minDuration.value) {
+      message = t("时间范围不能小于") + " " + formatDuration(minDuration.value);
+    }
+    if (!message && maxDuration.value && durations > maxDuration.value) {
+      message = t("时间范围不能大于") + " " + formatDuration(maxDuration.value);
+    }
+    return message;
+  };
+  const commonValidateFn = (date) => {
+    var _a2;
+    const isValid = ((_a2 = validDateRange.value) == null ? void 0 : _a2.isInValidDateRange(date)) ?? true;
+    if (!isValid) {
+      validMsg.value = rangeMsg;
+      return isValid;
+    }
+    const message = validDuration(date);
+    validMsg.value = message;
+    return !message;
+  };
+  const validateDateValue = (validDate) => {
+    if (!(validDate == null ? void 0 : validDate.length)) return false;
+    const date = new DateRange(validDate, format.value, timezoneInfo.value.label);
+    return commonValidateFn(date);
+  };
+  const validateDateRange = (validDate) => {
+    if (!validDate.isValidate) return false;
+    return commonValidateFn(validDate);
+  };
+  const validateDayjs = (validDate) => {
+    var _a2;
+    validMsg.value = "";
+    if (!validDate.isValid()) return false;
+    const date = new DateRange([validDate.startOf("d"), validDate.endOf("d")], format.value, timezoneInfo.value.label);
+    const isValid = ((_a2 = validDateRange.value) == null ? void 0 : _a2.isInValidDateRange(date)) ?? true;
+    if (!isValid) {
+      validMsg.value = rangeMsg;
+    }
+    return isValid;
+  };
+  return {
+    validDateRange,
+    validMsg,
+    validateDateRange,
+    validateDateValue,
+    validateDayjs
+  };
+};
+const _hoisted_1$8 = {
+  key: 0,
+  class: "common-date-list"
+};
+const _hoisted_2$6 = ["onClick", "onMouseenter"];
+const _hoisted_3$5 = {
+  key: 1,
+  class: "common-wrapper"
+};
+const _hoisted_4$4 = { class: "empty-tips" };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "date-list",
+  props: {
+    dateList: {},
+    defaultDate: {},
+    isRecent: { type: Boolean }
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    let popoverInstance = null;
+    const { validMsg, validateDateRange } = useValidate();
+    const isSameDateRange = (date1, date2) => {
+      var _a, _b, _c, _d, _e, _f;
+      if (!date1 || !date2) return false;
+      if (((_b = (_a = date1.dateValue) == null ? void 0 : _a.join) == null ? void 0 : _b.call(_a, "~")) === ((_d = (_c = date2 == null ? void 0 : date2.dateValue) == null ? void 0 : _c.join) == null ? void 0 : _d.call(_c, "~"))) return true;
+      if (((_e = date1 == null ? void 0 : date1.toDisplayString) == null ? void 0 : _e.call(date1)) === ((_f = date2 == null ? void 0 : date2.toDisplayString) == null ? void 0 : _f.call(date2))) return true;
+      return false;
+    };
+    const handleChange = (date) => {
+      emits("change", date);
+    };
+    const handleShowDisableMsg = (e, date) => {
+      if (validateDateRange(date)) return;
+      popoverInstance = $bkPopover({
+        content: validMsg.value,
+        immediate: false,
+        isShow: true,
+        popoverDelay: 0,
+        target: e.target,
+        trigger: "manual"
+      });
+      popoverInstance == null ? void 0 : popoverInstance.show(e.target);
+    };
+    const handleHideDisableMsg = () => {
+      popoverInstance == null ? void 0 : popoverInstance.hide();
+    };
+    return (_ctx, _cache) => {
+      return _ctx.dateList.length ? (openBlock(), createElementBlock("ul", _hoisted_1$8, [
+        (openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList(_ctx.dateList, (date, index) => {
+            return openBlock(), createElementBlock("li", {
+              key: index,
+              class: normalizeClass({
+                "list-item": true,
+                "is-recent-item": _ctx.isRecent,
+                "is-selected": isSameDateRange(date, _ctx.defaultDate),
+                "is-disabled": !unref(validateDateRange)(date)
+              }),
+              onClick: ($event) => unref(validateDateRange)(date) && handleChange(date.dateValue),
+              onMouseenter: (e) => handleShowDisableMsg(e, date),
+              onMouseleave: handleHideDisableMsg
+            }, toDisplayString(date.toDisplayString()), 43, _hoisted_2$6);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ])) : (openBlock(), createElementBlock("div", _hoisted_3$5, [
+        createVNode(unref(Exception), {
+          class: "empty-content",
+          scene: "part",
+          type: "empty"
+        }),
+        createElementVNode(
+          "div",
+          _hoisted_4$4,
+          toDisplayString(_ctx.isRecent ? unref(t)("暂无最近使用记录") : unref(t)("暂无常用时间")),
+          1
+          /* TEXT */
+        )
+      ]));
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const DateList = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-ed496942"]]);
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "common-submit",
+  props: {
+    disabled: { type: Boolean },
+    disableTips: {}
+  },
+  emits: ["submit"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock(
+        Fragment,
+        null,
+        [
+          createVNode(unref(Popover), {
+            content: _ctx.disableTips,
+            disabled: !_ctx.disabled || !((_a = _ctx.disableTips) == null ? void 0 : _a.length)
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(Button), {
+                class: "common-submit",
+                disabled: _ctx.disabled,
+                outline: true,
+                theme: "primary",
+                onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("submit"))
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(
+                    toDisplayString(unref(t)("确定")),
+                    1
                     /* TEXT */
                   )
                 ]),
@@ -1933,480 +2531,650 @@ const _a = (l, a = "start", i) => {
             _: 1
             /* STABLE */
           }, 8, ["content", "disabled"]),
-          sa("v-if", !0)
+          createCommentVNode("v-if", true)
         ],
         64
         /* STABLE_FRAGMENT */
       );
     };
   }
-}), Ke = { class: "date-panel" }, Oe = { class: "date-panel-title" }, qe = { class: "date-panel-main" }, Fe = { class: "date-header" }, Ge = { class: "date-header-left" }, Je = { class: "date-header-center" }, Ze = /* @__PURE__ */ v(
-  "span",
-  { class: "date-split" },
-  null,
-  -1
-  /* HOISTED */
-), We = { class: "date-header-right" }, Qe = { class: "date-content" }, Xe = { class: "date-grid" }, at = ["onClick"], Ha = 6, va = 7, Ka = /* @__PURE__ */ X({
-  __name: "date-panel",
-  props: {
-    diableNow: { type: Boolean },
-    format: { default: "YYYY-MM-DD HH:mm:ss" },
-    isNow: { type: Boolean },
-    minDate: {},
-    modelValue: {},
-    title: {}
-  },
-  emits: ["update:isNow", "update:modelValue"],
-  setup(l, { emit: a }) {
-    const i = l, e = a, n = pa === "en" ? ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] : ["日", "一", "二", "三", "四", "五", "六"], b = Q([]), h = d(), m = Q(i.modelValue || h);
-    ma(
-      m,
-      () => {
-        const D = m.value.startOf("month").startOf("week").add(-1, "day"), N = [];
-        for (let Y = 0; Y < Ha * va; Y++)
-          N.push(D.add(Y, "day"));
-        b.value = N;
-      },
-      {
-        immediate: !0
-      }
-    );
-    const c = (D) => {
-      m.value = m.value.add(D, "month");
-    }, s = (D) => {
-      m.value = m.value.add(D, "year");
-    }, o = (D) => {
-      i.minDate && D.isBefore(i.minDate, "day") || e("update:modelValue", D);
-    };
-    let y = 0;
-    const S = (D) => {
-      D.preventDefault(), !i.diableNow && (y || (e("update:isNow", !i.isNow), y = setTimeout(() => {
-        clearTimeout(y), y = 0;
-      }, 500)));
-    };
-    return (D, N) => (p(), z("div", Ke, [
-      v("div", Oe, [
-        G(
-          k(D.title) + " ",
-          1
-          /* TEXT */
-        ),
-        v(
-          "span",
-          {
-            onMousedown: S,
-            class: "title-check"
-          },
-          [
-            E(t(pe), {
-              disabled: D.diableNow,
-              "model-value": D.isNow,
-              size: "small"
-            }, {
-              default: j(() => [
-                G(" now ")
-              ]),
-              _: 1
-              /* STABLE */
-            }, 8, ["disabled", "model-value"])
-          ],
-          32
-          /* NEED_HYDRATION */
-        )
-      ]),
-      v("div", qe, [
-        v("div", Fe, [
-          v("div", Ge, [
-            E(t(Ie), {
-              onClick: N[0] || (N[0] = (Y) => s(-1)),
-              class: "hand-icon"
-            }),
-            E(t(Wa), {
-              onClick: N[1] || (N[1] = (Y) => c(-1)),
-              class: "hand-icon"
-            })
-          ]),
-          v("div", Je, [
-            G(
-              k(m.value.year()),
-              1
-              /* TEXT */
-            ),
-            Ze,
-            G(
-              k(m.value.month() + 1),
-              1
-              /* TEXT */
-            )
-          ]),
-          v("div", We, [
-            E(t(Qa), {
-              onClick: N[2] || (N[2] = (Y) => c(1)),
-              class: "hand-icon"
-            }),
-            E(t(ke), {
-              onClick: N[3] || (N[3] = (Y) => s(1)),
-              class: "hand-icon"
-            })
-          ])
-        ]),
-        v("div", Qe, [
-          v("ul", Xe, [
-            (p(!0), z(
-              U,
-              null,
-              q(t(n), (Y, $) => (p(), z(
-                "li",
-                {
-                  key: $,
-                  class: "date-grid-item not-click"
-                },
-                k(Y),
+});
+const _hoisted_1$7 = { class: "date-panel" };
+const _hoisted_2$5 = {
+  key: 0,
+  class: "date-panel-title"
+};
+const _hoisted_3$4 = { class: "date-panel-main" };
+const _hoisted_4$3 = { class: "date-header" };
+const _hoisted_5$2 = { class: "date-header-left" };
+const _hoisted_6$2 = { class: "date-header-center" };
+const _hoisted_7$2 = { class: "date-header-right" };
+const _hoisted_8$1 = { class: "date-content" };
+const _hoisted_9 = { class: "date-grid" };
+const _hoisted_10 = ["onClick"];
+const panelRowCount = 6;
+const weekItemCount = 7;
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "date-panel",
+  props: {
+    disableNow: { type: Boolean },
+    format: { default: "YYYY-MM-DD HH:mm:ss" },
+    isNow: { type: Boolean },
+    minDate: {},
+    modelValue: {},
+    showTitle: { type: Boolean, default: true },
+    title: {}
+  },
+  emits: ["update:isNow", "update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const weekList = lang === "en" ? ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] : ["日", "一", "二", "三", "四", "五", "六"];
+    const panelDateList = shallowRef([]);
+    const today = dayjs();
+    const curPanelDate = shallowRef(props.modelValue || today);
+    const { validateDayjs } = useValidate();
+    watch(
+      curPanelDate,
+      () => {
+        const firstDay = curPanelDate.value.startOf("month").startOf("week").add(-1, "day");
+        const list = [];
+        for (let i = 0; i < panelRowCount * weekItemCount; i++) {
+          list.push(firstDay.add(i, "day"));
+        }
+        panelDateList.value = list;
+      },
+      {
+        immediate: true
+      }
+    );
+    const nextMonth = (number) => {
+      curPanelDate.value = curPanelDate.value.add(number, "month");
+    };
+    const nextYear = (number) => {
+      curPanelDate.value = curPanelDate.value.add(number, "year");
+    };
+    const handleDateChange = (date) => {
+      if (!validateDayjs(date) || props.minDate && date.isBefore(props.minDate, "day")) {
+        return;
+      }
+      emits("update:modelValue", date);
+    };
+    let timeout;
+    const handleMouseDown = (e) => {
+      e.preventDefault();
+      if (props.disableNow) return;
+      if (timeout) return;
+      emits("update:isNow", !props.isNow);
+      timeout = setTimeout(() => {
+        clearTimeout(timeout);
+        timeout = null;
+      }, 500);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+        _ctx.showTitle ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
+          createTextVNode(
+            toDisplayString(_ctx.title) + " ",
+            1
+            /* TEXT */
+          ),
+          createElementVNode(
+            "span",
+            {
+              class: "title-check",
+              onMousedown: handleMouseDown
+            },
+            [
+              createVNode(unref(Checkbox), {
+                disabled: _ctx.disableNow,
+                "model-value": _ctx.isNow,
+                size: "small"
+              }, {
+                default: withCtx(() => _cache[4] || (_cache[4] = [
+                  createTextVNode(" now ")
+                ])),
+                _: 1
+                /* STABLE */
+              }, 8, ["disabled", "model-value"])
+            ],
+            32
+            /* NEED_HYDRATION */
+          )
+        ])) : createCommentVNode("v-if", true),
+        createElementVNode("div", _hoisted_3$4, [
+          createElementVNode("div", _hoisted_4$3, [
+            createElementVNode("div", _hoisted_5$2, [
+              createVNode(unref(AngleDoubleLeft), {
+                class: "hand-icon",
+                onClick: _cache[0] || (_cache[0] = ($event) => nextYear(-1))
+              }),
+              createVNode(unref(AngleLeft), {
+                class: "hand-icon",
+                onClick: _cache[1] || (_cache[1] = ($event) => nextMonth(-1))
+              })
+            ]),
+            createElementVNode("div", _hoisted_6$2, [
+              createTextVNode(
+                toDisplayString(curPanelDate.value.year()),
                 1
                 /* TEXT */
-              ))),
-              128
-              /* KEYED_FRAGMENT */
-            ))
+              ),
+              _cache[5] || (_cache[5] = createElementVNode(
+                "span",
+                { class: "date-split" },
+                null,
+                -1
+                /* HOISTED */
+              )),
+              createTextVNode(
+                toDisplayString(curPanelDate.value.month() + 1),
+                1
+                /* TEXT */
+              )
+            ]),
+            createElementVNode("div", _hoisted_7$2, [
+              createVNode(unref(AngleRight), {
+                class: "hand-icon",
+                onClick: _cache[2] || (_cache[2] = ($event) => nextMonth(1))
+              }),
+              createVNode(unref(AngleDoubleRight), {
+                class: "hand-icon",
+                onClick: _cache[3] || (_cache[3] = ($event) => nextYear(1))
+              })
+            ])
           ]),
-          (p(), z(
-            U,
-            null,
-            q(Ha, (Y) => v("ul", {
-              key: Y,
-              class: "date-grid"
-            }, [
-              (p(!0), z(
-                U,
+          createElementVNode("div", _hoisted_8$1, [
+            createElementVNode("ul", _hoisted_9, [
+              (openBlock(true), createElementBlock(
+                Fragment,
                 null,
-                q(b.value.slice((Y - 1) * va, (Y - 1) * va + va), ($) => (p(), z("li", {
-                  class: da([{
-                    "is-last-month": $.isBefore(m.value, "month"),
-                    "is-next-month": $.isAfter(m.value, "month"),
-                    "is-today": $.isSame(t(h), "day"),
-                    "is-disabled": D.minDate && $.isBefore(D.minDate, "day"),
-                    "is-selected": i.modelValue && $.isSame(i.modelValue, "day")
-                  }, "date-grid-item"]),
-                  key: $.unix(),
-                  onClick: Ga((H) => o($), ["prevent"])
-                }, k($.date()), 11, at))),
+                renderList(unref(weekList), (day, index) => {
+                  return openBlock(), createElementBlock(
+                    "li",
+                    {
+                      key: index,
+                      class: "date-grid-item not-click"
+                    },
+                    toDisplayString(day),
+                    1
+                    /* TEXT */
+                  );
+                }),
                 128
                 /* KEYED_FRAGMENT */
               ))
-            ])),
-            64
-            /* STABLE_FRAGMENT */
-          ))
+            ]),
+            (openBlock(), createElementBlock(
+              Fragment,
+              null,
+              renderList(panelRowCount, (row) => {
+                return createElementVNode("ul", {
+                  key: row,
+                  class: "date-grid"
+                }, [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(panelDateList.value.slice((row - 1) * weekItemCount, (row - 1) * weekItemCount + weekItemCount), (date) => {
+                      return openBlock(), createElementBlock("li", {
+                        key: date.unix(),
+                        class: normalizeClass(["date-grid-item", {
+                          "is-last-month": date.isBefore(curPanelDate.value, "month"),
+                          "is-next-month": date.isAfter(curPanelDate.value, "month"),
+                          "is-today": date.isSame(unref(today), "day"),
+                          "is-disabled": !unref(validateDayjs)(date) || _ctx.minDate && date.isBefore(_ctx.minDate, "day"),
+                          "is-selected": props.modelValue && date.isSame(props.modelValue, "day")
+                        }]),
+                        onClick: withModifiers(($event) => handleDateChange(date), ["prevent"])
+                      }, toDisplayString(date.date()), 11, _hoisted_10);
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ]);
+              }),
+              64
+              /* STABLE_FRAGMENT */
+            ))
+          ])
         ])
-      ])
-    ]));
+      ]);
+    };
   }
-}), et = { class: "date-wrapper" }, tt = { class: "date-input" }, it = /* @__PURE__ */ v(
-  "span",
-  { class: "date-picker-icon" },
-  [
-    /* @__PURE__ */ v("svg", {
-      class: "date-content-icon",
-      height: "14",
-      version: "1.1",
-      viewBox: "0 0 1024 1024",
-      width: "14",
-      xmlns: "http://www.w3.org/2000/svg",
-      "xmlns:xlink": "http://www.w3.org/1999/xlink"
-    }, [
-      /* @__PURE__ */ v("path", {
-        d: "M558.933 465.067h-93.866v93.866h93.866v-93.866z m0 162.133h-93.866v93.867h93.866V627.2z m371.2-533.333h-93.866V21.333c0-12.8-8.534-21.333-21.334-21.333S793.6 8.533 793.6 21.333V89.6H234.667V21.333c0-12.8-12.8-21.333-25.6-21.333s-21.334 8.533-21.334 21.333V89.6H93.867C42.667 93.867 0 136.533 0 187.733V934.4c0 46.933 42.667 89.6 93.867 89.6h836.266c51.2 0 93.867-42.667 93.867-93.867v-742.4c0-51.2-42.667-93.866-93.867-93.866z m46.934 836.266c0 25.6-21.334 46.934-46.934 46.934H93.867c-25.6 0-46.934-21.334-46.934-46.934V371.2h930.134v558.933z m0-605.866H46.933V187.733c0-25.6 21.334-46.933 46.934-46.933h93.866v68.267c0 12.8 8.534 21.333 21.334 21.333s21.333-8.533 21.333-21.333V140.8h558.933v68.267c0 12.8 8.534 21.333 21.334 21.333S832 221.867 832 209.067V140.8h93.867c25.6 0 46.933 21.333 46.933 46.933v136.534h4.267zM789.333 627.2h-93.866v93.867h93.866V627.2z m0-162.133h-93.866v93.866h93.866v-93.866z m-230.4 324.266h-93.866V883.2h93.866v-93.867z m-234.666 0h-89.6V883.2h93.866v-93.867h-4.266z m0-324.266h-89.6v93.866h93.866v-93.866h-4.266z m0 162.133h-89.6v93.867h93.866V627.2h-4.266z",
-        fill: "#C4C6CC",
-        xmlns: "http://www.w3.org/2000/svg"
-      })
-    ])
-  ],
-  -1
-  /* HOISTED */
-), nt = ["placeholder", "value"], rt = /* @__PURE__ */ v(
-  "span",
-  { class: "date-picker-split" },
-  "~",
-  -1
-  /* HOISTED */
-), lt = ["placeholder", "value"], st = { class: "show-format" }, ct = { class: "date-format-wrapper" }, ut = { class: "content-title" }, ot = { class: "content-table" }, dt = /* @__PURE__ */ X({
+});
+const _hoisted_1$6 = { class: "date-wrapper" };
+const _hoisted_2$4 = { class: "date-input" };
+const _hoisted_3$3 = ["placeholder", "value"];
+const _hoisted_4$2 = ["placeholder", "value"];
+const _hoisted_5$1 = {
+  key: 0,
+  style: { "margin": "-8px 0 8px", "color": "#ea3636" }
+};
+const _hoisted_6$1 = { class: "show-format" };
+const _hoisted_7$1 = { class: "content-table" };
+const _hoisted_8 = ["onClick"];
+const DefaultCommitFormat = "YYYY-MM-DD HH:mm:ss";
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "date-picker",
   props: {
     value: {}
   },
   emits: ["change"],
-  setup(l, { emit: a }) {
-    d.extend(Oa);
-    const i = l, e = a, n = L(null), b = L(null), h = L(!1), m = L(!1), c = Q(), s = Q(), o = L(!1), y = L(!1), { format: S, timezoneInfo: D } = ee(), N = d();
-    ma(
-      () => i.value,
-      (f) => {
-        const { dateValue: u, endDate: M, startDate: w } = f;
-        c.value = w, s.value = M, o.value = u[0] === C, y.value = u[1] === C;
+  setup(__props, { expose: __expose, emit: __emit }) {
+    dayjs.extend(customParseFormat);
+    const props = __props;
+    const emits = __emit;
+    const startInput = ref(null);
+    const endInput = ref(null);
+    const showStartPanel = ref(false);
+    const showEndPanel = ref(false);
+    const startDate = shallowRef();
+    const endDate = shallowRef();
+    const isStartNow = ref(false);
+    const isEndNow = ref(false);
+    const { format, timezoneInfo, formatChange, enableFormatClick } = useDatePickerInject();
+    const today = dayjs();
+    const isValidate = ref(true);
+    const { validMsg, validateDateValue } = useValidate();
+    const curTimezoneInfo = ref(timezoneInfo.value || dayjs.tz.guess());
+    const canConfirm = computed(() => {
+      if (!startDate.value || !endDate.value) return false;
+      if (!startDate.value.isValid() || !endDate.value.isValid()) return false;
+      if (startDate.value.isSame(endDate.value, "ms")) return false;
+      if (startDate.value.format(format.value) === endDate.value.format(format.value)) return false;
+      if (startDate.value.isAfter(endDate.value)) return false;
+      return true;
+    });
+    const handleFormatChange = (f) => {
+      formatChange(f);
+    };
+    watch(
+      () => props.value,
+      (date) => {
+        const { dateValue, endDate: dateEnd, startDate: dateStart } = date;
+        startDate.value = dateStart;
+        endDate.value = dateEnd;
+        isStartNow.value = dateValue[0] === NowConstant;
+        isEndNow.value = dateValue[1] === NowConstant;
       },
       {
-        immediate: !0
+        immediate: true
       }
     );
-    const Y = J(() => !(!c.value || !s.value || !c.value.isValid() || !s.value.isValid() || c.value.isSame(s.value, "ms") || c.value.format(S.value) === s.value.format(S.value) || c.value.isAfter(s.value))), $ = async (f, u) => {
-      setTimeout(() => {
-        var za, Ea, Sa;
-        const M = u === "start" ? n.value : b.value, w = (za = M == null ? void 0 : M.value) == null ? void 0 : za.toString().trim(), R = u === "start" ? c.value : s.value, ea = u === "start" ? o : y, Ma = u === "start" ? y : o, ha = R == null ? void 0 : R.format(S.value);
-        if (w === ha || !w || w === C && ea.value)
-          return;
-        if (w === C && !ea.value && !Ma.value) {
-          x(u);
-          return;
+    watch(
+      () => timezoneInfo,
+      (newTimezone) => {
+        if (!timezoneInfo.value) return;
+        if (newTimezone.value.label === curTimezoneInfo.value.label) return;
+        if (newTimezone.value.utc === curTimezoneInfo.value.utc) return;
+        curTimezoneInfo.value = newTimezone.value || dayjs.tz.guess();
+        if (startDate.value) {
+          startDate.value = dayjs.tz(startDate.value, curTimezoneInfo.value.label);
+          startInput.value.value = startDate.value.format(format.value);
         }
-        let F;
-        if (oa.test(w) && (F = _a(w, u)), !F && !/Z$/i.test(w) && "YYYY-MM-DD HH:mm:ss".includes(S.value)) {
-          const ta = w.match($e) || [];
-          if (ta.length) {
-            let O = !0;
-            const le = (ta[7] || "0").substring(0, 3), Ca = ta[6] || 0;
-            O = Ca < 60;
-            const Pa = ta[5] || 0;
-            O = O && Pa < 60;
-            const Ta = ta[4] || 0;
-            O = O && Ta < 24;
-            const Va = ta[3] || 1;
-            O = O && Va < 32;
-            const Na = ta[2] - 1 || 0;
-            O = O && Na < 12;
-            const $a = ta[1];
-            O = O && $a.length < 5, F = O ? d(new Date($a, Na, Va, Ta, Pa, Ca, le)) : R;
+        if (endDate.value) {
+          endDate.value = dayjs.tz(endDate.value, curTimezoneInfo.value.label);
+          endInput.value.value = endDate.value.format(format.value);
+        }
+      },
+      {
+        deep: true
+      }
+    );
+    onActivated(() => {
+      setTimeout(() => {
+        var _a;
+        (_a = startInput.value) == null ? void 0 : _a.focus();
+        handleFocusStart();
+      }, 200);
+    });
+    const handleInputEnter = async (_, type) => {
+      var _a, _b, _c;
+      const target = type === "start" ? startInput.value : endInput.value;
+      const val = (_a = target == null ? void 0 : target.value) == null ? void 0 : _a.toString().trim();
+      const editDate = type === "start" ? startDate.value : endDate.value;
+      const curNow = type === "start" ? isStartNow : isEndNow;
+      const otherNow = type === "start" ? isEndNow : isStartNow;
+      const formatValue = editDate == null ? void 0 : editDate.format(format.value);
+      if (val === formatValue) return;
+      if (!val || val === NowConstant && curNow.value) return;
+      if (val === NowConstant && !curNow.value && !otherNow.value) {
+        handleIsNowChange(type);
+        return;
+      }
+      let date = inputVal2Dayjs(val, format.value, editDate);
+      if (date.isValid()) {
+        if (!(editDate == null ? void 0 : editDate.isSame(date))) {
+          curNow.value = val === NowConstant;
+          if (type === "start") {
+            handleStartTimeChange(!startDate.value ? date.startOf("d") : date);
+          } else {
+            handleEndTimeChange(!endDate.value ? date.endOf("d") : date);
           }
         }
-        F || (F = d(w)), F.isValid() && (R != null && R.isSame(F) || (ea.value = w === C, u === "start" ? P(c ? F : F.startOf("d")) : B(s ? F : F.endOf("d")))), M.value = u === "start" ? ((Ea = c.value) == null ? void 0 : Ea.format(S.value)) || "" : ((Sa = s.value) == null ? void 0 : Sa.format(S.value)) || "";
-      }, 16);
-    }, H = () => {
-      h.value = !0, g();
-    }, _ = () => {
-      m.value = !0, A();
-    }, A = (f = 32) => {
-      setTimeout(() => h.value = !1, f);
-    }, g = (f = 32) => {
-      setTimeout(() => m.value = !1, f);
-    }, P = (f) => {
-      var u, M;
-      (u = c.value) != null && u.isSame(f) || (c.value = f, o.value = !1), s.value || ((M = b.value) == null || M.focus(), _()), A();
-    }, B = (f) => {
-      var u, M;
-      (u = s.value) != null && u.isSame(f) || (s.value = f, y.value = !1), c.value || ((M = n.value) == null || M.focus(), H()), g();
-    }, x = (f) => {
-      f === "start" ? (o.value = !o.value, y.value = !1, c.value = d(), s.value ? o.value && A() : (setTimeout(() => {
-        var u;
-        (u = b.value) == null || u.focus(), _();
-      }, 200), A())) : (y.value = !y.value, o.value = !1, s.value = d(), c.value ? y.value && g() : (setTimeout(() => {
-        var u;
-        (u = n.value) == null || u.focus(), H();
-      }, 200), g()));
-    }, T = () => {
-      c.value = void 0, s.value = void 0, o.value = !1, y.value = !1, A(), g();
-    }, V = () => {
-      if (c.value && s.value) {
-        const f = o.value ? C : c.value.tz(D.value.label, !0).valueOf(), u = y.value ? C : s.value.tz(D.value.label, !0).valueOf();
-        e("change", [f || "", u || ""]);
       }
-    }, aa = (f) => {
-      var u;
-      h.value && ((u = document.querySelector(".__date-picker-popover-start__")) != null && u.contains(f.target) || A());
-    }, W = (f) => {
-      var u;
-      m.value && ((u = document.querySelector(".__date-picker-popover-end__")) != null && u.contains(f.target) || g());
-    };
-    return (f, u) => {
-      var M;
-      return p(), z("div", et, [
-        v("div", tt, [
-          v(
+      target.value = type === "start" ? ((_b = startDate.value) == null ? void 0 : _b.format(format.value)) || "" : ((_c = endDate.value) == null ? void 0 : _c.format(format.value)) || "";
+    };
+    const handleFocusStart = () => {
+      showStartPanel.value = true;
+      isValidate.value = true;
+      hiddenEndPanel();
+    };
+    const handleFocusEnd = () => {
+      showEndPanel.value = true;
+      isValidate.value = true;
+      hiddenStartPanel();
+    };
+    const hiddenStartPanel = (interval = 32) => {
+      setTimeout(() => showStartPanel.value = false, interval);
+    };
+    const hiddenEndPanel = (interval = 32) => {
+      setTimeout(() => showEndPanel.value = false, interval);
+    };
+    const handleStartTimeChange = (date) => {
+      var _a, _b;
+      if (!((_a = startDate.value) == null ? void 0 : _a.isSame(date))) {
+        startDate.value = date;
+        isStartNow.value = false;
+      }
+      (_b = endInput.value) == null ? void 0 : _b.focus();
+      handleFocusEnd();
+      hiddenStartPanel();
+    };
+    const handleEndTimeChange = (date) => {
+      var _a, _b;
+      if (!((_a = endDate.value) == null ? void 0 : _a.isSame(date))) {
+        endDate.value = date;
+        isEndNow.value = false;
+      }
+      if (!startDate.value) {
+        (_b = startInput.value) == null ? void 0 : _b.focus();
+        handleFocusStart();
+      }
+      hiddenEndPanel();
+    };
+    const handleIsNowChange = (type) => {
+      if (type === "start") {
+        isStartNow.value = !isStartNow.value;
+        isEndNow.value = false;
+        startDate.value = dayjs();
+        if (!endDate.value) {
+          setTimeout(() => {
+            var _a;
+            (_a = endInput.value) == null ? void 0 : _a.focus();
+            handleFocusEnd();
+          }, 200);
+          hiddenStartPanel();
+        } else if (isStartNow.value) {
+          hiddenStartPanel();
+        }
+      } else {
+        isEndNow.value = !isEndNow.value;
+        isStartNow.value = false;
+        endDate.value = dayjs();
+        if (!startDate.value) {
+          setTimeout(() => {
+            var _a;
+            (_a = startInput.value) == null ? void 0 : _a.focus();
+            handleFocusStart();
+          }, 200);
+          hiddenEndPanel();
+        } else if (isEndNow.value) {
+          hiddenEndPanel();
+        }
+      }
+    };
+    const handleClear = () => {
+      startDate.value = void 0;
+      endDate.value = void 0;
+      isStartNow.value = false;
+      isEndNow.value = false;
+      hiddenStartPanel();
+      hiddenEndPanel();
+    };
+    const handleSubmit = () => {
+      if (startDate.value && endDate.value && canConfirm.value) {
+        const startValue = isStartNow.value ? NowConstant : dayjs.tz(startDate.value.format(format.value ?? DefaultCommitFormat), timezoneInfo.value.label).valueOf();
+        const endValue = isEndNow.value ? NowConstant : dayjs.tz(endDate.value.format(format.value ?? DefaultCommitFormat), timezoneInfo.value.label).valueOf();
+        isValidate.value = validateDateValue([startValue || "", endValue || ""]);
+        if (!isValidate.value) return;
+        emits("change", [startValue || "", endValue || ""]);
+      }
+    };
+    const handleClickoutsideStart = (e) => {
+      var _a;
+      if (!showStartPanel.value) return;
+      if (!((_a = document.querySelector(".__date-picker-popover-start__")) == null ? void 0 : _a.contains(e.target))) {
+        hiddenStartPanel();
+      }
+    };
+    const handleClickoutsideEnd = (e) => {
+      var _a;
+      if (!showEndPanel.value) return;
+      if (!((_a = document.querySelector(".__date-picker-popover-end__")) == null ? void 0 : _a.contains(e.target))) {
+        hiddenEndPanel();
+      }
+    };
+    __expose({
+      handleSubmit
+    });
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+        createElementVNode("div", _hoisted_2$4, [
+          createElementVNode(
             "div",
             {
-              style: Ja({
-                "border-color": h.value || m.value ? "#3A84FF" : "#C4C6CC"
-              }),
-              class: "date-picker"
+              class: "date-picker",
+              style: normalizeStyle({
+                "border-color": !isValidate.value ? "#ea3636" : showStartPanel.value || showEndPanel.value ? "#3A84FF" : "#C4C6CC"
+              })
             },
             [
-              it,
-              E(t(ca), {
-                arrow: !1,
-                "is-show": h.value,
+              _cache[8] || (_cache[8] = createElementVNode(
+                "span",
+                { class: "date-picker-icon" },
+                [
+                  createElementVNode("svg", {
+                    class: "date-content-icon",
+                    height: "14",
+                    version: "1.1",
+                    viewBox: "0 0 1024 1024",
+                    width: "14",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+                  }, [
+                    createElementVNode("path", {
+                      d: "M558.933 465.067h-93.866v93.866h93.866v-93.866z m0 162.133h-93.866v93.867h93.866V627.2z m371.2-533.333h-93.866V21.333c0-12.8-8.534-21.333-21.334-21.333S793.6 8.533 793.6 21.333V89.6H234.667V21.333c0-12.8-12.8-21.333-25.6-21.333s-21.334 8.533-21.334 21.333V89.6H93.867C42.667 93.867 0 136.533 0 187.733V934.4c0 46.933 42.667 89.6 93.867 89.6h836.266c51.2 0 93.867-42.667 93.867-93.867v-742.4c0-51.2-42.667-93.866-93.867-93.866z m46.934 836.266c0 25.6-21.334 46.934-46.934 46.934H93.867c-25.6 0-46.934-21.334-46.934-46.934V371.2h930.134v558.933z m0-605.866H46.933V187.733c0-25.6 21.334-46.933 46.934-46.933h93.866v68.267c0 12.8 8.534 21.333 21.334 21.333s21.333-8.533 21.333-21.333V140.8h558.933v68.267c0 12.8 8.534 21.333 21.334 21.333S832 221.867 832 209.067V140.8h93.867c25.6 0 46.933 21.333 46.933 46.933v136.534h4.267zM789.333 627.2h-93.866v93.867h93.866V627.2z m0-162.133h-93.866v93.866h93.866v-93.866z m-230.4 324.266h-93.866V883.2h93.866v-93.867z m-234.666 0h-89.6V883.2h93.866v-93.867h-4.266z m0-324.266h-89.6v93.866h93.866v-93.866h-4.266z m0 162.133h-89.6v93.867h93.866V627.2h-4.266z",
+                      fill: "#C4C6CC",
+                      xmlns: "http://www.w3.org/2000/svg"
+                    })
+                  ])
+                ],
+                -1
+                /* HOISTED */
+              )),
+              createVNode(unref(Popover), {
+                arrow: false,
                 boundary: "parent",
                 "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-start__",
+                "is-show": showStartPanel.value,
                 placement: "bottom-start",
                 theme: "light",
                 trigger: "manual"
               }, {
-                content: j(() => [
-                  E(Ka, {
-                    "diable-now": y.value,
-                    format: t(S),
-                    "is-now": o.value,
-                    "model-value": c.value,
-                    title: t(r)("开始时间"),
-                    "onUpdate:isNow": u[2] || (u[2] = () => x("start")),
-                    "onUpdate:modelValue": P,
-                    key: "start"
-                  }, null, 8, ["diable-now", "format", "is-now", "model-value", "title"])
+                content: withCtx(() => [
+                  createVNode(_sfc_main$7, {
+                    key: "start",
+                    "disable-now": isEndNow.value,
+                    format: unref(format),
+                    "is-now": isStartNow.value,
+                    "model-value": startDate.value,
+                    title: unref(t)("开始时间"),
+                    "onUpdate:isNow": _cache[2] || (_cache[2] = () => handleIsNowChange("start")),
+                    "onUpdate:modelValue": _cache[3] || (_cache[3] = (date) => handleStartTimeChange(date.startOf("d")))
+                  }, null, 8, ["disable-now", "format", "is-now", "model-value", "title"])
                 ]),
-                default: j(() => {
-                  var w;
+                default: withCtx(() => {
+                  var _a2;
                   return [
-                    fa(v("input", {
-                      placeholder: t(r)("开始时间"),
-                      value: o.value ? t(C) : (w = c.value) == null ? void 0 : w.format(t(S)),
-                      onBlur: u[0] || (u[0] = (R) => $(R, "start")),
-                      onClick: H,
-                      onKeypress: u[1] || (u[1] = ja((R) => $(R, "start"), ["enter"])),
-                      class: "date-picker-start",
+                    withDirectives(createElementVNode("input", {
                       ref_key: "startInput",
-                      ref: n,
-                      spellcheck: "false"
-                    }, null, 40, nt), [
-                      [t(Aa), aa]
+                      ref: startInput,
+                      class: "date-picker-start",
+                      placeholder: unref(t)("开始时间"),
+                      spellcheck: "false",
+                      value: isStartNow.value ? unref(NowConstant) : (_a2 = startDate.value) == null ? void 0 : _a2.format(unref(format)),
+                      onBlur: _cache[0] || (_cache[0] = (e) => handleInputEnter(e, "start")),
+                      onClick: handleFocusStart,
+                      onKeypress: _cache[1] || (_cache[1] = withKeys((e) => handleInputEnter(e, "start"), ["enter"]))
+                    }, null, 40, _hoisted_3$3), [
+                      [unref(clickoutside), handleClickoutsideStart]
                     ])
                   ];
                 }),
                 _: 1
                 /* STABLE */
               }, 8, ["is-show"]),
-              rt,
-              E(t(ca), {
-                arrow: !1,
-                "is-show": m.value,
+              _cache[9] || (_cache[9] = createElementVNode(
+                "span",
+                { class: "date-picker-split" },
+                "~",
+                -1
+                /* HOISTED */
+              )),
+              createVNode(unref(Popover), {
+                arrow: false,
                 boundary: "parent",
                 "ext-cls": "__bk-date-picker-popover__ __date-picker-popover-end__",
+                "is-show": showEndPanel.value,
                 placement: "bottom-start",
                 theme: "light",
                 trigger: "manual"
               }, {
-                content: j(() => [
-                  E(Ka, {
-                    "diable-now": o.value,
-                    format: t(S),
-                    "is-now": y.value,
-                    "model-value": s.value,
-                    title: t(r)("结束时间"),
-                    "onUpdate:isNow": u[5] || (u[5] = () => x("end")),
-                    "onUpdate:modelValue": u[6] || (u[6] = (w) => B(w.endOf("d"))),
-                    key: "end"
-                  }, null, 8, ["diable-now", "format", "is-now", "model-value", "title"])
+                content: withCtx(() => [
+                  createVNode(_sfc_main$7, {
+                    key: "end",
+                    "disable-now": isStartNow.value,
+                    format: unref(format),
+                    "is-now": isEndNow.value,
+                    "model-value": endDate.value,
+                    title: unref(t)("结束时间"),
+                    "onUpdate:isNow": _cache[6] || (_cache[6] = () => handleIsNowChange("end")),
+                    "onUpdate:modelValue": _cache[7] || (_cache[7] = (date) => handleEndTimeChange(date.endOf("d")))
+                  }, null, 8, ["disable-now", "format", "is-now", "model-value", "title"])
                 ]),
-                default: j(() => {
-                  var w;
+                default: withCtx(() => {
+                  var _a2;
                   return [
-                    fa(v("input", {
-                      placeholder: t(r)("结束时间"),
-                      value: y.value ? t(C) : (w = s.value) == null ? void 0 : w.format(t(S)),
-                      onBlur: u[3] || (u[3] = (R) => $(R, "end")),
-                      onClick: _,
-                      onKeypress: u[4] || (u[4] = ja((R) => $(R, "end"), ["enter"])),
-                      class: "date-picker-end",
+                    withDirectives(createElementVNode("input", {
                       ref_key: "endInput",
-                      ref: b
-                    }, null, 40, lt), [
-                      [t(Aa), W]
+                      ref: endInput,
+                      class: "date-picker-end",
+                      placeholder: unref(t)("结束时间"),
+                      value: isEndNow.value ? unref(NowConstant) : (_a2 = endDate.value) == null ? void 0 : _a2.format(unref(format)),
+                      onBlur: _cache[4] || (_cache[4] = (e) => handleInputEnter(e, "end")),
+                      onClick: handleFocusEnd,
+                      onKeypress: _cache[5] || (_cache[5] = withKeys((e) => handleInputEnter(e, "end"), ["enter"]))
+                    }, null, 40, _hoisted_4$2), [
+                      [unref(clickoutside), handleClickoutsideEnd]
                     ])
                   ];
                 }),
                 _: 1
                 /* STABLE */
               }, 8, ["is-show"]),
-              c.value || s.value ? (p(), K(t(ye), {
-                key: 0,
-                onClick: T,
-                class: "date-picker-clear"
-              })) : sa("v-if", !0)
+              createVNode(unref(Close), {
+                class: "date-picker-clear",
+                style: normalizeStyle({
+                  visibility: startDate.value || endDate.value ? "visible" : "hidden"
+                }),
+                onClick: handleClear
+              }, null, 8, ["style"])
             ],
             4
             /* STYLE */
           ),
-          E(Da, {
-            "disable-tips": (M = c.value) != null && M.isAfter(s.value) ? t(r)("开始时间不能大于结束时间") : "",
-            disabled: !Y.value,
-            onSubmit: V
-          }, null, 8, ["disable-tips", "disabled"])
+          createElementVNode("div", null, [
+            createVNode(_sfc_main$8, {
+              ref: "submit",
+              "disable-tips": ((_a = startDate.value) == null ? void 0 : _a.isAfter(endDate.value)) ? unref(t)("开始时间不能大于结束时间") : "",
+              disabled: !canConfirm.value,
+              onSubmit: handleSubmit
+            }, null, 8, ["disable-tips", "disabled"])
+          ])
         ]),
-        v("div", st, [
-          G(
-            k(t(r)("支持多种时间格式自动转换")) + " ",
-            1
-            /* TEXT */
-          ),
-          E(t(ca), {
-            trigger: "click",
+        !isValidate.value ? (openBlock(), createElementBlock(
+          "div",
+          _hoisted_5$1,
+          toDisplayString(unref(validMsg)),
+          1
+          /* TEXT */
+        )) : createCommentVNode("v-if", true),
+        createElementVNode("div", _hoisted_6$1, [
+          createCommentVNode(" {{ t('支持多种时间格式自动转换') }} "),
+          createVNode(unref(Popover), {
+            arrow: false,
             "ext-cls": "__bk-date-picker-popover__",
-            placement: "bottom",
-            theme: "light"
+            placement: "bottom-start",
+            theme: "light",
+            trigger: "click"
           }, {
-            content: j(() => [
-              v("div", ct, [
-                v(
-                  "div",
-                  ut,
-                  k(t(r)("时间格式支持")),
-                  1
-                  /* TEXT */
-                ),
-                v("table", ot, [
-                  v("thead", null, [
-                    v("tr", null, [
-                      v(
-                        "th",
-                        null,
-                        k(t(r)("格式")),
-                        1
-                        /* TEXT */
-                      ),
-                      v(
-                        "th",
+            content: withCtx(() => [
+              createElementVNode(
+                "div",
+                {
+                  class: normalizeClass(["date-format-wrapper", { "enable-format-click": unref(enableFormatClick) }])
+                },
+                [
+                  createCommentVNode(` <div class="content-title">
+              {{ t('时间格式支持') }}
+            </div> `),
+                  createElementVNode("table", _hoisted_7$1, [
+                    createCommentVNode(" <thead>\n                <tr>\n                  <th>{{ t('格式') }}</th>\n                  <th>{{ t('示例') }}</th>\n                </tr>\n              </thead> "),
+                    createElementVNode("tbody", null, [
+                      (openBlock(true), createElementBlock(
+                        Fragment,
                         null,
-                        k(t(r)("示例")),
-                        1
-                        /* TEXT */
-                      )
+                        renderList(unref(dateFormatList), (f) => {
+                          return openBlock(), createElementBlock("tr", { key: f }, [
+                            createElementVNode("td", {
+                              class: "cell-format-value",
+                              onClick: () => handleFormatChange(f)
+                            }, toDisplayString(f), 9, _hoisted_8),
+                            createElementVNode(
+                              "td",
+                              null,
+                              toDisplayString(unref(today).format(f)),
+                              1
+                              /* TEXT */
+                            )
+                          ]);
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
                     ])
-                  ]),
-                  v("tbody", null, [
-                    (p(!0), z(
-                      U,
-                      null,
-                      q(t(Ve), (w) => (p(), z("tr", { key: w }, [
-                        v(
-                          "td",
-                          null,
-                          k(w),
-                          1
-                          /* TEXT */
-                        ),
-                        v(
-                          "td",
-                          null,
-                          k(t(N).format(w)),
-                          1
-                          /* TEXT */
-                        )
-                      ]))),
-                      128
-                      /* KEYED_FRAGMENT */
-                    ))
                   ])
-                ])
-              ])
+                ],
+                2
+                /* CLASS */
+              )
             ]),
-            default: j(() => [
-              E(t(wa), {
+            default: withCtx(() => [
+              createVNode(unref(Button), {
                 class: "format-button",
                 text: "",
                 theme: "primary"
               }, {
-                default: j(() => [
-                  G(
-                    k(t(r)("查看支持格式")),
+                default: withCtx(() => [
+                  createTextVNode(
+                    toDisplayString(unref(t)("时间格式转换")) + " ",
                     1
                     /* TEXT */
-                  )
+                  ),
+                  createVNode(unref(Transfer))
                 ]),
                 _: 1
                 /* STABLE */
@@ -2419,434 +3187,774 @@ const _a = (l, a = "start", i) => {
       ]);
     };
   }
-}), mt = { class: "natural-picker" }, ht = ["onClick"], vt = "__", bt = /* @__PURE__ */ X({
+});
+const _hoisted_1$5 = { class: "date-title" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "date-title",
+  emits: ["confirm"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+        (openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList(unref(panels), (item) => {
+            return openBlock(), createElementBlock("div", {
+              key: item.id,
+              class: "date-title-item"
+            }, [
+              createTextVNode(
+                toDisplayString(item.name) + " ",
+                1
+                /* TEXT */
+              ),
+              item.id === "recent" ? (openBlock(), createBlock(unref(PopConfirm), {
+                key: 0,
+                "cancel-text": unref(t)("取消"),
+                "confirm-text": unref(t)("确定"),
+                content: unref(t)("是否清空最近使用？"),
+                "ext-cls": "__bk-date-picker-popover__ __bk-date-picker-popover-delete__",
+                trigger: "click",
+                width: 189,
+                onConfirm: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("confirm"))
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(Del), { class: "delete-all" })
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["cancel-text", "confirm-text", "content"])) : createCommentVNode("v-if", true)
+            ]);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ]);
+    };
+  }
+});
+const DateTitle = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-03d5d182"]]);
+const _hoisted_1$4 = ["onClick"];
+const _hoisted_2$3 = {
+  key: 0,
+  style: { "margin": "-8px 0 4px", "color": "#ea3636" }
+};
+const splitDate = "__";
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "natural-picker",
   props: {
     value: {}
   },
   emits: ["change"],
-  setup(l, { emit: a }) {
-    const i = L(), e = a, n = l, b = L(), h = Q(xa.slice()), m = L(Ra[0].id), c = L(""), s = L(), o = L(h.value[0]);
-    ne(Ia(), "session").forEach((_) => {
-      const [A, g] = _;
-      if (d.isDayjs(A) || d.isDayjs(g))
-        return;
-      const P = new ra(_), { startNum: B, startUnit: x } = P;
-      if (!h.value.find((V) => V.id === A)) {
-        const V = `${`${r("前")} ${B} ${r(
-          la[x]
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emits = __emit;
+    const props = __props;
+    const inputRef = ref();
+    const naturalSelectRef = ref();
+    const naturalOptions = shallowRef(CommonNaturalOptions.slice());
+    const naturalUnitValue = ref(naturalUnitOptions[0].id);
+    const canEditNaturalId = ref("");
+    const inputValue = ref();
+    const naturalValue = ref(naturalOptions.value[0]);
+    const isValidate = ref(true);
+    const { validMsg, validateDateValue } = useValidate();
+    getStoreDateList(getStoreKey(), "session").forEach((item) => {
+      const [start, end] = item;
+      if (dayjs.isDayjs(start) || dayjs.isDayjs(end)) return;
+      const date = new DateRange(item);
+      const { startNum, startUnit } = date;
+      const specialDate = naturalOptions.value.find((item2) => item2.id === start);
+      if (!specialDate) {
+        const name = `${`${t("前")} ${startNum} ${t(
+          shortTimeUnitLangData[startUnit]
         )}`}`;
-        h.value.unshift({
-          id: A,
-          name: V,
-          type: ia.custom
+        naturalOptions.value.unshift({
+          id: start,
+          name,
+          type: NaturalOptionType.custom
         });
       }
-    }), ma(
-      () => n.value,
-      (_) => {
-        if (!_ || _.dateMode !== I.NATURAL)
-          return;
-        const [A, g] = _.dateValue;
-        if (d.isDayjs(A) || d.isDayjs(g))
-          return;
-        const { startNum: P, startUnit: B } = _;
-        m.value = g === C ? ba.NOW : ba.ALL;
-        const x = h.value.find((V) => V.id === A && V.type === ia.custom);
-        if (x) {
-          o.value = x;
+    });
+    watch(
+      () => props.value,
+      (date) => {
+        if (!date) return;
+        if (date.dateMode !== DateMode.NATURAL) return;
+        const [start, end] = date.dateValue;
+        if (dayjs.isDayjs(start) || dayjs.isDayjs(end)) return;
+        const { startNum, startUnit } = date;
+        naturalUnitValue.value = end === NowConstant ? NaturalUnit.NOW : NaturalUnit.ALL;
+        const customDate = naturalOptions.value.find((item) => item.id === start && item.type === NaturalOptionType.custom);
+        if (customDate) {
+          naturalValue.value = customDate;
           return;
         }
-        const T = xa.find((V) => V.id === A && V.type === ia.default);
-        if (g !== C && A !== g && T || !T) {
-          const V = `${`${r("前")} ${P} ${r(
-            la[B]
+        const specialDate = CommonNaturalOptions.find(
+          (item) => item.id === start && item.type === NaturalOptionType.default
+        );
+        if (end !== NowConstant && start !== end && specialDate || !specialDate) {
+          const name = `${`${t("前")} ${startNum} ${t(
+            shortTimeUnitLangData[startUnit]
           )}`}`;
-          h.value.unshift({
-            id: A,
-            name: V,
-            type: ia.custom
-          }), [o.value] = h.value;
+          naturalOptions.value.unshift({
+            id: start,
+            name,
+            type: NaturalOptionType.custom
+          });
+          [naturalValue.value] = naturalOptions.value;
           return;
         }
-        T && (o.value = T);
+        specialDate && (naturalValue.value = specialDate);
       },
       {
-        immediate: !0
+        immediate: true
       }
     );
-    const y = (_) => `${_.id}${vt}${_.type}`, S = (_) => {
-      const A = _.id;
-      if (m.value === ba.ALL) {
-        const [, g, P, B] = A.match(ya) || [];
-        return Math.abs(+g) > 1 ? Math.abs(+g) === 2 && P === "d" ? [A, A] : [A, `now-1${P}/${B}`] : [A, A];
+    const getNaturalOptionId = (date) => {
+      return `${date.id}${splitDate}${date.type}`;
+    };
+    const getNaturalDateValue = (date) => {
+      const value = date.id;
+      if (naturalUnitValue.value === NaturalUnit.ALL) {
+        const [, num, unit, dateUnit2] = value.match(naturalDateRegexp) || [];
+        if (Math.abs(+num) > 1) {
+          if (Math.abs(+num) === 2 && unit === "d") return [value, value];
+          return [value, `now-1${unit}/${dateUnit2}`];
+        }
+        return [value, value];
       }
-      return [A, C];
-    }, D = (_) => {
-      var A;
-      if (_.type === ia.edit) {
-        s.value = 1, c.value = _.id, setTimeout(() => {
-          var g, P, B;
-          (B = (P = (g = i.value) == null ? void 0 : g[0]) == null ? void 0 : P.focus) == null || B.call(P);
+      return [value, NowConstant];
+    };
+    const handleClickItem = (item) => {
+      var _a;
+      if (item.type === NaturalOptionType.edit) {
+        inputValue.value = 1;
+        canEditNaturalId.value = item.id;
+        setTimeout(() => {
+          var _a2, _b, _c;
+          (_c = (_b = (_a2 = inputRef.value) == null ? void 0 : _a2[0]) == null ? void 0 : _b.focus) == null ? void 0 : _c.call(_b);
         }, 20);
         return;
       }
-      o.value = _, c.value = "", (A = b.value) == null || A.hidePopover();
-    }, N = (_) => {
-      m.value = _;
-    }, Y = (_, A) => {
-      var B, x;
-      c.value = "";
-      const g = `now-${+_}${A.unit}/${A.unit}`, P = h.value.find((T) => T.id === g);
-      if (P) {
-        o.value = P, (B = b.value) == null || B.hidePopover();
+      naturalValue.value = item;
+      canEditNaturalId.value = "";
+      (_a = naturalSelectRef.value) == null ? void 0 : _a.hidePopover();
+    };
+    const handleUnitChange = (value) => {
+      naturalUnitValue.value = value;
+    };
+    const customNaturalOptions = (v, item) => {
+      var _a, _b;
+      canEditNaturalId.value = "";
+      const value = `now-${+v}${item.unit}/${item.unit}`;
+      const date = naturalOptions.value.find((item2) => item2.id === value);
+      if (date) {
+        naturalValue.value = date;
+        (_a = naturalSelectRef.value) == null ? void 0 : _a.hidePopover();
         return;
       }
-      h.value.unshift({
-        id: g,
-        name: A.name.replace("N", _.toString()),
-        type: ia.custom
-      }), [o.value] = h.value, (x = b.value) == null || x.hidePopover();
-    }, $ = (_, A, g) => {
-      !A || +A < 1 || _.key !== "Enter" || !c.value || Y(Math.ceil(A), g);
-    }, H = () => {
-      h.value.filter((_) => _.type === ia.custom).forEach((_) => {
-        re(S(_), Ia(), "session");
-      }), e("change", S(o.value));
-    };
-    return (_, A) => (p(), z("div", mt, [
-      E(t(Z), {
-        clearable: !1,
-        "input-search": !1,
-        "model-value": y(o.value),
-        "no-match-text": t(r)("无匹配数据"),
-        "popover-min-width": 130,
-        "popover-options": { boundary: "parent", extCls: "__bk-date-picker-popover__" },
-        prefix: t(r)("自然日期"),
-        "search-placeholder": t(r)("请输入"),
-        class: "natural-date",
-        filterable: "",
-        ref_key: "naturalSelectRef",
-        ref: b
-      }, {
-        default: j(() => [
-          (p(!0), z(
-            U,
-            null,
-            q(h.value, (g) => (p(), K(t(Z).Option, {
-              id: y(g),
-              key: y(g),
-              name: g.name
-            }, {
-              default: j(() => [
-                v("div", {
-                  onClick: A[1] || (A[1] = Ga(() => {
-                  }, ["prevent", "stop"])),
-                  class: "natural-custom-option"
-                }, [
-                  c.value === g.id ? (p(), K(t(Za), {
-                    key: 0,
-                    clearable: !1,
-                    min: 1,
-                    placeholder: t(r)("请输入"),
-                    precision: 0,
-                    prefix: g.prefix,
-                    "show-control": !0,
-                    suffix: g.suffix,
-                    onKeypress: (P, B) => $(B, P, g),
-                    autofocus: "true",
-                    ref_for: !0,
-                    ref_key: "inputRef",
-                    ref: i,
-                    size: "small",
-                    style: { width: "150px" },
-                    type: "number",
-                    modelValue: s.value,
-                    "onUpdate:modelValue": A[0] || (A[0] = (P) => s.value = P)
-                  }, null, 8, ["placeholder", "prefix", "suffix", "onKeypress", "modelValue"])) : (p(), z("div", {
-                    key: 1,
-                    onClick: (P) => D(g),
-                    style: { width: "100%" }
-                  }, k(g.name), 9, ht))
-                ])
-              ]),
-              _: 2
-              /* DYNAMIC */
-            }, 1032, ["id", "name"]))),
-            128
-            /* KEYED_FRAGMENT */
-          ))
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["model-value", "no-match-text", "prefix", "search-placeholder"]),
-      E(t(Z), {
-        clearable: !1,
-        "model-value": m.value,
-        "popover-options": { boundary: "parent" },
-        onChange: N,
-        class: "natural-unit"
-      }, {
-        default: j(() => [
-          (p(!0), z(
-            U,
-            null,
-            q(t(Ra), (g) => (p(), K(t(Z).Option, {
-              id: g.id,
-              key: g.id,
-              name: g.name
-            }, null, 8, ["id", "name"]))),
-            128
-            /* KEYED_FRAGMENT */
-          ))
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["model-value"]),
-      E(Da, { onSubmit: H })
-    ]));
+      naturalOptions.value.unshift({
+        id: value,
+        name: item.name.replace("N", v.toString()),
+        type: NaturalOptionType.custom
+      });
+      [naturalValue.value] = naturalOptions.value;
+      (_b = naturalSelectRef.value) == null ? void 0 : _b.hidePopover();
+    };
+    const handleInputKeyPress = (e, v, item) => {
+      if (!v || +v < 1) return;
+      if (e.key !== "Enter" || !canEditNaturalId.value) return;
+      customNaturalOptions(Math.min(Math.ceil(v), MAX_NUMBER_VALUE), item);
+    };
+    const handleSubmit = () => {
+      const value = getNaturalDateValue(naturalValue.value);
+      isValidate.value = validateDateValue(value);
+      if (!isValidate.value) return;
+      naturalOptions.value.filter((item) => item.type === NaturalOptionType.custom).forEach((item) => {
+        setStoreDateList(getNaturalDateValue(item), getStoreKey(), "session");
+      });
+      emits("change", value);
+    };
+    __expose({
+      handleSubmit
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        Fragment,
+        null,
+        [
+          createElementVNode(
+            "div",
+            {
+              class: normalizeClass(["natural-picker", {
+                "is-invalid": !isValidate.value
+              }])
+            },
+            [
+              createVNode(unref(Select), {
+                ref_key: "naturalSelectRef",
+                ref: naturalSelectRef,
+                class: "natural-date",
+                clearable: false,
+                filterable: "",
+                "input-search": false,
+                "model-value": getNaturalOptionId(naturalValue.value),
+                "no-match-text": unref(t)("无匹配数据"),
+                "popover-min-width": 130,
+                "popover-options": { boundary: "parent", extCls: "__bk-date-picker-popover__" },
+                prefix: unref(t)("自然日期"),
+                "search-placeholder": unref(t)("请输入"),
+                onClick: _cache[2] || (_cache[2] = ($event) => isValidate.value = true)
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(naturalOptions.value, (item) => {
+                      return openBlock(), createBlock(unref(Select).Option, {
+                        id: getNaturalOptionId(item),
+                        key: getNaturalOptionId(item),
+                        name: item.name
+                      }, {
+                        default: withCtx(() => [
+                          createElementVNode("div", {
+                            class: "natural-custom-option",
+                            onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+                            }, ["prevent", "stop"]))
+                          }, [
+                            canEditNaturalId.value === item.id ? (openBlock(), createBlock(unref(Input), {
+                              key: 0,
+                              ref_for: true,
+                              ref_key: "inputRef",
+                              ref: inputRef,
+                              modelValue: inputValue.value,
+                              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
+                              autofocus: "true",
+                              clearable: false,
+                              max: unref(MAX_NUMBER_VALUE),
+                              min: 1,
+                              placeholder: unref(t)("请输入"),
+                              precision: 0,
+                              prefix: item.prefix,
+                              "show-control": true,
+                              size: "small",
+                              style: { "width": "150px" },
+                              suffix: item.suffix,
+                              type: "number",
+                              onKeypress: (v, e) => handleInputKeyPress(e, v, item)
+                            }, null, 8, ["modelValue", "max", "placeholder", "prefix", "suffix", "onKeypress"])) : (openBlock(), createElementBlock("div", {
+                              key: 1,
+                              style: { "width": "100%" },
+                              onClick: ($event) => handleClickItem(item)
+                            }, toDisplayString(item.name), 9, _hoisted_1$4))
+                          ])
+                        ]),
+                        _: 2
+                        /* DYNAMIC */
+                      }, 1032, ["id", "name"]);
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["model-value", "no-match-text", "prefix", "search-placeholder"]),
+              createVNode(unref(Select), {
+                class: "natural-unit",
+                clearable: false,
+                "model-value": naturalUnitValue.value,
+                "popover-options": { boundary: "parent" },
+                onChange: handleUnitChange,
+                onClick: _cache[3] || (_cache[3] = ($event) => isValidate.value = true)
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(unref(naturalUnitOptions), (item) => {
+                      return openBlock(), createBlock(unref(Select).Option, {
+                        id: item.id,
+                        key: item.id,
+                        name: item.name
+                      }, null, 8, ["id", "name"]);
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["model-value"]),
+              createVNode(_sfc_main$8, { onSubmit: handleSubmit })
+            ],
+            2
+            /* CLASS */
+          ),
+          !isValidate.value ? (openBlock(), createElementBlock(
+            "div",
+            _hoisted_2$3,
+            toDisplayString(unref(validMsg)),
+            1
+            /* TEXT */
+          )) : createCommentVNode("v-if", true)
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      );
+    };
+  }
+});
+const _hoisted_1$3 = { class: "baseline-picker" };
+const _hoisted_2$2 = {
+  key: 0,
+  class: "specific-date"
+};
+const _hoisted_3$2 = ["placeholder", "value", "onKeydown"];
+const _hoisted_4$1 = ["onClick"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "baseline-select",
+  props: {
+    modelValue: { default: "now" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { format } = useDatePickerInject();
+    const inputRef = ref();
+    const specificInput = ref();
+    const baselineSelectRef = ref();
+    const inputValue = ref();
+    const specificDate = ref();
+    const canEditNaturalId = ref("");
+    const baselineValue = customRef((track, trigger) => {
+      return {
+        get() {
+          track();
+          return props.modelValue;
+        },
+        set(value) {
+          if (props.modelValue !== value) {
+            emits("update:modelValue", value);
+            trigger();
+          }
+        }
+      };
+    });
+    const showSpecificPanel = ref(false);
+    const baselineOptions = shallowRef([
+      {
+        id: "now",
+        name: t("此刻")
+      },
+      {
+        id: "now/d",
+        name: t("今天")
+      },
+      {
+        id: "now-1d/d",
+        name: t("昨天")
+      },
+      {
+        id: "now-2d/d",
+        name: t("前天")
+      },
+      {
+        id: "now-nd/d",
+        name: t("N 天前"),
+        suffix: t("天前"),
+        type: NaturalOptionType.edit
+      },
+      {
+        id: "date",
+        name: t("具体时间"),
+        type: NaturalOptionType.specific
+      }
+    ]);
+    onMounted(() => {
+      const item = baselineOptions.value.find((item2) => item2.id === props.modelValue);
+      if (!item) {
+        baselineOptions.value.unshift({
+          id: props.modelValue,
+          name: props.modelValue.includes(NowConstant) ? t("N 天前").replace("N", props.modelValue.replace("now-", "").replace("d/d", "")) : props.modelValue,
+          type: NaturalOptionType.custom
+        });
+      }
+    });
+    const handleClickItem = (item) => {
+      var _a;
+      if (item.type === NaturalOptionType.specific) {
+        canEditNaturalId.value = item.id;
+        specificDate.value = void 0;
+        nextTick(() => {
+          var _a2, _b;
+          showSpecificPanel.value = true;
+          (_b = (_a2 = specificInput.value) == null ? void 0 : _a2[0]) == null ? void 0 : _b.focus();
+        });
+        return;
+      }
+      if (item.type === NaturalOptionType.edit) {
+        inputValue.value = 1;
+        canEditNaturalId.value = item.id;
+        setTimeout(() => {
+          var _a2, _b, _c;
+          (_c = (_b = (_a2 = inputRef.value) == null ? void 0 : _a2[0]) == null ? void 0 : _b.focus) == null ? void 0 : _c.call(_b);
+        }, 20);
+        return;
+      }
+      baselineValue.value = item.id;
+      canEditNaturalId.value = "";
+      (_a = baselineSelectRef.value) == null ? void 0 : _a.hidePopover();
+      specificDate.value = void 0;
+      inputValue.value = 1;
+      emits("update:modelValue", item.id);
+    };
+    const handleInputKeyPress = (e, v, item) => {
+      if (!v || +v < 1) return;
+      if (e.key !== "Enter" || !canEditNaturalId.value) return;
+      customNaturalOptions(Math.ceil(v), item);
+    };
+    const customNaturalOptions = (v, item) => {
+      var _a, _b;
+      canEditNaturalId.value = "";
+      const value = `now-${+v}d/d`;
+      const date = baselineOptions.value.find((item2) => item2.id === value);
+      if (date) {
+        baselineValue.value = date.id;
+        (_a = baselineSelectRef.value) == null ? void 0 : _a.hidePopover();
+        return;
+      }
+      baselineOptions.value.unshift({
+        id: value,
+        name: item.name.replace("N", v.toString()),
+        type: NaturalOptionType.custom
+      });
+      baselineValue.value = value;
+      (_b = baselineSelectRef.value) == null ? void 0 : _b.hidePopover();
+    };
+    const handleInputEnter = () => {
+      var _a, _b, _c, _d;
+      const target = (_a = specificInput.value) == null ? void 0 : _a[0];
+      const val = (_b = target == null ? void 0 : target.value) == null ? void 0 : _b.toString().trim();
+      if (!val) {
+        return;
+      }
+      let date = inputVal2Dayjs(val, format.value, specificDate == null ? void 0 : specificDate.value);
+      if (date == null ? void 0 : date.isValid()) {
+        canEditNaturalId.value = "";
+        const formatValue = date.format(format.value);
+        const item = baselineOptions.value.find((item2) => item2.id === formatValue);
+        if (item) {
+          baselineValue.value = item.id;
+          (_c = baselineSelectRef.value) == null ? void 0 : _c.hidePopover();
+          specificDate.value = void 0;
+          return;
+        }
+        baselineOptions.value.unshift({
+          id: formatValue,
+          name: formatValue,
+          type: NaturalOptionType.custom
+        });
+        baselineValue.value = formatValue;
+        (_d = baselineSelectRef.value) == null ? void 0 : _d.hidePopover();
+        specificDate.value = void 0;
+        target.value = (date == null ? void 0 : date.format(format.value)) || "";
+      }
+    };
+    const handleInputFocus = () => {
+      showSpecificPanel.value = true;
+    };
+    const handleSpecificTimeChange = (date) => {
+      var _a, _b, _c;
+      if (!((_a = specificDate.value) == null ? void 0 : _a.isSame(date))) {
+        specificDate.value = date;
+      }
+      showSpecificPanel.value = false;
+      (_c = (_b = specificInput.value) == null ? void 0 : _b[0]) == null ? void 0 : _c.focus();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+        createVNode(unref(Select), {
+          ref_key: "baselineSelectRef",
+          ref: baselineSelectRef,
+          class: "baseline-picker-select",
+          clearable: false,
+          filterable: "",
+          "input-search": false,
+          "model-value": baselineValue.value,
+          "no-match-text": unref(t)("无匹配数据"),
+          "popover-min-width": 130,
+          "popover-options": {
+            boundary: "parent",
+            extCls: "__bk-date-picker-popover__ __bk-date-picker-baseline-popover__"
+          },
+          prefix: unref(t)("基于"),
+          "search-placeholder": unref(t)("请输入")
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(baselineOptions.value, (item) => {
+                return openBlock(), createBlock(unref(Select).Option, {
+                  id: item.id,
+                  key: item.id,
+                  name: item.name,
+                  style: { "overflow": "inherit" }
+                }, {
+                  default: withCtx(() => {
+                    var _a;
+                    return [
+                      createElementVNode("div", {
+                        class: "baseline-custom-option",
+                        onClick: _cache[2] || (_cache[2] = withModifiers(() => {
+                        }, ["prevent", "stop"]))
+                      }, [
+                        canEditNaturalId.value === item.id ? (openBlock(), createElementBlock(
+                          Fragment,
+                          { key: 0 },
+                          [
+                            item.type === unref(NaturalOptionType).specific ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
+                              _cache[3] || (_cache[3] = createElementVNode(
+                                "span",
+                                { class: "specific-date-icon" },
+                                [
+                                  createElementVNode("svg", {
+                                    class: "date-content-icon",
+                                    height: "14",
+                                    version: "1.1",
+                                    viewBox: "0 0 1024 1024",
+                                    width: "14",
+                                    xmlns: "http://www.w3.org/2000/svg",
+                                    "xmlns:xlink": "http://www.w3.org/1999/xlink"
+                                  }, [
+                                    createElementVNode("path", {
+                                      d: "M558.933 465.067h-93.866v93.866h93.866v-93.866z m0 162.133h-93.866v93.867h93.866V627.2z m371.2-533.333h-93.866V21.333c0-12.8-8.534-21.333-21.334-21.333S793.6 8.533 793.6 21.333V89.6H234.667V21.333c0-12.8-12.8-21.333-25.6-21.333s-21.334 8.533-21.334 21.333V89.6H93.867C42.667 93.867 0 136.533 0 187.733V934.4c0 46.933 42.667 89.6 93.867 89.6h836.266c51.2 0 93.867-42.667 93.867-93.867v-742.4c0-51.2-42.667-93.866-93.867-93.866z m46.934 836.266c0 25.6-21.334 46.934-46.934 46.934H93.867c-25.6 0-46.934-21.334-46.934-46.934V371.2h930.134v558.933z m0-605.866H46.933V187.733c0-25.6 21.334-46.933 46.934-46.933h93.866v68.267c0 12.8 8.534 21.333 21.334 21.333s21.333-8.533 21.333-21.333V140.8h558.933v68.267c0 12.8 8.534 21.333 21.334 21.333S832 221.867 832 209.067V140.8h93.867c25.6 0 46.933 21.333 46.933 46.933v136.534h4.267zM789.333 627.2h-93.866v93.867h93.866V627.2z m0-162.133h-93.866v93.866h93.866v-93.866z m-230.4 324.266h-93.866V883.2h93.866v-93.867z m-234.666 0h-89.6V883.2h93.866v-93.867h-4.266z m0-324.266h-89.6v93.866h93.866v-93.866h-4.266z m0 162.133h-89.6v93.867h93.866V627.2h-4.266z",
+                                      fill: "#C4C6CC",
+                                      xmlns: "http://www.w3.org/2000/svg"
+                                    })
+                                  ])
+                                ],
+                                -1
+                                /* HOISTED */
+                              )),
+                              createElementVNode("input", {
+                                ref_for: true,
+                                ref_key: "specificInput",
+                                ref: specificInput,
+                                class: "specific-date-input",
+                                placeholder: unref(t)("具体时间"),
+                                spellcheck: "false",
+                                value: (_a = specificDate.value) == null ? void 0 : _a.format(unref(format)),
+                                onClick: handleInputFocus,
+                                onKeydown: withKeys(withModifiers(handleInputEnter, ["stop"]), ["enter"])
+                              }, null, 40, _hoisted_3$2),
+                              withDirectives(createVNode(_sfc_main$7, {
+                                key: "specific",
+                                class: "specific-date-panel",
+                                format: unref(format),
+                                "model-value": specificDate.value,
+                                "show-title": false,
+                                onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                                }, ["prevent", "stop"])),
+                                "onUpdate:modelValue": handleSpecificTimeChange
+                              }, null, 8, ["format", "model-value"]), [
+                                [vShow, showSpecificPanel.value]
+                              ])
+                            ])) : (openBlock(), createBlock(unref(Input), {
+                              key: 1,
+                              ref_for: true,
+                              ref_key: "inputRef",
+                              ref: inputRef,
+                              modelValue: inputValue.value,
+                              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => inputValue.value = $event),
+                              autofocus: "true",
+                              clearable: false,
+                              min: 1,
+                              placeholder: unref(t)("请输入"),
+                              precision: 0,
+                              "show-control": true,
+                              size: "small",
+                              style: { "width": "174px" },
+                              suffix: item.suffix,
+                              type: "number",
+                              onKeypress: (v, e) => handleInputKeyPress(e, v, item)
+                            }, null, 8, ["modelValue", "placeholder", "suffix", "onKeypress"]))
+                          ],
+                          64
+                          /* STABLE_FRAGMENT */
+                        )) : (openBlock(), createElementBlock("div", {
+                          key: 1,
+                          style: { "width": "100%" },
+                          onClick: ($event) => handleClickItem(item)
+                        }, toDisplayString(item.name), 9, _hoisted_4$1))
+                      ])
+                    ];
+                  }),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["id", "name"]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["model-value", "no-match-text", "prefix", "search-placeholder"])
+      ]);
+    };
   }
-}), ft = { class: "recent-picker" }, pt = /* @__PURE__ */ X({
+});
+const _hoisted_1$2 = {
+  key: 0,
+  style: { "margin": "-8px 0 4px", "color": "#ea3636" }
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "recent-picker",
   props: {
-    type: { default: I.RECENT },
+    baselineTime: {},
+    type: { default: DateMode.RECENT },
     value: {}
   },
   emits: ["change"],
-  setup(l, { emit: a }) {
-    const i = a, e = l, n = L("m"), b = L();
-    ma(
-      () => e.value,
-      (c) => {
-        c && e.type === c.dateMode && (n.value = c.recentOrFuturedateUnit, b.value = c.recentOrFuturedateNum || void 0);
-      },
-      {
-        immediate: !0
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emits = __emit;
+    const props = __props;
+    const recentUnit = ref("m");
+    const dateValue = ref();
+    const canSubmit = computed(() => !!dateValue.value && !!recentUnit.value);
+    const isValidate = ref(true);
+    const recentBaselineTime = ref();
+    const { validMsg, validateDateValue } = useValidate();
+    watch(
+      () => props.value,
+      (val) => {
+        if (!val) return;
+        if (props.type !== val.dateMode) return;
+        recentUnit.value = val.recentOrFutureDateUnit;
+        dateValue.value = val.recentOrFutureDateNum || void 0;
+        recentBaselineTime.value = val == null ? void 0 : val.startBaselineTime;
+      },
+      {
+        immediate: true
       }
     );
-    const h = J(() => !!b.value && !!n.value), m = () => {
-      if (b.value) {
-        if (e.type === I.FUTURE) {
-          i("change", [C, `${I.FUTURE}${b.value}${n.value}`]);
-          return;
-        }
-        i("change", [`${I.RECENT}${b.value}${n.value}`, C]);
+    const handleSubmit = () => {
+      if (!dateValue.value || !canSubmit.value) return;
+      const emitDate = props.type === DateMode.FUTURE ? [NowConstant, `${DateMode.FUTURE}${dateValue.value}${recentUnit.value}`] : [`${DateMode.RECENT}${dateValue.value}${recentUnit.value}`, NowConstant].map(
+        (v) => recentBaselineTime.value && recentBaselineTime.value !== NowConstant ? v.replace(NowConstant, `(${recentBaselineTime.value})`) : v
+      );
+      isValidate.value = !!validateDateValue(emitDate);
+      if (!isValidate.value) return;
+      if (props.type === DateMode.FUTURE) {
+        emits("change", emitDate);
+        return;
       }
+      emits("change", emitDate);
     };
-    return (c, s) => (p(), z("div", ft, [
-      E(t(Za), {
-        min: 1,
-        placeholder: t(r)("请输入"),
-        precision: 0,
-        prefix: c.type === "now-" ? t(r)("最近") : t(r)("未来"),
-        class: "recent-input",
-        type: "number",
-        modelValue: b.value,
-        "onUpdate:modelValue": s[0] || (s[0] = (o) => b.value = o)
-      }, null, 8, ["placeholder", "prefix", "modelValue"]),
-      E(t(Z), {
-        clearable: !1,
-        "popover-options": { boundary: "parent" },
-        class: "recent-unit",
-        filterable: "",
-        modelValue: n.value,
-        "onUpdate:modelValue": s[1] || (s[1] = (o) => n.value = o)
-      }, {
-        default: j(() => [
-          (p(!0), z(
-            U,
-            null,
-            q(t(Xa), (o) => (p(), K(t(Z).Option, {
-              id: o.id,
-              key: o.id,
-              name: o.name
-            }, null, 8, ["id", "name"]))),
-            128
-            /* KEYED_FRAGMENT */
-          ))
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["modelValue"]),
-      E(Da, {
-        disabled: !h.value,
-        onSubmit: m
-      }, null, 8, ["disabled"])
-    ]));
-  }
-}), At = { class: "option-name" }, gt = { class: "option-country" }, xt = { class: "option-utc" }, It = { class: "option-name" }, kt = { class: "option-country" }, yt = { class: "option-utc" }, _t = /* @__PURE__ */ X({
-  __name: "timezone-picker",
-  props: {
-    value: {}
-  },
-  emits: ["change"],
-  setup(l, { emit: a }) {
-    const i = a, e = Q(te), n = (h) => {
-      const m = ie(h);
-      i("change", h, m);
-    }, b = (h, m) => {
-      var c, s, o, y;
-      return ((c = m.label) == null ? void 0 : c.toLowerCase().includes(h.toLowerCase())) || ((s = m.country) == null ? void 0 : s.toLowerCase().includes(h.toLowerCase())) || ((o = m.abbreviation) == null ? void 0 : o.toLowerCase().includes(h.toLowerCase())) || ((y = m.utc) == null ? void 0 : y.toLowerCase().includes(h.toLowerCase()));
-    };
-    return (h, m) => (p(), K(t(Z), {
-      clearable: !1,
-      "filter-option": b,
-      "input-search": !1,
-      "model-value": h.value,
-      "no-match-text": t(r)("无匹配数据"),
-      placeholder: t(r)("请输入搜索（国家，城市，简称）"),
-      "popover-options": { "ext-cls": "__bk-date-picker-popover__" },
-      "search-placeholder": t(r)("请输入搜索（国家，城市，简称）"),
-      onChange: n,
-      class: "timezone-picker",
-      filterable: ""
-    }, {
-      default: j(() => [
-        (p(!0), z(
-          U,
-          null,
-          q(e.value, (c) => (p(), z(
-            U,
-            null,
+    __expose({
+      handleSubmit
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        Fragment,
+        null,
+        [
+          createElementVNode(
+            "div",
+            {
+              class: normalizeClass(["recent-picker", {
+                "is-invalid": !isValidate.value
+              }])
+            },
             [
-              c.label.length < 1 ? (p(!0), z(
-                U,
-                { key: 0 },
-                q(c.options, (s) => (p(), K(t(Z).Option, Ya(s, {
-                  id: s.label,
-                  key: s.label,
-                  name: s.label
-                }), {
-                  default: j(() => [
-                    v(
-                      "div",
-                      {
-                        class: da({
-                          "timezone-picker-option": !0,
-                          "is-selected": s.label === h.value
-                        })
-                      },
-                      [
-                        v(
-                          "span",
-                          At,
-                          k(t(r)("浏览器时区")) + " " + k(s.label),
-                          1
-                          /* TEXT */
-                        ),
-                        v(
-                          "span",
-                          gt,
-                          k(s.country) + ", " + k(s.abbreviation),
-                          1
-                          /* TEXT */
-                        ),
-                        v(
-                          "span",
-                          xt,
-                          k(s.utc),
-                          1
-                          /* TEXT */
-                        )
-                      ],
-                      2
-                      /* CLASS */
-                    )
-                  ]),
-                  _: 2
-                  /* DYNAMIC */
-                }, 1040, ["id", "name"]))),
-                128
-                /* KEYED_FRAGMENT */
-              )) : (p(), z(
-                U,
-                { key: 1 },
-                [
-                  c.options.length ? (p(), K(t(Z).Group, {
-                    key: c.label,
-                    label: c.label
-                  }, {
-                    default: j(() => [
-                      (p(!0), z(
-                        U,
-                        null,
-                        q(c.options, (s) => (p(), K(t(Z).Option, Ya(s, {
-                          id: s.label,
-                          key: s.label,
-                          name: s.label
-                        }), {
-                          default: j(() => [
-                            v(
-                              "div",
-                              {
-                                class: da({
-                                  "timezone-picker-option": !0,
-                                  "is-selected": s.label === h.value
-                                })
-                              },
-                              [
-                                v(
-                                  "span",
-                                  It,
-                                  k(s.label),
-                                  1
-                                  /* TEXT */
-                                ),
-                                v(
-                                  "span",
-                                  kt,
-                                  k(s.country) + ", " + k(s.abbreviation),
-                                  1
-                                  /* TEXT */
-                                ),
-                                v(
-                                  "span",
-                                  yt,
-                                  k(s.utc),
-                                  1
-                                  /* TEXT */
-                                )
-                              ],
-                              2
-                              /* CLASS */
-                            )
-                          ]),
-                          _: 2
-                          /* DYNAMIC */
-                        }, 1040, ["id", "name"]))),
-                        128
-                        /* KEYED_FRAGMENT */
-                      ))
-                    ]),
-                    _: 2
-                    /* DYNAMIC */
-                  }, 1032, ["label"])) : sa("v-if", !0)
-                ],
-                64
-                /* STABLE_FRAGMENT */
-              ))
+              _ctx.type === unref(DateMode).RECENT ? (openBlock(), createBlock(_sfc_main$3, {
+                key: 0,
+                modelValue: recentBaselineTime.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => recentBaselineTime.value = $event)
+              }, null, 8, ["modelValue"])) : createCommentVNode("v-if", true),
+              createVNode(unref(Input), {
+                modelValue: dateValue.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => dateValue.value = $event),
+                class: "recent-input",
+                max: unref(MAX_NUMBER_VALUE),
+                min: 1,
+                placeholder: unref(t)("请输入"),
+                precision: 0,
+                prefix: _ctx.type === unref(DateMode).RECENT ? unref(t)("的最近") : unref(t)("未来"),
+                "stop-propagation": false,
+                type: "number",
+                onClick: _cache[2] || (_cache[2] = ($event) => isValidate.value = true)
+              }, null, 8, ["modelValue", "max", "placeholder", "prefix"]),
+              createVNode(unref(Select), {
+                modelValue: recentUnit.value,
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => recentUnit.value = $event),
+                class: "recent-unit",
+                clearable: false,
+                filterable: "",
+                "popover-min-width": 130,
+                "popover-options": { boundary: "parent" },
+                onClick: _cache[4] || (_cache[4] = ($event) => isValidate.value = true)
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(unref(DateUnitList), (item) => {
+                      return openBlock(), createBlock(unref(Select).Option, {
+                        id: item.id,
+                        key: item.id,
+                        name: item.name
+                      }, null, 8, ["id", "name"]);
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["modelValue"]),
+              createVNode(_sfc_main$8, {
+                disabled: !canSubmit.value,
+                onSubmit: handleSubmit
+              }, null, 8, ["disabled"])
             ],
-            64
-            /* STABLE_FRAGMENT */
-          ))),
-          256
-          /* UNKEYED_FRAGMENT */
-        ))
-      ]),
-      _: 1
-      /* STABLE */
-    }, 8, ["model-value", "no-match-text", "placeholder", "search-placeholder"]));
+            2
+            /* CLASS */
+          ),
+          !isValidate.value ? (openBlock(), createElementBlock(
+            "div",
+            _hoisted_1$2,
+            toDisplayString(unref(validMsg)),
+            1
+            /* TEXT */
+          )) : createCommentVNode("v-if", true)
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      );
+    };
   }
-}), wt = { class: "panel-wrapper" }, Dt = {
+});
+const _hoisted_1$1 = { class: "panel-wrapper" };
+const _hoisted_2$1 = { class: "date-list-wrapper" };
+const _hoisted_3$1 = {
   key: 0,
-  class: "common-date-list"
-}, Mt = ["onClick"], zt = {
-  key: 1,
-  class: "common-wrapper"
-}, Et = { class: "empty-tips" }, St = {
-  key: 2,
   class: "time-zone-panel"
-}, Ct = { class: "time-zone" }, Pt = { class: "time-zone-area" }, Tt = { class: "time-zone-tag" }, Vt = { class: "time-zone-picker" }, Nt = /* @__PURE__ */ X({
+};
+const _hoisted_4 = { class: "time-zone" };
+const _hoisted_5 = {
+  key: 0,
+  class: "time-zone-area"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "time-zone-tag"
+};
+const _hoisted_7 = { class: "time-zone-picker" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "panel-wrapper",
   props: {
     defaultDate: {},
@@ -2854,462 +3962,594 @@ const _a = (l, a = "start", i) => {
     timezone: {}
   },
   emits: ["change", "update:timezone"],
-  setup(l, { emit: a }) {
-    const i = l, { commonUseList: e, format: n, storeKey: b, timezoneInfo: h, version: m } = ee(), c = a, s = L(!1), o = L("common"), y = J(() => {
-      const x = localStorage.getItem(La(m.value));
-      return x ? Object.values(I).includes(x) ? x : null : I.Date;
-    }), S = L(i.defaultDate.dateMode || y.value), D = d.tz.guess(), N = Q(ne(b.value)), Y = J(
-      () => (o.value === "common" ? e.value || ka : N.value).map(
-        (x) => new ra(x, n.value, i.timezone)
-      )
-    ), $ = (x) => {
-      c("change", x);
-    }, H = () => {
-      switch (S.value) {
-        case I.RECENT:
-        case I.FUTURE:
-          return pt;
-        case I.NATURAL:
-          return bt;
-        case I.Date:
+  setup(__props, { emit: __emit }) {
+    const { commonUseList, format, storeKey: storeKey2, timezoneInfo, version } = useDatePickerInject();
+    const props = __props;
+    const emits = __emit;
+    const timezoneSet = ref(false);
+    const component = ref();
+    const defaultTabKey = computed(() => {
+      const tab = localStorage.getItem(getStoreTabKey(version.value));
+      if (!tab) return DateMode.Date;
+      if (Object.values(DateMode).includes(tab)) {
+        return tab;
+      }
+      return null;
+    });
+    const activeDatePickTab = ref(props.defaultDate.dateMode || defaultTabKey.value);
+    const browserTimezone = dayjs.tz.guess();
+    const recentUseList = shallowRef(getStoreDateList(storeKey2.value));
+    const commonUseDateList = computed(() => {
+      var _a;
+      return (_a = commonUseList.value || commonDateList) == null ? void 0 : _a.map((date) => {
+        if ((date == null ? void 0 : date.id) && date.name) {
+          const dateRange = new DateRange(date.id, format.value, props.timezone);
+          dateRange.setUserDisplayName(date.name);
+          return dateRange;
+        }
+        return new DateRange(date, format.value, props.timezone);
+      });
+    });
+    const recentUseDateList = computed(() => {
+      var _a;
+      return (_a = recentUseList.value) == null ? void 0 : _a.map((date) => {
+        return new DateRange(date, format.value, props.timezone);
+      });
+    });
+    useKeydownEnter(() => {
+      let element = document == null ? void 0 : document.activeElement;
+      element == null ? void 0 : element.blur();
+      nextTick(() => {
+        var _a;
+        (_a = component.value) == null ? void 0 : _a.handleSubmit();
+      });
+    });
+    const handleChange = (date) => {
+      emits("change", date);
+    };
+    const getComponent = () => {
+      switch (activeDatePickTab.value) {
+        case DateMode.RECENT:
+        case DateMode.FUTURE:
+          return _sfc_main$2;
+        case DateMode.NATURAL:
+          return _sfc_main$4;
+        case DateMode.Date:
         default:
-          return dt;
+          return _sfc_main$6;
       }
-    }, _ = () => {
-      s.value = !s.value;
-    }, A = (x, T) => {
-      c("update:timezone", x, T);
-    }, g = (x) => {
-      S.value = x, localStorage.setItem(La(m.value), x);
-    }, P = (x, T) => {
-      var V, aa, W, f, u, M;
-      return !x || !T ? !1 : ((aa = (V = x.dateValue) == null ? void 0 : V.join) == null ? void 0 : aa.call(V, "~")) === ((f = (W = T == null ? void 0 : T.dateValue) == null ? void 0 : W.join) == null ? void 0 : f.call(W, "~")) || ((u = x == null ? void 0 : x.toDisplayString) == null ? void 0 : u.call(x)) === ((M = T == null ? void 0 : T.toDisplayString) == null ? void 0 : M.call(T));
-    }, B = () => {
-      N.value = [], localStorage.removeItem(b.value);
-    };
-    return (x, T) => (p(), z("div", wt, [
-      E(Ua, {
-        panels: t(Ee),
-        "show-delete-all": o.value === "recent" && !!N.value.length,
-        onConfirm: B,
-        modelValue: o.value,
-        "onUpdate:modelValue": T[0] || (T[0] = (V) => o.value = V)
-      }, null, 8, ["panels", "show-delete-all", "modelValue"]),
-      Y.value.length ? (p(), z("ul", Dt, [
-        (p(!0), z(
-          U,
+    };
+    const handleToggleTimezoneSet = () => {
+      timezoneSet.value = !timezoneSet.value;
+    };
+    const handleTimezoneChange = (v, info) => {
+      emits("update:timezone", v, info);
+    };
+    const handleDateTabChange = (v) => {
+      activeDatePickTab.value = v;
+      localStorage.setItem(getStoreTabKey(version.value), v);
+    };
+    const handleDeleteConfirm = () => {
+      recentUseList.value = [];
+      localStorage.removeItem(storeKey2.value);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createVNode(DateTitle, { onConfirm: handleDeleteConfirm }),
+        createElementVNode("div", _hoisted_2$1, [
+          createVNode(DateList, {
+            "date-list": commonUseDateList.value,
+            "default-date": _ctx.defaultDate,
+            "is-recent": false,
+            onChange: handleChange
+          }, null, 8, ["date-list", "default-date"]),
+          createVNode(DateList, {
+            "date-list": recentUseDateList.value,
+            "default-date": _ctx.defaultDate,
+            "is-recent": true,
+            onChange: handleChange
+          }, null, 8, ["date-list", "default-date"])
+        ]),
+        createVNode(_sfc_main$a, {
+          class: "date-pick-tab",
+          "model-value": activeDatePickTab.value,
+          panels: unref(datePickTabList),
+          "onUpdate:modelValue": handleDateTabChange
+        }, null, 8, ["model-value", "panels"]),
+        (openBlock(), createBlock(
+          KeepAlive,
           null,
-          q(Y.value, (V, aa) => (p(), z("li", {
-            class: da({
-              "list-item": !0,
-              "is-recent-item": o.value === "recent",
-              "is-selected": P(V, x.defaultDate)
-            }),
-            key: aa,
-            onClick: (W) => $(V.dateValue)
-          }, k(V.toDisplayString()), 11, Mt))),
-          128
-          /* KEYED_FRAGMENT */
-        ))
-      ])) : (p(), z("div", zt, [
-        E(t(Ae), {
-          class: "empty-content",
-          scene: "part",
-          type: "empty"
-        }),
-        v(
-          "div",
-          Et,
-          k(o.value === "recent" ? t(r)("暂无最近使用记录") : t(r)("暂无常用时间")),
-          1
-          /* TEXT */
-        )
-      ])),
-      E(Ua, {
-        "model-value": S.value,
-        panels: t(Se),
-        "onUpdate:modelValue": g,
-        class: "date-pick-tab"
-      }, null, 8, ["model-value", "panels"]),
-      (p(), K(
-        me,
-        null,
-        [
-          (p(), K(he(H()), {
-            key: S.value,
-            type: S.value,
-            value: x.defaultDate,
-            onChange: $
-          }, null, 40, ["type", "value"]))
-        ],
-        1024
-        /* DYNAMIC_SLOTS */
-      )),
-      x.needTimezone ? (p(), z("div", St, [
-        G(
-          k(t(h).label === t(D) ? t(r)("浏览器时区") : "") + " ",
-          1
-          /* TEXT */
-        ),
-        v("span", Ct, [
-          G(
-            k(t(h).label) + " ",
+          [
+            (openBlock(), createBlock(resolveDynamicComponent(getComponent()), {
+              key: activeDatePickTab.value,
+              ref_key: "component",
+              ref: component,
+              type: activeDatePickTab.value,
+              value: _ctx.defaultDate,
+              onChange: handleChange
+            }, null, 40, ["type", "value"]))
+          ],
+          1024
+          /* DYNAMIC_SLOTS */
+        )),
+        _ctx.needTimezone ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+          createTextVNode(
+            toDisplayString(unref(timezoneInfo).label === unref(browserTimezone) ? unref(t)("浏览器时区") : "") + " ",
             1
             /* TEXT */
           ),
-          v(
-            "span",
-            Pt,
-            k(t(h).country) + ", " + k(t(h).abbreviation),
-            1
-            /* TEXT */
-          )
-        ]),
-        v(
-          "span",
-          Tt,
-          k(t(h).utc),
-          1
-          /* TEXT */
-        ),
-        E(t(wa), {
-          onClick: _,
-          class: "time-zone-btn",
-          size: "small"
-        }, {
-          default: j(() => [
-            G(
-              k(t(r)("时区设置")),
+          createElementVNode("span", _hoisted_4, [
+            createTextVNode(
+              toDisplayString(unref(timezoneInfo).label) + " ",
               1
               /* TEXT */
-            )
+            ),
+            unref(timezoneInfo).country ? (openBlock(), createElementBlock(
+              "span",
+              _hoisted_5,
+              toDisplayString(unref(timezoneInfo).country) + ", " + toDisplayString(unref(timezoneInfo).abbreviation),
+              1
+              /* TEXT */
+            )) : createCommentVNode("v-if", true)
           ]),
-          _: 1
-          /* STABLE */
-        })
-      ])) : sa("v-if", !0),
-      fa(v(
-        "div",
-        Vt,
-        [
-          E(_t, {
-            value: x.timezone || t(D),
-            onChange: A
-          }, null, 8, ["value"])
-        ],
-        512
-        /* NEED_PATCH */
-      ), [
-        [ve, s.value]
-      ])
-    ]));
+          typeof unref(timezoneInfo).utc !== "undefined" ? (openBlock(), createElementBlock(
+            "span",
+            _hoisted_6,
+            toDisplayString(unref(timezoneInfo).utc),
+            1
+            /* TEXT */
+          )) : createCommentVNode("v-if", true),
+          createVNode(unref(Button), {
+            class: "time-zone-btn",
+            size: "small",
+            onClick: handleToggleTimezoneSet
+          }, {
+            default: withCtx(() => [
+              createTextVNode(
+                toDisplayString(unref(t)("时区设置")),
+                1
+                /* TEXT */
+              )
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ])) : createCommentVNode("v-if", true),
+        withDirectives(createElementVNode(
+          "div",
+          _hoisted_7,
+          [
+            createVNode(_sfc_main$b, {
+              value: _ctx.timezone || unref(browserTimezone),
+              "onUpdate:value": handleTimezoneChange
+            }, null, 8, ["value"])
+          ],
+          512
+          /* NEED_PATCH */
+        ), [
+          [vShow, timezoneSet.value]
+        ])
+      ]);
+    };
   }
-}), $t = /* @__PURE__ */ v(
-  "svg",
-  {
-    class: "date-content-icon",
-    height: "14",
-    version: "1.1",
-    viewBox: "0 0 1024 1024",
-    width: "14",
-    xmlns: "http://www.w3.org/2000/svg",
-    "xmlns:xlink": "http://www.w3.org/1999/xlink"
-  },
-  [
-    /* @__PURE__ */ v("path", {
-      d: "M486.656 997.312c-268.288 0-486.656-218.304-486.656-486.656 0-268.288 218.304-486.656 486.656-486.656 268.352 0 486.656 218.304 486.656 486.656C973.376 779.008 755.008 997.312 486.656 997.312zM486.656 88c-233.088 0-422.656 189.568-422.656 422.656 0 233.088 189.568 422.656 422.656 422.656s422.656-189.632 422.656-422.656C909.376 277.568 719.744 88 486.656 88z",
-      fill: "#979BA5"
-    }),
-    /* @__PURE__ */ v("path", {
-      d: "M816.064 544 432.064 544 432.064 160 496.064 160 496.064 480 816.064 480Z",
-      fill: "#979BA5"
-    })
-  ],
-  -1
-  /* HOISTED */
-), jt = {
+});
+const _hoisted_1 = {
   key: 0,
   class: "date-content-utc"
-}, Yt = { class: "date-tooltips-timezone" }, Bt = {
+};
+const _hoisted_2 = { class: "date-tooltips-timezone" };
+const _hoisted_3 = {
   key: 0,
   class: "date-tooltips-diff"
-}, ei = /* @__PURE__ */ X({
-  name: "DatePicker",
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "DatePicker"
+  },
   __name: "date-picker",
   props: {
     behavior: { default: "normal" },
-    commonUseList: { default: ka },
     disabled: { type: Boolean },
+    enableFormatClick: { type: Boolean, default: true },
     format: { default: "YYYY-MM-DD HH:mm:ss" },
+    id: { default: "key" },
+    maxDuration: {},
+    minDuration: {},
     modelValue: {},
-    needTimezone: { type: Boolean, default: !0 },
+    needTimezone: { type: Boolean, default: true },
     timezone: {},
-    version: { default: "1.0" }
+    validDateRange: {},
+    version: { default: "1.0" },
+    commonUseList: { default: () => commonDateList }
   },
-  emits: ["update:modelValue", "update:timezone"],
-  setup(l, { expose: a, emit: i }) {
-    d.locale({
-      ...pa === "en" ? _e : we,
+  emits: ["update:modelValue", "update:timezone", "update:format"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    dayjs.locale({
+      ...lang === "en" ? en : cn,
       weekStart: 1
-    }), ge({
+    });
+    provideGlobalConfig({
       prefix: "bk"
     });
-    const e = l, n = i, b = L(), h = L(), m = J(() => e.format), c = J(() => ie(e.timezone || d.tz.guess())), s = J(() => {
-      const f = e.timezone;
-      if (!f || e.timezone === d.tz.guess())
-        return 0;
-      const u = d().utcOffset();
-      return (d.tz(d(), f).utcOffset() - u) / 60;
-    }), o = Q(new ra(e.modelValue, e.format, e.timezone)), y = Q(), S = J(() => Ia(e.version)), D = L(!1), N = L(!1);
-    ma(
-      () => e.modelValue,
-      (f) => {
-        var u, M;
-        (M = (u = o.value) == null ? void 0 : u.dateValue) != null && M.length && o.value.dateValue.every((w, R) => w === (f == null ? void 0 : f[R])) || (o.value = new ra(f, m.value, e.timezone));
-      },
-      {
-        immediate: !0
+    const props = __props;
+    const emits = __emit;
+    const dateTooltipsRef = ref();
+    const dateContentRef = ref();
+    const format = ref(props.format);
+    const timezoneInfo = computed(() => {
+      let timezone = props.timezone || dayjs.tz.guess();
+      if (!isValidTimeZone(timezone)) {
+        console.error(`invalid timezone: ${props.timezone} datepicker will use ${DEFAULT_TIMEZONE} as default`);
+        timezone = DEFAULT_TIMEZONE;
+      }
+      return getTimezoneInfoByValue(timezone) || { label: props.timezone, value: props.timezone };
+    });
+    const diffTimezone = computed(() => {
+      const timezone = timezoneInfo.value.label;
+      if (!timezone || props.timezone === dayjs.tz.guess()) return 0;
+      const a = dayjs().utcOffset();
+      const b = dayjs.tz(dayjs(), timezone).utcOffset();
+      return (b - a) / 60;
+    });
+    const dateDetail = shallowRef(new DateRange(props.modelValue, props.format));
+    const tooltipsDetail = shallowRef();
+    const storeKey2 = computed(() => getStoreKey(props.version));
+    const datePanelShow = ref(false);
+    const tooltipsShow = ref(false);
+    let enterTimer;
+    let leaveTimer;
+    const commonDateUseList = computed(() => {
+      var _a;
+      return ((_a = props.commonUseList) == null ? void 0 : _a.length) ? props.commonUseList : commonDateList;
+    });
+    const dateDetailDisplayString = computed(() => {
+      var _a;
+      const commonDate = commonDateUseList.value.find((item) => {
+        var _a2, _b, _c, _d;
+        return Array.isArray(item.id) && ((_b = (_a2 = item.id).join) == null ? void 0 : _b.call(_a2, "_")) === ((_d = (_c = dateDetail.value) == null ? void 0 : _c.dateValue) == null ? void 0 : _d.join("_"));
+      });
+      if (commonDate) {
+        return commonDate.name;
+      }
+      return (_a = dateDetail.value) == null ? void 0 : _a.toDisplayString();
+    });
+    watch(
+      () => props.format,
+      () => {
+        format.value = props.format;
+      }
+    );
+    watch(
+      () => props.modelValue,
+      (v) => {
+        var _a, _b;
+        if (((_b = (_a = dateDetail.value) == null ? void 0 : _a.dateValue) == null ? void 0 : _b.length) && dateDetail.value.dateValue.every((item, index) => item === (v == null ? void 0 : v[index])))
+          return;
+        dateDetail.value = new DateRange(v, format.value, timezoneInfo.value.label);
+      },
+      {
+        immediate: true
       }
     );
-    const Y = J(() => {
-      var f;
-      return (f = e.commonUseList) != null && f.length ? e.commonUseList : ka;
+    const formatChange = (f) => {
+      if (props.enableFormatClick) {
+        emits("update:format", f);
+        format.value = f;
+      }
+    };
+    useDatePickerProvider({
+      formatChange,
+      commonUseList: commonDateUseList,
+      format,
+      storeKey: storeKey2,
+      t,
+      timezoneInfo,
+      enableFormatClick: props.enableFormatClick,
+      version: computed(() => props.version),
+      validateTimeRange: computed(() => props.validDateRange),
+      minDuration: computed(() => props.minDuration),
+      maxDuration: computed(() => props.maxDuration)
     });
-    je({
-      commonUseList: Y,
-      format: m,
-      storeKey: S,
-      t: r,
-      timezoneInfo: c,
-      version: J(() => e.version)
-    }), be(() => {
-      N.value = !1, D.value = !1;
+    onBeforeUnmount(() => {
+      tooltipsShow.value = false;
+      datePanelShow.value = false;
     });
-    let $, H;
-    function _() {
-      $ || ($ = setTimeout(() => {
-        N.value = !0, y.value = new ra(o.value.dateValue, m.value, e.timezone), $ = null;
-      }, 100));
+    function handleDateMouseenter() {
+      if (enterTimer) return;
+      enterTimer = setTimeout(() => {
+        tooltipsShow.value = true;
+        tooltipsDetail.value = new DateRange(dateDetail.value.dateValue, format.value, timezoneInfo.value.label);
+        enterTimer = null;
+      }, 100);
     }
-    function A() {
-      H && clearTimeout(H), H = setTimeout(() => {
-        N.value = !1, H = null;
+    function handleDateMouseleave() {
+      if (leaveTimer) clearTimeout(leaveTimer);
+      leaveTimer = setTimeout(() => {
+        tooltipsShow.value = false;
+        leaveTimer = null;
       }, 301);
     }
-    const g = (f) => {
-      D.value = !1;
-      const [u, M] = f, [w, R] = e.modelValue || [];
-      if (u && M && u === w && M === R)
-        return;
-      o.value = new ra(f, m.value, e.timezone);
-      const ea = o.value.toEmitValue();
-      n("update:modelValue", ...ea), !Y.value.some((ha) => ha[0] === u && ha[1] === M) && o.value.isValidate && re(f, S.value);
-    }, P = (f, u) => {
-      o.value = new ra(e.modelValue, m.value, f), n("update:timezone", f, { ...u }), sessionStorage.setItem(Te, f);
-    }, B = () => {
-      D.value = !1;
-    }, x = (f) => {
-      var ea;
-      if (((ea = o.value.dateValue) == null ? void 0 : ea.length) < 2)
-        return;
-      const { endDate: u, startDate: M } = o.value, w = o.value.dateDuration(), R = f === "left" ? [M.subtract(w), u.subtract(w)] : [M.add(w), u.add(w)];
-      g(R);
-    }, T = () => {
-      x("left");
-    }, V = () => {
-      x("right");
-    }, aa = (f) => {
-      D.value && (Array.from(document.querySelectorAll(".__bk-date-picker-popover__")).some(
-        (u) => u.contains(f.target)
-      ) || B());
-    }, W = () => {
-      D.value = !D.value, D.value && (N.value = !1);
-    };
-    return a({
+    const handleChange = (val) => {
+      datePanelShow.value = false;
+      const [start, end] = val;
+      const [oldStart, oldEnd] = props.modelValue || [];
+      if (start && end && start === oldStart && end === oldEnd) return;
+      dateDetail.value = new DateRange(val, format.value, timezoneInfo.value.label);
+      const emitValue = dateDetail.value.toEmitValue();
+      emits("update:modelValue", ...emitValue, [...val]);
+      const canStore = commonDateUseList.value.some((item) => {
+        const startDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[0] : item[0];
+        const endDate = Array.isArray(item == null ? void 0 : item.id) ? item.id[1] : item[1];
+        return startDate === start && endDate === end;
+      });
+      if (canStore && dateDetail.value.isValidate) {
+        setStoreDateList(val, storeKey2.value);
+      }
+    };
+    const handleTimezoneChange = (val, info) => {
+      dateDetail.value = new DateRange(props.modelValue, format.value, val);
+      emits("update:timezone", val, { ...info });
+      sessionStorage.setItem(timezoneStoreKey, val);
+    };
+    const handleHidden = () => {
+      datePanelShow.value = false;
+    };
+    const diffDateDuration = (type) => {
+      var _a, _b;
+      if (((_a = dateDetail.value.dateValue) == null ? void 0 : _a.length) < 2) return;
+      const { endDate, startDate } = dateDetail.value;
+      const durations = dateDetail.value.dateDuration();
+      const val = type === "left" ? [startDate.subtract(durations), endDate.subtract(durations)] : [startDate.add(durations), endDate.add(durations)];
+      if ((_b = props.validDateRange) == null ? void 0 : _b.length) {
+        const validDateRange = new DateRange(props.validDateRange, props.format);
+        if (!validDateRange.isInValidDateRange(new DateRange(val, props.format))) return;
+      }
+      handleChange(val);
+    };
+    const handleClickLeft = () => {
+      diffDateDuration("left");
+    };
+    const handleClickRight = () => {
+      diffDateDuration("right");
+    };
+    const handleClickoutside = (e) => {
+      if (!datePanelShow.value) return;
+      if (!Array.from(document.querySelectorAll(".__bk-date-picker-popover__")).some(
+        (item) => item.contains(e.target)
+      )) {
+        handleHidden();
+      }
+    };
+    const handleClickDate = () => {
+      datePanelShow.value = !datePanelShow.value;
+      if (datePanelShow.value) {
+        tooltipsShow.value = false;
+      }
+    };
+    __expose({
       handleHidePanel: () => {
-        D.value = !1;
+        datePanelShow.value = false;
       },
       handleShowPanel: () => {
-        D.value = !0;
+        datePanelShow.value = true;
       }
-    }), (f, u) => (p(), z(
-      "div",
-      {
-        class: da({
-          __bk_date_picker__: !0,
-          "is-simplicity": f.behavior === "simplicity",
-          "is-disabled": f.disabled
-        })
-      },
-      [
-        v("span", {
-          onClick: T,
-          class: "date-icon"
-        }, [
-          E(t(Wa), { class: "date-icon-left" })
-        ]),
-        E(t(ca), {
-          arrow: !1,
-          "is-show": D.value,
-          offset: { mainAxis: 10, crossAxis: 10, alignmentAxis: -32 },
-          onAfterHidden: B,
-          "ext-cls": "bk-date-picker-popover __bk-date-picker-popover__",
-          placement: "bottom-start",
-          theme: "light",
-          trigger: "manual"
-        }, {
-          content: j(() => [
-            E(Nt, {
-              "default-date": o.value,
-              "need-timezone": f.needTimezone,
-              timezone: f.timezone,
-              onChange: g,
-              "onUpdate:timezone": P
-            }, null, 8, ["default-date", "need-timezone", "timezone"])
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass({
+            __bk_date_picker__: true,
+            "is-simplicity": _ctx.behavior === "simplicity",
+            "is-disabled": _ctx.disabled
+          })
+        },
+        [
+          createElementVNode("span", {
+            class: "date-icon",
+            onClick: handleClickLeft
+          }, [
+            createVNode(unref(AngleLeft), { class: "date-icon-left" })
           ]),
-          default: j(() => {
-            var M;
-            return [
-              fa((p(), z(
-                "span",
-                {
-                  popoverDelay: [100, 10],
-                  onClick: W,
-                  onMouseenter: _,
-                  onMouseleave: A,
-                  class: "date-content",
-                  ref_key: "dateContentRef",
-                  ref: h
-                },
-                [
-                  $t,
-                  v(
-                    "span",
-                    null,
-                    k(o.value.toDisplayString()),
-                    1
-                    /* TEXT */
-                  ),
-                  f.needTimezone && c.value.label !== t(d).tz.guess() ? (p(), z(
-                    "span",
-                    jt,
-                    k(c.value.abbreviation || ((M = c.value.utc) == null ? void 0 : M.replace("UTC", "").replace(":00", ""))),
-                    1
-                    /* TEXT */
-                  )) : sa("v-if", !0)
-                ],
-                32
-                /* NEED_HYDRATION */
-              )), [
-                [t(Aa), aa]
-              ])
-            ];
-          }),
-          _: 1
-          /* STABLE */
-        }, 8, ["is-show"]),
-        v("span", {
-          onClick: V,
-          class: "date-icon"
-        }, [
-          E(t(Qa), { class: "date-icon-right" })
-        ]),
-        E(t(ca), {
-          "is-show": N.value,
-          offset: 12,
-          target: h.value,
-          placement: "top",
-          trigger: "manual"
-        }, {
-          content: j(() => {
-            var M, w;
-            return [
-              v(
-                "div",
-                {
-                  style: Ja({ maxWidth: t(pa) === "en" ? "210px" : "156px" }),
-                  class: "__date-tooltips__",
-                  ref_key: "dateTooltipsRef",
-                  ref: b
-                },
-                [
-                  v(
-                    "div",
-                    null,
-                    k((M = y.value) == null ? void 0 : M.startDisplayText),
-                    1
-                    /* TEXT */
-                  ),
-                  G(" to "),
-                  v(
-                    "div",
-                    null,
-                    k((w = y.value) == null ? void 0 : w.endDisplayText),
-                    1
-                    /* TEXT */
-                  ),
-                  v(
-                    "div",
-                    Yt,
-                    k(c.value.label === t(d).tz.guess() ? `${t(r)("浏览器时区")} (${c.value.label})` : c.value.label),
-                    1
-                    /* TEXT */
-                  ),
-                  s.value ? (p(), z(
-                    "div",
-                    Bt,
-                    k(t(r)(s.value < 0 ? "时差：晚 $n 小时" : "时差：早 $n 小时").replace(
-                      "$n",
-                      Math.abs(s.value).toString()
+          createVNode(unref(Popover), {
+            arrow: false,
+            "ext-cls": `bk-date-picker-popover __bk-date-picker-popover__ __bk-date-picker-popover__${_ctx.id}`,
+            "is-show": datePanelShow.value,
+            offset: { mainAxis: 10, crossAxis: 10, alignmentAxis: -32 },
+            placement: "bottom-start",
+            theme: "light",
+            trigger: "manual",
+            onAfterHidden: handleHidden
+          }, {
+            content: withCtx(() => [
+              createVNode(_sfc_main$1, {
+                "default-date": dateDetail.value,
+                "max-duration": _ctx.maxDuration,
+                "min-duration": _ctx.minDuration,
+                "need-timezone": _ctx.needTimezone,
+                timezone: timezoneInfo.value.label,
+                onChange: handleChange,
+                "onUpdate:timezone": handleTimezoneChange
+              }, null, 8, ["default-date", "max-duration", "min-duration", "need-timezone", "timezone"])
+            ]),
+            default: withCtx(() => {
+              var _a, _b, _c, _d;
+              return [
+                withDirectives((openBlock(), createElementBlock(
+                  "span",
+                  {
+                    ref_key: "dateContentRef",
+                    ref: dateContentRef,
+                    class: "date-content",
+                    popoverDelay: [100, 10],
+                    onClick: handleClickDate,
+                    onMouseenter: handleDateMouseenter,
+                    onMouseleave: handleDateMouseleave
+                  },
+                  [
+                    _cache[0] || (_cache[0] = createElementVNode(
+                      "svg",
+                      {
+                        class: "date-content-icon",
+                        height: "14",
+                        version: "1.1",
+                        viewBox: "0 0 1024 1024",
+                        width: "14",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        "xmlns:xlink": "http://www.w3.org/1999/xlink"
+                      },
+                      [
+                        createElementVNode("path", {
+                          d: "M486.656 997.312c-268.288 0-486.656-218.304-486.656-486.656 0-268.288 218.304-486.656 486.656-486.656 268.352 0 486.656 218.304 486.656 486.656C973.376 779.008 755.008 997.312 486.656 997.312zM486.656 88c-233.088 0-422.656 189.568-422.656 422.656 0 233.088 189.568 422.656 422.656 422.656s422.656-189.632 422.656-422.656C909.376 277.568 719.744 88 486.656 88z",
+                          fill: "#979BA5"
+                        }),
+                        createElementVNode("path", {
+                          d: "M816.064 544 432.064 544 432.064 160 496.064 160 496.064 480 816.064 480Z",
+                          fill: "#979BA5"
+                        })
+                      ],
+                      -1
+                      /* HOISTED */
                     )),
-                    1
-                    /* TEXT */
-                  )) : sa("v-if", !0)
-                ],
-                4
-                /* STYLE */
-              )
-            ];
-          }),
-          _: 1
-          /* STABLE */
-        }, 8, ["is-show", "target"])
-      ],
-      2
-      /* CLASS */
-    ));
+                    createElementVNode(
+                      "span",
+                      null,
+                      toDisplayString(dateDetailDisplayString.value),
+                      1
+                      /* TEXT */
+                    ),
+                    _ctx.needTimezone && ((_a = timezoneInfo.value) == null ? void 0 : _a.label) !== unref(dayjs).tz.guess() ? (openBlock(), createElementBlock(
+                      "span",
+                      _hoisted_1,
+                      toDisplayString(((_b = timezoneInfo.value) == null ? void 0 : _b.abbreviation) || ((_d = (_c = timezoneInfo.value) == null ? void 0 : _c.utc) == null ? void 0 : _d.replace("UTC", "").replace(":00", ""))),
+                      1
+                      /* TEXT */
+                    )) : createCommentVNode("v-if", true)
+                  ],
+                  32
+                  /* NEED_HYDRATION */
+                )), [
+                  [unref(clickoutside), handleClickoutside]
+                ])
+              ];
+            }),
+            _: 1
+            /* STABLE */
+          }, 8, ["ext-cls", "is-show"]),
+          createElementVNode("span", {
+            class: "date-icon",
+            onClick: handleClickRight
+          }, [
+            createVNode(unref(AngleRight), { class: "date-icon-right" })
+          ]),
+          createVNode(unref(Popover), {
+            "is-show": tooltipsShow.value,
+            offset: 12,
+            placement: "top",
+            target: dateContentRef.value,
+            trigger: "manual"
+          }, {
+            content: withCtx(() => {
+              var _a, _b, _c, _d, _e;
+              return [
+                createElementVNode(
+                  "div",
+                  {
+                    ref_key: "dateTooltipsRef",
+                    ref: dateTooltipsRef,
+                    class: "__date-tooltips__",
+                    style: normalizeStyle({ maxWidth: unref(lang) === "en" ? "210px" : "156px" })
+                  },
+                  [
+                    createElementVNode(
+                      "div",
+                      null,
+                      toDisplayString((_a = tooltipsDetail.value) == null ? void 0 : _a.startDisplayText),
+                      1
+                      /* TEXT */
+                    ),
+                    _cache[1] || (_cache[1] = createTextVNode(" to ")),
+                    createElementVNode(
+                      "div",
+                      null,
+                      toDisplayString((_b = tooltipsDetail.value) == null ? void 0 : _b.endDisplayText),
+                      1
+                      /* TEXT */
+                    ),
+                    createElementVNode(
+                      "div",
+                      _hoisted_2,
+                      toDisplayString(((_c = timezoneInfo.value) == null ? void 0 : _c.label) === unref(dayjs).tz.guess() ? `${unref(t)("浏览器时区")} (${(_d = timezoneInfo.value) == null ? void 0 : _d.label})` : (_e = timezoneInfo.value) == null ? void 0 : _e.label),
+                      1
+                      /* TEXT */
+                    ),
+                    diffTimezone.value ? (openBlock(), createElementBlock(
+                      "div",
+                      _hoisted_3,
+                      toDisplayString(unref(t)(diffTimezone.value < 0 ? "时差：晚 $n 小时" : "时差：早 $n 小时").replace(
+                        "$n",
+                        Math.abs(diffTimezone.value).toString()
+                      )),
+                      1
+                      /* TEXT */
+                    )) : createCommentVNode("v-if", true)
+                  ],
+                  4
+                  /* STYLE */
+                )
+              ];
+            }),
+            _: 1
+            /* STABLE */
+          }, 8, ["is-show", "target"])
+        ],
+        2
+        /* CLASS */
+      );
+    };
   }
 });
-d.extend(Oa);
-d.extend(ue);
-d.extend(qa);
-d.extend(Fa);
+dayjs.extend(customParseFormat);
+dayjs.extend(localizedFormat);
+dayjs.extend(tz);
+dayjs.extend(utc);
 export {
-  xa as CommonNaturalOptions,
-  Xt as DATE_REGEX_FORMAT,
-  $e as DATE_REGEX_PARSE,
-  ei as DatePicker,
-  ra as DateRange,
-  Xa as DateUnitList,
-  ia as NaturalOptionType,
-  ba as NaturalUnit,
-  C as NowConstant,
-  ka as commonDateList,
-  oa as commonDateRegexp,
-  Ve as dateFormatList,
-  Se as datePickTabList,
-  ua as dateUnit,
-  ni as dayjs,
-  ei as default,
-  Ue as futureDateRegexp,
-  Ia as getStoreKey,
-  La as getStoreTabKey,
-  ya as naturalDateRegexp,
-  Ne as naturalDateShortcutMap,
-  Ra as naturalUnitOptions,
-  Ee as panels,
-  Le as recentDateRegexp,
-  Te as timezoneStoreKey,
-  ai as transformDateRange2Dayjs,
-  _a as transformValue2Dayjs
+  CommonNaturalOptions,
+  DATE_REGEX_FORMAT,
+  DATE_REGEX_PARSE,
+  DEFAULT_TIMEZONE,
+  _sfc_main as DatePicker,
+  DateRange,
+  DateUnitList,
+  MAX_NUMBER_VALUE,
+  NaturalOptionType,
+  NaturalUnit,
+  NowConstant,
+  _sfc_main$b as TimezonePicker,
+  baselineDateRegexp,
+  commonDateList,
+  commonDateRegexp,
+  dateFormatList,
+  datePickTabList,
+  dateUnit,
+  default2 as dayjs,
+  _sfc_main as default,
+  futureDateRegexp,
+  getStoreKey,
+  getStoreTabKey,
+  getTimezoneDetails,
+  getTimezoneInfo,
+  getTimezoneInfoByValue,
+  getTimezoneOffset,
+  inputVal2Dayjs,
+  isValidTimeZone,
+  naturalDateRegexp,
+  naturalDateShortcutMap,
+  naturalUnitOptions,
+  panels,
+  recentDateRegexp,
+  timezoneDetails,
+  timezoneStoreKey,
+  transformDateRange2Dayjs,
+  transformValue2Dayjs
 };