From 998ae966096b9f87b38397fa1c93d6f6d06a3d39 Mon Sep 17 00:00:00 2001
From: D-xuanmo <me@xuanmo.xin>
Date: Sat, 25 May 2024 18:27:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(Cell):=20=E5=8D=95=E5=85=83=E6=A0=BC?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=A0=87=E9=A2=98=E5=9E=82=E7=9B=B4=E5=B1=85?=
 =?UTF-8?q?=E4=B8=AD=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/src/pages/components/common/cell.md             |  1 +
 packages/dl-common/src/cell/cell.tsx                 |  3 ++-
 packages/dl-common/src/cell/demo/index.vue           |  2 ++
 packages/dl-common/src/cell/props.ts                 |  7 +++++++
 packages/dl-common/src/cell/style.scss               |  5 +++++
 packages/dl-common/src/form/components/form-item.vue | 11 ++++++-----
 6 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/components/common/cell.md b/docs/src/pages/components/common/cell.md
index dfa238f0..7c843aa5 100644
--- a/docs/src/pages/components/common/cell.md
+++ b/docs/src/pages/components/common/cell.md
@@ -79,6 +79,7 @@ import { TipsOutlined, CloseOutlined } from '@xuanmo/dl-icons'
 |title-width|`string`|`80px`|标题宽度|N|
 |title-class|`string`|-|标题类名|N|
 |title-align|`string`|`left`|标题对齐方式，可选值：`left/center/right`|N|
+|title-vertical-center|`boolean`|`false`|标题垂直居中|N|
 |hide-title|`boolean`|`false`|是否隐藏标题|N|
 |required|`boolean`|`false`|是否显示必填标识|N|
 |content|`string`|-|内容|N|
diff --git a/packages/dl-common/src/cell/cell.tsx b/packages/dl-common/src/cell/cell.tsx
index 827919cb..06271c12 100644
--- a/packages/dl-common/src/cell/cell.tsx
+++ b/packages/dl-common/src/cell/cell.tsx
@@ -33,7 +33,8 @@ export default defineComponent({
     return () => {
       const titleClassName = [
         bem('title', {
-          [props.titleAlign]: props.titleAlign
+          [props.titleAlign]: props.titleAlign,
+          'title-vertical-center': props.titleVerticalCenter
         }),
         props.titleClass
       ]
diff --git a/packages/dl-common/src/cell/demo/index.vue b/packages/dl-common/src/cell/demo/index.vue
index 947c5431..4aa17cb5 100644
--- a/packages/dl-common/src/cell/demo/index.vue
+++ b/packages/dl-common/src/cell/demo/index.vue
@@ -6,6 +6,7 @@
     suffix="后缀"
     arrow
     required
+    client-type="PC"
   >
     <template #left-icon>
       <tips-outlined size="small" color="#f00" />
@@ -21,6 +22,7 @@
     suffix="后缀"
     arrow
     required
+    client-type="PC"
     layout="vertical"
   >
     <template #left-icon>
diff --git a/packages/dl-common/src/cell/props.ts b/packages/dl-common/src/cell/props.ts
index d2b2ab63..33047662 100644
--- a/packages/dl-common/src/cell/props.ts
+++ b/packages/dl-common/src/cell/props.ts
@@ -13,6 +13,13 @@ export const CELL_PROPS = {
     type: String as PropType<HorizontalAlignType>,
     default: 'left'
   },
+  /**
+   * 标题垂直居中
+   */
+  titleVerticalCenter: {
+    type: Boolean,
+    default: false
+  },
   hideTitle: Boolean,
   required: Boolean,
   content: String as PropType<string | undefined>,
diff --git a/packages/dl-common/src/cell/style.scss b/packages/dl-common/src/cell/style.scss
index c79dbdb2..b471f3f6 100644
--- a/packages/dl-common/src/cell/style.scss
+++ b/packages/dl-common/src/cell/style.scss
@@ -130,12 +130,17 @@
         vertical-align: middle;
       }
     }
+
+    &--title-vertical-center {
+      align-self: center;
+    }
   }
 
   &__content {
     flex: 1;
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
     @include text-align;
 
     #{$parent} {
diff --git a/packages/dl-common/src/form/components/form-item.vue b/packages/dl-common/src/form/components/form-item.vue
index b89b8a76..92a79bca 100644
--- a/packages/dl-common/src/form/components/form-item.vue
+++ b/packages/dl-common/src/form/components/form-item.vue
@@ -1,16 +1,17 @@
 <template>
   <d-cell
     v-if="model.dataKey && model.layout.container !== false"
-    :class="itemClassName"
     content-align="left"
-    :title-width="formProps.labelWidth"
-    :layout="model.layout.layout || formProps.layout"
-    :hide-title="formProps.hideLabel || model.hideLabel"
+    :class="itemClassName"
     :colon="formProps.colon"
     :round="formProps.round"
     :border="formProps.border"
-    :client-type="formProps.clientType"
     :description="model.description"
+    :title-width="formProps.labelWidth"
+    :client-type="formProps.clientType"
+    :layout="model.layout.layout || formProps.layout"
+    :hide-title="formProps.hideLabel || model.hideLabel"
+    :title-vertical-center="model.layout.titleVerticalCenter"
   >
     <template #title>
       <span