da04583703
- 调整底部固定区域布局，输入框和辅助信息分层显示 - 压缩矩阵格子间距和内边距，适配小屏幕 - 辅助信息区域限高并可滚动，只显示前2个裁剪因素 - 减小字体大小和组件尺寸，提升移动端体验 - 修复表头吸顶位置偏移 via [HAPI](https://hapi.run) Co-Authored-By: HAPI <noreply@hapi.run>
65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import type { CellInfo } from '@/utils/practice'
|
||
import { knowledgeAreaMap, processMap } from '@/data'
|
||
|
||
interface HintInfoProps {
|
||
currentCell: CellInfo | undefined
|
||
}
|
||
|
||
export function HintInfo({ currentCell }: HintInfoProps) {
|
||
if (!currentCell) return null
|
||
|
||
if (currentCell.type === 'knowledge-area') {
|
||
const ka = knowledgeAreaMap.get(currentCell.knowledgeAreaId)
|
||
if (!ka?.tailoringFactors || ka.tailoringFactors.length === 0) {
|
||
return (
|
||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||
暂无裁剪因素信息
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-2">
|
||
<h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
||
敏捷裁剪因素
|
||
</h3>
|
||
<div className="space-y-1.5 text-xs">
|
||
{ka.tailoringFactors.slice(0, 2).map((factor, index) => (
|
||
<div key={index} className="flex gap-2">
|
||
<span className="font-medium text-gray-700 dark:text-gray-300 shrink-0">
|
||
{factor.title}：
|
||
</span>
|
||
<span className="text-gray-600 dark:text-gray-400 line-clamp-1">
|
||
{factor.description}
|
||
</span>
|
||
</div>
|
||
))}
|
||
{ka.tailoringFactors.length > 2 && (
|
||
<div className="text-gray-500 dark:text-gray-500">
|
||
+{ka.tailoringFactors.length - 2} 个因素...
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
} else {
|
||
const process = processMap.get(currentCell.processId!)
|
||
const purpose = process?.purpose
|
||
|
||
return (
|
||
<div>
|
||
<h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1">
|
||
主要作用
|
||
</h3>
|
||
{purpose ? (
|
||
<p className="text-xs text-gray-700 dark:text-gray-300 line-clamp-2">
|
||
{purpose}
|
||
</p>
|
||
) : (
|
||
<p className="text-xs text-gray-500 dark:text-gray-400">暂无主要作用说明</p>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
}
|