diff --git a/openhis-ui-vue3/src/assets/styles/ui-standard.scss b/openhis-ui-vue3/src/assets/styles/ui-standard.scss new file mode 100644 index 00000000..4691a084 --- /dev/null +++ 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%; + } + } +} diff --git a/前端UI规范文档.md b/前端UI规范文档.md new file mode 100644 index 00000000..662ba663 --- /dev/null +++ b/前端UI规范文档.md @@ -0,0 +1,332 @@ +# OpenHIS UI 风格规范文档 + +## 1. 整体布局 + +### 1.1 容器结构 +``` +
+
+ + ... + + + ... + + + ... + + +
...
+
+
+``` + +### 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 + +``` + +#### 下拉框 +```vue + + + +``` + +#### 按钮规范 +```vue + +按钮文字 + + +按钮文字 +按钮文字 +按钮文字 + + +按钮文字 + + +文字 +``` + +### 3.2 表格组件 + +```vue + + + + + + + + + + + + + + + + + + + + +``` + +### 3.3 对话框组件 + +```vue + + + + + + + +``` + +## 4. 响应式设计 + +### 4.1 断点规范 +```scss +$screen-xs: 480px; +$screen-sm: 768px; +$screen-md: 992px; +$screen-lg: 1200px; +``` + +### 4.2 响应式规范 +```vue + + + ... + ... + + + + +``` + +## 5. 交互规范 + +### 5.1 加载状态 +```vue + + + + +保存 + + +提交 +``` + +### 5.2 空状态 +```vue + +``` + +### 5.3 确认对话框 +```vue + +

{{ confirmMessage }}

+ + +``` + +## 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 + + + + + +``` + +## 8. 性能优化 + +### 8.1 图片优化 +- 使用 WebP 格式 +- 图片懒加载 +- 响应式图片 + +### 8.2 列表优化 +- 虚拟滚动（大列表） +- 分页加载 +- 骨架屏 + +### 8.3 缓存策略 +- 使用 Vuex/Pinia 缓存用户数据 +- 本地存储持久化配置 +- 请求去重 + +## 9. 无障碍规范 + +### 9.1 语义化标签 +```vue +