@hbdlzy/ui-core 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,9 +1,1122 @@
-import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
+import * as echarts from "echarts";
+export { echarts };
+import { defineComponent, useSlots, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, renderSlot, toDisplayString, ref, reactive, watch, onMounted, resolveComponent, resolveDirective, createVNode, withDirectives, createBlock, withCtx, Fragment, renderList, createSlots, createTextVNode, mergeProps, shallowRef, nextTick, onUnmounted } from "vue";
 import { ElMessage } from "element-plus";
-import * as XLSX from "xlsx";
+import ExcelJS from "exceljs";
 import { saveAs } from "file-saver";
+var BaseCard_vue_vue_type_style_index_0_scoped_true_lang = "";
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1$1 = {
+  key: 0,
+  class: "base-card__header"
+};
+const _hoisted_2$1 = { class: "base-card__header-left" };
+const _hoisted_3$1 = {
+  key: 0,
+  class: "base-card__title-wrap"
+};
+const _hoisted_4$1 = {
+  key: 0,
+  class: "base-card__title-marker"
+};
+const _hoisted_5$1 = {
+  key: 2,
+  class: "base-card__title"
+};
+const _hoisted_6$1 = {
+  key: 0,
+  class: "base-card__header-right"
+};
+const _hoisted_7$1 = {
+  key: 0,
+  class: "base-card__meta"
+};
+const _hoisted_8$1 = ["disabled"];
+const _hoisted_9$1 = { class: "base-card__body" };
+const _hoisted_10$1 = {
+  key: 0,
+  class: "base-card__tip"
+};
+const _hoisted_11 = { class: "base-card__content" };
+const _sfc_main$3 = defineComponent({
+  ...{
+    name: "BaseCard"
+  },
+  __name: "BaseCard",
+  props: {
+    title: { default: "" },
+    metaText: { default: "" },
+    showHeader: { type: Boolean, default: true },
+    showRight: { type: Boolean, default: true },
+    showTitleMarker: { type: Boolean, default: true },
+    showExport: { type: Boolean, default: false },
+    exportText: { default: "\u5BFC\u51FA" },
+    exportDisabled: { type: Boolean, default: false },
+    exportPayload: {},
+    padding: { default: 20 },
+    radius: { default: 8 },
+    borderColor: { default: "var(--border-color)" },
+    backgroundColor: { default: "var(--border-bg-color)" },
+    shadowColor: { default: "var(--border-projection)" },
+    headerGap: { default: 16 },
+    headerMarginBottom: { default: 20 },
+    leftGap: { default: 16 },
+    rightGap: { default: 16 },
+    titleColor: { default: "var(--el-text-color-primary)" },
+    titleSize: { default: 18 },
+    titleWeight: { default: 500 },
+    markerColor: { default: "var(--el-color-primary)" },
+    markerWidth: { default: 4 },
+    markerHeight: { default: 24 },
+    markerRadius: { default: "0 4px 4px 0" },
+    markerGap: { default: 10 },
+    metaColor: { default: "#808080" },
+    metaSize: { default: 16 },
+    exportColor: { default: "var(--el-color-primary)" }
+  },
+  emits: ["export"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const hasTitleBlock = computed(() => Boolean(props.title) || Boolean(slots["title-label"]));
+    const hasTitleExtra = computed(() => Boolean(slots.title));
+    const hasRightExtra = computed(() => Boolean(slots["header-right"]));
+    const hasRightSection = computed(
+      () => props.showRight && (hasRightExtra.value || Boolean(props.metaText) || props.showExport)
+    );
+    const shouldRenderHeader = computed(
+      () => props.showHeader && (hasTitleBlock.value || hasTitleExtra.value || hasRightSection.value)
+    );
+    const defaultExportPayload = computed(() => ({
+      title: props.title || void 0,
+      metaText: props.metaText || void 0
+    }));
+    const cardStyles = computed(() => ({
+      "--base-card-padding": toCssValue(props.padding),
+      "--base-card-radius": toCssValue(props.radius),
+      "--base-card-border-color": props.borderColor,
+      "--base-card-background-color": props.backgroundColor,
+      "--base-card-shadow-color": props.shadowColor,
+      "--base-card-header-gap": toCssValue(props.headerGap),
+      "--base-card-header-margin-bottom": toCssValue(props.headerMarginBottom),
+      "--base-card-left-gap": toCssValue(props.leftGap),
+      "--base-card-right-gap": toCssValue(props.rightGap),
+      "--base-card-title-color": props.titleColor,
+      "--base-card-title-size": toCssValue(props.titleSize),
+      "--base-card-title-weight": toTextValue(props.titleWeight),
+      "--base-card-marker-color": props.markerColor,
+      "--base-card-marker-width": toCssValue(props.markerWidth),
+      "--base-card-marker-height": toCssValue(props.markerHeight),
+      "--base-card-marker-radius": toCssValue(props.markerRadius),
+      "--base-card-marker-gap": toCssValue(props.markerGap),
+      "--base-card-meta-color": props.metaColor,
+      "--base-card-meta-size": toCssValue(props.metaSize),
+      "--base-card-export-color": props.exportColor
+    }));
+    const handleExport = () => {
+      emit("export", props.exportPayload === void 0 ? defaultExportPayload.value : props.exportPayload);
+    };
+    function toCssValue(value, unit = "px") {
+      if (value === void 0 || value === null || value === "") {
+        return void 0;
+      }
+      return typeof value === "number" ? `${value}${unit}` : value;
+    }
+    function toTextValue(value) {
+      if (value === void 0 || value === null || value === "") {
+        return void 0;
+      }
+      return String(value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "base-card",
+        style: normalizeStyle(cardStyles.value)
+      }, [
+        shouldRenderHeader.value ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
+          createElementVNode("div", _hoisted_2$1, [
+            hasTitleBlock.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+              __props.showTitleMarker ? (openBlock(), createElementBlock("span", _hoisted_4$1)) : createCommentVNode("", true),
+              _ctx.$slots["title-label"] ? renderSlot(_ctx.$slots, "title-label", { key: 1 }, void 0, true) : (openBlock(), createElementBlock("h4", _hoisted_5$1, toDisplayString(__props.title), 1))
+            ])) : createCommentVNode("", true),
+            renderSlot(_ctx.$slots, "title", {}, void 0, true)
+          ]),
+          hasRightSection.value ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
+            renderSlot(_ctx.$slots, "header-right", {}, void 0, true),
+            __props.metaText ? (openBlock(), createElementBlock("span", _hoisted_7$1, toDisplayString(__props.metaText), 1)) : createCommentVNode("", true),
+            __props.showExport ? (openBlock(), createElementBlock("button", {
+              key: 1,
+              class: "base-card__export",
+              type: "button",
+              disabled: __props.exportDisabled,
+              onClick: handleExport
+            }, toDisplayString(__props.exportText), 9, _hoisted_8$1)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_9$1, [
+          _ctx.$slots.tip ? (openBlock(), createElementBlock("div", _hoisted_10$1, [
+            renderSlot(_ctx.$slots, "tip", {}, void 0, true)
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_11, [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ])
+        ])
+      ], 4);
+    };
+  }
+});
+var BaseCard = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-6bfddf1c"]]);
+var BaseTable_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _hoisted_1 = { class: "base-table" };
+const _hoisted_2 = {
+  key: 0,
+  class: "base-table__toolbar"
+};
+const _hoisted_3 = { class: "base-table__toolbar-left" };
+const _hoisted_4 = {
+  key: 0,
+  class: "base-table__toolbar-right"
+};
+const _hoisted_5 = {
+  key: 0,
+  class: "base-table__actions"
+};
+const _hoisted_6 = {
+  key: 2,
+  class: "base-table__tags"
+};
+const _hoisted_7 = { key: 1 };
+const _hoisted_8 = ["innerHTML"];
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = {
+  key: 6,
+  class: "base-table__text"
+};
+const _sfc_main$2 = defineComponent({
+  ...{
+    name: "BaseTable"
+  },
+  __name: "BaseTable",
+  props: {
+    columns: {},
+    data: { default: () => [] },
+    request: {},
+    requestParams: { default: () => ({}) },
+    resultAdapter: {},
+    autoLoad: { type: Boolean, default: true },
+    reloadOnParamsChange: { type: Boolean, default: true },
+    reloadOnSortChange: { type: Boolean, default: true },
+    rowKey: { default: "id" },
+    height: { default: "100%" },
+    border: { type: Boolean, default: false },
+    stripe: { type: Boolean, default: false },
+    showToolbar: { type: Boolean, default: true },
+    showPagination: { type: Boolean, default: true },
+    hasSelection: { type: Boolean, default: false },
+    hasIndex: { type: Boolean, default: false },
+    indexLabel: { default: "\u5E8F\u53F7" },
+    indexWidth: { default: 60 },
+    selectionWidth: { default: 50 },
+    rowSelectable: {},
+    pagination: { default: () => ({}) },
+    currentPageKey: { default: "pageNum" },
+    pageSizeKey: { default: "pageSize" },
+    defaultSort: { default: () => ({
+      prop: void 0,
+      order: null
+    }) },
+    sortFieldKey: { default: "sortField" },
+    sortOrderKey: { default: "sortOrder" },
+    sortOrderMap: { default: () => ({
+      ascending: "asc",
+      descending: "desc"
+    }) },
+    sortMapper: {},
+    emptyText: { default: "\u6682\u65E0\u6570\u636E" },
+    loadingText: { default: "\u52A0\u8F7D\u4E2D..." }
+  },
+  emits: ["selection-change", "sort-change", "row-action", "cell-click", "cell-input", "page-change", "size-change", "update:pagination", "loaded", "request-error"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    var _a, _b;
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const tableRef = ref();
+    const loading = ref(false);
+    const rows = ref(normalizeRows(props.data));
+    const selectionRows = ref([]);
+    const sortState = reactive({
+      prop: (_a = props.defaultSort) == null ? void 0 : _a.prop,
+      order: ((_b = props.defaultSort) == null ? void 0 : _b.order) || null
+    });
+    const paginationState = reactive({
+      currentPage: 1,
+      pageSize: 20,
+      total: 0,
+      pageSizes: [10, 20, 50, 100]
+    });
+    syncPagination(props.pagination);
+    const normalizedHeight = computed(() => toCssValue(props.height));
+    const shouldRenderToolbar = computed(() => props.showToolbar && (Boolean(slots.toolbar) || props.showPagination));
+    const normalizedDefaultSort = computed(() => {
+      if (!sortState.prop || !sortState.order) {
+        return void 0;
+      }
+      return {
+        prop: sortState.prop,
+        order: sortState.order
+      };
+    });
+    watch(
+      () => props.data,
+      (value) => {
+        if (!props.request) {
+          setData(value || []);
+        }
+      },
+      { deep: true }
+    );
+    watch(
+      () => props.pagination,
+      (value) => {
+        syncPagination(value);
+      },
+      { deep: true }
+    );
+    watch(
+      () => props.requestParams,
+      () => {
+        if (props.request && props.reloadOnParamsChange && props.autoLoad) {
+          paginationState.currentPage = 1;
+          void load();
+        }
+      },
+      { deep: true }
+    );
+    watch(
+      () => props.defaultSort,
+      (value) => {
+        sortState.prop = value == null ? void 0 : value.prop;
+        sortState.order = (value == null ? void 0 : value.order) || null;
+      },
+      { deep: true }
+    );
+    onMounted(() => {
+      var _a2;
+      if (props.request && props.autoLoad) {
+        void load();
+        return;
+      }
+      if (!props.request) {
+        rows.value = normalizeRows(props.data);
+        if (!((_a2 = props.pagination) == null ? void 0 : _a2.total)) {
+          paginationState.total = rows.value.length;
+          emitPagination();
+        }
+      }
+    });
+    function syncPagination(value) {
+      paginationState.currentPage = Number((value == null ? void 0 : value.currentPage) || paginationState.currentPage || 1);
+      paginationState.pageSize = Number((value == null ? void 0 : value.pageSize) || paginationState.pageSize || 20);
+      paginationState.total = Number((value == null ? void 0 : value.total) || (value == null ? void 0 : value.total) === 0 ? value.total : paginationState.total || rows.value.length);
+      paginationState.pageSizes = Array.isArray(value == null ? void 0 : value.pageSizes) && value.pageSizes.length ? [...value.pageSizes] : [...paginationState.pageSizes.length ? paginationState.pageSizes : [10, 20, 50, 100]];
+    }
+    function emitPagination() {
+      emit("update:pagination", {
+        currentPage: paginationState.currentPage,
+        pageSize: paginationState.pageSize,
+        total: paginationState.total,
+        pageSizes: [...paginationState.pageSizes]
+      });
+    }
+    async function load(data) {
+      if (Array.isArray(data)) {
+        setData(data);
+        return;
+      }
+      if (!props.request) {
+        setData(props.data || []);
+        return;
+      }
+      loading.value = true;
+      const requestParams = buildRequestParams();
+      try {
+        const result = await props.request(requestParams);
+        const normalized = normalizeRequestResult(result, requestParams);
+        rows.value = normalized.rows;
+        paginationState.total = normalized.total;
+        emitPagination();
+        emit("loaded", {
+          rows: [...rows.value],
+          total: paginationState.total,
+          params: requestParams
+        });
+      } catch (error) {
+        rows.value = [];
+        paginationState.total = 0;
+        emitPagination();
+        emit("request-error", error);
+      } finally {
+        loading.value = false;
+      }
+    }
+    async function refresh() {
+      await load();
+    }
+    async function resetPage() {
+      paginationState.currentPage = 1;
+      emitPagination();
+      await load();
+    }
+    function setData(data) {
+      var _a2, _b2;
+      rows.value = normalizeRows(data);
+      if (!props.request) {
+        paginationState.total = Number((_b2 = (_a2 = props.pagination) == null ? void 0 : _a2.total) != null ? _b2 : rows.value.length);
+        emitPagination();
+      }
+    }
+    function clearSelection() {
+      var _a2;
+      (_a2 = tableRef.value) == null ? void 0 : _a2.clearSelection();
+      selectionRows.value = [];
+    }
+    function toggleRowSelection(row, selected) {
+      var _a2;
+      (_a2 = tableRef.value) == null ? void 0 : _a2.toggleRowSelection(row, selected);
+    }
+    function getSelectionRows() {
+      return [...selectionRows.value];
+    }
+    function getRows() {
+      return [...rows.value];
+    }
+    function handleSelectionChange(value) {
+      selectionRows.value = value;
+      emit("selection-change", value);
+    }
+    function handleSortChange(payload) {
+      const column = props.columns.find((item) => String(item.prop || "") === String(payload.prop || ""));
+      sortState.prop = payload.prop;
+      sortState.order = payload.order;
+      const sortPayload = buildSortPayload(column, payload.prop, payload.order);
+      emit("sort-change", sortPayload);
+      if (props.request && props.reloadOnSortChange) {
+        paginationState.currentPage = 1;
+        emitPagination();
+        void load();
+      }
+    }
+    function handleCurrentChange(value) {
+      paginationState.currentPage = value;
+      emitPagination();
+      emit("page-change", value);
+      if (props.request) {
+        void load();
+      }
+    }
+    function handleSizeChange(value) {
+      paginationState.pageSize = value;
+      paginationState.currentPage = 1;
+      emitPagination();
+      emit("size-change", value);
+      if (props.request) {
+        void load();
+      }
+    }
+    function handleRowAction(row, action, column) {
+      emit("row-action", {
+        row,
+        action,
+        column
+      });
+    }
+    function handleCellClick(row, column) {
+      var _a2;
+      (_a2 = column.clickHandler) == null ? void 0 : _a2.call(column, row, column);
+      emit("cell-click", {
+        row,
+        column,
+        value: getCellValue2(row, column)
+      });
+    }
+    function handleInputChange(value, row, column) {
+      var _a2;
+      if (!column.prop) {
+        return;
+      }
+      row[column.prop] = value;
+      (_a2 = column.inputHandler) == null ? void 0 : _a2.call(column, value, row, column);
+      emit("cell-input", {
+        row,
+        column,
+        value
+      });
+    }
+    function buildRequestParams() {
+      const params = {
+        ...props.requestParams,
+        currentPage: paginationState.currentPage,
+        pageSize: paginationState.pageSize,
+        [props.currentPageKey]: paginationState.currentPage,
+        [props.pageSizeKey]: paginationState.pageSize
+      };
+      const currentColumn = props.columns.find((item) => String(item.prop || "") === String(sortState.prop || ""));
+      const sortPayload = buildSortPayload(currentColumn, sortState.prop, sortState.order);
+      const sortParams = buildSortParams(sortPayload);
+      return {
+        ...params,
+        ...sortParams
+      };
+    }
+    function normalizeRequestResult(result, requestParams) {
+      var _a2, _b2;
+      if (props.resultAdapter) {
+        const adaptedResult = props.resultAdapter(result, requestParams);
+        const adaptedRows = normalizeRows(adaptedResult == null ? void 0 : adaptedResult.rows);
+        return {
+          rows: adaptedRows,
+          total: Number((_a2 = adaptedResult == null ? void 0 : adaptedResult.total) != null ? _a2 : adaptedRows.length)
+        };
+      }
+      if (Array.isArray(result)) {
+        return {
+          rows: normalizeRows(result),
+          total: result.length
+        };
+      }
+      const payload = result || {};
+      const container = payload.data && typeof payload.data === "object" ? payload.data : payload;
+      const list = container.records || container.list || container.items || [];
+      const normalizedRows = normalizeRows(list);
+      return {
+        rows: normalizedRows,
+        total: Number((_b2 = container.total) != null ? _b2 : normalizedRows.length)
+      };
+    }
+    function normalizeRows(data) {
+      return Array.isArray(data) ? [...data] : [];
+    }
+    function getColumnKey(column) {
+      return String(column.prop || column.label);
+    }
+    function getColumnProp(column) {
+      return column.prop ? String(column.prop) : void 0;
+    }
+    function getCellValue2(row, column) {
+      if (!column.prop) {
+        return void 0;
+      }
+      return row[column.prop];
+    }
+    function formatCellDisplay(row, column) {
+      if (column.formatter) {
+        const formatted = column.formatter(row, column);
+        return toDisplayValue(formatted, resolveEmptyText(column));
+      }
+      return toDisplayValue(getCellValue2(row, column), resolveEmptyText(column));
+    }
+    function getHtmlContent(row, column) {
+      if (column.html) {
+        return column.html(row, column);
+      }
+      const value = getCellValue2(row, column);
+      return value === void 0 || value === null ? "" : String(value);
+    }
+    function isActionColumn(column) {
+      var _a2;
+      return column.kind === "actions" || Boolean((_a2 = column.actions) == null ? void 0 : _a2.length);
+    }
+    function isLinkColumn(column) {
+      return column.kind === "link" || Boolean(column.clickable);
+    }
+    function getVisibleActions(column, row) {
+      return (column.actions || []).filter((action) => {
+        if (typeof action.visible === "function") {
+          return action.visible(row);
+        }
+        return action.visible !== false;
+      });
+    }
+    function isActionDisabled(action, row) {
+      if (typeof action.disabled === "function") {
+        return action.disabled(row);
+      }
+      return Boolean(action.disabled);
+    }
+    function resolveCellSlotName(column) {
+      return column.slotName || (column.prop ? `cell-${String(column.prop)}` : "");
+    }
+    function resolveHeaderSlotName(column) {
+      return column.headerSlotName || (column.prop ? `header-${String(column.prop)}` : "");
+    }
+    function hasCellSlot(column) {
+      const slotName = resolveCellSlotName(column);
+      return Boolean(slotName && slots[slotName]);
+    }
+    function hasHeaderSlot(column) {
+      const slotName = resolveHeaderSlotName(column);
+      return Boolean(slotName && slots[slotName]);
+    }
+    function getMatchedOptions(row, column) {
+      const value = getCellValue2(row, column);
+      const values = Array.isArray(value) ? value : [value];
+      const valueKey = column.optionValueKey || "value";
+      const labelKey = column.optionLabelKey || "label";
+      const tagTypeKey = column.optionTagTypeKey || "tagType";
+      return values.filter((item) => item !== void 0 && item !== null && item !== "").map((item) => {
+        const matched = (column.options || []).find((option) => option[valueKey] === item);
+        if (!matched) {
+          return {
+            label: String(item),
+            value: item,
+            tagType: "info"
+          };
+        }
+        return {
+          label: String(matched[labelKey]),
+          value: matched[valueKey],
+          tagType: matched[tagTypeKey],
+          color: matched.color
+        };
+      });
+    }
+    function getImageStyle(column) {
+      return {
+        width: toCssValue(column.imageWidth || 50),
+        height: toCssValue(column.imageHeight || 50)
+      };
+    }
+    function toImageSrc(value) {
+      if (typeof value === "string") {
+        return value;
+      }
+      if (value && typeof value === "object" && "url" in value) {
+        return String(value.url || "");
+      }
+      return "";
+    }
+    function getPreviewSrcList(row, column) {
+      const src = toImageSrc(getCellValue2(row, column));
+      return src ? [src] : [];
+    }
+    function resolveEmptyText(column) {
+      return column.emptyText || "--";
+    }
+    function resolveColumnSortable(column) {
+      if (!props.request) {
+        return column.sortable || false;
+      }
+      if (column.sortable === true) {
+        return "custom";
+      }
+      return column.sortable || false;
+    }
+    function buildSortPayload(column, prop, order = null) {
+      return {
+        column,
+        prop,
+        order,
+        field: resolveSortField(column, prop),
+        direction: resolveSortDirection(order)
+      };
+    }
+    function buildSortParams(payload) {
+      var _a2;
+      if (!payload.field || !payload.direction) {
+        return {};
+      }
+      const mappedParams = (_a2 = props.sortMapper) == null ? void 0 : _a2.call(props, payload);
+      if (mappedParams && typeof mappedParams === "object") {
+        return mappedParams;
+      }
+      return {
+        [props.sortFieldKey]: payload.field,
+        [props.sortOrderKey]: payload.direction
+      };
+    }
+    function resolveSortField(column, prop) {
+      return (column == null ? void 0 : column.sortField) || prop;
+    }
+    function resolveSortDirection(order) {
+      if (order === "ascending") {
+        return props.sortOrderMap.ascending;
+      }
+      if (order === "descending") {
+        return props.sortOrderMap.descending;
+      }
+      return null;
+    }
+    function toDisplayValue(value, emptyText = "--") {
+      if (value === 0) {
+        return "0";
+      }
+      if (value === void 0 || value === null || value === "") {
+        return emptyText;
+      }
+      return String(value);
+    }
+    function toCssValue(value) {
+      if (value === void 0 || value === null || value === "") {
+        return void 0;
+      }
+      return typeof value === "number" ? `${value}px` : value;
+    }
+    __expose({
+      load,
+      refresh,
+      setData,
+      resetPage,
+      clearSelection,
+      toggleRowSelection,
+      getSelectionRows,
+      getRows
+    });
+    return (_ctx, _cache) => {
+      const _component_el_pagination = resolveComponent("el-pagination");
+      const _component_el_empty = resolveComponent("el-empty");
+      const _component_el_table_column = resolveComponent("el-table-column");
+      const _component_el_button = resolveComponent("el-button");
+      const _component_el_image = resolveComponent("el-image");
+      const _component_el_tag = resolveComponent("el-tag");
+      const _component_el_input = resolveComponent("el-input");
+      const _component_el_table = resolveComponent("el-table");
+      const _directive_loading = resolveDirective("loading");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        shouldRenderToolbar.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)
+          ]),
+          __props.showPagination ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            createVNode(_component_el_pagination, {
+              small: "",
+              background: "",
+              layout: "total, prev, pager, next, sizes, jumper",
+              total: paginationState.total,
+              "current-page": paginationState.currentPage,
+              "page-size": paginationState.pageSize,
+              "page-sizes": paginationState.pageSizes,
+              "pager-count": 5,
+              "popper-append-to-body": false,
+              onSizeChange: handleSizeChange,
+              onCurrentChange: handleCurrentChange
+            }, null, 8, ["total", "current-page", "page-size", "page-sizes"])
+          ])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        withDirectives((openBlock(), createBlock(_component_el_table, {
+          ref_key: "tableRef",
+          ref: tableRef,
+          data: rows.value,
+          "row-key": __props.rowKey,
+          height: normalizedHeight.value,
+          border: __props.border,
+          stripe: __props.stripe,
+          "default-sort": normalizedDefaultSort.value,
+          "highlight-current-row": "",
+          onSelectionChange: handleSelectionChange,
+          onSortChange: handleSortChange
+        }, {
+          empty: withCtx(() => [
+            createVNode(_component_el_empty, { description: __props.emptyText }, null, 8, ["description"])
+          ]),
+          default: withCtx(() => [
+            __props.hasSelection ? (openBlock(), createBlock(_component_el_table_column, {
+              key: 0,
+              type: "selection",
+              width: __props.selectionWidth,
+              align: "center",
+              selectable: __props.rowSelectable
+            }, null, 8, ["width", "selectable"])) : createCommentVNode("", true),
+            __props.hasIndex ? (openBlock(), createBlock(_component_el_table_column, {
+              key: 1,
+              type: "index",
+              label: __props.indexLabel,
+              width: __props.indexWidth,
+              fixed: "left",
+              align: "center"
+            }, null, 8, ["label", "width"])) : createCommentVNode("", true),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column) => {
+              return openBlock(), createBlock(_component_el_table_column, {
+                key: getColumnKey(column),
+                prop: getColumnProp(column),
+                label: column.label,
+                type: column.type || void 0,
+                width: toCssValue(column.width),
+                "min-width": toCssValue(column.minWidth),
+                fixed: column.fixed,
+                align: column.align || "left",
+                "header-align": column.headerAlign || column.align || "left",
+                sortable: resolveColumnSortable(column),
+                "show-overflow-tooltip": column.showOverflowTooltip !== false,
+                "class-name": column.className,
+                "label-class-name": column.headerClassName
+              }, createSlots({
+                default: withCtx((scope) => [
+                  hasCellSlot(column) ? renderSlot(_ctx.$slots, resolveCellSlotName(column), {
+                    key: 0,
+                    row: scope.row,
+                    columnConfig: column,
+                    columnIndex: scope.$index,
+                    value: getCellValue2(scope.row, column)
+                  }, void 0, true) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                    isActionColumn(column) ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(getVisibleActions(column, scope.row), (action) => {
+                        return openBlock(), createBlock(_component_el_button, {
+                          key: `${action.type}-${action.label}`,
+                          link: "",
+                          type: action.buttonType || (action.type === "delete" ? "danger" : "primary"),
+                          disabled: isActionDisabled(action, scope.row),
+                          onClick: ($event) => handleRowAction(scope.row, action, column)
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(action.label), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["type", "disabled", "onClick"]);
+                      }), 128))
+                    ])) : column.kind === "image" ? (openBlock(), createBlock(_component_el_image, {
+                      key: 1,
+                      class: "base-table__image",
+                      style: normalizeStyle(getImageStyle(column)),
+                      src: toImageSrc(getCellValue2(scope.row, column)),
+                      "preview-src-list": getPreviewSrcList(scope.row, column),
+                      fit: column.imageFit || "cover"
+                    }, null, 8, ["style", "src", "preview-src-list", "fit"])) : column.kind === "tag" ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                      getMatchedOptions(scope.row, column).length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(getMatchedOptions(scope.row, column), (option) => {
+                        return openBlock(), createBlock(_component_el_tag, {
+                          key: String(option.value),
+                          type: option.tagType || "info",
+                          style: normalizeStyle(option.color ? { color: option.color, borderColor: `${option.color}33`, backgroundColor: `${option.color}1a` } : void 0),
+                          size: "small"
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(option.label), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["type", "style"]);
+                      }), 128)) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(resolveEmptyText(column)), 1))
+                    ])) : column.kind === "html" ? (openBlock(), createElementBlock("div", {
+                      key: 3,
+                      innerHTML: getHtmlContent(scope.row, column)
+                    }, null, 8, _hoisted_8)) : column.kind === "input" ? (openBlock(), createBlock(_component_el_input, {
+                      key: 4,
+                      "model-value": toDisplayValue(getCellValue2(scope.row, column), ""),
+                      type: column.inputType || "text",
+                      "onUpdate:modelValue": ($event) => handleInputChange($event, scope.row, column)
+                    }, null, 8, ["model-value", "type", "onUpdate:modelValue"])) : isLinkColumn(column) ? (openBlock(), createElementBlock("button", {
+                      key: 5,
+                      class: "base-table__link",
+                      type: "button",
+                      onClick: ($event) => handleCellClick(scope.row, column)
+                    }, toDisplayString(formatCellDisplay(scope.row, column)), 9, _hoisted_9)) : (openBlock(), createElementBlock("div", _hoisted_10, toDisplayString(formatCellDisplay(scope.row, column)), 1))
+                  ], 64))
+                ]),
+                _: 2
+              }, [
+                hasHeaderSlot(column) ? {
+                  name: "header",
+                  fn: withCtx((headerScope) => [
+                    renderSlot(_ctx.$slots, resolveHeaderSlotName(column), mergeProps({ ref_for: true }, headerScope, { columnConfig: column }), void 0, true)
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1032, ["prop", "label", "type", "width", "min-width", "fixed", "align", "header-align", "sortable", "show-overflow-tooltip", "class-name", "label-class-name"]);
+            }), 128))
+          ]),
+          _: 3
+        }, 8, ["data", "row-key", "height", "border", "stripe", "default-sort"])), [
+          [_directive_loading, loading.value]
+        ])
+      ]);
+    };
+  }
+});
+var BaseTable = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-429ba785"]]);
+var BaseEChart_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _sfc_main$1 = defineComponent({
+  __name: "BaseEChart",
+  props: {
+    option: { default: () => ({}) },
+    theme: {},
+    initOptions: { default: () => ({ renderer: "canvas" }) },
+    setOptionOptions: { type: Boolean, default: () => ({ notMerge: false, lazyUpdate: true }) },
+    loading: { type: Boolean, default: false },
+    loadingOptions: {},
+    autoResize: { type: Boolean, default: true },
+    useDefaultColors: { type: Boolean, default: true },
+    colorStorageKey: { default: "echartsColor" },
+    defaultColors: { default: () => [] },
+    group: { default: void 0 }
+  },
+  emits: ["ready"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const containerRef = ref(null);
+    const chartRef = ref(null);
+    const chartInstance = shallowRef(null);
+    let resizeObserver = null;
+    let resizeFrameId = null;
+    let pendingResizeOptions;
+    const cancelResizeFrame = () => {
+      if (resizeFrameId !== null) {
+        cancelAnimationFrame(resizeFrameId);
+        resizeFrameId = null;
+      }
+    };
+    const getDefaultColors = () => {
+      if (!props.useDefaultColors || typeof window === "undefined") {
+        return props.defaultColors;
+      }
+      try {
+        const raw = window.sessionStorage.getItem(props.colorStorageKey);
+        const colors = raw ? JSON.parse(raw) : [];
+        return colors.length > 0 ? colors : props.defaultColors;
+      } catch {
+        return props.defaultColors;
+      }
+    };
+    const normalizeOption = (option = {}) => {
+      if (option.color) {
+        return option;
+      }
+      const colors = getDefaultColors();
+      if (!colors || colors.length === 0) {
+        return option;
+      }
+      return {
+        ...option,
+        color: colors
+      };
+    };
+    const createChart = () => {
+      if (!chartRef.value) {
+        return null;
+      }
+      const existingChart = echarts.getInstanceByDom(chartRef.value);
+      existingChart == null ? void 0 : existingChart.dispose();
+      const instance = echarts.init(chartRef.value, props.theme, props.initOptions);
+      if (props.group) {
+        instance.group = props.group;
+      }
+      chartInstance.value = instance;
+      emit("ready", instance);
+      return instance;
+    };
+    const getInstance = () => chartInstance.value;
+    const ensureChart = () => {
+      var _a;
+      return (_a = chartInstance.value) != null ? _a : createChart();
+    };
+    const setOption = (option, setOptionOptions = props.setOptionOptions) => {
+      const chart = ensureChart();
+      if (!chart) {
+        return null;
+      }
+      const nextOption = normalizeOption(option);
+      if (typeof setOptionOptions === "boolean") {
+        chart.setOption(nextOption, setOptionOptions);
+      } else {
+        chart.setOption(nextOption, setOptionOptions);
+      }
+      return chart;
+    };
+    const showLoading = (type = "default", loadingOptions) => {
+      const chart = ensureChart();
+      if (!chart) {
+        return;
+      }
+      chart.showLoading(type, loadingOptions);
+    };
+    const hideLoading = () => {
+      var _a;
+      (_a = chartInstance.value) == null ? void 0 : _a.hideLoading();
+    };
+    const syncLoading = () => {
+      if (props.loading) {
+        showLoading("default", props.loadingOptions);
+        return;
+      }
+      hideLoading();
+    };
+    const resize = (resizeOptions) => {
+      pendingResizeOptions = resizeOptions;
+      cancelResizeFrame();
+      resizeFrameId = requestAnimationFrame(() => {
+        var _a;
+        (_a = chartInstance.value) == null ? void 0 : _a.resize(pendingResizeOptions);
+        pendingResizeOptions = void 0;
+        resizeFrameId = null;
+      });
+    };
+    const handleWindowResize = () => {
+      resize();
+    };
+    const stopAutoResize = () => {
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      resizeObserver = null;
+      window.removeEventListener("resize", handleWindowResize);
+    };
+    const startAutoResize = () => {
+      stopAutoResize();
+      if (!props.autoResize || !containerRef.value) {
+        return;
+      }
+      resizeObserver = new ResizeObserver(() => {
+        resize();
+      });
+      resizeObserver.observe(containerRef.value);
+      window.addEventListener("resize", handleWindowResize);
+    };
+    const clear = () => {
+      var _a;
+      (_a = chartInstance.value) == null ? void 0 : _a.clear();
+    };
+    const disposeChart = () => {
+      var _a;
+      (_a = chartInstance.value) == null ? void 0 : _a.dispose();
+      chartInstance.value = null;
+    };
+    const dispose = () => {
+      disposeChart();
+    };
+    const dispatchAction = (payload) => {
+      var _a;
+      (_a = chartInstance.value) == null ? void 0 : _a.dispatchAction(payload);
+    };
+    const on = (eventName, handler, context) => {
+      const chart = ensureChart();
+      chart == null ? void 0 : chart.on(eventName, handler, context);
+    };
+    const off = (eventName, handler) => {
+      if (!chartInstance.value) {
+        return;
+      }
+      if (!eventName) {
+        chartInstance.value.off();
+        return;
+      }
+      if (handler) {
+        chartInstance.value.off(eventName, handler);
+        return;
+      }
+      chartInstance.value.off(eventName);
+    };
+    const reinitChart = async () => {
+      disposeChart();
+      await nextTick();
+      createChart();
+      setOption(props.option);
+      syncLoading();
+      resize();
+    };
+    watch(
+      () => props.option,
+      (option) => {
+        setOption(option);
+      },
+      { deep: true }
+    );
+    watch(
+      () => props.loading,
+      () => {
+        syncLoading();
+      }
+    );
+    watch(
+      () => props.loadingOptions,
+      () => {
+        if (props.loading) {
+          syncLoading();
+        }
+      },
+      { deep: true }
+    );
+    watch(
+      () => props.group,
+      (group) => {
+        if (!chartInstance.value) {
+          return;
+        }
+        chartInstance.value.group = group != null ? group : "";
+      }
+    );
+    watch(
+      () => props.autoResize,
+      async (enabled) => {
+        stopAutoResize();
+        if (enabled) {
+          await nextTick();
+          startAutoResize();
+          resize();
+        }
+      }
+    );
+    watch(
+      () => props.theme,
+      () => {
+        reinitChart();
+      },
+      { deep: true }
+    );
+    watch(
+      () => props.initOptions,
+      () => {
+        reinitChart();
+      },
+      { deep: true }
+    );
+    onMounted(async () => {
+      await nextTick();
+      createChart();
+      setOption(props.option);
+      syncLoading();
+      startAutoResize();
+      resize();
+    });
+    onUnmounted(() => {
+      stopAutoResize();
+      cancelResizeFrame();
+      disposeChart();
+    });
+    __expose({
+      getInstance,
+      setOption,
+      resize,
+      dispatchAction,
+      showLoading,
+      hideLoading,
+      clear,
+      dispose,
+      on,
+      off
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: "base-echart"
+      }, [
+        createElementVNode("div", {
+          ref_key: "chartRef",
+          ref: chartRef,
+          class: "base-echart__inner"
+        }, null, 512)
+      ], 512);
+    };
+  }
+});
+var BaseEChart = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-51bc4772"]]);
 const DEFAULT_SHEET_NAME = "Sheet1";
 const DEFAULT_COLUMN_WIDTH = 16;
+const EXCEL_MIME_TYPE = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
 function getLeafCount(column) {
   var _a;
   if (!((_a = column.children) == null ? void 0 : _a.length)) {
@@ -89,13 +1202,23 @@ function buildColumnWidths(leafColumns, dataRows, defaultColumnWidth, autoWidth)
       return Math.max(maxWidth, getDisplayLength(row[columnIndex]));
     }, 0);
     const targetWidth = (_a = column.width) != null ? _a : autoWidth ? Math.max(defaultColumnWidth, headerWidth, dataWidth) : defaultColumnWidth;
-    return { wch: targetWidth };
+    return targetWidth;
   });
 }
 function normalizeFileName(fileName) {
   return fileName.endsWith(".xlsx") ? fileName : `${fileName}.xlsx`;
 }
-function exportExcel(options) {
+function applyColumnWidths(worksheet, columnWidths) {
+  columnWidths.forEach((width, index) => {
+    worksheet.getColumn(index + 1).width = width;
+  });
+}
+function applyMerges(worksheet, merges) {
+  merges.forEach((range) => {
+    worksheet.mergeCells(range.s.r + 1, range.s.c + 1, range.e.r + 1, range.e.c + 1);
+  });
+}
+async function exportExcel(options) {
   const {
     fileName,
     sheetName = DEFAULT_SHEET_NAME,
@@ -109,12 +1232,17 @@ function exportExcel(options) {
   }
   const { headerRows, leafColumns, merges } = buildHeaderMatrix(columns);
   const dataRows = data.map((row, rowIndex) => leafColumns.map((column) => getCellValue(row, rowIndex, column)));
-  const worksheet = XLSX.utils.aoa_to_sheet([...headerRows, ...dataRows]);
-  worksheet["!merges"] = merges;
-  worksheet["!cols"] = buildColumnWidths(leafColumns, dataRows, defaultColumnWidth, autoWidth);
-  const workbook = XLSX.utils.book_new();
-  XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
-  XLSX.writeFile(workbook, normalizeFileName(fileName));
+  const columnWidths = buildColumnWidths(leafColumns, dataRows, defaultColumnWidth, autoWidth);
+  const workbook = new ExcelJS.Workbook();
+  const worksheet = workbook.addWorksheet(sheetName);
+  [...headerRows, ...dataRows].forEach((row) => {
+    worksheet.addRow(row);
+  });
+  applyMerges(worksheet, merges);
+  applyColumnWidths(worksheet, columnWidths);
+  const buffer = await workbook.xlsx.writeBuffer();
+  const blob = new Blob([buffer], { type: EXCEL_MIME_TYPE });
+  saveAs(blob, normalizeFileName(fileName));
 }
 const DEFAULT_EXPORT_FILE_NAME = "export-file";
 function getHeaderValue(headers, headerName) {
@@ -251,7 +1379,7 @@ const _sfc_main = defineComponent({
       emit("start");
       try {
         if (exportMode.value === "excel" && props.excelOptions) {
-          exportExcel(props.excelOptions);
+          await exportExcel(props.excelOptions);
           if (props.autoMessage) {
             ElMessage.success(props.successMessage);
           }
@@ -305,4 +1433,4 @@ const _sfc_main = defineComponent({
     };
   }
 });
-export { _sfc_main as BaseExportButton, downloadExportResponse, exportExcel, extractFileNameFromDisposition, normalizeExportFileName };
+export { BaseCard, BaseEChart, _sfc_main as BaseExportButton, BaseTable, downloadExportResponse, exportExcel, extractFileNameFromDisposition, normalizeExportFileName };