feat(ui): 添加OpenHIS UI统一风格规范和样式

- 创建ui-standard.scss样式文件，定义全局组件样式规范 - 添加容器、表格、表单、按钮、对话框等统一UI样式 - 实现响应式设计和动画效果 - 编写完整的UI风格规范文档 - 定义颜色、间距、圆角、阴影等设计规范 - 提供组件使用示例和命名规范指导
2025-12-30 14:56:29 +08:00
parent 91cb465962
commit 7974bdc51c
2 changed files with 687 additions and 0 deletions
--- a/openhis-ui-vue3/src/assets/styles/ui-standard.scss
+++ b/openhis-ui-vue3/src/assets/styles/ui-standard.scss
@@ -0,0 +1,355 @@
+// OpenHIS UI 统一风格规范
+// 统一组件样式，确保整个系统 UI 风格一致性
+
+/* ============================================
+   1. 容器样式
+   ============================================ */
+.app-container {
+  padding: 20px;
+  min-height: calc(100vh - 84px);
+  background-color: #f0f2f5;
+}
+
+.components-container {
+  margin: 20px;
+  padding: 20px;
+  background-color: #ffffff;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+/* ============================================
+   2. 表格样式
+   ============================================ */
+.el-table {
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+
+  th {
+    background-color: #f8f9fb !important;
+    color: #606266;
+    font-weight: 600;
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  td {
+    padding: 12px 0;
+  }
+
+  // 表格行选中颜色
+  .current-row > td.el-table__cell {
+    background-color: #e8f4ff !important;
+  }
+
+  // 表格行hover颜色
+  .el-table__body tr:hover > td {
+    background-color: #f5f7fa !important;
+  }
+}
+
+/* ============================================
+   3. 表单样式
+   ============================================ */
+.el-form {
+  .el-form-item {
+    margin-bottom: 18px;
+
+    .el-form-item__label {
+      font-weight: 500;
+      color: #606266;
+      font-size: 14px;
+      line-height: 32px;
+    }
+
+    .el-input,
+    .el-select,
+    .el-date-picker {
+      width: 100%;
+    }
+  }
+}
+
+// 查询表单容器
+.query-form {
+  padding: 18px;
+  background-color: #ffffff;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+
+  .el-form-item {
+    margin-bottom: 0;
+
+    .el-input,
+    .el-select {
+      width: 200px;
+    }
+  }
+}
+
+/* ============================================
+   4. 按钮样式
+   ============================================ */
+// 主要按钮组
+.button-group {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+
+  .el-button {
+    height: 32px;
+    padding: 8px 16px;
+    font-size: 14px;
+    border-radius: 4px;
+  }
+}
+
+// 操作按钮
+.action-button {
+  font-size: 13px;
+  padding: 4px 8px;
+}
+
+// 搜索区域按钮
+.search-buttons {
+  margin-left: 8px;
+
+  .el-button {
+    height: 32px;
+    min-width: 72px;
+  }
+}
+
+/* ============================================
+   5. 对话框样式
+   ============================================ */
+.el-dialog {
+  border-radius: 8px;
+  overflow: hidden;
+
+  &__header {
+    padding: 16px 20px;
+    border-bottom: 1px solid #e4e7ed;
+    margin: 0;
+
+    .el-dialog__title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+    }
+  }
+
+  &__body {
+    padding: 20px;
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+
+  &__footer {
+    padding: 16px 20px;
+    border-top: 1px solid #e4e7ed;
+    text-align: right;
+  }
+}
+
+/* ============================================
+   6. 抽屉样式
+   ============================================ */
+.el-drawer {
+  &__header {
+    margin-bottom: 0;
+    padding: 16px 20px;
+    border-bottom: 1px solid #e4e7ed;
+
+    .el-drawer__title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+    }
+  }
+
+  &__body {
+    padding: 0 20px 20px;
+  }
+}
+
+/* ============================================
+   7. 标签页样式
+   ============================================ */
+.el-tabs {
+  &__header {
+    margin: 0 20px;
+    border-bottom: 1px solid #e4e7ed;
+
+    .el-tabs__nav-wrap::after {
+      background-color: transparent;
+    }
+  }
+
+  &__content {
+    padding: 16px 0;
+  }
+}
+
+/* ============================================
+   8. 分页样式
+   ============================================ */
+.pagination-container {
+  margin-top: 16px;
+  padding: 0 8px;
+  text-align: right;
+
+  .el-pagination {
+    .el-pager li {
+      border-radius: 4px;
+    }
+  }
+}
+
+/* ============================================
+   9. 标签样式
+   ============================================ */
+.el-tag {
+  border-radius: 4px;
+  padding: 4px 10px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+// 字典标签
+.dict-tag {
+  margin: 0;
+}
+
+/* ============================================
+   10. 描述列表样式
+   ============================================ */
+.el-descriptions {
+  &__label {
+    font-weight: 500;
+    color: #606266;
+  }
+
+  &__body {
+    background-color: #fafafa;
+  }
+}
+
+/* ============================================
+   11. 空状态样式
+   ============================================ */
+.el-empty {
+  padding: 60px 0;
+
+  &__description {
+    color: #909399;
+    font-size: 14px;
+    margin-top: 16px;
+  }
+}
+
+/* ============================================
+   12. 卡片样式
+   ============================================ */
+.el-card {
+  border-radius: 8px;
+  border: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+  &__header {
+    border-bottom: 1px solid #e4e7ed;
+    padding: 16px 20px;
+    font-weight: 600;
+    font-size: 15px;
+  }
+
+  &__body {
+    padding: 20px;
+  }
+}
+
+/* ============================================
+   13. 徽标样式
+   ============================================ */
+.el-badge {
+  &__content {
+    border: 1px solid #ffffff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
+  }
+}
+
+/* ============================================
+   14. 工具类
+   ============================================ */
+.text-primary {
+  color: #409eff;
+}
+
+.text-success {
+  color: #67c23a;
+}
+
+.text-warning {
+  color: #e6a23c;
+}
+
+.text-danger {
+  color: #f56c6c;
+}
+
+.text-info {
+  color: #909399;
+}
+
+.text-regular {
+  color: #606266;
+}
+
+.text-secondary {
+  color: #909399;
+}
+
+/* ============================================
+   15. 动画
+   ============================================ */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* ============================================
+   16. 响应式
+   ============================================ */
+@media screen and (max-width: 768px) {
+  .app-container {
+    padding: 10px;
+  }
+
+  .query-form {
+    padding: 12px;
+
+    .el-form-item {
+      margin-bottom: 12px;
+
+      .el-input,
+      .el-select {
+        width: 100%;
+      }
+    }
+  }
+
+  .button-group {
+    flex-direction: column;
+
+    .el-button {
+      width: 100%;
+    }
+  }
+}
--- a/前端UI规范文档.md
+++ b/前端UI规范文档.md
@@ -0,0 +1,332 @@
+# 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. 遵循响应式设计原则