feat: Add Descriptions component and add Descriptions demo

src/components/Descriptions/index.ts

@@ -0,0 +1,3 @@
+import Descriptions from './src/Descriptions.vue'
+
+export { Descriptions }

src/components/Descriptions/src/Descriptions.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ElCollapseTransition, ElDescriptions, ElDescriptionsItem, ElTooltip } from 'element-plus'
+import { useDesign } from '@/hooks/web/useDesign'
+import { propTypes } from '@/utils/propTypes'
+import { ref, unref, PropType, computed, useAttrs } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+
+const appStore = useAppStore()
+
+const mobile = computed(() => appStore.getMobile)
+
+const attrs = useAttrs()
+
+const props = defineProps({
+  title: propTypes.string.def(''),
+  message: propTypes.string.def(''),
+  collapse: propTypes.bool.def(true),
+  schema: {
+    type: Array as PropType<DescriptionsSchema[]>,
+    default: () => []
+  },
+  data: {
+    type: Object as PropType<Recordable>,
+    default: () => ({})
+  }
+})
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('descriptions')
+
+const getBindValue = computed(() => {
+  const delArr: string[] = ['title', 'message', 'collapse', 'schema', 'data', 'class']
+  const obj = { ...attrs, ...props }
+  for (const key in obj) {
+    if (delArr.indexOf(key) !== -1) {
+      delete obj[key]
+    }
+  }
+  return obj
+})
+
+const getBindItemValue = (item: DescriptionsSchema) => {
+  const delArr: string[] = ['field']
+  const obj = { ...item }
+  for (const key in obj) {
+    if (delArr.indexOf(key) !== -1) {
+      delete obj[key]
+    }
+  }
+  return obj
+}
+
+// 折叠
+const show = ref(true)
+
+const toggleClick = () => {
+  if (props.collapse) {
+    show.value = !unref(show)
+  }
+}
+</script>
+
+<template>
+  <div :class="[prefixCls, 'bg-[var(--el-color-white)]']">
+    <div
+      v-if="title"
+      :class="[
+        `${prefixCls}-header`,
+        'h-50px flex justify-between items-center mb-10px border-bottom-1 border-solid border-[var(--tags-view-border-color)] px-10px cursor-pointer'
+      ]"
+      @click="toggleClick"
+    >
+      <div :class="[`${prefixCls}-header__title`, 'relative font-18px font-bold ml-10px']">
+        <div class="flex items-center">
+          {{ title }}
+          <ElTooltip v-if="message" :content="message" placement="right">
+            <Icon icon="ep:warning" class="ml-5px" />
+          </ElTooltip>
+        </div>
+      </div>
+      <Icon v-if="collapse" :icon="show ? 'ep:arrow-down' : 'ep:arrow-up'" />
+    </div>
+
+    <ElCollapseTransition>
+      <div v-show="show" :class="[`${prefixCls}-content`, 'p-10px']">
+        <ElDescriptions
+          :column="2"
+          border
+          :direction="mobile ? 'vertical' : 'horizontal'"
+          v-bind="getBindValue"
+        >
+          <ElDescriptionsItem
+            v-for="item in schema"
+            :key="item.field"
+            v-bind="getBindItemValue(item)"
+          >
+            <template #label>
+              <slot :name="`${item.field}-label`" :label="item.label">{{ item.label }}</slot>
+            </template>
+
+            <template #default>
+              <slot :name="item.field">{{ data[item.field] }}</slot>
+            </template>
+          </ElDescriptionsItem>
+        </ElDescriptions>
+      </div>
+    </ElCollapseTransition>
+  </div>
+</template>
+
+<style lang="less" scoped>
+@prefix-cls: ~'@{namespace}-descriptions';
+
+.@{prefix-cls}-header {
+  &__title {
+    &::after {
+      position: absolute;
+      top: 3px;
+      left: -10px;
+      width: 4px;
+      height: 70%;
+      background: var(--el-color-primary);
+      content: '';
+    }
+  }
+}
+
+.@{prefix-cls}-content {
+  :deep(.@{elNamespace}-descriptions__cell) {
+    width: 0;
+  }
+}
+</style>

src/components/Form/src/Form.vue

@@ -246,7 +246,12 @@ export default defineComponent({
     }
 
     return () => (
-      <ElForm ref={elFormRef} {...getFormBindValue()} model={formModel} class={prefixCls}>
+      <ElForm
+        ref={elFormRef}
+        {...getFormBindValue()}
+        model={props.isCustom ? props.model : formModel}
+        class={prefixCls}
+      >
         {{
           // 如果需要自定义，就什么都不渲染，而是提供默认插槽
           default: () => {

src/components/ImageViewer/src/ImageViewer.vue

@@ -1,9 +1,20 @@
 <script setup lang="ts">
 import { ElImageViewer } from 'element-plus'
-import { computed, ref } from 'vue'
-import { imageViewerProps } from './props'
+import { computed, ref, PropType } from 'vue'
+import { propTypes } from '@/utils/propTypes'
 
-const props = defineProps(imageViewerProps)
+const props = defineProps({
+  urlList: {
+    type: Array as PropType<string[]>,
+    default: (): string[] => []
+  },
+  zIndex: propTypes.number.def(200),
+  initialIndex: propTypes.number.def(0),
+  infinite: propTypes.bool.def(true),
+  hideOnClickModal: propTypes.bool.def(false),
+  appendToBody: propTypes.bool.def(false),
+  show: propTypes.bool.def(false)
+})
 
 const getBindValue = computed(() => {
   const propsData: Recordable = { ...props }

src/locales/en.ts

@@ -106,7 +106,8 @@ export default {
     editor: 'Editor',
     richText: 'Rich text',
     dialog: 'Dialog',
-    imageViewer: 'Image viewer'
+    imageViewer: 'Image viewer',
+    descriptions: 'Descriptions'
   },
   analysis: {
     newUser: 'New user',
@@ -349,5 +350,15 @@ export default {
     open: 'Open',
     imageViewer: 'Image viewer',
     imageViewerDes: 'Secondary packaging of ImageViewer components based on ElementPlus'
+  },
+  descriptionsDemo: {
+    descriptions: 'Descriptions',
+    descriptionsDes: 'Secondary packaging of Descriptions components based on ElementPlus',
+    username: 'Username',
+    nickName: 'NickName',
+    phone: 'Phone',
+    email: 'Email',
+    addr: 'Address',
+    form: 'Combined with Form component'
   }
 }

src/locales/zh-CN.ts

@@ -106,7 +106,8 @@ export default {
     editor: '编辑器',
     richText: '富文本',
     dialog: '弹窗',
-    imageViewer: '图片预览'
+    imageViewer: '图片预览',
+    descriptions: '描述'
   },
   analysis: {
     newUser: '新增用户',
@@ -346,5 +347,15 @@ export default {
     open: '打开',
     imageViewer: '图片预览',
     imageViewerDes: '基于 ElementPlus 的 ImageViewer 组件二次封装'
+  },
+  descriptionsDemo: {
+    descriptions: '描述',
+    descriptionsDes: '基于 ElementPlus 的 descriptions 组件二次封装',
+    username: '用户名',
+    nickName: '昵称',
+    phone: '联系电话',
+    email: '邮箱',
+    addr: '地址',
+    form: '与 Form 组件组合'
   }
 }

src/router/index.ts

@@ -193,6 +193,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
           title: t('router.search')
         }
       },
+      {
+        path: 'descriptions',
+        component: () => import('@/views/Components/Descriptions.vue'),
+        name: 'Descriptions',
+        meta: {
+          title: t('router.descriptions')
+        }
+      },
       {
         path: 'image-viewer',
         component: () => import('@/views/Components/ImageViewer.vue'),