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 颜色规范
```scss
// 主色调
--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 间距规范
```scss
// 容器内边距
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 20px;
$spacing-xl: 24px;

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

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

### 2.4 阴影规范
```scss
// 卡片阴影
$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 字体规范
```scss
$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 表单组件

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

#### 下拉框
```vue
<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>
```

#### 按钮规范
```vue
<!-- 主按钮 -->
<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 表格组件

```vue
<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 对话框组件

```vue
<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 断点规范
```scss
$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;
```

### 4.2 响应式规范
```vue
<!-- 栅格系统 -->
<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 加载状态
```vue
<!-- 表格加载 -->
<el-table v-loading="loading" :data="tableData">

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

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

### 5.2 空状态
```vue
<el-empty
  description="暂无数据"
  :image="emptyImage"
/>
```

### 5.3 确认对话框
```vue
<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. 国际化规范

```vue
<!-- 使用字典标签 -->
<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 语义化标签
```vue
<nav> <!-- 导航 -->
<main> <!-- 主内容 -->
<header> <!-- 头部 -->
<footer> <!-- 底部 -->
```

### 9.2 ARIA 属性
```vue
<el-button aria-label="提交按钮">提交</el-button>
<el-input aria-label="搜索框" />
```

### 9.3 键盘导航
- 支持键盘操作
- Tab 键焦点管理
- 快捷键支持

---

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