未来之窗昭和仙君(二十五)诊所看诊框架——东方仙盟筑基期

手机版

病例管理

在线问诊

主页设计

后台管理

患者管理

病例管理

库存管理

设计方案

一、整体风格与配色方案

  • 主色调：深蓝色 #165DFF（代表专业、信任，用于标题、按钮、选中状态）
  • 辅助色：浅蓝色 #E8F3FF（用于背景、hover 状态、分割线）、青色 #36CFC9（用于强调操作，如 “提交处方”“接诊”）
  • 中性色：白色 #FFFFFF（工作台背景）、浅灰 #F5F7FA（左侧菜单背景）、深灰 #333333（正文文字）、中灰 #666666（次要文字）

二、页面布局与核心区域设计（文字可视化）

1. 顶部导航栏（全宽，高度 60px）

plaintext

┌───────────────────────────────────────────────────────────────────────────────┐
│   东方仙盟看诊系统（专家端）                              消息通知  3  │
│                                 张医生（内科主任医师）    退出登录          │
└───────────────────────────────────────────────────────────────────────────────┘
  • 设计细节：
    • 背景色：#FFFFFF，底部边框 1px #E8F3FF（浅蓝色分割线，弱化边缘）
    • 系统名称：左侧对齐，#165DFF 加粗，搭配蓝色图标（如盾牌 / 十字）
    • 右侧区域：医生信息用 #333333，消息通知图标为 #165DFF，未读数量用红色圆点标注，“退出登录” 按钮 hover 时背景变为 #E8F3FF
2. 左侧功能菜单（宽度 240px，固定）

plaintext

┌────────────────────┐
│  ☰  菜单切换       │  （点击折叠后仅显示图标，图标颜色#165DFF）
│   病例管理       │  （当前选中：背景#E8F3FF，左侧3px #165DFF竖线）
│    ├─ 我的病例     │  （子菜单：文字#666666，hover背景#E8F3FF）
│    └─ 新增病例     │
│   患者管理       │  （图标+文字间距8px，行高40px）
│    ├─ 我的患者     │
│    └─ 新增患者     │
│   处方管理       │
│    ├─ 待开处方     │
│    ├─ 已开处方     │
│    └─ 药品库       │
│   库存管理       │  （未选中时文字#333333，图标#666666）
│   咨询管理       │
│    ├─ 未处理咨询   │
│    └─ 已处理咨询   │
└────────────────────┘
  • 设计细节：
    • 背景色：#F5F7FA（浅灰底，减少视觉疲劳）
    • 主菜单文字：#333333 14px，图标与文字同色；选中时文字变为 #165DFF，图标同步变色
    • 折叠交互：点击 “菜单切换” 后宽度缩为 60px，仅保留图标，节省空间
3. 右侧工作台（以 “病例管理 - 我的病例” 为例）

plaintext

┌───────────────────────────────────────────────────────────────────────────────┐
│  病例管理 > 我的病例                           搜索：[输入框]  ▼ 筛选      │
├───────────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────────────────────────────┐  │
│  │  病例编号      患者姓名  年龄  就诊日期    主诉          状态      操作  │  │
│  ├─────────────────────────────────────────────────────────────────────────┤  │
│  │  BL2024101801  李XX      35   2024-10-18  咳嗽3天伴发热  已归档    编辑  │  │
│  │  BL2024101705  王XX      52   2024-10-17  高血压复诊    已归档    编辑  │  │
│  │  BL2024101603  赵XX      28   2024-10-16  皮肤瘙痒      待完善    编辑  │  │
│  │  ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄  │  │
│  │  第1页/共12页                上一页      下一页                      │  │
│  └─────────────────────────────────────────────────────────────────────────┘  │
│                                                                               │
│  （点击“ 查看”后显示病例详情）                                              │
│  ┌─────────────────────────────────────────────────────────────────────────┐  │
│  │   病例详情 - 编号：BL2024101801                                         │  │
│  │  ┌──────────────┐  ┌─────────────────────────────────────────────────┐  │  │
│  │  │ 患者信息      │  │ 病情记录                                      │  │  │
│  │  │ 姓名：李XX    │  │ 主诉：咳嗽3天伴发热                            │  │  │
│  │  │ 年龄：35岁    │  │ 现病史：3天前受凉后咳嗽，夜间加重，低热37.8℃   │  │  │
│  │  │ 性别：男      │  │ 诊断：急性上呼吸道感染                          │  │  │
│  │  │ 联系方式：138…│  │ 用药建议：阿莫西林+布洛芬                      │  │  │
│  │  └──────────────┘  └─────────────────────────────────────────────────┘  │  │
│  │   检查报告：                                                          │  │  │
│  │  ├─ 2024-10-18 10:23 [胸片]  点击预览                                 │  │  │
│  │  └─ 2024-10-18 10:25 [血常规]  点击预览                               │  │  │
│  │  ️ 操作：[编辑]  [打印]  [关联处方]  [返回]                             │  │  │
│  └─────────────────────────────────────────────────────────────────────────┘  │
└───────────────────────────────────────────────────────────────────────────────┘
  • 设计细节：
    • 工作台背景：#FFFFFF，内边距 20px，与左侧菜单用 1px #E8F3FF 分隔
    • 面包屑导航：#666666 13px，分隔符用 >，当前页文字为 #165DFF
    • 表格样式：
      • 表头：背景 #E8F3FF，文字 #165DFF 14px 加粗
      • 表格线：1px #E8F3FF（浅蓝色细线，弱化网格感）
      • 行 hover：背景 #F9FBFF（极浅蓝，提升交互体验）
    • 按钮样式：
      • 操作按钮（查看 / 编辑）：文字 #165DFF，hover 时背景 #E8F3FF
      • 主按钮（关联处方）：背景 #165DFF，文字白色，圆角 4px，hover 时加深为 #0E42D2
    • 详情区标题：#165DFF 16px 加粗，搭配图标（//️）增强识别性
4. 处方管理页面（右侧工作台示例）

plaintext

┌───────────────────────────────────────────────────────────────────────────────┐
│  处方管理 > 待开处方 > 开具处方（患者：李XX | 病例：BL2024101801）            │
├───────────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────────────────────────────┐  │
│  │   基础信息                          诊断：急性上呼吸道感染          │  │  │
│  │  患者姓名：李XX    年龄：35岁         开方日期：2024-10-18            │  │  │
│  └─────────────────────────────────────────────────────────────────────────┘  │
│                                                                               │
│  ┌─────────────────────────────────────────────────────────────────────────┐  │
│  │   药品清单                                   操作                    │  │  │
│  ├─────────────────────────────────────────────────────────────────────────┤  │
│  │  药品名称      规格        用法用量    频次      天数      备注        │  │  │
│  │  阿莫西林胶囊  0.5g/粒    1粒/次      每日3次   5天       饭后服用     │  │  │
│  │  布洛芬缓释片  0.3g/片    1粒/次      必要时     3天       体温＞38.5℃  │  │  │
│  │  + 添加药品 （点击弹出药品选择框，搜索后添加）                          │  │  │
│  └─────────────────────────────────────────────────────────────────────────┘  │
│                                                                               │
│   用药叮嘱：[输入框] （如“忌辛辣，多饮温水，不适随诊”）                    │  │
│                                                                               │
│  ┌─────────────────────────────────────────────────────────────────────────┐  │
│  │  [预览处方]    [保存草稿]    [提交处方] （主按钮，青色#36CFC9）         │  │  │
│  └─────────────────────────────────────────────────────────────────────────┘  │
└───────────────────────────────────────────────────────────────────────────────┘
  • 设计亮点：
    • 诊断信息与病例强关联，用蓝色标签突出显示
    • “添加药品” 按钮：边框 #165DFF，文字 #165DFF，hover 时背景 #E8F3FF
    • 提交按钮：用青色 #36CFC9 区分于其他操作，强调 “完成处方” 的核心动作

  • 阿雪技术观


  • 在科技发展浪潮中，我们不妨积极投身技术共享。不满足于做受益者，更要主动担当贡献者。无论是分享代码、撰写技术博客，还是参与开源项目维护改进，每一个微小举动都可能蕴含推动技术进步的巨大能量。东方仙盟是汇聚力量的天地，我们携手在此探索硅基生命，为科技进步添砖加瓦。

    Hey folks, in this wild tech - driven world, why not dive headfirst into the whole tech - sharing scene? Don't just be the one reaping all the benefits; step up and be a contributor too. Whether you're tossing out your code snippets, hammering out some tech blogs, or getting your hands dirty with maintaining and sprucing up open - source projects, every little thing you do might just end up being a massive force that pushes tech forward. And guess what? The Eastern FairyAlliance is this awesome place where we all come together. We're gonna team up and explore the whole silicon - based life thing, and in the process, we'll be fueling the growth of technology.

posted @ 2025-11-16 08:10  yangykaifa  阅读(17)  评论(0)    收藏  举报