页面标题

# CMSPRO 应用视图规范 ## 1. 目录结构与命名规范 ### 1.1 顶层目录应用视图位于 `app/Apps/{AppName}/Views/` 下，视图命名空间在 ServiceProvider 中通过 `loadViewsFrom()` 注册： ```php $this->loadViewsFrom( base_path('app/Apps/{AppName}/Views'), '{namespace}' ); ``` 视图引用方式：`view('{namespace}::path.to.view')` ### 1.2 目录命名 | 目录 | 用途 | 大小写 | |------|------|--------| | `Admin/` | 后台管理页面 | **首字母大写**（主流规范） | | `User/` | 用户中心页面 | **首字母大写** | | `Home/` | 前台展示页面 | **首字母大写** | | `layouts/` | 布局文件 | **全小写** | > 全小写模式（如 `admin/`、`front/`）已逐步淘汰，新开发统一使用首字母大写。 ### 1.3 功能子目录 `Admin/`、`User/`、`Home/` 下按 Controller 功能模块名命名为**全小写**子目录： ``` Admin/ ├── flow/ # 功能模块名：全小写 ├── node_app/ # 多单词：下划线分隔 ├── template/ └── authorize/ ``` ### 1.4 视图文件命名 | 文件 | 用途 | |------|------| | `index.blade.php` | 列表/首页页面 | | `form.blade.php` | 表单页面（新增/编辑共用） | | `detail.blade.php` | 详情页面 | | `_xxx.blade.php` | 视图片段/包含文件（下划线前缀） | --- ## 2. 后台管理列表页规范 ### 2.1 完整页面结构后台列表页必须包含完整的 HTML 结构，参照 [CmsproFlow\Admin\flow\index.blade.php](file:///e:\wwwroot\cmspro\code\app\Apps\CmsproFlow\Views\Admin\flow\index.blade.php) 和 [CmsproForum\Admin\categories\index.blade.php](file:///e:\wwwroot\cmspro\code\app\Apps\CmsproForum\Views\Admin\categories\index.blade.php)： ```html 页面标题

{{-- Layui 模板（必须用 @verbatim 包裹） --}} @verbatim @endverbatim

{{-- JS 资源 --}} ``` ### 2.2 错误的写法（当前 CmsproFlow 模板列表的问题） ❌ 直接裸露 Layui 模板代码，缺少完整 HTML 页面结构： ```html @verbatim {{# layui.each(d.items, function(index, item){ }} {{ item.id }} {{ item.name }} {{# }); }} @endverbatim ``` **这个文件只是一个模板片段，缺少页面结构，无法独立渲染。** > **注意：** `template/index.blade.php` 当前内容不完整——它只有被 `@verbatim` 包裹的一段纯 Layui 模板语法，但缺少 ``、``、CSS 引用、表格容器、JS 初始化等必要结构。它既不是独立页面，也不是通过 `include` 引入的片段（没有下划线 `_` 前缀），导致无法正确渲染。 --- ## 3. 后台表单页规范 ### 3.1 完整页面结构（iframe 弹窗中使用）表单页作为 `layer.open(type: 2)` 的内容时，需要完整 HTML 结构，并采用**固定底部按钮栏 + 内容区自适应滚动**的布局。标准模板参照 [Finance\Admin\currency_type\form.blade.php](file:///e:\wwwroot\cmspro\code\app\Apps\Finance\Views\Admin\currency_type\form.blade.php)： ```html 表单标题 ``` 关键点： - 必须引入 `CmsProUi/component/layui/layui.js` 和 `CmsProUi/component/pear/pear.js` - 必须设置 `$.ajaxSetup` 注入 CSRF Token - 表单提交后通过 `parent.layer.getFrameIndex(window.name)` 获取并关闭父层弹窗 - 保存成功后调用 `parent.table.reload('xxxTable')` 刷新父页面表格 ### 3.2 固定底部按钮栏布局规范（必须遵循）表单在 iframe 弹窗中打开时，**"提交/清空"按钮必须始终固定在右下角**，内容超长时只滚动内容区、按钮栏不随滚动移动。实现要点： | 元素 | 关键样式 | 作用 | |------|---------|------| | `html, body` | `height: 100%; margin: 0; overflow: hidden;` | 锁定视口高度，禁止 body 层滚动 | | `.layui-form` | `height: 100%;` | 撑满 iframe 视口 | | 内容区（`.layui-row`） | `height: calc(100vh - 52px); overflow-y: auto;` | 高度 = 视口 - 按钮栏，内容超出时自身滚动 | | 按钮栏（`.bottom`） | `height: 52px;`（不加 `padding`） | 固定高度贴底，与内容区高度互补 | > **踩坑记录：** > - 按钮栏高度（`52px`）必须与内容区 `calc(100vh - 52px)` 的减数**保持一致**，否则会出现整页滚动，按钮被挤出视口，需滚动才能看到。 > - `.bottom` **不要加 `padding`**（如 `padding: 8px 20px`），否则实际高度超过 `52px`，破坏高度互补关系。内边距由内部 `.button-container` 控制。 > - 弹窗 `layer.open` 必须指定固定高度，如 `area: ['550px', '450px']`，`height: 100%` 才有参照。 > - 不要用 `position: fixed` / `sticky` 固定按钮栏——在 iframe + flex 环境下易失效，改用上述"内容区 calc 高度 + 按钮栏固定高度"方案最稳定。 > - **不要覆盖 Layui 表单组件的默认尺寸样式**（如 `.layui-form-label` 的 `width`、`.layui-input-block` 的 `margin-left`），Layui 的 `form.render('select')` 依赖这些值计算下拉面板定位，覆盖会导致 select 下拉框位置偏移。 **典型故障案例（CmsproChildrehab 应用 form 视图批量修复，2026-07-17）：** **现象**：表单页打开后取消/保存（或提交/清空）按钮被挤出可视区域，只能看到一小块按钮边沿，必须滚动才能完整看到。 **根因**：表单页 `` 之后、`` 之前。若放在 `` 之后、`` 之前） - [ ] 操作按钮已添加 `data-permission` 属性并实现 `hidePermButtons` 隐藏逻辑 - [ ] dropdown 菜单项已添加 `permission` 属性并用 `.filter()` 过滤 - [ ] 行内操作按钮在 `table.render` 的 `done` 回调中隐藏无权限项 - [ ] 动态生成的按钮、switch 开关等已添加 `hasPermission` 操作拦截