@hbdlzy/ui-core 0.1.0 → 0.1.2

package/dist/style.css

@@ -0,0 +1 @@
+.base-card[data-v-6bfddf1c]{display:flex;flex-direction:column;min-width:0;min-height:0;padding:var(--base-card-padding);border:1px solid var(--base-card-border-color);background:var(--base-card-background-color);box-shadow:0 0 2px 0 var(--base-card-shadow-color);border-radius:var(--base-card-radius)}.base-card__header[data-v-6bfddf1c]{display:flex;align-items:center;justify-content:space-between;gap:var(--base-card-header-gap);margin-bottom:var(--base-card-header-margin-bottom);min-height:24px;flex-wrap:wrap}.base-card__header-left[data-v-6bfddf1c],.base-card__header-right[data-v-6bfddf1c]{display:flex;align-items:center;min-width:0;flex-wrap:wrap}.base-card__header-left[data-v-6bfddf1c]{flex:1 1 auto;gap:var(--base-card-left-gap)}.base-card__header-right[data-v-6bfddf1c]{flex:0 1 auto;justify-content:flex-end;gap:var(--base-card-right-gap)}.base-card__title-wrap[data-v-6bfddf1c]{display:flex;align-items:center;min-width:0}.base-card__title-marker[data-v-6bfddf1c]{width:var(--base-card-marker-width);height:var(--base-card-marker-height);background:var(--base-card-marker-color);border-radius:var(--base-card-marker-radius);margin-right:var(--base-card-marker-gap);flex:0 0 auto}.base-card__title[data-v-6bfddf1c]{margin:0;min-width:0;color:var(--base-card-title-color);font-size:var(--base-card-title-size);font-weight:var(--base-card-title-weight);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.base-card__meta[data-v-6bfddf1c]{color:var(--base-card-meta-color);font-size:var(--base-card-meta-size);line-height:1.4}.base-card__export[data-v-6bfddf1c]{border:none;background:transparent;padding:0;color:var(--base-card-export-color);cursor:pointer;font-size:var(--base-card-meta-size);line-height:1.4}.base-card__export[data-v-6bfddf1c]:disabled{opacity:.5;cursor:not-allowed}.base-card__body[data-v-6bfddf1c]{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.base-card__tip[data-v-6bfddf1c]{flex:0 0 auto}.base-card__content[data-v-6bfddf1c]{flex:1 1 auto;min-height:0}.base-table[data-v-429ba785]{display:flex;flex-direction:column;height:100%;min-height:0}.base-table__toolbar[data-v-429ba785]{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;min-height:32px;flex-wrap:wrap}.base-table__toolbar-left[data-v-429ba785]{flex:1 1 auto;min-width:0}.base-table__toolbar-right[data-v-429ba785]{flex:0 1 auto}.base-table__actions[data-v-429ba785]{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.base-table__link[data-v-429ba785]{padding:0;border:none;background:transparent;color:var(--el-color-primary);cursor:pointer}.base-table__text[data-v-429ba785]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.base-table__tags[data-v-429ba785]{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.base-table__image[data-v-429ba785]{border-radius:4px;overflow:hidden}.base-echart[data-v-51bc4772],.base-echart__inner[data-v-51bc4772]{width:100%;height:100%}.outlined-input[data-v-2bf89ccd]{position:relative}.outlined-input__label[data-v-2bf89ccd]{position:absolute;left:-2px;padding:2px 5px;border-radius:2px;background-color:#fff;font-size:12px;line-height:1;transition:color .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1);pointer-events:none}.outlined-input__label--floating[data-v-2bf89ccd]{top:18px;z-index:1;opacity:1;transform:translate(14px,-6px) scale(1);color:var(--el-color-primary)}.outlined-input__label--placeholder[data-v-2bf89ccd]{top:50%;left:1px;z-index:-1;opacity:0;transform:translate(14px,6px) scale(1)}.outlined-input__label--filled[data-v-2bf89ccd]{color:var(--el-text-color-regular)}.outlined-input__suffix-text[data-v-2bf89ccd]{white-space:nowrap}[data-v-2bf89ccd] .outlined-input--bordered .el-input__wrapper{box-shadow:none;border-radius:0;border-bottom:1px solid #cccccc}[data-v-2bf89ccd] .outlined-input--bordered .el-input__wrapper.is-focus{border-bottom-color:var(--el-color-primary)}[data-v-2bf89ccd] .outlined-input--bordered .el-textarea__inner{border-width:0 0 1px;border-radius:0;box-shadow:none}[data-v-2bf89ccd] .outlined-input--bordered .el-textarea__inner:focus{border-bottom-color:var(--el-color-primary)}[data-v-2bf89ccd] .outlined-input--textarea-default .el-textarea__inner{min-height:100px!important;max-height:180px}.outlined-select[data-v-7bd2b5f2]{position:relative}.outlined-select__label[data-v-7bd2b5f2]{position:absolute;left:-2px;padding:2px 5px;border-radius:2px;background-color:#fff;font-size:12px;line-height:1;transition:color .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1);pointer-events:none}.outlined-select__label--floating[data-v-7bd2b5f2]{top:18px;z-index:1;opacity:1;transform:translate(14px,-6px) scale(1);color:var(--el-color-primary)}.outlined-select__label--placeholder[data-v-7bd2b5f2]{top:50%;left:1px;z-index:-1;opacity:0;transform:translate(14px,6px) scale(1)}.outlined-select__label--filled[data-v-7bd2b5f2]{color:var(--el-text-color-regular)}[data-v-7bd2b5f2] .outlined-select__control.el-select{width:100%}[data-v-7bd2b5f2] .outlined-select__control .el-select__wrapper{min-height:inherit;height:inherit}[data-v-7bd2b5f2] .outlined-select__control .el-select__tags{padding-top:4px}[data-v-7bd2b5f2] .outlined-select__control .el-select__selection{min-height:inherit}[data-v-7bd2b5f2] .outlined-select--bordered .el-select__wrapper{box-shadow:none;border-radius:0;border-bottom:1px solid #cccccc}[data-v-7bd2b5f2] .outlined-select--bordered .el-select__wrapper.is-focused{border-bottom-color:var(--el-color-primary)}.outlined-date-picker[data-v-c95a293c]{position:relative}.outlined-date-picker__label[data-v-c95a293c]{position:absolute;left:-2px;padding:2px 5px;border-radius:2px;background-color:#fff;font-size:12px;line-height:1;transition:color .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1);pointer-events:none}.outlined-date-picker__label--floating[data-v-c95a293c]{top:18px;z-index:1;opacity:1;transform:translate(14px,-6px) scale(1);color:var(--el-color-primary)}.outlined-date-picker__label--placeholder[data-v-c95a293c]{top:50%;left:1px;z-index:-1;opacity:0;transform:translate(14px,6px) scale(1)}.outlined-date-picker__label--filled[data-v-c95a293c]{color:var(--el-text-color-regular)}[data-v-c95a293c] .outlined-date-picker__control.el-date-editor{width:100%}[data-v-c95a293c] .outlined-date-picker__control .el-input__wrapper{position:relative;min-height:inherit;height:inherit}[data-v-c95a293c] .outlined-date-picker__control .el-input__prefix{position:absolute;right:0}[data-v-c95a293c] .outlined-date-picker__control .el-input__suffix{position:absolute;right:30px}[data-v-c95a293c] .outlined-date-picker--bordered .el-input__wrapper{box-shadow:none;border-radius:0;border-bottom:1px solid #cccccc}[data-v-c95a293c] .outlined-date-picker--bordered .el-input__wrapper.is-focus{border-bottom-color:var(--el-color-primary)}.outlined-date-time-picker[data-v-f2fefd22]{display:flex;align-items:center;gap:8px}.outlined-date-time-picker__field[data-v-f2fefd22]{position:relative;flex:1}.outlined-date-time-picker__separator[data-v-f2fefd22]{flex:0 0 auto;color:var(--el-text-color-regular)}.outlined-date-time-picker__label[data-v-f2fefd22]{position:absolute;left:-2px;padding:2px 5px;border-radius:2px;background-color:#fff;font-size:12px;line-height:1;transition:color .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1);pointer-events:none}.outlined-date-time-picker__label--floating[data-v-f2fefd22]{top:18px;z-index:1;opacity:1;transform:translate(14px,-6px) scale(1);color:var(--el-color-primary)}.outlined-date-time-picker__label--placeholder[data-v-f2fefd22]{top:50%;left:1px;z-index:-1;opacity:0;transform:translate(14px,6px) scale(1)}.outlined-date-time-picker__label--filled[data-v-f2fefd22]{color:var(--el-text-color-regular)}[data-v-f2fefd22] .outlined-date-time-picker__control.el-date-editor{width:100%}[data-v-f2fefd22] .outlined-date-time-picker__control .el-input__wrapper{position:relative;min-height:inherit;height:inherit}[data-v-f2fefd22] .outlined-date-time-picker__control .el-input__prefix{position:absolute;right:0}[data-v-f2fefd22] .outlined-date-time-picker__control .el-input__suffix{position:absolute;right:30px}[data-v-f2fefd22] .outlined-date-time-picker__field--bordered .el-input__wrapper{box-shadow:none;border-radius:0;border-bottom:1px solid #cccccc}[data-v-f2fefd22] .outlined-date-time-picker__field--bordered .el-input__wrapper.is-focus{border-bottom-color:var(--el-color-primary)}.outlined-time-picker[data-v-6a467b88]{position:relative}.outlined-time-picker__label[data-v-6a467b88]{position:absolute;left:-2px;padding:2px 5px;border-radius:2px;background-color:#fff;font-size:12px;line-height:1;transition:color .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1);pointer-events:none}.outlined-time-picker__label--floating[data-v-6a467b88]{top:18px;z-index:1;opacity:1;transform:translate(14px,-6px) scale(1);color:var(--el-color-primary)}.outlined-time-picker__label--placeholder[data-v-6a467b88]{top:50%;left:1px;z-index:-1;opacity:0;transform:translate(14px,6px) scale(1)}.outlined-time-picker__label--filled[data-v-6a467b88]{color:var(--el-text-color-regular)}[data-v-6a467b88] .outlined-time-picker__control.el-date-editor{width:100%}[data-v-6a467b88] .outlined-time-picker__control .el-input__wrapper{position:relative;min-height:inherit;height:inherit}[data-v-6a467b88] .outlined-time-picker__control .el-input__prefix{position:absolute;right:0}[data-v-6a467b88] .outlined-time-picker__control .el-input__suffix{position:absolute;right:30px}[data-v-6a467b88] .outlined-time-picker--bordered .el-input__wrapper{box-shadow:none;border-radius:0;border-bottom:1px solid #cccccc}[data-v-6a467b88] .outlined-time-picker--bordered .el-input__wrapper.is-focus{border-bottom-color:var(--el-color-primary)}.outlined-cascader[data-v-2c93c0e4]{position:relative}.outlined-cascader__label[data-v-2c93c0e4]{position:absolute;left:-2px;padding:2px 5px;border-radius:2px;background-color:#fff;font-size:12px;line-height:1;transition:color .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1);pointer-events:none}.outlined-cascader__label--floating[data-v-2c93c0e4]{top:18px;z-index:1;opacity:1;transform:translate(14px,-6px) scale(1);color:var(--el-color-primary)}.outlined-cascader__label--placeholder[data-v-2c93c0e4]{top:50%;left:1px;z-index:-1;opacity:0;transform:translate(14px,6px) scale(1)}.outlined-cascader__label--filled[data-v-2c93c0e4]{color:var(--el-text-color-regular)}[data-v-2c93c0e4] .outlined-cascader__control .el-input{height:100%}[data-v-2c93c0e4] .outlined-cascader--bordered .el-input__wrapper{box-shadow:none;border-radius:0;border-bottom:1px solid #cccccc}[data-v-2c93c0e4] .outlined-cascader--bordered .el-input__wrapper.is-focus{border-bottom-color:var(--el-color-primary)}.outlined-tree-select[data-v-8403e6ea]{position:relative}.outlined-tree-select__label[data-v-8403e6ea]{position:absolute;left:-2px;padding:2px 5px;border-radius:2px;background-color:#fff;font-size:12px;line-height:1;transition:color .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1);pointer-events:none}.outlined-tree-select__label--floating[data-v-8403e6ea]{top:18px;z-index:1;opacity:1;transform:translate(14px,-6px) scale(1);color:var(--el-color-primary)}.outlined-tree-select__label--placeholder[data-v-8403e6ea]{top:50%;left:1px;z-index:-1;opacity:0;transform:translate(14px,6px) scale(1)}.outlined-tree-select__label--filled[data-v-8403e6ea]{color:var(--el-text-color-regular)}[data-v-8403e6ea] .outlined-tree-select__control.el-select{width:100%}[data-v-8403e6ea] .outlined-tree-select__control .el-select__wrapper{min-height:inherit;height:inherit}[data-v-8403e6ea] .outlined-tree-select__control .el-select__selection{min-height:inherit}[data-v-8403e6ea] .outlined-tree-select__control .el-select__tags{padding-top:4px}[data-v-8403e6ea] .outlined-tree-select--bordered .el-select__wrapper{box-shadow:none;border-radius:0;border-bottom:1px solid #cccccc}[data-v-8403e6ea] .outlined-tree-select--bordered .el-select__wrapper.is-focused{border-bottom-color:var(--el-color-primary)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hbdlzy/ui-core",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Company shared Vue UI core package.",
   "license": "MIT",
   "repository": {
@@ -30,8 +30,10 @@
     "vue": "^3.5.14"
   },
   "dependencies": {
-    "file-saver": "2.0.5",
-    "xlsx": "^0.18.5"
+    "dayjs": "^1.11.13",
+    "echarts": "^5.5.1",
+    "exceljs": "^4.4.0",
+    "file-saver": "2.0.5"
   },
   "sideEffects": [
     "**/*.css",

package/src/components/BaseCard/BaseCard.types.ts

@@ -0,0 +1,38 @@
+export type BaseCardCssValue = string | number
+
+export interface BaseCardDefaultExportPayload {
+  title?: string
+  metaText?: string
+}
+
+export interface BaseCardProps {
+  title?: string
+  metaText?: string
+  showHeader?: boolean
+  showRight?: boolean
+  showTitleMarker?: boolean
+  showExport?: boolean
+  exportText?: string
+  exportDisabled?: boolean
+  exportPayload?: unknown
+  padding?: BaseCardCssValue
+  radius?: BaseCardCssValue
+  borderColor?: string
+  backgroundColor?: string
+  shadowColor?: string
+  headerGap?: BaseCardCssValue
+  headerMarginBottom?: BaseCardCssValue
+  leftGap?: BaseCardCssValue
+  rightGap?: BaseCardCssValue
+  titleColor?: string
+  titleSize?: BaseCardCssValue
+  titleWeight?: string | number
+  markerColor?: string
+  markerWidth?: BaseCardCssValue
+  markerHeight?: BaseCardCssValue
+  markerRadius?: BaseCardCssValue
+  markerGap?: BaseCardCssValue
+  metaColor?: string
+  metaSize?: BaseCardCssValue
+  exportColor?: string
+}

package/src/components/BaseCard/BaseCard.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="base-card" :style="cardStyles">
+    <div v-if="shouldRenderHeader" class="base-card__header">
+      <div class="base-card__header-left">
+        <div v-if="hasTitleBlock" class="base-card__title-wrap">
+          <span v-if="showTitleMarker" class="base-card__title-marker"></span>
+          <slot v-if="$slots['title-label']" name="title-label"></slot>
+          <h4 v-else class="base-card__title">{{ title }}</h4>
+        </div>
+        <slot name="title"></slot>
+      </div>
+
+      <div v-if="hasRightSection" class="base-card__header-right">
+        <slot name="header-right"></slot>
+        <span v-if="metaText" class="base-card__meta">{{ metaText }}</span>
+        <button
+          v-if="showExport"
+          class="base-card__export"
+          type="button"
+          :disabled="exportDisabled"
+          @click="handleExport"
+        >
+          {{ exportText }}
+        </button>
+      </div>
+    </div>
+
+    <div class="base-card__body">
+      <div v-if="$slots.tip" class="base-card__tip">
+        <slot name="tip"></slot>
+      </div>
+      <div class="base-card__content">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import type { BaseCardCssValue, BaseCardDefaultExportPayload, BaseCardProps } from './BaseCard.types'
+
+defineOptions({
+  name: 'BaseCard'
+})
+
+const props = withDefaults(defineProps<BaseCardProps>(), {
+  title: '',
+  metaText: '',
+  showHeader: true,
+  showRight: true,
+  showTitleMarker: true,
+  showExport: false,
+  exportText: '导出',
+  exportDisabled: false,
+  padding: 20,
+  radius: 8,
+  borderColor: 'var(--border-color)',
+  backgroundColor: 'var(--border-bg-color)',
+  shadowColor: 'var(--border-projection)',
+  headerGap: 16,
+  headerMarginBottom: 20,
+  leftGap: 16,
+  rightGap: 16,
+  titleColor: 'var(--el-text-color-primary)',
+  titleSize: 18,
+  titleWeight: 500,
+  markerColor: 'var(--el-color-primary)',
+  markerWidth: 4,
+  markerHeight: 24,
+  markerRadius: '0 4px 4px 0',
+  markerGap: 10,
+  metaColor: '#808080',
+  metaSize: 16,
+  exportColor: 'var(--el-color-primary)'
+})
+
+const emit = defineEmits<{
+  (event: 'export', payload?: unknown): void
+}>()
+
+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<BaseCardDefaultExportPayload>(() => ({
+  title: props.title || undefined,
+  metaText: props.metaText || undefined
+}))
+
+const cardStyles = computed<Record<string, string | undefined>>(() => ({
+  '--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 === undefined ? defaultExportPayload.value : props.exportPayload)
+}
+
+function toCssValue(value?: BaseCardCssValue, unit = 'px') {
+  if (value === undefined || value === null || value === '') {
+    return undefined
+  }
+
+  return typeof value === 'number' ? `${value}${unit}` : value
+}
+
+function toTextValue(value?: string | number) {
+  if (value === undefined || value === null || value === '') {
+    return undefined
+  }
+
+  return String(value)
+}
+</script>
+
+<style scoped>
+.base-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  padding: var(--base-card-padding);
+  border: 1px solid var(--base-card-border-color);
+  background: var(--base-card-background-color);
+  box-shadow: 0 0 2px 0 var(--base-card-shadow-color);
+  border-radius: var(--base-card-radius);
+}
+
+.base-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--base-card-header-gap);
+  margin-bottom: var(--base-card-header-margin-bottom);
+  min-height: 24px;
+  flex-wrap: wrap;
+}
+
+.base-card__header-left,
+.base-card__header-right {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.base-card__header-left {
+  flex: 1 1 auto;
+  gap: var(--base-card-left-gap);
+}
+
+.base-card__header-right {
+  flex: 0 1 auto;
+  justify-content: flex-end;
+  gap: var(--base-card-right-gap);
+}
+
+.base-card__title-wrap {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.base-card__title-marker {
+  width: var(--base-card-marker-width);
+  height: var(--base-card-marker-height);
+  background: var(--base-card-marker-color);
+  border-radius: var(--base-card-marker-radius);
+  margin-right: var(--base-card-marker-gap);
+  flex: 0 0 auto;
+}
+
+.base-card__title {
+  margin: 0;
+  min-width: 0;
+  color: var(--base-card-title-color);
+  font-size: var(--base-card-title-size);
+  font-weight: var(--base-card-title-weight);
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.base-card__meta {
+  color: var(--base-card-meta-color);
+  font-size: var(--base-card-meta-size);
+  line-height: 1.4;
+}
+
+.base-card__export {
+  border: none;
+  background: transparent;
+  padding: 0;
+  color: var(--base-card-export-color);
+  cursor: pointer;
+  font-size: var(--base-card-meta-size);
+  line-height: 1.4;
+}
+
+.base-card__export:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.base-card__body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.base-card__tip {
+  flex: 0 0 auto;
+}
+
+.base-card__content {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+</style>

package/src/components/BaseCard/README.md

@@ -0,0 +1,164 @@
+# BaseCard
+
+`BaseCard` 用来统一封装项目里反复出现的卡片容器、标题区、右侧信息区和导出触发区，避免页面层重复写相同的布局和样式代码。
+
+## 解决的问题
+
+- 页面只传标题和内容就能得到统一卡片样式
+- 内聚边框、背景、圆角、阴影，不再依赖业务项目里的全局 `.border-card`
+- 标题左侧竖杠、标题颜色、右侧信息、导出按钮都可以直接配置
+- 左右两侧都支持插槽扩展，复杂场景不用回退到重复写结构
+
+## 适用场景
+
+- 看板类页面里的统计卡片、图表卡片、列表卡片
+- 需要统一标题区布局和风格的容器组件
+- 标题右侧要放时间、按钮、筛选器、单选框的场景
+- 希望把“卡片壳子”从业务组件里抽出来统一复用
+
+## 不适用场景
+
+- 页面需要完全脱离统一卡片风格
+- 整个容器结构与标题区布局都要做高度定制
+- 只是简单边框盒子，不需要标题区、插槽区和统一视觉规范
+
+## 基础用法
+
+```vue
+<template>
+  <BaseCard title="今日收益趋势">
+    <div style="height: 320px">这里放图表或其他内容</div>
+  </BaseCard>
+</template>
+
+<script setup lang="ts">
+import { BaseCard } from '@hbdlzy/ui-core'
+</script>
+```
+
+## 带右侧信息和导出按钮
+
+```vue
+<template>
+  <BaseCard
+    title="收益数据"
+    meta-text="2026-04-21 10:30"
+    show-export
+    :export-payload="{ url: '/report/export' }"
+    @export="handleExport"
+  >
+    <div>内容区域</div>
+  </BaseCard>
+</template>
+
+<script setup lang="ts">
+import { BaseCard } from '@hbdlzy/ui-core'
+
+const handleExport = (payload?: unknown) => {
+  console.log('export payload', payload)
+}
+</script>
+```
+
+## 标题区扩展
+
+`title` 插槽会出现在左侧标题后面，适合放筛选器、单选框、标签等内容。`header-right` 插槽会出现在右侧信息区里，适合放按钮或自定义操作。
+
+```vue
+<template>
+  <BaseCard title="市场信息" meta-text="实时更新">
+    <template #title>
+      <el-radio-group v-model="tabValue">
+        <el-radio-button label="日内" />
+        <el-radio-button label="周内" />
+      </el-radio-group>
+    </template>
+
+    <template #header-right>
+      <el-button text>刷新</el-button>
+    </template>
+
+    <template #tip>
+      <div style="text-align: right; color: #808080">单位：万元</div>
+    </template>
+
+    <div>内容区域</div>
+  </BaseCard>
+</template>
+```
+
+## 配置样式
+
+```vue
+<BaseCard
+  title="自定义样式"
+  marker-color="#23c343"
+  marker-height="20px"
+  title-color="#ffffff"
+  border-color="rgba(35, 195, 67, 0.35)"
+  background-color="rgba(5, 18, 35, 0.9)"
+  :padding="24"
+>
+  <div>内容区域</div>
+</BaseCard>
+```
+
+## Props
+
+- `title`: 标题文本
+- `metaText`: 右侧信息文本，常用于时间、更新时间、单位等
+- `showHeader`: 是否显示标题区
+- `showRight`: 是否显示右侧容器
+- `showTitleMarker`: 是否显示标题左侧竖杠
+- `showExport`: 是否显示内置导出按钮
+- `exportText`: 导出按钮文案，默认 `导出`
+- `exportDisabled`: 是否禁用导出按钮
+- `exportPayload`: 点击导出时回传的自定义载荷
+- `padding`: 卡片内边距
+- `radius`: 卡片圆角
+- `borderColor`: 卡片边框颜色
+- `backgroundColor`: 卡片背景色
+- `shadowColor`: 卡片阴影颜色
+- `headerGap`: 标题区左右块之间的间距
+- `headerMarginBottom`: 标题区和内容区之间的间距
+- `leftGap`: 左侧标题块和扩展插槽之间的间距
+- `rightGap`: 右侧内容之间的间距
+- `titleColor`: 标题颜色
+- `titleSize`: 标题字号
+- `titleWeight`: 标题字重
+- `markerColor`: 标题左侧竖杠颜色
+- `markerWidth`: 标题左侧竖杠宽度
+- `markerHeight`: 标题左侧竖杠高度
+- `markerRadius`: 标题左侧竖杠圆角
+- `markerGap`: 标题左侧竖杠和标题的间距
+- `metaColor`: 右侧信息文字颜色
+- `metaSize`: 右侧信息文字字号
+- `exportColor`: 导出按钮颜色
+
+## Slots
+
+- 默认插槽：卡片主体内容
+- `title`: 左侧标题后的扩展区域
+- `title-label`: 自定义标题内容，会替代默认标题文本
+- `header-right`: 右侧操作区扩展
+- `tip`: 内容区顶部提示信息
+
+## Events
+
+- `export`: 点击内置导出按钮时触发
+
+如果未传 `exportPayload`，默认会返回：
+
+```ts
+{
+  title?: string
+  metaText?: string
+}
+```
+
+## 推荐约定
+
+- 页面层优先把统计块、图表块、列表块统一包在 `BaseCard` 里
+- 只要不是强业务容器，就尽量不要在页面层重复写卡片壳子
+- 简单场景直接用 `title + 默认插槽`
+- 需要扩展时优先使用 `title` 和 `header-right` 插槽，而不是复制组件结构

package/src/components/BaseCard/index.ts

@@ -0,0 +1,5 @@
+import BaseCard from './BaseCard.vue'
+
+export default BaseCard
+
+export type { BaseCardCssValue, BaseCardDefaultExportPayload, BaseCardProps } from './BaseCard.types'

package/src/components/BaseEChart/BaseEChart.types.ts

@@ -0,0 +1,35 @@
+import type {
+  EChartInitOptions,
+  EChartInstance,
+  EChartLoadingOptions,
+  EChartOption,
+  EChartResizeOptions,
+  EChartSetOptionOptions
+} from '../../echarts'
+
+export interface BaseEChartProps {
+  option?: EChartOption
+  theme?: string | Record<string, unknown>
+  initOptions?: EChartInitOptions
+  setOptionOptions?: boolean | EChartSetOptionOptions
+  loading?: boolean
+  loadingOptions?: EChartLoadingOptions
+  autoResize?: boolean
+  useDefaultColors?: boolean
+  colorStorageKey?: string
+  defaultColors?: string[]
+  group?: string
+}
+
+export interface BaseEChartExpose {
+  getInstance: () => EChartInstance | null
+  setOption: (option: EChartOption, setOptionOptions?: boolean | EChartSetOptionOptions) => EChartInstance | null
+  resize: (resizeOptions?: EChartResizeOptions) => void
+  dispatchAction: (payload: Record<string, unknown>) => void
+  showLoading: (type?: string, loadingOptions?: EChartLoadingOptions) => void
+  hideLoading: () => void
+  clear: () => void
+  dispose: () => void
+  on: (eventName: string, handler: (...args: any[]) => void, context?: unknown) => void
+  off: (eventName?: string, handler?: (...args: any[]) => void) => void
+}