feat(descriptions): add descriptions & descriptions item

example/App.vue

@@ -211,6 +211,16 @@
     <emqx-radio v-model="radio" label="1">备选项1</emqx-radio>
     <emqx-radio v-model="radio" label="2">备选项2</emqx-radio>
   </div>
+  <h2>Descriptions</h2>
+  <emqx-descriptions title="用户信息">
+    <emqx-descriptions-item label="用户名">
+      <template #label> 1243 </template>
+      900000
+    </emqx-descriptions-item>
+    <emqx-descriptions-item label="手机号">18100000000</emqx-descriptions-item>
+    <emqx-descriptions-item label="居住地">苏州市</emqx-descriptions-item>
+    <emqx-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</emqx-descriptions-item>
+  </emqx-descriptions>
 </template>
 
 <script lang="ts">

packages/Descriptions/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Descriptions from './src/descriptions.vue'
+
+Descriptions.install = (vue: App): void => {
+  vue.component(Descriptions.name, Descriptions)
+}
+
+export default Descriptions

packages/Descriptions/src/descriptions.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-descriptions class="emqx-descriptions">
+    <slot></slot>
+    <template v-if="$slots.title" #title>
+      <slot name="title"></slot>
+    </template>
+    <template v-if="$slots.extra" #extra>
+      <slot name="extra"></slot>
+    </template>
+  </el-descriptions>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { ElDescriptions } from 'element-plus'
+
+interface Slot {
+  type: string | { name: string }
+  children?: Array<Slot>
+}
+
+export default defineComponent({
+  name: 'EmqxDescriptions',
+  components: {
+    ElDescriptions,
+  },
+  setup(props: any, { slots }) {
+    const setName = (item: Slot) => {
+      if (typeof item.type === 'string' || item.type?.name !== 'EmqxDescriptionsItem') {
+        return
+      }
+      if (!item.type || typeof item.type === 'string') {
+        item.type = {
+          name: '',
+        }
+      }
+      item.type.name = 'ElDescriptionsItem'
+    }
+
+    const recursiveChange = (children: Array<Slot>) => {
+      const temp: any = Array.isArray(children) ? children : [children]
+      temp.forEach((child: Slot) => {
+        if (Array.isArray(child.children)) {
+          child.children.forEach((item: Slot) => {
+            setName(item)
+          })
+          recursiveChange(child.children)
+        } else {
+          setName(child)
+        }
+      })
+    }
+    const changeName = () => {
+      recursiveChange(slots.default?.() as Array<Slot>)
+    }
+    changeName()
+  },
+})
+</script>

packages/DescriptionsItem/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import DescriptionsItem from './src/descriptions-item.vue'
+
+DescriptionsItem.install = (vue: App): void => {
+  vue.component('EmqxDescriptionsItem', DescriptionsItem)
+}
+
+export default DescriptionsItem

packages/DescriptionsItem/src/descriptions-item.vue

@@ -0,0 +1,20 @@
+<template>
+  <el-descriptions-item class="emqx-descriptions-item">
+    <slot></slot>
+    <template v-if="$slots.label" #label>
+      <slot name="label"></slot>
+    </template>
+  </el-descriptions-item>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { ElDescriptionsItem } from 'element-plus'
+
+export default defineComponent({
+  name: 'EmqxDescriptionsItem',
+  components: {
+    ElDescriptionsItem,
+  },
+})
+</script>

packages/index.ts

@@ -37,6 +37,8 @@ import RadioGroup from './RadioGroup'
 import Dropdown from './Dropdown'
 import DropdownMenu from './DropdownMenu'
 import DropdownItem from './DropdownItem'
+import Descriptions from './Descriptions'
+import DescriptionsItem from './DescriptionsItem'
 
 import lang from 'element-plus/lib/locale/lang/zh-cn'
 import locale from 'element-plus/lib/locale'
@@ -84,6 +86,8 @@ const components = [
   Dropdown,
   DropdownMenu,
   DropdownItem,
+  Descriptions,
+  DescriptionsItem,
 ]
 
 const plugins = [Loading]
@@ -137,6 +141,8 @@ const packages = {
   Dropdown,
   DropdownMenu,
   DropdownItem,
+  Descriptions,
+  DescriptionsItem,
 }
 
 export const EmqxMessage = Message