体质没辨清就跟着短视频进补是当代养生最大的坑。气虚的人吃了滋阴的方子越吃越乏痰湿的人喝了黄芪水越喝越困——补反了比不补更伤身。线下辨一次体质要挂号、排队、填表、等报告多数人嫌麻烦干脆「跟着感觉走」。岐黄要做的是把一位懂体质的先生请进浏览器——望闻问切四步自测、九种体质辨识、食疗穴位双列处方、语音讲解跟做全部在一个页面内完成。背后的端到端具身交互智能由魔珐星云端到端 SDK 驱动一个构造器、一次 ask 调用感知、理解、表达在同一条链路中闭环。问诊导览这篇拆解怎么读中医讲究次第——先望闻问切再辨证论治后开方调养。这篇拆解也按一次坐堂问诊的顺序铺开每一节对应诊室里的一个动作开堂之前星云控制台六步配置顺便盘清 1242 行代码的技术家底先生其人体质没辨清就乱补的产品痛点与坐堂式教学准则的端到端实现望闻问切三十一项症状池与权重累计辨证算法兼夹体质如何量化九种体质档案从一句话画像到四季调养的七维度数据底座坐堂会诊呈脉案即辨证的双链路联动食疗穴位各配一份裁剪上下文药铺陈设药香木色双栏诊室与介绍长页一堂问诊从勾选到开口的完整推演与四个工程决策的为什么一、开堂之前六步在星云控制台请出这位先生辨证之前先识人。在魔珐星云控制台为岐黄创建具身交互智能应用需要完成六个配置步骤。1、铺案创建具身应用在控制台新建端到端具身交互智能应用获取 App ID 和 App Secret。这两个凭证将填入岐黄的顾问面板用于建立与魔珐星云平台的安全连接。2、相人形象配置为顾问选择或定制一个合适的形象。岐黄的人设是「药铺里坐堂的老先生」——建议选择气质沉稳、着装中式素雅的形象让访客觉得坐在对面的是先生不是客服。3、布堂场景配置配置顾问的渲染场景。岐黄的顾问舞台高度为 500px大屏 560px建议选择药房或书房风格的场景背景让先生形象与左侧的四诊工作台形成同一间诊室的观感。4、开嗓音色配置为先生选择合适的声音。中医讲解讲究语速沉稳、穴位名不厌重复——建议选择儒雅温和的音色把「外膝眼下三寸胫骨外侧一横指」这类定位口诀讲出坐堂问诊的韵味而不是播报课件的节奏。5、比划表演配置配置顾问的手势和表情表演。岐黄的核心场景是讲解体质成因与穴位定位——讲到「气虚的人汗出过多反伤气」时神情要郑重说到「拇指按揉每次三分钟」时手势要干脆。表演配置直接影响养生指导的可信度。6、点睛服务配置 ASR 与大脑为当前应用配置语音识别和大模型服务。这一步体现了魔珐星云端到端具身交互智能的可插拔架构——平台通过标准化接口协议和统一的状态管理让各个模块可以独立替换而不影响整体交互流程。ASR 支持 Xmov 自研、豆包、腾讯等多家供应商大脑支持魔珐自研、豆包、OpenAI 兼容协议等多种接入模式。六步配置完成后把 App ID 和 App Secret 写进岐黄项目的 .env.development.local 文件npm run dev 启动开发服务器——ConsultantPanel 挂载即自动连接先生形象出现在左侧面板第一句话就是向访客问好。先生就位的同时也把岐黄的家底盘一见。技术栈与同系列项目一样极简——运行时依赖只有 Vue 一个。// 来源package.jsondependencies:{vue:3.5.18},devDependencies:{vitejs/plugin-vue:6.0.1,typescript:~5.8.3,vite:7.1.2,vue-tsc:3.0.5}魔珐星云端到端 SDK 的接入方式很轻——无需安装任何依赖运行时按需通过 CDN 动态注入脚本加载完成后挂载到 window.XingyunAvatarAgent由服务封装层按需构造实例。整个项目 src 目录共 1242 行代码包含 6 个 Vue 组件App.vue 主布局 AppIcon 图标集 ConsultantPanel 坐堂顾问 DiagnosisWorkbench 四诊工作台 ConstitutionCard 辨证结果卡 PrescriptionPanel 对证调理方案 IntroSection 介绍长页、1 个服务封装层avatar.ts、2 个数据层constitutions.ts 九种体质档案 symptoms.ts 四诊症状池、1 个辨证工具utils/diagnosis.ts、1 个类型定义types/index.ts外加 main.ts 入口与 style.css 全局样式。整个架构是两个互不干扰的循环。本地这一侧是诊室四诊自测、症状勾选、权重累计辨证、体质档案与处方展示全部在本地运行不依赖网络云端那一侧是先生语音讲解走端到端具身交互智能单 SDK 链路ASR、大模型推理、TTS、口型与表情驱动全部由平台内部完成。即使先生连接失败全部九种体质档案与三十一项症状的自测照常可用。二、先生其人「上工治未病」的教学准则中医养生最怕两件事一是体质没辨清就乱补二是方法知道了却没人带。网上的体质测试问卷动辄四五十道题做完只给一个结论——「你是气虚质」——然后呢气虚是怎么来的、该吃什么、按哪个穴位、四季怎么调问卷不会告诉你。线下看中医医生望闻问切五分钟就开方但方子拿回家煎法、火候、忌口多半记不住。岐黄把这位先生搬进了浏览器有形象、有声音、有表情随时在线。访客按望、闻、问、切四步勾选症状系统按权重累计为九种体质打分主体质与兼夹体质一眼看清先生结合脉案语音讲解辨证依据——哪些症状指向这个体质、成因是什么、调理原则是什么再按证开具三道食疗方与三个穴位指导每方每穴都有「听先生讲」按钮点击即展开食材功效、做法步骤、定位手法与力度。传统养生的「辨证—开方—调养」闭环在浏览器里完整重现。具身表达让养生指导真正「面对面」。中医是手上功夫离开口讲加比划就干瘪了——先生形象在左侧面板实时渲染讲「拇指按揉每次三分钟以酸胀为度」时配合手势强调力度穴位定位变得可感知。对中老年、办公室久坐族这些「想养生但懒得查资料」的群体坐着开口就问比填表和搜索框都自然。这位先生的教学法写在人设提示词里由服务封装层avatar.ts在每次调用时注入// 来源src/services/avatar.tsexportconstDOCTOR_ROLE你是岐黄一位经验丰富的 AI 中医养生顾问。 ## 你的身份 - 名称岐黄 - 身份中医养生顾问熟悉九种体质辨识、食疗药膳与穴位保健负责解读四诊脉案、讲解体质成因与调理方案 - 风格如药铺里坐堂的老先生望闻问切有条不紊用语温和善用生活化的比喻但涉及健康风险时格外谨慎 ## 你的行为准则 1. 回答紧扣当前脉案先说辨证依据哪些症状指向这个体质再讲体质成因与调理原则 2. 讲食疗方时说清食材、做法与宜忌讲穴位时说清定位、手法与力度并提醒孕妇及特殊人群慎按 3. 你提供的是养生保健建议不能替代执业医师诊断症状持续或加重时要明确建议就医 4. 每次回应控制在 3-5 句语速沉稳关键穴位名可以重复一遍 5. 遇到脉案之外的提问用通用中医养生常识回答并建议结合体质测评整体调理五条行为准则与产品一一对应准则 1 定下「先辨证依据后成因原则」的讲解顺序准则 2 对应数据层的食疗穴位四要素食材/做法/功效/宜忌 定位/手法/力度/慎按人群准则 3 是安全底线——岐黄不开方只给养生建议准则 4 为坐堂场景设计语速沉稳、穴位名重复是「先生」而非「播报员」。人设与数据层互为表里缺了哪一环讲解都会走样。先生的端到端身法由同一层封装负责SDK 采用延迟加载策略ConsultantPanel 组件挂载且凭证齐全时才动态注入 CDN 脚本15 秒加载超时兜底连接管理沿用 generation 令牌递增防止新旧连接回调交叉污染30 秒超时防止 init 永久 pending。连接成功后先生自动开口用不超过三句话向访客问好并提示可以在右侧完成望闻问切四诊自测或直接语音提问。访客提问的入口只有一个函数。askAvatar 将先生人设、当前四诊脉案和访客问题合并为一次端到端具身交互智能调用平台内部完成大模型推理、语音合成、口型驱动和表情手势生成业务侧全程只写一个函数调用// 来源src/services/avatar.tsexportasyncfunctionaskAvatar(text:string,context:string){if(!agent||avatarState.status!online)returnavatarState.subtitletextawaitagent.ask(${DOCTOR_ROLE}\n当前四诊脉案${context}\n访客问题${text})}整层封装对外只暴露五个方法ask 提问、startASR 开麦、stopASR 闭麦、interrupt 打断、destroy 下课——干净利落没有冗余。三、望闻问切三十一项症状与权重累计辨证岐黄的四诊不是演示问卷而是一套完整的体质辨识体系。// 来源src/types/index.ts/** 四诊法度 */exporttypeDiagnosisMethodinspection|listening|inquiry|palpation/** 体质类型王琦体质九分法 */exporttypeConstitutionType|balanced|qiDeficiency|yangDeficiency|yinDeficiency|phlegmDamp|dampHeat|bloodStasis|qiStagnation|special/** 四诊症状条目 */exportinterfaceSymptomItem{id:string/** 症状描述自测口吻 */label:string/** 归属四诊 */method:DiagnosisMethod/** 辨证权重体质 - 加分 */weights:PartialRecordConstitutionType,number}核心设计在于 SymptomItem 的 weights 字段——每个症状不是简单地「属于」某个体质而是按权重给九种体质分别加分。同一个症状可能同时指向多个体质只是权重不同「面色晄白缺少光泽」给阳虚质加 3 分、气虚质加 2 分「手足心发热下午脸颊发烫」给阴虚质加 3 分但湿热质也加 1 分。这种「多体质交叉赋权」正是中医辨证的精髓——人体不是非此即彼的单选题。先看望诊的八项条目// 来源src/data/symptoms.ts// ── 望诊观气色 ─────────────────────────────{id:ins-pale-face,label:面色晄白缺少光泽,method:inspection,weights:{yangDeficiency:3,qiDeficiency:2}},{id:ins-oily-face,label:面部油光易生痤疮,method:inspection,weights:{dampHeat:3}},{id:ins-dull-face,label:面色晦暗口唇颜色偏暗,method:inspection,weights:{bloodStasis:3}},{id:ins-heavy-body,label:形体偏胖腹部松软,method:inspection,weights:{phlegmDamp:3}},{id:ins-lively-face,label:面色红润目光有神皮肤有光泽,method:inspection,weights:{balanced:3}},// ……闻诊 6 项、问诊 10 项、切诊 7 项共 31 项三十一项症状按望闻问切四诊分组望诊 8 项面色、形体、皮肤、闻诊 6 项声音、呼吸、口气、问诊 10 项疲乏、寒热、睡眠、情绪、切诊 7 项手足温度、腹部弹性、痛处、过敏。平和质用正向条目面色红润、声音清亮、睡得沉、四肢温暖其余八种偏颇体质各有 3-5 条来源。辨证算法在 utils/diagnosis.ts 中核心逻辑是权重累计// 来源src/utils/diagnosis.tsexportfunctiondiagnose(selected:SymptomItem[]):DiagnosisResult|undefined{if(selected.length0)returnundefinedconsttallynewMapConstitutionType,number()for(constitemofselected){for(const[type,weight]ofObject.entries(item.weights)asArray[ConstitutionType,number]){tally.set(type,(tally.get(type)??0)weight)}}constscores[...tally.entries()].map(([type,score])({profile:lookup(type),score})).sort((a,b)b.score-a.score||CONSTITUTIONS.indexOf(a.profile)-CONSTITUTIONS.indexOf(b.profile))constprimaryscores[0]constsecondscores[1]constsecondarysecondsecond.score3second.scoreprimary.score*0.6?{profile:second.profile,score:second.score}:undefinedreturn{primary:primary.profile,secondary,scores,symptoms:selected.map(itemitem.label)}}得分最高者为主体质分差不悬殊次高分 ≥ 3 分且 ≥ 主体质的 0.6 倍的次高分记为兼夹体质——中医讲「纯体质少兼夹体质多」这个 0.6 倍阈值就是兼夹的量化表达。同分时按档案顺序排保证结果确定性。未勾选任何条目时返回 undefined由调用方展示未辨证态。四、九种体质档案从画像到四季调养辨出体质只是起点怎么调才是关键。岐黄的九种体质档案constitutions.ts是整套产品的数据底座每种体质包含七个维度// 来源src/types/index.tsexportinterfaceConstitutionProfile{id:ConstitutionType name:string/** 一句话画像 */portrait:string/** 总体特征 */traits:string/** 形成成因 */causes:string/** 调理原则 */principle:string/** 食疗方案 */foods:FoodTherapy[]/** 穴位指导 */points:AcupointGuide[]/** 四季调养 */seasons:string}先看气虚质的档案// 来源src/data/constitutions.ts{id:qiDeficiency,name:气虚质,portrait:气短懒言容易疲乏常常自汗、爱感冒,traits:语音低弱、气短懒言、容易疲乏、精神不振易出汗、易感冒舌淡红、边有齿痕。,causes:先天不足、久病耗气、过度劳累、长期节食或思虑过度伤脾气的化生跟不上消耗。,principle:补脾益气、缓补培元细水长流地补忌骤补与耗气剧烈运动汗出过多反伤气。,foods:[{name:黄芪炖鸡,ingredients:黄芪 15 克、母鸡半只、生姜 3 片、盐少许,method:鸡肉焯水与黄芪、生姜同入砂锅加水没过食材小火炖 1.5 小时加盐调味。,effect:补气固表、增强抵抗力感冒发热期间停用。},// ……山药莲子粥、小米南瓜粥],points:[{name:气海,location:肚脐正中直下 1.5 寸两横指处。,technique:掌心覆穴顺时针揉按 5 分钟晨起与睡前各一次。,effect:培补元气改善气短乏力。},// ……足三里、脾俞],seasons:春捂防感冒夏避大汗耗气秋渐补气阴冬进补但忌滋腻碍胃。,},九种体质覆盖王琦体质九分法的全部谱系平和质好底子、气虚质气短懒言、阳虚质畏寒怕冷、阴虚质五心烦热、痰湿质身重困倦、湿热质油光痤疮、血瘀质唇暗瘀斑、气郁质多愁善叹、特禀质过敏体质。每种体质配三道食疗方药膳/茶饮/粥羹与三个穴位定位用「几横指」讲得人人能找手法与力度说得清楚加一段四季调养口诀。食疗方全部采用真实中医口径黄芪炖鸡补气固表、当归生姜羊肉汤温中补阳源自医圣张仲景的经典方、薏米赤小豆汤健脾祛湿、山楂桃仁粥活血化瘀——食材克数、做法步骤、功效宜忌一次给全。穴位定位全部用体表标志外膝眼下三寸、内踝尖上三寸、肚脐正中直下三寸——不依赖解剖学名词照着做就能找到。每种体质还自带一段 portrait 一句话画像——「气短懒言容易疲乏常常自汗、爱感冒」——这是辨证结果卡的核心展示文案访客一眼就知道自己是什么状态。五、坐堂会诊呈脉案即辨证的联动链路岐黄的核心体验是一条「呈脉案即辨证」的联动链路访客在四诊工作台勾选症状点击「呈脉案」右侧辨证结果卡即刻刷新先生在线时同步开口讲解。这段链路的起点在 DiagnosisWorkbench。工作台按望闻问切四步组织症状条目每步一个 tab当前诊次高亮已勾选数显示为角标。访客逐项勾选后点击「呈脉案请先生辨证」emit submit 事件将勾选的症状清单提交给 App.vue。// 来源src/App.vuefunctiononSubmit(items:SymptomItem[]){submitted.valueitemsif(items.length0)return// 呈脉案即辨证先生在线时自动讲解辨证依据与调理思路if(avatarState.statusonline)voidconsultDiagnosis()}functionconsultDiagnosis(){if(!result.value)returnvoidaskAvatar(请结合脉案为我辨证讲解指出哪些症状指向这个体质讲讲成因与调理原则,JSON.stringify(buildContext())).catch((){avatarState.error辨证讲解未发送成功可在下方重试})}buildContext 将辨证结果打包为 ConsultantContext 上下文四诊法度、已勾选症状描述、主体质名与得分、兼夹体质名与得分、调理原则。这条上下文连同辨证请求进入 askAvatar拼装为「人设 脉案 问题」的完整提示词通过一次 ask 调用发往魔珐星云平台。大模型读到的信息是完整的访客勾选了哪些症状、权重累计后哪种体质得分最高、有没有兼夹体质、调理原则是什么。它生成的辨证讲解围绕真实数据展开——「您勾选的面色白、气短懒言、容易疲乏都指向气虚质成因多是思虑过度伤脾……」回答经 TTS 转为语音先生开口讲解口型与表情由平台驱动同步生成字幕实时回填到顾问面板。辨证完成后ConstitutionCard 刷新主体质档案名称、画像、特征、成因、调理原则、四季调养与得分条前四名体质按得分比例着色PrescriptionPanel 同步展开食疗方与穴位指导双列处方。每张食疗卡和穴位卡右上角都有「听先生讲」按钮——// 来源src/App.vuefunctiononConsult(payload:{kind:food|point;name:string;summary:string}){if(avatarState.status!online){avatarState.error请先连接顾问再听讲解return}constpromptpayload.kindfood?请详细讲解食疗方「${payload.name}」的食材功效、做法步骤与宜忌:请详细讲解穴位「${payload.name}」的定位方法、按揉手法与力度并提醒慎按人群voidaskAvatar(prompt,JSON.stringify(buildContext(payload))).catch((){avatarState.error讲解未发送成功请重试})}食疗方与穴位讲解各配一份按目的裁剪的上下文——食疗方带上食材、做法、功效的 summary穴位带上定位、手法、功效的 summary先生据此展开详细讲解。访客听完一道方点下一道再点穴位全程不必打字。语音链路同样为坐堂场景做了设计。toggleAvatarVoice 管理麦克风状态interruptAvatar 支持随时打断——先生正讲着气虚质的成因访客想起「那黄芪能不能天天喝」直接开口打断提问Barge-in 机制让对话像坐堂问诊一样自然而不是等一段讲解播完。六、药铺陈设药香木色双栏诊室与介绍长页整间诊室的格局遵循双栏分层范式顶栏 上层坐堂大厅顾问居左 四诊工作台居右 下层辨证开方体质档案居左 食疗穴位处方横排。顶栏是深木色 #5b4432 通栏左侧为药草徽记 「岐黄 QíHuáng · AI 中医养生顾问 · 四诊自测与体质调理」右侧三格统计9 种体质 / 31 项四诊条目 / 当前证候——数字实时跟随辨证结果刷新。上层坐堂大厅1.05fr : 1fr左栏 ConsultantPanel 是先生的位置——顾问舞台高 500px米色径向渐变打底未连接时是一枚药草徽记与「望闻问切皆有先生看着」的引导文案上线后先生形象居中渲染面板底部保留一行小字标注「魔珐星云 · 端到端具身交互智能」。字幕、文字输入框、语音提问/打断/断开三个操作按钮在在线状态下依次排布。右栏 DiagnosisWorkbench 是四诊工作台——望闻问切四步 tab 横向排列当前诊次朱砂色高亮已勾选数显示为绿色角标下方是症状条目列表勾选后朱砂边框高亮底部「上一诊/下一诊」导航与「呈脉案请先生辨证」朱砂主按钮。下层辨证开方400px : 1fr左栏 ConstitutionCard 是辨证结果——未辨证时展示九色体质概览与王琦九分法说明已辨证时展示主体质名称大字 体质色边框、一句话画像、兼夹体质标签、前四名体质得分条按得分比例着色以及总体特征/形成成因/调理原则/四季调养四格档案。右栏 PrescriptionPanel 是对证调理方案——食疗方与穴位指导双列横排每列三张卡片每张卡片含名称、「听先生讲」按钮、食材/做法/功效或定位/手法/功效三行详情。// 来源src/components/ConsultantPanel.vue div classconsultant-stage :class{ online: avatarState.status online } div refcontainer classavatar-container/div div v-ifavatarState.status ! online classconsultant-placeholder span classconsultant-symbolIcon nameherb :size46 //span divstrong望闻问切皆有先生看着/strongp{{ avatarState.status connecting ? 先生正在进堂… : 连接岐黄开始四诊自测 }}/p/div /div span v-ifavatarState.status online classconsultant-name岐黄 · 中医养生顾问/span /div工作台下方是介绍长页 IntroSection关于岐黄的导语望闻问切之间养生有了一位看得见的先生、四项核心能力望闻问切交互/九种体质辨识/食疗方案推荐/穴位按摩指导、从自查到调养的四步闭环自查/呈案/辨证/调养、六类适用场景办公室久坐族/熬夜加班党/产后调理期/中老年养生/过敏星人/家庭健康助手收口在一条深木渐变的技术底座横幅。长页让第一次打开的访客不必连接先生也能下滑看懂这个项目在做什么。整体视觉采用药铺木色主题底色 #f4eee0宣纸米黄、木色 #5b4432深胡桃木、朱砂 #a5542e印泥红、纸面 #fcf9f1。朱砂用得很克制——四诊工作台当前诊次高亮、呈脉案主按钮、食疗穴位「听先生讲」按钮、辨证结果体质色边框之外全是木色层次像药铺柜台上一方印把注意力留给真正要紧的动作。九种体质各有专属色平和绿 #5c8a4d、气虚金 #c98a2d、阳虚蓝 #4a7ba6、阴虚紫 #9a5b8f、痰湿棕 #8a7351、湿热红 #b3402a、血瘀酒红 #7a3b4e、气郁青 #4e8578、特禀灰紫 #7d6b96——得分条与体质色边框一眼可辨。七、一堂问诊的完整推演从勾选到开口辨证思路讲完不如跟着一次真实的体质自测走一遍。访客打开页面先生自动连接问好。点进四诊工作台望闻问切四步 tab 逐一勾选——面色晄白、声音低弱、容易疲乏、手脚发凉、肌肉松软——五项提交。diagnose() 按权重累计气虚质 11 分、阳虚质 8 分≥ 11×0.6 且 ≥ 3记为兼夹。ConstitutionCard 刷新主体质「气虚质」大字展示与得分条PrescriptionPanel 同步展开黄芪炖鸡等三道食疗方与气海等三个穴位。与此同时consultDiagnosis() 将脉案打包为 JSON 上下文——主体质、兼夹体质、得分、调理原则——连同辨证请求进入 askAvatar。先生开口讲解「您勾选的面色晄白、气短懒言、容易疲乏都指向气虚质兼见阳虚……」字幕实时回填。访客点黄芪炖鸡的「听先生讲」先生展开食材功效与宜忌再点气海穴先生讲定位手法与力度。全程不必打字。四个工程决策值得记下其一症状用权重累计而非单选——兼夹体质才是常态0.6 倍阈值是兼夹的量化表达其二食疗穴位各配一份按目的裁剪的上下文先生据此展开针对性讲解而非泛泛而谈其三辨证与讲解分两条链路呈脉案触发辨证讲解短听先生讲触发专项讲解全其四渲染容器全属性 !important 防御样式数字人 SDK 注入不受宿主 CSS 干扰。四个答案指向同一处中医养生的反馈必须发生在「辨清体质」之后且必须针对个人脉案而非通用科普。端到端具身交互智能恰好补上这块拼图——感知、理解、表达在同一条链路里持续运行访客勾完症状、点一下呈脉案先生的辨证随即开口这些过去只有坐在诊桌前才能做的事现在一个浏览器页面就装得下。
体质没辨清就跟着短视频进补是当代养生最大的坑。气虚的人吃了滋阴的方子越吃越乏痰湿的人喝了黄芪水越喝越困——补反了比不补更伤身。线下辨一次体质要挂号、排队、填表、等报告多数人嫌麻烦干脆「跟着感觉走」。岐黄要做的是把一位懂体质的先生请进浏览器——望闻问切四步自测、九种体质辨识、食疗穴位双列处方、语音讲解跟做全部在一个页面内完成。背后的端到端具身交互智能由魔珐星云端到端 SDK 驱动一个构造器、一次 ask 调用感知、理解、表达在同一条链路中闭环。问诊导览这篇拆解怎么读中医讲究次第——先望闻问切再辨证论治后开方调养。这篇拆解也按一次坐堂问诊的顺序铺开每一节对应诊室里的一个动作开堂之前星云控制台六步配置顺便盘清 1242 行代码的技术家底先生其人体质没辨清就乱补的产品痛点与坐堂式教学准则的端到端实现望闻问切三十一项症状池与权重累计辨证算法兼夹体质如何量化九种体质档案从一句话画像到四季调养的七维度数据底座坐堂会诊呈脉案即辨证的双链路联动食疗穴位各配一份裁剪上下文药铺陈设药香木色双栏诊室与介绍长页一堂问诊从勾选到开口的完整推演与四个工程决策的为什么一、开堂之前六步在星云控制台请出这位先生辨证之前先识人。在魔珐星云控制台为岐黄创建具身交互智能应用需要完成六个配置步骤。1、铺案创建具身应用在控制台新建端到端具身交互智能应用获取 App ID 和 App Secret。这两个凭证将填入岐黄的顾问面板用于建立与魔珐星云平台的安全连接。2、相人形象配置为顾问选择或定制一个合适的形象。岐黄的人设是「药铺里坐堂的老先生」——建议选择气质沉稳、着装中式素雅的形象让访客觉得坐在对面的是先生不是客服。3、布堂场景配置配置顾问的渲染场景。岐黄的顾问舞台高度为 500px大屏 560px建议选择药房或书房风格的场景背景让先生形象与左侧的四诊工作台形成同一间诊室的观感。4、开嗓音色配置为先生选择合适的声音。中医讲解讲究语速沉稳、穴位名不厌重复——建议选择儒雅温和的音色把「外膝眼下三寸胫骨外侧一横指」这类定位口诀讲出坐堂问诊的韵味而不是播报课件的节奏。5、比划表演配置配置顾问的手势和表情表演。岐黄的核心场景是讲解体质成因与穴位定位——讲到「气虚的人汗出过多反伤气」时神情要郑重说到「拇指按揉每次三分钟」时手势要干脆。表演配置直接影响养生指导的可信度。6、点睛服务配置 ASR 与大脑为当前应用配置语音识别和大模型服务。这一步体现了魔珐星云端到端具身交互智能的可插拔架构——平台通过标准化接口协议和统一的状态管理让各个模块可以独立替换而不影响整体交互流程。ASR 支持 Xmov 自研、豆包、腾讯等多家供应商大脑支持魔珐自研、豆包、OpenAI 兼容协议等多种接入模式。六步配置完成后把 App ID 和 App Secret 写进岐黄项目的 .env.development.local 文件npm run dev 启动开发服务器——ConsultantPanel 挂载即自动连接先生形象出现在左侧面板第一句话就是向访客问好。先生就位的同时也把岐黄的家底盘一见。技术栈与同系列项目一样极简——运行时依赖只有 Vue 一个。// 来源package.jsondependencies:{vue:3.5.18},devDependencies:{vitejs/plugin-vue:6.0.1,typescript:~5.8.3,vite:7.1.2,vue-tsc:3.0.5}魔珐星云端到端 SDK 的接入方式很轻——无需安装任何依赖运行时按需通过 CDN 动态注入脚本加载完成后挂载到 window.XingyunAvatarAgent由服务封装层按需构造实例。整个项目 src 目录共 1242 行代码包含 6 个 Vue 组件App.vue 主布局 AppIcon 图标集 ConsultantPanel 坐堂顾问 DiagnosisWorkbench 四诊工作台 ConstitutionCard 辨证结果卡 PrescriptionPanel 对证调理方案 IntroSection 介绍长页、1 个服务封装层avatar.ts、2 个数据层constitutions.ts 九种体质档案 symptoms.ts 四诊症状池、1 个辨证工具utils/diagnosis.ts、1 个类型定义types/index.ts外加 main.ts 入口与 style.css 全局样式。整个架构是两个互不干扰的循环。本地这一侧是诊室四诊自测、症状勾选、权重累计辨证、体质档案与处方展示全部在本地运行不依赖网络云端那一侧是先生语音讲解走端到端具身交互智能单 SDK 链路ASR、大模型推理、TTS、口型与表情驱动全部由平台内部完成。即使先生连接失败全部九种体质档案与三十一项症状的自测照常可用。二、先生其人「上工治未病」的教学准则中医养生最怕两件事一是体质没辨清就乱补二是方法知道了却没人带。网上的体质测试问卷动辄四五十道题做完只给一个结论——「你是气虚质」——然后呢气虚是怎么来的、该吃什么、按哪个穴位、四季怎么调问卷不会告诉你。线下看中医医生望闻问切五分钟就开方但方子拿回家煎法、火候、忌口多半记不住。岐黄把这位先生搬进了浏览器有形象、有声音、有表情随时在线。访客按望、闻、问、切四步勾选症状系统按权重累计为九种体质打分主体质与兼夹体质一眼看清先生结合脉案语音讲解辨证依据——哪些症状指向这个体质、成因是什么、调理原则是什么再按证开具三道食疗方与三个穴位指导每方每穴都有「听先生讲」按钮点击即展开食材功效、做法步骤、定位手法与力度。传统养生的「辨证—开方—调养」闭环在浏览器里完整重现。具身表达让养生指导真正「面对面」。中医是手上功夫离开口讲加比划就干瘪了——先生形象在左侧面板实时渲染讲「拇指按揉每次三分钟以酸胀为度」时配合手势强调力度穴位定位变得可感知。对中老年、办公室久坐族这些「想养生但懒得查资料」的群体坐着开口就问比填表和搜索框都自然。这位先生的教学法写在人设提示词里由服务封装层avatar.ts在每次调用时注入// 来源src/services/avatar.tsexportconstDOCTOR_ROLE你是岐黄一位经验丰富的 AI 中医养生顾问。 ## 你的身份 - 名称岐黄 - 身份中医养生顾问熟悉九种体质辨识、食疗药膳与穴位保健负责解读四诊脉案、讲解体质成因与调理方案 - 风格如药铺里坐堂的老先生望闻问切有条不紊用语温和善用生活化的比喻但涉及健康风险时格外谨慎 ## 你的行为准则 1. 回答紧扣当前脉案先说辨证依据哪些症状指向这个体质再讲体质成因与调理原则 2. 讲食疗方时说清食材、做法与宜忌讲穴位时说清定位、手法与力度并提醒孕妇及特殊人群慎按 3. 你提供的是养生保健建议不能替代执业医师诊断症状持续或加重时要明确建议就医 4. 每次回应控制在 3-5 句语速沉稳关键穴位名可以重复一遍 5. 遇到脉案之外的提问用通用中医养生常识回答并建议结合体质测评整体调理五条行为准则与产品一一对应准则 1 定下「先辨证依据后成因原则」的讲解顺序准则 2 对应数据层的食疗穴位四要素食材/做法/功效/宜忌 定位/手法/力度/慎按人群准则 3 是安全底线——岐黄不开方只给养生建议准则 4 为坐堂场景设计语速沉稳、穴位名重复是「先生」而非「播报员」。人设与数据层互为表里缺了哪一环讲解都会走样。先生的端到端身法由同一层封装负责SDK 采用延迟加载策略ConsultantPanel 组件挂载且凭证齐全时才动态注入 CDN 脚本15 秒加载超时兜底连接管理沿用 generation 令牌递增防止新旧连接回调交叉污染30 秒超时防止 init 永久 pending。连接成功后先生自动开口用不超过三句话向访客问好并提示可以在右侧完成望闻问切四诊自测或直接语音提问。访客提问的入口只有一个函数。askAvatar 将先生人设、当前四诊脉案和访客问题合并为一次端到端具身交互智能调用平台内部完成大模型推理、语音合成、口型驱动和表情手势生成业务侧全程只写一个函数调用// 来源src/services/avatar.tsexportasyncfunctionaskAvatar(text:string,context:string){if(!agent||avatarState.status!online)returnavatarState.subtitletextawaitagent.ask(${DOCTOR_ROLE}\n当前四诊脉案${context}\n访客问题${text})}整层封装对外只暴露五个方法ask 提问、startASR 开麦、stopASR 闭麦、interrupt 打断、destroy 下课——干净利落没有冗余。三、望闻问切三十一项症状与权重累计辨证岐黄的四诊不是演示问卷而是一套完整的体质辨识体系。// 来源src/types/index.ts/** 四诊法度 */exporttypeDiagnosisMethodinspection|listening|inquiry|palpation/** 体质类型王琦体质九分法 */exporttypeConstitutionType|balanced|qiDeficiency|yangDeficiency|yinDeficiency|phlegmDamp|dampHeat|bloodStasis|qiStagnation|special/** 四诊症状条目 */exportinterfaceSymptomItem{id:string/** 症状描述自测口吻 */label:string/** 归属四诊 */method:DiagnosisMethod/** 辨证权重体质 - 加分 */weights:PartialRecordConstitutionType,number}核心设计在于 SymptomItem 的 weights 字段——每个症状不是简单地「属于」某个体质而是按权重给九种体质分别加分。同一个症状可能同时指向多个体质只是权重不同「面色晄白缺少光泽」给阳虚质加 3 分、气虚质加 2 分「手足心发热下午脸颊发烫」给阴虚质加 3 分但湿热质也加 1 分。这种「多体质交叉赋权」正是中医辨证的精髓——人体不是非此即彼的单选题。先看望诊的八项条目// 来源src/data/symptoms.ts// ── 望诊观气色 ─────────────────────────────{id:ins-pale-face,label:面色晄白缺少光泽,method:inspection,weights:{yangDeficiency:3,qiDeficiency:2}},{id:ins-oily-face,label:面部油光易生痤疮,method:inspection,weights:{dampHeat:3}},{id:ins-dull-face,label:面色晦暗口唇颜色偏暗,method:inspection,weights:{bloodStasis:3}},{id:ins-heavy-body,label:形体偏胖腹部松软,method:inspection,weights:{phlegmDamp:3}},{id:ins-lively-face,label:面色红润目光有神皮肤有光泽,method:inspection,weights:{balanced:3}},// ……闻诊 6 项、问诊 10 项、切诊 7 项共 31 项三十一项症状按望闻问切四诊分组望诊 8 项面色、形体、皮肤、闻诊 6 项声音、呼吸、口气、问诊 10 项疲乏、寒热、睡眠、情绪、切诊 7 项手足温度、腹部弹性、痛处、过敏。平和质用正向条目面色红润、声音清亮、睡得沉、四肢温暖其余八种偏颇体质各有 3-5 条来源。辨证算法在 utils/diagnosis.ts 中核心逻辑是权重累计// 来源src/utils/diagnosis.tsexportfunctiondiagnose(selected:SymptomItem[]):DiagnosisResult|undefined{if(selected.length0)returnundefinedconsttallynewMapConstitutionType,number()for(constitemofselected){for(const[type,weight]ofObject.entries(item.weights)asArray[ConstitutionType,number]){tally.set(type,(tally.get(type)??0)weight)}}constscores[...tally.entries()].map(([type,score])({profile:lookup(type),score})).sort((a,b)b.score-a.score||CONSTITUTIONS.indexOf(a.profile)-CONSTITUTIONS.indexOf(b.profile))constprimaryscores[0]constsecondscores[1]constsecondarysecondsecond.score3second.scoreprimary.score*0.6?{profile:second.profile,score:second.score}:undefinedreturn{primary:primary.profile,secondary,scores,symptoms:selected.map(itemitem.label)}}得分最高者为主体质分差不悬殊次高分 ≥ 3 分且 ≥ 主体质的 0.6 倍的次高分记为兼夹体质——中医讲「纯体质少兼夹体质多」这个 0.6 倍阈值就是兼夹的量化表达。同分时按档案顺序排保证结果确定性。未勾选任何条目时返回 undefined由调用方展示未辨证态。四、九种体质档案从画像到四季调养辨出体质只是起点怎么调才是关键。岐黄的九种体质档案constitutions.ts是整套产品的数据底座每种体质包含七个维度// 来源src/types/index.tsexportinterfaceConstitutionProfile{id:ConstitutionType name:string/** 一句话画像 */portrait:string/** 总体特征 */traits:string/** 形成成因 */causes:string/** 调理原则 */principle:string/** 食疗方案 */foods:FoodTherapy[]/** 穴位指导 */points:AcupointGuide[]/** 四季调养 */seasons:string}先看气虚质的档案// 来源src/data/constitutions.ts{id:qiDeficiency,name:气虚质,portrait:气短懒言容易疲乏常常自汗、爱感冒,traits:语音低弱、气短懒言、容易疲乏、精神不振易出汗、易感冒舌淡红、边有齿痕。,causes:先天不足、久病耗气、过度劳累、长期节食或思虑过度伤脾气的化生跟不上消耗。,principle:补脾益气、缓补培元细水长流地补忌骤补与耗气剧烈运动汗出过多反伤气。,foods:[{name:黄芪炖鸡,ingredients:黄芪 15 克、母鸡半只、生姜 3 片、盐少许,method:鸡肉焯水与黄芪、生姜同入砂锅加水没过食材小火炖 1.5 小时加盐调味。,effect:补气固表、增强抵抗力感冒发热期间停用。},// ……山药莲子粥、小米南瓜粥],points:[{name:气海,location:肚脐正中直下 1.5 寸两横指处。,technique:掌心覆穴顺时针揉按 5 分钟晨起与睡前各一次。,effect:培补元气改善气短乏力。},// ……足三里、脾俞],seasons:春捂防感冒夏避大汗耗气秋渐补气阴冬进补但忌滋腻碍胃。,},九种体质覆盖王琦体质九分法的全部谱系平和质好底子、气虚质气短懒言、阳虚质畏寒怕冷、阴虚质五心烦热、痰湿质身重困倦、湿热质油光痤疮、血瘀质唇暗瘀斑、气郁质多愁善叹、特禀质过敏体质。每种体质配三道食疗方药膳/茶饮/粥羹与三个穴位定位用「几横指」讲得人人能找手法与力度说得清楚加一段四季调养口诀。食疗方全部采用真实中医口径黄芪炖鸡补气固表、当归生姜羊肉汤温中补阳源自医圣张仲景的经典方、薏米赤小豆汤健脾祛湿、山楂桃仁粥活血化瘀——食材克数、做法步骤、功效宜忌一次给全。穴位定位全部用体表标志外膝眼下三寸、内踝尖上三寸、肚脐正中直下三寸——不依赖解剖学名词照着做就能找到。每种体质还自带一段 portrait 一句话画像——「气短懒言容易疲乏常常自汗、爱感冒」——这是辨证结果卡的核心展示文案访客一眼就知道自己是什么状态。五、坐堂会诊呈脉案即辨证的联动链路岐黄的核心体验是一条「呈脉案即辨证」的联动链路访客在四诊工作台勾选症状点击「呈脉案」右侧辨证结果卡即刻刷新先生在线时同步开口讲解。这段链路的起点在 DiagnosisWorkbench。工作台按望闻问切四步组织症状条目每步一个 tab当前诊次高亮已勾选数显示为角标。访客逐项勾选后点击「呈脉案请先生辨证」emit submit 事件将勾选的症状清单提交给 App.vue。// 来源src/App.vuefunctiononSubmit(items:SymptomItem[]){submitted.valueitemsif(items.length0)return// 呈脉案即辨证先生在线时自动讲解辨证依据与调理思路if(avatarState.statusonline)voidconsultDiagnosis()}functionconsultDiagnosis(){if(!result.value)returnvoidaskAvatar(请结合脉案为我辨证讲解指出哪些症状指向这个体质讲讲成因与调理原则,JSON.stringify(buildContext())).catch((){avatarState.error辨证讲解未发送成功可在下方重试})}buildContext 将辨证结果打包为 ConsultantContext 上下文四诊法度、已勾选症状描述、主体质名与得分、兼夹体质名与得分、调理原则。这条上下文连同辨证请求进入 askAvatar拼装为「人设 脉案 问题」的完整提示词通过一次 ask 调用发往魔珐星云平台。大模型读到的信息是完整的访客勾选了哪些症状、权重累计后哪种体质得分最高、有没有兼夹体质、调理原则是什么。它生成的辨证讲解围绕真实数据展开——「您勾选的面色白、气短懒言、容易疲乏都指向气虚质成因多是思虑过度伤脾……」回答经 TTS 转为语音先生开口讲解口型与表情由平台驱动同步生成字幕实时回填到顾问面板。辨证完成后ConstitutionCard 刷新主体质档案名称、画像、特征、成因、调理原则、四季调养与得分条前四名体质按得分比例着色PrescriptionPanel 同步展开食疗方与穴位指导双列处方。每张食疗卡和穴位卡右上角都有「听先生讲」按钮——// 来源src/App.vuefunctiononConsult(payload:{kind:food|point;name:string;summary:string}){if(avatarState.status!online){avatarState.error请先连接顾问再听讲解return}constpromptpayload.kindfood?请详细讲解食疗方「${payload.name}」的食材功效、做法步骤与宜忌:请详细讲解穴位「${payload.name}」的定位方法、按揉手法与力度并提醒慎按人群voidaskAvatar(prompt,JSON.stringify(buildContext(payload))).catch((){avatarState.error讲解未发送成功请重试})}食疗方与穴位讲解各配一份按目的裁剪的上下文——食疗方带上食材、做法、功效的 summary穴位带上定位、手法、功效的 summary先生据此展开详细讲解。访客听完一道方点下一道再点穴位全程不必打字。语音链路同样为坐堂场景做了设计。toggleAvatarVoice 管理麦克风状态interruptAvatar 支持随时打断——先生正讲着气虚质的成因访客想起「那黄芪能不能天天喝」直接开口打断提问Barge-in 机制让对话像坐堂问诊一样自然而不是等一段讲解播完。六、药铺陈设药香木色双栏诊室与介绍长页整间诊室的格局遵循双栏分层范式顶栏 上层坐堂大厅顾问居左 四诊工作台居右 下层辨证开方体质档案居左 食疗穴位处方横排。顶栏是深木色 #5b4432 通栏左侧为药草徽记 「岐黄 QíHuáng · AI 中医养生顾问 · 四诊自测与体质调理」右侧三格统计9 种体质 / 31 项四诊条目 / 当前证候——数字实时跟随辨证结果刷新。上层坐堂大厅1.05fr : 1fr左栏 ConsultantPanel 是先生的位置——顾问舞台高 500px米色径向渐变打底未连接时是一枚药草徽记与「望闻问切皆有先生看着」的引导文案上线后先生形象居中渲染面板底部保留一行小字标注「魔珐星云 · 端到端具身交互智能」。字幕、文字输入框、语音提问/打断/断开三个操作按钮在在线状态下依次排布。右栏 DiagnosisWorkbench 是四诊工作台——望闻问切四步 tab 横向排列当前诊次朱砂色高亮已勾选数显示为绿色角标下方是症状条目列表勾选后朱砂边框高亮底部「上一诊/下一诊」导航与「呈脉案请先生辨证」朱砂主按钮。下层辨证开方400px : 1fr左栏 ConstitutionCard 是辨证结果——未辨证时展示九色体质概览与王琦九分法说明已辨证时展示主体质名称大字 体质色边框、一句话画像、兼夹体质标签、前四名体质得分条按得分比例着色以及总体特征/形成成因/调理原则/四季调养四格档案。右栏 PrescriptionPanel 是对证调理方案——食疗方与穴位指导双列横排每列三张卡片每张卡片含名称、「听先生讲」按钮、食材/做法/功效或定位/手法/功效三行详情。// 来源src/components/ConsultantPanel.vue div classconsultant-stage :class{ online: avatarState.status online } div refcontainer classavatar-container/div div v-ifavatarState.status ! online classconsultant-placeholder span classconsultant-symbolIcon nameherb :size46 //span divstrong望闻问切皆有先生看着/strongp{{ avatarState.status connecting ? 先生正在进堂… : 连接岐黄开始四诊自测 }}/p/div /div span v-ifavatarState.status online classconsultant-name岐黄 · 中医养生顾问/span /div工作台下方是介绍长页 IntroSection关于岐黄的导语望闻问切之间养生有了一位看得见的先生、四项核心能力望闻问切交互/九种体质辨识/食疗方案推荐/穴位按摩指导、从自查到调养的四步闭环自查/呈案/辨证/调养、六类适用场景办公室久坐族/熬夜加班党/产后调理期/中老年养生/过敏星人/家庭健康助手收口在一条深木渐变的技术底座横幅。长页让第一次打开的访客不必连接先生也能下滑看懂这个项目在做什么。整体视觉采用药铺木色主题底色 #f4eee0宣纸米黄、木色 #5b4432深胡桃木、朱砂 #a5542e印泥红、纸面 #fcf9f1。朱砂用得很克制——四诊工作台当前诊次高亮、呈脉案主按钮、食疗穴位「听先生讲」按钮、辨证结果体质色边框之外全是木色层次像药铺柜台上一方印把注意力留给真正要紧的动作。九种体质各有专属色平和绿 #5c8a4d、气虚金 #c98a2d、阳虚蓝 #4a7ba6、阴虚紫 #9a5b8f、痰湿棕 #8a7351、湿热红 #b3402a、血瘀酒红 #7a3b4e、气郁青 #4e8578、特禀灰紫 #7d6b96——得分条与体质色边框一眼可辨。七、一堂问诊的完整推演从勾选到开口辨证思路讲完不如跟着一次真实的体质自测走一遍。访客打开页面先生自动连接问好。点进四诊工作台望闻问切四步 tab 逐一勾选——面色晄白、声音低弱、容易疲乏、手脚发凉、肌肉松软——五项提交。diagnose() 按权重累计气虚质 11 分、阳虚质 8 分≥ 11×0.6 且 ≥ 3记为兼夹。ConstitutionCard 刷新主体质「气虚质」大字展示与得分条PrescriptionPanel 同步展开黄芪炖鸡等三道食疗方与气海等三个穴位。与此同时consultDiagnosis() 将脉案打包为 JSON 上下文——主体质、兼夹体质、得分、调理原则——连同辨证请求进入 askAvatar。先生开口讲解「您勾选的面色晄白、气短懒言、容易疲乏都指向气虚质兼见阳虚……」字幕实时回填。访客点黄芪炖鸡的「听先生讲」先生展开食材功效与宜忌再点气海穴先生讲定位手法与力度。全程不必打字。四个工程决策值得记下其一症状用权重累计而非单选——兼夹体质才是常态0.6 倍阈值是兼夹的量化表达其二食疗穴位各配一份按目的裁剪的上下文先生据此展开针对性讲解而非泛泛而谈其三辨证与讲解分两条链路呈脉案触发辨证讲解短听先生讲触发专项讲解全其四渲染容器全属性 !important 防御样式数字人 SDK 注入不受宿主 CSS 干扰。四个答案指向同一处中医养生的反馈必须发生在「辨清体质」之后且必须针对个人脉案而非通用科普。端到端具身交互智能恰好补上这块拼图——感知、理解、表达在同一条链路里持续运行访客勾完症状、点一下呈脉案先生的辨证随即开口这些过去只有坐在诊桌前才能做的事现在一个浏览器页面就装得下。
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
