跳转到主要内容

前端页面规范

查询条件区块

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

错误举例

操作栏

  • 功能操作按钮左对齐

列表的操作按钮

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

      <!-- 操作列：有权限的操作前 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个字符，右对齐，必填红色星号放在标题前面
  • 输入框：左对齐，输入框宽度应该一致

回到顶部