feat(business-crud-page): 统一独立表单页顶部页面标题样式及展示
- 独立表单页 shipping-template、transport-plan、waybill-manage 加入统一的 archive-page-form__title 页面标题支持 - 全局样式抽离 archive-page-form__title 至 element-ui.scss,实现统一样式和竖条修饰 - loading-manage/form 页面新增页标题展示,保持风格一致 - master-order 编辑模式下新增页面标题支持,动态显示编辑或新增总单 - business-crud-page 组件新增 formPageTitle 属性,支持父级传递页面标题数据 - 优化多个业务页面表格和弹窗样式,调整列宽及边框圆角阴影,提高视觉一致性 - 删除 customer-archive.vue 中重复本地标题样式定义,使用全局统一样式 - 全站弹窗分组组件 section-card 相关设计规范文档更新,强化统一卡片风格 - 移除 cargo-type.vue 添加 "新建" 按钮逻辑,调整按钮显示权限 - 统一所有新增弹窗的底部操作区浮动效果及内容区最大高度限制,提升交互体验
This commit is contained in:
@@ -35,3 +35,26 @@
|
||||
- 合同表单无独立页面标题(page-header 区域在 breadcrumb 处,不在 main 标题区)
|
||||
- 行为验证码:登录页拼图/旋转求解基础设施已搭好——`/tmp/captcha_solve.py`(CORS 修复后支持 puzzle+rotate 双模式)、`/tmp/ab-install/node_modules/.bin/agent-browser --browser-channel chrome`。登录流程:访问 → 切"账号密码登录" → 点登录 → 检测 `.puzzle-stage`/`.rotate-image` → POST 至 http://127.0.0.1:8765 → 取 xDisp/angle → JS PointerEvent 模拟拖动 .track-handle 即可。
|
||||
- 提交:63256a9 feat(business-crud-page): 合同管理表单页改为多分组卡片风格(1 file, +86/-2)。未提交改动(process-config.js、element-ui.scss、master-order-editor.vue、loading-manage.vue、project-apply.vue、formal-settlement.vue、customer-archive.vue)与本任务无关,未纳入。
|
||||
|
||||
## shipping-template 独立表单页加 archive-page-form__title(参考 customer-archive)
|
||||
- 需求:独立表单页 `/business/shipping-template/form?mode=add&name=新运费发货模板` 顶部缺页面标题,参考 customer-archive 的 `.archive-page-form__title` 加标题。
|
||||
- 改动(单文件 `src/views/business/components/business-crud-page.vue`):
|
||||
1. `PageAvueForm`(5578 行)声明 `props.formPageTitle`,render 时若非空则先 push `<div class="archive-page-form__title">{{ title }}</div>` 再渲染 avue-form(title 在表单容器 `shipping-template-dialog` 内、avue-form 之前)。
|
||||
2. 模板 `<component :is="crudContainer">` 新增 `:form-page-title="isStandaloneFormPage ? formPageTitle : undefined"`。
|
||||
3. 新增 computed `formPageTitle()`:`isStandaloneFormPage && isShippingTemplatePage` 时返回 `this.$route.query.name || '新增'/'编辑' + config.title`,否则 ''。
|
||||
4. 样式(scoped 末尾,用 `:global` 因为 title div 由 PageAvueForm 函数式组件渲染、无 scoped 属性):`:global(.business-crud-page--form-page .archive-page-form__title)` 复制 customer-archive 的 18px/600/#303133 + margin-bottom:20px(::before 为空,与参考一致,仅纯文字标题)。
|
||||
- 仅作用于 shipping-template 独立表单页;其他独立表单页(waybill/transport-plan/contract)`formPageTitle` 返回 '',不受影响。
|
||||
|
||||
## transport-plan 独立表单页也加 archive-page-form__title
|
||||
- 需求:`/business/transport-plan/form?mode=add&name=新运费运输计划` 也要同样的页面标题。
|
||||
- 改动:`formPageTitle()` 条件由 `isStandaloneFormPage && isShippingTemplatePage` 改为 `isStandaloneFormPage && (isShippingTemplatePage || isTransportPlanPage)`(复用已有 `isTransportPlanPage` computed:`config.permission==='transport_plan'`)。标题文案取 `this.$route.query.name`(「新运费运输计划」)或回退「新增/编辑运输计划」。
|
||||
- 验证:Vite 2889 编译通过(HTTP 200,无错误)。
|
||||
- 验证:Vite 2889 编译通过(HTTP 200,无 transform/syntax 错误),HMR 生效。如需扩展到其他独立表单页,去掉 `isShippingTemplatePage` 限定即可。
|
||||
|
||||
## 将 .archive-page-form__title 全局化,并再加 waybill / loading-manage / master-order 三页
|
||||
- 需求:把页面标题扩展到 `/business/waybill-manage/form`、`/business/loading-manage/form`、`/business/master-order?mode=editor` 三页,并与 customer-archive / shipping-template / transport-plan 视觉统一。
|
||||
- **全局化样式**:`.archive-page-form__title` 原本分散在 `customer-archive.vue`(scoped)与 `business-crud-page.vue`(`:global`,::before 为空纯文字)。现统一提取到 `src/styles/element-ui.scss`(5b 段):18px/600/#303133 + margin-bottom:20px + `::before` 4px 主色竖条 + 8px 间距(补全竖条,与 section-card 卡头风格一致)。并删除上述两处本地重复定义。
|
||||
- **waybill-manage/form**:在 `business-crud-page.vue` 的 `formPageTitle()` 条件再并入 `isWaybillDetailLayout`(`config.permission==='waybill_manage'`),复用既有 computed。标题取 `query.name || '新增/编辑运单管理'`。
|
||||
- **loading-manage/form**:该路由直接映射到 `loading-manage.vue`(非 business-crud-page)。新增 computed `formPageTitle()`(`query.name || '新增/编辑配载管理'`),并在独立表单页的 `<component>` 内、body 之前加 `<div v-if="isStandaloneFormPage" class="archive-page-form__title">{{ formPageTitle }}</div>`。
|
||||
- **master-order?mode=editor**:`master-order.vue` 渲染 `master-order-editor.vue`。将 `<master-order-editor>` 包进 `<template v-else-if="mode==='editor'">`,前置 `<div class="archive-page-form__title">{{ masterEditorTitle }}</div>`;新增 computed `masterEditorTitle`(`routeId ? '编辑总单' : '新增总单'`)。
|
||||
- 验证:4 个 SFC + element-ui.scss 经 Vite 2889 编译均 HTTP 200、无 transform/syntax 错误。
|
||||
|
||||
Reference in New Issue
Block a user