diff --git a/api/cases.ts b/api/cases.ts
new file mode 100644
index 0000000..5a94d56
--- /dev/null
+++ b/api/cases.ts
@@ -0,0 +1,82 @@
+export type ClinicalCase = {
+	id: string
+	title: string
+	patientName: string
+	gender: '男' | '女'
+	age: number
+	department: string
+	scene: string
+	caseNo: string
+	tone: 'blue' | 'teal' | 'pink' | 'orange' | 'purple' | 'green'
+}
+
+export function fetchCaseList(): Promise<ClinicalCase[]> {
+	return Promise.resolve([
+		{
+			id: 'case-31190016',
+			title: '间断四肢多关节肿痛5年，加重1个月',
+			patientName: '郭爱和',
+			gender: '男',
+			age: 43,
+			department: '风湿免疫科',
+			scene: '门诊部',
+			caseNo: '31190016',
+			tone: 'blue'
+		},
+		{
+			id: 'case-31180002',
+			title: '右膝关节疼痛8年，腰背部疼痛2年',
+			patientName: '索航',
+			gender: '男',
+			age: 51,
+			department: '风湿免疫科',
+			scene: '住院部',
+			caseNo: '31180002',
+			tone: 'teal'
+		},
+		{
+			id: 'case-2238015',
+			title: '阴道不规则流血4月。',
+			patientName: '韩爱利',
+			gender: '女',
+			age: 52,
+			department: '妇科',
+			scene: '住院部',
+			caseNo: '2238015',
+			tone: 'pink'
+		},
+		{
+			id: 'case-1006004',
+			title: '持续胸痛3小时',
+			patientName: '毕波涛',
+			gender: '男',
+			age: 60,
+			department: '心血管内科',
+			scene: '住院部',
+			caseNo: '1006004',
+			tone: 'orange'
+		},
+		{
+			id: 'case-31190042',
+			title: '咳嗽、咳痰10余年，加重1周',
+			patientName: '厉明',
+			gender: '男',
+			age: 52,
+			department: '呼吸内科',
+			scene: '普通门诊',
+			caseNo: '31190042',
+			tone: 'purple'
+		},
+		{
+			id: 'case-2238019',
+			title: '尿频、尿急、尿痛3天',
+			patientName: '刘晓元',
+			gender: '女',
+			age: 25,
+			department: '泌尿外科',
+			scene: '急诊留观',
+			caseNo: '2238019',
+			tone: 'green'
+		}
+	])
+}
diff --git a/api/chat.ts b/api/chat.ts
new file mode 100644
index 0000000..a06733e
--- /dev/null
+++ b/api/chat.ts
@@ -0,0 +1,106 @@
+import type { ClinicalCase } from './cases'
+
+export type ChatRole = 'patient' | 'mentor' | 'doctor'
+
+export type ChatMessage = {
+	id: string
+	role: ChatRole
+	content: string
+	label: string
+}
+
+export type ChatSession = {
+	patient: {
+		name: string
+		gender: string
+		age: number
+		department: string
+		chiefComplaint: string
+	}
+	stages: Array<{
+		key: string
+		label: string
+		active: boolean
+	}>
+	messages: ChatMessage[]
+}
+
+const defaultCase: ClinicalCase = {
+	id: 'case-1006004',
+	title: '持续胸痛3小时',
+	patientName: '陈先生',
+	gender: '男',
+	age: 60,
+	department: '心血管内科',
+	scene: '住院部',
+	caseNo: '1006004',
+	tone: 'orange'
+}
+
+export function createMockChatSession(caseItem?: ClinicalCase | null): Promise<ChatSession> {
+	const currentCase = caseItem || defaultCase
+	const patientName = currentCase.patientName === '毕波涛' ? '陈先生' : currentCase.patientName
+
+	return Promise.resolve({
+		patient: {
+			name: patientName,
+			gender: currentCase.gender,
+			age: currentCase.age,
+			department: currentCase.department,
+			chiefComplaint: currentCase.title
+		},
+		stages: [
+			{ key: 'history', label: '病史采集', active: true },
+			{ key: 'diagnosis', label: '初步诊断', active: false },
+			{ key: 'treatment', label: '治疗方案', active: false }
+		],
+		messages: [
+			{
+				id: 'patient-initial',
+				role: 'patient',
+				content: currentCase.department === '心血管内科'
+					? '医生，我心口这儿针扎一样疼了两个小时了，现在感觉喘气都费劲。'
+					: `医生，我这次主要是${currentCase.title}，有点担心。`,
+				label: '患者'
+			},
+			{
+				id: 'mentor-initial',
+				role: 'mentor',
+				content: '观察患者的面部表情和生命体征。你的第一个问题应该如何询问，以明确疼痛的性质？',
+				label: '王主任'
+			}
+		]
+	})
+}
+
+export function sendMockChatMessage(content: string): Promise<ChatMessage[]> {
+	const normalized = content.trim()
+	const patientReply = normalized.includes('出冷汗') || normalized.includes('恶心')
+		? '有，刚才疼得厉害的时候出了一身冷汗，还有点恶心，但没有吐。'
+		: normalized.includes('体格检查')
+			? '患者面色苍白，额部出汗，心率偏快，血压较入院时略低。'
+			: normalized.includes('辅助检查')
+				? '心电图提示下壁导联 ST 段抬高，肌钙蛋白待回报。'
+				: '疼痛主要在胸骨后，像压榨一样，休息后也没有明显缓解。'
+
+	return Promise.resolve([
+		{
+			id: `doctor-${Date.now()}`,
+			role: 'doctor',
+			content: normalized,
+			label: '我'
+		},
+		{
+			id: `patient-${Date.now() + 1}`,
+			role: 'patient',
+			content: patientReply,
+			label: '患者'
+		},
+		{
+			id: `mentor-${Date.now() + 2}`,
+			role: 'mentor',
+			content: '很好，继续围绕 OPQRST 思路追问疼痛诱因、部位、性质、放射、持续时间和缓解因素，同时关注危险信号。',
+			label: '王主任'
+		}
+	])
+}
diff --git a/api/config.ts b/api/config.ts
new file mode 100644
index 0000000..a557d9f
--- /dev/null
+++ b/api/config.ts
@@ -0,0 +1,74 @@
+export type ConfigOption = {
+	value: string
+	label: string
+	desc?: string
+}
+
+export type ConfigOptions = {
+	departments: ConfigOption[]
+	titles: ConfigOption[]
+	experiences: ConfigOption[]
+}
+
+export type ClinicalConfigPayload = {
+	userId: string
+	phone: string
+	institutionId: string
+	department: string
+	title: string
+	experience: string
+	departmentName: string
+	titleName: string
+	experienceName: string
+}
+
+export type ClinicalConfigResult = ClinicalConfigPayload & {
+	id: string
+	updatedAt: string
+}
+
+export const MOCK_CONFIG_OPTIONS: ConfigOptions = {
+	departments: [
+		{ value: 'im', label: '内科', desc: '心内、呼吸、消化、肾内等临床场景' },
+		{ value: 'sur', label: '外科', desc: '普外、骨科、神外、胸外等临床场景' },
+		{ value: 'ped', label: '儿科', desc: '儿童常见病、急重症与沟通训练' },
+		{ value: 'obg', label: '妇产科', desc: '围产、妇科、产科急症训练' },
+		{ value: 'er', label: '急诊科', desc: '分诊、抢救、危急值处置训练' },
+		{ value: 'icu', label: '重症医学科', desc: '危重症评估与多学科决策训练' }
+	],
+	titles: [
+		{ value: 'resident', label: '住院医师', desc: '强化基础诊疗路径与病历思维' },
+		{ value: 'attending', label: '主治医师', desc: '提升独立诊疗和带教表达' },
+		{ value: 'associate_chief', label: '副主任医师', desc: '复杂病例决策与团队协作' },
+		{ value: 'chief', label: '主任医师', desc: '疑难病例、质控和教学管理' }
+	],
+	experiences: [
+		{ value: '1-3', label: '1-3年', desc: '基础病例训练优先' },
+		{ value: '3-5', label: '3-5年', desc: '进阶诊疗路径优先' },
+		{ value: '5-10', label: '5-10年', desc: '复杂病例推演优先' },
+		{ value: '10+', label: '10年以上', desc: '疑难病例与带教模拟优先' }
+	]
+}
+
+export function fetchConfigOptions() {
+	return Promise.resolve({
+		options: MOCK_CONFIG_OPTIONS,
+		defaults: {
+			department: 'im',
+			title: 'resident',
+			experience: '1-3'
+		},
+		mentor: {
+			name: '王主任',
+			message: '欢迎回来！请配置执业信息，开始精准带教模拟。'
+		}
+	})
+}
+
+export function saveClinicalConfig(payload: ClinicalConfigPayload): Promise<ClinicalConfigResult> {
+	return Promise.resolve({
+		id: `mock-config-${Date.now()}`,
+		...payload,
+		updatedAt: new Date().toISOString()
+	})
+}
diff --git a/api/diagnosis.ts b/api/diagnosis.ts
new file mode 100644
index 0000000..d8a807f
--- /dev/null
+++ b/api/diagnosis.ts
@@ -0,0 +1,36 @@
+import type { ClinicalCase } from './cases'
+
+export type DiagnosisDraft = {
+	primaryDiagnosis: string
+	differentialDiagnosis: string[]
+	evidence: string
+}
+
+export type DiagnosisContext = {
+	mentorAdvice: string
+	defaultDraft: DiagnosisDraft
+}
+
+export function fetchDiagnosisContext(caseItem?: ClinicalCase | null): Promise<DiagnosisContext> {
+	const isChestPain = caseItem?.title.includes('胸痛') || caseItem?.department === '心血管内科'
+
+	return Promise.resolve({
+		mentorAdvice: isChestPain
+			? '王主任建议：请结合患者既往高血压史及突发性胸痛的性质，进行准确诊断。注意鉴别心梗与主动脉夹层。'
+			: '王主任建议：请基于主诉、阳性症状和危险信号提出主要诊断，并列出需要排除的鉴别诊断。',
+		defaultDraft: {
+			primaryDiagnosis: '',
+			differentialDiagnosis: ['', ''],
+			evidence: ''
+		}
+	})
+}
+
+export function submitDiagnosis(caseId: string, draft: DiagnosisDraft) {
+	return Promise.resolve({
+		id: `mock-diagnosis-${Date.now()}`,
+		caseId,
+		...draft,
+		submittedAt: new Date().toISOString()
+	})
+}
diff --git a/api/home.ts b/api/home.ts
new file mode 100644
index 0000000..fe89cea
--- /dev/null
+++ b/api/home.ts
@@ -0,0 +1,22 @@
+export type HomeSummary = {
+	greeting: string
+	highlight: string
+	remainingModules: number
+	doctorName: string
+}
+
+export function fetchHomeSummary(): Promise<HomeSummary> {
+	return Promise.resolve({
+		greeting: '下午好，医生。',
+		highlight: '让我们继续提升您的临床思维能力吧。',
+		remainingModules: 3,
+		doctorName: '王主任'
+	})
+}
+
+export function startTrainingSession() {
+	return Promise.resolve({
+		sessionId: `mock-session-${Date.now()}`,
+		startedAt: new Date().toISOString()
+	})
+}
diff --git a/api/matching.ts b/api/matching.ts
new file mode 100644
index 0000000..0c2a74c
--- /dev/null
+++ b/api/matching.ts
@@ -0,0 +1,23 @@
+export type MatchingProfile = {
+	message: string
+	subtitle: string
+	progressTarget: number
+	tags: Array<{
+		label: string
+		tone: 'secondary' | 'primary' | 'tertiary' | 'neutral'
+	}>
+}
+
+export function fetchMatchingProfile(): Promise<MatchingProfile> {
+	return Promise.resolve({
+		message: '王主任正在为您智能匹配病例',
+		subtitle: '正在通过大模型计算最适合您的临床案例库...',
+		progressTarget: 92,
+		tags: [
+			{ label: '薄弱环节', tone: 'secondary' },
+			{ label: '主治医级别', tone: 'primary' },
+			{ label: '高匹配度', tone: 'tertiary' },
+			{ label: '基于历史偏好', tone: 'neutral' }
+		]
+	})
+}
diff --git a/api/scenario.ts b/api/scenario.ts
new file mode 100644
index 0000000..7fc16ee
--- /dev/null
+++ b/api/scenario.ts
@@ -0,0 +1,96 @@
+export type ScenarioRecommendation = {
+	id: string
+	title: string
+	desc: string
+	tags: string[]
+	defaults: ScenarioForm
+}
+
+export type ScenarioOption = {
+	value: string
+	label: string
+}
+
+export type ScenarioForm = {
+	environment: string
+	ageGroup: string
+	education: string
+	personality: string
+}
+
+export type ScenarioOptions = {
+	environments: ScenarioOption[]
+	ageGroups: ScenarioOption[]
+	educations: ScenarioOption[]
+	personalities: ScenarioOption[]
+}
+
+export type ScenarioConfigPayload = ScenarioForm & {
+	caseId: string
+	caseNo: string
+	recommendationId?: string
+}
+
+export function fetchScenarioOptions() {
+	return Promise.resolve({
+		recommendations: [
+			{
+				id: 'typical-outpatient',
+				title: '典型门诊病例',
+				desc: '门诊常规病例：针对初学者设计的标准化沟通流程。',
+				tags: ['中年', '配合'],
+				defaults: {
+					environment: 'outpatient',
+					ageGroup: 'middle',
+					education: 'higher',
+					personality: 'calm'
+				}
+			},
+			{
+				id: 'emergency-crisis',
+				title: '急诊重症危机',
+				desc: '急诊危重：急性心梗紧急入院。',
+				tags: ['老年', '急躁'],
+				defaults: {
+					environment: 'emergency',
+					ageGroup: 'elderly',
+					education: 'secondary',
+					personality: 'irritable'
+				}
+			}
+		] as ScenarioRecommendation[],
+		options: {
+			environments: [
+				{ value: 'outpatient', label: '门诊' },
+				{ value: 'emergency', label: '急诊' },
+				{ value: 'ward', label: '病房' }
+			],
+			ageGroups: [
+				{ value: 'child', label: '儿童' },
+				{ value: 'young', label: '青年' },
+				{ value: 'middle', label: '中年' },
+				{ value: 'elderly', label: '老年' }
+			],
+			educations: [
+				{ value: 'primary', label: '小学及以下' },
+				{ value: 'secondary', label: '中等教育' },
+				{ value: 'higher', label: '高等教育' }
+			],
+			personalities: [
+				{ value: 'calm', label: '平和' },
+				{ value: 'anxious', label: '焦虑' },
+				{ value: 'irritable', label: '急躁' },
+				{ value: 'cooperative', label: '配合' },
+				{ value: 'suspicious', label: '多疑' }
+			]
+		} as ScenarioOptions
+	})
+}
+
+export function createScenarioConfig(payload: ScenarioConfigPayload) {
+	return Promise.resolve({
+		id: `mock-scenario-${Date.now()}`,
+		...payload,
+		createdAt: new Date().toISOString()
+	})
+}
diff --git a/pages.json b/pages.json
index d79623c..9e9c099 100644
--- a/pages.json
+++ b/pages.json
@@ -1,17 +1,88 @@
-{
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": "uni-app"
-			}
-		}
-	],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
-	},
-	"uniIdRouter": {}
+{
+	"pages": [
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "临床思维训练"
+			}
+		},
+		{
+			"path": "pages/config/config",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "信息配置"
+			}
+		},
+		{
+			"path": "pages/home/home",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "临床思维训练"
+			}
+		},
+		{
+			"path": "pages/matching/matching",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "智能匹配"
+			}
+		},
+		{
+			"path": "pages/cases/cases",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "病例列表"
+			}
+		},
+		{
+			"path": "pages/scenario/scenario",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "场景配置"
+			}
+		},
+		{
+			"path": "pages/chat/chat",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "临床对话"
+			}
+		},
+		{
+			"path": "pages/diagnosis/diagnosis",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "临床诊断"
+			}
+		},
+		{
+			"path": "pages/treatment/treatment",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "治疗计划"
+			}
+		},
+		{
+			"path": "pages/assessment/assessment",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "考核评价"
+			}
+		},
+		{
+			"path": "pages/profile/profile",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "个人中心"
+			}
+		}
+	],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "临床思维训练",
+		"navigationBarBackgroundColor": "#F7F8FF",
+		"backgroundColor": "#F7F8FF"
+	},
+	"uniIdRouter": {}
 }
diff --git a/pages/assessment/assessment.vue b/pages/assessment/assessment.vue
new file mode 100644
index 0000000..ac72dbe
--- /dev/null
+++ b/pages/assessment/assessment.vue
@@ -0,0 +1,563 @@
+<template>
+	<view class="assessment-page">
+		<view class="top-nav">
+			<button class="icon-button" aria-label="设置" @click="emit('open-settings')">
+				<view class="settings-icon"></view>
+			</button>
+			<button class="icon-button home-button" aria-label="首页" @click="emit('go-home')">
+				<view class="home-icon"></view>
+			</button>
+			<view class="nav-spacer"></view>
+			<button class="icon-button" aria-label="个人中心" @click="emit('open-profile')">
+				<view class="account-icon"></view>
+			</button>
+		</view>
+
+		<scroll-view class="assessment-content" scroll-y>
+			<view class="score-section">
+				<view class="score-gauge">
+					<view class="gauge-bg"></view>
+					<view class="gauge-fill"></view>
+					<view class="score-center">
+						<text class="score-value">88</text>
+						<text class="score-label">总分/100</text>
+					</view>
+				</view>
+				<view class="score-copy">
+					<text class="score-title">本次考核评价：优良</text>
+					<text class="score-subtitle">临床思维严谨，诊疗流程规范</text>
+				</view>
+			</view>
+
+			<view class="dimension-card">
+				<view class="section-title">
+					<view class="insights-icon"></view>
+					<text>临床能力维度评估</text>
+				</view>
+
+				<view class="radar-wrap">
+					<svg class="radar-svg" viewBox="0 0 200 200">
+						<polygon fill="none" points="100,20 176,76 147,166 53,166 24,76" stroke="#c2c6d4" stroke-width="0.5"></polygon>
+						<polygon fill="none" points="100,40 160,84 137,152 63,152 40,84" stroke="#c2c6d4" stroke-width="0.5"></polygon>
+						<polygon fill="none" points="100,60 144,92 127,138 73,138 56,92" stroke="#c2c6d4" stroke-width="0.5"></polygon>
+						<polygon fill="rgba(0, 71, 141, 0.2)" points="100,30 165,80 135,155 75,145 45,70" stroke="#00478d" stroke-width="2"></polygon>
+						<text class="radar-label" text-anchor="middle" x="100" y="15">病史采集</text>
+						<text class="radar-label" text-anchor="start" x="180" y="75">体格检查</text>
+						<text class="radar-label" text-anchor="start" x="150" y="180">临床思维</text>
+						<text class="radar-label" text-anchor="end" x="50" y="180">诊断准确性</text>
+						<text class="radar-label" text-anchor="end" x="20" y="75">治疗方案</text>
+					</svg>
+				</view>
+
+				<view class="mentor-review">
+					<view class="mentor-head">
+						<view class="mentor-avatar">
+							<image src="/static/config-doctor.png" mode="aspectFill"></image>
+						</view>
+						<view>
+							<text class="mentor-name">王主任点评</text>
+							<text class="mentor-role">资深临床导师</text>
+						</view>
+					</view>
+					<view class="mentor-bubble">
+						<view class="bubble-tail"></view>
+						<text>你在病史采集环节表现出色，逻辑清晰；但在鉴别诊断方面稍欠全面，建议加强对心血管急症鉴别诊断的学习。</text>
+					</view>
+				</view>
+
+				<view class="bar-list">
+					<view
+						v-for="item in dimensions"
+						:key="item.label"
+						class="bar-item"
+					>
+						<view class="bar-head">
+							<text>{{ item.label }}</text>
+							<text class="bar-score">{{ item.score }}/100</text>
+						</view>
+						<view class="bar-track">
+							<view class="bar-fill" :style="{ width: `${item.score}%` }"></view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="action-area">
+				<button class="primary-action" @click="showToast('病例详情暂未开放')">
+					<view class="description-icon"></view>
+					<text>查看病例详情</text>
+				</button>
+				<button class="secondary-action" @click="emit('go-home')">
+					<view class="map-icon"></view>
+					<text>返回路径</text>
+				</button>
+			</view>
+		</scroll-view>
+
+		<view class="toast" :class="{ visible: toastVisible }">{{ toastMessage }}</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { onUnmounted, ref } from 'vue'
+
+const emit = defineEmits<{
+	(event: 'open-settings'): void
+	(event: 'open-profile'): void
+	(event: 'go-home'): void
+}>()
+
+const dimensions = [
+	{ label: '病史采集', score: 92 },
+	{ label: '体格检查', score: 85 },
+	{ label: '临床思维', score: 90 },
+	{ label: '诊断准确性', score: 88 },
+	{ label: '治疗方案', score: 82 }
+]
+
+const toastMessage = ref('')
+const toastVisible = ref(false)
+
+let toastTimer: ReturnType<typeof setTimeout> | null = null
+
+function showToast(message: string) {
+	if (toastTimer) clearTimeout(toastTimer)
+	toastMessage.value = message
+	toastVisible.value = true
+	uni.showToast({
+		title: message,
+		icon: 'none'
+	})
+	toastTimer = setTimeout(() => {
+		toastVisible.value = false
+	}, 2200)
+}
+
+onUnmounted(() => {
+	if (toastTimer) clearTimeout(toastTimer)
+})
+</script>
+
+<style scoped>
+page {
+	min-height: 100%;
+	background: #f9f9ff;
+}
+
+.assessment-page {
+	width: 390px;
+	max-width: 100vw;
+	height: 884px;
+	min-height: 884px;
+	margin: 0 auto;
+	overflow: hidden;
+	background: #f9f9ff;
+	color: #191c21;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.assessment-page view,
+.assessment-page text,
+.assessment-page button,
+.assessment-page scroll-view {
+	box-sizing: border-box;
+}
+
+.top-nav {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	z-index: 50;
+	height: 56px;
+	padding: 0 20px;
+	border-bottom: 1px solid rgba(194, 198, 212, 0.3);
+	background: #ffffff;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+	display: flex;
+	align-items: center;
+}
+
+.nav-spacer {
+	flex: 1;
+}
+
+.icon-button {
+	width: 40px;
+	height: 40px;
+	min-height: 40px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	border-radius: 50%;
+	background: transparent;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.home-button {
+	margin-left: 4px;
+}
+
+.icon-button::after,
+.primary-action::after,
+.secondary-action::after {
+	border: 0;
+}
+
+.settings-icon,
+.home-icon,
+.account-icon,
+.insights-icon,
+.description-icon,
+.map-icon {
+	background: #424752;
+}
+
+.settings-icon {
+	width: 22px;
+	height: 22px;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.home-icon,
+.account-icon {
+	width: 24px;
+	height: 24px;
+}
+
+.home-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.account-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.assessment-content {
+	height: 884px;
+	padding: 80px 20px 24px;
+}
+
+.score-section {
+	padding: 16px 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.score-gauge {
+	position: relative;
+	width: 128px;
+	height: 128px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.gauge-bg,
+.gauge-fill {
+	position: absolute;
+	inset: 0;
+	border-radius: 50%;
+}
+
+.gauge-bg {
+	border: 8px solid #e1e2ea;
+}
+
+.gauge-fill {
+	background: conic-gradient(#00478d 0deg 317deg, transparent 317deg 360deg);
+	-webkit-mask: radial-gradient(circle, transparent 43px, #000 44px);
+	mask: radial-gradient(circle, transparent 43px, #000 44px);
+	transform: rotate(-90deg);
+}
+
+.score-center {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.score-value {
+	color: #00478d;
+	font-size: 32px;
+	line-height: 40px;
+	font-weight: 700;
+}
+
+.score-label {
+	color: #727783;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 500;
+}
+
+.score-copy {
+	margin-top: 16px;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.score-title {
+	color: #191c21;
+	font-size: 24px;
+	line-height: 32px;
+	font-weight: 600;
+}
+
+.score-subtitle {
+	color: #424752;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.dimension-card {
+	padding: 16px;
+	border: 1px solid rgba(194, 198, 212, 0.3);
+	border-radius: 8px;
+	background: #ffffff;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+}
+
+.section-title {
+	margin-bottom: 16px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	color: #191c21;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+}
+
+.insights-icon {
+	width: 20px;
+	height: 20px;
+	background: #00478d;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M3%2017h3v-7H3v7zm5%200h3V7H8v10zm5%200h3v-4h-3v4zm5%200h3V4h-3v13z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M3%2017h3v-7H3v7zm5%200h3V7H8v10zm5%200h3v-4h-3v4zm5%200h3V4h-3v13z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.radar-wrap {
+	position: relative;
+	width: 100%;
+	aspect-ratio: 1 / 1;
+	margin-bottom: 24px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.radar-svg {
+	width: 100%;
+	height: 100%;
+}
+
+.radar-label {
+	fill: #424752;
+	font-size: 10px;
+	font-weight: 500;
+}
+
+.mentor-review {
+	margin-bottom: 24px;
+	padding: 16px;
+	border: 1px solid rgba(0, 71, 141, 0.1);
+	border-radius: 12px;
+	background: #f2f3fb;
+}
+
+.mentor-head {
+	margin-bottom: 12px;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.mentor-avatar {
+	width: 48px;
+	height: 48px;
+	border: 2px solid #ffffff;
+	border-radius: 50%;
+	overflow: hidden;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.08);
+}
+
+.mentor-avatar image {
+	width: 100%;
+	height: 100%;
+}
+
+.mentor-name {
+	display: block;
+	color: #00478d;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+}
+
+.mentor-role {
+	display: block;
+	color: #424752;
+	font-size: 10px;
+	line-height: 14px;
+}
+
+.mentor-bubble {
+	position: relative;
+	padding: 12px;
+	border: 1px solid rgba(194, 198, 212, 0.2);
+	border-radius: 8px;
+	border-top-left-radius: 0;
+	background: #ffffff;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+	color: #191c21;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.bubble-tail {
+	position: absolute;
+	left: -8px;
+	top: 0;
+	width: 0;
+	height: 0;
+	border-top: 8px solid #ffffff;
+	border-left: 8px solid transparent;
+}
+
+.bar-list {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.bar-item {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.bar-head {
+	display: flex;
+	justify-content: space-between;
+	color: #424752;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 500;
+}
+
+.bar-score {
+	color: #00478d;
+}
+
+.bar-track {
+	width: 100%;
+	height: 6px;
+	border-radius: 999px;
+	background: #e1e2ea;
+	overflow: hidden;
+}
+
+.bar-fill {
+	height: 100%;
+	background: #00478d;
+}
+
+.action-area {
+	margin-top: 8px;
+	padding-bottom: 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.primary-action,
+.secondary-action {
+	width: 100%;
+	height: 56px;
+	min-height: 56px;
+	margin: 0;
+	border-radius: 8px;
+	font-size: 16px;
+	line-height: 24px;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+}
+
+.primary-action {
+	border: 0;
+	background: #00478d;
+	box-shadow: 0 4px 12px rgba(0, 71, 141, 0.22);
+	color: #ffffff;
+}
+
+.secondary-action {
+	border: 2px solid rgba(0, 71, 141, 0.2);
+	background: #ffffff;
+	color: #00478d;
+}
+
+.description-icon,
+.map-icon {
+	width: 20px;
+	height: 20px;
+}
+
+.primary-action .description-icon {
+	background: #ffffff;
+}
+
+.secondary-action .map-icon {
+	background: #00478d;
+}
+
+.description-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8l-6-6zm-1%207V3.5L18.5%209H13zm-5%204h8v2H8v-2zm0%204h8v2H8v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8l-6-6zm-1%207V3.5L18.5%209H13zm-5%204h8v2H8v-2zm0%204h8v2H8v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.map-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m20.5%203-.16.03L15%205.1%209%203%203.36%204.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9%2018.9l6%202.1%205.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15%2019l-6-2.11V5l6%202.11V19z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m20.5%203-.16.03L15%205.1%209%203%203.36%204.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9%2018.9l6%202.1%205.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15%2019l-6-2.11V5l6%202.11V19z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.toast {
+	position: fixed;
+	left: 50%;
+	bottom: 96px;
+	z-index: 100;
+	max-width: 320px;
+	padding: 12px 24px;
+	border-radius: 999px;
+	background: #2e3037;
+	color: #eff0f8;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+	text-align: center;
+	pointer-events: none;
+	opacity: 0;
+	transform: translate(-50%, 16px);
+	transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.toast.visible {
+	opacity: 1;
+	transform: translate(-50%, 0);
+}
+</style>
diff --git a/pages/cases/cases.vue b/pages/cases/cases.vue
new file mode 100644
index 0000000..b167f34
--- /dev/null
+++ b/pages/cases/cases.vue
@@ -0,0 +1,446 @@
+<template>
+	<ScenarioPage
+		v-if="showScenarioPage"
+		:case-item="selectedCase"
+		@open-settings="emit('open-settings')"
+		@open-profile="emit('open-profile')"
+		@go-home="emit('go-home')"
+	/>
+	<view v-else class="cases-page">
+		<view class="case-shell">
+			<view class="case-header">
+				<button class="icon-button" aria-label="设置" @click="emit('open-settings')">
+					<view class="settings-icon"></view>
+				</button>
+				<button class="icon-button home-button" aria-label="首页" @click="emit('go-home')">
+					<view class="home-icon"></view>
+				</button>
+				<view class="header-spacer"></view>
+				<button class="icon-button" aria-label="个人中心" @click="emit('open-profile')">
+					<view class="account-icon"></view>
+				</button>
+			</view>
+
+			<scroll-view class="case-content" scroll-y>
+				<view class="search-row">
+					<view class="search-box">
+						<view class="search-icon"></view>
+						<input
+							class="search-input"
+							v-model="keyword"
+							type="text"
+							placeholder="科室、主诉模糊搜索"
+							placeholder-class="search-placeholder"
+						/>
+					</view>
+				</view>
+
+				<view class="case-list">
+					<view
+						v-for="item in filteredCases"
+						:key="item.id"
+						class="case-card"
+						@click="selectCase(item)"
+					>
+						<view class="case-main">
+							<view class="patient-avatar" :class="`avatar-${item.tone}`">
+								<text>{{ item.patientName.slice(0, 1) }}</text>
+							</view>
+							<view class="case-info">
+								<text class="case-title">{{ item.title }}</text>
+								<text class="case-meta">
+									{{ item.patientName }}，{{ item.gender }}，{{ item.age }}岁，{{ item.department }}，{{ item.scene }}
+								</text>
+							</view>
+						</view>
+						<view class="case-footer">
+							<text class="case-no">病例编号: {{ item.caseNo }}</text>
+						</view>
+					</view>
+
+					<view v-if="filteredCases.length === 0" class="empty-state">
+						<text>暂无匹配病例</text>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+
+		<view class="toast" :class="{ visible: toastVisible }">{{ toastMessage }}</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { fetchCaseList, type ClinicalCase } from '../../api/cases'
+import ScenarioPage from '../scenario/scenario.vue'
+
+const emit = defineEmits<{
+	(event: 'open-settings'): void
+	(event: 'open-profile'): void
+	(event: 'go-home'): void
+}>()
+
+const cases = ref<ClinicalCase[]>([])
+const keyword = ref('')
+const toastMessage = ref('')
+const toastVisible = ref(false)
+const selectedCase = ref<ClinicalCase | null>(null)
+const showScenarioPage = ref(false)
+
+let toastTimer: ReturnType<typeof setTimeout> | null = null
+
+const filteredCases = computed(() => {
+	const value = keyword.value.trim().toLowerCase()
+	if (!value) return cases.value
+
+	return cases.value.filter(item => {
+		return [
+			item.title,
+			item.patientName,
+			item.gender,
+			String(item.age),
+			item.department,
+			item.scene,
+			item.caseNo
+		].some(field => field.toLowerCase().includes(value))
+	})
+})
+
+function loadCases() {
+	fetchCaseList().then(result => {
+		cases.value = result
+	})
+}
+
+function selectCase(item: ClinicalCase) {
+	uni.setStorageSync('clinical-thinking-selected-case', item)
+	selectedCase.value = item
+	showScenarioPage.value = true
+}
+
+function showToast(message: string) {
+	if (toastTimer) clearTimeout(toastTimer)
+	toastMessage.value = message
+	toastVisible.value = true
+	uni.showToast({
+		title: message,
+		icon: 'none'
+	})
+	toastTimer = setTimeout(() => {
+		toastVisible.value = false
+	}, 2200)
+}
+
+onMounted(loadCases)
+
+onUnmounted(() => {
+	if (toastTimer) clearTimeout(toastTimer)
+})
+</script>
+
+<style>
+page {
+	min-height: 100%;
+	background: #e7e8f0;
+}
+
+.cases-page {
+	min-height: 100vh;
+	background: #e7e8f0;
+	color: #191c21;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.case-shell {
+	position: relative;
+	min-height: 100vh;
+	overflow: hidden;
+	background: #f2f3fb;
+	display: flex;
+	flex-direction: column;
+}
+
+.case-header {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	z-index: 20;
+	box-sizing: border-box;
+	height: 56px;
+	padding: 0 20px;
+	border-bottom: 1px solid rgba(194, 198, 212, 0.3);
+	background: #ffffff;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+	display: flex;
+	align-items: center;
+}
+
+.header-spacer {
+	flex: 1;
+}
+
+.icon-button {
+	width: 40px;
+	height: 40px;
+	padding: 0;
+	border-radius: 50%;
+	background: transparent;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.icon-button::after {
+	border: 0;
+}
+
+.icon-button:active {
+	background: rgba(25, 28, 33, 0.05);
+}
+
+.home-button {
+	margin-left: 4px;
+}
+
+.settings-icon,
+.home-icon,
+.account-icon,
+.search-icon {
+	background: #424752;
+}
+
+.settings-icon {
+	width: 22px;
+	height: 22px;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.home-icon {
+	width: 23px;
+	height: 23px;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.account-icon {
+	width: 24px;
+	height: 24px;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.case-content {
+	box-sizing: border-box;
+	height: 100vh;
+	padding: 76px 20px 24px;
+}
+
+.search-row {
+	margin-bottom: 12px;
+}
+
+.search-box {
+	position: relative;
+	height: 40px;
+	border-radius: 8px;
+	background: #ffffff;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+}
+
+.search-icon {
+	position: absolute;
+	left: 12px;
+	top: 50%;
+	width: 20px;
+	height: 20px;
+	background: #727783;
+	transform: translateY(-50%);
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9.5%203a6.5%206.5%200%200%200%200%2013c1.61%200%203.09-.59%204.23-1.57L19.29%2020%2020.7%2018.59l-5.56-5.56A6.47%206.47%200%200%200%2016%209.5%206.5%206.5%200%200%200%209.5%203zm0%202a4.5%204.5%200%201%201%200%209%204.5%204.5%200%200%201%200-9z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9.5%203a6.5%206.5%200%200%200%200%2013c1.61%200%203.09-.59%204.23-1.57L19.29%2020%2020.7%2018.59l-5.56-5.56A6.47%206.47%200%200%200%2016%209.5%206.5%206.5%200%200%200%209.5%203zm0%202a4.5%204.5%200%201%201%200%209%204.5%204.5%200%200%201%200-9z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.search-input {
+	box-sizing: border-box;
+	width: 100%;
+	height: 40px;
+	padding: 0 16px 0 40px;
+	border: 0;
+	background: transparent;
+	color: #191c21;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.search-placeholder {
+	color: #c2c6d4;
+}
+
+.case-list {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding-bottom: 20px;
+}
+
+.case-card {
+	padding: 12px;
+	border: 1px solid rgba(194, 198, 212, 0.3);
+	border-radius: 8px;
+	background: #ffffff;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.case-card:active {
+	transform: scale(0.99);
+}
+
+.case-main {
+	display: flex;
+	gap: 12px;
+}
+
+.patient-avatar {
+	position: relative;
+	flex: 0 0 auto;
+	width: 70px;
+	height: 70px;
+	border-radius: 4px;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #ffffff;
+	font-size: 28px;
+	line-height: 1;
+	font-weight: 700;
+}
+
+.patient-avatar::before {
+	content: '';
+	position: absolute;
+	left: 50%;
+	top: 15px;
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	background: rgba(255, 255, 255, 0.42);
+	transform: translateX(-50%);
+}
+
+.patient-avatar::after {
+	content: '';
+	position: absolute;
+	left: 50%;
+	bottom: -7px;
+	width: 50px;
+	height: 34px;
+	border-radius: 50% 50% 0 0;
+	background: rgba(255, 255, 255, 0.28);
+	transform: translateX(-50%);
+}
+
+.patient-avatar text {
+	position: relative;
+	z-index: 1;
+}
+
+.avatar-blue {
+	background: linear-gradient(135deg, #7da6d9, #00478d);
+}
+
+.avatar-teal {
+	background: linear-gradient(135deg, #5dd8e2, #006970);
+}
+
+.avatar-pink {
+	background: linear-gradient(135deg, #ffb3c7, #a63a5f);
+}
+
+.avatar-orange {
+	background: linear-gradient(135deg, #ffb691, #9f4300);
+}
+
+.avatar-purple {
+	background: linear-gradient(135deg, #b5a6ff, #5f4bb6);
+}
+
+.avatar-green {
+	background: linear-gradient(135deg, #9edc9a, #347a35);
+}
+
+.case-info {
+	flex: 1;
+	min-width: 0;
+}
+
+.case-title {
+	display: -webkit-box;
+	margin-bottom: 4px;
+	overflow: hidden;
+	color: #191c21;
+	font-size: 16px;
+	line-height: 20px;
+	font-weight: 600;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+}
+
+.case-meta {
+	color: #424752;
+	font-size: 13px;
+	line-height: 20px;
+}
+
+.case-footer {
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+}
+
+.case-no {
+	color: #c2c6d4;
+	font-size: 11px;
+	line-height: 16px;
+	font-weight: 600;
+}
+
+.empty-state {
+	padding: 40px 0;
+	text-align: center;
+	color: #727783;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.toast {
+	position: fixed;
+	left: 50%;
+	bottom: 96px;
+	z-index: 100;
+	max-width: 320px;
+	padding: 12px 24px;
+	border-radius: 999px;
+	background: #2e3037;
+	color: #eff0f8;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+	text-align: center;
+	pointer-events: none;
+	opacity: 0;
+	transform: translate(-50%, 16px);
+	transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.toast.visible {
+	opacity: 1;
+	transform: translate(-50%, 0);
+}
+</style>
diff --git a/pages/chat/chat.vue b/pages/chat/chat.vue
new file mode 100644
index 0000000..4ca8952
--- /dev/null
+++ b/pages/chat/chat.vue
@@ -0,0 +1,821 @@
+<template>
+	<DiagnosisPage
+		v-if="showDiagnosisPage"
+		:case-item="caseItem"
+		@open-settings="emit('open-settings')"
+		@open-profile="emit('open-profile')"
+		@go-home="emit('go-home')"
+	/>
+	<view v-else class="chat-page">
+		<view class="chat-shell">
+			<view class="top-nav">
+				<button class="icon-button" aria-label="设置" @click="emit('open-settings')">
+					<view class="settings-icon"></view>
+				</button>
+				<button class="icon-button home-button" aria-label="首页" @click="emit('go-home')">
+					<view class="home-icon"></view>
+				</button>
+				<view class="nav-spacer"></view>
+				<button class="icon-button" aria-label="个人中心" @click="emit('open-profile')">
+					<view class="account-icon"></view>
+				</button>
+			</view>
+
+			<view class="case-header">
+				<view class="case-title-row">
+					<text class="case-heading">患者：{{ session.patient.name }} ({{ complaintShort }})</text>
+					<button class="finish-button" @click="showDiagnosisPage = true">
+						<view class="check-icon"></view>
+						<text>完成采集</text>
+					</button>
+				</view>
+				<view class="patient-meta">
+					<text>姓名：{{ session.patient.name }}</text>
+					<text>性别：{{ session.patient.gender }}</text>
+					<text>年龄：{{ session.patient.age }}岁</text>
+					<text>科室：{{ session.patient.department }}</text>
+				</view>
+			</view>
+
+			<view class="stage-bar">
+				<view class="stage-line"></view>
+				<view class="stage-line-active"></view>
+				<view
+					v-for="stage in session.stages"
+					:key="stage.key"
+					class="stage-item"
+					:class="{ active: stage.active }"
+				>
+					<view class="stage-dot">
+						<view class="stage-icon" :class="`stage-icon-${stage.key}`"></view>
+					</view>
+					<text>{{ stage.label }}</text>
+				</view>
+			</view>
+
+			<scroll-view class="chat-body" scroll-y :scroll-top="scrollTop">
+				<view class="message-list">
+					<view
+						v-for="message in session.messages"
+						:key="message.id"
+						class="message-row"
+						:class="[`role-${message.role}`]"
+					>
+						<view v-if="message.role === 'patient'" class="avatar patient-avatar">
+							<text>{{ session.patient.name.slice(0, 1) }}</text>
+						</view>
+						<view class="message-bubble" :class="`${message.role}-bubble`">
+							<text class="message-content">"{{ message.content }}"</text>
+							<view class="message-label" :class="{ mentor: message.role === 'mentor' }">
+								<view v-if="message.role === 'mentor'" class="star-icon"></view>
+								<text>{{ message.label }}</text>
+							</view>
+						</view>
+						<view v-if="message.role === 'doctor'" class="avatar doctor-avatar">
+							<view class="person-icon"></view>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+
+			<view class="mentor-float">
+				<text class="mentor-badge">王主任</text>
+				<view class="mentor-avatar">
+					<image src="/static/config-doctor.png" mode="aspectFill"></image>
+				</view>
+			</view>
+
+			<view class="input-panel">
+				<scroll-view class="quick-actions" scroll-x>
+					<view class="quick-row">
+						<button class="quick-chip" @click="sendQuickAction('体格检查')">体格检查</button>
+						<button class="quick-chip" @click="sendQuickAction('辅助检查')">辅助检查</button>
+					</view>
+				</scroll-view>
+				<view class="input-row">
+					<input
+						class="chat-input"
+						v-model="draft"
+						type="text"
+						placeholder="输入你对患者的提问..."
+						placeholder-class="input-placeholder"
+						@confirm="handleSend"
+					/>
+					<button class="send-button" :disabled="sending" @click="handleSend">
+						<view class="send-icon"></view>
+					</button>
+				</view>
+			</view>
+		</view>
+
+		<view class="toast" :class="{ visible: toastVisible }">{{ toastMessage }}</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
+import type { ClinicalCase } from '../../api/cases'
+import { createMockChatSession, sendMockChatMessage, type ChatSession } from '../../api/chat'
+import DiagnosisPage from '../diagnosis/diagnosis.vue'
+
+const props = defineProps<{
+	caseItem: ClinicalCase | null
+}>()
+
+const emit = defineEmits<{
+	(event: 'open-settings'): void
+	(event: 'open-profile'): void
+	(event: 'go-home'): void
+}>()
+
+const session = reactive<ChatSession>({
+	patient: {
+		name: '陈先生',
+		gender: '男',
+		age: 60,
+		department: '心血管内科',
+		chiefComplaint: '持续胸痛3小时'
+	},
+	stages: [
+		{ key: 'history', label: '病史采集', active: true },
+		{ key: 'diagnosis', label: '初步诊断', active: false },
+		{ key: 'treatment', label: '治疗方案', active: false }
+	],
+	messages: []
+})
+
+const draft = ref('')
+const sending = ref(false)
+const scrollTop = ref(0)
+const toastMessage = ref('')
+const toastVisible = ref(false)
+const showDiagnosisPage = ref(false)
+
+let toastTimer: ReturnType<typeof setTimeout> | null = null
+
+const complaintShort = computed(() => {
+	if (session.patient.chiefComplaint.includes('胸痛')) return '胸痛'
+	return session.patient.chiefComplaint.slice(0, 6)
+})
+
+function loadSession() {
+	createMockChatSession(props.caseItem).then(result => {
+		Object.assign(session.patient, result.patient)
+		session.stages = result.stages
+		session.messages = result.messages
+		scrollToBottom()
+	})
+}
+
+function sendQuickAction(content: string) {
+	draft.value = content
+	handleSend()
+}
+
+function handleSend() {
+	const content = draft.value.trim()
+	if (!content || sending.value) return
+
+	sending.value = true
+	draft.value = ''
+	sendMockChatMessage(content).then(messages => {
+		session.messages.push(...messages)
+		scrollToBottom()
+	}).finally(() => {
+		sending.value = false
+	})
+}
+
+function scrollToBottom() {
+	setTimeout(() => {
+		scrollTop.value += 1000
+	}, 60)
+}
+
+function showToast(message: string) {
+	if (toastTimer) clearTimeout(toastTimer)
+	toastMessage.value = message
+	toastVisible.value = true
+	uni.showToast({
+		title: message,
+		icon: 'none'
+	})
+	toastTimer = setTimeout(() => {
+		toastVisible.value = false
+	}, 2200)
+}
+
+onMounted(loadSession)
+
+onUnmounted(() => {
+	if (toastTimer) clearTimeout(toastTimer)
+})
+</script>
+
+<style scoped>
+page {
+	min-height: 100%;
+	background: #f9f9ff;
+}
+
+.chat-page {
+	min-height: 100vh;
+	background: #f9f9ff;
+	color: #191c21;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.chat-page view,
+.chat-page text,
+.chat-page button,
+.chat-page input,
+.chat-page scroll-view {
+	box-sizing: border-box;
+}
+
+.chat-shell {
+	position: relative;
+	height: 100vh;
+	overflow: hidden;
+	background: #f9f9ff;
+	display: flex;
+	flex-direction: column;
+}
+
+.top-nav {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	z-index: 50;
+	box-sizing: border-box;
+	height: 56px;
+	padding: 0 20px;
+	border-bottom: 1px solid rgba(194, 198, 212, 0.3);
+	background: #ffffff;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+	display: flex;
+	align-items: center;
+}
+
+.nav-spacer {
+	flex: 1;
+}
+
+.icon-button {
+	width: 40px;
+	height: 40px;
+	padding: 0;
+	border-radius: 50%;
+	background: transparent;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.home-button {
+	margin-left: 4px;
+}
+
+.icon-button::after,
+.finish-button::after,
+.quick-chip::after,
+.send-button::after {
+	border: 0;
+}
+
+.icon-button:active {
+	background: rgba(25, 28, 33, 0.05);
+}
+
+.settings-icon,
+.home-icon,
+.account-icon,
+.check-icon,
+.person-icon,
+.star-icon,
+.send-icon {
+	background: #424752;
+}
+
+.settings-icon {
+	width: 22px;
+	height: 22px;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.home-icon {
+	width: 23px;
+	height: 23px;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.account-icon {
+	width: 24px;
+	height: 24px;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.case-header {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 56px;
+	z-index: 40;
+	box-sizing: border-box;
+	height: 100px;
+	padding: 16px 20px;
+	background: #f9f9ff;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+}
+
+.case-title-row {
+	position: relative;
+	height: 32px;
+	display: block;
+}
+
+.case-heading {
+	display: block;
+	box-sizing: border-box;
+	width: 100%;
+	padding-right: 116px;
+	color: #191c21;
+	font-size: 18px;
+	line-height: 28px;
+	font-weight: 600;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.finish-button {
+	position: absolute;
+	right: 0;
+	top: 0;
+	z-index: 2;
+	width: 112px;
+	height: 32px;
+	min-height: 32px;
+	margin: 0;
+	padding: 0 14px;
+	border: 0;
+	border-radius: 999px;
+	background: #00478d;
+	box-shadow: 0 4px 10px rgba(0, 71, 141, 0.22);
+	color: #ffffff;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+}
+
+.finish-button text {
+	white-space: nowrap;
+}
+
+.check-icon {
+	width: 18px;
+	height: 18px;
+	background: #ffffff;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm-1.2%2014.4-4-4L8.2%2011l2.6%202.6L16.8%207.6%2018.2%209l-7.4%207.4z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm-1.2%2014.4-4-4L8.2%2011l2.6%202.6L16.8%207.6%2018.2%209l-7.4%207.4z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.patient-meta {
+	margin-top: 8px;
+	padding-top: 8px;
+	border-top: 1px solid rgba(194, 198, 212, 0.3);
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: 24px;
+	row-gap: 4px;
+	color: #424752;
+	font-size: 13px;
+	line-height: 20px;
+}
+
+.stage-bar {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 156px;
+	z-index: 30;
+	box-sizing: border-box;
+	height: 72px;
+	padding: 8px 24px;
+	border-bottom: 1px solid rgba(194, 198, 212, 0.3);
+	background: #ffffff;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.stage-line,
+.stage-line-active {
+	position: absolute;
+	left: 24px;
+	right: 24px;
+	top: 28px;
+	height: 2px;
+	background: #e1e2ea;
+}
+
+.stage-line-active {
+	right: auto;
+	width: 10%;
+	background: #00478d;
+}
+
+.stage-item {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 4px;
+	color: #c2c6d4;
+	font-size: 11px;
+	line-height: 16px;
+}
+
+.stage-item.active {
+	color: #00478d;
+	font-weight: 700;
+}
+
+.stage-dot {
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	background: #e1e2ea;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.stage-item.active .stage-dot {
+	background: #00478d;
+	box-shadow: 0 0 0 4px rgba(200, 218, 255, 0.5);
+}
+
+.stage-icon {
+	width: 14px;
+	height: 14px;
+	background: currentColor;
+}
+
+.stage-icon-history {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19%203H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V5a2%202%200%200%200-2-2zm-7%203a3%203%200%201%201%200%206%203%203%200%200%201%200-6zm6%2012H6v-1.2c0-2%204-3.1%206-3.1s6%201.1%206%203.1V18z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19%203H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V5a2%202%200%200%200-2-2zm-7%203a3%203%200%201%201%200%206%203%203%200%200%201%200-6zm6%2012H6v-1.2c0-2%204-3.1%206-3.1s6%201.1%206%203.1V18z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.stage-icon-diagnosis {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19%203h-1V1h-2v2H8V1H6v2H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V5a2%202%200%200%200-2-2zM8%207h8v2H8V7zm0%204h8v2H8v-2zm0%204h5v2H8v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19%203h-1V1h-2v2H8V1H6v2H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V5a2%202%200%200%200-2-2zM8%207h8v2H8V7zm0%204h8v2H8v-2zm0%204h5v2H8v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.stage-icon-treatment {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m4.22%2019.78-.01-.01a5.5%205.5%200%200%201%200-7.78L12%204.22a5.5%205.5%200%200%201%207.78%207.78L12%2019.78a5.5%205.5%200%200%201-7.78%200zM13.41%205.64%2010%209.05%2014.95%2014%2018.36%2010.59a3.5%203.5%200%200%200-4.95-4.95zM5.64%2013.41a3.5%203.5%200%200%200%204.95%204.95L14%2014.95%209.05%2010%205.64%2013.41z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m4.22%2019.78-.01-.01a5.5%205.5%200%200%201%200-7.78L12%204.22a5.5%205.5%200%200%201%207.78%207.78L12%2019.78a5.5%205.5%200%200%201-7.78%200zM13.41%205.64%2010%209.05%2014.95%2014%2018.36%2010.59a3.5%203.5%200%200%200-4.95-4.95zM5.64%2013.41a3.5%203.5%200%200%200%204.95%204.95L14%2014.95%209.05%2010%205.64%2013.41z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.stage-item.active .stage-icon {
+	background: #ffffff;
+}
+
+.chat-body {
+	box-sizing: border-box;
+	height: 100vh;
+	padding: 244px 20px 188px;
+}
+
+.message-list {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+}
+
+.message-row {
+	display: flex;
+	align-items: flex-start;
+	gap: 16px;
+	max-width: 85%;
+}
+
+.role-mentor {
+	align-self: flex-end;
+}
+
+.role-doctor {
+	align-self: flex-end;
+	flex-direction: row-reverse;
+}
+
+.avatar {
+	flex: 0 0 auto;
+	width: 40px;
+	height: 40px;
+	border: 1px solid #c2c6d4;
+	border-radius: 50%;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.patient-avatar {
+	background: linear-gradient(135deg, #ffb691, #9f4300);
+	color: #ffffff;
+	font-size: 18px;
+	font-weight: 700;
+}
+
+.doctor-avatar {
+	background: #7af1fc;
+}
+
+.person-icon {
+	width: 24px;
+	height: 24px;
+	background: #006e75;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.message-bubble {
+	position: relative;
+	padding: 16px;
+	border-radius: 12px;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+}
+
+.message-bubble::after {
+	content: '';
+	position: absolute;
+	top: 12px;
+	width: 14px;
+	height: 14px;
+	transform: rotate(45deg);
+}
+
+.patient-bubble {
+	border: 1px solid #c2c6d4;
+	background: #f9f9ff;
+}
+
+.patient-bubble::after {
+	left: -8px;
+	border-left: 1px solid #c2c6d4;
+	border-bottom: 1px solid #c2c6d4;
+	background: #f9f9ff;
+}
+
+.mentor-bubble {
+	border: 1px solid rgba(0, 71, 141, 0.2);
+	background: #e7e8f0;
+}
+
+.mentor-bubble::after {
+	right: -8px;
+	border-right: 1px solid rgba(0, 71, 141, 0.2);
+	border-top: 1px solid rgba(0, 71, 141, 0.2);
+	background: #e7e8f0;
+}
+
+.doctor-bubble {
+	border: 1px solid rgba(0, 71, 141, 0.1);
+	background: #005eb8;
+}
+
+.doctor-bubble::after {
+	right: -8px;
+	background: #005eb8;
+}
+
+.message-content {
+	color: #191c21;
+	font-size: 16px;
+	line-height: 24px;
+}
+
+.mentor-bubble .message-content {
+	color: #00478d;
+	font-weight: 600;
+	font-style: italic;
+}
+
+.doctor-bubble .message-content {
+	color: #c8daff;
+}
+
+.message-label {
+	margin-top: 8px;
+	color: #727783;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 500;
+	letter-spacing: 0;
+	text-transform: uppercase;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.message-label.mentor {
+	color: #00478d;
+	font-weight: 700;
+}
+
+.doctor-bubble .message-label {
+	justify-content: flex-end;
+	color: rgba(200, 218, 255, 0.72);
+}
+
+.star-icon {
+	width: 16px;
+	height: 16px;
+	background: #00478d;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%202%202.7%206.6%207.1.6-5.4%204.6%201.7%206.9L12%2017l-6.1%203.7%201.7-6.9-5.4-4.6%207.1-.6L12%202z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%202%202.7%206.6%207.1.6-5.4%204.6%201.7%206.9L12%2017l-6.1%203.7%201.7-6.9-5.4-4.6%207.1-.6L12%202z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.mentor-float {
+	position: fixed;
+	right: 20px;
+	bottom: 140px;
+	z-index: 45;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	pointer-events: none;
+}
+
+.mentor-badge {
+	margin-bottom: 8px;
+	padding: 4px 12px;
+	border-radius: 999px;
+	background: #00478d;
+	box-shadow: 0 3px 8px rgba(0, 71, 141, 0.22);
+	color: #ffffff;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 700;
+	animation: pulse-soft 1.6s ease-in-out infinite;
+}
+
+.mentor-avatar {
+	width: 96px;
+	height: 96px;
+	border: 2px solid #00478d;
+	border-radius: 50%;
+	box-shadow: 0 8px 18px rgba(25, 28, 33, 0.18);
+	overflow: hidden;
+	background: #ffffff;
+	animation: breathe 3s ease-in-out infinite;
+}
+
+.mentor-avatar image {
+	width: 100%;
+	height: 100%;
+}
+
+.input-panel {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 50;
+	box-sizing: border-box;
+	padding: 12px;
+	border-top: 1px solid #c2c6d4;
+	background: #f9f9ff;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.quick-actions {
+	width: 100%;
+	white-space: nowrap;
+}
+
+.quick-row {
+	display: flex;
+	gap: 8px;
+}
+
+.quick-chip {
+	flex: 0 0 auto;
+	padding: 8px 16px;
+	border: 1px solid #006970;
+	border-radius: 999px;
+	background: #ffffff;
+	color: #006970;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+}
+
+.input-row {
+	min-height: 48px;
+	padding: 4px;
+	border: 1px solid #c2c6d4;
+	border-radius: 12px;
+	background: #ecedf6;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.chat-input {
+	flex: 1;
+	min-width: 0;
+	height: 40px;
+	padding: 0 8px;
+	border: 0;
+	background: transparent;
+	color: #191c21;
+	font-size: 16px;
+	line-height: 24px;
+}
+
+.input-placeholder {
+	color: #c2c6d4;
+}
+
+.send-button {
+	flex: 0 0 auto;
+	width: 40px;
+	height: 40px;
+	border-radius: 8px;
+	background: #00478d;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.send-button:active {
+	transform: scale(0.95);
+}
+
+.send-icon {
+	width: 22px;
+	height: 22px;
+	background: #ffffff;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M2%2021 23%2012 2%203v7l15%202-15%202v7z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M2%2021 23%2012 2%203v7l15%202-15%202v7z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.toast {
+	position: fixed;
+	left: 50%;
+	bottom: 148px;
+	z-index: 100;
+	max-width: 320px;
+	padding: 12px 24px;
+	border-radius: 999px;
+	background: #2e3037;
+	color: #eff0f8;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+	text-align: center;
+	pointer-events: none;
+	opacity: 0;
+	transform: translate(-50%, 16px);
+	transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.toast.visible {
+	opacity: 1;
+	transform: translate(-50%, 0);
+}
+
+@keyframes breathe {
+	0%,
+	100% {
+		transform: translateY(0) scale(1);
+	}
+	50% {
+		transform: translateY(-4px) scale(1.02);
+	}
+}
+
+@keyframes pulse-soft {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.72;
+	}
+}
+</style>
diff --git a/pages/config/config.vue b/pages/config/config.vue
new file mode 100644
index 0000000..e8df469
--- /dev/null
+++ b/pages/config/config.vue
@@ -0,0 +1,789 @@
+<template>
+	<HomePage
+		v-if="showHomePage"
+		@open-settings="returnToSettings"
+		@open-profile="emit('open-profile')"
+	/>
+	<view v-else class="config-page">
+		<view class="phone-frame">
+			<view class="hero-section">
+				<image class="hospital-image" src="/static/config-hospital.png" mode="aspectFill"></image>
+				<view class="hero-overlay"></view>
+			</view>
+
+			<view class="profile-section">
+				<view class="section-glow"></view>
+				<view class="profile-content">
+					<view class="intro-row">
+						<view class="doctor-card">
+							<image class="doctor-image" src="/static/config-doctor.png" mode="aspectFit"></image>
+						</view>
+						<view class="bubble">
+							<text class="bubble-text" :class="{ typing: typingActive }">{{ bubbleText }}</text>
+							<view class="bubble-arrow"></view>
+						</view>
+					</view>
+
+					<view class="form-area">
+						<view class="field-block">
+							<text class="field-label">执业科室</text>
+							<view class="glass-select" @click="openOptionPicker('department')">
+								<text class="select-value">{{ selectedDepartment.label }}</text>
+								<view class="chevron"></view>
+							</view>
+						</view>
+
+						<view class="field-grid">
+							<view class="field-block">
+								<text class="field-label">专业职称</text>
+								<view class="glass-select" @click="openOptionPicker('title')">
+									<text class="select-value">{{ selectedTitle.label }}</text>
+									<view class="chevron"></view>
+								</view>
+							</view>
+							<view class="field-block">
+								<text class="field-label">执业年限</text>
+								<view class="glass-select" @click="openOptionPicker('experience')">
+									<text class="select-value">{{ selectedExperience.label }}</text>
+									<view class="chevron"></view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="action-section">
+				<button class="submit-button" :class="{ saved: saveState === 'saved' }" :disabled="saving" @click="handleSubmit">
+					<view v-if="saving" class="spinner"></view>
+					<view v-else-if="saveState === 'saved'" class="check-icon"></view>
+					<view v-else class="check-icon"></view>
+					<text>{{ submitText }}</text>
+				</button>
+				<view class="secure-tip">
+					<view class="lock-icon"></view>
+					<text>数据已进行安全加密处理</text>
+				</view>
+			</view>
+
+			<view class="home-indicator"></view>
+		</view>
+
+		<view class="toast" :class="{ visible: toastVisible }">{{ toastMessage }}</view>
+
+		<view v-if="pickerVisible" class="picker-mask" @click="closeOptionPicker">
+			<view class="picker-panel" @click.stop>
+				<view class="picker-header">
+					<text class="picker-title">{{ pickerTitle }}</text>
+					<text class="picker-close" @click="closeOptionPicker">关闭</text>
+				</view>
+				<scroll-view class="option-list" scroll-y>
+					<view
+						v-for="option in currentOptions"
+						:key="option.value"
+						class="option-item"
+						:class="{ active: option.value === form[activePicker] }"
+						@click="chooseOption(option)"
+					>
+						<view class="option-copy">
+							<text class="option-label">{{ option.label }}</text>
+							<text v-if="option.desc" class="option-desc">{{ option.desc }}</text>
+						</view>
+						<view v-if="option.value === form[activePicker]" class="selected-mark"></view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
+import HomePage from '../home/home.vue'
+import {
+	MOCK_CONFIG_OPTIONS,
+	fetchConfigOptions,
+	saveClinicalConfig,
+	type ClinicalConfigPayload,
+	type ConfigOption,
+	type ConfigOptions
+} from '../../api/config'
+
+type PickerType = '' | 'department' | 'title' | 'experience'
+type OptionGroup = keyof ConfigOptions
+type SaveState = 'idle' | 'saved'
+
+type LoginUser = {
+	id?: string
+	phone?: string
+	institutionId?: string
+}
+
+const form = reactive({
+	department: 'im',
+	title: 'resident',
+	experience: '1-3'
+})
+
+const options = ref<ConfigOptions>(MOCK_CONFIG_OPTIONS)
+const mentorMessage = ref('欢迎回来！请配置执业信息，开始精准带教模拟。')
+const bubbleText = ref('')
+const typingActive = ref(false)
+const activePicker = ref<PickerType>('')
+const pickerVisible = ref(false)
+const saving = ref(false)
+const saveState = ref<SaveState>('idle')
+const toastMessage = ref('')
+const toastVisible = ref(false)
+const showHomePage = ref(false)
+
+const emit = defineEmits<{
+	(event: 'open-profile'): void
+}>()
+
+let typingTimer: ReturnType<typeof setTimeout> | null = null
+let toastTimer: ReturnType<typeof setTimeout> | null = null
+
+const selectedDepartment = computed(() => findOption('departments', form.department))
+const selectedTitle = computed(() => findOption('titles', form.title))
+const selectedExperience = computed(() => findOption('experiences', form.experience))
+
+const currentOptions = computed(() => {
+	const optionMap: Record<Exclude<PickerType, ''>, ConfigOption[]> = {
+		department: options.value.departments,
+		title: options.value.titles,
+		experience: options.value.experiences
+	}
+	const picker = activePicker.value
+
+	return picker ? optionMap[picker] : []
+})
+
+const pickerTitle = computed(() => {
+	const titleMap: Record<Exclude<PickerType, ''>, string> = {
+		department: '选择执业科室',
+		title: '选择专业职称',
+		experience: '选择执业年限'
+	}
+	const picker = activePicker.value
+
+	return picker ? titleMap[picker] : '请选择'
+})
+
+const submitText = computed(() => {
+	if (saving.value) return '正在保存...'
+	if (saveState.value === 'saved') return '已就绪'
+	return '确认并继续'
+})
+
+function loadConfigOptions() {
+	fetchConfigOptions().then(({ options: remoteOptions, defaults, mentor }) => {
+		options.value = remoteOptions
+		Object.assign(form, defaults)
+		mentorMessage.value = mentor.message
+		startTypewriter()
+	})
+}
+
+function findOption(group: OptionGroup, value: string) {
+	const groupOptions = options.value[group] || []
+	return groupOptions.find(item => item.value === value) || groupOptions[0] || { label: '请选择', value: '' }
+}
+
+function startTypewriter() {
+	if (typingTimer) clearTimeout(typingTimer)
+	bubbleText.value = ''
+	typingActive.value = true
+	let index = 0
+
+	const tick = () => {
+		if (index < mentorMessage.value.length) {
+			bubbleText.value += mentorMessage.value.charAt(index)
+			index += 1
+			typingTimer = setTimeout(tick, 48 + Math.floor(Math.random() * 42))
+		} else {
+			typingActive.value = false
+		}
+	}
+
+	tick()
+}
+
+function openOptionPicker(type: Exclude<PickerType, ''>) {
+	activePicker.value = type
+	pickerVisible.value = true
+}
+
+function closeOptionPicker() {
+	pickerVisible.value = false
+	activePicker.value = ''
+}
+
+function chooseOption(option: ConfigOption) {
+	const picker = activePicker.value
+	if (!picker) return
+	form[picker] = option.value
+	closeOptionPicker()
+}
+
+function handleSubmit() {
+	const user = (uni.getStorageSync('clinical-thinking-user') || {}) as LoginUser
+	const payload: ClinicalConfigPayload = {
+		userId: user.id || 'mock-user-guest',
+		phone: user.phone || '',
+		institutionId: user.institutionId || '',
+		department: form.department,
+		title: form.title,
+		experience: form.experience,
+		departmentName: selectedDepartment.value.label,
+		titleName: selectedTitle.value.label,
+		experienceName: selectedExperience.value.label
+	}
+
+	saving.value = true
+	saveState.value = 'idle'
+	saveClinicalConfig(payload).then(result => {
+		uni.setStorageSync('clinical-thinking-config', result)
+		saving.value = false
+		saveState.value = 'saved'
+		showToast('配置已保存')
+
+		setTimeout(() => {
+			showHomePage.value = true
+		}, 500)
+	}).catch(() => {
+		saving.value = false
+		showToast('保存失败，请稍后重试')
+	})
+}
+
+function returnToSettings() {
+	showHomePage.value = false
+	saveState.value = 'idle'
+}
+
+function showToast(message: string) {
+	if (toastTimer) clearTimeout(toastTimer)
+	toastMessage.value = message
+	toastVisible.value = true
+	uni.showToast({
+		title: message,
+		icon: 'none'
+	})
+	toastTimer = setTimeout(() => {
+		toastVisible.value = false
+	}, 2200)
+}
+
+onMounted(loadConfigOptions)
+
+onUnmounted(() => {
+	if (typingTimer) clearTimeout(typingTimer)
+	if (toastTimer) clearTimeout(toastTimer)
+})
+</script>
+
+<style>
+page {
+	min-height: 100%;
+	background: #f9f9ff;
+}
+
+.config-page {
+	min-height: 100vh;
+	background: #f9f9ff;
+	color: #191c21;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.phone-frame {
+	position: relative;
+	width: 100%;
+	max-width: none;
+	height: 100vh;
+	min-height: 760px;
+	margin: 0 auto;
+	overflow: hidden;
+	background: #f9f9ff;
+	display: flex;
+	flex-direction: column;
+}
+
+.hero-section,
+.profile-section,
+.action-section {
+	height: 33.333vh;
+	min-height: 253px;
+	flex: 0 0 auto;
+}
+
+.hero-section {
+	position: relative;
+	overflow: hidden;
+}
+
+.hospital-image {
+	width: 100%;
+	height: 100%;
+}
+
+.hero-overlay {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(249, 249, 255, 0) 58%, rgba(249, 249, 255, 0.16));
+}
+
+.profile-section {
+	position: relative;
+	padding: 16px 20px 0;
+	box-sizing: border-box;
+}
+
+.section-glow {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.12));
+	pointer-events: none;
+}
+
+.profile-content {
+	position: relative;
+	z-index: 1;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.intro-row {
+	display: flex;
+	align-items: flex-start;
+	gap: 16px;
+}
+
+.doctor-card {
+	width: 41.666%;
+	aspect-ratio: 1;
+	border: 2px solid rgba(0, 71, 141, 0.5);
+	border-radius: 16px;
+	overflow: hidden;
+	background: rgba(255, 255, 255, 0.4);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	animation: pulse-border 2s infinite ease-in-out;
+}
+
+.doctor-image {
+	width: 100%;
+	height: 100%;
+}
+
+.bubble {
+	position: relative;
+	flex: 1;
+	min-height: 80px;
+	margin-top: 4px;
+	padding: 12px;
+	border: 1px solid rgba(0, 71, 141, 0.1);
+	border-radius: 16px;
+	background: rgba(255, 255, 255, 0.4);
+	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
+	backdrop-filter: blur(12px);
+	-webkit-backdrop-filter: blur(12px);
+	box-sizing: border-box;
+}
+
+.bubble-text {
+	color: #191c21;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 500;
+}
+
+.bubble-text.typing::after {
+	content: '|';
+	margin-left: 2px;
+	color: #005eb8;
+	font-weight: 700;
+	animation: blink 0.7s infinite;
+}
+
+.bubble-arrow {
+	position: absolute;
+	left: -8px;
+	top: 18px;
+	width: 16px;
+	height: 16px;
+	border-left: 1px solid rgba(0, 71, 141, 0.1);
+	border-top: 1px solid rgba(0, 71, 141, 0.1);
+	background: rgba(255, 255, 255, 0.4);
+	transform: rotate(-45deg);
+}
+
+.form-area {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding-bottom: 8px;
+}
+
+.field-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 12px;
+}
+
+.field-block {
+	min-width: 0;
+}
+
+.field-label {
+	display: block;
+	margin-bottom: 4px;
+	color: #424752;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 600;
+}
+
+.glass-select {
+	box-sizing: border-box;
+	width: 100%;
+	height: 40px;
+	padding: 0 32px 0 12px;
+	border: 1px solid rgba(0, 94, 184, 0.1);
+	border-radius: 12px;
+	background: rgba(255, 255, 255, 0.6);
+	backdrop-filter: blur(8px);
+	-webkit-backdrop-filter: blur(8px);
+	display: flex;
+	align-items: center;
+	position: relative;
+}
+
+.glass-select:active {
+	background: rgba(255, 255, 255, 0.9);
+	border-color: #005db6;
+	box-shadow: 0 0 0 4px rgba(0, 93, 182, 0.1);
+}
+
+.select-value {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: #191c21;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.chevron {
+	position: absolute;
+	right: 10px;
+	top: 50%;
+	width: 16px;
+	height: 16px;
+	transform: translateY(-50%);
+}
+
+.chevron::after {
+	content: '';
+	position: absolute;
+	left: 4px;
+	top: 3px;
+	width: 7px;
+	height: 7px;
+	border-right: 2px solid #424752;
+	border-bottom: 2px solid #424752;
+	transform: rotate(45deg);
+}
+
+.action-section {
+	box-sizing: border-box;
+	padding: 0 20px;
+	border-top: 1px solid rgba(194, 198, 212, 0.1);
+	background: rgba(255, 255, 255, 0.4);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 24px;
+}
+
+.submit-button {
+	width: 100%;
+	height: 56px;
+	border-radius: 16px;
+	background: #00478d;
+	box-shadow: 0 10px 24px rgba(0, 71, 141, 0.2);
+	color: #ffffff;
+	font-size: 20px;
+	line-height: 56px;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	transition: transform 0.2s ease, background 0.2s ease;
+}
+
+.submit-button.saved {
+	background: #006970;
+}
+
+.submit-button:active {
+	transform: scale(0.98);
+}
+
+.submit-button::after {
+	border: 0;
+}
+
+.check-icon {
+	position: relative;
+	width: 20px;
+	height: 20px;
+	border: 2px solid #ffffff;
+	border-radius: 50%;
+	box-sizing: border-box;
+}
+
+.check-icon::after {
+	content: '';
+	position: absolute;
+	left: 5px;
+	top: 3px;
+	width: 5px;
+	height: 9px;
+	border-right: 2px solid #ffffff;
+	border-bottom: 2px solid #ffffff;
+	transform: rotate(45deg);
+}
+
+.spinner {
+	width: 20px;
+	height: 20px;
+	border: 2px solid rgba(255, 255, 255, 0.36);
+	border-top-color: #ffffff;
+	border-radius: 50%;
+	box-sizing: border-box;
+	animation: spin 1s linear infinite;
+}
+
+.secure-tip {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	color: rgba(66, 71, 82, 0.6);
+	font-size: 12px;
+	line-height: 16px;
+}
+
+.lock-icon {
+	position: relative;
+	width: 14px;
+	height: 12px;
+	border: 2px solid rgba(66, 71, 82, 0.6);
+	border-radius: 3px;
+	box-sizing: border-box;
+}
+
+.lock-icon::before {
+	content: '';
+	position: absolute;
+	left: 2px;
+	top: -8px;
+	width: 6px;
+	height: 8px;
+	border: 2px solid rgba(66, 71, 82, 0.6);
+	border-bottom: 0;
+	border-radius: 8px 8px 0 0;
+}
+
+.home-indicator {
+	position: absolute;
+	left: 50%;
+	bottom: 8px;
+	width: 128px;
+	height: 6px;
+	border-radius: 999px;
+	background: rgba(25, 28, 33, 0.1);
+	transform: translateX(-50%);
+}
+
+.toast {
+	position: fixed;
+	left: 50%;
+	bottom: 96px;
+	z-index: 100;
+	max-width: 320px;
+	padding: 12px 24px;
+	border-radius: 999px;
+	background: #2e3037;
+	color: #eff0f8;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+	text-align: center;
+	pointer-events: none;
+	opacity: 0;
+	transform: translate(-50%, 16px);
+	transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.toast.visible {
+	opacity: 1;
+	transform: translate(-50%, 0);
+}
+
+.picker-mask {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	z-index: 90;
+	background: rgba(25, 28, 33, 0.38);
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+}
+
+.picker-panel {
+	box-sizing: border-box;
+	width: 100%;
+	max-width: none;
+	max-height: 70vh;
+	padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
+	border-radius: 16px 16px 0 0;
+	background: #ffffff;
+	box-shadow: 0 -12px 30px rgba(25, 28, 33, 0.16);
+}
+
+.picker-header {
+	height: 40px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.picker-title {
+	color: #191c21;
+	font-size: 18px;
+	line-height: 28px;
+	font-weight: 600;
+}
+
+.picker-close {
+	color: #00478d;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+}
+
+.option-list {
+	max-height: calc(70vh - 72px);
+	margin-top: 8px;
+}
+
+.option-item {
+	box-sizing: border-box;
+	min-height: 64px;
+	padding: 12px 4px;
+	border-bottom: 1px solid #ecedf6;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.option-copy {
+	flex: 1;
+	min-width: 0;
+	padding-right: 16px;
+	display: flex;
+	flex-direction: column;
+}
+
+.option-label {
+	color: #191c21;
+	font-size: 16px;
+	line-height: 24px;
+	font-weight: 500;
+}
+
+.option-item.active .option-label {
+	color: #00478d;
+	font-weight: 600;
+}
+
+.option-desc {
+	margin-top: 2px;
+	color: #727783;
+	font-size: 12px;
+	line-height: 18px;
+}
+
+.selected-mark {
+	position: relative;
+	flex: 0 0 auto;
+	width: 18px;
+	height: 18px;
+	border-radius: 50%;
+	background: #00478d;
+}
+
+.selected-mark::after {
+	content: '';
+	position: absolute;
+	left: 6px;
+	top: 3px;
+	width: 5px;
+	height: 9px;
+	border-right: 2px solid #ffffff;
+	border-bottom: 2px solid #ffffff;
+	transform: rotate(45deg);
+}
+
+@keyframes blink {
+	from,
+	to {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0;
+	}
+}
+
+@keyframes pulse-border {
+	0% {
+		box-shadow: 0 0 0 0 rgba(0, 71, 141, 0.4);
+		border-color: rgba(0, 71, 141, 0.5);
+	}
+	50% {
+		box-shadow: 0 0 0 6px rgba(0, 71, 141, 0);
+		border-color: rgba(0, 71, 141, 0.8);
+	}
+	100% {
+		box-shadow: 0 0 0 0 rgba(0, 71, 141, 0.4);
+		border-color: rgba(0, 71, 141, 0.5);
+	}
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+</style>
diff --git a/pages/diagnosis/diagnosis.vue b/pages/diagnosis/diagnosis.vue
new file mode 100644
index 0000000..ddf365a
--- /dev/null
+++ b/pages/diagnosis/diagnosis.vue
@@ -0,0 +1,710 @@
+<template>
+	<TreatmentPage
+		v-if="showTreatmentPage"
+		:case-item="caseItem"
+		@open-settings="emit('open-settings')"
+		@open-profile="emit('open-profile')"
+		@go-home="emit('go-home')"
+	/>
+	<view v-else class="diagnosis-page">
+		<view class="diagnosis-shell">
+			<view class="top-nav">
+				<button class="icon-button" aria-label="设置" @click="emit('open-settings')">
+				</button>
+				<button class="icon-button home-button" aria-label="首页" @click="emit('go-home')">
+					<view class="home-icon"></view>
+				</button>
+				<view class="nav-spacer"></view>
+				<button class="icon-button" aria-label="个人中心" @click="emit('open-profile')">
+					<view class="account-icon"></view>
+				</button>
+			</view>
+
+			<view class="case-header">
+				<text class="case-heading">患者：{{ patientName }} ({{ complaintShort }})</text>
+				<view class="patient-meta">
+					<text>姓名：{{ patientName }}</text>
+					<text>性别：{{ patientGender }}</text>
+					<text>年龄：{{ patientAge }}岁</text>
+					<text>科室：{{ patientDepartment }}</text>
+				</view>
+			</view>
+
+			<view class="diagnosis-content">
+				<view class="stepper">
+					<view class="step-line">
+						<view class="step-line-active"></view>
+					</view>
+					<view class="step done">
+						<view class="step-dot">
+							<view class="check-icon"></view>
+						</view>
+						<text>问诊</text>
+					</view>
+					<view class="step active">
+						<view class="step-dot">
+							<view class="stethoscope-icon"></view>
+						</view>
+						<text>临床诊断</text>
+					</view>
+					<view class="step">
+						<view class="step-dot">
+							<view class="pill-icon"></view>
+						</view>
+						<text>治疗计划</text>
+					</view>
+				</view>
+
+				<view class="mentor-card">
+					<view class="mentor-avatar">
+						<image src="/static/config-doctor.png" mode="aspectFill"></image>
+					</view>
+					<view class="mentor-bubble">
+						<text>{{ mentorAdvice }}</text>
+					</view>
+				</view>
+
+				<view class="form-area">
+					<view class="field-block">
+						<view class="field-label primary">
+							<view class="priority-icon"></view>
+							<text>主要诊断</text>
+						</view>
+						<view class="input-wrap">
+							<input
+								class="diagnosis-input"
+								v-model="form.primaryDiagnosis"
+								type="text"
+								placeholder="请输入初步诊断..."
+								placeholder-class="input-placeholder"
+							/>
+						</view>
+					</view>
+
+					<view class="field-block">
+						<view class="field-label">
+							<view class="checklist-icon"></view>
+							<text>鉴别诊断</text>
+						</view>
+						<view class="diff-list">
+							<view
+								v-for="(_, index) in form.differentialDiagnosis"
+								:key="index"
+								class="diff-row"
+							>
+								<text class="diff-index">{{ index + 1 }}</text>
+								<input
+									class="diff-input"
+									v-model="form.differentialDiagnosis[index]"
+									type="text"
+									:placeholder="`备选诊断 ${index + 1}`"
+									placeholder-class="input-placeholder"
+								/>
+							</view>
+						</view>
+					</view>
+
+					<view class="field-block">
+						<view class="field-label">
+							<view class="description-icon"></view>
+							<text>诊断依据</text>
+						</view>
+						<textarea
+							class="evidence-input"
+							v-model="form.evidence"
+							placeholder="请简述诊断依据，如：患者高龄、剧烈撕裂样胸痛、血压双侧不对称等..."
+							placeholder-class="input-placeholder"
+						></textarea>
+					</view>
+				</view>
+				<button class="next-button" :class="{ submitted: submitState === 'submitted' }" :disabled="submitting" @click="handleNext">
+					<view v-if="submitting" class="spinner"></view>
+					<text>{{ buttonText }}</text>
+					<view v-if="!submitting && submitState !== 'submitted'" class="arrow-icon"></view>
+					<view v-if="submitState === 'submitted'" class="check-small-icon"></view>
+				</button>
+			</view>
+		</view>
+
+		<view class="toast" :class="{ visible: toastVisible }">{{ toastMessage }}</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
+import type { ClinicalCase } from '../../api/cases'
+import { fetchDiagnosisContext, submitDiagnosis, type DiagnosisDraft } from '../../api/diagnosis'
+import TreatmentPage from '../treatment/treatment.vue'
+
+const props = defineProps<{
+	caseItem: ClinicalCase | null
+}>()
+
+const emit = defineEmits<{
+	(event: 'open-settings'): void
+	(event: 'open-profile'): void
+	(event: 'go-home'): void
+}>()
+
+type SubmitState = 'idle' | 'submitted'
+
+const form = reactive<DiagnosisDraft>({
+	primaryDiagnosis: '',
+	differentialDiagnosis: ['', ''],
+	evidence: ''
+})
+
+const mentorAdvice = ref('王主任建议：请结合患者主诉和问诊信息，完成主要诊断、鉴别诊断和诊断依据。')
+const submitting = ref(false)
+const submitState = ref<SubmitState>('idle')
+const toastMessage = ref('')
+const toastVisible = ref(false)
+const showTreatmentPage = ref(false)
+
+let toastTimer: ReturnType<typeof setTimeout> | null = null
+
+const patientName = computed(() => '陈先生')
+const patientGender = computed(() => '男')
+const patientAge = computed(() => 60)
+const patientDepartment = computed(() => '心血管内科')
+const complaintShort = computed(() => '胸痛')
+
+const buttonText = computed(() => {
+	if (submitting.value) return '提交中...'
+	if (submitState.value === 'submitted') return '已提交'
+	return '下一步'
+})
+
+function loadDiagnosisContext() {
+	fetchDiagnosisContext(props.caseItem).then(result => {
+		mentorAdvice.value = result.mentorAdvice
+		form.primaryDiagnosis = ''
+		form.differentialDiagnosis = ['', '']
+		form.evidence = ''
+	})
+}
+
+function handleNext() {
+	if (submitting.value) return
+
+	submitting.value = true
+	submitDiagnosis(props.caseItem?.id || 'mock-case', {
+		primaryDiagnosis: form.primaryDiagnosis,
+		differentialDiagnosis: form.differentialDiagnosis.filter(item => item.trim()),
+		evidence: form.evidence
+	}).then(result => {
+		uni.setStorageSync('clinical-thinking-diagnosis', result)
+		showTreatmentPage.value = true
+	}).finally(() => {
+		submitting.value = false
+	})
+}
+
+function showToast(message: string) {
+	if (toastTimer) clearTimeout(toastTimer)
+	toastMessage.value = message
+	toastVisible.value = true
+	uni.showToast({
+		title: message,
+		icon: 'none'
+	})
+	toastTimer = setTimeout(() => {
+		toastVisible.value = false
+	}, 2200)
+}
+
+onMounted(loadDiagnosisContext)
+
+onUnmounted(() => {
+	if (toastTimer) clearTimeout(toastTimer)
+})
+</script>
+
+<style scoped>
+page {
+	min-height: 100%;
+	background: #f9f9ff;
+}
+
+.diagnosis-page {
+	width: 390px;
+	max-width: 100vw;
+	height: 884px;
+	min-height: 884px;
+	margin: 0 auto;
+	overflow-x: hidden;
+	background: #f9f9ff;
+	color: #191c21;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.diagnosis-page view,
+.diagnosis-page text,
+.diagnosis-page button,
+.diagnosis-page input,
+.diagnosis-page textarea,
+.diagnosis-page scroll-view {
+	box-sizing: border-box;
+}
+
+.diagnosis-shell {
+	position: relative;
+	width: 390px;
+	max-width: 100vw;
+	height: 884px;
+	min-height: 884px;
+	background: #f9f9ff;
+	overflow-x: hidden;
+}
+
+.top-nav {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	transform: none;
+	z-index: 50;
+	box-sizing: border-box;
+	width: 100%;
+	max-width: 100vw;
+	height: 56px;
+	padding: 0 20px;
+	border-bottom: 1px solid rgba(194, 198, 212, 0.3);
+	background: #ffffff;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+	display: flex;
+	align-items: center;
+}
+
+.nav-spacer {
+	flex: 1;
+}
+
+.icon-button {
+	width: 40px;
+	height: 40px;
+	min-height: 40px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	border-radius: 50%;
+	background: transparent;
+	line-height: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.home-button {
+	margin-left: 4px;
+}
+
+.top-nav > .icon-button:first-child {
+	display: flex;
+}
+
+.icon-button::after,
+.next-button::after {
+	border: 0;
+}
+
+.home-icon,
+.account-icon,
+.check-icon,
+.stethoscope-icon,
+.pill-icon,
+.priority-icon,
+.checklist-icon,
+.description-icon,
+.arrow-icon,
+.check-small-icon {
+	background: #424752;
+}
+
+.home-icon,
+.account-icon {
+	width: 24px;
+	height: 24px;
+}
+
+.home-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.account-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.case-header {
+	margin-top: 56px;
+	padding: 16px 20px;
+	background: #f9f9ff;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+}
+
+.case-heading {
+	color: #191c21;
+	font-size: 20px;
+	line-height: 28px;
+	font-weight: 600;
+}
+
+.patient-meta {
+	margin-top: 8px;
+	padding-top: 8px;
+	border-top: 1px solid rgba(194, 198, 212, 0.3);
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: 24px;
+	row-gap: 4px;
+	color: #424752;
+	font-size: 13px;
+	line-height: 20px;
+}
+
+.diagnosis-content {
+	box-sizing: border-box;
+	padding: 24px 20px 32px;
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+}
+
+.stepper {
+	position: relative;
+	padding: 8px 0;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.step-line {
+	position: absolute;
+	left: 40px;
+	right: 40px;
+	top: 20px;
+	height: 4px;
+	background: #e1e2ea;
+	z-index: 0;
+}
+
+.step-line-active {
+	width: 50%;
+	height: 100%;
+	background: #00478d;
+}
+
+.step {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 4px;
+	color: #727783;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 500;
+}
+
+.step.active {
+	color: #00478d;
+	font-weight: 700;
+}
+
+.step.done {
+	color: #006970;
+}
+
+.step-dot {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	background: #e1e2ea;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.step.active .step-dot {
+	width: 40px;
+	height: 40px;
+	border: 4px solid #d6e3ff;
+	border-radius: 50%;
+	background: #00478d;
+	box-shadow: 0 0 0 2px #00478d;
+}
+
+.step.done .step-dot {
+	background: #006970;
+}
+
+.check-icon,
+.stethoscope-icon,
+.pill-icon {
+	width: 18px;
+	height: 18px;
+	background: currentColor;
+}
+
+.step.done .check-icon,
+.step.active .stethoscope-icon {
+	background: #ffffff;
+}
+
+.check-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9%2016.2%204.8%2012l-1.4%201.4L9%2019%2021%207l-1.4-1.4L9%2016.2z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9%2016.2%204.8%2012l-1.4%201.4L9%2019%2021%207l-1.4-1.4L9%2016.2z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.stethoscope-icon {
+	width: 20px;
+	height: 20px;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19%208h-1V4h-3v2h1v5a4%204%200%200%201-8%200V6h1V4H6v4H5a1%201%200%200%200%200%202h1v1a6%206%200%200%200%205%205.92V19a3%203%200%200%200%206%200v-1.1A5%205%200%200%200%2019%208zm-5%2012a1%201%200%200%201-1-1v-2.08a6%206%200%200%200%203-1.2V19a1%201%200%200%201-1%201h-1zm5-4a3%203%200%201%201%200-6%203%203%200%200%201%200%206z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19%208h-1V4h-3v2h1v5a4%204%200%200%201-8%200V6h1V4H6v4H5a1%201%200%200%200%200%202h1v1a6%206%200%200%200%205%205.92V19a3%203%200%200%200%206%200v-1.1A5%205%200%200%200%2019%208zm-5%2012a1%201%200%200%201-1-1v-2.08a6%206%200%200%200%203-1.2V19a1%201%200%200%201-1%201h-1zm5-4a3%203%200%201%201%200-6%203%203%200%200%201%200%206z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.pill-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m4.22%2019.78-.01-.01a5.5%205.5%200%200%201%200-7.78L12%204.22a5.5%205.5%200%200%201%207.78%207.78L12%2019.78a5.5%205.5%200%200%201-7.78%200zM13.41%205.64%2010%209.05%2014.95%2014%2018.36%2010.59a3.5%203.5%200%200%200-4.95-4.95zM5.64%2013.41a3.5%203.5%200%200%200%204.95%204.95L14%2014.95%209.05%2010%205.64%2013.41z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m4.22%2019.78-.01-.01a5.5%205.5%200%200%201%200-7.78L12%204.22a5.5%205.5%200%200%201%207.78%207.78L12%2019.78a5.5%205.5%200%200%201-7.78%200zM13.41%205.64%2010%209.05%2014.95%2014%2018.36%2010.59a3.5%203.5%200%200%200-4.95-4.95zM5.64%2013.41a3.5%203.5%200%200%200%204.95%204.95L14%2014.95%209.05%2010%205.64%2013.41z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.mentor-card {
+	padding: 12px;
+	border: 1px solid rgba(0, 71, 141, 0.1);
+	border-radius: 12px;
+	background: rgba(0, 71, 141, 0.05);
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+}
+
+.mentor-avatar {
+	flex: 0 0 auto;
+	width: 48px;
+	height: 48px;
+	border: 1px solid rgba(0, 71, 141, 0.2);
+	border-radius: 50%;
+	overflow: hidden;
+}
+
+.mentor-avatar image {
+	width: 100%;
+	height: 100%;
+}
+
+.mentor-bubble {
+	flex: 1;
+	padding: 12px;
+	border: 1px solid rgba(194, 198, 212, 0.3);
+	border-radius: 8px;
+	border-top-left-radius: 0;
+	background: #ffffff;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+	color: #191c21;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.form-area {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+.field-block {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.field-label {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	color: #424752;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+}
+
+.field-label.primary {
+	color: #00478d;
+}
+
+.priority-icon,
+.checklist-icon,
+.description-icon {
+	width: 16px;
+	height: 16px;
+	background: currentColor;
+}
+
+.priority-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M11%2018h2v-2h-2v2zm0-4h2V6h-2v8zm1%208a10%2010%200%201%201%200-20%2010%2010%200%200%201%200%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M11%2018h2v-2h-2v2zm0-4h2V6h-2v8zm1%208a10%2010%200%201%201%200-20%2010%2010%200%200%201%200%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.checklist-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2017h10v-2H10v2zm0-4h10v-2H10v2zm0-6v2h10V7H10zM4%207h4v4H4V7zm1%201v2h2V8H5zm-1%205h4v4H4v-4zm1%201v2h2v-2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2017h10v-2H10v2zm0-4h10v-2H10v2zm0-6v2h10V7H10zM4%207h4v4H4V7zm1%201v2h2V8H5zm-1%205h4v4H4v-4zm1%201v2h2v-2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.description-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8l-6-6zm-1%207V3.5L18.5%209H13zm-5%204h8v2H8v-2zm0%204h8v2H8v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8l-6-6zm-1%207V3.5L18.5%209H13zm-5%204h8v2H8v-2zm0%204h8v2H8v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.diagnosis-input,
+.diff-input,
+.evidence-input {
+	box-sizing: border-box;
+	width: 100%;
+	border: 1px solid #c2c6d4;
+	border-radius: 8px;
+	background: #ffffff;
+	color: #191c21;
+	font-size: 16px;
+	line-height: 24px;
+}
+
+.input-wrap {
+	position: relative;
+}
+
+.diagnosis-input {
+	height: 56px;
+	padding: 0 16px;
+}
+
+.diff-list {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.diff-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.diff-index {
+	flex: 0 0 auto;
+	width: 24px;
+	height: 24px;
+	border-radius: 4px;
+	background: #e7e8f0;
+	color: #424752;
+	font-size: 12px;
+	line-height: 24px;
+	font-weight: 600;
+	text-align: center;
+}
+
+.diff-input {
+	flex: 1;
+	height: 40px;
+	padding: 0 12px;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.evidence-input {
+	height: 116px;
+	padding: 14px 16px;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.input-placeholder {
+	color: #c2c6d4;
+}
+
+.next-button {
+	width: 100%;
+	min-height: 56px;
+	margin-top: 8px;
+	padding: 0;
+	border: 0;
+	border-radius: 999px;
+	background: #00478d;
+	box-shadow: 0 8px 18px rgba(0, 71, 141, 0.22);
+	color: #ffffff;
+	font-size: 16px;
+	line-height: 24px;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+}
+
+.next-button.submitted {
+	background: #006970;
+}
+
+.arrow-icon,
+.check-small-icon {
+	width: 20px;
+	height: 20px;
+	background: #ffffff;
+}
+
+.arrow-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%204-1.41%201.41L16.17%2011H4v2h12.17l-5.58%205.59L12%2020l8-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%204-1.41%201.41L16.17%2011H4v2h12.17l-5.58%205.59L12%2020l8-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.check-small-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9%2016.2 4.8%2012l-1.4%201.4L9%2019 21%207l-1.4-1.4L9%2016.2z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9%2016.2 4.8%2012l-1.4%201.4L9%2019 21%207l-1.4-1.4L9%2016.2z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.spinner {
+	width: 20px;
+	height: 20px;
+	border: 2px solid rgba(255, 255, 255, 0.36);
+	border-top-color: #ffffff;
+	border-radius: 50%;
+	box-sizing: border-box;
+	animation: spin 1s linear infinite;
+}
+
+.toast {
+	position: fixed;
+	left: 50%;
+	bottom: 96px;
+	z-index: 100;
+	max-width: 320px;
+	padding: 12px 24px;
+	border-radius: 999px;
+	background: #2e3037;
+	color: #eff0f8;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+	text-align: center;
+	pointer-events: none;
+	opacity: 0;
+	transform: translate(-50%, 16px);
+	transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.toast.visible {
+	opacity: 1;
+	transform: translate(-50%, 0);
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+</style>
diff --git a/pages/home/home.vue b/pages/home/home.vue
new file mode 100644
index 0000000..7b4ba90
--- /dev/null
+++ b/pages/home/home.vue
@@ -0,0 +1,393 @@
+<template>
+	<MatchingPage
+		v-if="showMatchingPage"
+		@open-settings="emit('open-settings')"
+		@open-profile="emit('open-profile')"
+		@go-home="showMatchingPage = false"
+	/>
+	<view v-else class="home-page">
+		<view class="home-shell">
+			<view class="top-bar">
+				<button class="icon-button" aria-label="配置" @click="emit('open-settings')">
+					<view class="settings-icon"></view>
+				</button>
+				<view class="top-spacer"></view>
+				<button class="icon-button" aria-label="个人中心" @click="emit('open-profile')">
+					<view class="account-icon"></view>
+				</button>
+			</view>
+
+			<view class="home-main">
+				<view class="speech-bubble">
+					<text class="bubble-line">{{ summary.greeting }}</text>
+					<view class="bubble-line-wrap">
+						<text class="bubble-line">让我们继续提升您的</text>
+						<text class="bubble-highlight">临床思维能力吧</text>
+						<text class="bubble-line">。</text>
+					</view>
+				</view>
+
+				<view class="doctor-stage">
+					<view class="doctor-shadow"></view>
+					<image class="director-image" src="/static/config-doctor.png" mode="aspectFit"></image>
+				</view>
+
+				<view class="action-area">
+					<button class="start-button" :disabled="starting" @click="handleStartTraining">
+						<view v-if="starting" class="spinner"></view>
+						<text>{{ starting ? '正在进入...' : '开始训练' }}</text>
+					</button>
+					<text class="remaining">今日剩余：{{ summary.remainingModules }}个模块</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="toast" :class="{ visible: toastVisible }">{{ toastMessage }}</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
+import { fetchHomeSummary, startTrainingSession, type HomeSummary } from '../../api/home'
+import MatchingPage from '../matching/matching.vue'
+
+const emit = defineEmits<{
+	(event: 'open-settings'): void
+	(event: 'open-profile'): void
+}>()
+
+const summary = reactive<HomeSummary>({
+	greeting: '下午好，医生。',
+	highlight: '让我们继续提升您的临床思维能力吧。',
+	remainingModules: 3,
+	doctorName: '王主任'
+})
+
+const starting = ref(false)
+const toastMessage = ref('')
+const toastVisible = ref(false)
+const showMatchingPage = ref(false)
+
+let toastTimer: ReturnType<typeof setTimeout> | null = null
+
+function loadHomeSummary() {
+	fetchHomeSummary().then(result => {
+		Object.assign(summary, result)
+	})
+}
+
+function handleStartTraining() {
+	if (starting.value) return
+	starting.value = true
+	startTrainingSession().then(result => {
+		uni.setStorageSync('clinical-thinking-session', result)
+		showMatchingPage.value = true
+	}).finally(() => {
+		setTimeout(() => {
+			starting.value = false
+		}, 600)
+	})
+}
+
+function showToast(message: string) {
+	if (toastTimer) clearTimeout(toastTimer)
+	toastMessage.value = message
+	toastVisible.value = true
+	uni.showToast({
+		title: message,
+		icon: 'none'
+	})
+	toastTimer = setTimeout(() => {
+		toastVisible.value = false
+	}, 2200)
+}
+
+onMounted(loadHomeSummary)
+
+onUnmounted(() => {
+	if (toastTimer) clearTimeout(toastTimer)
+})
+</script>
+
+<style>
+page {
+	min-height: 100%;
+	background: #f9f9ff;
+}
+
+.home-page {
+	min-height: 100vh;
+	background: #f9f9ff;
+	color: #191c21;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.home-shell {
+	position: relative;
+	min-height: 100vh;
+	overflow: hidden;
+	background: #f9f9ff;
+}
+
+.top-bar {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	z-index: 10;
+	box-sizing: border-box;
+	height: 56px;
+	padding: 0 20px;
+	border-bottom: 1px solid rgba(194, 198, 212, 0.3);
+	background: rgba(249, 249, 255, 0.82);
+	backdrop-filter: blur(12px);
+	-webkit-backdrop-filter: blur(12px);
+	display: flex;
+	align-items: center;
+}
+
+.top-spacer {
+	flex: 1;
+}
+
+.icon-button {
+	width: 40px;
+	height: 40px;
+	padding: 0;
+	border-radius: 50%;
+	background: transparent;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.icon-button::after {
+	border: 0;
+}
+
+.icon-button:active {
+	background: rgba(25, 28, 33, 0.05);
+}
+
+.settings-icon {
+	width: 22px;
+	height: 22px;
+	background: #424752;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.account-icon {
+	width: 24px;
+	height: 24px;
+	background: #424752;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.home-main {
+	box-sizing: border-box;
+	min-height: 100vh;
+	padding: 96px 20px 40px;
+	background: radial-gradient(circle at 50% 40%, #ffffff 0%, #f2f3fb 100%);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	overflow-y: auto;
+}
+
+.speech-bubble {
+	position: relative;
+	box-sizing: border-box;
+	max-width: 280px;
+	margin-bottom: 32px;
+	padding: 16px 24px;
+	border: 1px solid #e2e8f0;
+	border-radius: 8px;
+	background: #ffffff;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+	text-align: center;
+	animation: bubble-float 4s ease-in-out infinite;
+}
+
+.speech-bubble::before {
+	content: '';
+	position: absolute;
+	left: 50%;
+	bottom: -10px;
+	width: 16px;
+	height: 16px;
+	border-right: 1px solid #e2e8f0;
+	border-bottom: 1px solid #e2e8f0;
+	background: #ffffff;
+	transform: translateX(-50%) rotate(45deg);
+}
+
+.bubble-line,
+.bubble-highlight {
+	font-size: 16px;
+	line-height: 24px;
+	font-weight: 400;
+}
+
+.bubble-line {
+	color: #191c21;
+}
+
+.bubble-highlight {
+	color: #00478d;
+	font-weight: 700;
+}
+
+.bubble-line-wrap {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+}
+
+.doctor-stage {
+	position: relative;
+	width: 100%;
+	max-width: 320px;
+	aspect-ratio: 1;
+	margin-bottom: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.doctor-shadow {
+	position: absolute;
+	left: 12.5%;
+	right: 12.5%;
+	bottom: 16px;
+	height: 32px;
+	border-radius: 50%;
+	background: rgba(0, 0, 0, 0.05);
+	filter: blur(12px);
+}
+
+.director-image {
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	height: 100%;
+	transition: transform 0.5s ease;
+}
+
+.director-image:active {
+	transform: scale(1.03);
+}
+
+.action-area {
+	width: 100%;
+	max-width: 320px;
+	margin-bottom: 32px;
+}
+
+.start-button {
+	width: 100%;
+	min-height: 56px;
+	padding: 16px;
+	border-radius: 8px;
+	background: #00478d;
+	box-shadow: 0 4px 12px rgba(0, 71, 141, 0.2);
+	color: #ffffff;
+	font-size: 20px;
+	line-height: 28px;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	animation: pulse-gentle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.start-button::after {
+	border: 0;
+}
+
+.start-button:active {
+	transform: scale(0.95);
+}
+
+.remaining {
+	display: block;
+	margin-top: 16px;
+	text-align: center;
+	color: #424752;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 500;
+	letter-spacing: 0;
+}
+
+.spinner {
+	width: 20px;
+	height: 20px;
+	border: 2px solid rgba(255, 255, 255, 0.36);
+	border-top-color: #ffffff;
+	border-radius: 50%;
+	box-sizing: border-box;
+	animation: spin 1s linear infinite;
+}
+
+.toast {
+	position: fixed;
+	left: 50%;
+	bottom: 96px;
+	z-index: 100;
+	max-width: 320px;
+	padding: 12px 24px;
+	border-radius: 999px;
+	background: #2e3037;
+	color: #eff0f8;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+	text-align: center;
+	pointer-events: none;
+	opacity: 0;
+	transform: translate(-50%, 16px);
+	transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.toast.visible {
+	opacity: 1;
+	transform: translate(-50%, 0);
+}
+
+@keyframes pulse-gentle {
+	0%,
+	100% {
+		transform: scale(1);
+		box-shadow: 0 4px 12px rgba(0, 71, 141, 0.2);
+	}
+	50% {
+		transform: scale(1.02);
+		box-shadow: 0 8px 24px rgba(0, 71, 141, 0.35);
+	}
+}
+
+@keyframes bubble-float {
+	0%,
+	100% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-6px);
+	}
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 4ca2b92..49e5715 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,52 +1,826 @@
-<template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				title: 'Hello'
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		}
-	}
-</script>
-
-<style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
+<template>
+	<view class="page-root">
+		<ProfilePage
+			v-if="showProfilePage"
+			@open-settings="openSettings"
+			@go-home="showProfilePage = false"
+		/>
+		<ConfigPage
+			v-if="showConfigPage"
+			v-show="!showProfilePage"
+			@open-profile="showProfilePage = true"
+		/>
+		<view v-if="!showConfigPage && !showProfilePage" class="auth-page">
+		<view class="auth-container">
+			<view class="header">
+				<text class="title">临床思维训练</text>
+				<text class="subtitle">提升临床决策能力的高效平台</text>
+			</view>
+
+			<view class="form">
+				<view class="form-group">
+					<text class="label">手机号码</text>
+					<view class="input-wrap" :class="{ focused: activeField === 'phone' }">
+						<text class="country-code">+86</text>
+						<view class="separator"></view>
+						<input
+							class="input"
+							type="number"
+							maxlength="11"
+							v-model="form.phone"
+							placeholder="请输入手机号"
+							placeholder-class="placeholder"
+							@focus="activeField = 'phone'"
+							@blur="activeField = ''"
+							@confirm="handleLogin"
+						/>
+					</view>
+				</view>
+
+				<view class="form-group">
+					<text class="label">验证码</text>
+					<view class="code-row">
+						<view class="input-wrap code-input-wrap" :class="{ focused: activeField === 'code' }">
+							<view class="shield-icon"></view>
+							<input
+								class="input"
+								type="number"
+								maxlength="6"
+								v-model="form.code"
+								placeholder="短信验证码"
+								placeholder-class="placeholder"
+								@focus="activeField = 'code'"
+								@blur="activeField = ''"
+								@confirm="handleLogin"
+							/>
+						</view>
+						<button class="code-button" :class="{ disabled: isCounting }" :disabled="isCounting" @click="handleSendCode">
+							{{ codeButtonText }}
+						</button>
+					</view>
+				</view>
+
+				<view class="form-group">
+					<text class="label">所属机构</text>
+					<view class="select-wrap" @click="institutionPickerVisible = true">
+						<text class="select-text" :class="{ muted: !selectedInstitution }">
+							{{ selectedInstitution ? selectedInstitution.name : '选择医院或医学院校' }}
+						</text>
+						<view class="expand-icon"></view>
+					</view>
+				</view>
+
+				<text class="hint">* 未注册手机号登录时将自动创建账号</text>
+
+				<button class="login-button" :class="{ loading: submitting }" :disabled="submitting" @click="handleLogin">
+					<view v-if="submitting" class="loading-spinner"></view>
+					<text v-else>登录 / 注册</text>
+				</button>
+			</view>
+
+			<view class="footer">
+				<view class="agreement" :class="{ shake: agreementShake }" @click="toggleAgreement">
+					<view class="checkbox" :class="{ checked: agreed }"></view>
+					<view class="agreement-copy">
+						<text class="agreement-text">我已阅读并同意 </text>
+						<text class="agreement-link" @click.stop="openAgreement('service')">《用户服务协议》</text>
+						<text class="agreement-text"> 与 </text>
+						<text class="agreement-link" @click.stop="openAgreement('privacy')">《隐私保护政策》</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="toast" :class="{ visible: toastVisible }">{{ toastMessage }}</view>
+
+		<view v-if="institutionPickerVisible" class="picker-mask" @click="institutionPickerVisible = false">
+			<view class="picker-panel" @click.stop>
+				<view class="picker-header">
+					<text class="picker-title">选择所属机构</text>
+					<text class="picker-close" @click="institutionPickerVisible = false">关闭</text>
+				</view>
+				<scroll-view class="institution-list" scroll-y>
+					<view
+						v-for="institution in institutions"
+						:key="institution.id"
+						class="institution-item"
+						:class="{ active: form.institutionId === institution.id }"
+						@click="chooseInstitution(institution)"
+					>
+						<view class="institution-copy">
+							<text class="institution-name">{{ institution.name }}</text>
+							<text class="institution-meta">{{ institution.city }} · {{ institution.typeName }}</text>
+						</view>
+						<view v-if="form.institutionId === institution.id" class="selected-mark"></view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onUnmounted, reactive, ref } from 'vue'
+import ConfigPage from '../config/config.vue'
+import ProfilePage from '../profile/profile.vue'
+
+type Institution = {
+	id: string
+	name: string
+	city: string
+	typeName: string
+}
+
+type LoginUser = {
+	id: string
+	phone: string
+	institutionId: string
+	institutionName: string
+	token: string
+}
+
+const institutions: Institution[] = [
+	{ id: 'school-001', name: '北京协和医学院', city: '北京', typeName: '医学院校' },
+	{ id: 'hospital-001', name: '北京协和医院', city: '北京', typeName: '三甲医院' },
+	{ id: 'hospital-002', name: '四川大学华西医院', city: '成都', typeName: '三甲医院' },
+	{ id: 'hospital-003', name: '复旦大学附属中山医院', city: '上海', typeName: '三甲医院' },
+	{ id: 'hospital-004', name: '中山大学孙逸仙纪念医院', city: '广州', typeName: '三甲医院' },
+	{ id: 'hospital-005', name: '上海交通大学医学院附属瑞金医院', city: '上海', typeName: '三甲医院' },
+	{ id: 'school-002', name: '北京大学医学部', city: '北京', typeName: '医学院校' },
+	{ id: 'school-003', name: '复旦大学上海医学院', city: '上海', typeName: '医学院校' },
+	{ id: 'school-004', name: '浙江大学医学院', city: '杭州', typeName: '医学院校' },
+	{ id: 'others', name: '其他机构', city: '其他', typeName: '手动登记' }
+]
+
+const form = reactive({
+	phone: '',
+	code: '',
+	institutionId: ''
+})
+
+const institutionPickerVisible = ref(false)
+const mockVerifyCode = ref('')
+const countdown = ref(0)
+const activeField = ref('')
+const agreed = ref(false)
+const agreementShake = ref(false)
+const submitting = ref(false)
+const toastMessage = ref('')
+const toastVisible = ref(false)
+const showConfigPage = ref(false)
+const showProfilePage = ref(false)
+
+let countdownTimer: ReturnType<typeof setInterval> | null = null
+let toastTimer: ReturnType<typeof setTimeout> | null = null
+
+const selectedInstitution = computed(() => {
+	return institutions.find(item => item.id === form.institutionId)
+})
+
+const isCounting = computed(() => countdown.value > 0)
+
+const codeButtonText = computed(() => {
+	return isCounting.value ? `${countdown.value}s 后重新获取` : '获取验证码'
+})
+
+function chooseInstitution(institution: Institution) {
+	form.institutionId = institution.id
+	institutionPickerVisible.value = false
+}
+
+function toggleAgreement() {
+	agreed.value = !agreed.value
+}
+
+function handleSendCode() {
+	if (!validatePhone()) return
+
+	mockVerifyCode.value = String(Math.floor(100000 + Math.random() * 900000))
+	form.code = mockVerifyCode.value
+	countdown.value = 60
+	clearCountdownTimer()
+	countdownTimer = setInterval(() => {
+		countdown.value -= 1
+		if (countdown.value <= 0) {
+			clearCountdownTimer()
+		}
+	}, 1000)
+	showToast(`模拟验证码：${mockVerifyCode.value}`)
+}
+
+function handleLogin() {
+	if (submitting.value) return
+	if (!validatePhone()) return
+	if (!form.code) {
+		showToast('请输入短信验证码')
+		return
+	}
+	if (mockVerifyCode.value && form.code !== mockVerifyCode.value) {
+		showToast('验证码不正确')
+		return
+	}
+	if (!selectedInstitution.value) {
+		showToast('请选择所属机构')
+		return
+	}
+	if (!agreed.value) {
+		showToast('请阅读并勾选用户协议')
+		triggerAgreementShake()
+		return
+	}
+
+	submitting.value = true
+	setTimeout(() => {
+		const user: LoginUser = {
+			id: `mock-user-${Date.now()}`,
+			phone: form.phone,
+			institutionId: selectedInstitution.value?.id || '',
+			institutionName: selectedInstitution.value?.name || '',
+			token: `mock-token-${Date.now()}`
+		}
+
+		uni.setStorageSync('clinical-thinking-user', user)
+		showToast('正在进入系统...')
+		setTimeout(() => {
+			submitting.value = false
+			showConfigPage.value = true
+		}, 300)
+	}, 500)
+}
+
+function validatePhone() {
+	if (!/^1[3-9]\d{9}$/.test(form.phone)) {
+		showToast('请输入正确的手机号')
+		return false
+	}
+	return true
+}
+
+function openAgreement(type: 'service' | 'privacy') {
+	uni.showModal({
+		title: type === 'service' ? '用户服务协议' : '隐私保护政策',
+		content: '这里是前端模拟协议内容，后续可替换为正式协议页面或富文本接口。',
+		showCancel: false,
+		confirmColor: '#00478d'
+	})
+}
+
+function openSettings() {
+	showProfilePage.value = false
+	showConfigPage.value = true
+}
+
+function triggerAgreementShake() {
+	agreementShake.value = false
+	nextTick(() => {
+		agreementShake.value = true
+		setTimeout(() => {
+			agreementShake.value = false
+		}, 500)
+	})
+}
+
+function showToast(message: string) {
+	if (toastTimer) {
+		clearTimeout(toastTimer)
+	}
+	toastMessage.value = message
+	toastVisible.value = true
+	uni.showToast({
+		title: message,
+		icon: 'none'
+	})
+	toastTimer = setTimeout(() => {
+		toastVisible.value = false
+	}, 2500)
+}
+
+function clearCountdownTimer() {
+	if (countdownTimer) {
+		clearInterval(countdownTimer)
+		countdownTimer = null
+	}
+}
+
+onUnmounted(() => {
+	clearCountdownTimer()
+	if (toastTimer) {
+		clearTimeout(toastTimer)
+	}
+})
+</script>
+
+<style>
+page {
+	min-height: 100%;
+	background: #f9f9ff;
+}
+
+.page-root {
+	min-height: 100vh;
+	background: #f9f9ff;
+}
+
+.auth-page {
+	min-height: 100vh;
+	background: #f9f9ff;
+	color: #191c21;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.auth-container {
+	box-sizing: border-box;
+	width: 100%;
+	max-width: 448px;
+	min-height: 100vh;
+	margin: 0 auto;
+	padding: 32px 20px 24px;
+	display: flex;
+	flex-direction: column;
+}
+
+.header {
+	margin: 24px 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+}
+
+.logo {
+	width: 96px;
+	height: 96px;
+	margin-bottom: 16px;
+}
+
+.title {
+	color: #00478d;
+	font-size: 24px;
+	line-height: 32px;
+	font-weight: 600;
+	letter-spacing: 0;
+}
+
+.subtitle {
+	margin-top: 8px;
+	color: #727783;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+	letter-spacing: 0;
+}
+
+.form {
+	flex: 1;
+}
+
+.form-group {
+	margin-bottom: 16px;
+}
+
+.label {
+	display: block;
+	margin: 0 0 8px 4px;
+	color: #424752;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 500;
+	letter-spacing: 0;
+}
+
+.input-wrap,
+.select-wrap {
+	box-sizing: border-box;
+	width: 100%;
+	height: 56px;
+	padding: 0 16px;
+	border: 1px solid #c2c6d4;
+	border-radius: 8px;
+	background: #f9f9ff;
+	display: flex;
+	align-items: center;
+	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
+}
+
+.input-wrap.focused,
+.select-wrap:active {
+	border-color: #00478d;
+	box-shadow: 0 0 0 1px #00478d;
+}
+
+.country-code {
+	margin-right: 4px;
+	color: #191c21;
+	font-size: 16px;
+	line-height: 24px;
+	font-weight: 400;
+}
+
+.separator {
+	width: 1px;
+	height: 24px;
+	margin: 0 12px;
+	background: #c2c6d4;
+}
+
+.input {
+	flex: 1;
+	min-width: 0;
+	height: 54px;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: #191c21;
+	font-size: 16px;
+	line-height: 24px;
+}
+
+.placeholder {
+	color: rgba(114, 119, 131, 0.6);
+}
+
+.code-row {
+	display: flex;
+	align-items: center;
+	column-gap: 8px;
+}
+
+.code-input-wrap {
+	flex: 1;
+	min-width: 0;
+}
+
+.shield-icon {
+	position: relative;
+	flex: 0 0 auto;
+	box-sizing: border-box;
+	width: 22px;
+	height: 24px;
+	margin-right: 12px;
+	border: 3px solid #727783;
+	border-radius: 7px 7px 10px 10px;
+}
+
+.shield-icon::after {
+	content: '';
+	position: absolute;
+	left: 5px;
+	top: 5px;
+	width: 8px;
+	height: 5px;
+	border-left: 2px solid #727783;
+	border-bottom: 2px solid #727783;
+	transform: rotate(-45deg);
+}
+
+.code-button {
+	box-sizing: border-box;
+	flex: 0 0 auto;
+	width: 124px;
+	height: 56px;
+	padding: 0 16px;
+	border: 1px solid #00478d;
+	border-radius: 8px;
+	background: #f9f9ff;
+	color: #00478d;
+	font-size: 14px;
+	line-height: 54px;
+	font-weight: 600;
+	white-space: nowrap;
+	transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
+}
+
+.code-button:active,
+.login-button:active {
+	transform: scale(0.98);
+}
+
+.code-button.disabled {
+	opacity: 0.5;
+}
+
+.code-button::after,
+.login-button::after {
+	border: 0;
+}
+
+.select-wrap {
+	justify-content: space-between;
+}
+
+.select-text {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: #191c21;
+	font-size: 16px;
+	line-height: 24px;
+}
+
+.select-text.muted {
+	color: rgba(114, 119, 131, 0.6);
+}
+
+.expand-icon {
+	position: relative;
+	flex: 0 0 auto;
+	width: 24px;
+	height: 24px;
+	margin-left: 12px;
+}
+
+.expand-icon::before {
+	content: '';
+	position: absolute;
+	left: 6px;
+	top: 7px;
+	width: 10px;
+	height: 10px;
+	border-right: 2px solid #727783;
+	border-bottom: 2px solid #727783;
+	transform: rotate(45deg);
+}
+
+.hint {
+	display: block;
+	padding: 4px 0;
+	text-align: center;
+	color: #727783;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 500;
+	letter-spacing: 0;
+}
+
+.login-button {
+	width: 100%;
+	height: 56px;
+	margin-top: 16px;
+	border-radius: 8px;
+	background: #00478d;
+	box-shadow: 0 4px 12px rgba(0, 71, 141, 0.2);
+	color: #ffffff;
+	font-size: 20px;
+	line-height: 56px;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
+}
+
+.login-button.loading {
+	opacity: 0.9;
+}
+
+.loading-spinner {
+	width: 24px;
+	height: 24px;
+	border: 3px solid rgba(255, 255, 255, 0.36);
+	border-top-color: #ffffff;
+	border-radius: 50%;
+	animation: spin 1s linear infinite;
+}
+
+.footer {
+	margin-top: 24px;
+	padding-bottom: env(safe-area-inset-bottom);
+	display: flex;
+	justify-content: center;
+}
+
+.agreement {
+	max-width: 280px;
+	display: flex;
+	align-items: flex-start;
+}
+
+.checkbox {
+	position: relative;
+	box-sizing: border-box;
+	flex: 0 0 auto;
+	width: 16px;
+	height: 16px;
+	margin-top: 4px;
+	margin-right: 8px;
+	border: 1px solid #c2c6d4;
+	border-radius: 4px;
+	background: #ffffff;
+}
+
+.checkbox.checked {
+	border-color: #00478d;
+	background: #00478d;
+}
+
+.checkbox.checked::after {
+	content: '';
+	position: absolute;
+	left: 4px;
+	top: 1px;
+	width: 5px;
+	height: 9px;
+	border-right: 2px solid #ffffff;
+	border-bottom: 2px solid #ffffff;
+	transform: rotate(45deg);
+}
+
+.agreement-copy {
+	flex: 1;
+	font-size: 0;
+	line-height: 0;
+}
+
+.agreement-text,
+.agreement-link {
+	font-size: 12px;
+	line-height: 20px;
+	font-weight: 500;
+	letter-spacing: 0;
+}
+
+.agreement-text {
+	color: #424752;
+}
+
+.agreement-link {
+	color: #00478d;
+}
+
+.toast {
+	position: fixed;
+	left: 50%;
+	bottom: 128px;
+	z-index: 100;
+	max-width: 320px;
+	padding: 12px 24px;
+	border-radius: 999px;
+	background: #2e3037;
+	color: #eff0f8;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+	text-align: center;
+	pointer-events: none;
+	opacity: 0;
+	transform: translate(-50%, 16px);
+	transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.toast.visible {
+	opacity: 1;
+	transform: translate(-50%, 0);
+}
+
+.picker-mask {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	z-index: 90;
+	background: rgba(25, 28, 33, 0.38);
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+}
+
+.picker-panel {
+	box-sizing: border-box;
+	width: 100%;
+	max-width: 448px;
+	max-height: 72vh;
+	padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
+	border-radius: 16px 16px 0 0;
+	background: #ffffff;
+	box-shadow: 0 -12px 30px rgba(25, 28, 33, 0.16);
+}
+
+.picker-header {
+	height: 40px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.picker-title {
+	color: #191c21;
+	font-size: 18px;
+	line-height: 28px;
+	font-weight: 600;
+}
+
+.picker-close {
+	color: #00478d;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+}
+
+.institution-list {
+	max-height: calc(72vh - 72px);
+	margin-top: 8px;
+}
+
+.institution-item {
+	box-sizing: border-box;
+	min-height: 64px;
+	padding: 12px 4px;
+	border-bottom: 1px solid #ecedf6;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.institution-item.active {
+	color: #00478d;
+}
+
+.institution-copy {
+	flex: 1;
+	min-width: 0;
+	padding-right: 16px;
+	display: flex;
+	flex-direction: column;
+}
+
+.institution-name {
+	color: #191c21;
+	font-size: 16px;
+	line-height: 24px;
+	font-weight: 500;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.institution-item.active .institution-name {
+	color: #00478d;
+	font-weight: 600;
+}
+
+.institution-meta {
+	margin-top: 2px;
+	color: #727783;
+	font-size: 12px;
+	line-height: 18px;
+}
+
+.selected-mark {
+	position: relative;
+	flex: 0 0 auto;
+	width: 18px;
+	height: 18px;
+	border-radius: 50%;
+	background: #00478d;
+}
+
+.selected-mark::after {
+	content: '';
+	position: absolute;
+	left: 6px;
+	top: 3px;
+	width: 5px;
+	height: 9px;
+	border-right: 2px solid #ffffff;
+	border-bottom: 2px solid #ffffff;
+	transform: rotate(45deg);
+}
+
+.shake {
+	animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
+}
+
+@keyframes shake {
+	10%,
+	90% {
+		transform: translate3d(-1px, 0, 0);
+	}
+	20%,
+	80% {
+		transform: translate3d(2px, 0, 0);
+	}
+	30%,
+	50%,
+	70% {
+		transform: translate3d(-4px, 0, 0);
+	}
+	40%,
+	60% {
+		transform: translate3d(4px, 0, 0);
+	}
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
 </style>
diff --git a/pages/matching/matching.vue b/pages/matching/matching.vue
new file mode 100644
index 0000000..5397d53
--- /dev/null
+++ b/pages/matching/matching.vue
@@ -0,0 +1,646 @@
+<template>
+	<CasesPage
+		v-if="showCasesPage"
+		@open-settings="emit('open-settings')"
+		@open-profile="emit('open-profile')"
+		@go-home="emit('go-home')"
+	/>
+	<view v-else class="matching-page">
+		<view class="matching-shell">
+			<view class="top-visual">
+				<view class="network">
+					<view class="ring ring-large"></view>
+					<view class="ring ring-middle"></view>
+					<view class="ring ring-small"></view>
+					<view class="node node-top"></view>
+					<view class="node node-left"></view>
+					<view class="node node-right"></view>
+					<view
+						v-for="particle in particles"
+						:key="particle.id"
+						class="particle"
+						:style="particle.style"
+					></view>
+				</view>
+			</view>
+
+			<view class="middle-visual">
+				<view class="match-bubble">
+					<text>{{ profile.message }}</text>
+					<text class="typing-dots"></text>
+					<view class="bubble-tail"></view>
+				</view>
+
+				<view class="director-card">
+					<image class="director-image" src="/static/config-doctor.png" mode="aspectFit"></image>
+				</view>
+
+				<view class="intelligence-area">
+					<view class="scan-circle">
+						<view class="pulse-ring ring-one"></view>
+						<view class="pulse-ring ring-two"></view>
+						<view class="brain-core">
+							<view class="scan-bar"></view>
+							<view class="brain-icon"></view>
+						</view>
+					</view>
+
+					<view
+						v-for="(tag, index) in profile.tags"
+						:key="tag.label"
+						class="float-tag"
+						:class="[`tag-${tag.tone}`, `tag-pos-${index}`]"
+					>
+						<text>{{ tag.label }}</text>
+					</view>
+				</view>
+			</view>
+
+			<view class="bottom-progress">
+				<view class="progress-track">
+					<view class="progress-fill" :style="{ width: `${progress}%` }"></view>
+				</view>
+				<text class="progress-subtitle">{{ profile.subtitle }}</text>
+				<view class="security-icon"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
+import { fetchMatchingProfile, type MatchingProfile } from '../../api/matching'
+import CasesPage from '../cases/cases.vue'
+
+const emit = defineEmits<{
+	(event: 'open-settings'): void
+	(event: 'open-profile'): void
+	(event: 'go-home'): void
+}>()
+
+type Particle = {
+	id: number
+	style: Record<string, string>
+}
+
+const profile = reactive<MatchingProfile>({
+	message: '王主任正在为您智能匹配病例',
+	subtitle: '正在通过大模型计算最适合您的临床案例库...',
+	progressTarget: 92,
+	tags: []
+})
+
+const particles = ref<Particle[]>([])
+const progress = ref(0)
+const showCasesPage = ref(false)
+
+let particleId = 0
+let particleTimer: ReturnType<typeof setInterval> | null = null
+let progressTimer: ReturnType<typeof setInterval> | null = null
+
+function loadMatchingProfile() {
+	fetchMatchingProfile().then(result => {
+		Object.assign(profile, result)
+		startProgress()
+	})
+}
+
+function createParticle() {
+	const id = particleId++
+	const startX = Math.random() * 256
+	const startY = Math.random() * 256
+	const destX = (Math.random() - 0.5) * 150
+	const destY = (Math.random() - 0.5) * 150
+	const duration = 2 + Math.random() * 3
+
+	particles.value.push({
+		id,
+		style: {
+			left: `${startX}px`,
+			top: `${startY}px`,
+			'--particle-x': `${destX}px`,
+			'--particle-y': `${destY}px`,
+			animationDuration: `${duration}s`
+		}
+	})
+
+	setTimeout(() => {
+		particles.value = particles.value.filter(item => item.id !== id)
+	}, duration * 1000)
+}
+
+function startParticles() {
+	for (let index = 0; index < 12; index += 1) {
+		createParticle()
+	}
+	particleTimer = setInterval(createParticle, 300)
+}
+
+function startProgress() {
+	if (progressTimer) clearInterval(progressTimer)
+	progress.value = 0
+	progressTimer = setInterval(() => {
+		if (progress.value >= profile.progressTarget) {
+			if (progressTimer) clearInterval(progressTimer)
+			progressTimer = null
+			setTimeout(() => {
+				showCasesPage.value = true
+			}, 700)
+			return
+		}
+
+		progress.value = Math.min(profile.progressTarget, progress.value + Math.random() * 3)
+	}, 600)
+}
+
+onMounted(() => {
+	loadMatchingProfile()
+	startParticles()
+})
+
+onUnmounted(() => {
+	if (particleTimer) clearInterval(particleTimer)
+	if (progressTimer) clearInterval(progressTimer)
+})
+</script>
+
+<style>
+page {
+	min-height: 100%;
+	background: #ffffff;
+}
+
+.matching-page {
+	min-height: 100vh;
+	background: #ffffff;
+	color: #191c21;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.matching-shell {
+	position: relative;
+	min-height: 100vh;
+	overflow: hidden;
+	background: #ffffff;
+	display: flex;
+	flex-direction: column;
+}
+
+.matching-shell::before {
+	content: '';
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background-size: 40px 40px;
+	background-image: radial-gradient(circle, rgba(0, 71, 141, 0.08) 1px, transparent 1px);
+	pointer-events: none;
+}
+
+.top-visual {
+	position: relative;
+	z-index: 1;
+	height: 33.333vh;
+	min-height: 250px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+}
+
+.network {
+	position: relative;
+	width: 256px;
+	height: 256px;
+}
+
+.ring {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	border-radius: 50%;
+	transform: translate(-50%, -50%);
+	box-sizing: border-box;
+}
+
+.ring-large {
+	width: 224px;
+	height: 224px;
+	border: 1px solid rgba(194, 198, 212, 0.28);
+	animation: spin-reverse 15s linear infinite;
+}
+
+.ring-middle {
+	width: 192px;
+	height: 192px;
+	border: 2px solid rgba(0, 71, 141, 0.2);
+	animation: pulse-soft 2s ease-in-out infinite;
+}
+
+.ring-small {
+	width: 128px;
+	height: 128px;
+	border: 1px solid rgba(0, 105, 112, 0.3);
+	animation: spin 10s linear infinite;
+}
+
+.node {
+	position: absolute;
+	border-radius: 50%;
+}
+
+.node-top {
+	left: 50%;
+	top: 16px;
+	width: 16px;
+	height: 16px;
+	background: #00478d;
+	box-shadow: 0 0 15px rgba(0, 71, 141, 0.5);
+	transform: translateX(-50%);
+}
+
+.node-left {
+	left: 40px;
+	bottom: 40px;
+	width: 12px;
+	height: 12px;
+	background: #006970;
+	box-shadow: 0 0 10px rgba(0, 105, 112, 0.4);
+}
+
+.node-right {
+	right: 32px;
+	top: 80px;
+	width: 20px;
+	height: 20px;
+	background: #005eb8;
+	box-shadow: 0 0 12px rgba(0, 94, 184, 0.4);
+}
+
+.particle {
+	position: absolute;
+	width: 4px;
+	height: 4px;
+	border-radius: 50%;
+	background: #00478d;
+	box-shadow: 0 0 8px #00478d;
+	pointer-events: none;
+	animation-name: particle-move;
+	animation-timing-function: linear;
+	animation-fill-mode: forwards;
+}
+
+.middle-visual {
+	position: relative;
+	z-index: 1;
+	flex: 1;
+	padding: 40px 20px 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.match-bubble {
+	position: relative;
+	max-width: 280px;
+	margin-bottom: 24px;
+	padding: 12px 16px;
+	border: 1px solid #c2c6d4;
+	border-radius: 8px;
+	background: #e1e2ea;
+	box-shadow: 0 4px 12px rgba(25, 28, 33, 0.06);
+	color: #424752;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+}
+
+.bubble-tail {
+	position: absolute;
+	left: 50%;
+	bottom: -8px;
+	width: 16px;
+	height: 16px;
+	border-right: 1px solid #c2c6d4;
+	border-bottom: 1px solid #c2c6d4;
+	background: #e1e2ea;
+	transform: translateX(-50%) rotate(45deg);
+}
+
+.typing-dots::after {
+	content: '';
+	animation: typing 1.5s steps(4) infinite;
+}
+
+.director-card {
+	width: 192px;
+	height: 192px;
+	margin-bottom: 32px;
+	padding: 8px;
+	border-radius: 8px;
+	background: #ffffff;
+	box-shadow: 0 8px 22px rgba(25, 28, 33, 0.12);
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	animation: float-soft 6s ease-in-out infinite;
+}
+
+.director-image {
+	width: 100%;
+	height: 100%;
+	border-radius: 8px;
+}
+
+.intelligence-area {
+	position: relative;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.scan-circle {
+	position: relative;
+	width: 96px;
+	height: 96px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.pulse-ring {
+	position: absolute;
+	border-radius: 50%;
+	animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
+}
+
+.ring-one {
+	width: 96px;
+	height: 96px;
+	background: rgba(0, 71, 141, 0.1);
+}
+
+.ring-two {
+	width: 76px;
+	height: 76px;
+	background: rgba(0, 71, 141, 0.2);
+	animation-delay: 0.5s;
+}
+
+.brain-core {
+	position: relative;
+	z-index: 2;
+	width: 64px;
+	height: 64px;
+	border: 1px solid rgba(0, 71, 141, 0.2);
+	border-radius: 50%;
+	background: #f9f9ff;
+	box-shadow: 0 6px 16px rgba(25, 28, 33, 0.08);
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.scan-bar {
+	position: absolute;
+	left: -100%;
+	top: 0;
+	width: 200%;
+	height: 100%;
+	background: linear-gradient(to right, transparent, rgba(0, 71, 141, 0.4), transparent);
+	animation: scan-h 2s ease-in-out infinite;
+}
+
+.brain-icon {
+	position: relative;
+	z-index: 1;
+	width: 32px;
+	height: 32px;
+	background: #00478d;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9%202a4%204%200%200%200-4%204v.1A5%205%200%200%200%203%2010a5%205%200%200%200%202%204v.1A4%204%200%200%200%209%2022h1V2H9zm6%200h-1v20h1a4%204%200%200%200%204-4v-.1a5%205%200%200%200%202-4A5%205%200%200%200%2019%206.1V6a4%204%200%200%200-4-4z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9%202a4%204%200%200%200-4%204v.1A5%205%200%200%200%203%2010a5%205%200%200%200%202%204v.1A4%204%200%200%200%209%2022h1V2H9zm6%200h-1v20h1a4%204%200%200%200%204-4v-.1a5%205%200%200%200%202-4A5%205%200%200%200%2019%206.1V6a4%204%200%200%200-4-4z'/%3E%3C/svg%3E") center / contain no-repeat;
+	animation: pulse-soft 1.8s ease-in-out infinite;
+}
+
+.float-tag {
+	position: absolute;
+	padding: 4px 12px;
+	border-radius: 999px;
+	border: 1px solid transparent;
+	backdrop-filter: blur(8px);
+	-webkit-backdrop-filter: blur(8px);
+	font-size: 10px;
+	line-height: 16px;
+	font-weight: 500;
+	opacity: 0;
+	animation: fade-float 1s forwards ease-out, float 4s ease-in-out infinite;
+}
+
+.tag-pos-0 {
+	left: 0;
+	top: -16px;
+	animation-delay: 0.2s, 1.2s;
+}
+
+.tag-pos-1 {
+	right: -8px;
+	top: 48px;
+	animation-delay: 0.6s, 1.6s;
+}
+
+.tag-pos-2 {
+	left: 24px;
+	top: 118px;
+	animation-delay: 1s, 2s;
+}
+
+.tag-pos-3 {
+	right: 0;
+	top: 92px;
+	animation-delay: 1.4s, 2.4s;
+}
+
+.tag-secondary {
+	border-color: rgba(0, 105, 112, 0.2);
+	background: rgba(122, 241, 252, 0.8);
+	color: #006e75;
+}
+
+.tag-primary {
+	border-color: rgba(0, 71, 141, 0.2);
+	background: rgba(214, 227, 255, 0.8);
+	color: #001b3d;
+}
+
+.tag-tertiary {
+	border-color: rgba(121, 49, 0, 0.2);
+	background: rgba(255, 219, 203, 0.8);
+	color: #341100;
+}
+
+.tag-neutral {
+	border-color: rgba(194, 198, 212, 0.3);
+	background: rgba(231, 232, 240, 0.9);
+	color: #424752;
+}
+
+.bottom-progress {
+	position: relative;
+	z-index: 1;
+	padding: 20px 20px 48px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.progress-track {
+	width: 100%;
+	height: 8px;
+	margin-bottom: 16px;
+	border-radius: 999px;
+	background: #f3f4f6;
+	overflow: hidden;
+}
+
+.progress-fill {
+	height: 100%;
+	border-radius: inherit;
+	background: #00478d;
+	transition: width 1s ease-out;
+}
+
+.progress-subtitle {
+	max-width: 280px;
+	text-align: center;
+	color: #727783;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 500;
+}
+
+.security-icon {
+	width: 16px;
+	height: 16px;
+	margin-top: 32px;
+	background: #00478d;
+	opacity: 0.6;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%201a5%205%200%200%200-5%205v3H6a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-9a2%202%200%200%200-2-2h-1V6a5%205%200%200%200-5-5zm-3%208V6a3%203%200%200%201%206%200v3H9z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%201a5%205%200%200%200-5%205v3H6a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-9a2%202%200%200%200-2-2h-1V6a5%205%200%200%200-5-5zm-3%208V6a3%203%200%200%201%206%200v3H9z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+@keyframes typing {
+	0%,
+	25% {
+		content: '';
+	}
+	50% {
+		content: '.';
+	}
+	75% {
+		content: '..';
+	}
+	100% {
+		content: '...';
+	}
+}
+
+@keyframes particle-move {
+	0% {
+		transform: translate(0, 0);
+		opacity: 0;
+	}
+	20%,
+	80% {
+		opacity: 1;
+	}
+	100% {
+		transform: translate(var(--particle-x), var(--particle-y));
+		opacity: 0;
+	}
+}
+
+@keyframes pulse-ring {
+	0% {
+		transform: scale(0.33);
+		opacity: 0.8;
+	}
+	80%,
+	100% {
+		transform: scale(1.5);
+		opacity: 0;
+	}
+}
+
+@keyframes float {
+	0%,
+	100% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-10px);
+	}
+}
+
+@keyframes float-soft {
+	0%,
+	100% {
+		transform: translateY(0) scale(1);
+	}
+	50% {
+		transform: translateY(-5px) scale(1.02);
+	}
+}
+
+@keyframes fade-float {
+	from {
+		opacity: 0;
+		transform: translateY(10px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes scan-h {
+	0% {
+		left: -100%;
+	}
+	100% {
+		left: 100%;
+	}
+}
+
+@keyframes spin {
+	from {
+		transform: translate(-50%, -50%) rotate(0deg);
+	}
+	to {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
+}
+
+@keyframes spin-reverse {
+	from {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
+	to {
+		transform: translate(-50%, -50%) rotate(0deg);
+	}
+}
+
+@keyframes pulse-soft {
+	0%,
+	100% {
+		opacity: 0.75;
+	}
+	50% {
+		opacity: 1;
+	}
+}
+</style>
diff --git a/pages/profile/profile.vue b/pages/profile/profile.vue
new file mode 100644
index 0000000..4b3d8af
--- /dev/null
+++ b/pages/profile/profile.vue
@@ -0,0 +1,746 @@
+<template>
+	<view class="profile-page">
+		<view class="top-app-bar">
+			<view class="nav-left">
+				<button class="icon-button" aria-label="设置" @click="emit('open-settings')">
+					<view class="settings-icon"></view>
+				</button>
+				<button class="icon-button home-button" aria-label="首页" @click="emit('go-home')">
+					<view class="home-icon"></view>
+				</button>
+			</view>
+			<button class="icon-button" aria-label="个人中心">
+				<view class="account-icon active"></view>
+			</button>
+		</view>
+
+		<scroll-view class="dashboard" scroll-y>
+			<view class="profile-card dashboard-card">
+				<view class="avatar-wrap">
+					<image
+						class="avatar-image"
+						mode="aspectFill"
+						src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGDLuBqLjh_SubGoCUg45p2XkSKyTmm_AgVZYoBYjI_RtN9MjhdBR27SzIqSpMnDVwnAoVl2coW7vDPVTdIDgkMjN1SIdxITaqQOJti1jUypNt9OUOTj7r8gmkyYSK9eUzIfG8EqY_shc9mqzxJFSJ9QFqa4gQGwV9FoqspXpGM3_aOzqtUtmOAp9owP22ozTNLh87AfqR_DnOpJ1rMd9szFgIQQinFjO-GsL8h-0oRdvamAM_v_OsVHH25Fez2cHQH4cIHOqSMFo"
+					></image>
+					<text class="level-badge">Lv.3</text>
+				</view>
+				<view class="profile-copy">
+					<view class="name-row">
+						<text class="doctor-name">明医生</text>
+						<text class="level-chip">临床思维 Lv.3</text>
+					</view>
+					<view class="honor-row">
+						<view class="honor-item">
+							<view class="verified-icon"></view>
+							<text>诊断大师</text>
+						</view>
+						<text class="divider">|</text>
+						<view class="honor-item">
+							<view class="emergency-icon"></view>
+							<text>急诊先锋</text>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="metrics-grid">
+				<view class="metric-card dashboard-card">
+					<text class="metric-label">临床思维评分</text>
+					<view class="metric-inline">
+						<text class="metric-value">82</text>
+						<text class="metric-top">Top 15%</text>
+					</view>
+				</view>
+				<view class="metric-card dashboard-card">
+					<text class="metric-label">连续学习天数</text>
+					<text class="metric-value">18</text>
+				</view>
+				<view class="metric-card dashboard-card">
+					<text class="metric-label">已攻克案例</text>
+					<text class="metric-value">126</text>
+				</view>
+				<view class="metric-card dashboard-card">
+					<text class="metric-label">AI 活跃指数</text>
+					<text class="metric-value">A</text>
+				</view>
+			</view>
+
+			<view class="two-col">
+				<view class="dashboard-card compact-card">
+					<text class="card-title">临床能力画像</text>
+					<view class="radar-box">
+						<svg class="mini-radar" viewBox="0 0 100 100">
+							<circle cx="50" cy="50" fill="none" r="45" stroke="#e5e7eb" stroke-dasharray="2 2" stroke-width="0.5"></circle>
+							<polygon fill="#5B9BD5" fill-opacity="0.3" points="50,15 80,35 85,60 60,85 35,80 15,55 25,30 40,20" stroke="#5B9BD5" stroke-width="1.5"></polygon>
+						</svg>
+						<text class="radar-label top">问诊能力</text>
+						<text class="radar-label bottom">临床决策</text>
+					</view>
+				</view>
+				<view class="dashboard-card compact-card">
+					<view class="card-head">
+						<text class="card-title">成长趋势</text>
+						<view class="segmented">
+							<text class="seg active">日</text>
+							<text class="seg">周</text>
+						</view>
+					</view>
+					<view class="trend-bars">
+						<view class="trend-bar tone-1"></view>
+						<view class="trend-bar tone-2"></view>
+						<view class="trend-bar tone-3"></view>
+						<view class="trend-bar tone-4"></view>
+					</view>
+				</view>
+			</view>
+
+			<view class="two-col">
+				<view class="dashboard-card compact-card">
+					<text class="card-title">训练热力图</text>
+					<view class="heat-grid">
+						<view
+							v-for="(tone, index) in heatTones"
+							:key="index"
+							class="heat-cell"
+							:class="tone"
+						></view>
+					</view>
+					<view class="heat-legend">
+						<text>训练分布</text>
+						<text>少■多</text>
+					</view>
+				</view>
+				<view class="dashboard-card compact-card">
+					<text class="card-title">专科能力</text>
+					<view class="specialty-list">
+						<view class="specialty">
+							<view class="specialty-head">
+								<text>呼吸内科</text>
+								<text class="percent">91%</text>
+							</view>
+							<view class="mini-track">
+								<view class="mini-fill fill-91"></view>
+							</view>
+						</view>
+						<view class="specialty">
+							<view class="specialty-head">
+								<text>急诊医学</text>
+								<text class="percent">88%</text>
+							</view>
+							<view class="mini-track">
+								<view class="mini-fill fill-88"></view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="insight-stack">
+				<view class="dashboard-card insight-card">
+					<view class="insight-title">
+						<view class="psychology-icon"></view>
+						<text>AI 弱点诊断</text>
+					</view>
+					<view class="insight-row">
+						<view class="error-icon"></view>
+						<text class="insight-text">高频问题：鉴别诊断深度不足</text>
+						<view class="chevron-icon"></view>
+					</view>
+				</view>
+
+				<view class="dashboard-card insight-card">
+					<view class="insight-title">
+						<view class="sparkle-icon"></view>
+						<text>个性化训练推荐</text>
+					</view>
+					<view class="insight-row">
+						<view class="notes-icon"></view>
+						<text class="insight-text">今日挑战：复杂COPD急性加重期</text>
+						<view class="chevron-icon"></view>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits<{
+	(event: 'open-settings'): void
+	(event: 'go-home'): void
+}>()
+
+const heatTones = [
+	'heat-low',
+	'heat-high',
+	'heat-empty',
+	'heat-mid',
+	'heat-low',
+	'heat-high',
+	'heat-empty',
+	'heat-mid',
+	'heat-low',
+	'heat-high'
+]
+</script>
+
+<style scoped>
+page {
+	min-height: 100%;
+	background: #eaf3ff;
+}
+
+.profile-page {
+	width: 390px;
+	max-width: 100vw;
+	min-height: 884px;
+	margin: 0 auto;
+	padding-bottom: 40px;
+	background: #eaf3ff;
+	color: #191c21;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.profile-page view,
+.profile-page text,
+.profile-page button,
+.profile-page scroll-view {
+	box-sizing: border-box;
+}
+
+.top-app-bar {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	z-index: 50;
+	width: 100%;
+	height: 56px;
+	padding: 0 16px;
+	border-bottom: 1px solid rgba(194, 198, 212, 0.3);
+	background: #ffffff;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.nav-left {
+	display: flex;
+	align-items: center;
+}
+
+.icon-button {
+	width: 40px;
+	height: 40px;
+	min-height: 40px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	border-radius: 50%;
+	background: transparent;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.icon-button::after {
+	border: 0;
+}
+
+.home-button {
+	margin-left: 4px;
+}
+
+.settings-icon,
+.home-icon,
+.account-icon,
+.verified-icon,
+.emergency-icon,
+.psychology-icon,
+.error-icon,
+.chevron-icon,
+.sparkle-icon,
+.notes-icon {
+	background: #424752;
+}
+
+.account-icon.active {
+	background: #5b9bd5;
+}
+
+.settings-icon,
+.verified-icon,
+.emergency-icon,
+.psychology-icon,
+.error-icon,
+.chevron-icon,
+.sparkle-icon,
+.notes-icon {
+	width: 18px;
+	height: 18px;
+}
+
+.settings-icon {
+	width: 22px;
+	height: 22px;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.home-icon,
+.account-icon {
+	width: 24px;
+	height: 24px;
+}
+
+.home-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.account-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.dashboard {
+	width: 390px;
+	height: 884px;
+	padding: 80px 16px 40px;
+}
+
+.dashboard-card {
+	border: 1px solid rgba(255, 255, 255, 0.3);
+	border-radius: 16px;
+	background: #ffffff;
+	box-shadow: 0 4px 20px -2px rgba(91, 155, 213, 0.1);
+}
+
+.profile-card {
+	padding: 12px;
+	display: flex;
+	align-items: center;
+	gap: 16px;
+}
+
+.avatar-wrap {
+	position: relative;
+	flex: 0 0 auto;
+}
+
+.avatar-image {
+	width: 64px;
+	height: 64px;
+	border: 4px solid rgba(91, 155, 213, 0.2);
+	border-radius: 50%;
+}
+
+.level-badge {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	padding: 2px 8px;
+	border: 2px solid #ffffff;
+	border-radius: 999px;
+	background: #f05a23;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+	color: #ffffff;
+	font-size: 10px;
+	line-height: 12px;
+	font-weight: 700;
+}
+
+.profile-copy {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.name-row {
+	margin-bottom: 4px;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.doctor-name {
+	max-width: 112px;
+	color: #191c21;
+	font-size: 20px;
+	line-height: 28px;
+	font-weight: 800;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.level-chip {
+	flex: 0 0 auto;
+	padding: 2px 8px;
+	border-radius: 999px;
+	background: #dcebfa;
+	color: #004f54;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 500;
+}
+
+.honor-row {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 10px;
+	color: #424752;
+	font-size: 11px;
+	line-height: 16px;
+}
+
+.honor-item {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.verified-icon {
+	width: 14px;
+	height: 14px;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%202%202.4%202.8%203.7-.7.7%203.7%202.8%202.4-2.8%202.4-.7%203.7-3.7-.7L12%2022l-2.4-2.8-3.7.7-.7-3.7L2.4%2014l2.8-2.4.7-3.7%203.7.7L12%202zm-1%2014.2%206-6-1.4-1.4L11%2013.4l-2.6-2.6L7%2012.2l4%204z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%202%202.4%202.8%203.7-.7.7%203.7%202.8%202.4-2.8%202.4-.7%203.7-3.7-.7L12%2022l-2.4-2.8-3.7.7-.7-3.7L2.4%2014l2.8-2.4.7-3.7%203.7.7L12%202zm-1%2014.2%206-6-1.4-1.4L11%2013.4l-2.6-2.6L7%2012.2l4%204z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.emergency-icon {
+	width: 14px;
+	height: 14px;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202 3%205v6c0%205.55%203.84%2010.74%209%2012%205.16-1.26%209-6.45%209-12V5l-9-3zm1%2015h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202 3%205v6c0%205.55%203.84%2010.74%209%2012%205.16-1.26%209-6.45%209-12V5l-9-3zm1%2015h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.divider {
+	color: #c2c6d4;
+}
+
+.metrics-grid,
+.two-col {
+	margin-top: 8px;
+	display: grid;
+	gap: 8px;
+}
+
+.metrics-grid {
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.two-col {
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.metric-card {
+	min-height: 72px;
+	padding: 8px;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.metric-label {
+	margin-bottom: 4px;
+	color: #424752;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 500;
+}
+
+.metric-inline {
+	display: flex;
+	align-items: baseline;
+	gap: 4px;
+}
+
+.metric-value {
+	color: #5b9bd5;
+	font-size: 20px;
+	line-height: 24px;
+	font-weight: 700;
+}
+
+.metric-top {
+	color: #22c55e;
+	font-size: 8px;
+	line-height: 10px;
+	font-weight: 700;
+}
+
+.compact-card {
+	min-height: 150px;
+	padding: 8px;
+	display: flex;
+	flex-direction: column;
+}
+
+.card-title {
+	margin-bottom: 8px;
+	color: #5b9bd5;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 700;
+}
+
+.radar-box {
+	position: relative;
+	width: 100%;
+	aspect-ratio: 1 / 1;
+	margin: 0 auto;
+}
+
+.mini-radar {
+	width: 100%;
+	height: 100%;
+}
+
+.radar-label {
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%) scale(0.9);
+	font-size: 10px;
+	line-height: 12px;
+	white-space: nowrap;
+}
+
+.radar-label.top {
+	top: 0;
+}
+
+.radar-label.bottom {
+	bottom: 0;
+}
+
+.card-head {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+}
+
+.segmented {
+	transform: scale(0.65);
+	transform-origin: right top;
+	padding: 2px;
+	border-radius: 2px;
+	background: #dcebfa;
+	display: flex;
+}
+
+.seg {
+	padding: 2px 4px;
+	color: rgba(91, 155, 213, 0.6);
+	font-size: 8px;
+	line-height: 10px;
+}
+
+.seg.active {
+	border-radius: 2px;
+	background: #ffffff;
+	color: #5b9bd5;
+	font-weight: 600;
+}
+
+.trend-bars {
+	flex: 1;
+	height: 64px;
+	margin-top: auto;
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+	gap: 4px;
+}
+
+.trend-bar {
+	flex: 1;
+	border-radius: 2px 2px 0 0;
+}
+
+.tone-1 {
+	height: 40%;
+	background: rgba(91, 155, 213, 0.2);
+}
+
+.tone-2 {
+	height: 60%;
+	background: rgba(91, 155, 213, 0.4);
+}
+
+.tone-3 {
+	height: 80%;
+	background: #5b9bd5;
+}
+
+.tone-4 {
+	height: 70%;
+	background: rgba(91, 155, 213, 0.7);
+}
+
+.heat-grid {
+	margin-bottom: 8px;
+	display: grid;
+	grid-template-columns: repeat(5, minmax(0, 1fr));
+	gap: 4px;
+}
+
+.heat-cell {
+	width: 100%;
+	aspect-ratio: 1 / 1;
+	border-radius: 1px;
+}
+
+.heat-low {
+	background: rgba(91, 155, 213, 0.3);
+}
+
+.heat-mid {
+	background: rgba(91, 155, 213, 0.6);
+}
+
+.heat-high {
+	background: #5b9bd5;
+}
+
+.heat-empty {
+	background: #f3f4f6;
+}
+
+.heat-legend {
+	margin-top: auto;
+	display: flex;
+	justify-content: space-between;
+	color: rgba(66, 71, 82, 0.6);
+	font-size: 7px;
+	line-height: 10px;
+}
+
+.specialty-list {
+	margin-top: 4px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.specialty-head {
+	display: flex;
+	justify-content: space-between;
+	font-size: 8px;
+	line-height: 12px;
+}
+
+.percent {
+	color: #5b9bd5;
+}
+
+.mini-track {
+	width: 100%;
+	height: 4px;
+	border-radius: 999px;
+	background: #f3f4f6;
+	overflow: hidden;
+}
+
+.mini-fill {
+	height: 100%;
+	background: #5b9bd5;
+}
+
+.fill-91 {
+	width: 91%;
+}
+
+.fill-88 {
+	width: 88%;
+}
+
+.insight-stack {
+	margin-top: 8px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding-bottom: 16px;
+}
+
+.insight-card {
+	padding: 12px;
+	border-left: 4px solid #5b9bd5;
+}
+
+.insight-title {
+	margin-bottom: 12px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	color: #5b9bd5;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 700;
+}
+
+.psychology-icon,
+.sparkle-icon {
+	background: #5b9bd5;
+}
+
+.psychology-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M13%203a8%208%200%200%200-8%208v3.5L3%2018h3v3h7v-3h1a7%207%200%200%200%207-7%208%208%200%200%200-8-8zm-2%2011H9v-2h2v2zm4%200h-2v-2h2v2zm-4-4H9V8h2v2zm4%200h-2V8h2v2z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M13%203a8%208%200%200%200-8%208v3.5L3%2018h3v3h7v-3h1a7%207%200%200%200%207-7%208%208%200%200%200-8-8zm-2%2011H9v-2h2v2zm4%200h-2v-2h2v2zm-4-4H9V8h2v2zm4%200h-2V8h2v2z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.sparkle-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m19%209%201.25-2.75L23%205l-2.75-1.25L19%201l-1.25%202.75L15%205l2.75%201.25L19%209zm-7.5.5L9%204%206.5%209.5%201%2012l5.5%202.5L9%2020l2.5-5.5L17%2012l-5.5-2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m19%209%201.25-2.75L23%205l-2.75-1.25L19%201l-1.25%202.75L15%205l2.75%201.25L19%209zm-7.5.5L9%204%206.5%209.5%201%2012l5.5%202.5L9%2020l2.5-5.5L17%2012l-5.5-2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.insight-row {
+	padding: 12px;
+	border-radius: 12px;
+	background: #dcebfa;
+	box-shadow: 0 2px 8px rgba(91, 155, 213, 0.12);
+	color: #004f54;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.error-icon,
+.notes-icon {
+	background: #5b9bd5;
+	width: 16px;
+	height: 16px;
+}
+
+.error-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M11%2015h2v2h-2v-2zm0-8h2v6h-2V7zm1-5a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M11%2015h2v2h-2v-2zm0-8h2v6h-2V7zm1-5a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.notes-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19%203h-1V1h-2v2H8V1H6v2H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V5a2%202%200%200%200-2-2zM8%207h8v2H8V7zm0%204h8v2H8v-2zm0%204h5v2H8v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19%203h-1V1h-2v2H8V1H6v2H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V5a2%202%200%200%200-2-2zM8%207h8v2H8V7zm0%204h8v2H8v-2zm0%204h5v2H8v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.insight-text {
+	flex: 1;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 700;
+}
+
+.chevron-icon {
+	width: 16px;
+	height: 16px;
+	background: #c2c6d4;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m10%206-1.41%201.41L13.17%2012l-4.58%204.59L10%2018l6-6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m10%206-1.41%201.41L13.17%2012l-4.58%204.59L10%2018l6-6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+</style>
diff --git a/pages/scenario/scenario.vue b/pages/scenario/scenario.vue
new file mode 100644
index 0000000..c3eb0b7
--- /dev/null
+++ b/pages/scenario/scenario.vue
@@ -0,0 +1,658 @@
+<template>
+	<ChatPage
+		v-if="showChatPage"
+		:case-item="caseItem"
+		@open-settings="emit('open-settings')"
+		@open-profile="emit('open-profile')"
+		@go-home="emit('go-home')"
+	/>
+	<view v-else class="scenario-page">
+		<view class="scenario-shell">
+			<view class="hero">
+				<image class="hero-image" src="/static/config-hospital.png" mode="aspectFill"></image>
+				<view class="hero-fade"></view>
+			</view>
+
+			<view class="director-row">
+				<view class="director-avatar">
+					<image class="director-image" src="/static/config-doctor.png" mode="aspectFit"></image>
+				</view>
+				<view class="speech-bubble">
+					<text>欢迎回来！请根据您的教学目标配置临床场景。</text>
+				</view>
+			</view>
+
+			<scroll-view class="config-scroll" scroll-y>
+				<view class="selected-case">
+					<text class="case-label">当前病例</text>
+					<text class="case-title">{{ currentCaseTitle }}</text>
+				</view>
+
+				<view class="section">
+					<view class="section-title">
+						<view class="star-icon"></view>
+						<text>王主任推荐</text>
+					</view>
+					<view class="recommend-list">
+						<button
+							v-for="item in recommendations"
+							:key="item.id"
+							class="recommend-card"
+							:class="{ active: selectedRecommendationId === item.id }"
+							@click="applyRecommendation(item)"
+						>
+							<view class="recommend-head">
+								<text class="recommend-icon">{{ item.tags[0] }}</text>
+								<text class="recommend-title">{{ item.title }}</text>
+							</view>
+							<text class="recommend-desc">{{ item.desc }}</text>
+							<view class="tag-row">
+								<text
+									v-for="tag in item.tags"
+									:key="tag"
+									class="tag"
+									:class="{ danger: tag === '急躁' }"
+								>
+									{{ tag }}
+								</text>
+							</view>
+						</button>
+					</view>
+				</view>
+
+				<view class="section custom-section">
+					<view class="section-title">
+						<view class="tune-icon"></view>
+						<text>自定义配置</text>
+					</view>
+
+					<view class="option-block">
+						<view class="option-label">
+							<view class="location-icon"></view>
+							<text>就诊环境</text>
+						</view>
+						<view class="option-grid grid-3">
+							<button
+								v-for="option in options.environments"
+								:key="option.value"
+								class="choice"
+								:class="{ selected: form.environment === option.value }"
+								@click="selectOption('environment', option.value)"
+							>
+								{{ option.label }}
+							</button>
+						</view>
+					</view>
+
+					<view class="option-block">
+						<view class="option-label">
+							<view class="cake-icon"></view>
+							<text>年龄段</text>
+						</view>
+						<view class="option-grid grid-4">
+							<button
+								v-for="option in options.ageGroups"
+								:key="option.value"
+								class="choice small"
+								:class="{ selected: form.ageGroup === option.value }"
+								@click="selectOption('ageGroup', option.value)"
+							>
+								{{ option.label }}
+							</button>
+						</view>
+					</view>
+
+					<view class="option-block">
+						<view class="option-label">
+							<view class="school-icon"></view>
+							<text>文化程度</text>
+						</view>
+						<view class="option-grid grid-3">
+							<button
+								v-for="option in options.educations"
+								:key="option.value"
+								class="choice mini"
+								:class="{ selected: form.education === option.value }"
+								@click="selectOption('education', option.value)"
+							>
+								{{ option.label }}
+							</button>
+						</view>
+					</view>
+
+					<view class="option-block personality-block">
+						<view class="option-label">
+							<view class="mind-icon"></view>
+							<text>性格</text>
+						</view>
+						<view class="option-grid grid-3">
+							<button
+								v-for="option in options.personalities"
+								:key="option.value"
+								class="choice"
+								:class="{ selected: form.personality === option.value }"
+								@click="selectOption('personality', option.value)"
+							>
+								{{ option.label }}
+							</button>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+
+			<view class="bottom-action">
+				<button class="generate-button" :disabled="generating" @click="handleGenerate">
+					<text>{{ generating ? '正在生成...' : '生成模拟场景' }}</text>
+					<view class="arrow-icon"></view>
+				</button>
+			</view>
+		</view>
+
+		<view class="toast" :class="{ visible: toastVisible }">{{ toastMessage }}</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
+import type { ClinicalCase } from '../../api/cases'
+import {
+	createScenarioConfig,
+	fetchScenarioOptions,
+	type ScenarioForm,
+	type ScenarioOptions,
+	type ScenarioRecommendation
+} from '../../api/scenario'
+import ChatPage from '../chat/chat.vue'
+
+const props = defineProps<{
+	caseItem: ClinicalCase | null
+}>()
+
+const emit = defineEmits<{
+	(event: 'open-settings'): void
+	(event: 'open-profile'): void
+	(event: 'go-home'): void
+}>()
+
+type ScenarioFormKey = keyof ScenarioForm
+
+const fallbackOptions: ScenarioOptions = {
+	environments: [],
+	ageGroups: [],
+	educations: [],
+	personalities: []
+}
+
+const form = reactive<ScenarioForm>({
+	environment: 'outpatient',
+	ageGroup: 'young',
+	education: 'higher',
+	personality: 'calm'
+})
+
+const recommendations = ref<ScenarioRecommendation[]>([])
+const options = ref<ScenarioOptions>(fallbackOptions)
+const selectedRecommendationId = ref('')
+const generating = ref(false)
+const toastMessage = ref('')
+const toastVisible = ref(false)
+const showChatPage = ref(false)
+
+let toastTimer: ReturnType<typeof setTimeout> | null = null
+
+const currentCaseTitle = computed(() => {
+	if (!props.caseItem) return '未选择病例'
+	return `${props.caseItem.title}（${props.caseItem.caseNo}）`
+})
+
+function loadScenarioOptions() {
+	fetchScenarioOptions().then(result => {
+		recommendations.value = result.recommendations
+		options.value = result.options
+	})
+}
+
+function applyRecommendation(item: ScenarioRecommendation) {
+	selectedRecommendationId.value = item.id
+	Object.assign(form, item.defaults)
+}
+
+function selectOption(key: ScenarioFormKey, value: string) {
+	form[key] = value
+	selectedRecommendationId.value = ''
+}
+
+function handleGenerate() {
+	if (!props.caseItem) {
+		showToast('请先选择病例')
+		return
+	}
+
+	generating.value = true
+	createScenarioConfig({
+		...form,
+		caseId: props.caseItem.id,
+		caseNo: props.caseItem.caseNo,
+		recommendationId: selectedRecommendationId.value || undefined
+	}).then(result => {
+		uni.setStorageSync('clinical-thinking-scenario', result)
+		showToast('模拟场景已生成')
+		setTimeout(() => {
+			showChatPage.value = true
+		}, 450)
+	}).finally(() => {
+		setTimeout(() => {
+			generating.value = false
+		}, 600)
+	})
+}
+
+function showToast(message: string) {
+	if (toastTimer) clearTimeout(toastTimer)
+	toastMessage.value = message
+	toastVisible.value = true
+	uni.showToast({
+		title: message,
+		icon: 'none'
+	})
+	toastTimer = setTimeout(() => {
+		toastVisible.value = false
+	}, 2200)
+}
+
+onMounted(loadScenarioOptions)
+
+onUnmounted(() => {
+	if (toastTimer) clearTimeout(toastTimer)
+})
+</script>
+
+<style>
+page {
+	min-height: 100%;
+	background: #f9f9ff;
+}
+
+.scenario-page {
+	min-height: 100vh;
+	background: #f9f9ff;
+	color: #191c21;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.scenario-shell {
+	position: relative;
+	min-height: 100vh;
+	overflow: hidden;
+	background: #f9f9ff;
+	display: flex;
+	flex-direction: column;
+}
+
+.hero {
+	position: relative;
+	flex: 0 0 auto;
+	height: 33.333vh;
+	min-height: 245px;
+}
+
+.hero-image {
+	width: 100%;
+	height: 100%;
+}
+
+.hero-fade {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background: linear-gradient(180deg, rgba(249, 249, 255, 0), rgba(249, 249, 255, 0.3));
+}
+
+.director-row {
+	position: relative;
+	z-index: 2;
+	margin-top: -40px;
+	padding: 0 20px;
+	display: flex;
+	align-items: flex-start;
+	gap: 16px;
+}
+
+.director-avatar {
+	flex: 0 0 auto;
+	width: 96px;
+	height: 96px;
+}
+
+.director-image {
+	width: 100%;
+	height: 100%;
+}
+
+.speech-bubble {
+	position: relative;
+	flex: 1;
+	margin-top: 16px;
+	padding: 16px;
+	border: 1px solid rgba(194, 198, 212, 0.3);
+	border-radius: 16px;
+	background: #ffffff;
+	box-shadow: 0 4px 10px rgba(25, 28, 33, 0.1);
+	color: #00478d;
+	font-size: 14px;
+	line-height: 22px;
+	font-weight: 600;
+}
+
+.speech-bubble::after {
+	content: '';
+	position: absolute;
+	left: -9px;
+	top: 20px;
+	width: 16px;
+	height: 16px;
+	background: #ffffff;
+	border-left: 1px solid rgba(194, 198, 212, 0.3);
+	border-bottom: 1px solid rgba(194, 198, 212, 0.3);
+	transform: rotate(45deg);
+}
+
+.config-scroll {
+	box-sizing: border-box;
+	flex: 1;
+	height: 1px;
+	padding: 16px 20px 108px;
+}
+
+.selected-case {
+	margin-bottom: 20px;
+	padding: 12px;
+	border: 1px solid rgba(194, 198, 212, 0.35);
+	border-radius: 12px;
+	background: rgba(255, 255, 255, 0.7);
+}
+
+.case-label {
+	display: block;
+	margin-bottom: 4px;
+	color: #727783;
+	font-size: 12px;
+	line-height: 16px;
+}
+
+.case-title {
+	color: #191c21;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+}
+
+.section {
+	margin-bottom: 24px;
+}
+
+.section-title {
+	margin-bottom: 16px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	color: #191c21;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+}
+
+.star-icon,
+.tune-icon,
+.location-icon,
+.cake-icon,
+.school-icon,
+.mind-icon,
+.arrow-icon {
+	background: #00478d;
+}
+
+.star-icon,
+.tune-icon {
+	width: 20px;
+	height: 20px;
+}
+
+.star-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%202%202.7%206.6%207.1.6-5.4%204.6%201.7%206.9L12%2017l-6.1%203.7%201.7-6.9-5.4-4.6%207.1-.6L12%202z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%202%202.7%206.6%207.1.6-5.4%204.6%201.7%206.9L12%2017l-6.1%203.7%201.7-6.9-5.4-4.6%207.1-.6L12%202z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.tune-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M3%2017v2h6v-2H3zM3%205v2h10V5H3zm10%2016v-2h8v-2h-8v-2h-2v6h2zM7%209v2H3v2h4v2h2V9H7zm14%204v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M3%2017v2h6v-2H3zM3%205v2h10V5H3zm10%2016v-2h8v-2h-8v-2h-2v6h2zM7%209v2H3v2h4v2h2V9H7zm14%204v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.recommend-list,
+.custom-section {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.recommend-card {
+	width: 100%;
+	padding: 16px;
+	border: 1px solid #c2c6d4;
+	border-radius: 12px;
+	background: rgba(255, 255, 255, 0.7);
+	text-align: left;
+	backdrop-filter: blur(12px);
+	-webkit-backdrop-filter: blur(12px);
+}
+
+.recommend-card.active {
+	border-color: #00478d;
+	background: rgba(214, 227, 255, 0.46);
+}
+
+.recommend-card::after,
+.choice::after,
+.generate-button::after {
+	border: 0;
+}
+
+.recommend-card:active,
+.choice:active,
+.generate-button:active {
+	transform: scale(0.98);
+}
+
+.recommend-head {
+	margin-bottom: 8px;
+	display: flex;
+	align-items: center;
+	gap: 16px;
+}
+
+.recommend-icon {
+	color: #00478d;
+	font-size: 13px;
+	line-height: 18px;
+	font-weight: 700;
+}
+
+.recommend-title {
+	color: #191c21;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+}
+
+.recommend-desc {
+	display: block;
+	margin-bottom: 8px;
+	color: #424752;
+	font-size: 12px;
+	line-height: 18px;
+}
+
+.tag-row {
+	display: flex;
+	gap: 8px;
+}
+
+.tag {
+	padding: 2px 8px;
+	border-radius: 999px;
+	background: #ecedf6;
+	color: #191c21;
+	font-size: 10px;
+	line-height: 16px;
+}
+
+.tag.danger {
+	background: rgba(255, 218, 214, 0.35);
+	color: #ba1a1a;
+}
+
+.option-block {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.option-label {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	color: #424752;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 600;
+}
+
+.location-icon,
+.cake-icon,
+.school-icon,
+.mind-icon {
+	width: 14px;
+	height: 14px;
+	background: #424752;
+}
+
+.location-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a7%207%200%200%200-7%207c0%205.25%207%2013%207%2013s7-7.75%207-13a7%207%200%200%200-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206a2.5%202.5%200%200%201%200%205.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a7%207%200%200%200-7%207c0%205.25%207%2013%207%2013s7-7.75%207-13a7%207%200%200%200-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206a2.5%202.5%200%200%201%200%205.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.cake-icon,
+.school-icon,
+.mind-icon {
+	border-radius: 50%;
+}
+
+.option-grid {
+	display: grid;
+	gap: 8px;
+}
+
+.grid-3 {
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.grid-4 {
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.choice {
+	min-width: 0;
+	min-height: 40px;
+	padding: 8px 4px;
+	border: 1px solid #c2c6d4;
+	border-radius: 8px;
+	background: rgba(255, 255, 255, 0.76);
+	color: #424752;
+	font-size: 14px;
+	line-height: 20px;
+	backdrop-filter: blur(12px);
+	-webkit-backdrop-filter: blur(12px);
+}
+
+.choice.small {
+	font-size: 12px;
+}
+
+.choice.mini {
+	font-size: 11px;
+}
+
+.choice.selected {
+	border-color: #00478d;
+	background: rgba(0, 71, 141, 0.1);
+	color: #00478d;
+	font-weight: 700;
+}
+
+.personality-block {
+	padding-bottom: 32px;
+}
+
+.bottom-action {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 3;
+	box-sizing: border-box;
+	padding: 32px 20px 20px;
+	background: linear-gradient(180deg, rgba(249, 249, 255, 0), #f9f9ff 38%, #f9f9ff);
+}
+
+.generate-button {
+	width: 100%;
+	min-height: 56px;
+	border-radius: 999px;
+	background: #00478d;
+	box-shadow: 0 8px 18px rgba(0, 71, 141, 0.22);
+	color: #ffffff;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 12px;
+}
+
+.arrow-icon {
+	width: 20px;
+	height: 20px;
+	background: #ffffff;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%204-1.41%201.41L16.17%2011H4v2h12.17l-5.58%205.59L12%2020l8-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%204-1.41%201.41L16.17%2011H4v2h12.17l-5.58%205.59L12%2020l8-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.toast {
+	position: fixed;
+	left: 50%;
+	bottom: 96px;
+	z-index: 100;
+	max-width: 320px;
+	padding: 12px 24px;
+	border-radius: 999px;
+	background: #2e3037;
+	color: #eff0f8;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+	text-align: center;
+	pointer-events: none;
+	opacity: 0;
+	transform: translate(-50%, 16px);
+	transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.toast.visible {
+	opacity: 1;
+	transform: translate(-50%, 0);
+}
+</style>
diff --git a/pages/treatment/treatment.vue b/pages/treatment/treatment.vue
new file mode 100644
index 0000000..381164d
--- /dev/null
+++ b/pages/treatment/treatment.vue
@@ -0,0 +1,678 @@
+<template>
+	<AssessmentPage
+		v-if="showAssessmentPage"
+		@open-settings="emit('open-settings')"
+		@open-profile="emit('open-profile')"
+		@go-home="emit('go-home')"
+	/>
+	<view v-else class="treatment-page">
+		<view class="treatment-shell">
+			<view class="top-nav">
+				<button class="icon-button" aria-label="设置" @click="emit('open-settings')">
+					<view class="settings-icon"></view>
+				</button>
+				<button class="icon-button home-button" aria-label="首页" @click="emit('go-home')">
+					<view class="home-icon"></view>
+				</button>
+				<view class="nav-spacer"></view>
+				<button class="icon-button" aria-label="个人中心" @click="emit('open-profile')">
+					<view class="account-icon"></view>
+				</button>
+			</view>
+
+			<view class="case-header">
+				<text class="case-heading">患者：陈先生 (胸痛)</text>
+				<view class="patient-meta">
+					<text>姓名：陈先生</text>
+					<text>性别：男</text>
+					<text>年龄：60岁</text>
+					<text>科室：心血管内科</text>
+				</view>
+			</view>
+
+			<view class="treatment-content">
+				<view class="stepper">
+					<view class="step-line">
+						<view class="step-line-active"></view>
+					</view>
+					<view class="step done">
+						<view class="step-dot">
+							<view class="check-icon"></view>
+						</view>
+						<text>问诊</text>
+					</view>
+					<view class="step done">
+						<view class="step-dot">
+							<view class="check-icon"></view>
+						</view>
+						<text>临床诊断</text>
+					</view>
+					<view class="step active">
+						<view class="step-dot">
+							<view class="pill-icon"></view>
+						</view>
+						<text>治疗计划</text>
+					</view>
+				</view>
+
+				<view class="mentor-card">
+					<view class="mentor-avatar">
+						<image src="/static/config-doctor.png" mode="aspectFill"></image>
+					</view>
+					<view class="mentor-bubble">
+						<text>王主任建议：请结合患者既往高血压史及突发性胸痛的性质，进行准确诊断。注意鉴别心梗与主动脉夹层。</text>
+					</view>
+				</view>
+
+				<view class="form-area">
+					<view class="field-block">
+						<view class="field-label primary">
+							<view class="priority-icon"></view>
+							<text>治疗原则</text>
+						</view>
+						<view class="input-wrap">
+							<input
+								class="treatment-input"
+								v-model="form.principle"
+								type="text"
+								placeholder="请输入初步诊断..."
+								placeholder-class="input-placeholder"
+							/>
+						</view>
+					</view>
+
+					<view class="field-block">
+						<view class="field-label">
+							<view class="checklist-icon"></view>
+							<text>具体治疗措施</text>
+						</view>
+						<view class="measure-list">
+							<view
+								v-for="(_, index) in form.measures"
+								:key="index"
+								class="measure-row"
+							>
+								<text class="measure-index">{{ index + 1 }}</text>
+								<input
+									class="measure-input"
+									v-model="form.measures[index]"
+									type="text"
+									:placeholder="`措施 ${index + 1}`"
+									placeholder-class="input-placeholder"
+								/>
+							</view>
+						</view>
+					</view>
+
+					<view class="field-block">
+						<view class="field-label">
+							<view class="description-icon"></view>
+							<text>医嘱</text>
+						</view>
+						<textarea
+							class="order-input"
+							v-model="form.orders"
+							placeholder="请输入医嘱建议..."
+							placeholder-class="input-placeholder"
+						></textarea>
+					</view>
+				</view>
+				<button class="next-button" :class="{ submitted }" :disabled="submitting" @click="handleNext">
+					<view v-if="submitting" class="spinner"></view>
+					<text>{{ buttonText }}</text>
+					<view v-if="!submitting && !submitted" class="arrow-icon"></view>
+					<view v-if="submitted" class="check-small-icon"></view>
+				</button>
+			</view>
+		</view>
+
+		<view class="toast" :class="{ visible: toastVisible }">{{ toastMessage }}</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed, onUnmounted, reactive, ref } from 'vue'
+import type { ClinicalCase } from '../../api/cases'
+import AssessmentPage from '../assessment/assessment.vue'
+
+defineProps<{
+	caseItem: ClinicalCase | null
+}>()
+
+const emit = defineEmits<{
+	(event: 'open-settings'): void
+	(event: 'open-profile'): void
+	(event: 'go-home'): void
+}>()
+
+const form = reactive({
+	principle: '',
+	measures: ['', ''],
+	orders: ''
+})
+
+const submitting = ref(false)
+const submitted = ref(false)
+const showAssessmentPage = ref(false)
+const toastMessage = ref('')
+const toastVisible = ref(false)
+
+let toastTimer: ReturnType<typeof setTimeout> | null = null
+
+const buttonText = computed(() => {
+	if (submitting.value) return '提交中...'
+	if (submitted.value) return '已提交'
+	return '下一步'
+})
+
+function handleNext() {
+	if (submitting.value) return
+	submitting.value = true
+	uni.setStorageSync('clinical-thinking-treatment', {
+		...form,
+		measures: form.measures.filter(item => item.trim()),
+		submittedAt: new Date().toISOString()
+	})
+	setTimeout(() => {
+		submitting.value = false
+		showAssessmentPage.value = true
+	}, 600)
+}
+
+function showToast(message: string) {
+	if (toastTimer) clearTimeout(toastTimer)
+	toastMessage.value = message
+	toastVisible.value = true
+	uni.showToast({
+		title: message,
+		icon: 'none'
+	})
+	toastTimer = setTimeout(() => {
+		toastVisible.value = false
+	}, 2200)
+}
+
+onUnmounted(() => {
+	if (toastTimer) clearTimeout(toastTimer)
+})
+</script>
+
+<style scoped>
+page {
+	min-height: 100%;
+	background: #f9f9ff;
+}
+
+.treatment-page {
+	width: 390px;
+	max-width: 100vw;
+	height: 884px;
+	min-height: 884px;
+	margin: 0 auto;
+	overflow-x: hidden;
+	background: #f9f9ff;
+	color: #191c21;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.treatment-page view,
+.treatment-page text,
+.treatment-page button,
+.treatment-page input,
+.treatment-page textarea {
+	box-sizing: border-box;
+}
+
+.treatment-shell {
+	position: relative;
+	width: 390px;
+	max-width: 100vw;
+	height: 884px;
+	min-height: 884px;
+	background: #f9f9ff;
+	overflow-x: hidden;
+}
+
+.top-nav {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	z-index: 50;
+	width: 100%;
+	max-width: 100vw;
+	height: 56px;
+	padding: 0 20px;
+	border-bottom: 1px solid rgba(194, 198, 212, 0.3);
+	background: #ffffff;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+	display: flex;
+	align-items: center;
+}
+
+.nav-spacer {
+	flex: 1;
+}
+
+.icon-button {
+	width: 40px;
+	height: 40px;
+	min-height: 40px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	border-radius: 50%;
+	background: transparent;
+	line-height: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.home-button {
+	margin-left: 4px;
+}
+
+.icon-button::after,
+.next-button::after {
+	border: 0;
+}
+
+.settings-icon,
+.home-icon,
+.account-icon,
+.check-icon,
+.pill-icon,
+.priority-icon,
+.checklist-icon,
+.description-icon,
+.arrow-icon,
+.check-small-icon {
+	background: #424752;
+}
+
+.settings-icon {
+	width: 22px;
+	height: 22px;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.home-icon,
+.account-icon {
+	width: 24px;
+	height: 24px;
+}
+
+.home-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8h5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.account-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%203a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7zm0%2015a8%208%200%200%201-6.4-3.2c1.18-2.02%203.57-3.3%206.4-3.3s5.22%201.28%206.4%203.3A8%208%200%200%201%2012%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.case-header {
+	margin-top: 56px;
+	padding: 16px 20px;
+	background: #f9f9ff;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+}
+
+.case-heading {
+	color: #191c21;
+	font-size: 20px;
+	line-height: 28px;
+	font-weight: 600;
+}
+
+.patient-meta {
+	margin-top: 8px;
+	padding-top: 8px;
+	border-top: 1px solid rgba(194, 198, 212, 0.3);
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: 24px;
+	row-gap: 4px;
+	color: #424752;
+	font-size: 13px;
+	line-height: 20px;
+}
+
+.treatment-content {
+	box-sizing: border-box;
+	padding: 24px 20px 32px;
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+}
+
+.stepper {
+	position: relative;
+	padding: 8px 0;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.step-line {
+	position: absolute;
+	left: 40px;
+	right: 40px;
+	top: 20px;
+	height: 4px;
+	background: #e1e2ea;
+	z-index: 0;
+}
+
+.step-line-active {
+	width: 100%;
+	height: 100%;
+	background: #00478d;
+}
+
+.step {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 4px;
+	color: #727783;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 500;
+}
+
+.step.active {
+	color: #00478d;
+	font-weight: 700;
+}
+
+.step.done {
+	color: #006970;
+}
+
+.step-dot {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	background: #e1e2ea;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.step.active .step-dot {
+	width: 40px;
+	height: 40px;
+	border: 4px solid #d6e3ff;
+	background: #00478d;
+	box-shadow: 0 0 0 2px #00478d;
+}
+
+.step.done .step-dot {
+	background: #006970;
+}
+
+.check-icon,
+.pill-icon {
+	width: 18px;
+	height: 18px;
+	background: currentColor;
+}
+
+.step.done .check-icon,
+.step.active .pill-icon {
+	background: #ffffff;
+}
+
+.check-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9%2016.2%204.8%2012l-1.4%201.4L9%2019%2021%207l-1.4-1.4L9%2016.2z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9%2016.2%204.8%2012l-1.4%201.4L9%2019%2021%207l-1.4-1.4L9%2016.2z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.pill-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m4.22%2019.78-.01-.01a5.5%205.5%200%200%201%200-7.78L12%204.22a5.5%205.5%200%200%201%207.78%207.78L12%2019.78a5.5%205.5%200%200%201-7.78%200zM13.41%205.64%2010%209.05%2014.95%2014%2018.36%2010.59a3.5%203.5%200%200%200-4.95-4.95zM5.64%2013.41a3.5%203.5%200%200%200%204.95%204.95L14%2014.95%209.05%2010%205.64%2013.41z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m4.22%2019.78-.01-.01a5.5%205.5%200%200%201%200-7.78L12%204.22a5.5%205.5%200%200%201%207.78%207.78L12%2019.78a5.5%205.5%200%200%201-7.78%200zM13.41%205.64%2010%209.05%2014.95%2014%2018.36%2010.59a3.5%203.5%200%200%200-4.95-4.95zM5.64%2013.41a3.5%203.5%200%200%200%204.95%204.95L14%2014.95%209.05%2010%205.64%2013.41z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.mentor-card {
+	padding: 12px;
+	border: 1px solid rgba(0, 71, 141, 0.1);
+	border-radius: 12px;
+	background: rgba(0, 71, 141, 0.05);
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+}
+
+.mentor-avatar {
+	flex: 0 0 auto;
+	width: 48px;
+	height: 48px;
+	border: 1px solid rgba(0, 71, 141, 0.2);
+	border-radius: 50%;
+	overflow: hidden;
+}
+
+.mentor-avatar image {
+	width: 100%;
+	height: 100%;
+}
+
+.mentor-bubble {
+	flex: 1;
+	padding: 12px;
+	border: 1px solid rgba(194, 198, 212, 0.3);
+	border-radius: 8px;
+	border-top-left-radius: 0;
+	background: #ffffff;
+	box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
+	color: #191c21;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.form-area {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+.field-block {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.field-label {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	color: #424752;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+}
+
+.field-label.primary {
+	color: #00478d;
+}
+
+.priority-icon,
+.checklist-icon,
+.description-icon {
+	width: 16px;
+	height: 16px;
+	background: currentColor;
+}
+
+.priority-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M11%2018h2v-2h-2v2zm0-4h2V6h-2v8zm1%208a10%2010%200%201%201%200-20%2010%2010%200%200%201%200%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M11%2018h2v-2h-2v2zm0-4h2V6h-2v8zm1%208a10%2010%200%201%201%200-20%2010%2010%200%200%201%200%2020z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.checklist-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2017h10v-2H10v2zm0-4h10v-2H10v2zm0-6v2h10V7H10zM4%207h4v4H4V7zm1%201v2h2V8H5zm-1%205h4v4H4v-4zm1%201v2h2v-2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%2017h10v-2H10v2zm0-4h10v-2H10v2zm0-6v2h10V7H10zM4%207h4v4H4V7zm1%201v2h2V8H5zm-1%205h4v4H4v-4zm1%201v2h2v-2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.description-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8l-6-6zm-1%207V3.5L18.5%209H13zm-5%204h8v2H8v-2zm0%204h8v2H8v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8l-6-6zm-1%207V3.5L18.5%209H13zm-5%204h8v2H8v-2zm0%204h8v2H8v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.treatment-input,
+.measure-input,
+.order-input {
+	box-sizing: border-box;
+	width: 100%;
+	border: 1px solid #c2c6d4;
+	border-radius: 8px;
+	background: #ffffff;
+	color: #191c21;
+	font-size: 16px;
+	line-height: 24px;
+}
+
+.input-wrap {
+	position: relative;
+}
+
+.treatment-input {
+	height: 56px;
+	padding: 0 16px;
+}
+
+.measure-list {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.measure-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.measure-index {
+	flex: 0 0 auto;
+	width: 24px;
+	height: 24px;
+	border-radius: 4px;
+	background: #e7e8f0;
+	color: #424752;
+	font-size: 12px;
+	line-height: 24px;
+	font-weight: 600;
+	text-align: center;
+}
+
+.measure-input {
+	flex: 1;
+	height: 40px;
+	padding: 0 12px;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.order-input {
+	height: 116px;
+	padding: 14px 16px;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.input-placeholder {
+	color: #c2c6d4;
+}
+
+.next-button {
+	width: 100%;
+	min-height: 56px;
+	margin-top: 8px;
+	padding: 0;
+	border: 0;
+	border-radius: 999px;
+	background: #00478d;
+	box-shadow: 0 8px 18px rgba(0, 71, 141, 0.22);
+	color: #ffffff;
+	font-size: 16px;
+	line-height: 24px;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+}
+
+.next-button.submitted {
+	background: #006970;
+}
+
+.arrow-icon,
+.check-small-icon {
+	width: 20px;
+	height: 20px;
+	background: #ffffff;
+}
+
+.arrow-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%204-1.41%201.41L16.17%2011H4v2h12.17l-5.58%205.59L12%2020l8-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='m12%204-1.41%201.41L16.17%2011H4v2h12.17l-5.58%205.59L12%2020l8-8-8-8z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.check-small-icon {
+	-webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9%2016.2 4.8%2012l-1.4%201.4L9%2019 21%207l-1.4-1.4L9%2016.2z'/%3E%3C/svg%3E") center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9%2016.2 4.8%2012l-1.4%201.4L9%2019 21%207l-1.4-1.4L9%2016.2z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.spinner {
+	width: 20px;
+	height: 20px;
+	border: 2px solid rgba(255, 255, 255, 0.36);
+	border-top-color: #ffffff;
+	border-radius: 50%;
+	box-sizing: border-box;
+	animation: spin 1s linear infinite;
+}
+
+.toast {
+	position: fixed;
+	left: 50%;
+	bottom: 96px;
+	z-index: 100;
+	max-width: 320px;
+	padding: 12px 24px;
+	border-radius: 999px;
+	background: #2e3037;
+	color: #eff0f8;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+	text-align: center;
+	pointer-events: none;
+	opacity: 0;
+	transform: translate(-50%, 16px);
+	transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.toast.visible {
+	opacity: 1;
+	transform: translate(-50%, 0);
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+</style>
diff --git a/static/config-doctor.png b/static/config-doctor.png
new file mode 100644
index 0000000..1c28d0b
Binary files /dev/null and b/static/config-doctor.png differ
diff --git a/static/config-hospital.png b/static/config-hospital.png
new file mode 100644
index 0000000..5776b51
Binary files /dev/null and b/static/config-hospital.png differ