@tencent-rtc/trtc-agent-skills 0.1.0

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

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { Check, ChevronDown, Languages } from 'lucide-vue-next';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { computed, onBeforeUnmount, ref } from 'vue';
+import {
+  medicalLanguage,
+  setMedicalLanguage,
+  type MedicalLanguage,
+} from '@/i18n/state';
+
+const menuVisible = ref(false);
+const rootRef = ref<HTMLElement | null>(null);
+const { t } = useUIKit();
+
+const languageOptions: Array<{
+  labelKey: string;
+  shortLabel: string;
+  value: MedicalLanguage;
+}> = [
+  { labelKey: 'Medical.Language.Chinese', shortLabel: 'ZH', value: 'zh-CN' },
+  { labelKey: 'Medical.Language.English', shortLabel: 'EN', value: 'en-US' },
+];
+
+const currentLanguage = computed(
+  () =>
+    languageOptions.find(item => item.value === medicalLanguage.value) ||
+    languageOptions[0]
+);
+
+function toggleMenu() {
+  menuVisible.value = !menuVisible.value;
+}
+
+function selectLanguage(language: MedicalLanguage) {
+  setMedicalLanguage(language);
+  menuVisible.value = false;
+}
+
+function handleDocumentClick(event: MouseEvent) {
+  if (!rootRef.value?.contains(event.target as Node)) {
+    menuVisible.value = false;
+  }
+}
+
+function handleEscape(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    menuVisible.value = false;
+  }
+}
+
+document.addEventListener('click', handleDocumentClick);
+document.addEventListener('keydown', handleEscape);
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleDocumentClick);
+  document.removeEventListener('keydown', handleEscape);
+});
+</script>
+
+<template>
+  <div ref="rootRef" class="medical-language-selector">
+    <button
+      class="medical-language-trigger"
+      type="button"
+      aria-haspopup="menu"
+      :aria-expanded="menuVisible"
+      @click.stop="toggleMenu"
+    >
+      <Languages :size="15" />
+      <span class="medical-language-current">
+        {{ t(currentLanguage.labelKey) }}
+      </span>
+      <ChevronDown
+        :size="14"
+        :class="[
+          'medical-language-chevron',
+          menuVisible ? 'medical-language-chevron-open' : '',
+        ]"
+      />
+    </button>
+
+    <div v-if="menuVisible" class="medical-language-menu" role="menu">
+      <button
+        v-for="item in languageOptions"
+        :key="item.value"
+        class="medical-language-option"
+        type="button"
+        role="menuitemradio"
+        :aria-checked="medicalLanguage === item.value"
+        @click="selectLanguage(item.value)"
+      >
+        <span class="medical-language-option-badge">{{ item.shortLabel }}</span>
+        <span>{{ t(item.labelKey) }}</span>
+        <Check
+          v-if="medicalLanguage === item.value"
+          :size="15"
+          class="medical-language-check"
+        />
+      </button>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,6 @@
+<template>
+  <span
+    class="inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent align-[-2px]"
+    aria-hidden="true"
+  ></span>
+</template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { AlertCircle, CheckCircle2 } from '@/shared/icons';
+
+const props = withDefaults(
+  defineProps<{
+    variant?: 'warning' | 'error' | 'info' | 'success';
+  }>(),
+  {
+    variant: 'info',
+  }
+);
+
+const alertClasses = computed(() => [
+  'flex items-start gap-2 rounded-2xl border px-4 py-3 text-sm leading-6 backdrop-blur-md',
+  {
+    warning: 'border-amber-300/40 bg-amber-500/15 text-amber-50',
+    error: 'border-red-300/40 bg-red-500/15 text-red-50',
+    info: 'border-primary/30 bg-primary/10 text-primary',
+    success: 'border-emerald-300/40 bg-emerald-500/15 text-emerald-50',
+  }[props.variant],
+]);
+
+const iconComponent = computed(() =>
+  props.variant === 'success' ? CheckCircle2 : AlertCircle
+);
+</script>
+
+<template>
+  <div :class="alertClasses">
+    <component :is="iconComponent" :size="18" class="mt-0.5 shrink-0" />
+    <span><slot /></span>
+  </div>
+</template>

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

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { computed, ref, type Component } from 'vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { FileText, Pill, FolderOpen, LayoutPanelLeft } from '@/shared/icons';
+import {
+  MEDICAL_BUSINESS_PANEL_MODE,
+  MEDICAL_BUSINESS_SLOT_TITLE,
+} from '@/config/runtime-config';
+import type { MedicalAppointment, MedicalUser } from '@/services/adapters';
+import MedicalRecordPanel from '@/components/MedicalRecordPanel.vue';
+import PrescriptionPanel from '@/components/PrescriptionPanel.vue';
+import MedicalDataPanel from '@/components/MedicalDataPanel.vue';
+
+type BusinessTab = 'record' | 'prescription' | 'data' | 'slot';
+
+const props = defineProps<{
+  appointment: MedicalAppointment;
+  patient: MedicalUser;
+}>();
+const { t } = useUIKit();
+
+const activeTab = ref<BusinessTab>(
+  MEDICAL_BUSINESS_PANEL_MODE === 'slot' ? 'slot' : 'record'
+);
+
+const patientInfo = computed(() => ({
+  name: props.patient.userName,
+  age: props.appointment.patientAge,
+  gender: props.appointment.patientGender,
+  allergy_history: props.appointment.allergyHistory,
+}));
+
+const tabs = computed<
+  Array<{ value: BusinessTab; label: string; icon: Component }>
+>(() => {
+  const baseTabs: Array<{
+    value: BusinessTab;
+    label: string;
+    icon: Component;
+  }> = [
+    { value: 'record', label: t('Medical.Business.RecordTab'), icon: FileText },
+    { value: 'prescription', label: t('Medical.Business.PrescriptionTab'), icon: Pill },
+    { value: 'data', label: t('Medical.Business.DataTab'), icon: FolderOpen },
+  ];
+
+  if (MEDICAL_BUSINESS_PANEL_MODE === 'slot') {
+    return [
+      { value: 'slot', label: t('Medical.Business.SlotTab'), icon: LayoutPanelLeft },
+      ...baseTabs,
+    ];
+  }
+
+  return baseTabs;
+});
+</script>
+
+<template>
+  <div
+    class="h-full min-h-0 bg-white border-none shadow-[0_4px_20px_rgba(0,0,0,0.08)] rounded-3xl overflow-hidden flex flex-col"
+  >
+    <div class="flex-1 min-h-0 flex flex-col">
+      <div class="px-5 py-4 border-b border-gray-100 bg-white">
+        <h3 class="text-sm font-semibold text-gray-900">{{ t('Medical.Business.Workspace') }}</h3>
+        <p class="mt-1 text-xs text-gray-500">
+          {{ t('Medical.Business.WorkspaceDesc') }}
+        </p>
+      </div>
+
+      <div
+        :class="[
+          'w-full grid p-2 bg-gray-50 border-b border-gray-100',
+          tabs.length > 3 ? 'grid-cols-4' : 'grid-cols-3',
+        ]"
+      >
+        <button
+          v-for="tab in tabs"
+          :key="tab.value"
+          @click="activeTab = tab.value"
+          :class="[
+            'flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl font-medium text-sm transition-all',
+            activeTab === tab.value
+              ? 'bg-white text-[#0D9488] shadow-sm'
+              : 'text-gray-600 hover:text-gray-900',
+          ]"
+        >
+          <component :is="tab.icon" :size="16" />
+          {{ tab.label }}
+        </button>
+      </div>
+
+      <div class="flex-1 min-h-0 overflow-hidden">
+        <div
+          v-if="activeTab === 'slot'"
+          class="h-full p-6 bg-[linear-gradient(135deg,#F8FAFB_0%,#EEF8F6_100%)]"
+        >
+          <div
+            class="h-full rounded-3xl border border-dashed border-[#0D9488]/30 bg-white/70 px-8 py-10 flex flex-col justify-between"
+          >
+            <div>
+              <div
+                class="inline-flex items-center gap-2 rounded-full bg-[#0D9488]/10 text-[#0D9488] px-3 py-1 text-xs font-semibold"
+              >
+                <LayoutPanelLeft :size="14" />
+                {{ t('Medical.Business.SlotTab') }}
+              </div>
+              <h4 class="mt-4 text-2xl font-semibold text-gray-900">
+                {{ MEDICAL_BUSINESS_SLOT_TITLE }}
+              </h4>
+              <p class="mt-3 text-sm leading-7 text-gray-600">
+                {{ t('Medical.Business.SlotDesc') }}
+              </p>
+            </div>
+
+            <div class="grid grid-cols-1 gap-3 xl:grid-cols-3">
+              <div class="rounded-2xl bg-white border border-gray-100 p-4">
+                <p class="text-sm font-semibold text-gray-900">{{ t('Medical.Business.Left') }}</p>
+                <p class="mt-2 text-xs text-gray-500">{{ t('Medical.Business.LeftDesc') }}</p>
+              </div>
+              <div class="rounded-2xl bg-white border border-[#0D9488]/20 p-4">
+                <p class="text-sm font-semibold text-[#0D9488]">{{ t('Medical.Business.Center') }}</p>
+                <p class="mt-2 text-xs text-gray-500">{{ t('Medical.Business.CenterDesc') }}</p>
+              </div>
+              <div class="rounded-2xl bg-white border border-gray-100 p-4">
+                <p class="text-sm font-semibold text-gray-900">{{ t('Medical.Business.Right') }}</p>
+                <p class="mt-2 text-xs text-gray-500">
+                  {{ t('Medical.Business.RightDesc') }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-show="activeTab === 'record'" class="h-full overflow-hidden">
+          <MedicalRecordPanel :patient-info="patientInfo" />
+        </div>
+        <div
+          v-show="activeTab === 'prescription'"
+          class="h-full overflow-hidden"
+        >
+          <PrescriptionPanel :patient-info="patientInfo" />
+        </div>
+        <div v-show="activeTab === 'data'" class="h-full overflow-hidden">
+          <MedicalDataPanel :patient-info="patientInfo" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import LoadingSpinner from '@/components/LoadingSpinner.vue';
+
+const props = withDefaults(
+  defineProps<{
+    type?: 'button' | 'submit' | 'reset';
+    variant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'ghost';
+    size?: 'sm' | 'md' | 'lg' | 'icon';
+    loading?: boolean;
+    disabled?: boolean;
+    block?: boolean;
+  }>(),
+  {
+    type: 'button',
+    variant: 'primary',
+    size: 'md',
+    loading: false,
+    disabled: false,
+    block: false,
+  }
+);
+
+const buttonClasses = computed(() => [
+  'inline-flex items-center justify-center gap-2 font-medium transition-colors disabled:opacity-60 disabled:cursor-not-allowed',
+  props.block ? 'w-full' : '',
+  {
+    sm: 'h-8 rounded-lg px-3 text-sm',
+    md: 'h-11 rounded-xl px-5 text-sm',
+    lg: 'h-12 rounded-xl px-6 text-base',
+    icon: 'h-10 w-10 rounded-xl p-0',
+  }[props.size],
+  {
+    primary: 'bg-primary text-primary-foreground hover:bg-primary-hover',
+    secondary: 'bg-accent text-accent-foreground hover:bg-muted',
+    outline:
+      'border border-border bg-card text-foreground hover:border-primary hover:text-primary',
+    danger: 'bg-destructive text-destructive-foreground hover:bg-red-600',
+    ghost: 'text-muted-foreground hover:bg-accent hover:text-foreground',
+  }[props.variant],
+]);
+</script>
+
+<template>
+  <button :type="type" :disabled="disabled || loading" :class="buttonClasses">
+    <LoadingSpinner v-if="loading" />
+    <slot></slot>
+  </button>
+</template>

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

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import MedicalButton from '@/components/MedicalButton.vue';
+
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    loading?: boolean;
+    danger?: boolean;
+  }>(),
+  {
+    loading: false,
+    danger: false,
+  }
+);
+const { t } = useUIKit();
+const displayConfirmText = computed(
+  () => props.confirmText || t('Medical.Common.Confirm')
+);
+const displayCancelText = computed(
+  () => props.cancelText || t('Medical.Common.Cancel')
+);
+
+const emit = defineEmits<{
+  cancel: [];
+  confirm: [];
+}>();
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="visible"
+      class="fixed inset-0 z-[120] flex items-center justify-center bg-black/45 p-4"
+      @click.self="emit('cancel')"
+    >
+      <div
+        class="w-full max-w-[380px] rounded-3xl bg-card p-6 text-card-foreground shadow-[0_20px_60px_rgba(15,23,42,0.25)]"
+      >
+        <h3 class="text-lg font-semibold text-foreground">{{ title }}</h3>
+        <p class="mt-3 text-sm leading-6 text-muted-foreground">
+          {{ message }}
+        </p>
+        <div class="mt-6 grid grid-cols-2 gap-3">
+          <MedicalButton
+            variant="outline"
+            :disabled="loading"
+            @click="emit('cancel')"
+          >
+            {{ displayCancelText }}
+          </MedicalButton>
+          <MedicalButton
+            :variant="danger ? 'danger' : 'primary'"
+            :loading="loading"
+            @click="emit('confirm')"
+          >
+            {{ loading ? t('Medical.Common.Processing') : displayConfirmText }}
+          </MedicalButton>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

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

@@ -0,0 +1,196 @@
+<template>
+  <div class="h-full flex flex-col bg-white">
+    <div class="p-6 border-b border-gray-100 shrink-0">
+      <div class="flex items-center justify-between mb-4">
+        <div>
+          <h3 class="font-semibold text-gray-900 flex items-center gap-2">
+            <FolderOpen :size="20" class="text-[#0D9488]" />
+            {{ t('Medical.Data.Title') }}
+          </h3>
+          <p class="text-xs text-gray-500 mt-1">
+            {{ t('Medical.Data.Description') }}
+          </p>
+        </div>
+        <span
+          class="px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700"
+        >
+          {{ t('Medical.Data.FileCount', { count: files.length }) }}
+        </span>
+      </div>
+
+      <div class="bg-[#F1F5F9] rounded-xl p-3 text-sm">
+        <div class="flex items-center justify-between">
+          <span class="text-gray-600">
+            {{ t('Medical.Record.PatientLabel') }}
+            <span class="font-medium text-gray-900 ml-1">
+              {{ patientInfo.name }} ·
+              {{ t('Medical.DoctorDashboard.PatientAge', {
+                gender: patientInfo.gender,
+                age: patientInfo.age,
+              }) }}
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="px-6 pt-5 pb-4 border-b border-gray-100 bg-gray-50 shrink-0">
+      <button
+        class="w-full border-2 border-dashed border-gray-300 rounded-xl p-4 hover:border-[#0D9488] hover:bg-[#0D9488]/5 transition-all flex flex-col items-center gap-2 text-gray-600 hover:text-[#0D9488]"
+      >
+        <Upload :size="24" />
+        <div class="text-sm font-medium">{{ t('Medical.Data.Upload') }}</div>
+        <div class="text-xs text-gray-500">
+          {{ t('Medical.Data.UploadHint') }}
+        </div>
+      </button>
+    </div>
+
+    <div class="flex-1 overflow-y-auto px-6 py-5 space-y-3 custom-scrollbar">
+      <div
+        v-for="file in files"
+        :key="file.id"
+        class="border border-gray-200 rounded-2xl p-4 hover:shadow-md hover:border-[#0D9488]/30 transition-all duration-200 bg-white group"
+      >
+        <div class="flex items-start gap-4">
+          <div
+            :class="[
+              'w-16 h-16 rounded-xl flex items-center justify-center shrink-0',
+              file.type === 'image' ? 'bg-blue-50' : 'bg-orange-50',
+            ]"
+          >
+            <component
+              :is="file.type === 'image' ? ImageIcon : FileText"
+              :size="28"
+              :class="
+                file.type === 'image' ? 'text-blue-600' : 'text-orange-600'
+              "
+            />
+          </div>
+
+          <div class="flex-1 min-w-0">
+            <div class="flex items-start justify-between gap-2 mb-2">
+              <h4 class="font-medium text-gray-900 text-sm truncate">
+                {{ file.name }}
+              </h4>
+              <button
+                class="p-1.5 hover:bg-gray-100 rounded-lg transition-colors opacity-0 group-hover:opacity-100 shrink-0"
+              >
+                <MoreVertical :size="16" class="text-gray-500" />
+              </button>
+            </div>
+
+            <div class="flex items-center gap-4 text-xs text-gray-500 mb-3">
+              <span>{{ file.size }}</span>
+              <span>{{ file.date }}</span>
+              <span
+                :class="[
+                  'px-2 py-0.5 rounded-full font-medium',
+                  file.categoryKey === 'BloodRoutine'
+                    ? 'bg-red-100 text-red-700'
+                    : file.categoryKey === 'CTImage'
+                      ? 'bg-blue-100 text-blue-700'
+                      : file.categoryKey === 'XRay'
+                        ? 'bg-purple-100 text-purple-700'
+                        : 'bg-green-100 text-green-700',
+                ]"
+              >
+                {{ file.category }}
+              </span>
+            </div>
+
+            <div class="flex gap-2">
+              <button
+                class="px-3 py-1.5 bg-[#0D9488] hover:bg-[#0F766E] text-white rounded-lg text-xs font-medium transition-colors flex items-center gap-1"
+              >
+                <Eye :size="14" />
+                {{ t('Medical.Common.View') }}
+              </button>
+              <button
+                class="px-3 py-1.5 border border-gray-200 hover:bg-gray-50 rounded-lg text-xs font-medium transition-colors flex items-center gap-1"
+              >
+                <Download :size="14" />
+                {{ t('Medical.Common.Download') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="files.length === 0" class="text-center py-12">
+        <div
+          class="w-20 h-20 rounded-full bg-gray-100 mx-auto flex items-center justify-center mb-4"
+        >
+          <FolderOpen :size="32" class="text-gray-400" />
+        </div>
+        <p class="text-sm text-gray-500 mb-2">
+          {{ t('Medical.Data.EmptyTitle') }}
+        </p>
+        <p class="text-xs text-gray-400">{{ t('Medical.Data.EmptyDesc') }}</p>
+      </div>
+    </div>
+
+    <div class="p-6 border-t border-gray-100 shrink-0 bg-gray-50">
+      <div class="flex items-start gap-2 text-xs text-gray-500">
+        <AlertCircle :size="12" class="mt-0.5 shrink-0" />
+        <p>{{ t('Medical.Data.SecurityTip') }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import {
+  AlertCircle,
+  Download,
+  Eye,
+  FileText,
+  FolderOpen,
+  ImageIcon,
+  MoreVertical,
+  Upload,
+} from '@/shared/icons';
+
+interface PatientInfo {
+  name: string;
+  age: number;
+  gender: string;
+}
+
+defineProps<{
+  patientInfo: PatientInfo;
+}>();
+const { t } = useUIKit();
+
+const files = computed(() => [
+  {
+    id: '1',
+    name: t('Medical.Data.BloodRoutineReport'),
+    type: 'pdf',
+    size: '2.3 MB',
+    date: '2026-04-15',
+    category: t('Medical.Data.BloodRoutine'),
+    categoryKey: 'BloodRoutine',
+  },
+  {
+    id: '2',
+    name: t('Medical.Data.ChestCTImage'),
+    type: 'image',
+    size: '5.1 MB',
+    date: '2026-04-14',
+    category: t('Medical.Data.CTImage'),
+    categoryKey: 'CTImage',
+  },
+  {
+    id: '3',
+    name: t('Medical.Data.ECGReport'),
+    type: 'pdf',
+    size: '1.8 MB',
+    date: '2026-04-13',
+    category: t('Medical.Data.ECG'),
+    categoryKey: 'ECG',
+  },
+]);
+</script>