From 7edaebf0ab46a822bc3d30d16109d20cc16f1b96 Mon Sep 17 00:00:00 2001 From: ittoview Date: Sun, 1 Mar 2026 14:47:24 +0000 Subject: [PATCH] =?UTF-8?q?fix(=E7=BB=83=E4=B9=A0):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=92=8C=E4=BF=AE=E5=A4=8D=E9=9C=80=E6=B1=82?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修复知识领域显示完整名称（如"项目整合管理"） - 改用 table 布局，参考 process-matrix 样式 - 输入区域添加半透明背景（bg-white/80 + backdrop-blur-md） - 辅助信息不再省略，显示完整内容 - 删除不需要的 KnowledgeAreaCell 组件 - 知识领域显示在左侧列，过程显示在单元格内 via [HAPI](https://hapi.run) Co-Authored-By: HAPI --- src/components/practice/HintInfo.tsx | 13 +- src/components/practice/KnowledgeAreaCell.tsx | 87 --------- src/components/practice/PracticeMatrix.tsx | 179 ++++++++---------- src/pages/ProcessPracticePage.tsx | 7 +- src/utils/practice.ts | 4 +- 5 files changed, 90 insertions(+), 200 deletions(-) delete mode 100644 src/components/practice/KnowledgeAreaCell.tsx diff --git a/src/components/practice/HintInfo.tsx b/src/components/practice/HintInfo.tsx index 5de23a4..4dedd1e 100644 --- a/src/components/practice/HintInfo.tsx +++ b/src/components/practice/HintInfo.tsx @@ -23,22 +23,17 @@ export function HintInfo({ currentCell }: HintInfoProps) {

敏捷裁剪因素

-
- {ka.tailoringFactors.slice(0, 2).map((factor, index) => ( +
+ {ka.tailoringFactors.map((factor, index) => (
{factor.title}： - + {factor.description}
))} - {ka.tailoringFactors.length > 2 && ( -
- +{ka.tailoringFactors.length - 2} 个因素... -
- )}
) @@ -52,7 +47,7 @@ export function HintInfo({ currentCell }: HintInfoProps) { 主要作用 {purpose ? ( -

+

{purpose}

) : ( diff --git a/src/components/practice/KnowledgeAreaCell.tsx b/src/components/practice/KnowledgeAreaCell.tsx deleted file mode 100644 index 0f129d6..0000000 --- a/src/components/practice/KnowledgeAreaCell.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { motion } from 'framer-motion' -import clsx from 'clsx' -import type { KnowledgeArea } from '@/types/itto' -import type { CellInfo } from '@/utils/practice' -import { useLongPress } from '@/hooks/useLongPress' - -interface KnowledgeAreaCellProps { - ka: KnowledgeArea - cellInfo?: CellInfo - isAnswered: boolean - isFocused: boolean - showAnswer?: string | null - onLongPress: (cellId: string) => void - onLongPressEnd: () => void - onClick: (cellId: string) => void - tabIndex: number -} - -export function KnowledgeAreaCell({ - ka, - cellInfo, - isAnswered, - isFocused, - showAnswer, - onLongPress, - onLongPressEnd, - onClick, - tabIndex, -}: KnowledgeAreaCellProps) { - const cellId = `ka-${ka.id}` - - const longPressHandlers = useLongPress(cellId, { - onLongPress, - onLongPressEnd, - }) - - return ( - onClick(cellId)} - tabIndex={tabIndex} - role="button" - aria-label={`知识领域：${ka.name}`} - aria-describedby="hint-info" - aria-current={isFocused ? 'true' : undefined} - {...longPressHandlers} - initial={{ opacity: 0, y: 10 }} - animate={{ opacity: 1, y: 0 }} - transition={{ duration: 0.2 }} - > - {isAnswered && cellInfo && ( -
- - {ka.order} - - - {cellInfo.answer} - -
- )} - - {/* 长按显示答案 */} - {showAnswer && ( - - {showAnswer} - - )} - - ) -} diff --git a/src/components/practice/PracticeMatrix.tsx b/src/components/practice/PracticeMatrix.tsx index 8d52100..5295f56 100644 --- a/src/components/practice/PracticeMatrix.tsx +++ b/src/components/practice/PracticeMatrix.tsx @@ -1,10 +1,8 @@ import { knowledgeAreas, processGroups } from '@/data' -import { getProcessesByKaAndPg, type CellInfo } from '@/utils/practice' -import { KnowledgeAreaCell } from './KnowledgeAreaCell' +import { getProcessesByKaAndPg } from '@/utils/practice' import { ProcessCell } from './ProcessCell' interface PracticeMatrixProps { - cellSequence: CellInfo[] answeredCells: Map currentCellId: string | null showAnswerForCell: { cellId: string; answer: string; expiresAt: number } | null @@ -15,7 +13,6 @@ interface PracticeMatrixProps { } export function PracticeMatrix({ - cellSequence, answeredCells, currentCellId, showAnswerForCell, @@ -28,104 +25,90 @@ export function PracticeMatrix({ const sortedPGs = [...processGroups].sort((a, b) => a.order - b.order) return ( -
- {/* 表头 */} -
- {sortedPGs.map((pg) => ( -
- {pg.name} -
- ))} -
+
+ + {/* 表头：过程组 */} + + + + {sortedPGs.map((pg) => ( + + ))} + + - {/* 矩阵内容 */} - {sortedKAs.map((ka) => { - const kaCellId = `ka-${ka.id}` - const kaCellInfo = cellSequence.find((c) => c.id === kaCellId) + {/* 表体：知识领域 × 过程 */} + + {sortedKAs.map((ka) => { + return ( + + {/* 知识领域名称 */} + - return ( -
- {/* 知识领域格子（横跨5列） */} -
- -
+ {/* 每个过程组的单元格 */} + {sortedPGs.map((pg) => { + const processes = getProcessesByKaAndPg(ka.id, pg.id) - {/* 过程格子（5个过程组列） */} - {sortedPGs.map((pg) => { - const processes = getProcessesByKaAndPg(ka.id, pg.id) + return ( +
+ ) + })} + + ) + })} + +
+ 知识领域 / 过程组 + + {pg.name} +
+
+ + {ka.order} + + + {ka.name} + +
+ 		+
+ {processes.map((p) => { + const processCellId = `process-${p.id}` - if (processes.length === 0) { - // 空单元格：置灰，不可聚焦 - return ( - - ) - })} + return ( + + ) + })} +
+
) } diff --git a/src/pages/ProcessPracticePage.tsx b/src/pages/ProcessPracticePage.tsx index 6c02a15..238ef50 100644 --- a/src/pages/ProcessPracticePage.tsx +++ b/src/pages/ProcessPracticePage.tsx @@ -302,7 +302,6 @@ export default function ProcessPracticePage() { {/* 矩阵区域 */}
{/* 底部固定区域 */} -
+
{/* 输入区域 */} -
+
{/* 辅助信息区域 */} -
+
diff --git a/src/utils/practice.ts b/src/utils/practice.ts index 3485370..5848671 100644 --- a/src/utils/practice.ts +++ b/src/utils/practice.ts @@ -56,8 +56,8 @@ export function generateCellSequence(): CellInfo[] { id: `ka-${ka.id}`, type: 'knowledge-area', knowledgeAreaId: ka.id, - answer: ka.name.replace('项目', ''), // "项目整合管理" -> "整合管理" - normalizedAnswer: normalizeAnswer(ka.name, true), // 知识领域去除"项目" + answer: ka.name, // 保留完整名称 "项目整合管理" + normalizedAnswer: normalizeAnswer(ka.name, true), // 标准化时去除"项目" order: order++, })