Vue3全栈实战：构建智能医疗问诊平台 | 微前端架构与性能优化

一、系统架构设计

本教程将开发一个完整的互联网医疗平台，包含以下核心模块：

• 问诊室系统：WebRTC音视频通信
• 电子病历：结构化数据存储
• 处方系统：药品智能推荐
• 多端协同：医生PC端与患者小程序联动
• 微前端架构：模块化独立部署

技术栈：Vue3 + TypeScript + Pinia + TailwindCSS + WebRTC + qiankun

二、项目初始化与配置

1. 创建Vite主应用

npm create vite@latest medical-platform --template vue-ts
cd medical-platform
npm install pinia vue-router@4 tailwindcss postcss autoprefixer
npm install qiankun axios lodash-es

2. 微前端架构规划

medical-platform/      # 主应用
├── src/              # 基座功能
└── micro-apps/       # 子应用
    ├── consultation/ # 问诊室应用
    ├── emr/          # 电子病历应用
    ├── prescription/ # 处方应用
    └── shared/       # 共享依赖

三、问诊室核心实现

1. WebRTC连接管理

// composables/useWebRTC.ts
export function useWebRTC() {
  const localStream = ref()
  const remoteStream = ref()
  const peerConnection = ref()
  const status = ref('idle')

  const initLocalStream = async () => {
    localStream.value = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    })
    return localStream.value
  }

  const createPeerConnection = () => {
    const pc = new RTCPeerConnection({
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
    })

    // 添加本地流
    localStream.value?.getTracks().forEach(track => {
      pc.addTrack(track, localStream.value!)
    })

    // 监听远程流
    pc.ontrack = (event) => {
      remoteStream.value = event.streams[0]
    }

    peerConnection.value = pc
  }

  const createOffer = async () => {
    const offer = await peerConnection.value?.createOffer()
    await peerConnection.value?.setLocalDescription(offer)
    return offer
  }

  return {
    localStream,
    remoteStream,
    status,
    initLocalStream,
    createPeerConnection,
    createOffer
  }
}

2. 信令服务集成

// services/signaling.ts
export class SignalingService {
  private socket: WebSocket
  private handlers: Record = {}

  constructor(url: string) {
    this.socket = new WebSocket(url)
    
    this.socket.onmessage = (event) => {
      const { type, data } = JSON.parse(event.data)
      if (this.handlers[type]) {
        this.handlers[type](data)
      }
    }
  }

  on(type: string, handler: Function) {
    this.handlers[type] = handler
  }

  send(type: string, data: any) {
    this.socket.send(JSON.stringify({ type, data }))
  }

  joinRoom(roomId: string) {
    this.send('join', { roomId })
  }
}

四、电子病历系统

1. 结构化病历编辑器

<template>
  <div class="emr-editor">
    <template v-for="(section, index) in template" :key="index">
      <h3>{{ section.title }}</h3>
      <component
        :is="getComponent(section.type)"
        v-model="formData[section.key]"
        :options="section.options"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
const props = defineProps()

const formData = ref<Record>({})

const getComponent = (type: string) => {
  const components = {
    text: defineAsyncComponent(() => import('./TextInput.vue')),
    select: defineAsyncComponent(() => import('./SelectInput.vue')),
    checkbox: defineAsyncComponent(() => import('./CheckboxGroup.vue'))
  }
  return components[type]
}
</script>

2. 病历数据模型

// types/emr.ts
interface EmrTemplate {
  key: string
  title: string
  type: 'text' | 'select' | 'checkbox'
  options?: string[]
  required?: boolean
}

interface EmrRecord {
  id: string
  patientId: string
  doctorId: string
  createdAt: Date
  data: Record
  diagnosis?: string
  treatment?: string
}

// 示例模板
export const outpatientTemplate: EmrTemplate[] = [
  {
    key: 'chiefComplaint',
    title: '主诉',
    type: 'text',
    required: true
  },
  {
    key: 'medicalHistory',
    title: '现病史',
    type: 'text'
  }
]

五、处方系统实现

1. 药品智能推荐

// composables/useDrugRecommendation.ts
export function useDrugRecommendation() {
  const recommendations = ref([])
  const loading = ref(false)

  const getRecommendations = async (diagnosis: string) => {
    loading.value = true
    try {
      // 调用AI推荐服务
      const res = await $fetch('/api/drugs/recommend', {
        method: 'POST',
        body: { diagnosis }
      })
      recommendations.value = res.data
    } finally {
      loading.value = false
    }
  }

  return {
    recommendations,
    loading,
    getRecommendations
  }
}

2. 处方表单验证

// schemas/prescription.ts
import * as yup from 'yup'

export const prescriptionSchema = yup.object().shape({
  patientId: yup.string().required('请选择患者'),
  drugs: yup.array().of(
    yup.object().shape({
      drugId: yup.string().required('请选择药品'),
      dosage: yup.string().required('请输入剂量'),
      frequency: yup.string().required('请输入用药频率'),
      duration: yup.string().required('请输入用药时长')
    })
  ).min(1, '至少添加一种药品'),
  notes: yup.string().max(500, '备注不能超过500字')
})

// 在组件中使用
const { handleSubmit } = useForm({
  validationSchema: prescriptionSchema
})

const onSubmit = handleSubmit(async (values) => {
  await savePrescription(values)
})

六、微前端架构实现

1. 主应用配置

// main.ts
import { registerMicroApps, start } from 'qiankun'

registerMicroApps([
  {
    name: 'consultation',
    entry: '//localhost:7101',
    container: '#subapp-container',
    activeRule: '/consultation',
    props: { authToken: getToken() }
  },
  {
    name: 'emr',
    entry: '//localhost:7102',
    container: '#subapp-container',
    activeRule: '/emr',
    props: { authToken: getToken() }
  }
])

start()

2. 子应用适配

// 子应用入口文件
let instance: VueApp | null = null

function render(props: { container?: HTMLElement } = {}) {
  const { container } = props
  instance = createApp(App)
    .use(router)
    .use(store)
    .mount(container?.querySelector('#app') || '#app')
}

// 独立运行
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

// 生命周期钩子
export async function bootstrap() {
  console.log('子应用启动')
}

export async function mount(props: any) {
  store.globalToken = props.authToken
  render(props)
}

export async function unmount() {
  instance?.unmount()
  instance = null
}

七、性能优化策略

1. 问诊室性能优化

// 视频流优化
const optimizeStream = (stream: MediaStream) => {
  const videoTrack = stream.getVideoTracks()[0]
  if (videoTrack) {
    const settings = videoTrack.getSettings()
    const constraints: MediaTrackConstraints = {
      width: { ideal: Math.min(settings.width || 1280, 640) },
      height: { ideal: Math.min(settings.height || 720, 480) },
      frameRate: { ideal: 15 }
    }
    videoTrack.applyConstraints(constraints)
  }
}

// WebWorker处理信令
const signalingWorker = new Worker('./signaling.worker.js')
signalingWorker.onmessage = (e) => {
  if (e.data.type === 'ICE_CANDIDATE') {
    peerConnection.value?.addIceCandidate(e.data.candidate)
  }
}

2. 资源预加载

// 路由组件预加载
const routes = [
  {
    path: '/consultation',
    component: () => import(
      /* webpackPrefetch: true */
      '@/views/Consultation.vue'
    )
  }
]

// 关键数据预取
onMounted(async () => {
  const prefetchData = [
    fetchDrugList(),
    fetchCommonDiagnoses()
  ]
  await Promise.all(prefetchData)
})

八、总结与扩展

通过本教程，您已经掌握了：

1. Vue3复杂医疗系统架构设计
2. WebRTC实时通信深度集成
3. 结构化数据管理与验证
4. 微前端架构实战经验
5. 医疗场景性能优化技巧

扩展学习方向：

• 医疗图像AI分析集成
• WebAssembly高性能计算
• 区块链电子病历存证
• 跨平台桌面应用开发