鸿蒙PC症状诊断功能实测：命枢AI模拟器UI设计全解析

2026-06-14阅读 0热度 0

先看几张界面实际截图，快速建立视觉印象——

一、核心功能与系统定位

症状诊断模块位于左侧面板“病原体与侵害因子”区域，作为命枢AI生命科学模拟器的关键入口。用户只需输入身体症状描述，系统便会自动解析潜在感染类型并输出概率排序。这些诊断结果直接作为免疫细胞对抗模拟的病原体数据源，为后续战场提供真实的感染威胁。

1.1 层级定位与数据流

在整体系统架构中，症状诊断承担着“输入层→处理层→输出层→应用层”的串联角色，具体职责如下：

层级	功能	说明
输入层	症状采集	用户输入或快捷选择症状描述
处理层	AI分析	调用DeepSeek-V3模型进行症状深度解析
输出层	诊断结果	展示最可能的感染源及其概率排序
应用层	战场集成	将诊断结果映射为对战系统中的病原体实体

1.2 关键能力一览

智能症状识别：支持手动输入与快捷标签两种采集方式
AI驱动分析：基于大语言模型进行专业化医疗推断
概率排序展示：按感染概率从高到低列出潜在病原体
一键集成：诊断结果可直接注入对战系统
双重诊断模式：提供症状诊断与AI问诊两种互补方案

二、UI设计详解

2.1 整体布局

症状诊断区域置于左侧面板顶部，采用卡片式容器，划分出以下功能区：

┌─────────────────────────────────────┐
│ ???? 症状诊断                          │
├─────────────────────────────────────┤
│ [输入框] 输入身体反应，如：发热、...  │
├─────────────────────────────────────┤
│ 常见症状：                           │
│ ????️发热 ????头痛 ????咳嗽 ????乏力 ...     │
├─────────────────────────────────────┤
│ [???? AI诊断] [❓ AI问诊]              │
├─────────────────────────────────────┤
│ [诊断结果区域]                       │
└─────────────────────────────────────┘

2.2 核心组件设计

2.2.1 症状输入框

输入框采用深色主题，与整体暗黑风格统一：

.symptom-input {
    width: 100%;
    height: 80px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    resize: none;
}

设计要点：背景透明度0.05保持层次感，边框半透明白增加视觉深度，圆角8px符合现代趋势。

2.2.2 常见症状标签

这些标签以可点击的胶囊按钮形式呈现，支持快速选取：


    ????️ 发热
    ???? 头痛
    ???? 咳嗽
    ???? 乏力
    ???? 恶心
    ???? 腹泻
    ????‍???? 呼吸困难
    ???? 肌肉酸痛
    ???? 喉咙痛
    ???? 鼻塞
    ???? 呕吐
    ???? 头晕

样式上用emoji增强辨识度，圆角20px的胶囊造型，悬停时由半透明白底变为青绿色，交互反馈干脆直观。

2.2.3 诊断按钮

核心按钮包含两个：

按钮	样式	功能
AI诊断	青绿色渐变	基于症状进行病原体分析
AI问诊	金黄色渐变	打开AI问答问诊模态框

按钮样式：

.analyze-btn {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.analyze-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(78, 205, 196, 0.4);
}
.analyze-btn.diagnosis {
    background: linear-gradient(135deg, #fdcb6e, #f39c12);
    color: #1a1a2e;
}

2.2.4 诊断结果展示

每一条诊断结果以卡片列表呈现，包含感染图标、名称、概率、类型、严重程度、匹配理由及多选框：


    
        ????
        流感病毒
        85%
    
    
        病毒
        中度
    
    症状与流感典型表现高度匹配
    ☐

设计要点：概率等级用颜色区分（>70%红色、40-70%橙色、<40%绿色），严重程度同样用颜色区分（红色重度、橙色中度、绿色轻度），支持多选和一键添加到战场。

三、核心代码实现

3.1 症状添加功能

点击症状标签时，addSymptom() 函数将症状追加到输入框：

function addSymptom(symptom) {
    const input = document.getElementById('symptomInput');
    const currentValue = input.value.trim();
    if (currentValue) {
        input.value = currentValue + '、' + symptom;
    } else {
        input.value = symptom;
    }
}

逻辑很直接：如果输入框已有内容，用顿号分隔；否则直接设置。

3.2 AI查询核心函数

queryAI() 是与DeepSeek-V3模型交互的核心，支持流式和非流式响应：

async function queryAI(prompt) {
    try {
        console.log('========== AI 请求开始 (queryAI) ==========');
        console.log('API_URL:', API_URL);
        console.log('API_KEY:', API_KEY.substring(0, 10) + '...');
        console.log('模型: deepseek-ai/DeepSeek-V3');
        console.log('prompt长度:', prompt.length, '字符');
        console.log('prompt预览:', prompt.substring(0, 100) + '...');

        const response = await fetch(API_URL, {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${API_KEY}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                model: "deepseek-ai/DeepSeek-V3",
                messages: [{ role: "user", content: prompt }],
                stream: false,
                max_tokens: 2048,
                temperature: 0.6,
                top_p: 0.95,
                top_k: 50,
                frequency_penalty: 0,
                thinking_budget: 2048
            })
        });
        // ... 解析流式或非流式响应
        return fullResponse;
    } catch (error) {
        console.error('========== AI 请求失败 ==========');
        console.error('错误:', error.message);
        return null;
    }
}

核心配置参数如下：

参数	值	说明
model	deepseek-ai/DeepSeek-V3	使用的AI模型
max_tokens	2048	最大输出token数
temperature	0.6	控制输出随机性
top_p	0.95	核采样参数
top_k	50	Top-K采样
stream	false	是否流式响应

3.3 症状分析主函数

analyzeSymptoms() 是整个诊断流程的入口：

async function analyzeSymptoms() {
    const symptoms = document.getElementById('symptomInput').value;
    const resultEl = document.getElementById('symptomResult');
    const statusEl = document.getElementById('symptomStatus');
    if (!symptoms.trim()) { alert('请输入身体反应症状'); return; }
    
    statusEl.textContent = 'AI分析中...';
    statusEl.className = 'symptom-status loading';
    resultEl.classList.remove('show');
    
    const prompt = `根据以下身体症状，请分析可能感染的病毒或细菌。请返回3-5种最可能的感染情况，按照概率从高到低排序。症状：${symptoms}
    只返回纯JSON，不要包含任何其他文本。严格按照以下格式返回：
    {"possibleInfections": [{"name": "流感病毒","type": "virus","probability": 0.85,...}]}
    注意：1. 只返回JSON 2. type字段只能是"virus"或"bacteria" 3. probability 0-1 4. severity只能是"轻度"、"中度"或"重度" 5. 确保JSON格式正确`;
    
    // 调用 queryAI，解析结果，显示或使用默认数据
}

流程清晰：获取输入 → 验证 → 设置加载状态 → 构造prompt → 调用AI → 解析 → 渲染。

3.4 AI响应解析

parseAIResponse() 负责从AI返回的文本中提取JSON，并进行容错处理：

function parseAIResponse(response) {
    // 去除换行、提取代码块、定位JSON边界、清理格式、尝试解析
    // 失败则尝试修复（如给key加引号等）
    // 然后验证并规范化每个字段
}

解析策略包括：去除多余换行→提取代码块→定位花括号→清理尾部逗号→尝试解析→若失败则修复格式→最终返回规范化的对象。

3.5 结果展示函数

displaySymptomAnalysis() 将解析结果渲染为可交互的卡片列表：

function displaySymptomAnalysis(data) {
    let html = '可能的感染（点击选择）:

';
    // 遍历感染列表，根据概率设置颜色，根据严重程度设置颜色，默认选中第一个
    html += '';
    resultEl.innerHTML = html;
}

3.6 确认选择并添加到战场

confirmSelectedInfections() 将用户选中的感染源传递至对战系统：

function confirmSelectedInfections() {
    // 验证分析结果存在
    // 获取所有选中元素
    // 遍历：匹配名称、计算伤害倍率（重度1.5、中度1.0、轻度0.7）、计算数量（概率×5）
    // 调用 addFactor() 添加到战场
    // 更新UI高亮
}

3.7 名称匹配函数

findMatchingSubtype() 采用多级匹配策略将AI返回的感染名称映射到系统预配置的病原体：

直接名称匹配
小写转换匹配
归一化匹配（去除“病毒”“细菌”后缀）
关键词映射匹配（如“流感”→influenza）
默认返回第一个配置项

匹配函数内部维护了病毒和细菌的关键词映射表，覆盖常见感染类型。

四、AI问诊模态框系统

4.1 模态框结构

DiagnosisModal 是一个独立的模态框，支持两种模式：

模式	功能	触发方式
question	文本问答问诊	点击“AI问诊”按钮
image	图片分析问诊	点击“AI图片问诊”按钮

4.2 模态框创建

使用纯JavaScript动态创建，包含遮罩层、内容区、标题、关闭按钮和滚动主体。

4.3 问答问诊模式

提供文本输入框和常见问题标签（如失眠、头痛等），点击后自动填入。提交后显示诊断答案区域。

4.4 多技能协同诊断

在问答问诊模式下，系统会并行调用三个AI技能：

QuestionDiagnosisSkill：分析问题原因与应对措施
SymptomAnalysisSkill：分析症状严重程度与影响系统
HealthAdviceSkill：提供生活方式建议

三个请求通过 Promise.all 并行执行，实时更新每个技能的进度状态（等待中→运行中→完成/失败），最后合并结果展示综合诊断报告。

五、技能模块详解

5.1 SymptomAnalysisSkill

负责分析症状的严重程度和可能影响的身体系统，返回JSON格式的结果，包含症状列表、严重程度、可能疾病和受影响系统。

5.2 QuestionDiagnosisSkill

分析健康问题的可能原因、应对措施、是否需要就医以及健康小贴士。

5.3 HealthAdviceSkill

提供睡眠、压力管理、饮水、休息与活动等方面的具体建议。

每个技能内部均使用相同的DeepSeek-V3模型，并包含独立的响应解析与容错回退机制。

六、工作流程总结

6.1 症状诊断流程

用户输入症状
↓
点击"AI诊断"按钮
↓
构造AI提示词
↓
调用queryAI()发送请求
↓
解析AI响应 (parseAIResponse)
↓
验证数据有效性
↓
渲染诊断结果 (displaySymptomAnalysis)
↓
用户选择感染源
↓
点击"确认添加到战场"
↓
匹配配置并添加 (confirmSelectedInfections)
↓
更新对战系统状态

6.2 AI问诊流程

点击"AI问诊"按钮
↓
打开诊断模态框
↓
用户输入问题
↓
点击"提交问诊"
↓
并行调用三个AI技能
↓
实时更新进度状态
↓
合并分析结果
↓
展示综合诊断报告

6.3 数据流向图

用户界面
 ┌─────────────┐  ┌─────────────┐  ┌─────────────┐
 │ 症状输入框   │  │ 常见症状标签 │  │   AI问诊    │
 └──────┬──────┘  └──────┬──────┘  └──────┬──────┘
        │                │                │
        ▼                ▼                ▼
   前端处理层
 ┌──────────────────────────────────────────────────┐
 │ addSymptom()→analyzeSymptoms()→queryAI()        │
 └──────────────────────────────────────────────────┘
        │
        ▼
   AI服务层
 ┌──────────────────────────────────────────────────┐
 │          DeepSeek-V3 API                          │
 └──────────────────────────────────────────────────┘
        │
        ▼
   响应处理层
 ┌──────────────────────────────────────────────────┐
 │ parseAIResponse()→sanitizeResponse()             │
 │         ↓                                        │
 │ displaySymptomAnalysis()→confirmSelectedInfections│
 └──────────────────────────────────────────────────┘
        │
        ▼
   对战系统层
 ┌──────────────────────────────────────────────────┐
 │          addFactor()→battle.js 更新状态          │
 └──────────────────────────────────────────────────┘

七、错误处理与容错机制

7.1 AI响应异常处理

系统内置了多层容错：当AI请求失败、JSON解析异常、数据格式错误或网络超时时，会自动使用一组预设的默认数据（如流感病毒、普通感冒）作为回退方案，确保用户体验不中断。

7.2 数据验证机制

sanitizeResponse() 函数确保返回的数据字段类型正确：数组字段若拿到非数组则尝试转换或使用默认值；字符串字段若为对象则序列化，若为空则用默认值。

八、性能优化策略

8.1 请求并行化

在AI问诊模式中，三个技能请求通过 Promise.all 同时发起，大幅缩短等待时间。

8.2 状态缓存

分析结果保存在全局变量 symptomAnalysisResult 中，避免重复请求。

8.3 渐进式加载

从“AI分析中…”到“分析完成”的状态变化，以及结果区域的渐入效果，给用户明确的反馈。

九、总结

症状诊断系统实现了从症状采集、AI分析到战场集成的完整闭环。几个值得注意的技术亮点：

多技能协同诊断：三个AI技能并行工作，提供综合结论。
智能名称匹配：多种匹配策略提高识别准确率。
渐进式UI反馈：实时展示分析进度。
多层容错机制：确保系统稳定运行。
模块化设计：各技能独立封装，便于扩展和维护。

这套设计为用户提供了直观且专业的症状诊断体验，也为后续的免疫细胞对抗模拟奠定了可靠的数据基础。