From c7658d8c70618045a7527156444ba1d564963325 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Sun, 17 Dec 2023 11:23:36 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E6=8F=8F?=
 =?UTF-8?q?=E8=BF=B0=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Descriptions/src/Descriptions.vue         | 69 +++++++++++++------
 src/views/Components/Descriptions.vue         |  6 +-
 2 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/src/components/Descriptions/src/Descriptions.vue b/src/components/Descriptions/src/Descriptions.vue
index 413ca751c..a92393cc5 100644
--- a/src/components/Descriptions/src/Descriptions.vue
+++ b/src/components/Descriptions/src/Descriptions.vue
@@ -1,5 +1,5 @@
 <script lang="tsx">
-import { ElCollapseTransition, ElDescriptions, ElDescriptionsItem, ElTooltip } from 'element-plus'
+import { ElCollapseTransition, ElTooltip, ElRow, ElCol } from 'element-plus'
 import { useDesign } from '@/hooks/web/useDesign'
 import { propTypes } from '@/utils/propTypes'
 import { ref, unref, PropType, computed, defineComponent } from 'vue'
@@ -38,7 +38,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  setup(props, { slots, attrs }) {
+  setup(props, { attrs }) {
     const getBindValue = computed((): any => {
       const delArr: string[] = ['title', 'message', 'collapse', 'schema', 'data', 'class']
       const obj = { ...attrs, ...props }
@@ -108,26 +108,51 @@ export default defineComponent({
 
           <ElCollapseTransition>
             <div v-show={unref(show)} class={[`${prefixCls}-content`, 'p-20px']}>
-              <ElDescriptions {...unref(getBindValue)}>
-                {{
-                  extra: () => (slots['extra'] ? slots['extra']() : props.extra),
-                  default: () => {
-                    return props.schema.map((item) => {
-                      return (
-                        <ElDescriptionsItem key={item.field} {...getBindItemValue(item)}>
-                          {{
-                            label: () => (item.slots?.label ? item.slots?.label(item) : item.label),
-                            default: () =>
-                              item.slots?.default
-                                ? item.slots?.default(props.data)
-                                : get(props.data, item.field) ?? defaultData
-                          }}
-                        </ElDescriptionsItem>
-                      )
-                    })
-                  }
-                }}
-              </ElDescriptions>
+              <ElRow
+                gutter={0}
+                {...unref(getBindValue)}
+                class="outline-1px outline-[var(--el-border-color-lighter)] outline-solid"
+              >
+                {props.schema.map((item) => {
+                  return (
+                    <ElCol
+                      key={item.field}
+                      span={item.span || 24 / props.column}
+                      class="flex items-stretch"
+                    >
+                      {props.direction === 'horizontal' ? (
+                        <div class="flex items-stretch bg-[var(--el-fill-color-light)] outline-1px outline-[var(--el-border-color-lighter)] outline-solid flex-1">
+                          <div
+                            {...getBindItemValue(item)}
+                            class="w-120px text-left px-8px py-11px font-700 color-[var(--el-text-color-regular)] border-r-1px border-r-[var(--el-border-color-lighter)] border-r-solid "
+                          >
+                            {item.label}
+                          </div>
+                          <div class="flex-1 px-8px py-11px bg-[var(--el-bg-color)] color-[var(--el-text-color-primary)] text-size-14px">
+                            {item.slots?.default
+                              ? item.slots?.default(props.data)
+                              : get(props.data, item.field) ?? defaultData}
+                          </div>
+                        </div>
+                      ) : (
+                        <div class="bg-[var(--el-fill-color-light)] outline-1px outline-[var(--el-border-color-lighter)] outline-solid flex-1">
+                          <div
+                            {...getBindItemValue(item)}
+                            class="text-left px-8px py-11px font-700 color-[var(--el-text-color-regular)] border-b-1px border-b-[var(--el-border-color-lighter)] border-b-solid"
+                          >
+                            {item.label}
+                          </div>
+                          <div class="flex-1 px-8px py-11px bg-[var(--el-bg-color)] color-[var(--el-text-color-primary)] text-size-14px">
+                            {item.slots?.default
+                              ? item.slots?.default(props.data)
+                              : get(props.data, item.field) ?? defaultData}
+                          </div>
+                        </div>
+                      )}
+                    </ElCol>
+                  )
+                })}
+              </ElRow>
             </div>
           </ElCollapseTransition>
         </div>
diff --git a/src/views/Components/Descriptions.vue b/src/views/Components/Descriptions.vue
index b30b9b27d..4b96bf684 100644
--- a/src/views/Components/Descriptions.vue
+++ b/src/views/Components/Descriptions.vue
@@ -42,7 +42,8 @@ const schema = reactive<DescriptionsSchema[]>([
   },
   {
     field: 'addr',
-    label: t('descriptionsDemo.addr')
+    label: t('descriptionsDemo.addr'),
+    span: 24
   }
 ])
 
@@ -125,7 +126,8 @@ const schema2 = reactive<DescriptionsSchema[]>([
           </ElFormItem>
         )
       }
-    }
+    },
+    span: 24
   }
 ])