feat: 登录页面联调

pages/config/config.vue

@@ -114,9 +114,10 @@ type OptionGroup = keyof ConfigOptions
 type SaveState = 'idle' | 'saved'
 
 type LoginUser = {
-	id?: string
+	id?: string | number
 	phone?: string
 	institutionId?: string
+	institution?: string | null
 }
 
 const form = reactive({
@@ -229,9 +230,9 @@ function chooseOption(option: ConfigOption) {
 function handleSubmit() {
 	const user = (uni.getStorageSync('clinical-thinking-user') || {}) as LoginUser
 	const payload: ClinicalConfigPayload = {
-		userId: user.id || 'mock-user-guest',
+		userId: user.id ? String(user.id) : 'mock-user-guest',
 		phone: user.phone || '',
-		institutionId: user.institutionId || '',
+		institutionId: user.institutionId || user.institution || '',
 		department: form.department,
 		title: form.title,
 		experience: form.experience,

pages/index/index.vue

@@ -11,117 +11,130 @@
 			@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 class="auth-container">
+				<view class="header">
+					<image
+						class="logo"
+						mode="aspectFit"
+						src="/static/logo.png"
+					/>
+					<text class="title">临床思维训练</text>
+					<text class="subtitle">提升临床决策能力的高效平台</text>
 				</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>
+				<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="6"
-								v-model="form.code"
-								placeholder="短信验证码"
+								maxlength="11"
+								v-model="form.phone"
+								placeholder="请输入手机号"
 								placeholder-class="placeholder"
-								@focus="activeField = 'code'"
+								@focus="activeField = 'phone'"
 								@blur="activeField = ''"
 								@confirm="handleLogin"
 							/>
 						</view>
-						<button class="code-button" :class="{ disabled: isCounting }" :disabled="isCounting" @click="handleSendCode">
-							{{ codeButtonText }}
+					</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="verified-icon" aria-hidden="true"></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 || sendingCode }"
+								:disabled="isCounting || sendingCode"
+								@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="select-arrow" aria-hidden="true"></view>
+						</view>
+					</view>
+
+					<text class="hint">* 未注册手机号登录时将自动创建账号</text>
+
+					<view class="login-area">
+						<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>
 
-				<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 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 v-if="form.institutionId === institution.id" class="selected-mark"></view>
 					</view>
-				</scroll-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>
 	</view>
 </template>
 
 <script setup lang="ts">
 import { computed, nextTick, onUnmounted, reactive, ref } from 'vue'
+import { ApiRequestError, loginWithCode, sendLoginCode } from '../../api/auth'
 import ConfigPage from '../config/config.vue'
 import ProfilePage from '../profile/profile.vue'
 
@@ -132,24 +145,11 @@ type Institution = {
 	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: '1', name: '协和医学院', city: '北京', typeName: '医学院校' },
+	{ id: '2', name: '四川大学华西医院', city: '成都', typeName: '三甲医院' },
+	{ id: '3', name: '复旦大学附属中山医院', city: '上海', typeName: '三甲医院' },
+	{ id: '4', name: '中山大学孙逸仙纪念医院', city: '广州', typeName: '三甲医院' },
 	{ id: 'others', name: '其他机构', city: '其他', typeName: '手动登记' }
 ]
 
@@ -159,17 +159,17 @@ const form = reactive({
 	institutionId: ''
 })
 
-const institutionPickerVisible = ref(false)
-const mockVerifyCode = ref('')
-const countdown = ref(0)
 const activeField = ref('')
 const agreed = ref(false)
 const agreementShake = ref(false)
+const sendingCode = ref(false)
 const submitting = ref(false)
+const countdown = ref(0)
 const toastMessage = ref('')
 const toastVisible = ref(false)
 const showConfigPage = ref(false)
 const showProfilePage = ref(false)
+const institutionPickerVisible = ref(false)
 
 let countdownTimer: ReturnType<typeof setInterval> | null = null
 let toastTimer: ReturnType<typeof setTimeout> | null = null
@@ -181,7 +181,8 @@ const selectedInstitution = computed(() => {
 const isCounting = computed(() => countdown.value > 0)
 
 const codeButtonText = computed(() => {
-	return isCounting.value ? `${countdown.value}s 后重新获取` : '获取验证码'
+	if (sendingCode.value) return '发送中...'
+	return isCounting.value ? `${countdown.value}s` : '获取验证码'
 })
 
 function chooseInstitution(institution: Institution) {
@@ -193,33 +194,38 @@ function toggleAgreement() {
 	agreed.value = !agreed.value
 }
 
-function handleSendCode() {
+async function handleSendCode() {
+	if (sendingCode.value || isCounting.value) return
 	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()
+	sendingCode.value = true
+	try {
+		let result
+		try {
+			result = await sendLoginCode(form.phone)
+		} catch (error) {
+			if (error instanceof ApiRequestError && error.code === 'AUTH_PHONE_NOT_FOUND') {
+				result = await sendLoginCode(form.phone, 'register')
+			} else {
+				throw error
+			}
 		}
-	}, 1000)
-	showToast(`模拟验证码：${mockVerifyCode.value}`)
+		showToast(result.message || '验证码已发送')
+		startCountdown()
+	} catch (error) {
+		showToast(error instanceof Error ? error.message : '验证码发送失败')
+	} finally {
+		sendingCode.value = false
+	}
 }
 
 function handleLogin() {
 	if (submitting.value) return
 	if (!validatePhone()) return
-	if (!form.code) {
+	if (!form.code.trim()) {
 		showToast('请输入短信验证码')
 		return
 	}
-	if (mockVerifyCode.value && form.code !== mockVerifyCode.value) {
-		showToast('验证码不正确')
-		return
-	}
 	if (!selectedInstitution.value) {
 		showToast('请选择所属机构')
 		return
@@ -231,22 +237,41 @@ function handleLogin() {
 	}
 
 	submitting.value = true
-	setTimeout(() => {
-		const user: LoginUser = {
-			id: `mock-user-${Date.now()}`,
-			phone: form.phone,
+	loginWithCode({
+		phone: form.phone,
+		code: form.code
+	}).then(result => {
+		const backendUser = result.user || {}
+		const normalizedUser = {
+			...backendUser,
+			id: backendUser.id ? String(backendUser.id) : '',
+			phone: backendUser.phone || form.phone,
 			institutionId: selectedInstitution.value?.id || '',
-			institutionName: selectedInstitution.value?.name || '',
-			token: `mock-token-${Date.now()}`
+			institutionName: selectedInstitution.value?.name || ''
 		}
 
-		uni.setStorageSync('clinical-thinking-user', user)
-		showToast('正在进入系统...')
-		setTimeout(() => {
-			submitting.value = false
-			showConfigPage.value = true
-		}, 300)
-	}, 500)
+		uni.setStorageSync('clinical-thinking-user', normalizedUser)
+		uni.setStorageSync('clinical-thinking-tokens', result.tokens)
+		uni.setStorageSync('clinical-thinking-access-token', result.tokens.access)
+		uni.setStorageSync('clinical-thinking-refresh-token', result.tokens.refresh)
+		showToast(result.message || '正在进入系统...')
+		showConfigPage.value = true
+	}).catch(error => {
+		showToast(error instanceof Error ? error.message : '登录失败，请稍后重试')
+	}).finally(() => {
+		submitting.value = false
+	})
+}
+
+function startCountdown() {
+	countdown.value = 60
+	clearCountdownTimer()
+	countdownTimer = setInterval(() => {
+		countdown.value -= 1
+		if (countdown.value <= 0) {
+			clearCountdownTimer()
+		}
+	}, 1000)
 }
 
 function validatePhone() {
@@ -282,9 +307,7 @@ function triggerAgreementShake() {
 }
 
 function showToast(message: string) {
-	if (toastTimer) {
-		clearTimeout(toastTimer)
-	}
+	if (toastTimer) clearTimeout(toastTimer)
 	toastMessage.value = message
 	toastVisible.value = true
 	uni.showToast({
@@ -305,9 +328,7 @@ function clearCountdownTimer() {
 
 onUnmounted(() => {
 	clearCountdownTimer()
-	if (toastTimer) {
-		clearTimeout(toastTimer)
-	}
+	if (toastTimer) clearTimeout(toastTimer)
 })
 </script>
 
@@ -452,33 +473,17 @@ page {
 	min-width: 0;
 }
 
-.shield-icon {
-	position: relative;
+.verified-icon {
 	flex: 0 0 auto;
-	box-sizing: border-box;
-	width: 22px;
-	height: 24px;
+	width: 28px;
+	height: 28px;
 	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);
+	background: center / 24px 24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23727783' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 7.8-7 10-4-2.2-7-5.5-7-10V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
 }
 
 .code-button {
 	box-sizing: border-box;
 	flex: 0 0 auto;
-	width: 124px;
 	height: 56px;
 	padding: 0 16px;
 	border: 1px solid #00478d;
@@ -507,6 +512,7 @@ page {
 }
 
 .select-wrap {
+	position: relative;
 	justify-content: space-between;
 }
 
@@ -525,24 +531,12 @@ page {
 	color: rgba(114, 119, 131, 0.6);
 }
 
-.expand-icon {
-	position: relative;
+.select-arrow {
 	flex: 0 0 auto;
-	width: 24px;
-	height: 24px;
+	width: 28px;
+	height: 28px;
 	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);
+	background: center / 28px 28px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23727783' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8l5 5 5-5'/%3E%3Cpath d='M7 12l5 5 5-5'/%3E%3C/svg%3E");
 }
 
 .hint {
@@ -556,10 +550,13 @@ page {
 	letter-spacing: 0;
 }
 
+.login-area {
+	padding-top: 16px;
+}
+
 .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);