@tencent-rtc/trtc-agent-skills 0.1.0

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/docs/backend-contract.zh-CN.md

@@ -0,0 +1,162 @@
+# 后端接口契约建议
+
+本文说明客户业务系统接入医疗音视频模板时，建议提供的最小后端接口。字段可按客户实际系统调整，但建议在 `src/services/adapters/integration/` 中转换为模板内部统一结构。
+
+## 1. 登录签名接口
+
+前端拿到客户业务 token 后，请求客户服务端签发音视频登录信息。
+
+```http
+POST /api/rtc/signature
+Authorization: Bearer <customer-token>
+Content-Type: application/json
+```
+
+请求：
+
+```json
+{
+  "userId": "doctor_001"
+}
+```
+
+响应：
+
+```json
+{
+  "sdkAppId": 0,
+  "userId": "doctor_001",
+  "userSig": "server-generated-usersig",
+  "expireTime": 604800
+}
+```
+
+说明：
+
+- `userId` 必须和医生、患者、会诊医生在业务系统中的身份保持一致。
+- `userSig` 必须由客户服务端生成，不建议在前端生成。
+
+## 2. 当前用户接口
+
+```http
+GET /api/medical/users/me
+Authorization: Bearer <customer-token>
+```
+
+响应：
+
+```json
+{
+  "userId": "doctor_001",
+  "userName": "李医生",
+  "avatarUrl": "",
+  "role": "doctor",
+  "title": "主任医师",
+  "department": "心内科",
+  "hospital": "示例医院"
+}
+```
+
+## 3. 预约详情接口
+
+```http
+GET /api/medical/appointments/{appointmentId}
+Authorization: Bearer <customer-token>
+```
+
+响应：
+
+```json
+{
+  "id": "APT10001",
+  "roomId": "medical-room-APT10001",
+  "doctorId": "doctor_001",
+  "patientId": "patient_001",
+  "consultantDoctorIds": ["doctor_002"],
+  "scheduleStartTime": 1760000000,
+  "scheduleEndTime": 1760001800,
+  "chiefComplaint": "咳嗽 3 天",
+  "allergyHistory": "无",
+  "medicalHistory": "无重大疾病史",
+  "patientAge": 35,
+  "patientGender": "男",
+  "patientPhone": "138****5678"
+}
+```
+
+说明：
+
+- `roomId` 建议由客户后端生成并持久化。
+- 时间戳建议统一使用秒。
+- `doctorId`、`patientId`、`consultantDoctorIds` 应和音视频登录 `userId` 一致。
+
+## 4. 医生今日预约列表
+
+```http
+GET /api/medical/doctors/{doctorId}/appointments?date=2026-05-13
+Authorization: Bearer <customer-token>
+```
+
+响应：
+
+```json
+{
+  "list": [
+    {
+      "id": "APT10001",
+      "roomId": "medical-room-APT10001",
+      "doctorId": "doctor_001",
+      "patientId": "patient_001",
+      "scheduleStartTime": 1760000000,
+      "scheduleEndTime": 1760001800,
+      "chiefComplaint": "咳嗽 3 天",
+      "allergyHistory": "无",
+      "medicalHistory": "无重大疾病史",
+      "patientAge": 35,
+      "patientGender": "男",
+      "patientPhone": "138****5678"
+    }
+  ]
+}
+```
+
+## 5. 患者预约列表
+
+```http
+GET /api/medical/patients/{patientId}/appointments
+Authorization: Bearer <customer-token>
+```
+
+响应结构同医生预约列表。
+
+## 6. 会诊医生列表
+
+```http
+GET /api/medical/doctors?keyword=心内科
+Authorization: Bearer <customer-token>
+```
+
+响应：
+
+```json
+{
+  "list": [
+    {
+      "userId": "doctor_002",
+      "userName": "王医生",
+      "avatarUrl": "",
+      "role": "doctor",
+      "title": "副主任医师",
+      "department": "心内科",
+      "hospital": "示例医院"
+    }
+  ]
+}
+```
+
+## 7. 接入建议
+
+- 页面层不要直接请求客户接口。
+- 在 `src/services/adapters/integration/` 中完成接口请求和字段映射。
+- 客户接口返回字段可以不同，但最终应转换为 `MedicalUser` 和 `MedicalAppointment`。
+- 预约取消、改期、过期等状态建议由客户后端统一管理，前端只展示接口结果。

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/docs/integration.zh-CN.md

@@ -0,0 +1,154 @@
+# 医疗场景源码接入说明
+
+本文面向客户前端团队，说明如何基于当前源码模板完成真实业务数据接入和 UI 定制。
+
+## 1. 接入定位
+
+当前项目是一套医疗音视频问诊前端源码模板。建议按下面职责理解：
+
+| 区域 | 职责 |
+| --- | --- |
+| 左侧音视频区 | SDK 房间、音视频流、设备控制、呼叫接听 |
+| 中间业务区 | 客户 EMR / HIS / PACS / 处方 / 随访等业务页面 |
+| 右侧协同区 | 聊天、实时转写、成员管理、会诊邀请 |
+| service 适配层 | 将客户接口数据转换为模板内部统一结构 |
+
+医疗业务主数据由客户系统管理，模板只提供音视频链路和前端接入示例。
+
+## 2. 推荐接入顺序
+
+1. 设置 `VITE_MEDICAL_MODE=integration`。
+2. 改造 `src/services/adapters/integration/authService.ts`，打通业务入口参数。
+3. 改造 `src/services/adapters/integration/userService.ts`，接入医生和患者信息。
+4. 改造 `src/services/adapters/integration/appointmentService.ts`，接入预约单和 `roomId`。
+5. 将测试 UserSig 逻辑替换为客户服务端签发。
+6. 替换 `src/components/MedicalBusinessPanel.vue`，接入客户业务系统。
+7. 按客户品牌规范调整页面文案、颜色和布局。
+
+## 3. 入口参数
+
+`integration` 模式默认从 URL 读取启动参数。
+
+医生入口示例：
+
+```text
+?role=doctor&userId=doctor_001&appointmentId=APT10001&patientId=patient_001&token=xxxx
+```
+
+患者入口示例：
+
+```text
+?role=patient&userId=patient_001&appointmentId=APT10001&doctorId=doctor_001&token=xxxx
+```
+
+| 参数 | 必填 | 说明 |
+| --- | --- | --- |
+| `role` | 是 | `doctor` 或 `patient` |
+| `userId` | 是 | 当前登录用户 ID，需要和 SDK 登录 ID 一致 |
+| `appointmentId` | 建议传 | 当前预约单 ID |
+| `doctorId` | 建议传 | 当前预约单主治医生 ID，患者入口建议携带 |
+| `patientId` | 建议传 | 当前预约单患者 ID，医生入口建议携带 |
+| `token` | 建议传 | 客户业务 token |
+
+如果客户通过 SSO、宿主应用或 WebView 注入上下文，可以改造 `getLaunchContext()`。
+
+## 4. 用户数据
+
+用户数据统一由 `userService` 提供，模板内部结构为：
+
+```ts
+interface MedicalUser {
+  userId: string;
+  userName: string;
+  avatarUrl: string;
+  role: 'doctor' | 'patient';
+  title?: string;
+  department?: string;
+  hospital?: string;
+}
+```
+
+客户接口字段建议在 `integration/userService.ts` 中转换，不建议页面直接依赖客户后端字段。
+
+## 5. 预约与 roomId
+
+预约数据统一由 `appointmentService` 提供，模板内部结构为：
+
+```ts
+interface MedicalAppointment {
+  id: string;
+  roomId: string;
+  doctorId: string;
+  patientId: string;
+  scheduleStartTime: number;
+  scheduleEndTime: number;
+  chiefComplaint: string;
+  allergyHistory: string;
+  medicalHistory: string;
+  patientAge: number;
+  patientGender: string;
+  patientPhone: string;
+}
+```
+
+建议客户后端生成并持久化 `roomId`，前端只读取该 `roomId` 并进入对应音视频房间。
+
+注意事项：
+
+- `doctorId`、`patientId` 必须和 SDK 登录 `userId` 一致。
+- `scheduleStartTime`、`scheduleEndTime` 使用秒级时间戳。
+- 同一预约单的 `roomId` 必须稳定。
+- 预约取消、改期、过期状态建议由客户后端统一管理。
+
+## 6. 业务区替换
+
+医生端中间业务区入口：
+
+- `src/components/MedicalBusinessPanel.vue`
+
+正式接入建议设置：
+
+```bash
+VITE_MEDICAL_BUSINESS_PANEL_MODE=slot
+```
+
+客户可以保留外层容器，只替换内部组件，也可以直接替换整个 `MedicalBusinessPanel.vue`。
+
+## 7. MDT 会诊
+
+当前模板支持主治医生邀请会诊医生加入房间。
+
+权限默认如下：
+
+| 能力 | 主治医生 | 会诊医生 | 患者 |
+| --- | --- | --- | --- |
+| 邀请会诊医生 | 是 | 否 | 否 |
+| 移出成员 | 是 | 否 | 否 |
+| 管理患者设备 | 是 | 否 | 否 |
+| 查看业务工作区 | 是 | 否 | 否 |
+| 聊天 / 转写 | 是 | 是 | 可按客户策略保留 |
+| 参与音视频 | 是 | 是 | 是 |
+
+相关逻辑：
+
+- `src/features/consultation/components/ConsultationVideoStage.vue`
+- `src/features/consultation/useConsultationParticipants.ts`
+- `src/features/consultation/useConsultationPermissions.ts`
+
+## 8. 后端接口与主题定制
+
+更多说明见：
+
+- `docs/backend-contract.zh-CN.md`
+- `docs/theme.zh-CN.md`
+
+## 9. demo-only 内容
+
+以下内容仅用于本地演示：
+
+- `src/mock/*` 中的医生、患者和预约数据。
+- `PatientSelectDoctorView.vue` 患者选择医生流程。
+- 病历、处方、检查资料示例组件。
+- 问诊结束页中的处方和结果展示。
+
+正式接入时，请替换为客户业务系统数据或隐藏对应入口。

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/docs/theme.zh-CN.md

@@ -0,0 +1,78 @@
+# 医疗场景主题定制说明
+
+本文说明如何调整医疗问诊模板的品牌色和基础视觉风格。
+
+## 1. 样式入口
+
+```text
+src/styles/
+  index.css
+  tailwind.css
+  theme.css
+```
+
+- `index.css`：全局样式入口。
+- `tailwind.css`：Tailwind CSS 引入入口。
+- `theme.css`：主题变量和基础样式。
+
+## 2. 推荐优先修改的变量
+
+主题变量位于 `src/styles/theme.css` 的 `:root` 中。
+
+| 变量 | 用途 |
+| --- | --- |
+| `--primary` | 主品牌色，默认用于主要按钮、医生端高亮 |
+| `--primary-hover` | 主按钮 hover 色 |
+| `--medical-success` | 成功、在线、接通等状态 |
+| `--medical-warning` | 提醒、待处理状态 |
+| `--medical-info` | 信息提示和患者侧辅助色 |
+| `--medical-urgent` | 紧急、危险状态 |
+| `--background` | 页面背景 |
+| `--foreground` | 默认文字颜色 |
+| `--border` | 默认边框颜色 |
+
+## 3. 品牌色替换建议
+
+如果客户只需要替换品牌色，优先调整：
+
+```css
+:root {
+  --primary: #0d9488;
+  --primary-hover: #0f766e;
+  --medical-success: #10b981;
+  --ring: #0d9488;
+}
+```
+
+`theme.css` 已将医疗状态色注册为 Tailwind 颜色 token，例如 `bg-medical-success`、`from-primary`、`to-primary-hover`。页面中仍存在少量历史 Tailwind 任意颜色类，如果需要完整品牌化，建议继续替换为主题 token 对应的语义化 class。
+
+## 4. 页面文案和品牌名称
+
+常见修改文件：
+
+- `src/views/LoginView.vue`
+- `src/views/DoctorDashboardView.vue`
+- `src/views/PatientSelectDoctorView.vue`
+- `src/views/PatientWaitingView.vue`
+- `src/views/PatientConsultationFinishedView.vue`
+
+建议使用客户真实品牌名称替换“示例医疗平台”，并保留“源码模板 / 业务插槽示例”等说明，避免用户误解为完整医疗业务系统。
+
+## 5. 推荐优先调整的基础组件
+
+为了减少页面模板中重复的 Tailwind class，常用交互样式已收敛到以下组件：
+
+```text
+src/components/
+  MedicalButton.vue
+  MedicalAlert.vue
+  MedicalConfirmDialog.vue
+  LoadingSpinner.vue
+```
+
+- `MedicalButton.vue`：统一按钮的 `variant`、`size`、`loading`、`disabled` 行为。客户替换主按钮风格时，优先改这里。
+- `MedicalAlert.vue`：统一权限提醒、错误提示、信息提示的视觉样式。
+- `MedicalConfirmDialog.vue`：统一危险操作二次确认弹窗，例如医生结束问诊。
+- `LoadingSpinner.vue`：统一按钮内 loading 图标。
+
+页面中仍保留 `flex`、`grid`、`gap`、`p-*` 等布局类，方便二开时直接理解结构；品牌色、圆角、按钮状态等视觉规范优先通过上述组件和 `theme.css` 调整。

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Medical Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+  </html>

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@tencentcloud/room-uikit-medical-vue3",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite --force",
+    "build": "vue-tsc --noEmit --skipLibCheck && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-vue-next": "^1.0.0",
+    "tw-animate-css": "1.3.8",
+    "vue": "^3.4.0",
+    "vue-router": "^4.4.3",
+    "@tencentcloud/uikit-base-component-vue3": "1.4.3",
+    "tuikit-atomicx-vue3": "^5.9.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.2",
+    "@types/node": "^18.19.31",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "sass": "^1.77.8",
+    "tailwindcss": "4.1.12",
+    "typescript": "^5.5.4",
+    "vite": "^5.2.8",
+    "vue-tsc": "^2.0.6"
+  }
+}

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/src/App.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
+import { medicalLanguage } from '@/i18n/state';
+import { initMedicalI18n } from '@/i18n';
+
+initMedicalI18n();
+
+watch(
+  medicalLanguage,
+  () => {
+    document.documentElement.lang = medicalLanguage.value;
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <UIKitProvider
+    :theme="{ themeStyle: 'light', primaryColor: 'theme' }"
+    :language="medicalLanguage"
+  >
+    <router-view />
+  </UIKitProvider>
+</template>