@aspire-ui/element-component-pro 1.0.16 → 1.0.17

package/dist/style.css

@@ -1 +1 @@
-.ecp-pro-table[data-v-f3d27813]{padding:16px;background:#fff;width:100%;box-sizing:border-box}.ecp-pro-table[data-v-f3d27813] .el-table{width:100%!important}.ecp-pro-table__header[data-v-f3d27813]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ecp-pro-table__title-wrapper[data-v-f3d27813]{display:flex;align-items:center;gap:4px}.ecp-pro-table__title[data-v-f3d27813]{font-size:16px;font-weight:600}.ecp-pro-table__help[data-v-f3d27813]{color:#909399;cursor:help}.ecp-pro-table__toolbar[data-v-f3d27813]{display:flex;align-items:center;gap:8px}.ecp-pro-table__body[data-v-f3d27813]{width:100%}.ecp-pro-table__pagination[data-v-f3d27813]{margin-top:16px;display:flex;justify-content:flex-end}.ecp-pro-table__col-help[data-v-f3d27813]{margin-left:4px;color:#909399;cursor:help}.ecp-table-action[data-v-45a58e7c],.ecp-table-action__item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-45a58e7c]{margin-right:4px}.ecp-table-action__more[data-v-45a58e7c]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-tree-select[data-v-f30bba11]{position:relative;width:100%}.ecp-tree-select__filter-inner[data-v-f30bba11]{margin-bottom:8px}.ecp-tree-select__dropdown[data-v-f30bba11]{position:absolute;top:100%;left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid #dcdfe6;border-radius:4px;margin-top:4px;z-index:1000;padding:8px}.ecp-tree-select__loading[data-v-f30bba11]{padding:24px;text-align:center;color:#909399;font-size:14px}.ecp-pro-form-item__colon[data-v-48d7960b]{margin-right:2px}.ecp-pro-form-item__help-icon[data-v-48d7960b]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-48d7960b]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-48d7960b]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-48d7960b]:last-child{margin-bottom:0}.ecp-form-actions[data-v-489c88d2]{text-align:right}.ecp-form-actions__advance[data-v-489c88d2]{margin-right:8px}.el-icon-d-arrow-left.up[data-v-489c88d2]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-489c88d2]{transform:rotate(-90deg)}.ecp-pro-form[data-v-80bac8be]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-80bac8be]{margin-bottom:16px}.ecp-pro-form_col[data-v-80bac8be]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-80bac8be]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-80bac8be]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-80bac8be]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}.ecp-pro-descriptions[data-v-656036f6]{width:100%;box-sizing:border-box}.ecp-pro-descriptions__header[data-v-656036f6]{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}.ecp-pro-descriptions__title-wrap[data-v-656036f6]{display:flex;align-items:center;gap:6px}.ecp-pro-descriptions__title[data-v-656036f6]{font-size:16px;font-weight:600;color:#303133}.ecp-pro-descriptions__help[data-v-656036f6],.ecp-pro-descriptions__toggle[data-v-656036f6]{color:#909399}.ecp-pro-descriptions__toggle .el-icon-arrow-down[data-v-656036f6]{margin-left:4px;transition:transform .2s ease}.ecp-pro-descriptions__toggle .el-icon-arrow-down.is-expanded[data-v-656036f6]{transform:rotate(180deg)}.ecp-pro-descriptions__body[data-v-656036f6]{display:grid;border-top:1px solid #ebeef5;border-left:1px solid #ebeef5;overflow:hidden}.ecp-pro-descriptions__body.is-collapsed[data-v-656036f6]{overflow:hidden}.ecp-pro-descriptions__body[data-v-656036f6]:not(.is-bordered){border-top:0;border-left:0;gap:12px 16px}.ecp-pro-descriptions__item[data-v-656036f6]{display:flex;min-width:0;border-right:1px solid #ebeef5;border-bottom:1px solid #ebeef5}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__item[data-v-656036f6]{border-right:0;border-bottom:0}.ecp-pro-descriptions__label[data-v-656036f6],.ecp-pro-descriptions__content[data-v-656036f6]{min-width:0;box-sizing:border-box;word-break:break-word}.ecp-pro-descriptions__label[data-v-656036f6]{flex:0 0 120px;padding:12px 16px;color:#606266;background:#fafafa}.ecp-pro-descriptions__content[data-v-656036f6]{flex:1;padding:12px 16px;color:#303133;background:#fff}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__label[data-v-656036f6]{flex-basis:auto;padding:0;margin-right:8px;background:transparent;font-weight:500}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__content[data-v-656036f6]{padding:0;background:transparent}.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__label[data-v-656036f6],.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__content[data-v-656036f6]{padding-top:8px;padding-bottom:8px;font-size:13px}@media (max-width: 767px){.ecp-pro-descriptions__item[data-v-656036f6]{flex-direction:column}.ecp-pro-descriptions__label[data-v-656036f6]{flex-basis:auto}}.ecp-pro-table-form__form[data-v-44aa7592] .el-form-item{margin-bottom:0}.ecp-pro-table-form__cell-item[data-v-44aa7592]{width:100%}.ecp-pro-table-form__cell-item[data-v-44aa7592] .el-form-item__content{margin-left:0!important;line-height:normal}.ecp-pro-table-form__fixed-label[data-v-44aa7592]{color:#303133;font-size:14px}.ecp-pro-table-form__req[data-v-44aa7592]{color:#f56c6c;margin-right:2px}.ecp-pro-table-form__th-text[data-v-44aa7592]{font-weight:500;color:#606266}.ecp-pro-table-form__action-title[data-v-44aa7592]{margin-right:8px;font-size:13px;color:#606266}.ecp-pro-table-form__add-btn[data-v-44aa7592]{padding:0;font-size:14px}.ecp-pro-table-form__del-btn[data-v-44aa7592]{padding:0;color:#909399}.ecp-pro-table-form__del-btn[data-v-44aa7592]:not(:disabled){color:#409eff}.ecp-pro-table-form .ecp-pro-table-form__header-cell{background:#f5f7fa!important}
+.ecp-pro-table[data-v-f3d27813]{padding:16px;background:#fff;width:100%;box-sizing:border-box}.ecp-pro-table[data-v-f3d27813] .el-table{width:100%!important}.ecp-pro-table__header[data-v-f3d27813]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ecp-pro-table__title-wrapper[data-v-f3d27813]{display:flex;align-items:center;gap:4px}.ecp-pro-table__title[data-v-f3d27813]{font-size:16px;font-weight:600}.ecp-pro-table__help[data-v-f3d27813]{color:#909399;cursor:help}.ecp-pro-table__toolbar[data-v-f3d27813]{display:flex;align-items:center;gap:8px}.ecp-pro-table__body[data-v-f3d27813]{width:100%}.ecp-pro-table__pagination[data-v-f3d27813]{margin-top:16px;display:flex;justify-content:flex-end}.ecp-pro-table__col-help[data-v-f3d27813]{margin-left:4px;color:#909399;cursor:help}.ecp-table-action[data-v-45a58e7c],.ecp-table-action__item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-45a58e7c]{margin-right:4px}.ecp-table-action__more[data-v-45a58e7c]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-45a58e7c]{display:inline-flex;align-items:center;gap:4px}.ecp-tree-select[data-v-f30bba11]{position:relative;width:100%}.ecp-tree-select__filter-inner[data-v-f30bba11]{margin-bottom:8px}.ecp-tree-select__dropdown[data-v-f30bba11]{position:absolute;top:100%;left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid #dcdfe6;border-radius:4px;margin-top:4px;z-index:1000;padding:8px}.ecp-tree-select__loading[data-v-f30bba11]{padding:24px;text-align:center;color:#909399;font-size:14px}.ecp-pro-form-item__colon[data-v-48d7960b]{margin-right:2px}.ecp-pro-form-item__help-icon[data-v-48d7960b]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-48d7960b]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-48d7960b]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-48d7960b]:last-child{margin-bottom:0}.ecp-form-actions[data-v-489c88d2]{text-align:right}.ecp-form-actions__advance[data-v-489c88d2]{margin-right:8px}.el-icon-d-arrow-left.up[data-v-489c88d2]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-489c88d2]{transform:rotate(-90deg)}.ecp-pro-form[data-v-80bac8be]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-80bac8be]{margin-bottom:16px}.ecp-pro-form_col[data-v-80bac8be]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-80bac8be]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-80bac8be]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-80bac8be]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}.ecp-pro-descriptions[data-v-656036f6]{width:100%;box-sizing:border-box}.ecp-pro-descriptions__header[data-v-656036f6]{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}.ecp-pro-descriptions__title-wrap[data-v-656036f6]{display:flex;align-items:center;gap:6px}.ecp-pro-descriptions__title[data-v-656036f6]{font-size:16px;font-weight:600;color:#303133}.ecp-pro-descriptions__help[data-v-656036f6],.ecp-pro-descriptions__toggle[data-v-656036f6]{color:#909399}.ecp-pro-descriptions__toggle .el-icon-arrow-down[data-v-656036f6]{margin-left:4px;transition:transform .2s ease}.ecp-pro-descriptions__toggle .el-icon-arrow-down.is-expanded[data-v-656036f6]{transform:rotate(180deg)}.ecp-pro-descriptions__body[data-v-656036f6]{display:grid;border-top:1px solid #ebeef5;border-left:1px solid #ebeef5;overflow:hidden}.ecp-pro-descriptions__body.is-collapsed[data-v-656036f6]{overflow:hidden}.ecp-pro-descriptions__body[data-v-656036f6]:not(.is-bordered){border-top:0;border-left:0;gap:12px 16px}.ecp-pro-descriptions__item[data-v-656036f6]{display:flex;min-width:0;border-right:1px solid #ebeef5;border-bottom:1px solid #ebeef5}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__item[data-v-656036f6]{border-right:0;border-bottom:0}.ecp-pro-descriptions__label[data-v-656036f6],.ecp-pro-descriptions__content[data-v-656036f6]{min-width:0;box-sizing:border-box;word-break:break-word}.ecp-pro-descriptions__label[data-v-656036f6]{flex:0 0 120px;padding:12px 16px;color:#606266;background:#fafafa}.ecp-pro-descriptions__content[data-v-656036f6]{flex:1;padding:12px 16px;color:#303133;background:#fff}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__label[data-v-656036f6]{flex-basis:auto;padding:0;margin-right:8px;background:transparent;font-weight:500}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__content[data-v-656036f6]{padding:0;background:transparent}.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__label[data-v-656036f6],.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__content[data-v-656036f6]{padding-top:8px;padding-bottom:8px;font-size:13px}@media (max-width: 767px){.ecp-pro-descriptions__item[data-v-656036f6]{flex-direction:column}.ecp-pro-descriptions__label[data-v-656036f6]{flex-basis:auto}}.ecp-collapse-container[data-v-087dba3a]{background:#fff;border-radius:14px;border:1px solid #e8eef8;box-shadow:0 10px 24px #0f2d5e0f;overflow:hidden}.ecp-collapse-container.is-ghost[data-v-087dba3a]{border-color:transparent;box-shadow:none;background:transparent}.ecp-collapse-container__header[data-v-087dba3a]{min-height:56px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #eef3fb}.ecp-collapse-container.is-ghost .ecp-collapse-container__header[data-v-087dba3a]{padding-left:0;padding-right:0}.ecp-collapse-container__header-main[data-v-087dba3a]{min-width:0;flex:1;display:flex;align-items:center}.ecp-collapse-container__title-wrap[data-v-087dba3a]{min-width:0;display:inline-flex;align-items:center;gap:8px}.ecp-collapse-container__title[data-v-087dba3a]{color:#1f2d3d;font-size:16px;font-weight:600;line-height:1.4}.ecp-collapse-container__help[data-v-087dba3a]{color:#91a3b7;font-size:14px}.ecp-collapse-container__header-extra[data-v-087dba3a]{display:inline-flex;align-items:center;justify-content:flex-end;gap:12px;flex-shrink:0}.ecp-collapse-container__toggle[data-v-087dba3a]{padding:0;color:#2f6fd3}.ecp-collapse-container__toggle i[data-v-087dba3a]{margin-left:6px;transition:transform .2s ease}.ecp-collapse-container__toggle i.is-expanded[data-v-087dba3a]{transform:rotate(180deg)}.ecp-collapse-container__body[data-v-087dba3a]{padding:20px;box-sizing:border-box}.ecp-collapse-container.is-ghost .ecp-collapse-container__body[data-v-087dba3a]{padding-left:0;padding-right:0}.ecp-collapse-container.is-header-clickable .ecp-collapse-container__header-main[data-v-087dba3a]{cursor:pointer}@media (max-width: 768px){.ecp-collapse-container__header[data-v-087dba3a]{padding:14px 16px;align-items:flex-start;flex-direction:column}.ecp-collapse-container__header-extra[data-v-087dba3a]{width:100%;justify-content:space-between}.ecp-collapse-container__body[data-v-087dba3a]{padding:16px}}.ecp-pro-table-form__form[data-v-44aa7592] .el-form-item{margin-bottom:0}.ecp-pro-table-form__cell-item[data-v-44aa7592]{width:100%}.ecp-pro-table-form__cell-item[data-v-44aa7592] .el-form-item__content{margin-left:0!important;line-height:normal}.ecp-pro-table-form__fixed-label[data-v-44aa7592]{color:#303133;font-size:14px}.ecp-pro-table-form__req[data-v-44aa7592]{color:#f56c6c;margin-right:2px}.ecp-pro-table-form__th-text[data-v-44aa7592]{font-weight:500;color:#606266}.ecp-pro-table-form__action-title[data-v-44aa7592]{margin-right:8px;font-size:13px;color:#606266}.ecp-pro-table-form__add-btn[data-v-44aa7592]{padding:0;font-size:14px}.ecp-pro-table-form__del-btn[data-v-44aa7592]{padding:0;color:#909399}.ecp-pro-table-form__del-btn[data-v-44aa7592]:not(:disabled){color:#409eff}.ecp-pro-table-form .ecp-pro-table-form__header-cell{background:#f5f7fa!important}

package/dist/types/index.d.ts

@@ -37,6 +37,31 @@ export interface GetFieldOptions {
     (field: string, raw: false): ProFormFieldOption[];
     (field: string, raw: true): unknown[];
 }
+export interface CollapseContainerProps {
+    title?: string;
+    loading?: boolean;
+    /** 与 Vben Admin 保持一致，沿用 canExpan 命名 */
+    canExpan?: boolean;
+    /** canExpan 的别名，便于业务侧按语义使用 */
+    canExpand?: boolean;
+    helpMessage?: string | string[];
+    triggerWindowResize?: boolean;
+    expanded?: boolean;
+    defaultExpand?: boolean;
+    ghost?: boolean;
+    expandButtonText?: string;
+    collapseButtonText?: string;
+    /** 根容器透传属性，支持 style/class/id/data-* 等 */
+    wrapperProps?: Record<string, unknown>;
+    /** 头部额外 class */
+    headerClass?: string;
+    /** 头部额外样式 */
+    headerStyle?: Record<string, string | number>;
+    /** 内容区额外 class */
+    contentClass?: string;
+    /** 内容区额外样式 */
+    contentStyle?: Record<string, string | number>;
+}
 /** ApiSelect 暴露的实例类型 */
 export interface ApiSelectInstance {
     options: ProFormFieldOption[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aspire-ui/element-component-pro",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Element UI 二次封装组件库，基于 Vue 2.7 + TypeScript + setup 语法糖，实现 VbenAdmin 风格的 Pro 组件",
   "type": "module",
   "main": "./dist/element-component-pro.umd.js",

package/src/CollapseContainer/CollapseContainer.vue

@@ -0,0 +1,284 @@
+<template>
+  <div
+    v-loading="effectiveProps.loading"
+    class="ecp-collapse-container"
+    :class="{
+      'is-expanded': mergedExpanded,
+      'is-ghost': effectiveProps.ghost,
+      'is-header-clickable': canToggleByHeader,
+    }"
+    v-bind="wrapperProps"
+  >
+    <div v-if="showHeader" class="ecp-collapse-container__header" :class="effectiveProps.headerClass" :style="effectiveProps.headerStyle">
+      <div class="ecp-collapse-container__header-main" @click="handleHeaderClick">
+        <div v-if="$slots.title || effectiveProps.title" class="ecp-collapse-container__title-wrap">
+          <slot name="title">
+            <span class="ecp-collapse-container__title">{{ effectiveProps.title }}</span>
+          </slot>
+          <el-tooltip v-if="effectiveProps.helpMessage" placement="top" effect="dark">
+            <template slot="content">
+              <span v-if="Array.isArray(effectiveProps.helpMessage)">
+                <div v-for="(msg, index) in effectiveProps.helpMessage" :key="index">{{ msg }}</div>
+              </span>
+              <span v-else>{{ effectiveProps.helpMessage }}</span>
+            </template>
+            <i class="el-icon-question ecp-collapse-container__help" />
+          </el-tooltip>
+        </div>
+      </div>
+
+      <div v-if="$slots.action || resolvedCanExpan" class="ecp-collapse-container__header-extra" @click.stop>
+        <slot name="action" />
+        <el-button
+          v-if="resolvedCanExpan"
+          type="text"
+          class="ecp-collapse-container__toggle"
+          @click.stop="toggleExpand"
+        >
+          {{ mergedExpanded ? effectiveProps.collapseButtonText : effectiveProps.expandButtonText }}
+          <i class="el-icon-arrow-down" :class="{ 'is-expanded': mergedExpanded }" />
+        </el-button>
+      </div>
+    </div>
+    
+    <el-collapse-transition>
+      <div
+        v-show="mergedExpanded"
+        class="ecp-collapse-container__body"
+        :class="effectiveProps.contentClass"
+        :style="effectiveProps.contentStyle"
+      >
+        <slot />
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, useSlots } from 'vue'
+import { useComponentSetting } from '../useComponentSetting'
+
+interface CollapseContainerProps {
+  title?: string
+  loading?: boolean
+  canExpan?: boolean
+  canExpand?: boolean
+  helpMessage?: string | string[]
+  triggerWindowResize?: boolean
+  expanded?: boolean
+  defaultExpand?: boolean
+  ghost?: boolean
+  expandButtonText?: string
+  collapseButtonText?: string
+  wrapperProps?: Record<string, unknown>
+  headerClass?: string
+  headerStyle?: Record<string, string | number>
+  contentClass?: string
+  contentStyle?: Record<string, string | number>
+}
+
+const props = withDefaults(defineProps<CollapseContainerProps>(), {
+  loading: false,
+  canExpan: true,
+  canExpand: undefined,
+  triggerWindowResize: true,
+  expanded: undefined,
+  defaultExpand: true,
+  ghost: false,
+  expandButtonText: '展开',
+  collapseButtonText: '收起',
+  wrapperProps: () => ({}),
+  headerClass: '',
+  headerStyle: () => ({}),
+  contentClass: '',
+  contentStyle: () => ({}),
+})
+
+const emit = defineEmits<{
+  (e: 'update:expanded', value: boolean): void
+  (e: 'change', value: boolean): void
+  (e: 'collapse'): void
+  (e: 'expand'): void
+}>()
+
+const slots = useSlots()
+const { mergeSettings } = useComponentSetting()
+
+const innerExpanded = ref(props.expanded ?? props.defaultExpand)
+
+const effectiveProps = computed(() => mergeSettings('CollapseContainer', { ...props }) as CollapseContainerProps)
+const resolvedCanExpan = computed(() => effectiveProps.value.canExpand ?? effectiveProps.value.canExpan ?? true)
+const isControlled = computed(() => effectiveProps.value.expanded !== undefined)
+const mergedExpanded = computed(() => isControlled.value ? !!effectiveProps.value.expanded : innerExpanded.value)
+const showHeader = computed(() => !!slots.title || !!slots.action || !!effectiveProps.value.title || !!effectiveProps.value.helpMessage || resolvedCanExpan.value)
+const canToggleByHeader = computed(() => resolvedCanExpan.value)
+const wrapperProps = computed(() => {
+  const incoming = effectiveProps.value.wrapperProps ?? {}
+  const wrapperClass = incoming.class
+  const wrapperStyle = incoming.style
+  const rest = { ...incoming }
+  delete rest.class
+  delete rest.style
+
+  return {
+    ...rest,
+    class: wrapperClass,
+    style: wrapperStyle,
+  }
+})
+
+const triggerWindowResize = () => {
+  if (!effectiveProps.value.triggerWindowResize || typeof window === 'undefined') return
+  window.setTimeout(() => {
+    window.dispatchEvent(new Event('resize'))
+  }, 220)
+}
+
+const setExpanded = (value: boolean) => {
+  if (!isControlled.value) {
+    innerExpanded.value = value
+  }
+  emit('update:expanded', value)
+  emit('change', value)
+  if (value) emit('expand')
+  else emit('collapse')
+  triggerWindowResize()
+}
+
+const toggleExpand = () => {
+  if (!resolvedCanExpan.value) return
+  setExpanded(!mergedExpanded.value)
+}
+
+const handleHeaderClick = () => {
+  if (!canToggleByHeader.value) return
+  toggleExpand()
+}
+
+watch(() => props.expanded, (value) => {
+  if (value !== undefined) {
+    innerExpanded.value = value
+  }
+})
+
+watch(() => props.defaultExpand, (value) => {
+  if (props.expanded === undefined) {
+    innerExpanded.value = value
+  }
+})
+
+defineExpose({
+  setExpanded,
+  toggleExpand,
+})
+</script>
+
+<style scoped>
+.ecp-collapse-container {
+  background: #fff;
+  border-radius: 14px;
+  border: 1px solid #e8eef8;
+  box-shadow: 0 10px 24px rgba(15, 45, 94, 0.06);
+  overflow: hidden;
+}
+
+.ecp-collapse-container.is-ghost {
+  border-color: transparent;
+  box-shadow: none;
+  background: transparent;
+}
+
+.ecp-collapse-container__header {
+  min-height: 56px;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 1px solid #eef3fb;
+}
+
+.ecp-collapse-container.is-ghost .ecp-collapse-container__header {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.ecp-collapse-container__header-main {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.ecp-collapse-container__title-wrap {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ecp-collapse-container__title {
+  color: #1f2d3d;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.ecp-collapse-container__help {
+  color: #91a3b7;
+  font-size: 14px;
+}
+
+.ecp-collapse-container__header-extra {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.ecp-collapse-container__toggle {
+  padding: 0;
+  color: #2f6fd3;
+}
+
+.ecp-collapse-container__toggle i {
+  margin-left: 6px;
+  transition: transform 0.2s ease;
+}
+
+.ecp-collapse-container__toggle i.is-expanded {
+  transform: rotate(180deg);
+}
+
+.ecp-collapse-container__body {
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.ecp-collapse-container.is-ghost .ecp-collapse-container__body {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.ecp-collapse-container.is-header-clickable .ecp-collapse-container__header-main {
+  cursor: pointer;
+}
+
+@media (max-width: 768px) {
+  .ecp-collapse-container__header {
+    padding: 14px 16px;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .ecp-collapse-container__header-extra {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .ecp-collapse-container__body {
+    padding: 16px;
+  }
+}
+</style>

package/src/CollapseContainer/index.ts

@@ -0,0 +1,4 @@
+import CollapseContainer from './CollapseContainer.vue'
+
+export { CollapseContainer }
+export default CollapseContainer

package/src/ProForm/ApiSelect.vue

@@ -35,12 +35,31 @@ defineEmits<{ (e: 'input', value: unknown): void; (e: 'change', value: unknown):
 const loading = ref(false)
 const options = ref<Array<{ label: string; value: unknown }>>([])
 const rawOptions = ref<unknown[]>([])
-const cachedParams = ref<string>('')
+
+const sortStringify = (obj: unknown): string => {
+  if (obj === null || obj === undefined) return 'null'
+  return JSON.stringify(sortKeys(obj))
+}
+
+const sortKeys = (obj: unknown): unknown => {
+  if (Array.isArray(obj)) return obj.map(sortKeys)
+  if (obj !== null && typeof obj === 'object') {
+    return Object.keys(obj as Record<string, unknown>)
+      .sort()
+      .reduce<Record<string, unknown>>((acc, key) => {
+        acc[key] = sortKeys((obj as Record<string, unknown>)[key])
+        return acc
+      }, {})
+  }
+  return obj
+}
+
+const lastFetchedParamsKey = ref<string>(sortStringify(props.params ?? null))
 
 const onVisibleChange = (visible: boolean) => {
   if (props.lazy && visible) {
-    const paramsKey = JSON.stringify(props.params ?? {})
-    if (paramsKey !== cachedParams.value || options.value.length === 0) {
+    const paramsKey = sortStringify(props.params ?? null)
+    if (paramsKey !== lastFetchedParamsKey.value || options.value.length === 0) {
       fetchOptions()
     }
   }
@@ -66,7 +85,7 @@ const fetchOptions = async () => {
         value: o[valueKey] ?? o.value,
       }
     })
-    cachedParams.value = JSON.stringify(props.params ?? {})
+    lastFetchedParamsKey.value = sortStringify(props.params ?? null)
   } finally {
     loading.value = false
   }
@@ -92,6 +111,8 @@ watch(() => props.api, () => {
 }, { deep: true }
 )
 watch(() => props.params, () => {
+  const newKey = sortStringify(props.params ?? null)
+  if (newKey === lastFetchedParamsKey.value) return
   if (props.lazy) {
     options.value = []
     rawOptions.value = []

package/src/index.ts

@@ -2,6 +2,7 @@ import type { VueConstructor } from 'vue'
 import ProTable, { TableAction } from './ProTable'
 import ProForm, { ProFormItem, FormActions, FormattedNumberInput } from './ProForm'
 import ProDescriptions from './ProDescriptions'
+import CollapseContainer from './CollapseContainer'
 import { ProTableForm } from './ProTableForm'
 import { useForm } from './ProForm/useForm'
 import { useDescription } from './ProDescriptions/useDescription'
@@ -11,6 +12,7 @@ import { useComponentSetting } from './useComponentSetting'
 export { ProForm, ProFormItem, FormActions, FormattedNumberInput, useForm }
 export { ProTable, useProTable, TableAction }
 export { ProDescriptions, useDescription }
+export { CollapseContainer }
 export { ProTableForm }
 export type {
   ProTableFormColumn,
@@ -34,6 +36,7 @@ const components = [
   { name: 'FormActions', component: FormActions },
   { name: 'FormattedNumberInput', component: FormattedNumberInput },
   { name: 'ProDescriptions', component: ProDescriptions },
+  { name: 'CollapseContainer', component: CollapseContainer },
   { name: 'ProTableForm', component: ProTableForm },
 ]
 
@@ -48,6 +51,7 @@ export default {
   ProTable,
   ProForm,
   ProDescriptions,
+  CollapseContainer,
   TableAction,
   FormattedNumberInput,
   ProTableForm,

package/src/types/index.ts

@@ -43,6 +43,32 @@ export interface GetFieldOptions {
   (field: string, raw: true): unknown[]
 }
 
+export interface CollapseContainerProps {
+  title?: string
+  loading?: boolean
+  /** 与 Vben Admin 保持一致，沿用 canExpan 命名 */
+  canExpan?: boolean
+  /** canExpan 的别名，便于业务侧按语义使用 */
+  canExpand?: boolean
+  helpMessage?: string | string[]
+  triggerWindowResize?: boolean
+  expanded?: boolean
+  defaultExpand?: boolean
+  ghost?: boolean
+  expandButtonText?: string
+  collapseButtonText?: string
+  /** 根容器透传属性，支持 style/class/id/data-* 等 */
+  wrapperProps?: Record<string, unknown>
+  /** 头部额外 class */
+  headerClass?: string
+  /** 头部额外样式 */
+  headerStyle?: Record<string, string | number>
+  /** 内容区额外 class */
+  contentClass?: string
+  /** 内容区额外样式 */
+  contentStyle?: Record<string, string | number>
+}
+
 /** ApiSelect 暴露的实例类型 */
 export interface ApiSelectInstance {
   options: ProFormFieldOption[]