@aspire-ui/element-component-pro 1.0.5 → 1.0.6

package/dist/style.css

@@ -1 +1 @@
-.ecp-pro-table[data-v-c5638c20]{padding:16px;background:#fff;width:100%;box-sizing:border-box}.ecp-pro-table[data-v-c5638c20] .el-table{width:100%!important}.ecp-pro-table__header[data-v-c5638c20]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ecp-pro-table__title-wrapper[data-v-c5638c20]{display:flex;align-items:center;gap:4px}.ecp-pro-table__title[data-v-c5638c20]{font-size:16px;font-weight:600}.ecp-pro-table__help[data-v-c5638c20]{color:#909399;cursor:help}.ecp-pro-table__toolbar[data-v-c5638c20]{display:flex;align-items:center;gap:8px}.ecp-pro-table__body[data-v-c5638c20]{width:100%}.ecp-pro-table__pagination[data-v-c5638c20]{margin-top:16px;display:flex;justify-content:flex-end}.ecp-pro-table__col-help[data-v-c5638c20]{margin-left:4px;color:#909399;cursor:help}.ecp-table-action[data-v-f319e73a],.ecp-table-action__item[data-v-f319e73a]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-f319e73a]{margin-right:4px}.ecp-table-action__more[data-v-f319e73a]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-f319e73a]{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__help-icon[data-v-84880e9d]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-84880e9d]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-84880e9d]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-84880e9d]: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-6171d80d]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-6171d80d]{margin-bottom:16px}.ecp-pro-form_col[data-v-6171d80d]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-6171d80d]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-6171d80d]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-6171d80d]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}
+.ecp-pro-table[data-v-c5638c20]{padding:16px;background:#fff;width:100%;box-sizing:border-box}.ecp-pro-table[data-v-c5638c20] .el-table{width:100%!important}.ecp-pro-table__header[data-v-c5638c20]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ecp-pro-table__title-wrapper[data-v-c5638c20]{display:flex;align-items:center;gap:4px}.ecp-pro-table__title[data-v-c5638c20]{font-size:16px;font-weight:600}.ecp-pro-table__help[data-v-c5638c20]{color:#909399;cursor:help}.ecp-pro-table__toolbar[data-v-c5638c20]{display:flex;align-items:center;gap:8px}.ecp-pro-table__body[data-v-c5638c20]{width:100%}.ecp-pro-table__pagination[data-v-c5638c20]{margin-top:16px;display:flex;justify-content:flex-end}.ecp-pro-table__col-help[data-v-c5638c20]{margin-left:4px;color:#909399;cursor:help}.ecp-table-action[data-v-f319e73a],.ecp-table-action__item[data-v-f319e73a]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-f319e73a]{margin-right:4px}.ecp-table-action__more[data-v-f319e73a]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-f319e73a]{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__help-icon[data-v-84880e9d]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-84880e9d]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-84880e9d]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-84880e9d]: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-6171d80d]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-6171d80d]{margin-bottom:16px}.ecp-pro-form_col[data-v-6171d80d]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-6171d80d]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-6171d80d]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-6171d80d]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}.ecp-pro-descriptions[data-v-31a2b882]{width:100%;box-sizing:border-box}.ecp-pro-descriptions__header[data-v-31a2b882]{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}.ecp-pro-descriptions__title-wrap[data-v-31a2b882]{display:flex;align-items:center;gap:6px}.ecp-pro-descriptions__title[data-v-31a2b882]{font-size:16px;font-weight:600;color:#303133}.ecp-pro-descriptions__help[data-v-31a2b882],.ecp-pro-descriptions__toggle[data-v-31a2b882]{color:#909399}.ecp-pro-descriptions__toggle .el-icon-arrow-down[data-v-31a2b882]{margin-left:4px;transition:transform .2s ease}.ecp-pro-descriptions__toggle .el-icon-arrow-down.is-expanded[data-v-31a2b882]{transform:rotate(180deg)}.ecp-pro-descriptions__body[data-v-31a2b882]{display:grid;border-top:1px solid #ebeef5;border-left:1px solid #ebeef5;overflow:hidden}.ecp-pro-descriptions__body.is-collapsed[data-v-31a2b882]{overflow:hidden}.ecp-pro-descriptions__body[data-v-31a2b882]:not(.is-bordered){border-top:0;border-left:0;gap:12px 16px}.ecp-pro-descriptions__item[data-v-31a2b882]{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-31a2b882]{border-right:0;border-bottom:0}.ecp-pro-descriptions__label[data-v-31a2b882],.ecp-pro-descriptions__content[data-v-31a2b882]{min-width:0;box-sizing:border-box;word-break:break-word}.ecp-pro-descriptions__label[data-v-31a2b882]{flex:0 0 120px;padding:12px 16px;color:#606266;background:#fafafa}.ecp-pro-descriptions__content[data-v-31a2b882]{flex:1;padding:12px 16px;color:#303133;background:#fff}.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__label[data-v-31a2b882]{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-31a2b882]{padding:0;background:transparent}.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__label[data-v-31a2b882],.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__content[data-v-31a2b882]{padding-top:8px;padding-bottom:8px;font-size:13px}@media (max-width: 767px){.ecp-pro-descriptions__item[data-v-31a2b882]{flex-direction:column}.ecp-pro-descriptions__label[data-v-31a2b882]{flex-basis:auto}}

package/dist/types/index.d.ts

@@ -141,3 +141,63 @@ export interface ProDescriptionsSchema {
     /** 栅格占位 */
     span?: number;
 }
+/** Description 列数配置 */
+export type DescriptionColumn = number | {
+    xxl?: number;
+    xl?: number;
+    lg?: number;
+    md?: number;
+    sm?: number;
+    xs?: number;
+};
+/** Description 描述项配置 */
+export interface DescriptionSchema {
+    /** 标签 */
+    label: string;
+    /** 数据字段（兼容 Vben Description 的 field） */
+    field?: string;
+    /** 数据字段 */
+    dataIndex: string;
+    /** 栅格占位 */
+    span?: number;
+    /** 是否显示 */
+    show?: boolean | ((data: Record<string, unknown>) => boolean);
+    /** 标签最小宽度 */
+    labelMinWidth?: number;
+    /** 内容最小宽度 */
+    contentMinWidth?: number;
+    /** 标签样式 */
+    labelStyle?: Record<string, string | number>;
+    /** 内容样式 */
+    contentStyle?: Record<string, string | number>;
+    /** 自定义插槽名称 */
+    slot?: string;
+    /** 自定义渲染 */
+    render?: (value: unknown, record: Record<string, unknown>) => VNode | string | number | null | undefined;
+}
+/** Description Props */
+export interface DescriptionProps {
+    title?: string;
+    helpMessage?: string | string[];
+    size?: 'medium' | 'small';
+    bordered?: boolean;
+    column?: DescriptionColumn;
+    schema?: DescriptionSchema[];
+    data?: Record<string, unknown>;
+    emptyText?: string;
+    useCollapse?: boolean;
+    collapseOptions?: {
+        canExpand?: boolean;
+        defaultExpand?: boolean;
+        expandButtonText?: string;
+        collapseButtonText?: string;
+        helpMessage?: string | string[];
+        visibleRows?: number;
+    };
+}
+/** Description 操作实例 */
+export interface DescriptionActionType {
+    setProps: (props: Partial<DescriptionProps>) => Promise<void>;
+    setData: (data: Record<string, unknown>) => Promise<void>;
+    getData: () => Record<string, unknown>;
+}

package/package.json

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

package/src/ProDescriptions/ProDescriptions.vue

@@ -0,0 +1,437 @@
+<template>
+  <div class="ecp-pro-descriptions">
+    <div v-if="showHeader" class="ecp-pro-descriptions__header">
+      <div class="ecp-pro-descriptions__title-wrap">
+        <span v-if="effectiveProps.title" class="ecp-pro-descriptions__title">{{ effectiveProps.title }}</span>
+        <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-pro-descriptions__help" />
+        </el-tooltip>
+        <el-tooltip v-if="effectiveProps.collapseOptions?.helpMessage" placement="top" effect="dark">
+          <template slot="content">
+            <span v-if="Array.isArray(effectiveProps.collapseOptions.helpMessage)">
+              <div v-for="(msg, index) in effectiveProps.collapseOptions.helpMessage" :key="`collapse-${index}`">{{ msg }}</div>
+            </span>
+            <span v-else>{{ effectiveProps.collapseOptions.helpMessage }}</span>
+          </template>
+          <i class="el-icon-info ecp-pro-descriptions__help" />
+        </el-tooltip>
+      </div>
+      <el-button
+        v-if="showCollapseButton"
+        type="text"
+        class="ecp-pro-descriptions__toggle"
+        @click="expanded = !expanded"
+      >
+        {{ expanded ? collapseButtonText.collapse : collapseButtonText.expand }}
+        <i class="el-icon-arrow-down" :class="expanded ? 'is-expanded' : ''" />
+      </el-button>
+    </div>
+
+    <div
+      class="ecp-pro-descriptions__body"
+      :class="[
+        `is-${effectiveProps.size}`,
+        { 'is-bordered': effectiveProps.bordered, 'is-collapsed': showCollapseButton && !expanded },
+      ]"
+      :style="bodyStyle"
+      v-bind="$attrs"
+    >
+      <template v-for="(row, rowIndex) in renderedRows">
+        <template v-for="item in row.items">
+          <div
+            :key="`${rowIndex}-${item.dataIndex || item.field}`"
+            class="ecp-pro-descriptions__item"
+            :style="getItemStyle(item)"
+          >
+            <div class="ecp-pro-descriptions__label" :style="getLabelStyle(item)">
+              {{ item.label }}
+            </div>
+            <div class="ecp-pro-descriptions__content" :style="getContentStyle(item)">
+              <slot
+                v-if="$scopedSlots[item.slot || item.dataIndex]"
+                :name="item.slot || item.dataIndex"
+                :value="getItemValue(item)"
+                :record="effectiveData"
+                :schema="item"
+              />
+              <DescriptionValueRenderer v-else :schema="item" :value="getItemValue(item)" :record="effectiveData" :empty-text="effectiveProps.emptyText || '-'" />
+            </div>
+          </div>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useComponentSetting } from '../useComponentSetting'
+import type {
+  DescriptionActionType,
+  DescriptionColumn,
+  DescriptionProps,
+  DescriptionSchema,
+} from '../types'
+
+interface NormalizedRow {
+  items: Array<DescriptionSchema & { _span: number }>
+}
+
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    helpMessage?: string | string[]
+    size?: 'medium' | 'small'
+    bordered?: boolean
+    column?: DescriptionColumn
+    schema?: DescriptionSchema[]
+    data?: Record<string, unknown>
+    emptyText?: string
+    useCollapse?: boolean
+    collapseOptions?: {
+      canExpand?: boolean
+      defaultExpand?: boolean
+      expandButtonText?: string
+      collapseButtonText?: string
+      helpMessage?: string | string[]
+      visibleRows?: number
+    }
+  }>(),
+  {
+    size: 'medium',
+    bordered: true,
+    column: () => ({ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }),
+    schema: () => [],
+    data: () => ({}),
+    emptyText: '-',
+    useCollapse: false,
+    collapseOptions: () => ({ canExpand: false, defaultExpand: true, expandButtonText: '展开', collapseButtonText: '收起', visibleRows: 1 }),
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'register', action: DescriptionActionType): void
+}>()
+
+const innerProps = ref<Partial<DescriptionProps>>({})
+const innerData = ref<Record<string, unknown>>({})
+const innerSchema = ref<DescriptionSchema[]>([])
+const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1920)
+const expanded = ref(true)
+
+const DescriptionValueRenderer = defineComponent({
+  name: 'EcpDescriptionValueRenderer',
+  props: {
+    schema: { type: Object, required: true },
+    value: { required: false },
+    record: { type: Object, required: true },
+    emptyText: { type: String, default: '-' },
+  },
+  setup(rendererProps) {
+    return () => {
+      const schema = rendererProps.schema as DescriptionSchema
+      const record = rendererProps.record as Record<string, unknown>
+      const value = rendererProps.value
+
+      if (schema.render) {
+        const rendered = schema.render(value, record)
+        if (rendered == null || rendered === '') return h('span', rendererProps.emptyText)
+        if (typeof rendered === 'string' || typeof rendered === 'number') return h('span', String(rendered))
+        return rendered as never
+      }
+
+      if (Array.isArray(value)) {
+        return h('span', value.length ? value.join(', ') : rendererProps.emptyText)
+      }
+
+      if (value === null || value === undefined || value === '') {
+        return h('span', rendererProps.emptyText)
+      }
+
+      if (typeof value === 'object') {
+        return h('span', JSON.stringify(value))
+      }
+
+      return h('span', String(value))
+    }
+  },
+})
+
+const { getSetting } = useComponentSetting()
+const effectiveProps = computed(() => ({ ...getSetting('ProDescriptions'), ...props, ...innerProps.value }))
+
+const breakpoints = { xxl: 1920, xl: 1200, lg: 992, md: 768, sm: 576 }
+
+const resolveColumn = (column: DescriptionColumn | undefined, width: number) => {
+  if (typeof column === 'number') return Math.max(1, column)
+  const value = column ?? {}
+  if (width >= breakpoints.xxl) return value.xxl ?? value.xl ?? value.lg ?? value.md ?? value.sm ?? value.xs ?? 3
+  if (width >= breakpoints.xl) return value.xl ?? value.lg ?? value.md ?? value.sm ?? value.xs ?? 3
+  if (width >= breakpoints.lg) return value.lg ?? value.md ?? value.sm ?? value.xs ?? 3
+  if (width >= breakpoints.md) return value.md ?? value.sm ?? value.xs ?? 3
+  if (width >= breakpoints.sm) return value.sm ?? value.xs ?? 2
+  return value.xs ?? 1
+}
+
+const currentColumn = computed(() => resolveColumn(effectiveProps.value.column, windowWidth.value))
+const effectiveData = computed(() => effectiveProps.value.data ?? innerData.value ?? {})
+
+const visibleSchema = computed(() => {
+  return (innerSchema.value.length ? innerSchema.value : effectiveProps.value.schema ?? []).filter((item) => {
+    const key = item.dataIndex || item.field
+    if (!key) return false
+    if (typeof item.show === 'function') {
+      return item.show(effectiveData.value)
+    }
+    return item.show !== false
+  }).map((item) => ({
+    ...item,
+    dataIndex: item.dataIndex || item.field || '',
+  }))
+})
+
+const normalizedRows = computed<NormalizedRow[]>(() => {
+  const rows: NormalizedRow[] = []
+  let currentRow: NormalizedRow = { items: [] }
+  let used = 0
+  const totalColumn = currentColumn.value
+  visibleSchema.value.forEach((item, index) => {
+    const remainingItems = visibleSchema.value.length - index
+    const requested = Math.max(1, Math.min(item.span ?? 1, totalColumn))
+    const span = remainingItems === 1 ? totalColumn - used || totalColumn : requested
+    if (used + span > totalColumn) {
+      rows.push(currentRow)
+      currentRow = { items: [] }
+      used = 0
+    }
+    const normalizedSpan = remainingItems === 1 && used < totalColumn ? Math.max(1, totalColumn - used) : span
+    currentRow.items.push({ ...item, _span: normalizedSpan })
+    used += normalizedSpan
+    if (used >= totalColumn) {
+      rows.push(currentRow)
+      currentRow = { items: [] }
+      used = 0
+    }
+  })
+  if (currentRow.items.length > 0) rows.push(currentRow)
+  return rows
+})
+
+const renderedRows = computed(() => {
+  if (!showCollapseButton.value || expanded.value) return normalizedRows.value
+  const visibleRows = Math.max(1, effectiveProps.value.collapseOptions?.visibleRows ?? 1)
+  return normalizedRows.value.slice(0, visibleRows)
+})
+
+const showCollapseButton = computed(() => {
+  const visibleRows = Math.max(1, effectiveProps.value.collapseOptions?.visibleRows ?? 1)
+  return !!effectiveProps.value.useCollapse && !!effectiveProps.value.collapseOptions?.canExpand && normalizedRows.value.length > visibleRows
+})
+const showHeader = computed(() => !!effectiveProps.value.title || !!effectiveProps.value.helpMessage || showCollapseButton.value)
+const collapseButtonText = computed(() => ({
+  expand: effectiveProps.value.collapseOptions?.expandButtonText ?? '展开',
+  collapse: effectiveProps.value.collapseOptions?.collapseButtonText ?? '收起',
+}))
+
+const bodyStyle = computed(() => ({
+  gridTemplateColumns: `repeat(${currentColumn.value}, minmax(0, 1fr))`,
+}))
+
+const getItemStyle = (item: DescriptionSchema & { _span: number }) => ({
+  gridColumn: `span ${item._span}`,
+})
+
+const getLabelStyle = (item: DescriptionSchema) => ({
+  minWidth: item.labelMinWidth ? `${item.labelMinWidth}px` : undefined,
+  ...(item.labelStyle ?? {}),
+})
+
+const getContentStyle = (item: DescriptionSchema) => ({
+  minWidth: item.contentMinWidth ? `${item.contentMinWidth}px` : undefined,
+  ...(item.contentStyle ?? {}),
+})
+
+const getItemValue = (item: DescriptionSchema) => effectiveData.value[item.dataIndex]
+
+const syncSchema = () => {
+  innerSchema.value = [...(effectiveProps.value.schema ?? [])]
+}
+
+const syncData = () => {
+  innerData.value = { ...(effectiveProps.value.data ?? {}) }
+}
+
+const setProps = async (descriptionProps: Partial<DescriptionProps>) => {
+  innerProps.value = { ...innerProps.value, ...descriptionProps }
+  if (descriptionProps.schema) innerSchema.value = [...descriptionProps.schema]
+  if (descriptionProps.data) innerData.value = { ...descriptionProps.data }
+}
+
+const setData = async (data: Record<string, unknown>) => {
+  innerData.value = { ...innerData.value, ...data }
+  innerProps.value = { ...innerProps.value, data: innerData.value }
+}
+
+const getData = () => ({ ...(effectiveProps.value.data ?? innerData.value ?? {}) })
+
+const descriptionAction: DescriptionActionType = {
+  setProps,
+  setData,
+  getData,
+}
+
+defineExpose(descriptionAction)
+
+const updateWindowWidth = () => {
+  if (typeof window !== 'undefined') windowWidth.value = window.innerWidth
+}
+
+onMounted(() => {
+  syncSchema()
+  syncData()
+  expanded.value = effectiveProps.value.collapseOptions?.defaultExpand !== false
+  emit('register', descriptionAction)
+  if (typeof window !== 'undefined') {
+    window.addEventListener('resize', updateWindowWidth)
+  }
+})
+
+onUnmounted(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('resize', updateWindowWidth)
+  }
+})
+
+watch(() => effectiveProps.value.schema, syncSchema, { deep: true })
+watch(() => effectiveProps.value.data, syncData, { deep: true })
+watch(() => effectiveProps.value.collapseOptions?.defaultExpand, (value) => {
+  if (value !== undefined) expanded.value = value
+})
+</script>
+
+<style scoped>
+.ecp-pro-descriptions {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.ecp-pro-descriptions__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  gap: 12px;
+}
+
+.ecp-pro-descriptions__title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ecp-pro-descriptions__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.ecp-pro-descriptions__help,
+.ecp-pro-descriptions__toggle {
+  color: #909399;
+}
+
+.ecp-pro-descriptions__toggle .el-icon-arrow-down {
+  margin-left: 4px;
+  transition: transform 0.2s ease;
+}
+
+.ecp-pro-descriptions__toggle .el-icon-arrow-down.is-expanded {
+  transform: rotate(180deg);
+}
+
+.ecp-pro-descriptions__body {
+  display: grid;
+  border-top: 1px solid #ebeef5;
+  border-left: 1px solid #ebeef5;
+  overflow: hidden;
+}
+
+.ecp-pro-descriptions__body.is-collapsed {
+  overflow: hidden;
+}
+
+.ecp-pro-descriptions__body:not(.is-bordered) {
+  border-top: 0;
+  border-left: 0;
+  gap: 12px 16px;
+}
+
+.ecp-pro-descriptions__item {
+  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 {
+  border-right: 0;
+  border-bottom: 0;
+}
+
+.ecp-pro-descriptions__label,
+.ecp-pro-descriptions__content {
+  min-width: 0;
+  box-sizing: border-box;
+  word-break: break-word;
+}
+
+.ecp-pro-descriptions__label {
+  flex: 0 0 120px;
+  padding: 12px 16px;
+  color: #606266;
+  background: #fafafa;
+}
+
+.ecp-pro-descriptions__content {
+  flex: 1;
+  padding: 12px 16px;
+  color: #303133;
+  background: #fff;
+}
+
+.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__label {
+  flex-basis: auto;
+  padding: 0;
+  margin-right: 8px;
+  background: transparent;
+  font-weight: 500;
+}
+
+.ecp-pro-descriptions__body:not(.is-bordered) .ecp-pro-descriptions__content {
+  padding: 0;
+  background: transparent;
+}
+
+.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__label,
+.ecp-pro-descriptions__body.is-small .ecp-pro-descriptions__content {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-size: 13px;
+}
+
+@media (max-width: 767px) {
+  .ecp-pro-descriptions__item {
+    flex-direction: column;
+  }
+
+  .ecp-pro-descriptions__label {
+    flex-basis: auto;
+  }
+}
+</style>

package/src/ProDescriptions/index.ts

@@ -0,0 +1,5 @@
+import ProDescriptions from './ProDescriptions.vue'
+import { useDescription } from './useDescription'
+
+export { ProDescriptions, useDescription }
+export default ProDescriptions

package/src/ProDescriptions/useDescription.ts

@@ -0,0 +1,52 @@
+import { ref, unref, watch, type Ref } from 'vue'
+import type { DescriptionActionType, DescriptionProps } from '../types'
+
+export type UseDescriptionPropsReactive = DescriptionProps | Ref<DescriptionProps | undefined>
+
+export type UseDescriptionReturn = [
+  (instance: DescriptionActionType) => void,
+  DescriptionActionType,
+]
+
+export function useDescription(props?: UseDescriptionPropsReactive): UseDescriptionReturn {
+  const descriptionActionRef = ref<DescriptionActionType | null>(null)
+
+  const getDescriptionProps = (): DescriptionProps | undefined =>
+    (props ? unref(props as Ref<DescriptionProps | undefined>) : undefined) as DescriptionProps | undefined
+
+  const getDescriptionAction = (): DescriptionActionType => {
+    const action = unref(descriptionActionRef)
+    if (!action) {
+      throw new Error('ProDescriptions instance has not been registered')
+    }
+    return action
+  }
+
+  const register = (instance: DescriptionActionType) => {
+    descriptionActionRef.value = instance
+    const descriptionProps = getDescriptionProps()
+    if (descriptionProps && Object.keys(descriptionProps).length > 0) {
+      instance.setProps(descriptionProps)
+    }
+  }
+
+  if (props) {
+    watch(
+      () => getDescriptionProps(),
+      (descriptionProps) => {
+        if (descriptionProps && descriptionActionRef.value) {
+          descriptionActionRef.value.setProps(descriptionProps)
+        }
+      },
+      { deep: true }
+    )
+  }
+
+  const descriptionActions: DescriptionActionType = {
+    setProps: (descriptionProps) => getDescriptionAction().setProps(descriptionProps),
+    setData: (data) => getDescriptionAction().setData(data),
+    getData: () => getDescriptionAction().getData(),
+  }
+
+  return [register, descriptionActions]
+}

package/src/index.ts

@@ -1,15 +1,19 @@
 import type { VueConstructor } from 'vue'
 import ProTable, { TableAction } from './ProTable'
 import ProForm, { ProFormItem, FormActions } from './ProForm'
+import ProDescriptions from './ProDescriptions'
 import { useForm } from './ProForm/useForm'
+import { useDescription } from './ProDescriptions/useDescription'
 import { useProTable } from './ProTable/useProTable'
 import { useComponentSetting } from './useComponentSetting'
 
 export { ProForm, ProFormItem, FormActions, useForm }
 export { ProTable, useProTable, TableAction }
+export { ProDescriptions, useDescription }
 export { useComponentSetting }
 export type { UseComponentSettingReturn } from './useComponentSetting'
 export type { UseProTableReturn, UseProTablePropsReactive } from './ProTable/useProTable'
+export type { UseDescriptionReturn, UseDescriptionPropsReactive } from './ProDescriptions/useDescription'
 export * from './ProTable/types'
 export * from './types'
 
@@ -19,6 +23,7 @@ const components = [
   { name: 'ProForm', component: ProForm },
   { name: 'ProFormItem', component: ProFormItem },
   { name: 'FormActions', component: FormActions },
+  { name: 'ProDescriptions', component: ProDescriptions },
 ]
 
 export function install(Vue: VueConstructor) {
@@ -31,5 +36,6 @@ export default {
   install,
   ProTable,
   ProForm,
+  ProDescriptions,
   TableAction,
 }

package/src/types/index.ts

@@ -160,3 +160,67 @@ export interface ProDescriptionsSchema {
   /** 栅格占位 */
   span?: number
 }
+
+/** Description 列数配置 */
+export type DescriptionColumn = number | {
+  xxl?: number
+  xl?: number
+  lg?: number
+  md?: number
+  sm?: number
+  xs?: number
+}
+
+/** Description 描述项配置 */
+export interface DescriptionSchema {
+  /** 标签 */
+  label: string
+  /** 数据字段（兼容 Vben Description 的 field） */
+  field?: string
+  /** 数据字段 */
+  dataIndex: string
+  /** 栅格占位 */
+  span?: number
+  /** 是否显示 */
+  show?: boolean | ((data: Record<string, unknown>) => boolean)
+  /** 标签最小宽度 */
+  labelMinWidth?: number
+  /** 内容最小宽度 */
+  contentMinWidth?: number
+  /** 标签样式 */
+  labelStyle?: Record<string, string | number>
+  /** 内容样式 */
+  contentStyle?: Record<string, string | number>
+  /** 自定义插槽名称 */
+  slot?: string
+  /** 自定义渲染 */
+  render?: (value: unknown, record: Record<string, unknown>) => VNode | string | number | null | undefined
+}
+
+/** Description Props */
+export interface DescriptionProps {
+  title?: string
+  helpMessage?: string | string[]
+  size?: 'medium' | 'small'
+  bordered?: boolean
+  column?: DescriptionColumn
+  schema?: DescriptionSchema[]
+  data?: Record<string, unknown>
+  emptyText?: string
+  useCollapse?: boolean
+  collapseOptions?: {
+    canExpand?: boolean
+    defaultExpand?: boolean
+    expandButtonText?: string
+    collapseButtonText?: string
+    helpMessage?: string | string[]
+    visibleRows?: number
+  }
+}
+
+/** Description 操作实例 */
+export interface DescriptionActionType {
+  setProps: (props: Partial<DescriptionProps>) => Promise<void>
+  setData: (data: Record<string, unknown>) => Promise<void>
+  getData: () => Record<string, unknown>
+}