style(pagination): 优化分页组件上一页/下一页样式及环境配置说明
- 取消分页组件中上一页、下一页按钮的额外宽度设置,使其与页码按钮等宽 - 恢复上一页、下一页的原生箭头图标显示,取消自定义文字和隐藏图标的样式规则 - 更新分页相关的注释,明确首页/尾页按钮依旧由脚本控制不注入,上一页/下一页显示原生箭头 - 修改 .env.development 配置,增加 API 代理和跨域说明,避免直接使用绝对地址引发的 CORS 问题 - 优化 VITE_APP_API 配置为 /api,配合 Vite 代理减少跨域错误,保障开发环境稳定运行
This commit is contained in:
@@ -3,6 +3,8 @@
|
|||||||
VITE_APP_ENV = 'development'
|
VITE_APP_ENV = 'development'
|
||||||
|
|
||||||
#接口地址
|
#接口地址
|
||||||
|
# 开发环境建议填 [/api]:由下方 vite.config.mjs 的 proxy 同源转发到后端(172.16.203.228:8000),避免跨域(CORS)被浏览器拦截
|
||||||
|
# 如需直连线上绝对地址(如 http://172.16.203.228:8000/api),必须让后端 CORS 把 Allow-Origin 改为具体前端域名,不能用 `*`(配合 credentials 会被浏览器拒绝)
|
||||||
VITE_APP_API=/api
|
VITE_APP_API=/api
|
||||||
|
|
||||||
#调试参数
|
#调试参数
|
||||||
|
|||||||
18
.workbuddy/memory/2026-08-04.md
Normal file
18
.workbuddy/memory/2026-08-04.md
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
# 2026-08-04 工作记录
|
||||||
|
|
||||||
|
## 撰写《AI 辅助编程规范与实战示例》文档
|
||||||
|
- 应业主想了解"如何用 AI 编程"的需求,以 `src/views/base/cargo-type.vue`(货物类型模块)为实例,撰写对外说明文档。
|
||||||
|
- 产出文件:`/Users/gxwebsoft/VUE/tms-erp-web-ws/AI辅助编程规范与实战示例.md`
|
||||||
|
- 文档结构:协作流程总览 → AGENTS.md 规范条款 → cargo-type 模块实例拆解(三级文件分离、校验三处一致、审计字段用姓名、导入失败明细加工、样式规范)→ 人机协作人工兜底项 → 5 条经验 → 给业主的价值建议。
|
||||||
|
- 文档引用了真实代码片段:cargo-type.vue / option / api / utils/import-excel.js,强调需求卡 + AGENTS.md + 复用 utils 三件套作为"单一事实来源"。
|
||||||
|
|
||||||
|
## 生成 Word(.docx) 版本
|
||||||
|
- 用 docx-js(managed node workspace)将《AI 辅助编程规范与实战示例.md》转成 Word 文档:`/Users/gxwebsoft/VUE/tms-erp-web-ws/AI辅助编程规范与实战示例.docx`。
|
||||||
|
- 踩坑:docx-js 会在段落间注入非法空节点 `<0/>`(`<N/>`),导致 XML 不合法;后处理用正则剔除 `<\d+/>` 后重新校验通过。
|
||||||
|
- 生成脚本:`/Users/gxwebsoft/.workbuddy/binaries/node/workspace/gen_doc.js`(含标题/表格/代码块/项目符号样式)。
|
||||||
|
|
||||||
|
## 分页组件:上一页/下一页改为原生箭头图标
|
||||||
|
- 需求:全站不隐藏上一页/下一页,改显示原生箭头图标;首页/尾页保持不注入。
|
||||||
|
- 改动文件:`src/styles/element-ui.scss`(3 处历史遗留规则)、`src/utils/pagination.js`(注释同步)。
|
||||||
|
- 删除的遗留规则:①隐藏原生 `.el-icon` 箭头;②用 `::before` 注入「上一页/下一页」文字;③整体 `display:none` 隐藏 `.btn-prev/.btn-next`。首页/尾页仍由 pagination.js 增强器不注入,且各页面 layout 无 first/last。
|
||||||
|
- 效果:上一页/下一页显示 Element Plus 原生箭头(‹ ›),带边框与页码按钮视觉统一,hover 变主色,禁用态灰显。
|
||||||
12
.workbuddy/memory/2026-08-05.md
Normal file
12
.workbuddy/memory/2026-08-05.md
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
# 2026-08-05 工作记录
|
||||||
|
|
||||||
|
## 排查:改线上接口后前端"运行不了"(CORS 根因)
|
||||||
|
|
||||||
|
- 现象:用户将 `.env.development` 的 `VITE_APP_API` 改为 `http://172.16.203.228:8000/api`(直连线上/测试后端)后仍运行不了。
|
||||||
|
- 根因:Saber3 的 axios 配了 `withCredentials = true`(`src/axios.js:79`)。该后端(openresty + blade-gateway)对跨域请求返回 `Access-Control-Allow-Origin: *` 且 `Access-Control-Allow-Credentials: true`,浏览器规定 credentials 模式下 Allow-Origin 不能是 `*`,非法组合会被直接拒绝 → 所有接口失败。
|
||||||
|
- 之前用 `/api` 能跑是因为走 Vite 代理,浏览器请求同源 localhost:2888,不触发跨域。
|
||||||
|
- 已改动:
|
||||||
|
1. `.env.development` 的 `VITE_APP_API` 改回 `/api`,并加注释说明两种模式。
|
||||||
|
2. `vite.config.mjs` 的 `server.proxy['/api']` target 改为 `http://172.16.203.228:8000`,并去掉 `rewrite` 去掉 `/api` 的逻辑(保留 `/api` 前缀,对齐 openresty 期望路径)。
|
||||||
|
- 注意:改 `.env` / `vite.config.mjs` 后必须重启 `npm run dev`(Vite 启动时加载环境变量,运行中改动不会热更新)。
|
||||||
|
- 若确需直连绝对地址(如生产/部署):必须让后端 CORS 把 Allow-Origin 改为具体前端域名(blade-gateway 的 CorsConfig 用 `setAllowedOriginPatterns` 或显式域名),不可用 `*` 配合 credentials。
|
||||||
@@ -337,12 +337,7 @@
|
|||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-pagination .btn-prev,
|
// 上一页 / 下一页 箭头按钮与页码按钮等宽,不再单独加宽
|
||||||
.el-pagination .btn-next,
|
|
||||||
.erp-pagination-first,
|
|
||||||
.erp-pagination-last {
|
|
||||||
min-width: 54px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-pagination .el-pager {
|
.el-pagination .el-pager {
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
@@ -350,18 +345,7 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-pagination .btn-prev .el-icon,
|
// 上一页 / 下一页 改为原生箭头图标:不再隐藏原生图标,也不再注入「上一页 / 下一页」文字
|
||||||
.el-pagination .btn-next .el-icon {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-pagination .btn-prev::before {
|
|
||||||
content: '上一页';
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-pagination .btn-next::before {
|
|
||||||
content: '下一页';
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-pagination.is-background .el-pager li.is-active,
|
.el-pagination.is-background .el-pager li.is-active,
|
||||||
.el-pagination .el-pager li.is-active {
|
.el-pagination .el-pager li.is-active {
|
||||||
@@ -447,14 +431,7 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 全站统一:隐藏分页的「上一页 / 下一页」原生导航按钮
|
// 全站统一:分页展示「上一页 / 下一页」原生箭头图标(不再隐藏;首页 / 尾页仍不注入)
|
||||||
// (「首页 / 尾页」由 src/utils/pagination.js 的全局增强器统一不再注入)
|
|
||||||
.el-pagination {
|
|
||||||
.btn-prev,
|
|
||||||
.btn-next {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 全站统一:隐藏操作栏按钮前的图标
|
// 全站统一:隐藏操作栏按钮前的图标
|
||||||
.avue-crud__menu .el-button--text i,
|
.avue-crud__menu .el-button--text i,
|
||||||
|
|||||||
@@ -111,7 +111,7 @@ const enhancePagination = pagination => {
|
|||||||
normalizeComponentPageConfigs(pagination);
|
normalizeComponentPageConfigs(pagination);
|
||||||
|
|
||||||
// 全站统一:不再注入「首页 / 尾页」按钮;
|
// 全站统一:不再注入「首页 / 尾页」按钮;
|
||||||
// 原生「上一页 / 下一页」由全局样式(src/styles/element-ui.scss)统一隐藏。
|
// 「上一页 / 下一页」统一展示为原生箭头图标(由全局样式 src/styles/element-ui.scss 控制)。
|
||||||
if (jumpWrapper && !pagination.querySelector(`.${JUMP_BUTTON_CLASS}`)) {
|
if (jumpWrapper && !pagination.querySelector(`.${JUMP_BUTTON_CLASS}`)) {
|
||||||
const jumpButton = createPaginationButton(JUMP_BUTTON_CLASS, '跳转', () => {
|
const jumpButton = createPaginationButton(JUMP_BUTTON_CLASS, '跳转', () => {
|
||||||
const { jumpInput } = getPaginationState(pagination);
|
const { jumpInput } = getPaginationState(pagination);
|
||||||
|
|||||||
Reference in New Issue
Block a user