diff --git a/src/prototypes/xll-miniapp/annotation-source.json b/src/prototypes/xll-miniapp/annotation-source.json
index 56a4922..93c3fab 100644
--- a/src/prototypes/xll-miniapp/annotation-source.json
+++ b/src/prototypes/xll-miniapp/annotation-source.json
@@ -104,7 +104,7 @@
},
{
"id": "hc-settle-group-status",
- "index": 5.5,
+ "index": 6,
"title": "部门结算状态标签",
"pageId": "audit-return",
"locator": {
@@ -122,7 +122,7 @@
},
{
"id": "tc-btn-approve",
- "index": 5.6,
+ "index": 7,
"title": "审批通过按钮",
"pageId": "audit",
"locator": {
@@ -141,7 +141,7 @@
},
{
"id": "page-audit-pickup",
- "index": 6,
+ "index": 8,
"title": "提车应收款审批",
"pageId": "audit-pickup",
"locator": {
@@ -159,7 +159,7 @@
},
{
"id": "page-delivery",
- "index": 7,
+ "index": 9,
"title": "交车",
"pageId": "delivery",
"locator": {
@@ -177,7 +177,7 @@
},
{
"id": "page-inspection",
- "index": 8,
+ "index": 10,
"title": "年审",
"pageId": "inspection",
"locator": {
@@ -195,7 +195,7 @@
},
{
"id": "page-vehicle",
- "index": 9,
+ "index": 11,
"title": "车辆管理",
"pageId": "vehicle",
"locator": {
@@ -213,7 +213,7 @@
},
{
"id": "page-vehicle-detail-location",
- "index": 9.5,
+ "index": 12,
"title": "车辆位置",
"pageId": "vehicle",
"locator": {
@@ -231,7 +231,7 @@
},
{
"id": "page-third-return",
- "index": 10,
+ "index": 13,
"title": "三方退车",
"pageId": "third-return",
"locator": {
@@ -249,7 +249,7 @@
},
{
"id": "page-replace",
- "index": 11,
+ "index": 14,
"title": "替换车",
"pageId": "replace",
"locator": {
@@ -265,9 +265,27 @@
"createdAt": 1779667200000,
"updatedAt": 1779667200000
},
+ {
+ "id": "page-driver-training",
+ "index": 15,
+ "title": "司机安全培训",
+ "pageId": "driver-training",
+ "locator": {
+ "selectors": [
+ "[data-annotation-id=\"page-driver-training\"]"
+ ]
+ },
+ "aiPrompt": "说明司机扫码后的七步安全培训流程：文档阅读、手机验证、证照 OCR、培训视频、本人照片、签字确认与提车码生成。",
+ "annotationText": "",
+ "hasMarkdown": true,
+ "color": "#7AB929",
+ "images": [],
+ "createdAt": 1779667200000,
+ "updatedAt": 1779667200000
+ },
{
"id": "page-map",
- "index": 12,
+ "index": 16,
"title": "地图",
"pageId": "map",
"locator": {
@@ -285,7 +303,7 @@
},
{
"id": "page-mine",
- "index": 13,
+ "index": 17,
"title": "我的",
"pageId": "mine",
"locator": {
@@ -399,6 +417,12 @@
"title": "替换车",
"route": "replace"
},
+ {
+ "type": "route",
+ "id": "route-driver-training",
+ "title": "司机安全培训",
+ "route": "driver-training"
+ },
{
"type": "route",
"id": "route-audit-return",
diff --git a/src/prototypes/xll-miniapp/directory.pages.json b/src/prototypes/xll-miniapp/directory.pages.json
index 06e28d1..7631163 100644
--- a/src/prototypes/xll-miniapp/directory.pages.json
+++ b/src/prototypes/xll-miniapp/directory.pages.json
@@ -11,7 +11,7 @@
"folderId": "directory-modules",
"folderTitle": "业务模块",
"defaultExpanded": true,
- "pageIds": ["audit", "inspection", "vehicle", "delivery", "third-return", "replace"]
+ "pageIds": ["audit", "inspection", "vehicle", "delivery", "third-return", "replace", "driver-training"]
}
],
"extraRoutes": [
diff --git a/src/prototypes/xll-miniapp/driver-training/DriverTrainingModule.jsx b/src/prototypes/xll-miniapp/driver-training/DriverTrainingModule.jsx
new file mode 100644
index 0000000..f5ba670
--- /dev/null
+++ b/src/prototypes/xll-miniapp/driver-training/DriverTrainingModule.jsx
@@ -0,0 +1,136 @@
+import React, { useCallback, useEffect } from 'react';
+import { TrainingProvider, useTraining } from './context/TrainingContext';
+import { TOTAL_STEPS } from './data/constants';
+import { DriverTrainingLayout } from './components/DriverTrainingLayout';
+import PrototypeDebugPanel from './components/PrototypeDebugPanel';
+import Toast, { useToast } from './components/Toast';
+import Step1Document from './steps/Step1Document';
+import Step2Phone from './steps/Step2Phone';
+import Step3Certificates from './steps/Step3Certificates';
+import Step4Video from './steps/Step4Video';
+import Step5Portrait from './steps/Step5Portrait';
+import Step6Signature from './steps/Step6Signature';
+import Step7Signature from './steps/Step7Signature';
+import Step7PickupCode from './steps/Step7PickupCode';
+import './styles/driver-training.css';
+
+const STEPS = [
+ Step1Document,
+ Step2Phone,
+ Step3Certificates,
+ Step4Video,
+ Step5Portrait,
+ Step6Signature,
+ Step7Signature,
+ Step7PickupCode,
+];
+
+const SIGNATURE_STEP = 7;
+
+function StepFooterBar({ currentStep, goToStep, children }) {
+ if (currentStep >= TOTAL_STEPS) return null;
+
+ if (currentStep <= 1) {
+ return {children}
;
+ }
+
+ return (
+
+
+
+
{children}
+
+
+
+
+
+ );
+}
diff --git a/src/prototypes/xll-miniapp/driver-training/components/CameraCapture.jsx b/src/prototypes/xll-miniapp/driver-training/components/CameraCapture.jsx
new file mode 100644
index 0000000..e97415d
--- /dev/null
+++ b/src/prototypes/xll-miniapp/driver-training/components/CameraCapture.jsx
@@ -0,0 +1,169 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import ConfirmDialog from './ConfirmDialog';
+
+const SAMPLE_PORTRAIT =
+ 'data:image/svg+xml,' +
+ encodeURIComponent(
+ ``
+ );
+
+export default function CameraCapture({
+ photoDataUrl,
+ confirmed,
+ onCapture,
+ onConfirm,
+ onRetake,
+ cameraPermission,
+ showDevFallback,
+}) {
+ const videoRef = useRef(null);
+ const streamRef = useRef(null);
+ const [preview, setPreview] = useState(photoDataUrl);
+ const [error, setError] = useState('');
+ const [permissionDenied, setPermissionDenied] = useState(false);
+ const [showPermissionDialog, setShowPermissionDialog] = useState(false);
+
+ const stopStream = useCallback(() => {
+ if (streamRef.current) {
+ streamRef.current.getTracks().forEach((t) => t.stop());
+ streamRef.current = null;
+ }
+ }, []);
+
+ const startCamera = useCallback(async () => {
+ if (cameraPermission === 'deny') {
+ setPermissionDenied(true);
+ setShowPermissionDialog(true);
+ return;
+ }
+ try {
+ const stream = await navigator.mediaDevices.getUserMedia({
+ video: { facingMode: 'user', width: { ideal: 640 }, height: { ideal: 480 } },
+ audio: false,
+ });
+ streamRef.current = stream;
+ if (videoRef.current) {
+ videoRef.current.srcObject = stream;
+ await videoRef.current.play();
+ }
+ setError('');
+ setPermissionDenied(false);
+ } catch {
+ setPermissionDenied(true);
+ setShowPermissionDialog(true);
+ }
+ }, [cameraPermission]);
+
+ useEffect(() => {
+ if (!preview && !confirmed) startCamera();
+ return () => stopStream();
+ }, [preview, confirmed, startCamera, stopStream]);
+
+ const handleCapture = () => {
+ const video = videoRef.current;
+ if (!video) return;
+ const canvas = document.createElement('canvas');
+ canvas.width = video.videoWidth || 640;
+ canvas.height = video.videoHeight || 480;
+ const ctx = canvas.getContext('2d');
+ ctx.translate(canvas.width, 0);
+ ctx.scale(-1, 1);
+ ctx.drawImage(video, 0, 0);
+ const dataUrl = canvas.toDataURL('image/jpeg', 0.85);
+ setPreview(dataUrl);
+ stopStream();
+ onCapture?.(dataUrl);
+ };
+
+ const handleRetake = () => {
+ setPreview(null);
+ onRetake?.();
+ startCamera();
+ };
+
+ const handleUseSample = () => {
+ setPreview(SAMPLE_PORTRAIT);
+ onCapture?.(SAMPLE_PORTRAIT);
+ };
+
+ if (confirmed && photoDataUrl) {
+ return (
+
+
+
+ ✓
+ 本人照片已确认
+
+
+
+ 请由司机本人使用前置摄像头拍摄正面照片，用于本次培训和现场交车核验。
+
+
+ - 请正对摄像头
+ - 保持光线充足
+ - 请勿佩戴口罩或遮挡面部
+
+
+ {!preview ? (
+
+ ) : (
+
+
+
+ )}
+
+ {error &&
{error}
}
+
+
+ {!preview ? (
+
+ ) : (
+ <>
+
+
+
+ )}
+
+
+ {showDevFallback && permissionDenied && (
+
+ )}
+
+
setShowPermissionDialog(false)}
+ onConfirm={() => {
+ setShowPermissionDialog(false);
+ startCamera();
+ }}
+ />
+ e.key === 'Enter' && onClick?.()}
+ >
+
+ {label}
+ {required ? (
+ 必填
+ ) : (
+ 选填
+ )}
+
+
{STATUS_TEXT[status] || '待上传'}
+ {imageUrl && (
+
+
+
+ )}
+
+
e.stopPropagation()}>
+
{title}
+ {summary ?
{summary}
: null}
+ {note ?
{note}
: null}
+ {content ?
{content}
: null}
+
+
+
+
+
+
+ {TRAINING_PHASES.map((phase, index) => {
+ const status = getPhaseStatus(phase, currentStep);
+ return (
+
+ {index > 0 && (
+
+ )}
+
+
+ {status === 'done' ? '✓' : index + 1}
+
+ {phase.label}
+
+
+ );
+ })}
+
+
+ {isComplete ? '培训已完成' : '培训进度'}
+
+ 步骤 {currentStep}/{totalSteps}
+
+
+
+
+
+
+
+
+ {stepNames[currentStep - 1]}
+ {stepDetailHint ? (
+ {stepDetailHint}
+ ) : null}
+
+
+
+ {!embedded && (
+
+ )}
+
+ {!immersive ? (
+
+ ) : null}
+ {children}
+
+ {footer &&
{footer}
}
+
+
+ {fields.map((f) => (
+
+
+ {f.inputType === 'select' ? (
+
+ ) : (
+
onChange(f.key, e.target.value)}
+ />
+ )}
+ {errors[f.key] &&
{errors[f.key]}
}
+
+ ))}
+
+
请根据证件原件准确填写，相关信息将用于本次交车核验。
+
+
+ ✓
+ 手机号验证成功
+
+ );
+ }
+
+ return (
+
+
+
+
{
+ patch({ phone: e.target.value.replace(/\D/g, '') });
+ setPhoneError('');
+ }}
+ />
+ {phoneError &&
{phoneError}
}
+
+
+
+
+ {
+ patch({ code: e.target.value.replace(/\D/g, '') });
+ setCodeError('');
+ }}
+ />
+
+
+ {codeError &&
{codeError}
}
+
+
+ 手机号用于绑定本次培训记录和接收培训状态通知。
+
+ 演示环境已预填手机号与验证码（{MOCK_SMS_CODE}），可直接验证继续。
+
+ {showActions && (
+
+ )}
+
+
+
✓
+
安全培训已完成
+
请向运维人员出示下方提车码
+
+
+
+
+
+ {hint ?
{hint}
: null}
+
+
+
+ {isDisabled &&
已失效
}
+
+
+
提车码仅限本次交车使用，请勿转发给他人。
+
+
+ {open && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ {!hasStroke && !isEsign && (
+
+ {placeholderText}
+
+ )}
+ {isEsign && !hasStroke && (
+
+ {watermark || '请在此处签名'}
+
+ )}
+
+
+
+ {!hideActions && (
+
+
+ {hasStroke && (
+
+ ✓ 已签名
+
+ )}
+
+ )}
+
{message}
;
+}
+
+export function useToast() {
+ const [message, setMessage] = useState('');
+ const show = (msg) => setMessage(msg);
+ const clear = () => setMessage('');
+ return { message, show, clear };
+}
diff --git a/src/prototypes/xll-miniapp/driver-training/components/TrainingDocumentViewer.jsx b/src/prototypes/xll-miniapp/driver-training/components/TrainingDocumentViewer.jsx
new file mode 100644
index 0000000..62d18f9
--- /dev/null
+++ b/src/prototypes/xll-miniapp/driver-training/components/TrainingDocumentViewer.jsx
@@ -0,0 +1,31 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+
+export default function TrainingDocumentViewer({ content, onProgress, onReachBottom, startTime, onStart }) {
+ const ref = useRef(null);
+ const started = useRef(false);
+
+ const handleScroll = useCallback(() => {
+ const el = ref.current;
+ if (!el) return;
+ if (!started.current) {
+ started.current = true;
+ onStart?.();
+ }
+ const { scrollTop, scrollHeight, clientHeight } = el;
+ const progress = Math.min(100, Math.round((scrollTop / (scrollHeight - clientHeight || 1)) * 100));
+ onProgress?.(progress);
+ if (scrollTop + clientHeight >= scrollHeight - 8) {
+ onReachBottom?.();
+ }
+ }, [onProgress, onReachBottom, onStart]);
+
+ useEffect(() => {
+ handleScroll();
+ }, [handleScroll, content]);
+
+ return (
+
+ {content}
+
+ );
+}
diff --git a/src/prototypes/xll-miniapp/driver-training/components/TrainingVideoPlayer.jsx b/src/prototypes/xll-miniapp/driver-training/components/TrainingVideoPlayer.jsx
new file mode 100644
index 0000000..88ecfbd
--- /dev/null
+++ b/src/prototypes/xll-miniapp/driver-training/components/TrainingVideoPlayer.jsx
@@ -0,0 +1,106 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+const DURATION = 30;
+
+function IconPlay() {
+ return (
+
+ );
+}
+
+function IconPause() {
+ return (
+
+ );
+}
+
+export default function TrainingVideoPlayer({ completed, watchedSeconds, onProgress, onComplete, debugComplete }) {
+ const [playing, setPlaying] = useState(false);
+ const [current, setCurrent] = useState(watchedSeconds || 0);
+ const timerRef = useRef(null);
+
+ const stopTimer = useCallback(() => {
+ if (timerRef.current) {
+ clearInterval(timerRef.current);
+ timerRef.current = null;
+ }
+ }, []);
+
+ useEffect(() => {
+ const handleVisibility = () => {
+ if (document.hidden) setPlaying(false);
+ };
+ document.addEventListener('visibilitychange', handleVisibility);
+ return () => document.removeEventListener('visibilitychange', handleVisibility);
+ }, []);
+
+ useEffect(() => {
+ if (!playing || completed) {
+ stopTimer();
+ return undefined;
+ }
+ timerRef.current = setInterval(() => {
+ setCurrent((prev) => {
+ const next = Math.min(prev + 1, DURATION);
+ onProgress?.(next);
+ if (next >= DURATION) {
+ setPlaying(false);
+ onComplete?.();
+ }
+ return next;
+ });
+ }, 1000);
+ return () => stopTimer();
+ }, [playing, completed, onProgress, onComplete, stopTimer]);
+
+ useEffect(() => {
+ if (debugComplete && !completed) {
+ setCurrent(DURATION);
+ onProgress?.(DURATION);
+ onComplete?.();
+ }
+ }, [debugComplete, completed, onProgress, onComplete]);
+
+ useEffect(() => {
+ if (completed) setCurrent(DURATION);
+ }, [completed]);
+
+ const togglePlay = () => {
+ if (completed) return;
+ setPlaying((p) => !p);
+ };
+
+ const progress = (current / DURATION) * 100;
+ const formatTime = (s) => `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`;
+
+ return (
+
+
+
+
氢能重卡安全驾驶培训
+
预计时长 30 秒
+ {!playing && !completed && (
+
+ )}
+
+
+
+
+
+
+ {formatTime(current)}/{formatTime(DURATION)}
+
+
+
+
e.stopPropagation()}>
+
上传{label}
+
请选择获取证件照片的方式
+
+
+
+
+
+
安全培训须知
+
{
+ updateState((prev) => ({ ...prev, step1: { ...prev.step1, readProgress: p } }));
+ }}
+ onReachBottom={handleReachBottom}
+ onStart={handleStart}
+ />
+
+
+
已阅读 {readProgress}%
+
+ {!scrolledToBottom ? '请完整阅读培训文档后继续。' : !checked ? '请勾选确认后继续。' : ''}
+
+
+
+ );
+
+ if (renderPart === 'content') return content;
+ if (renderPart === 'footer') return footer;
+ return (
+ <>
+ {content}
+ {footer}
+
+ );
+}
diff --git a/src/prototypes/xll-miniapp/driver-training/steps/Step2Phone.jsx b/src/prototypes/xll-miniapp/driver-training/steps/Step2Phone.jsx
new file mode 100644
index 0000000..f863658
--- /dev/null
+++ b/src/prototypes/xll-miniapp/driver-training/steps/Step2Phone.jsx
@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import PhoneVerificationForm, { verifyPhoneStep } from '../components/PhoneVerificationForm';
+import { DEMO_PHONE, MOCK_SMS_CODE } from '../data/constants';
+
+export default function Step2Phone({ state, updateState, completeStep, renderPart = 'all' }) {
+ const [errors, setErrors] = useState({});
+
+ const handleVerify = () => {
+ const result = verifyPhoneStep(state.step2);
+ if (!result.ok) {
+ setErrors({
+ phoneError: result.phoneError,
+ codeError: result.codeError,
+ });
+ return;
+ }
+ setErrors({});
+ updateState((prev) => ({
+ ...prev,
+ step2: {
+ ...prev.step2,
+ phone: result.phone,
+ code: result.code,
+ verified: true,
+ verifiedAt: new Date().toISOString(),
+ },
+ }));
+ completeStep(2);
+ };
+
+ const handleDemoSkip = () => {
+ updateState((prev) => ({
+ ...prev,
+ step2: {
+ phone: DEMO_PHONE,
+ code: MOCK_SMS_CODE,
+ verified: true,
+ verifiedAt: new Date().toISOString(),
+ },
+ }));
+ completeStep(2);
+ };
+
+ if (state.step2.verified) {
+ const content = (
+
+
+ ✓
+ 手机号 {state.step2.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')} 已验证
+
+
+
手机号验证
+
updateState((prev) => ({ ...prev, step2: { ...prev.step2, ...data } }))}
+ />
+ {errors.phoneError && {errors.phoneError}
}
+ {errors.codeError && {errors.codeError}
}
+ setModal(null)}>
+
e.stopPropagation()}>
+
+
证件信息识别失败，可以重新拍摄或手动填写。
+
+
+
+
+
+
+
setModal(null)}>
+
e.stopPropagation()} style={{ maxHeight: '80vh', overflow: 'auto' }}>
+
+ {modal.type === 'view' ? '查看证照' : modal.type === 'manual' ? '手动填写' : '确认识别结果'}
+
+ {modal.imageUrl &&
}
+ {(modal.type === 'confirm' || modal.type === 'manual') && OCR_CERT_TYPES.includes(modal.certType) && (
+
setFormData((d) => ({ ...d, [key]: val }))}
+ errors={formErrors}
+ />
+ )}
+ {modal.type === 'view' && modal.fields && Object.keys(modal.fields).length > 0 && (
+
+ {Object.entries(modal.fields)
+ .filter(([k]) => k !== 'fileNumber')
+ .map(([k, v]) => (
+
+ {getCertFieldLabel(k)}
+ {v}
+
+ ))}
+
+
+ {modal.type !== 'view' && (
+
+ )}
+
+
+
+
司机证照
+
+ {isQualificationRequired(tonnage)
+ ? `当前车辆为 ${tonnage} 吨，从业资格证为必填项。`
+ : `当前车辆为 ${tonnage} 吨，从业资格证为选填项。`}
+ 点击证件卡片可选择拍照或从相册上传。
+
+ {allCertTypes.map((t) => (
+
openCert(t)}
+ />
+ ))}
+ {allDone && (
+
+ ✓
+ 证照信息已完成
+
+ )}
+ {validationError && {validationError}
}
+
+ 请完成全部必填证照上传（{requiredDoneCount}/{requiredTypes.length}）
+
+ )}
+
+
+ );
+
+ if (renderPart === 'content') return content;
+ if (renderPart === 'footer') return footer;
+ return (
+ <>
+ {content}
+ {footer}
+
+ );
+}
diff --git a/src/prototypes/xll-miniapp/driver-training/steps/Step4Video.jsx b/src/prototypes/xll-miniapp/driver-training/steps/Step4Video.jsx
new file mode 100644
index 0000000..4a5abc4
--- /dev/null
+++ b/src/prototypes/xll-miniapp/driver-training/steps/Step4Video.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import TrainingVideoPlayer from '../components/TrainingVideoPlayer';
+
+export default function Step4Video({ state, updateState, completeStep, renderPart = 'all' }) {
+ const { step4, debug } = state;
+ const completed = step4.completed;
+
+ const handleComplete = () => {
+ updateState((prev) => ({
+ ...prev,
+ step4: {
+ completed: true,
+ watchedSeconds: 30,
+ completedAt: new Date().toISOString(),
+ },
+ }));
+ };
+
+ const content = (
+
+
安全培训视频
+
+ 氢能重卡安全驾驶培训 · 预计时长 30 秒
+
+
+ updateState((prev) => ({ ...prev, step4: { ...prev.step4, watchedSeconds: s } }))
+ }
+ onComplete={handleComplete}
+ debugComplete={debug.videoStatus === 'completed' && !completed}
+ />
+ {completed && (
+
+ ✓
+ 视频观看完成
+
+ )}
+ 请完整观看安全培训视频
}
+
+
+ );
+
+ if (renderPart === 'content') return content;
+ if (renderPart === 'footer') return footer;
+ return (
+ <>
+ {content}
+ {footer}
+
+ );
+}
diff --git a/src/prototypes/xll-miniapp/driver-training/steps/Step5Portrait.jsx b/src/prototypes/xll-miniapp/driver-training/steps/Step5Portrait.jsx
new file mode 100644
index 0000000..5e44131
--- /dev/null
+++ b/src/prototypes/xll-miniapp/driver-training/steps/Step5Portrait.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import CameraCapture from '../components/CameraCapture';
+
+export default function Step5Portrait({ state, updateState, completeStep, renderPart = 'all' }) {
+ const { step5, debug } = state;
+
+ const content = (
+
+
本人照片
+
+ updateState((prev) => ({
+ ...prev,
+ step5: { ...prev.step5, photoDataUrl: url, confirmed: false },
+ }))
+ }
+ onConfirm={() =>
+ updateState((prev) => ({
+ ...prev,
+ step5: {
+ ...prev.step5,
+ confirmed: true,
+ capturedAt: new Date().toISOString(),
+ },
+ }))
+ }
+ onRetake={() =>
+ updateState((prev) => ({
+ ...prev,
+ step5: { photoDataUrl: null, confirmed: false, capturedAt: null },
+ }))
+ }
+ />
+
+ );
+
+ const footer = (
+ <>
+ {!step5.confirmed && (
+ 请拍照并确认使用本人照片
+ )}
+
+
+ );
+
+ if (renderPart === 'content') return content;
+ if (renderPart === 'footer') return footer;
+ return (
+ <>
+ {content}
+ {footer}
+
+ );
+}
diff --git a/src/prototypes/xll-miniapp/driver-training/steps/Step6Signature.jsx b/src/prototypes/xll-miniapp/driver-training/steps/Step6Signature.jsx
new file mode 100644
index 0000000..a5f87ef
--- /dev/null
+++ b/src/prototypes/xll-miniapp/driver-training/steps/Step6Signature.jsx
@@ -0,0 +1,86 @@
+import React from 'react';
+
+import { formatNow } from '../utils/formatDateTime';
+
+const DECLARATION =
+ '本人确认所提交的身份及驾驶证件信息真实有效，已完整阅读安全培训文档并观看安全培训视频，已知悉氢能车辆驾驶及应急处置要求，并确认由本人执行本次提车。';
+
+export default function Step6Signature({ state, updateState, completeStep, renderPart = 'all' }) {
+ const { step6, step3, trainingTask } = state;
+ const checked = step6.checked;
+
+ const driverName = step3.certificates?.idFront?.fields?.name || '—';
+ const idLast4 = (step3.certificates?.idFront?.fields?.idNumber || '****').slice(-4);
+ const vehicleClass = step3.certificates?.licenseFront?.fields?.vehicleClass || '—';
+
+ const content = (
+
+
签字确认
+
+
+ ① 阅读声明
+ {DECLARATION}
+
+
+
+ ② 核对信息
+
+
+ 司机姓名
+ {driverName}
+
+
+ 当前车辆
+ {trainingTask.vehiclePlate}
+
+
+ 身份证后四位
+ {idLast4}
+
+
+ 驾驶证准驾车型
+ {vehicleClass}
+
+
+ 培训完成时间
+ {formatNow()}
+
+
+
+
+
请勾选「本人确认以上信息及签名真实有效」
: null}
+
+
+ );
+
+ if (renderPart === 'content') return content;
+ if (renderPart === 'footer') return footer;
+ return (
+ <>
+ {content}
+ {footer}
+
+ );
+}
diff --git a/src/prototypes/xll-miniapp/driver-training/steps/Step7PickupCode.jsx b/src/prototypes/xll-miniapp/driver-training/steps/Step7PickupCode.jsx
new file mode 100644
index 0000000..66cb218
--- /dev/null
+++ b/src/prototypes/xll-miniapp/driver-training/steps/Step7PickupCode.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import PickupCodeCard from '../components/PickupCodeCard';
+
+export default function Step7PickupCode({ state, renderPart = 'all' }) {
+ const { step7 } = state;
+
+ const content = ;
+
+ if (renderPart === 'footer') return null;
+ return content;
+}
diff --git a/src/prototypes/xll-miniapp/driver-training/steps/Step7Signature.jsx b/src/prototypes/xll-miniapp/driver-training/steps/Step7Signature.jsx
new file mode 100644
index 0000000..ae1a3c0
--- /dev/null
+++ b/src/prototypes/xll-miniapp/driver-training/steps/Step7Signature.jsx
@@ -0,0 +1,169 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import { formatNow } from '../utils/formatDateTime';
+
+import SignatureCanvas from '../components/SignatureCanvas';
+import ConfirmDialog from '../components/ConfirmDialog';
+
+function useContainerLandscape(rootRef) {
+ const [isLandscape, setIsLandscape] = useState(false);
+
+ useEffect(() => {
+ const root = rootRef.current?.closest('.driver-training-app') || rootRef.current;
+ if (!root) return undefined;
+
+ const check = () => {
+ const { width, height } = root.getBoundingClientRect();
+ setIsLandscape(width > height * 1.05);
+ };
+
+ check();
+ const observer = new ResizeObserver(check);
+ observer.observe(root);
+ window.addEventListener('orientationchange', check);
+ return () => {
+ observer.disconnect();
+ window.removeEventListener('orientationchange', check);
+ };
+ }, [rootRef]);
+
+ return isLandscape;
+}
+
+export default function Step7Signature({
+ state,
+ updateState,
+ submitTraining,
+ goToStep,
+ renderPart = 'all',
+}) {
+ const { step6, step3, trainingTask } = state;
+ const [showSubmitDialog, setShowSubmitDialog] = useState(false);
+ const rootRef = useRef(null);
+ const canvasRef = useRef(null);
+ const isLandscape = useContainerLandscape(rootRef);
+ const hasSignature = !!step6.signatureDataUrl;
+
+ const driverName = step3.certificates?.idFront?.fields?.name || '—';
+
+ const handleSubmit = () => {
+ submitTraining();
+ setShowSubmitDialog(false);
+ };
+
+ if (step6.submitted) {
+ if (renderPart === 'footer') return null;
+ return (
+
+ );
+ }
+
+ if (renderPart === 'footer') return null;
+
+ const dialogSummary = (
+ <>
+
+ 司机
+ {driverName}
+
+
+ 车辆
+ {trainingTask.vehiclePlate}
+
+
+ 培训完成时间
+ {formatNow()}
+
+ {hasSignature && (
+
+
签名预览
+
+
+ {!isLandscape && (
+
+
+ ↻
+
+
+ 横屏签字预览
+ 正式使用时请旋转手机至横屏；下方为横屏全屏签名页效果，可直接体验签字并完成提交。
+
+
+ )}
+
+
+
+
+ 手写签名
+
+
+
+
+ {driverName}
+ ·
+ {trainingTask.vehiclePlate}
+
+
+
+
+ updateState((prev) => ({ ...prev, step6: { ...prev.step6, signatureDataUrl: url } }))
+ }
+ />
+
+
+
+
+ {submitDialog}
+