From be2888d4289206a1c7649fbdbe423818b79503f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Wed, 9 Sep 2026 11:11:39 +0800
Subject: [PATCH] =?UTF-8?q?fix(styles):=20=E4=BF=AE=E5=A4=8D=E5=BF=85?=
 =?UTF-8?q?=E5=A1=AB=E6=98=9F=E5=8F=B7=E9=A6=96=E8=A1=8C=E5=AF=B9=E9=BD=90?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整 `.is-required .el-form-item__label` 采用 `align-items: normal` 实现星号首行对齐
- 覆盖 Element Plus 固定高度 `height: 32px` 为 `height: auto` 以支持内容自适应高度
- 保持 `align-self: center` 使单行 label 与输入框垂直居中，折行时星号贴首行
- 修改星号 `::before` 的高度为 `auto` 并继承行高，保证首行基线一致
- 修复多行 label 下星号因 flex 居中导致位置偏移的问题
- 兼容 label 多种位置（右、左、顶）及多行折行场景，影响 project-apply 等表单页
---
 .workbuddy/memory/2026-09-09.md |  9 ++++++++
 src/styles/element-ui.scss      | 37 ++++++++++++++++++---------------
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/.workbuddy/memory/2026-09-09.md b/.workbuddy/memory/2026-09-09.md
index 7a11bee..248b9fe 100644
--- a/.workbuddy/memory/2026-09-09.md
+++ b/.workbuddy/memory/2026-09-09.md
@@ -3,3 +3,12 @@
 - 根因：`element-ui.scss` 中 `.el-form-item--label-right .el-form-item__label { align-items:center }` 使 inline-flex label 的星号 `::before`（独立 flex 子项）在多行折行时被垂直居中。
 - 修复：label 改 `align-self:center`（整体仍随行垂直居中）+ `align-items:flex-start`（星号/文字首行齐平），覆盖 label-right/left/top 三种位置；旧 inline-block 注释已修正。
 - 影响页面：project-apply 独立表单页等所有多行 label 场景（弹窗内 `white-space:nowrap` 不受影响）。
+
+## 必填星号首行对齐：改用 align-items: normal（stretch 方案）
+- 最终写法（`src/styles/element-ui.scss`）：`.is-required .el-form-item__label { align-self:center; align-items:normal; }` + `::before { display:inline-block; height:auto; line-height:inherit; margin-right:4px }`。
+- 原理：stretch 让星号盒子在「换行时」被拉伸到 label 全高、内容从顶部排布 → 贴首行；单行时盒子=一行高，视觉不变（比 flex-start 更贴合「只换行才生效」）。
+- 前提：::before 高度必须 auto 且继承行高；label 不能是 固定 height + 等高 line-height，否则退化成居中，需 JS 判行数加 class。
+
+## 星号方案补丁（关键）
+- EP 的 `.el-form-item__label` 写死 `height:32px; line-height:32px`（项目只覆盖了 line-height:14px），导致 stretch 方案文字顶到 32px 盒子顶部、单行不居中。
+- 修复：`.is-required .el-form-item__label { height:auto; align-self:center; align-items:normal }`——height:auto 收缩到内容高 + align-self:center 行内居中 + normal(stretch) 仅换行时星号贴首行。
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index f9ca9fb..7eb6e4a 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -708,9 +708,9 @@
 .avue-crud .el-table__body-wrapper tr.el-table__row:nth-child(even) td.el-table__cell,
 .avue-crud .el-table__body-wrapper tr.el-table__row:nth-child(even) td.el-table-fixed-column--left,
 .avue-crud
-  .el-table__body-wrapper
-  tr.el-table__row:nth-child(even)
-  td.el-table-fixed-column--right {
+.el-table__body-wrapper
+tr.el-table__row:nth-child(even)
+td.el-table-fixed-column--right {
   background-color: #fafafa;
 }
 
@@ -1045,31 +1045,34 @@
 }
 
 .el-form-item--default .el-form-item__label {
-  //line-height: 14px;
+  line-height: 14px;
 }
-// ============ 必填星号 * 与 label 首行齐平（全局） ============
-// label 为 inline-flex，星号 ::before 与文字是两个独立 flex 子项；
-// 多行折行 label 若 align-items: center，星号会被垂直居中到第二行位置。
-// align-items: flex-start 让星号与文字首行齐平；
-// align-self: center 让 label 整体不随表单行(32px)拉伸，单行 label 仍与输入框垂直居中，视觉不变。
-.el-form-item--label-right .el-form-item__label,
-.el-form-item--label-left .el-form-item__label,
-.el-form-item--label-top .el-form-item__label {
+.el-form-item--label-right .el-form-item__label {
+  align-items: center;
+}
+// ============ 必填星号 * 与 label 首行齐平（仅换行时生效） ============
+// label 为 inline-flex，星号 ::before 与文字是两个独立 flex 子项。
+// align-items: normal（= stretch）：单行时星号盒子 = 一行高，位置不变；
+// 折行后星号盒子被拉伸到 label 全高，但其内部按 line-height 从顶部排布 → 星号停在第一行。
+// height: auto 覆盖 Element Plus 写死的 32px，让 label 收缩到内容高；
+// align-self: center 再让收缩后的 label 在表单行内垂直居中（单行与输入框对齐）。
+.is-required .el-form-item__label {
+  height: auto;
   align-self: center;
-  align-items: flex-start;
+  align-items: normal;
 }
 .el-form-item--default {
   margin-bottom: 14px;
 }
 
-// 辅助：星号跟随 label 行高，保证与首行文字基线一致（单行/多行通用）。
-// 注：真正的首行对齐由上方 .el-form-item__label 的 align-items: flex-start 完成；
-// 客商档案(customer-archive)的 label 为 auto 高度 + padding 下沉方案，scoped 特异性更高会覆盖本规则。
+// 配套：星号必须保持「高度 auto + 继承行高」，stretch 才会按首行排布；
+// 写死 height 或 line-height 与 height 相等时效果会退化成居中。
+// 注：客商档案(customer-archive)的 label 为 auto 高度 + padding 下沉方案，scoped 特异性更高会覆盖本规则。
 .el-form-item.is-required .el-form-item__label::before {
   display: inline-block;
+  height: auto;
   line-height: inherit;
   margin-right: 4px;
-  margin-top: 2px !important;
 }
 //.el-form-item {
 //  margin-bottom: 15px !important;