From 36cc9c751cd77231394012c81b1980edf3aef05e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Thu, 27 Aug 2026 19:45:14 +0800 Subject: [PATCH 1/2] =?UTF-8?q?style(ui):=20=E4=BC=98=E5=8C=96=E5=BF=85?= =?UTF-8?q?=E5=A1=AB=E6=98=9F=E5=8F=B7=E4=B8=8E=E5=A4=9A=E8=A1=8Clabel?= =?UTF-8?q?=E7=9A=84=E5=AF=B9=E9=BD=90=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修复客商档案中必填项红色星号 * 与首行文字未垂直居中的问题 - 全站统一必填星号 * 的垂直居中规则,兼容单行与多行 label - 临时额度管理弹窗多行 label 调整星号与首字对齐,避免视觉偏移 - 调整客户档案中信用评分表和附件描述布局,使字段间距合理且内容可编辑 - /business/project-apply 搜索栏项目负责人改为手动输入,优化模糊查询体验 - 新增项目编号、客户名称、下游承运商三个搜索字段,增加查询灵活性 - 调整项目申请按钮权限顺序,新增及重大项目补录按钮功能互换 - 注释隐藏tags.vue中avue-tags相关菜单按钮,简化界面 - 修改vite开发服务器端口和代理配置,指向内网环境方便调试 - 更新 pnpm-lock.yaml 应用 avue 相关补丁,保证依赖兼容性 --- .workbuddy/memory/2026-08-27.md | 40 ++++++++++++ pnpm-lock.yaml | 9 ++- src/option/business/project-apply.js | 40 ++++-------- src/page/index/tags.vue | 47 +++++++------- src/styles/element-ui.scss | 12 ++++ src/views/business/project-apply.vue | 16 ++--- src/views/business/temporary-credit-limit.vue | 27 +++++++- .../vehicle/credit-score-quantification.vue | 2 +- src/views/vehicle/customer-archive.vue | 65 ++++++++++++++----- vite.config.mjs | 26 ++++---- 10 files changed, 191 insertions(+), 93 deletions(-) diff --git a/.workbuddy/memory/2026-08-27.md b/.workbuddy/memory/2026-08-27.md index facc5bd..00f79ae 100644 --- a/.workbuddy/memory/2026-08-27.md +++ b/.workbuddy/memory/2026-08-27.md @@ -56,3 +56,43 @@ - 「船舶所有权证书」5 个字段:第一行 `登记号码/初次登记号码/船舶所有人/取得所有权日期` 4 列,第二行 `船舶识别号` 1 列(所有 `el-col :span="8"` → `:span="6"`)。 - 「内河船舶安全与环保证书」4 个字段:合并为一行 4 列(`总吨/净吨/船检登记号/船舶类型`),`el-col :span="8"` → `:span="6"`。 - 未改动:船舶国籍证书、最低安全配员证书(日期范围,保持 `span=16` 整行)、光船租赁登记证明书、船舶营业运输证书(用户未要求)。 + +## 客商档案必填星号 * 与首行文字垂直居中 +- 起因:用户截图「新增客商档案」基础信息分组,指出必填项 label(如「统一社会信用代码」折行后)红色星号 * 未与首行文字垂直居中对齐。 +- 根因:Element Plus `.el-form-item__label` 默认 `inline-flex + align-items: flex-start`,`:before` 星号高度(`1em`≈14px)与文字行盒(`line-height:18px`)不一致,多行时错位。 +- 改动(`src/views/vehicle/customer-archive.vue` 的 `.archive-form :deep` 块): + - `:deep(.el-form-item.is-required .el-form-item__label)` 加 `align-items: flex-start; padding-top:7px; padding-bottom:7px`(7px=(32-18)/2,使内容下沉到 label 中线)。 + - `:deep(.el-form-item.is-required .el-form-item__label::before)` 加 `display:inline-block; height:18px; line-height:18px; margin-right:4px`(高度=行高,参与行内对齐)。 +- 范围:仅作用于 `.archive-form` 作用域(archive-form + dialog-form-label-fixed),不影响全站弹窗;与 `dialog-form-label.js` 的列宽对齐工具兼容。 +- 待观察:刷新 dev 验证「统一社会信用代码」等折行字段星号是否视觉居中;若其它模块(payment/settlement 等)也有类似折行 label,可复制同样规则或提至 `element-ui.scss` 全局。 + +## 必填星号 * 垂直居中规则全站化 +- 起因:用户确认客商档案星号居中效果 OK,要求全站统一。 +- 关键差异:全站默认 label 是 `height:32px` 固定高度,客商档案 label 是 `height:auto + line-height:18px`,前者不能套用 `padding:7px` 下沉方案(会撑变形)。 +- 改动:`src/styles/element-ui.scss` 新增全局规则 `.el-form-item.is-required .el-form-item__label::before { display:inline-block; line-height:inherit; margin-right:4px }`(让星号行高跟随 label,flex-start 下与首行文字等高居中),兼容单行(32px)与多行(auto+18px)两种场景。 +- 客商档案 `customer-archive.vue` 的 scoped 规则(含 `padding:7px` 下沉)保留不动,scoped 特异性更高会覆盖全局;两处机制不同但视觉目标一致。 +- 验收:刷新各弹窗(payment/settlement/transportCapacity 等)验证必填项星号与首行/单行文字垂直居中。 + +## 临时额度管理弹窗「换行 label 必填星号与首字对齐」 +- 起因:用户截图 `/business/temporary-credit-limit` 新增弹窗,指出 `* 申请临时额度(万元)` 这种 label 在弹窗内被强制折两行(label `width: calc(6em + 24px) + word-break + overflow-wrap: anywhere`)时,红色 `*` 落在了第一行与"(万元)"之间的中部(不再与首字"申"平行)。 +- 根因:弹窗 `.temporary-credit-limit-dialog .el-form-item { align-items: center }` 让 label 整体垂直居中于 input。label 高度被多行内容撑到 ~36px 时,`::before` 星号和"申"字是 label 内的两个匿名 flex items,默认 `align-items: flex-start`,但 form-item 外部的 `align-items:center` 把 label 拉到了 input 中线,导致 `*` 视觉偏移。配合 Element Plus 默认 label `inline-flex + height:32px`,多行 label 视觉反而被截一半。 +- 改动(`src/views/business/temporary-credit-limit.vue` 第 808-844 行 普通 ` -