# 前端页面规范

#### 查询条件区块

- 默认每行显示3个输入框，
  - 文本：右对齐，最多6个字
  - 输入框：左对齐，每个输入框需要等宽
- 首行输入框后面显示查询按钮、重置按钮
- 超过3个的输入框默认折叠，查询和重置按钮后显示折叠展开按钮
- 即使查询输入框只有2个，查询和重置也是右对齐

[![](https://iovhm.com/book/uploads/images/gallery/2026-08/scaled-1680-/O2WbvrN6PDOI1SwA-image-1787728720641.png)](https://iovhm.com/book/uploads/images/gallery/2026-08/O2WbvrN6PDOI1SwA-image-1787728720641.png)

##### 错误举例


[![](https://iovhm.com/book/uploads/images/gallery/2026-08/scaled-1680-/1chLPA50Y95x1nYL-image-1787729590285.png)](https://iovhm.com/book/uploads/images/gallery/2026-08/1chLPA50Y95x1nYL-image-1787729590285.png)

---
---

#### 操作栏

- 功能操作按钮左对齐

[![](https://iovhm.com/book/uploads/images/gallery/2026-08/scaled-1680-/p3JY9itYhwfgFur1-image-1787728929988.png)](https://iovhm.com/book/uploads/images/gallery/2026-08/p3JY9itYhwfgFur1-image-1787728929988.png)



---
---

#### 列表的操作按钮

- 最多显示3个按钮，每个按钮最多6个字符,超过3个的按钮收入到更多
- 所有按钮：左对齐
- 高频操作按钮放外面，低频操作按钮收入到更多
- 需要注意按钮可能存在权限，会出现前面没权限，直接显示了更多，需要用数据驱动来显示和控制，相关提示词语句为：
  - 按钮别写死在模板里，改成数组配置——数组里每项定义名称、权限和点击事件，渲染时按权限筛掉没权限的，前 3 个显示成按钮，剩下的收进‘更多’下拉。
  - 按钮使用数组定义，筛选掉没有权限的按钮，前3个显示为按钮，剩余的收进更多。
  - 按钮写成一份配置清单，有权限的前 3 个直接显示，其他塞进‘更多’里。

[![](https://iovhm.com/book/uploads/images/gallery/2026-08/scaled-1680-/angoyTHfyofkm7uX-image-1787728981795.png)](https://iovhm.com/book/uploads/images/gallery/2026-08/angoyTHfyofkm7uX-image-1787728981795.png)

```html
      <!-- 操作列：有权限的操作前 3 个直接显示，其余折叠进"更多"下拉 -->
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="220">
        <template v-slot="scope">
          <el-button v-for="action in visibleActions.slice(0, 3)" :key="action.key" type="primary" link
            @click="action.handler(scope.row)">{{ getActionLabel(action, scope.row) }}</el-button>
          <el-dropdown v-if="visibleActions.length > 3">
            <el-button type="primary" class="el-dropdown-link" link>
              更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="action in visibleActions.slice(3)" :key="action.key">
                  <el-button link @click="action.handler(scope.row)">{{ getActionLabel(action, scope.row) }}</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>

```

---
---

#### 页面弹出框

- 弹出框超过一屏高度的（含动态添加），不得使用弹出框，需要新开TAB标签
- 文字标签最多6个字符，右对齐，必填红色星号放在标题前面
- 输入框：左对齐，输入框宽度应该一致

[![](https://iovhm.com/book/uploads/images/gallery/2026-08/scaled-1680-/fxiScC0KVRABGEWk-image-1787729260391.png)](https://iovhm.com/book/uploads/images/gallery/2026-08/fxiScC0KVRABGEWk-image-1787729260391.png)