@ql-web/view-report 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ql-web/view-report",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"description": "报告查看",
 	"main": "view-report.es.js",
 	"scripts": {

package/view-report.es.js

@@ -1,19 +1,12 @@
 import { defineComponent, ref, computed, watch, onMounted, onUnmounted, isVue2 } from "vue-demi";
-function normalizeComponent(scriptExports, render3, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
-  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
-  if (render3) {
-    options.render = render3;
-    options.staticRenderFns = staticRenderFns;
-    options._compiled = true;
+import { createElementBlock, openBlock, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createElementVNode, withDirectives, createCommentVNode, vShow, createStaticVNode, Fragment, renderList, normalizeClass } from "vue";
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
   }
-  if (scopeId) {
-    options._scopeId = "data-v-" + scopeId;
-  }
-  return {
-    exports: scriptExports,
-    options
-  };
-}
+  return target;
+};
 const _sfc_main$1 = defineComponent({
   name: "MyButton",
   // 必须声明 name，用于全局注册
@@ -34,23 +27,18 @@ const _sfc_main$1 = defineComponent({
     return { handleClick };
   }
 });
-var _sfc_render$1 = function render() {
-  var _vm = this, _c = _vm._self._c;
-  _vm._self._setupProxy;
-  return _c("button", { staticClass: "my-button", style: { background: _vm.color }, on: { "click": _vm.handleClick } }, [_vm._t("default", function() {
-    return [_vm._v(_vm._s(_vm.text))];
-  })], 2);
-};
-var _sfc_staticRenderFns$1 = [];
-var __component__$1 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$1,
-  _sfc_render$1,
-  _sfc_staticRenderFns$1,
-  false,
-  null,
-  "d19bd5c3"
-);
-const MyButton = __component__$1.exports;
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("button", {
+    class: "my-button",
+    style: normalizeStyle({ background: _ctx.color }),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [
+    renderSlot(_ctx.$slots, "default", {}, () => [
+      createTextVNode(toDisplayString(_ctx.text), 1)
+    ], true)
+  ], 4);
+}
+const MyButton = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-d19bd5c3"]]);
 class DateUtils {
   /**
    * 格式化日期为 YYYY-MM-DD 格式
@@ -414,45 +402,162 @@ const _sfc_main = defineComponent({
     };
   }
 });
-var _sfc_render = function render2() {
-  var _vm = this, _c = _vm._self._c;
-  _vm._self._setupProxy;
-  return _c("div", { ref: "pickerWrapper", staticClass: "view-date-picker-wrapper" }, [_c("div", { staticClass: "native-input-wrapper" }, [_c("input", { ref: "dateInput", staticClass: "native-input", attrs: { "type": "text", "placeholder": "请选择日期", "readonly": "" }, domProps: { "value": _vm.displayDate }, on: { "input": _vm.handleInput, "click": _vm.togglePanel } }), _c("span", { staticClass: "date-icon", on: { "click": _vm.togglePanel } }, [_vm._v("📅")])]), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.panelVisible, expression: "panelVisible" }], ref: "datePanel", staticClass: "date-picker-dropdown", style: _vm.panelStyle }, [_c("div", { staticClass: "date-picker-panel" }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.panelType == "date", expression: "panelType == 'date'" }], staticClass: "picker-header" }, [_c("button", { staticClass: "toggle-btn year-btn prev-year", on: { "click": _vm.switchToPrevYear } }, [_vm._v("«")]), _c("button", { staticClass: "toggle-btn month-btn prev-month", on: { "click": _vm.switchToPrevMonth } }, [_vm._v(" < ")]), _c("div", { staticClass: "current-month" }, [_c("span", { staticClass: "clickable-year", on: { "click": _vm.openYearPanel } }, [_vm._v(_vm._s(_vm.currentYear) + "年")]), _c("span", { staticClass: "clickable-month", on: { "click": _vm.openMonthPanel } }, [_vm._v(_vm._s(_vm.currentMonth) + "月")])]), _c("button", { staticClass: "toggle-btn month-btn next-month", on: { "click": _vm.switchToNextMonth } }, [_vm._v(">")]), _c("button", { staticClass: "toggle-btn year-btn next-year", on: { "click": _vm.switchToNextYear } }, [_vm._v("»")])]), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.panelType == "year", expression: "panelType == 'year'" }], staticClass: "picker-header" }, [_c("button", { staticClass: "toggle-btn month-btn prev-month", on: { "click": _vm.switchToPrevTenYears } }, [_vm._v(" < ")]), _c("div", { staticClass: "current-month" }, [_c("span", { staticClass: "clickable-year" }, [_vm._v(_vm._s(_vm.getDecadeStartAndEnd) + "年")])]), _c("button", { staticClass: "toggle-btn month-btn next-month", on: { "click": _vm.switchToNextTenYears } }, [_vm._v(">")])]), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.panelType == "month", expression: "panelType == 'month'" }], staticClass: "picker-header" }, [_c("button", { staticClass: "toggle-btn month-btn prev-month", on: { "click": _vm.switchToPrevYear } }, [_vm._v(" < ")]), _c("div", { staticClass: "current-month" }, [_c("span", { staticClass: "clickable-year" }, [_vm._v(_vm._s(_vm.currentYear) + "年")])]), _c("button", { staticClass: "toggle-btn month-btn next-month", on: { "click": _vm.switchToNextYear } }, [_vm._v(">")])]), _vm.panelType === "date" ? _c("div", { staticClass: "bod-mb" }, [_vm._m(0), _c("div", { staticClass: "picker-panel" }, _vm._l(_vm.panelDates, function(item, index2) {
-    return _c("div", { key: index2, staticClass: "date-item", class: {
-      "not-current-month": !item.isCurrentMonth,
-      "selected": item.formatDate === _vm.displayDate,
-      "hover": _vm.hoverDate === item.formatDate && item.formatDate !== _vm.displayDate
-    }, on: { "click": function($event) {
-      return _vm.selectDate(item);
-    }, "mouseenter": function($event) {
-      _vm.hoverDate = item.formatDate;
-    }, "mouseleave": function($event) {
-      _vm.hoverDate = "";
-    } } }, [_vm._v(" " + _vm._s(item.date.getDate()) + " ")]);
-  }), 0)]) : _vm.panelType === "year" ? _c("div", { staticClass: "bod-mb" }, _vm._l(_vm.decadeYears, function(year) {
-    return _c("div", { key: year, staticClass: "year-item", class: { "selected": year === _vm.currentYear }, on: { "click": function($event) {
-      return _vm.selectDecadeYear(year);
-    } } }, [_vm._v(" " + _vm._s(year) + "年 ")]);
-  }), 0) : _vm.panelType === "month" ? _c("div", { staticClass: "bod-mb" }, _vm._l(12, function(month) {
-    return _c("div", { key: month, staticClass: "month-item", class: { "selected": month === _vm.currentMonth }, on: { "click": function($event) {
-      return _vm.selectTargetMonth(month);
-    } } }, [_vm._v(" " + _vm._s(month) + "月 ")]);
-  }), 0) : _vm._e()])])]);
+const _hoisted_1 = {
+  class: "view-date-picker-wrapper",
+  ref: "pickerWrapper"
 };
-var _sfc_staticRenderFns = [function() {
-  var _vm = this, _c = _vm._self._c;
-  _vm._self._setupProxy;
-  return _c("div", { staticClass: "picker-week-header" }, [_c("div", { staticClass: "week-item" }, [_vm._v("日")]), _c("div", { staticClass: "week-item" }, [_vm._v("一")]), _c("div", { staticClass: "week-item" }, [_vm._v("二")]), _c("div", { staticClass: "week-item" }, [_vm._v("三")]), _c("div", { staticClass: "week-item" }, [_vm._v("四")]), _c("div", { staticClass: "week-item" }, [_vm._v("五")]), _c("div", { staticClass: "week-item" }, [_vm._v("六")])]);
-}];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "e6885493"
-);
-const ViewDatePicker = __component__.exports;
+const _hoisted_2 = { class: "native-input-wrapper" };
+const _hoisted_3 = ["value"];
+const _hoisted_4 = { class: "date-picker-panel" };
+const _hoisted_5 = { class: "picker-header" };
+const _hoisted_6 = { class: "current-month" };
+const _hoisted_7 = { class: "picker-header" };
+const _hoisted_8 = { class: "current-month" };
+const _hoisted_9 = { class: "clickable-year" };
+const _hoisted_10 = { class: "picker-header" };
+const _hoisted_11 = { class: "current-month" };
+const _hoisted_12 = { class: "clickable-year" };
+const _hoisted_13 = {
+  key: 0,
+  class: "bod-mb"
+};
+const _hoisted_14 = { class: "picker-panel" };
+const _hoisted_15 = ["onClick", "onMouseenter"];
+const _hoisted_16 = {
+  key: 1,
+  class: "bod-mb"
+};
+const _hoisted_17 = ["onClick"];
+const _hoisted_18 = {
+  key: 2,
+  class: "bod-mb"
+};
+const _hoisted_19 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      createElementVNode("input", {
+        ref: "dateInput",
+        type: "text",
+        value: _ctx.displayDate,
+        onInput: _cache[0] || (_cache[0] = (...args) => _ctx.handleInput && _ctx.handleInput(...args)),
+        placeholder: "请选择日期",
+        readonly: "",
+        class: "native-input",
+        onClick: _cache[1] || (_cache[1] = (...args) => _ctx.togglePanel && _ctx.togglePanel(...args))
+      }, null, 40, _hoisted_3),
+      createElementVNode("span", {
+        class: "date-icon",
+        onClick: _cache[2] || (_cache[2] = (...args) => _ctx.togglePanel && _ctx.togglePanel(...args))
+      }, "📅")
+    ]),
+    withDirectives(createElementVNode("div", {
+      ref: "datePanel",
+      class: "date-picker-dropdown",
+      style: normalizeStyle(_ctx.panelStyle)
+    }, [
+      createElementVNode("div", _hoisted_4, [
+        withDirectives(createElementVNode("div", _hoisted_5, [
+          createElementVNode("button", {
+            class: "toggle-btn year-btn prev-year",
+            onClick: _cache[3] || (_cache[3] = (...args) => _ctx.switchToPrevYear && _ctx.switchToPrevYear(...args))
+          }, "«"),
+          createElementVNode("button", {
+            class: "toggle-btn month-btn prev-month",
+            onClick: _cache[4] || (_cache[4] = (...args) => _ctx.switchToPrevMonth && _ctx.switchToPrevMonth(...args))
+          }, " < "),
+          createElementVNode("div", _hoisted_6, [
+            createElementVNode("span", {
+              onClick: _cache[5] || (_cache[5] = (...args) => _ctx.openYearPanel && _ctx.openYearPanel(...args)),
+              class: "clickable-year"
+            }, toDisplayString(_ctx.currentYear) + "年", 1),
+            createElementVNode("span", {
+              onClick: _cache[6] || (_cache[6] = (...args) => _ctx.openMonthPanel && _ctx.openMonthPanel(...args)),
+              class: "clickable-month"
+            }, toDisplayString(_ctx.currentMonth) + "月", 1)
+          ]),
+          createElementVNode("button", {
+            class: "toggle-btn month-btn next-month",
+            onClick: _cache[7] || (_cache[7] = (...args) => _ctx.switchToNextMonth && _ctx.switchToNextMonth(...args))
+          }, ">"),
+          createElementVNode("button", {
+            class: "toggle-btn year-btn next-year",
+            onClick: _cache[8] || (_cache[8] = (...args) => _ctx.switchToNextYear && _ctx.switchToNextYear(...args))
+          }, "»")
+        ], 512), [
+          [vShow, _ctx.panelType == "date"]
+        ]),
+        withDirectives(createElementVNode("div", _hoisted_7, [
+          createElementVNode("button", {
+            class: "toggle-btn month-btn prev-month",
+            onClick: _cache[9] || (_cache[9] = (...args) => _ctx.switchToPrevTenYears && _ctx.switchToPrevTenYears(...args))
+          }, " < "),
+          createElementVNode("div", _hoisted_8, [
+            createElementVNode("span", _hoisted_9, toDisplayString(_ctx.getDecadeStartAndEnd) + "年", 1)
+          ]),
+          createElementVNode("button", {
+            class: "toggle-btn month-btn next-month",
+            onClick: _cache[10] || (_cache[10] = (...args) => _ctx.switchToNextTenYears && _ctx.switchToNextTenYears(...args))
+          }, ">")
+        ], 512), [
+          [vShow, _ctx.panelType == "year"]
+        ]),
+        withDirectives(createElementVNode("div", _hoisted_10, [
+          createElementVNode("button", {
+            class: "toggle-btn month-btn prev-month",
+            onClick: _cache[11] || (_cache[11] = (...args) => _ctx.switchToPrevYear && _ctx.switchToPrevYear(...args))
+          }, " < "),
+          createElementVNode("div", _hoisted_11, [
+            createElementVNode("span", _hoisted_12, toDisplayString(_ctx.currentYear) + "年", 1)
+          ]),
+          createElementVNode("button", {
+            class: "toggle-btn month-btn next-month",
+            onClick: _cache[12] || (_cache[12] = (...args) => _ctx.switchToNextYear && _ctx.switchToNextYear(...args))
+          }, ">")
+        ], 512), [
+          [vShow, _ctx.panelType == "month"]
+        ]),
+        _ctx.panelType === "date" ? (openBlock(), createElementBlock("div", _hoisted_13, [
+          _cache[14] || (_cache[14] = createStaticVNode('<div class="picker-week-header" data-v-e6885493><div class="week-item" data-v-e6885493>日</div><div class="week-item" data-v-e6885493>一</div><div class="week-item" data-v-e6885493>二</div><div class="week-item" data-v-e6885493>三</div><div class="week-item" data-v-e6885493>四</div><div class="week-item" data-v-e6885493>五</div><div class="week-item" data-v-e6885493>六</div></div>', 1)),
+          createElementVNode("div", _hoisted_14, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.panelDates, (item, index2) => {
+              return openBlock(), createElementBlock("div", {
+                class: normalizeClass(["date-item", {
+                  "not-current-month": !item.isCurrentMonth,
+                  "selected": item.formatDate === _ctx.displayDate,
+                  "hover": _ctx.hoverDate === item.formatDate && item.formatDate !== _ctx.displayDate
+                }]),
+                key: index2,
+                onClick: ($event) => _ctx.selectDate(item),
+                onMouseenter: ($event) => _ctx.hoverDate = item.formatDate,
+                onMouseleave: _cache[13] || (_cache[13] = ($event) => _ctx.hoverDate = "")
+              }, toDisplayString(item.date.getDate()), 43, _hoisted_15);
+            }), 128))
+          ])
+        ])) : _ctx.panelType === "year" ? (openBlock(), createElementBlock("div", _hoisted_16, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.decadeYears, (year) => {
+            return openBlock(), createElementBlock("div", {
+              class: normalizeClass(["year-item", { "selected": year === _ctx.currentYear }]),
+              key: year,
+              onClick: ($event) => _ctx.selectDecadeYear(year)
+            }, toDisplayString(year) + "年 ", 11, _hoisted_17);
+          }), 128))
+        ])) : _ctx.panelType === "month" ? (openBlock(), createElementBlock("div", _hoisted_18, [
+          (openBlock(), createElementBlock(Fragment, null, renderList(12, (month) => {
+            return createElementVNode("div", {
+              class: normalizeClass(["month-item", { "selected": month === _ctx.currentMonth }]),
+              key: month,
+              onClick: ($event) => _ctx.selectTargetMonth(month)
+            }, toDisplayString(month) + "月 ", 11, _hoisted_19);
+          }), 64))
+        ])) : createCommentVNode("", true)
+      ])
+    ], 4), [
+      [vShow, _ctx.panelVisible]
+    ])
+  ], 512);
+}
+const ViewDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e6885493"]]);
 const components = [MyButton, ViewDatePicker];
 const install = (app) => {
   components.forEach((component) => {

package/view-report.umd.js

@@ -1,22 +1,14 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue-demi")) : typeof define === "function" && define.amd ? define(["exports", "vue-demi"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["view-report"] = {}, global.VueDemi));
-})(this, (function(exports2, vueDemi) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue-demi"), require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue-demi", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["view-report"] = {}, global.VueDemi, global.Vue));
+})(this, (function(exports2, vueDemi, vue) {
   "use strict";
-  function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
-    var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
-    if (render) {
-      options.render = render;
-      options.staticRenderFns = staticRenderFns;
-      options._compiled = true;
+  const _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
     }
-    if (scopeId) {
-      options._scopeId = "data-v-" + scopeId;
-    }
-    return {
-      exports: scriptExports,
-      options
-    };
-  }
+    return target;
+  };
   const _sfc_main$1 = vueDemi.defineComponent({
     name: "MyButton",
     // 必须声明 name，用于全局注册
@@ -37,23 +29,18 @@
       return { handleClick };
     }
   });
-  var _sfc_render$1 = function render() {
-    var _vm = this, _c = _vm._self._c;
-    _vm._self._setupProxy;
-    return _c("button", { staticClass: "my-button", style: { background: _vm.color }, on: { "click": _vm.handleClick } }, [_vm._t("default", function() {
-      return [_vm._v(_vm._s(_vm.text))];
-    })], 2);
-  };
-  var _sfc_staticRenderFns$1 = [];
-  var __component__$1 = /* @__PURE__ */ normalizeComponent(
-    _sfc_main$1,
-    _sfc_render$1,
-    _sfc_staticRenderFns$1,
-    false,
-    null,
-    "d19bd5c3"
-  );
-  const MyButton = __component__$1.exports;
+  function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("button", {
+      class: "my-button",
+      style: vue.normalizeStyle({ background: _ctx.color }),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    }, [
+      vue.renderSlot(_ctx.$slots, "default", {}, () => [
+        vue.createTextVNode(vue.toDisplayString(_ctx.text), 1)
+      ], true)
+    ], 4);
+  }
+  const MyButton = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-d19bd5c3"]]);
   class DateUtils {
     /**
      * 格式化日期为 YYYY-MM-DD 格式
@@ -417,45 +404,162 @@
       };
     }
   });
-  var _sfc_render = function render() {
-    var _vm = this, _c = _vm._self._c;
-    _vm._self._setupProxy;
-    return _c("div", { ref: "pickerWrapper", staticClass: "view-date-picker-wrapper" }, [_c("div", { staticClass: "native-input-wrapper" }, [_c("input", { ref: "dateInput", staticClass: "native-input", attrs: { "type": "text", "placeholder": "请选择日期", "readonly": "" }, domProps: { "value": _vm.displayDate }, on: { "input": _vm.handleInput, "click": _vm.togglePanel } }), _c("span", { staticClass: "date-icon", on: { "click": _vm.togglePanel } }, [_vm._v("📅")])]), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.panelVisible, expression: "panelVisible" }], ref: "datePanel", staticClass: "date-picker-dropdown", style: _vm.panelStyle }, [_c("div", { staticClass: "date-picker-panel" }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.panelType == "date", expression: "panelType == 'date'" }], staticClass: "picker-header" }, [_c("button", { staticClass: "toggle-btn year-btn prev-year", on: { "click": _vm.switchToPrevYear } }, [_vm._v("«")]), _c("button", { staticClass: "toggle-btn month-btn prev-month", on: { "click": _vm.switchToPrevMonth } }, [_vm._v(" < ")]), _c("div", { staticClass: "current-month" }, [_c("span", { staticClass: "clickable-year", on: { "click": _vm.openYearPanel } }, [_vm._v(_vm._s(_vm.currentYear) + "年")]), _c("span", { staticClass: "clickable-month", on: { "click": _vm.openMonthPanel } }, [_vm._v(_vm._s(_vm.currentMonth) + "月")])]), _c("button", { staticClass: "toggle-btn month-btn next-month", on: { "click": _vm.switchToNextMonth } }, [_vm._v(">")]), _c("button", { staticClass: "toggle-btn year-btn next-year", on: { "click": _vm.switchToNextYear } }, [_vm._v("»")])]), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.panelType == "year", expression: "panelType == 'year'" }], staticClass: "picker-header" }, [_c("button", { staticClass: "toggle-btn month-btn prev-month", on: { "click": _vm.switchToPrevTenYears } }, [_vm._v(" < ")]), _c("div", { staticClass: "current-month" }, [_c("span", { staticClass: "clickable-year" }, [_vm._v(_vm._s(_vm.getDecadeStartAndEnd) + "年")])]), _c("button", { staticClass: "toggle-btn month-btn next-month", on: { "click": _vm.switchToNextTenYears } }, [_vm._v(">")])]), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.panelType == "month", expression: "panelType == 'month'" }], staticClass: "picker-header" }, [_c("button", { staticClass: "toggle-btn month-btn prev-month", on: { "click": _vm.switchToPrevYear } }, [_vm._v(" < ")]), _c("div", { staticClass: "current-month" }, [_c("span", { staticClass: "clickable-year" }, [_vm._v(_vm._s(_vm.currentYear) + "年")])]), _c("button", { staticClass: "toggle-btn month-btn next-month", on: { "click": _vm.switchToNextYear } }, [_vm._v(">")])]), _vm.panelType === "date" ? _c("div", { staticClass: "bod-mb" }, [_vm._m(0), _c("div", { staticClass: "picker-panel" }, _vm._l(_vm.panelDates, function(item, index2) {
-      return _c("div", { key: index2, staticClass: "date-item", class: {
-        "not-current-month": !item.isCurrentMonth,
-        "selected": item.formatDate === _vm.displayDate,
-        "hover": _vm.hoverDate === item.formatDate && item.formatDate !== _vm.displayDate
-      }, on: { "click": function($event) {
-        return _vm.selectDate(item);
-      }, "mouseenter": function($event) {
-        _vm.hoverDate = item.formatDate;
-      }, "mouseleave": function($event) {
-        _vm.hoverDate = "";
-      } } }, [_vm._v(" " + _vm._s(item.date.getDate()) + " ")]);
-    }), 0)]) : _vm.panelType === "year" ? _c("div", { staticClass: "bod-mb" }, _vm._l(_vm.decadeYears, function(year) {
-      return _c("div", { key: year, staticClass: "year-item", class: { "selected": year === _vm.currentYear }, on: { "click": function($event) {
-        return _vm.selectDecadeYear(year);
-      } } }, [_vm._v(" " + _vm._s(year) + "年 ")]);
-    }), 0) : _vm.panelType === "month" ? _c("div", { staticClass: "bod-mb" }, _vm._l(12, function(month) {
-      return _c("div", { key: month, staticClass: "month-item", class: { "selected": month === _vm.currentMonth }, on: { "click": function($event) {
-        return _vm.selectTargetMonth(month);
-      } } }, [_vm._v(" " + _vm._s(month) + "月 ")]);
-    }), 0) : _vm._e()])])]);
+  const _hoisted_1 = {
+    class: "view-date-picker-wrapper",
+    ref: "pickerWrapper"
   };
-  var _sfc_staticRenderFns = [function() {
-    var _vm = this, _c = _vm._self._c;
-    _vm._self._setupProxy;
-    return _c("div", { staticClass: "picker-week-header" }, [_c("div", { staticClass: "week-item" }, [_vm._v("日")]), _c("div", { staticClass: "week-item" }, [_vm._v("一")]), _c("div", { staticClass: "week-item" }, [_vm._v("二")]), _c("div", { staticClass: "week-item" }, [_vm._v("三")]), _c("div", { staticClass: "week-item" }, [_vm._v("四")]), _c("div", { staticClass: "week-item" }, [_vm._v("五")]), _c("div", { staticClass: "week-item" }, [_vm._v("六")])]);
-  }];
-  var __component__ = /* @__PURE__ */ normalizeComponent(
-    _sfc_main,
-    _sfc_render,
-    _sfc_staticRenderFns,
-    false,
-    null,
-    "e6885493"
-  );
-  const ViewDatePicker = __component__.exports;
+  const _hoisted_2 = { class: "native-input-wrapper" };
+  const _hoisted_3 = ["value"];
+  const _hoisted_4 = { class: "date-picker-panel" };
+  const _hoisted_5 = { class: "picker-header" };
+  const _hoisted_6 = { class: "current-month" };
+  const _hoisted_7 = { class: "picker-header" };
+  const _hoisted_8 = { class: "current-month" };
+  const _hoisted_9 = { class: "clickable-year" };
+  const _hoisted_10 = { class: "picker-header" };
+  const _hoisted_11 = { class: "current-month" };
+  const _hoisted_12 = { class: "clickable-year" };
+  const _hoisted_13 = {
+    key: 0,
+    class: "bod-mb"
+  };
+  const _hoisted_14 = { class: "picker-panel" };
+  const _hoisted_15 = ["onClick", "onMouseenter"];
+  const _hoisted_16 = {
+    key: 1,
+    class: "bod-mb"
+  };
+  const _hoisted_17 = ["onClick"];
+  const _hoisted_18 = {
+    key: 2,
+    class: "bod-mb"
+  };
+  const _hoisted_19 = ["onClick"];
+  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+      vue.createElementVNode("div", _hoisted_2, [
+        vue.createElementVNode("input", {
+          ref: "dateInput",
+          type: "text",
+          value: _ctx.displayDate,
+          onInput: _cache[0] || (_cache[0] = (...args) => _ctx.handleInput && _ctx.handleInput(...args)),
+          placeholder: "请选择日期",
+          readonly: "",
+          class: "native-input",
+          onClick: _cache[1] || (_cache[1] = (...args) => _ctx.togglePanel && _ctx.togglePanel(...args))
+        }, null, 40, _hoisted_3),
+        vue.createElementVNode("span", {
+          class: "date-icon",
+          onClick: _cache[2] || (_cache[2] = (...args) => _ctx.togglePanel && _ctx.togglePanel(...args))
+        }, "📅")
+      ]),
+      vue.withDirectives(vue.createElementVNode("div", {
+        ref: "datePanel",
+        class: "date-picker-dropdown",
+        style: vue.normalizeStyle(_ctx.panelStyle)
+      }, [
+        vue.createElementVNode("div", _hoisted_4, [
+          vue.withDirectives(vue.createElementVNode("div", _hoisted_5, [
+            vue.createElementVNode("button", {
+              class: "toggle-btn year-btn prev-year",
+              onClick: _cache[3] || (_cache[3] = (...args) => _ctx.switchToPrevYear && _ctx.switchToPrevYear(...args))
+            }, "«"),
+            vue.createElementVNode("button", {
+              class: "toggle-btn month-btn prev-month",
+              onClick: _cache[4] || (_cache[4] = (...args) => _ctx.switchToPrevMonth && _ctx.switchToPrevMonth(...args))
+            }, " < "),
+            vue.createElementVNode("div", _hoisted_6, [
+              vue.createElementVNode("span", {
+                onClick: _cache[5] || (_cache[5] = (...args) => _ctx.openYearPanel && _ctx.openYearPanel(...args)),
+                class: "clickable-year"
+              }, vue.toDisplayString(_ctx.currentYear) + "年", 1),
+              vue.createElementVNode("span", {
+                onClick: _cache[6] || (_cache[6] = (...args) => _ctx.openMonthPanel && _ctx.openMonthPanel(...args)),
+                class: "clickable-month"
+              }, vue.toDisplayString(_ctx.currentMonth) + "月", 1)
+            ]),
+            vue.createElementVNode("button", {
+              class: "toggle-btn month-btn next-month",
+              onClick: _cache[7] || (_cache[7] = (...args) => _ctx.switchToNextMonth && _ctx.switchToNextMonth(...args))
+            }, ">"),
+            vue.createElementVNode("button", {
+              class: "toggle-btn year-btn next-year",
+              onClick: _cache[8] || (_cache[8] = (...args) => _ctx.switchToNextYear && _ctx.switchToNextYear(...args))
+            }, "»")
+          ], 512), [
+            [vue.vShow, _ctx.panelType == "date"]
+          ]),
+          vue.withDirectives(vue.createElementVNode("div", _hoisted_7, [
+            vue.createElementVNode("button", {
+              class: "toggle-btn month-btn prev-month",
+              onClick: _cache[9] || (_cache[9] = (...args) => _ctx.switchToPrevTenYears && _ctx.switchToPrevTenYears(...args))
+            }, " < "),
+            vue.createElementVNode("div", _hoisted_8, [
+              vue.createElementVNode("span", _hoisted_9, vue.toDisplayString(_ctx.getDecadeStartAndEnd) + "年", 1)
+            ]),
+            vue.createElementVNode("button", {
+              class: "toggle-btn month-btn next-month",
+              onClick: _cache[10] || (_cache[10] = (...args) => _ctx.switchToNextTenYears && _ctx.switchToNextTenYears(...args))
+            }, ">")
+          ], 512), [
+            [vue.vShow, _ctx.panelType == "year"]
+          ]),
+          vue.withDirectives(vue.createElementVNode("div", _hoisted_10, [
+            vue.createElementVNode("button", {
+              class: "toggle-btn month-btn prev-month",
+              onClick: _cache[11] || (_cache[11] = (...args) => _ctx.switchToPrevYear && _ctx.switchToPrevYear(...args))
+            }, " < "),
+            vue.createElementVNode("div", _hoisted_11, [
+              vue.createElementVNode("span", _hoisted_12, vue.toDisplayString(_ctx.currentYear) + "年", 1)
+            ]),
+            vue.createElementVNode("button", {
+              class: "toggle-btn month-btn next-month",
+              onClick: _cache[12] || (_cache[12] = (...args) => _ctx.switchToNextYear && _ctx.switchToNextYear(...args))
+            }, ">")
+          ], 512), [
+            [vue.vShow, _ctx.panelType == "month"]
+          ]),
+          _ctx.panelType === "date" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
+            _cache[14] || (_cache[14] = vue.createStaticVNode('<div class="picker-week-header" data-v-e6885493><div class="week-item" data-v-e6885493>日</div><div class="week-item" data-v-e6885493>一</div><div class="week-item" data-v-e6885493>二</div><div class="week-item" data-v-e6885493>三</div><div class="week-item" data-v-e6885493>四</div><div class="week-item" data-v-e6885493>五</div><div class="week-item" data-v-e6885493>六</div></div>', 1)),
+            vue.createElementVNode("div", _hoisted_14, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.panelDates, (item, index2) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  class: vue.normalizeClass(["date-item", {
+                    "not-current-month": !item.isCurrentMonth,
+                    "selected": item.formatDate === _ctx.displayDate,
+                    "hover": _ctx.hoverDate === item.formatDate && item.formatDate !== _ctx.displayDate
+                  }]),
+                  key: index2,
+                  onClick: ($event) => _ctx.selectDate(item),
+                  onMouseenter: ($event) => _ctx.hoverDate = item.formatDate,
+                  onMouseleave: _cache[13] || (_cache[13] = ($event) => _ctx.hoverDate = "")
+                }, vue.toDisplayString(item.date.getDate()), 43, _hoisted_15);
+              }), 128))
+            ])
+          ])) : _ctx.panelType === "year" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.decadeYears, (year) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                class: vue.normalizeClass(["year-item", { "selected": year === _ctx.currentYear }]),
+                key: year,
+                onClick: ($event) => _ctx.selectDecadeYear(year)
+              }, vue.toDisplayString(year) + "年 ", 11, _hoisted_17);
+            }), 128))
+          ])) : _ctx.panelType === "month" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18, [
+            (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(12, (month) => {
+              return vue.createElementVNode("div", {
+                class: vue.normalizeClass(["month-item", { "selected": month === _ctx.currentMonth }]),
+                key: month,
+                onClick: ($event) => _ctx.selectTargetMonth(month)
+              }, vue.toDisplayString(month) + "月 ", 11, _hoisted_19);
+            }), 64))
+          ])) : vue.createCommentVNode("", true)
+        ])
+      ], 4), [
+        [vue.vShow, _ctx.panelVisible]
+      ])
+    ], 512);
+  }
+  const ViewDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e6885493"]]);
   const components = [MyButton, ViewDatePicker];
   const install = (app) => {
     components.forEach((component) => {