style(customer-archive): 统一客户档案页及弹窗底部按钮样式与对齐规则

- 按新制定的项目模块按钮底栏标准调整 customer-archive 页面及相关弹窗的 footer 样式
- 修改按钮顺序及样式,确保返回/取消居左,保存按钮为蓝描边 plain,提交和主操作按钮为深蓝实心
- 将子弹窗按钮容器对齐方式由居中改为 flex-end,统一右对齐布局
- 删除底部按钮 success 绿样式,全部主操作使用深蓝实心 primary 样式
- 调整部分按钮显示逻辑及文本,增强阅读顺序和视觉层级感
- 更新 SCSS 样式以匹配新布局和对齐规则
- 调整全局输入框及下拉框 placeholder 颜色,加深至 #909399 保持视觉一致性
- 在 MEMORY.md
This commit is contained in:
2026-08-26 18:16:28 +08:00
parent bfb8659cd8
commit 201ca245a7
4 changed files with 91 additions and 23 deletions
+37
View File
@@ -146,3 +146,40 @@ vehicle/driver/ship 与 customer-archive 等本就是 14px(含 !important
- `settlement/components/transport-reconciliation-editor.vue` — 两个 plain 中间步骤 + 完成对账 实心,层级清晰。 - `settlement/components/transport-reconciliation-editor.vue` — 两个 plain 中间步骤 + 完成对账 实心,层级清晰。
**沉淀**: `MEMORY.md` 新增「弹窗 / 独立表单页底栏按钮统一规则」一节,作为新页面 footer 写法标准。 **沉淀**: `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
<div class="xxx-dialog__footer-actions">
<!-- 最左:信息聚合(如总分合计、统计)用 flex:1 自己推 -->
<!-- 次要:默认描边灰按钮 -->
<el-button @click="close">返回</el-button>
<!-- 中间:浅蓝实心 plain -->
<el-button type="primary" plain @click="saveDraft">保存</el-button>
<!-- 主操作:蓝实心 -->
<el-button type="primary" @click="submit">提交</el-button>
</div>
```
左→右阅读顺序:辅助信息聚合 → 次要 → 中间步骤 → 主操作。视觉权重递增,颜色从「灰 → 蓝描边 → 蓝实心」。
+13 -6
View File
@@ -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 档** - **颜色层级 3 档**
| 语义 | type | 备注 | | 语义 | type | 备注 |
| --- | --- | --- | | --- | --- | --- |
| 次要(返回 / 取消) | 不写 type(默认) | 灰描边 | | 次要(返回 / 取消 / 关闭) | 不写 type(默认) | 灰描边 |
| 中间步骤(保存草稿 / 按匹配结果更新 | `type="primary" plain` | 蓝描边 | | 中间步骤(保存草稿 / 按匹配结果更新) | `type="primary" plain` | 蓝描边 |
| 主操作(提交 / 完成对账 / 确认) | `type="primary"` | 蓝实心 | | 主操作(提交 / 完成对账 / 复评确认) | `type="primary"` | 蓝实心 |
- **禁区**保存草稿和主操作不允许同为 `type="primary"`,否则两个蓝实心按钮无视觉层级。 - **禁区**
- **生效页面**`business/project-apply.vue`footer + 变更 footer)、`payment/invoice-receipt-form.vue``payment/invoice-application-form.vue` - 保存草稿和主操作不允许同为 `type="primary"`,否则两个蓝实心无视觉层级
- **已合规不需要改**`settlement/components/pre-settlement-editor.vue`(保存 default + 提交 primary)、`settlement/components/transport-reconciliation-editor.vue`(两个 plain 中间步骤 + 完成对账 实心 - 主操作禁止用 `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` - `src/components/section-card/main.vue`
+24
View File
@@ -1062,3 +1062,27 @@
.el-select__tags-text { .el-select__tags-text {
font-size: var(--el-form-label-font-size); font-size: var(--el-form-label-font-size);
} }
// ============ 加深输入框 / 下拉框占位符颜色 ============
// 客户反馈默认 placeholder 灰色(#a8abb2)太浅,统一加深一档到 #909399Element 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;
}
+17 -17
View File
@@ -800,12 +800,12 @@
</el-dialog> </el-dialog>
<div class="archive-form__footer"> <div class="archive-form__footer">
<el-button v-if="!isArchivePage || readonly" @click="closeArchive"> <!-- 次要:独立页返回 / 只读关闭 / 弹窗取消 -->
{{ isArchivePage ? '返回' : readonly ? '关闭' : '取消' }} <el-button @click="closeArchive">{{
</el-button> readonly ? '关闭' : isArchivePage ? '返回' : '取消'
<el-button type="primary" v-if="!readonly" @click="saveArchive">保存</el-button> }}</el-button>
<el-button type="success" v-if="!readonly" @click="saveAndSubmitArchive">提交</el-button> <el-button type="primary" plain v-if="!readonly" @click="saveArchive">保存</el-button>
<el-button v-if="!readonly && !isArchivePage" @click="closeArchive">返回</el-button> <el-button type="primary" v-if="!readonly" @click="saveAndSubmitArchive">提交</el-button>
</div> </div>
</component> </component>
@@ -866,8 +866,8 @@
</section-card> </section-card>
<template #footer> <template #footer>
<div class="contact-dialog__footer-actions"> <div class="contact-dialog__footer-actions">
<el-button type="primary" @click="saveContact">保存</el-button>
<el-button @click="contactBox = false">返回</el-button> <el-button @click="contactBox = false">返回</el-button>
<el-button type="primary" plain @click="saveContact">保存</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
@@ -964,8 +964,8 @@
</section-card> </section-card>
<template #footer> <template #footer>
<div class="receipt-dialog__footer-actions"> <div class="receipt-dialog__footer-actions">
<el-button type="primary" @click="saveReceipt">保存</el-button>
<el-button @click="receiptBox = false">返回</el-button> <el-button @click="receiptBox = false">返回</el-button>
<el-button type="primary" plain @click="saveReceipt">保存</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
@@ -1084,8 +1084,8 @@
</el-form> </el-form>
<template #footer> <template #footer>
<div class="invoice-dialog__footer-actions"> <div class="invoice-dialog__footer-actions">
<el-button type="primary" @click="saveInvoice">保存</el-button>
<el-button @click="invoiceBox = false">返回</el-button> <el-button @click="invoiceBox = false">返回</el-button>
<el-button type="primary" plain @click="saveInvoice">保存</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
@@ -1230,7 +1230,7 @@
</el-input> </el-input>
</template> </template>
<template v-else> <template v-else>
<div class="score-standard-cell__label">请选择:</div> <!-- <div class="score-standard-cell__label">请选择:</div>-->
<el-select <el-select
v-model="detail.selectedOption" v-model="detail.selectedOption"
filterable filterable
@@ -1347,7 +1347,8 @@
<span>自评:{{ formatScoreValue(currentScore.selfScore) }}分</span> <span>自评:{{ formatScoreValue(currentScore.selfScore) }}分</span>
<span>复评:{{ formatScoreValue(currentScore.reviewScore) }}分</span> <span>复评:{{ formatScoreValue(currentScore.reviewScore) }}分</span>
</div> </div>
<el-button type="primary" v-if="!readonly" @click="saveScoreDetail">保存</el-button> <el-button @click="scoreBox = false">返回</el-button>
<el-button type="primary" plain v-if="!readonly" @click="saveScoreDetail">保存</el-button>
<el-button <el-button
v-if="!readonly && hasPermission('customer_type_re_cert')" v-if="!readonly && hasPermission('customer_type_re_cert')"
type="primary" type="primary"
@@ -1355,7 +1356,6 @@
> >
复评确认 复评确认
</el-button> </el-button>
<el-button @click="scoreBox = false">返回</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
@@ -4788,7 +4788,7 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
min-height: 104px; //min-height: 104px;
padding: 8px 24px; padding: 8px 24px;
} }
@@ -4808,7 +4808,7 @@ export default {
} }
:deep(.el-table__body td) { :deep(.el-table__body td) {
min-height: 112px; //min-height: 112px;
color: #303133; color: #303133;
} }
@@ -4871,7 +4871,7 @@ export default {
.contact-dialog__footer-actions { .contact-dialog__footer-actions {
display: flex; display: flex;
justify-content: center; justify-content: flex-end;
gap: 12px; gap: 12px;
} }
@@ -4884,13 +4884,13 @@ export default {
.receipt-dialog__footer-actions { .receipt-dialog__footer-actions {
display: flex; display: flex;
justify-content: center; justify-content: flex-end;
gap: 12px; gap: 12px;
} }
.invoice-dialog__footer-actions { .invoice-dialog__footer-actions {
display: flex; display: flex;
justify-content: center; justify-content: flex-end;
gap: 12px; gap: 12px;
} }