zhangfei
9c3e603b94
当手术计费弹窗中点击"签发"耗材时，因耗材的locationId（发放库房）为空导致后端异常。 在DoctorStationAdviceAppServiceImpl.handDevice方法中，当locationId为null时，使用登录用户的科室ID作为默认值， 与NurseBillingAppService中的处理方式保持一致。
333 lines
7.0 KiB
Markdown
Executable File
333 lines
7.0 KiB
Markdown
Executable File
# 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. 遵循响应式设计原则
|