diff --git a/.workbuddy/memory/2026-08-06.md b/.workbuddy/memory/2026-08-06.md new file mode 100644 index 0000000..55fbaf2 --- /dev/null +++ b/.workbuddy/memory/2026-08-06.md @@ -0,0 +1,17 @@ +# 2026-08-06 + +## 复盘 src/views/business/project-apply.vue 弹窗 UI 规范 +- 主弹窗为**自定义 el-dialog + el-form**(非 Avue option 驱动),width 1440px、top 4vh、append-to-body、destroy-on-close。 +- 分区标题复用全局 `.dialog-section-title`(4px 主色竖条 + 8px 间距);页面将其改造为「白卡头 + 下方白内容卡」拼合方案(radius 6px + 淡阴影 0 1px 2px rgba(0,0,0,.04))。 +- 表单:label-position="right" / label-width="auto";两列 grid(`column-gap: 72px`);表单项 margin-bottom 16px;label min-width 160px。 +- 备注类 textarea 整行展示 + 200 字上限 + show-word-limit;金额/天数有非负与范围校验。 +- 底部按钮:非变更弹窗=取消/提交(右对齐);变更弹窗=提交/保存/关闭(左对齐)。 +- **与设计规范(AGENTS.md)对照**:基本符合 4.8 弹窗表单规范;但本页 scoped 用 `white-space: normal` 覆盖了全局 `.el-dialog .el-form-item__label { white-space: nowrap }`,允许长标签换行(与全局「label 不换行」取向不同);两列 grid 统一 min-width 160px,未严格「按列分别计算 label 宽度」。 + +## 将 project-apply 弹窗标准推广为「全项目通用标准」 +用户要求把 project-apply 弹窗视觉(灰底 + 分组白卡 + 标题在卡内)复制到其他页面。落地方式(已执行): +- 新增可复用组件 `src/components/section-card/main.vue`:白卡 + 标题在卡头(4px 主色竖条 + 8px 间距),支持 `title` prop 与 `#title`/`#extra` slot;已在 `src/main.js` 全局注册为 ``。 +- 在 `src/styles/element-ui.scss` 末尾新增全局标准:① `.el-dialog__body` 统一灰底 `#f5f6fa`(影响全项目所有弹窗);② `.el-dialog .avue-form` 自动包白卡(Avue 默认增删改弹窗无需改 option 即统一);③ `.el-dialog .avue-form__group` 分组白卡(option.group 渲染为标题在卡内);④ 弹窗内 `.el-form-item` 默认 16px 间距;⑤ `.section-card` 全局样式;⑥ `.form-grid-2` 两列栅格工具类(column-gap 72px)。 +- 应用落地:business 模块自定义弹窗——`common-route.vue` 的「选择常用地址」弹窗用 section-card 包成「查询条件/常用地址」两组;`loading-manage.vue` 主弹窗 6 个分区全部改用 ``;`common-cargo.vue` 导入弹窗经全局 `.el-dialog .avue-form` 规则自动获得白卡。`project-apply.vue` 本身作为参照未改(其 scoped 样式已符合,全局灰底与其一致)。 +- 验证:`vite build` 失败为仓库既有问题(`waybill-import-dialog.vue` 引入的 `xlsx` 依赖缺失),与本次改动无关;改用 `@vue/compiler-sfc` 编译三个改动 .vue(均 OK)+ sass 编译 `element-ui.scss`(OK)。 +- 注意:其他模块的**自定义弹窗**需按同样方式用 `` 包裹各组(灰底已由全局规则自动生效);如需继续推进其余模块可照此模式批量处理。 diff --git a/src/components/section-card/main.vue b/src/components/section-card/main.vue new file mode 100644 index 0000000..6035868 --- /dev/null +++ b/src/components/section-card/main.vue @@ -0,0 +1,28 @@ + + + diff --git a/src/main.js b/src/main.js index ebde379..50eff96 100644 --- a/src/main.js +++ b/src/main.js @@ -39,6 +39,8 @@ import codeSetting from './views/tool/codesetting.vue'; import formSetting from './views/tool/formsetting.vue'; import tenantPackage from './views/system/tenantpackage.vue'; import tenantDatasource from './views/system/tenantdatasource.vue'; +// 通用弹窗分组白卡(灰底弹窗内使用,标题在卡内) +import sectionCard from './components/section-card/main.vue'; window.$crudCommon = crudCommon; debug(); @@ -61,6 +63,7 @@ app.component('codeSetting', codeSetting); app.component('formSetting', formSetting); app.component('tenantPackage', tenantPackage); app.component('tenantDatasource', tenantDatasource); +app.component('sectionCard', sectionCard); app.config.globalProperties.$app = app; app.config.globalProperties.$dayjs = dayjs; app.config.globalProperties.website = website; diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index 3e7af21..297b2f8 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -207,6 +207,101 @@ justify-content: center; } +// ===================================================================== +// 弹窗标准(与 business/project-apply 弹窗视觉一致) +// 灰底弹窗体 + 分组白卡(标题融入卡头,4px 主色竖条 + 8px 间距) +// ===================================================================== + +// 1) 所有弹窗内容区统一灰底 +.el-dialog__body { + background-color: #f5f6fa; +} + +// 2) Avue 默认弹窗表单自动包成白卡,无需逐页改 option 即统一标准 +.el-dialog .avue-form { + background: #fff; + border-radius: 6px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); + padding: 16px; +} + +// 3) Avue 弹窗内分组(option.group)渲染为白卡,标题在卡内 +.el-dialog .avue-form__group { + background: #fff; + border-radius: 6px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); + margin-bottom: 16px; + overflow: hidden; + + .avue-group__header { + border-bottom: none; + padding: 14px 16px 4px; + font-weight: 500; + color: #303133; + } + + .avue-group__item { + padding: 14px 16px 4px; + } +} + +// 4) 弹窗内表单项默认上下间距 16px(覆盖默认 18px / 22px) +.el-dialog .el-form-item { + margin-bottom: 16px; +} + +// 5) 通用分组白卡组件():标题融入卡头 +.section-card { + background: #fff; + border-radius: 6px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); + margin-bottom: 16px; + overflow: hidden; + + &:last-child { + margin-bottom: 0; + } + + &__header { + display: flex; + align-items: center; + gap: 8px; + padding: 14px 16px 4px; + font-weight: 500; + color: #303133; + } + + &__bar { + flex: none; + width: 4px; + height: 16px; + border-radius: 2px; + background-color: var(--el-color-primary); + } + + &__title { + flex: 1; + min-width: 0; + } + + &__extra { + margin-left: auto; + flex: none; + } + + &__body { + padding: 14px 16px 4px; + } +} + +// 6) 弹窗内两列表单栅格工具类(与 project-apply 一致) +.form-grid-2 { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + column-gap: 72px; + row-gap: 0; +} + .avue-crud__dialog .avue-dialog__footer > .el-button { margin-left: 12px; } diff --git a/src/views/business/common-route.vue b/src/views/business/common-route.vue index e34e93c..a99e45d 100644 --- a/src/views/business/common-route.vue +++ b/src/views/business/common-route.vue @@ -166,98 +166,102 @@ class="common-route-page__address-dialog" @opened="loadAddressList" > - + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + -
- -
+
+ +
+