his/md/前端UI规范文档.md

OpenHIS UI 风格规范文档

1. 整体布局

1.1 容器结构

<div class="app-container [page-name]-container">
  <div class="components-container">
    <!-- 查询表单 -->
    <el-form class="query-form">...</el-form>

    <!-- 操作按钮 -->
    <el-row class="button-group">...</el-row>

    <!-- 数据表格 -->
    <el-table border>...</el-table>

    <!-- 分页 -->
    <div class="pagination-container">...</div>
  </div>
</div>

1.2 样式说明

• app-container: 最外层容器，全屏背景
• components-container: 白色卡片容器，带阴影
• query-form: 查询表单，底部无间距
• button-group: 按钮组，间距 8px
• pagination-container: 分页容器，顶部间距 16px

2. 统一样式规范

2.1 颜色规范

// 主色调
--color-primary: #409EFF;
--color-success: #67C23A;
--color-warning: #E6A23C;
--color-danger: #F56C6C;
--color-info: #909399;

// 文字颜色
--text-regular: #606266;    // 常规文字
--text-secondary: #909399;   // 次要文字
--text-placeholder: #A8ABB2;  // 占位符

2.2 间距规范

// 容器内边距
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 20px;
$spacing-xl: 24px;

// 表单项间距
$form-item-margin-bottom: 18px;

2.3 圆角规范

$border-radius-sm: 4px;   // 小圆角 - 按钮、输入框
$border-radius-md: 8px;   // 中圆角 - 卡片、对话框
$border-radius-lg: 12px;  // 大圆角 - 特殊组件

2.4 阴影规范

// 卡片阴影
$box-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);

// 表格阴影
$box-shadow-table: 0 1px 4px rgba(0, 0, 0, 0.05);

// 浮动元素阴影
$box-shadow-float: 0 2px 12px rgba(0, 0, 0, 0.1);

2.5 字体规范

$font-size-base: 14px;    // 基础字号
$font-size-sm: 12px;      // 小字号
$font-size-lg: 16px;      // 大字号
$font-size-xl: 18px;     // 特大字号

$font-weight-regular: 400;  // 常规
$font-weight-medium: 500;  // 中等
$font-weight-bold: 600;    // 加粗

3. 组件规范

3.1 表单组件

输入框

<el-input
  v-model="value"
  placeholder="请输入xxx"
  clearable
  style="width: 200px"
  @keyup.enter="handleQuery"
/>

下拉框

<el-select
  v-model="value"
  placeholder="请选择xxx"
  clearable
  style="width: 200px"
>
  <el-option
    v-for="dict in dictList"
    :key="dict.value"
    :label="dict.label"
    :value="dict.value"
  />
</el-select>

按钮规范

<!-- 主按钮 -->
<el-button type="primary" icon="IconName">按钮文字</el-button>

<!-- 次要按钮 -->
<el-button type="success">按钮文字</el-button>
<el-button type="warning">按钮文字</el-button>
<el-button type="danger">按钮文字</el-button>

<!-- 次要按钮（plain） -->
<el-button type="primary" plain icon="IconName">按钮文字</el-button>

<!-- 链接按钮（table内） -->
<el-button link type="primary" class="action-button">文字</el-button>

3.2 表格组件

<el-table
  v-loading="loading"
  :data="tableData"
  @selection-change="handleSelectionChange"
  border
>
  <!-- 复选列 -->
  <el-table-column type="selection" width="55" align="center" />

  <!-- 序号列 -->
  <el-table-column label="序号" align="center" prop="id" width="80" />

  <!-- 普通列 -->
  <el-table-column
    label="列名"
    align="center"
    prop="fieldName"
    min-width="200"
    :show-overflow-tooltip="true"
  />

  <!-- 带标签列 -->
  <el-table-column label="状态" align="center" prop="status" width="90">
    <template #default="scope">
      <dict-tag :options="dictType" :value="scope.row.status" />
    </template>
  </el-table-column>

  <!-- 操作列 -->
  <el-table-column label="操作" align="center" min-width="280">
    <template #default="scope">
      <el-button link type="primary" @click="handleEdit(scope.row)" class="action-button">编辑</el-button>
      <el-button link type="danger" @click="handleDelete(scope.row)" class="action-button">删除</el-button>
    </template>
  </el-table-column>
</el-table>

3.3 对话框组件

<el-dialog
  :title="dialogTitle"
  v-model="dialogVisible"
  width="800px"
  destroy-on-close
>
  <el-form :model="form" :rules="rules" label-width="80px">
    <!-- 表单内容 -->
  </el-form>

  <template #footer>
    <div class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </template>
</el-dialog>

4. 响应式设计

4.1 断点规范

$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;

4.2 响应式规范

<!-- 栅格系统 -->
<el-row :gutter="10">
  <el-col :span="6" :xs="12" :sm="8">...</el-col>
  <el-col :span="18" :xs="12" :sm="16">...</el-col>
</el-row>

<!-- 移动端表单 -->
<el-form :label-width="isMobile ? '80px' : '120px'">

5. 交互规范

5.1 加载状态

<!-- 表格加载 -->
<el-table v-loading="loading" :data="tableData">

<!-- 按钮加载 -->
<el-button :loading="saving">保存</el-button>

<!-- 全屏加载 -->
<el-button type="primary" :loading="true">提交</el-button>

5.2 空状态

<el-empty
  description="暂无数据"
  :image="emptyImage"
/>

5.3 确认对话框

<el-dialog title="确认提示" v-model="confirmVisible">
  <p>{{ confirmMessage }}</p>
  <template #footer>
    <el-button @click="confirmVisible = false">取 消</el-button>
    <el-button type="danger" @click="handleConfirm">确 定</el-button>
  </template>
</el-dialog>

6. 命名规范

6.1 CSS 类名

• 使用 kebab-case（短横线命名）
• 遵循 BEM 命名规范
• 示例：notice-container, button-group, action-button

6.2 变量命名

• Vue：使用 camelCase
• 事件处理：以 handle 开头
• 数据获取：以 get/load 开头
• 示例：handleQuery, loadData, handleSubmit

6.3 组件命名

• 使用 PascalCase
• 多个单词时使用驼峰命名
• 示例：NoticePanel, TableHeader, SearchForm

7. 国际化规范

<!-- 使用字典标签 -->
<dict-tag :options="dictType" :value="row.status" />

<!-- 使用占位符 -->
<el-input :placeholder="$t('common.placeholder')"/>

8. 性能优化

8.1 图片优化

• 使用 WebP 格式
• 图片懒加载
• 响应式图片

8.2 列表优化

• 虚拟滚动（大列表）
• 分页加载
• 骨架屏

8.3 缓存策略

• 使用 Vuex/Pinia 缓存用户数据
• 本地存储持久化配置
• 请求去重

9. 无障碍规范

9.1 语义化标签

<nav> <!-- 导航 -->
<main> <!-- 主内容 -->
<header> <!-- 头部 -->
<footer> <!-- 底部 -->

9.2 ARIA 属性

<el-button aria-label="提交按钮">提交</el-button>
<el-input aria-label="搜索框" />

9.3 键盘导航

• 支持键盘操作
• Tab 键焦点管理
• 快捷键支持

---

注意事项：

1. 所有新增页面必须遵循此规范
2. 修改现有页面时尽量统一样式
3. 保持与系统整体风格一致
4. 优先使用已有的组件和样式
5. 遵循响应式设计原则