feat(练习): 答对后显示ITTO明细信息
- PracticeItem 接口添加 originalData 字段保留原始数据 - practiceItems 构建时保存完整的 detail/nameEn/note 信息 - PracticeList 答对状态下显示英文名称、明细列表、备注 via [HAPI](https://hapi.run) Co-Authored-By: HAPI <noreply@hapi.run>
This commit is contained in:
@@ -14,6 +14,7 @@ interface PracticeItem {
|
|||||||
section: IttoSection
|
section: IttoSection
|
||||||
name: string
|
name: string
|
||||||
normalizedAnswer: string
|
normalizedAnswer: string
|
||||||
|
originalData: any // 保留原始数据(包含 detail、nameEn、note)
|
||||||
}
|
}
|
||||||
|
|
||||||
const STORAGE_KEY = 'ittoview:process-detail:itto-visibility'
|
const STORAGE_KEY = 'ittoview:process-detail:itto-visibility'
|
||||||
@@ -75,6 +76,7 @@ export function ProcessDetailPage() {
|
|||||||
section,
|
section,
|
||||||
name,
|
name,
|
||||||
normalizedAnswer: normalizeAnswer(name, false),
|
normalizedAnswer: normalizeAnswer(name, false),
|
||||||
|
originalData: d, // 保留原始数据
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -736,6 +738,8 @@ function PracticeList({
|
|||||||
{items.map((item) => {
|
{items.map((item) => {
|
||||||
const isAnswered = answeredItems.has(item.id)
|
const isAnswered = answeredItems.has(item.id)
|
||||||
const isCurrent = item.id === currentPracticeId
|
const isCurrent = item.id === currentPracticeId
|
||||||
|
const data = item.originalData
|
||||||
|
const hasDetail = data?.detail && data.detail.length > 0
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li key={item.id} className="px-3 py-2">
|
<li key={item.id} className="px-3 py-2">
|
||||||
@@ -753,10 +757,32 @@ function PracticeList({
|
|||||||
onPointerCancel={isCurrent ? onLongPressEnd : undefined}
|
onPointerCancel={isCurrent ? onLongPressEnd : undefined}
|
||||||
>
|
>
|
||||||
{isAnswered ? (
|
{isAnswered ? (
|
||||||
|
<div>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span className="font-medium text-gray-900 dark:text-white">{item.name}</span>
|
<span className="font-medium text-gray-900 dark:text-white">{item.name}</span>
|
||||||
<Check size={14} className="text-green-500 shrink-0" />
|
<Check size={14} className="text-green-500 shrink-0" />
|
||||||
</div>
|
</div>
|
||||||
|
{data?.nameEn && (
|
||||||
|
<div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||||
|
{data.nameEn}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{hasDetail && (
|
||||||
|
<div className="mt-1.5 text-xs text-gray-600 dark:text-gray-400">
|
||||||
|
{data.detail.map((detailItem: any, idx: number) => (
|
||||||
|
<span key={detailItem.id || idx}>
|
||||||
|
{detailItem.label}
|
||||||
|
{idx < data.detail.length - 1 && '、'}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{data?.note && (
|
||||||
|
<div className="mt-1.5 text-xs text-gray-500 dark:text-gray-400 italic">
|
||||||
|
💡 {data.note}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
) : isCurrent && showAnswer ? (
|
) : isCurrent && showAnswer ? (
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span className="font-medium text-indigo-700 dark:text-indigo-300">{item.name}</span>
|
<span className="font-medium text-indigo-700 dark:text-indigo-300">{item.name}</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user