diff --git a/.workbuddy/memory/2026-08-26.md b/.workbuddy/memory/2026-08-26.md index b377cde..ec32b85 100644 --- a/.workbuddy/memory/2026-08-26.md +++ b/.workbuddy/memory/2026-08-26.md @@ -146,3 +146,40 @@ vehicle/driver/ship 与 customer-archive 等本就是 14px(含 !important) - `settlement/components/transport-reconciliation-editor.vue` — 两个 plain 中间步骤 + 完成对账 实心,层级清晰。 **沉淀**: `MEMORY.md` 新增「弹窗 / 独立表单页底栏按钮统一规则」一节,作为新页面 footer 写法标准。 + +## customer-archive 全部 footer 同步按新增项目模块标准对齐 + +**问题**: 主人指出客户档案页面 `/vehicle/customer-archive/form?name=新增客商档案` 没有按统一规则调整, +并明确要求「浮动页面底部、按钮区域靠右对齐,返回在第一个,中间的用浅蓝色,最后一个是 primary 深蓝色」, +参考新增项目模块 `/business/project-apply/form?mode=add`。 + +### customer-archive.vue 共 5 处 footer 改动 + +- `archive-form__footer` (802-809) 原状「取消/返回 + 保存 primary + 提交 success 绿」混合 4 按钮。改为 `[返回/取消/关闭] + 保存 plain + 提交 primary`,并删掉「success 绿」换成 primary 深蓝。 +- `contact-dialog` (867-870) 原状 `[保存 primary][返回]`,容器居中。改为 `[返回][保存 plain]`,容器 flex-end。 +- `receipt-dialog` (965-969) 同上模式。 +- `invoice-dialog` (1085-1089) 同上模式。 +- `score-detail-dialog` (1343-1359) 原状 total 左 + `[保存 primary][复评确认 primary][返回]`。改为 total 左 + `[返回][保存 plain][复评确认 primary]`。 + +### customer-archive.vue SCSS 同步 + +- `.contact-dialog__footer-actions` `justify-content: center` 改 `flex-end`。 +- `.receipt-dialog__footer-actions` 同上。 +- `.invoice-dialog__footer-actions` 同上。 +- `.archive-form__footer` 维持 flex-end 不变(独立页 `.archive-page-form &` 下 `position: fixed` 浮动底部已经写好)。 + +### 顺序小结(标准模板) + +```vue + +``` + +左→右阅读顺序:辅助信息聚合 → 次要 → 中间步骤 → 主操作。视觉权重递增,颜色从「灰 → 蓝描边 → 蓝实心」。 diff --git a/.workbuddy/memory/MEMORY.md b/.workbuddy/memory/MEMORY.md index 341d505..d763baf 100644 --- a/.workbuddy/memory/MEMORY.md +++ b/.workbuddy/memory/MEMORY.md @@ -39,15 +39,22 @@ ### 弹窗 / 独立表单页底栏按钮统一规则 - **排序**:从左到右按次→主排(次要居左、主操作居右),主操作永远放最后。 - 顺序模板:`[可选辅助工具(如同步/导入)][返回/取消][保存草稿][提交/确认]` +- **容器布局**:`display:flex; justify-content:flex-end; gap:12px;`。弹窗关闭按钮继承 Element Plus 自带 `.el-dialog__footer` 全局规则(见上条),独立页用 `.archive-form__footer` 配 `.archive-page-form & { position:fixed; right:0; left:230px; bottom:0; z-index:10; margin:0; padding:12px 24px; border-top:1px solid #eff1f7; background:#fff; box-shadow:0 -2px 8px rgba(0,0,0,.06); }`。 - **颜色层级 3 档**: | 语义 | type | 备注 | | --- | --- | --- | - | 次要(返回 / 取消) | 不写 type(默认) | 灰描边 | - | 中间步骤(保存草稿 / 按匹配结果更新等) | `type="primary" plain` | 蓝描边 | - | 主操作(提交 / 完成对账 / 确认) | `type="primary"` | 蓝实心 | -- **禁区**:保存草稿和主操作不允许同为 `type="primary"`,否则两个蓝实心按钮无视觉层级。 -- **生效页面**:`business/project-apply.vue`(footer + 变更 footer)、`payment/invoice-receipt-form.vue`、`payment/invoice-application-form.vue`。 -- **已合规不需要改**:`settlement/components/pre-settlement-editor.vue`(保存 default + 提交 primary)、`settlement/components/transport-reconciliation-editor.vue`(两个 plain 中间步骤 + 完成对账 实心)。 + | 次要(返回 / 取消 / 关闭) | 不写 type(默认) | 灰描边 | + | 中间步骤(保存草稿 / 按匹配结果更新) | `type="primary" plain` | 蓝描边 | + | 主操作(提交 / 完成对账 / 复评确认) | `type="primary"` | 蓝实心 | +- **禁区**: + - 保存草稿和主操作不允许同为 `type="primary"`,否则两个蓝实心无视觉层级。 + - 主操作禁止用 `type="success"`(绿)。全站统一深蓝实心。 +- **生效页面**: + - `business/project-apply.vue`(footer + 变更 footer) + - `payment/invoice-receipt-form.vue`、`payment/invoice-application-form.vue` + - `vehicle/customer-archive.vue` 全部 5 处 footer(`archive-form__footer` 主表单页 + `contact-dialog`/`receipt-dialog`/`invoice-dialog` 子弹窗 + `score-detail-dialog` 含总分合计) +- **已合规未动**:`settlement/components/pre-settlement-editor.vue`、`settlement/components/transport-reconciliation-editor.vue`、`business/components/business-crud-page.vue`(保存 plain)、`business/temporary-credit-limit.vue`。 +- **复杂 footer 例外**:当 footer 需要在按钮组左侧展示「总分合计 / 数量统计」等聚合信息时,块用 `flex:1` 推自己到最左,按钮组按上述规则排在右半边(参考 `score-detail-dialog`)。 ## 关键文件 - `src/components/section-card/main.vue` diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index e1e228d..fa978b1 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -1062,3 +1062,27 @@ .el-select__tags-text { font-size: var(--el-form-label-font-size); } + +// ============ 加深输入框 / 下拉框占位符颜色 ============ +// 客户反馈默认 placeholder 灰色(#a8abb2)太浅,统一加深一档到 #909399(Element Plus 次级文字标准灰)。 +// 同时覆盖原生 input/textarea 与 el-select 的占位文本,保证全站一致。 +// 注:.el-select__placeholder.is-transparent 是聚焦未选值时的透明态,无需处理。 +.el-input__inner, +.el-textarea__inner { + &::-webkit-input-placeholder { + color: #909399 !important; + } + &::-moz-placeholder { + color: #909399 !important; + } + &:-ms-input-placeholder { + color: #909399 !important; + } + &::placeholder { + color: #909399 !important; + } +} + +.el-select__placeholder { + color: #909399 !important; +} diff --git a/src/views/vehicle/customer-archive.vue b/src/views/vehicle/customer-archive.vue index c807799..7eea91e 100644 --- a/src/views/vehicle/customer-archive.vue +++ b/src/views/vehicle/customer-archive.vue @@ -800,12 +800,12 @@ @@ -866,8 +866,8 @@ @@ -964,8 +964,8 @@ @@ -1084,8 +1084,8 @@ @@ -1230,7 +1230,7 @@ @@ -4788,7 +4788,7 @@ export default { display: flex; flex-direction: column; justify-content: center; - min-height: 104px; + //min-height: 104px; padding: 8px 24px; } @@ -4808,7 +4808,7 @@ export default { } :deep(.el-table__body td) { - min-height: 112px; + //min-height: 112px; color: #303133; } @@ -4871,7 +4871,7 @@ export default { .contact-dialog__footer-actions { display: flex; - justify-content: center; + justify-content: flex-end; gap: 12px; } @@ -4884,13 +4884,13 @@ export default { .receipt-dialog__footer-actions { display: flex; - justify-content: center; + justify-content: flex-end; gap: 12px; } .invoice-dialog__footer-actions { display: flex; - justify-content: center; + justify-content: flex-end; gap: 12px; }