a

code/base-project/base-vue/packages/ao-design/src/descriptions/descriptions-group.tsx

@@ -1,9 +1,35 @@
-import { defineComponent } from 'vue'
+import type { PropType, VNode } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { getPrefixCls } from '../_utils/getPrefixCls'
 
+interface DescriptionsData {
+  label: string | VNode | (() => VNode)
+  content: string | VNode | (() => VNode)
+  span: number
+}
+
 export default defineComponent({
   name: 'DescriptionsGroup',
   props: {
+    data: {
+      type: Array as PropType<DescriptionsData[]>,
+      default: () => [],
+    },
+    title: {
+      type: [String, Object, Function] as PropType<string | VNode | (() => VNode)>,
+    },
+    size: {
+      type: String as PropType<'small' | 'medium' | 'large'>,
+      default: 'medium',
+    },
+    layout: {
+      type: String as PropType<'row' | 'row-vertical' | 'column' | 'column-vertical'>,
+      default: 'row',
+    },
+    columns: {
+      type: Number,
+      default: 3,
+    },
     class: {
       type: [String, Array, Object],
       default: '',
@@ -16,9 +42,43 @@ export default defineComponent({
   emits: [],
   setup(props, { slots, emit }) {
     const prefixCls = getPrefixCls('descriptions-group')
+    const renderHeader = () => {
+      const title = slots.title
+        ? slots.title()
+        : typeof props.title === 'function'
+          ? props.title()
+          : props.title
+
+      return <div class={`${prefixCls}-header`}>{title}</div>
+    }
+
+    const childrenVNodes = computed(() => {
+      const nodes = slots.default?.() ?? []
+      return nodes.filter(node =>
+        node.type && (typeof node.type === 'string' || typeof node.type === 'object' || typeof node.type === 'function'),
+      )
+    })
+
+    const groupedData = computed(() => {
+      c
+    })
+
+    const renderBody = () => {
+      return (
+        <table class={[
+          `${prefixCls}-body`,
+        ]}
+        >
+          <tbody>
+          </tbody>
+        </table>
+      )
+    }
+
     return () => (
       <div class={[prefixCls, props.class]} style={{ ...props.style }}>
-        {slots.default?.()}
+        {renderHeader}
+        {renderBody}
       </div>
     )
   },

code/base-project/base-vue/packages/ao-design/src/descriptions/descriptions.tsx

@@ -1,25 +1,21 @@
+import type { PropType, VNode } from 'vue'
 import { defineComponent } from 'vue'
-import { getPrefixCls } from '../_utils/getPrefixCls'
 
 export default defineComponent({
   name: 'Descriptions',
   props: {
-    class: {
+    label: {
-      type: [String, Array, Object],
+      type: [String, Object, Function] as PropType<string | VNode | (() => VNode)>,
-      default: '',
     },
-    style: {
+    content: {
-      type: Object,
+      type: [String, Object, Function] as PropType<string | VNode | (() => VNode)>,
-      default: () => ({}),
+    },
+    default: {
+      type: [String, Object, Function] as PropType<string | VNode | (() => VNode)>,
+    },
+    span: {
+      type: Number,
+      default: 1,
     },
-  },
-  emits: [],
-  setup(props, { slots, emit }) {
-    const prefixCls = getPrefixCls('descriptions')
-    return () => (
-      <div class={[prefixCls, props.class]} style={{ ...props.style }}>
-        {slots.default?.()}
-      </div>
-    )
   },
 })

code/base-project/base-vue/packages/ao-design/src/descriptions/index.scss

@@ -4,4 +4,4 @@
 $descriptions-prefix: '#{$prefix}-descriptions';
 
 .#{$descriptions-prefix} {
-}
+}