@tencent-rtc/trtc-agent-skills 0.1.0

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

@@ -0,0 +1,454 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import {
+  Activity,
+  CheckCircle2,
+  FileText,
+  Phone,
+  Shield,
+  Stethoscope,
+  Video,
+  X,
+} from '@/shared/icons';
+import { RoomEvent, useRoomState } from 'tuikit-atomicx-vue3';
+import { services } from '@/services/adapters';
+import { formatTimeRange } from '@/utils/format';
+import { getSessionUser } from '@/utils/session';
+import LoadingSpinner from '@/components/LoadingSpinner.vue';
+import MedicalButton from '@/components/MedicalButton.vue';
+import LanguageSwitch from '@/components/LanguageSwitch.vue';
+
+const route = useRoute();
+const router = useRouter();
+const roomState = useRoomState();
+const { t } = useUIKit();
+
+const joining = ref(false);
+const rejecting = ref(false);
+const returning = ref(false);
+const incomingCall = ref(false);
+const callMessage = ref(t('Medical.PatientWaiting.InitialCallMessage'));
+
+const appointment = computed(() =>
+  services.appointment.getAppointmentById(String(route.params.appointmentId))
+);
+const doctor = computed(() =>
+  appointment.value
+    ? services.user.getDoctorById(appointment.value.doctorId)
+    : null
+);
+const appointmentTime = computed(() => {
+  if (!appointment.value) {
+    return '-';
+  }
+  return formatTimeRange(
+    appointment.value.scheduleStartTime,
+    appointment.value.scheduleEndTime
+  );
+});
+
+async function acceptIncomingCall() {
+  if (!appointment.value || joining.value || rejecting.value) {
+    return;
+  }
+  joining.value = true;
+  try {
+    if (incomingCall.value) {
+      try {
+        await roomState.acceptCall({ roomId: appointment.value.roomId });
+      } catch {
+        await roomState.joinRoom({ roomId: appointment.value.roomId });
+      }
+    } else {
+      await roomState.joinRoom({ roomId: appointment.value.roomId });
+    }
+    router.push(`/patient/consultation/${appointment.value.id}`);
+    callMessage.value = '';
+  } catch (error) {
+    callMessage.value =
+      error instanceof Error ? error.message : t('Medical.PatientWaiting.JoinFailed');
+  } finally {
+    joining.value = false;
+  }
+}
+
+async function rejectIncomingCall() {
+  if (!appointment.value || joining.value || rejecting.value) {
+    return;
+  }
+  rejecting.value = true;
+  try {
+    await roomState
+      .rejectCall({ roomId: appointment.value.roomId })
+      .catch(() => undefined);
+    incomingCall.value = false;
+    callMessage.value = t('Medical.PatientWaiting.RejectedMessage');
+  } finally {
+    rejecting.value = false;
+  }
+}
+
+async function returnToDoctorList() {
+  if (returning.value) {
+    return;
+  }
+  returning.value = true;
+  try {
+    await router.replace('/patient/select-doctor');
+  } finally {
+    returning.value = false;
+  }
+}
+
+function handleCallReceived(eventInfo: any) {
+  if (eventInfo.roomInfo?.roomId !== appointment.value?.roomId) {
+    return;
+  }
+  incomingCall.value = true;
+  callMessage.value =
+    eventInfo.extensionInfo || t('Medical.PatientWaiting.CallingMessage', { doctor: doctor.value?.userName });
+}
+
+function handleCallCancelled(eventInfo: any) {
+  if (eventInfo.roomInfo?.roomId !== appointment.value?.roomId) {
+    return;
+  }
+  incomingCall.value = false;
+  callMessage.value = t('Medical.PatientWaiting.CancelledMessage');
+}
+
+function handleCallTimeout(eventInfo: any) {
+  if (eventInfo.roomInfo?.roomId !== appointment.value?.roomId) {
+    return;
+  }
+  incomingCall.value = false;
+  callMessage.value = t('Medical.PatientWaiting.TimeoutMessage');
+}
+
+onMounted(async () => {
+  const currentUser = getSessionUser();
+  if (!currentUser || currentUser.role !== 'patient' || !appointment.value) {
+    router.replace('/login');
+    return;
+  }
+
+  await roomState.getScheduledRoomList({ cursor: '' }).catch(() => undefined);
+  roomState.subscribeEvent(RoomEvent.onCallReceived, handleCallReceived);
+  roomState.subscribeEvent(RoomEvent.onCallCancelled, handleCallCancelled);
+  roomState.subscribeEvent(RoomEvent.onCallTimeout, handleCallTimeout);
+});
+
+onBeforeUnmount(() => {
+  roomState.unsubscribeEvent(RoomEvent.onCallReceived, handleCallReceived);
+  roomState.unsubscribeEvent(RoomEvent.onCallCancelled, handleCallCancelled);
+  roomState.unsubscribeEvent(RoomEvent.onCallTimeout, handleCallTimeout);
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="incomingCall && appointment && doctor"
+      class="fixed inset-0 z-[100] flex h-[100dvh] w-screen items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
+    >
+      <div
+        class="w-full max-w-sm border-none shadow-2xl rounded-3xl overflow-hidden bg-white animate-in fade-in zoom-in duration-300 relative"
+      >
+        <button
+          @click="rejectIncomingCall"
+          :disabled="rejecting || joining"
+          class="absolute top-4 right-4 z-10 w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm hover:bg-white/30 transition-colors flex items-center justify-center disabled:opacity-60 disabled:cursor-not-allowed"
+        >
+          <LoadingSpinner v-if="rejecting" class="text-white" />
+          <X v-else class="w-5 h-5 text-white" />
+        </button>
+
+        <div
+          class="bg-gradient-to-r from-[#10B981] to-[#0D9488] p-6 text-center"
+        >
+          <div class="relative inline-block mb-4">
+            <div
+              class="w-24 h-24 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center mx-auto"
+            >
+              <Phone class="w-12 h-12 text-white" />
+            </div>
+            <div
+              class="absolute inset-0 rounded-full border-4 border-white/50 animate-ping"
+            ></div>
+            <div
+              class="absolute inset-0 rounded-full border-4 border-white/30"
+            ></div>
+          </div>
+          <h3 class="text-2xl font-semibold text-white mb-2">{{ t('Medical.PatientWaiting.DoctorCalling') }}</h3>
+          <p class="text-white/90 text-sm">
+            {{ t('Medical.PatientWaiting.InviteToConsultation', { doctor: doctor.userName }) }}
+          </p>
+        </div>
+        <div class="p-6 bg-white">
+          <div class="flex items-center gap-3 mb-6 p-4 bg-gray-50 rounded-xl">
+            <div
+              class="w-12 h-12 rounded-full bg-gradient-to-br from-[#0D9488] to-[#0F766E] text-white flex items-center justify-center text-lg font-semibold"
+            >
+              {{ doctor.userName.slice(0, 1) }}
+            </div>
+            <div>
+              <p class="font-semibold text-gray-900">{{ doctor.userName }}</p>
+              <p class="text-sm text-gray-500">
+                {{ doctor.department }} · {{ doctor.title }}
+              </p>
+            </div>
+          </div>
+          <div class="flex gap-3">
+            <MedicalButton
+              @click="rejectIncomingCall"
+              :disabled="rejecting || joining"
+              :loading="rejecting"
+              variant="outline"
+              size="lg"
+              class="flex-1"
+            >
+              {{ rejecting ? t('Medical.Common.Processing') : t('Medical.PatientWaiting.JoinLater') }}
+            </MedicalButton>
+            <MedicalButton
+              @click="acceptIncomingCall"
+              :loading="joining"
+              size="lg"
+              class="flex-1 bg-gradient-to-r from-medical-success to-primary hover:from-primary hover:to-primary-hover shadow-lg shadow-emerald-500/30"
+            >
+              <Video v-if="!joining" class="w-5 h-5" />
+              {{ joining ? t('Medical.PatientWaiting.Joining') : t('Medical.PatientWaiting.JoinNow') }}
+            </MedicalButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+
+  <div
+    v-if="appointment && doctor"
+    class="min-h-screen bg-gradient-to-b from-[#F8FAFB] to-[#E0F2F1]"
+  >
+    <div class="bg-gradient-to-r from-[#0D9488] to-[#0F766E] pt-safe">
+      <div class="px-4 py-4 text-white">
+        <div class="flex items-start justify-between gap-3 mb-2">
+          <div class="flex items-center gap-3 min-w-0">
+            <div class="bg-white/20 backdrop-blur-sm p-2 rounded-xl">
+              <Stethoscope class="w-5 h-5" />
+            </div>
+            <div class="min-w-0">
+              <h1 class="font-semibold text-2xl leading-none">{{ t('Medical.Common.PlatformName') }}</h1>
+              <p class="text-xs text-white/80 mt-1">{{ t('Medical.PatientWaiting.Subtitle') }}</p>
+            </div>
+          </div>
+          <LanguageSwitch />
+        </div>
+      </div>
+    </div>
+
+    <div class="px-4 py-4 space-y-4 pb-safe">
+      <div
+        class="border-none shadow-[0_4px_20px_rgba(0,0,0,0.08)] rounded-3xl bg-white overflow-hidden"
+      >
+        <div class="p-6 text-center">
+          <div class="relative inline-block mb-6">
+            <div class="absolute inset-0 flex items-center justify-center">
+              <div
+                class="w-40 h-40 rounded-full bg-[#0D9488]/5 animate-pulse"
+              ></div>
+            </div>
+            <div
+              class="absolute inset-0 flex items-center justify-center animate-spin"
+              style="animation-duration: 4s"
+            >
+              <svg class="w-36 h-36" viewBox="0 0 100 100">
+                <circle
+                  cx="50"
+                  cy="50"
+                  r="45"
+                  fill="none"
+                  stroke="url(#waiting-ring-gradient)"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-dasharray="70 200"
+                />
+                <defs>
+                  <linearGradient
+                    id="waiting-ring-gradient"
+                    x1="0%"
+                    y1="0%"
+                    x2="100%"
+                    y2="100%"
+                  >
+                    <stop offset="0%" stop-color="#0D9488" stop-opacity="0.8" />
+                    <stop
+                      offset="100%"
+                      stop-color="#10B981"
+                      stop-opacity="0.3"
+                    />
+                  </linearGradient>
+                </defs>
+              </svg>
+            </div>
+            <div
+              class="relative w-28 h-28 rounded-full bg-gradient-to-br from-[#0D9488] to-[#0F766E] flex items-center justify-center mx-auto shadow-xl shadow-teal-500/20"
+            >
+              <Stethoscope class="w-14 h-14 text-white animate-pulse" />
+            </div>
+          </div>
+
+          <h2 class="text-2xl font-semibold text-gray-900 mb-2">{{ t('Medical.PatientWaiting.Title') }}</h2>
+          <p class="text-gray-600 mb-6 text-base leading-7">
+            {{ t('Medical.PatientWaiting.Description') }}
+          </p>
+
+          <div
+            class="inline-flex items-center gap-4 bg-gradient-to-r from-[#F0FDFA] to-white px-6 py-4 rounded-2xl shadow-sm border border-[#0D9488]/10"
+          >
+            <div
+              class="w-12 h-12 rounded-full ring-2 ring-[#0D9488]/20 bg-gradient-to-br from-[#0D9488] to-[#0F766E] text-white flex items-center justify-center text-lg font-semibold"
+            >
+              {{ doctor.userName.slice(0, 1) }}
+            </div>
+            <div class="text-left">
+              <p class="font-semibold text-gray-900">{{ doctor.userName }}</p>
+              <p class="text-sm text-gray-500">
+                {{ doctor.department }} · {{ doctor.title }}
+              </p>
+            </div>
+            <span
+              class="bg-emerald-500/10 text-emerald-700 shrink-0 ml-2 px-2.5 py-1 rounded-full text-xs font-medium"
+            >
+              {{ t('Medical.Common.Online') }}
+            </span>
+          </div>
+          <p class="text-xs text-gray-500 mt-4">{{ callMessage }}</p>
+        </div>
+
+        <div class="h-px bg-gray-100"></div>
+
+        <div class="p-6 bg-gray-50">
+          <h3 class="font-medium text-gray-900 mb-4 text-sm">{{ t('Medical.PatientWaiting.Flow') }}</h3>
+          <div class="space-y-4">
+            <div class="flex items-start gap-3">
+              <div
+                class="w-8 h-8 rounded-full bg-emerald-500 flex items-center justify-center shrink-0 shadow-md"
+              >
+                <CheckCircle2 class="w-5 h-5 text-white" />
+              </div>
+              <div class="flex-1 pt-1">
+                <p class="font-medium text-gray-900 text-sm">{{ t('Medical.PatientWaiting.StepAppointment') }}</p>
+                <p class="text-xs text-gray-500 mt-0.5">{{ t('Medical.PatientWaiting.StepAppointmentDesc') }}</p>
+              </div>
+            </div>
+
+            <div class="flex items-start gap-3">
+              <div
+                class="w-8 h-8 rounded-full bg-[#0D9488] flex items-center justify-center shrink-0 shadow-md"
+              >
+                <Activity class="w-5 h-5 text-white animate-pulse" />
+              </div>
+              <div class="flex-1 pt-1">
+                <p class="font-medium text-[#0D9488] text-sm">
+                  {{ t('Medical.PatientWaiting.StepWaiting') }}
+                </p>
+                <p class="text-xs text-gray-500 mt-0.5">{{ t('Medical.PatientWaiting.StepWaitingDesc') }}</p>
+              </div>
+            </div>
+
+            <div class="flex items-start gap-3">
+              <div
+                class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center shrink-0"
+              >
+                <Video class="w-5 h-5 text-gray-400" />
+              </div>
+              <div class="flex-1 pt-1">
+                <p class="text-sm text-gray-400">{{ t('Medical.PatientWaiting.StepVideo') }}</p>
+                <p class="text-xs text-gray-400 mt-0.5">{{ t('Medical.PatientWaiting.StepVideoDesc') }}</p>
+              </div>
+            </div>
+
+            <div class="flex items-start gap-3">
+              <div
+                class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center shrink-0"
+              >
+                <FileText class="w-5 h-5 text-gray-400" />
+              </div>
+              <div class="flex-1 pt-1">
+                <p class="text-sm text-gray-400">{{ t('Medical.PatientWaiting.StepPrescription') }}</p>
+                <p class="text-xs text-gray-400 mt-0.5">{{ t('Medical.PatientWaiting.StepPrescriptionDesc') }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="border-none shadow-[0_2px_12px_rgba(0,0,0,0.06)] rounded-2xl bg-white"
+      >
+        <div class="p-5">
+          <h3 class="font-semibold text-gray-900 mb-4 flex items-center gap-2">
+            <FileText class="w-4 h-4 text-[#0D9488]" />
+            {{ t('Medical.PatientWaiting.AppointmentDetails') }}
+          </h3>
+          <div class="space-y-3">
+            <div class="flex items-center justify-between py-2">
+              <span class="text-sm text-gray-500">{{ t('Medical.PatientWaiting.AppointmentTime') }}</span>
+              <span class="text-sm font-medium text-gray-900">{{
+                appointmentTime
+              }}</span>
+            </div>
+            <div class="h-px bg-gray-100"></div>
+            <div class="flex items-center justify-between py-2">
+              <span class="text-sm text-gray-500">{{ t('Medical.PatientWaiting.AppointmentId') }}</span>
+              <span class="text-sm font-mono font-medium text-gray-900">{{
+                appointment.id
+              }}</span>
+            </div>
+            <div class="h-px bg-gray-100"></div>
+            <div class="py-2">
+              <span class="text-sm text-gray-500 block mb-2">{{ t('Medical.PatientWaiting.ChiefComplaint') }}</span>
+              <p class="text-sm text-gray-900 bg-gray-50 p-3 rounded-xl">
+                {{ appointment.chiefComplaint }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="border-none shadow-[0_2px_12px_rgba(0,0,0,0.06)] rounded-2xl bg-gradient-to-r from-blue-50 to-white border-l-4 border-l-blue-500"
+      >
+        <div class="p-5">
+          <div class="flex items-start gap-3">
+            <div
+              class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center shrink-0"
+            >
+              <Shield class="w-4 h-4 text-blue-600" />
+            </div>
+            <div>
+              <h4 class="font-semibold text-gray-900 mb-2 text-sm">{{ t('Medical.Login.Tips') }}</h4>
+              <ul class="text-xs text-gray-600 space-y-1.5 leading-relaxed">
+                <li>{{ t('Medical.PatientWaiting.Tip1') }}</li>
+                <li>{{ t('Medical.PatientWaiting.Tip2') }}</li>
+                <li>{{ t('Medical.PatientWaiting.Tip3') }}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <MedicalButton
+        v-if="!incomingCall"
+        @click="returnToDoctorList"
+        :loading="returning"
+        variant="outline"
+        size="lg"
+        block
+      >
+        {{ returning ? t('Medical.PatientWaiting.Returning') : t('Medical.PatientWaiting.BackToDoctors') }}
+      </MedicalButton>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "strict": false,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom", "dom.iterable"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

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

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["vite.config.ts"]
+}

package/skills/trtc/room-builder/templates/scenarios/medical-consultation/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'node:path';
+
+export default defineConfig({
+  root: __dirname,
+  base: process.env.NODE_ENV === 'production' ? './' : '/',
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  plugins: [vue()],
+  server: {
+    open: true,
+  },
+});

package/skills/trtc/room-builder/templates/scenarios/medical-consultation//346/216/245/345/205/245/350/257/264/346/230/216.md

@@ -0,0 +1,6 @@
+# 医疗场景源码接入说明
+
+客户接入说明当前维护在 `docs/integration.zh-CN.md` 中，请优先查看：
+
+- `docs/integration.zh-CN.md`
+