feat: 数感启蒙、专注力页面重构、首页入口开发
This commit is contained in:
R524809
@@ -0,0 +1,691 @@
|
||||
import { BaseDrawService } from '../../core/draw/baseDraw';
|
||||
import ColorShapeMatchDraw from '../shared/service/colorShapeMatchDraw';
|
||||
import ShapeSymbolDraw from '../shared/service/shapeSymbolDraw';
|
||||
import PositionColoringDraw from '../shared/service/positionColoringDraw';
|
||||
import ColorPatternDraw from '../shared/service/colorPatternDraw';
|
||||
import MatchConnectDraw from '../shared/service/matchConnectDraw';
|
||||
import LineRecognitionDraw from '../shared/service/lineRecognitionDraw';
|
||||
import GridReasoningDraw, {
|
||||
type GridPosition,
|
||||
} from '../shared/service/gridReasoningDraw';
|
||||
import CodeConnectDraw from '../shared/service/codeConnectDraw';
|
||||
import DotConnectDraw from '../shared/service/dotConnectDraw';
|
||||
import GridDraw, { type GridGroup } from '../shared/service/gridDraw';
|
||||
|
||||
import {
|
||||
getRandomUniqueNumberColors,
|
||||
getNumberColors,
|
||||
getRandomNumberColor,
|
||||
NUMBER_COLORS,
|
||||
WATER_COLORS,
|
||||
} from '../../constants/colors';
|
||||
import { SHAPE_SYMBOL_SHAPES } from '../shared/shapes/shapeSymbolShapes';
|
||||
import { generateCompletePattern } from '../shared/utils/gridUtils';
|
||||
import { ALL_3X3_SHAPES } from '../shared/shapes/gridShapes3x3';
|
||||
import { ALL_5X5_SHAPES } from '../shared/shapes/gridShapes5x5';
|
||||
import { ALL_7X7_SHAPES } from '../shared/shapes/gridShapes7x7';
|
||||
import type {
|
||||
ShapeTemplate,
|
||||
GridCell,
|
||||
GridConfig,
|
||||
} from '../shared/types/gridTypes';
|
||||
|
||||
// ─── Types ───
|
||||
|
||||
export interface FocusTypeAction {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface FocusTypeConfig {
|
||||
id: string;
|
||||
title: string;
|
||||
subTitle: string;
|
||||
icon: string;
|
||||
actionsTitle?: string;
|
||||
actions?: FocusTypeAction[];
|
||||
defaultMode?: string;
|
||||
getTitle?: (mode: string) => string;
|
||||
getSubTitle?: (mode: string) => string;
|
||||
createDrawService: (
|
||||
canvas: Canvas,
|
||||
ctx: RenderingContext,
|
||||
options?: Record<string, any>,
|
||||
) => BaseDrawService;
|
||||
generateData: (mode?: string) => any;
|
||||
}
|
||||
|
||||
// ─── Helper: dotConnect ───
|
||||
|
||||
function generateNonBacktrackingSequence(length: number): number[] {
|
||||
const getPosition = (num: number): [number, number] => {
|
||||
const row = Math.floor((num - 1) / 3);
|
||||
const col = (num - 1) % 3;
|
||||
return [row, col];
|
||||
};
|
||||
|
||||
const sequence: number[] = [];
|
||||
const used = new Set<number>();
|
||||
|
||||
const startNum = Math.floor(Math.random() * 9) + 1;
|
||||
sequence.push(startNum);
|
||||
used.add(startNum);
|
||||
|
||||
let prevPos = getPosition(startNum);
|
||||
let prevPrevPos: [number, number] | null = null;
|
||||
|
||||
while (sequence.length < length) {
|
||||
const candidates: number[] = [];
|
||||
for (let num = 1; num <= 9; num++) {
|
||||
if (used.has(num)) continue;
|
||||
const currentPos = getPosition(num);
|
||||
if (
|
||||
prevPrevPos &&
|
||||
currentPos[0] === prevPrevPos[0] &&
|
||||
currentPos[1] === prevPrevPos[1]
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
candidates.push(num);
|
||||
}
|
||||
|
||||
const pool =
|
||||
candidates.length > 0
|
||||
? candidates
|
||||
: Array.from({ length: 9 }, (_, i) => i + 1).filter(
|
||||
(n) => !used.has(n),
|
||||
);
|
||||
if (pool.length === 0) break;
|
||||
|
||||
const nextNum = pool[Math.floor(Math.random() * pool.length)];
|
||||
sequence.push(nextNum);
|
||||
used.add(nextNum);
|
||||
prevPrevPos = prevPos;
|
||||
prevPos = getPosition(nextNum);
|
||||
}
|
||||
|
||||
return sequence;
|
||||
}
|
||||
|
||||
// ─── Helpers: gridReasoning ───
|
||||
|
||||
function generateRandomPositions(count: number): GridPosition[] {
|
||||
const allPositions: GridPosition[] = [];
|
||||
for (let y = 0; y < 3; y++) {
|
||||
for (let x = 0; x < 3; x++) {
|
||||
allPositions.push({ x, y });
|
||||
}
|
||||
}
|
||||
const shuffled = [...allPositions].sort(() => Math.random() - 0.5);
|
||||
return shuffled.slice(0, count);
|
||||
}
|
||||
|
||||
function unionPositions(
|
||||
pos1: GridPosition[],
|
||||
pos2: GridPosition[],
|
||||
): GridPosition[] {
|
||||
const set = new Set<string>();
|
||||
const result: GridPosition[] = [];
|
||||
for (const pos of pos1) {
|
||||
const key = `${pos.x},${pos.y}`;
|
||||
if (!set.has(key)) {
|
||||
set.add(key);
|
||||
result.push(pos);
|
||||
}
|
||||
}
|
||||
for (const pos of pos2) {
|
||||
const key = `${pos.x},${pos.y}`;
|
||||
if (!set.has(key)) {
|
||||
set.add(key);
|
||||
result.push(pos);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function subtractPositions(
|
||||
pos1: GridPosition[],
|
||||
pos2: GridPosition[],
|
||||
): GridPosition[] {
|
||||
const set2 = new Set(pos2.map((p) => `${p.x},${p.y}`));
|
||||
return pos1.filter((p) => !set2.has(`${p.x},${p.y}`));
|
||||
}
|
||||
|
||||
// ─── Helpers: gridDrawing ───
|
||||
|
||||
function generateUniqueGroups(
|
||||
allShapes: ShapeTemplate[],
|
||||
count: number,
|
||||
config: GridConfig,
|
||||
): GridGroup[] {
|
||||
const groups: GridGroup[] = [];
|
||||
const usedPatterns = new Set<string>();
|
||||
|
||||
const availableShapes = [...allShapes];
|
||||
for (let i = availableShapes.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[availableShapes[i], availableShapes[j]] = [
|
||||
availableShapes[j],
|
||||
availableShapes[i],
|
||||
];
|
||||
}
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const shapeIndex = i % availableShapes.length;
|
||||
const shape = availableShapes[shapeIndex];
|
||||
const cells = generateCompletePattern(shape, config);
|
||||
const sig = cells
|
||||
.map((c: GridCell) => `${c.x},${c.y},${c.color}`)
|
||||
.sort()
|
||||
.join('|');
|
||||
|
||||
if (
|
||||
usedPatterns.has(sig) &&
|
||||
usedPatterns.size < Math.min(count, allShapes.length)
|
||||
) {
|
||||
let found = false;
|
||||
for (const nextShape of availableShapes) {
|
||||
const nextCells = generateCompletePattern(nextShape, config);
|
||||
const nextSig = nextCells
|
||||
.map((c: GridCell) => `${c.x},${c.y},${c.color}`)
|
||||
.sort()
|
||||
.join('|');
|
||||
if (!usedPatterns.has(nextSig)) {
|
||||
groups.push({ filledCells: nextCells, emptyCells: [] });
|
||||
usedPatterns.add(nextSig);
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!found) {
|
||||
groups.push({ filledCells: cells, emptyCells: [] });
|
||||
}
|
||||
} else {
|
||||
groups.push({ filledCells: cells, emptyCells: [] });
|
||||
usedPatterns.add(sig);
|
||||
}
|
||||
}
|
||||
|
||||
return groups;
|
||||
}
|
||||
|
||||
// ─── Data Generators ───
|
||||
|
||||
function generateColorShapeMatchData() {
|
||||
const shapes = [...SHAPE_SYMBOL_SHAPES].filter((s) => s.id !== 'cross');
|
||||
const selectedShapes = shapes.sort(() => Math.random() - 0.5).slice(0, 4);
|
||||
const colors = getRandomUniqueNumberColors(4);
|
||||
|
||||
const legendItems = selectedShapes.map((shape, i) => ({
|
||||
shapeId: shape.id,
|
||||
color: colors[i],
|
||||
}));
|
||||
|
||||
const allColors: (string | null)[] = new Array(25).fill(null);
|
||||
const positions = Array.from({ length: 25 }, (_, i) => i);
|
||||
const shuffledPos = [...positions].sort(() => Math.random() - 0.5);
|
||||
for (let i = 0; i < 4; i++) allColors[shuffledPos[i]] = colors[i];
|
||||
for (let i = 4; i < 25; i++)
|
||||
allColors[shuffledPos[i]] =
|
||||
colors[Math.floor(Math.random() * colors.length)];
|
||||
|
||||
const practiceGrid: Array<Array<string | null>> = [];
|
||||
for (let row = 0; row < 5; row++) {
|
||||
practiceGrid.push(
|
||||
Array.from({ length: 5 }, (_, col) => allColors[row * 5 + col]),
|
||||
);
|
||||
}
|
||||
|
||||
return { legendItems, practiceGrid };
|
||||
}
|
||||
|
||||
function generateShapeSymbolData() {
|
||||
const shuffled = [...SHAPE_SYMBOL_SHAPES].sort(() => Math.random() - 0.5);
|
||||
const selectedShapes = shuffled.slice(0, 4);
|
||||
const symbols = ['+', '-', '×', '✓'];
|
||||
const shuffledSymbols = [...symbols].sort(() => Math.random() - 0.5);
|
||||
|
||||
const shapeColorMap = new Map<string, string>();
|
||||
const usedColors = new Set<string>();
|
||||
const legendMapping: Array<{
|
||||
shapeId: string;
|
||||
symbol: string;
|
||||
color: string;
|
||||
}> = [];
|
||||
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const shape = selectedShapes[i];
|
||||
let color: string;
|
||||
if (shapeColorMap.has(shape.id)) {
|
||||
color = shapeColorMap.get(shape.id)!;
|
||||
} else {
|
||||
do {
|
||||
color = getRandomNumberColor();
|
||||
} while (usedColors.has(color));
|
||||
shapeColorMap.set(shape.id, color);
|
||||
usedColors.add(color);
|
||||
}
|
||||
legendMapping.push({
|
||||
shapeId: shape.id,
|
||||
symbol: shuffledSymbols[i],
|
||||
color,
|
||||
});
|
||||
}
|
||||
|
||||
const practiceRows: Array<
|
||||
Array<{ shapeId: string | null; symbol: string | null }>
|
||||
> = [];
|
||||
for (let g = 0; g < 4; g++) {
|
||||
const shapeRow = Array.from({ length: 8 }, () => {
|
||||
const rs =
|
||||
selectedShapes[
|
||||
Math.floor(Math.random() * selectedShapes.length)
|
||||
];
|
||||
return { shapeId: rs.id, symbol: null };
|
||||
});
|
||||
practiceRows.push(shapeRow);
|
||||
practiceRows.push(
|
||||
Array.from({ length: 8 }, () => ({ shapeId: null, symbol: null })),
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
legendMapping,
|
||||
practiceRows,
|
||||
shapeColorMap: Object.fromEntries(shapeColorMap),
|
||||
};
|
||||
}
|
||||
|
||||
function generatePositionColoringData() {
|
||||
const allImageIndices = Array.from({ length: 33 }, (_, i) => i + 1);
|
||||
const shuffled = [...allImageIndices].sort(() => Math.random() - 0.5);
|
||||
const selectedImages = shuffled.slice(0, 9);
|
||||
|
||||
const referenceGrid: number[] = [...selectedImages];
|
||||
|
||||
const taskImageIndices = [...selectedImages].sort(
|
||||
() => Math.random() - 0.5,
|
||||
);
|
||||
const tasks = taskImageIndices.map((imageIndex) => {
|
||||
const gridIndex = referenceGrid.indexOf(imageIndex);
|
||||
return {
|
||||
imageIndex,
|
||||
position: { x: gridIndex % 3, y: Math.floor(gridIndex / 3) },
|
||||
};
|
||||
});
|
||||
|
||||
return { referenceGrid, tasks };
|
||||
}
|
||||
|
||||
function generateColorPatternData() {
|
||||
const allShapes = [...SHAPE_SYMBOL_SHAPES].sort(() => Math.random() - 0.5);
|
||||
const selectedShapes = allShapes.slice(0, 8);
|
||||
const allColors = getNumberColors();
|
||||
|
||||
const groups: Array<{ shapeId: string; colors: Array<string | null> }> = [];
|
||||
for (let gi = 0; gi < 8; gi++) {
|
||||
const shuffledColors = [...allColors].sort(() => Math.random() - 0.5);
|
||||
const selectedColors = shuffledColors.slice(0, 2);
|
||||
|
||||
const patternColors: string[] = [];
|
||||
for (let i = 0; i < 4; i++) {
|
||||
patternColors.push(
|
||||
selectedColors[
|
||||
Math.floor(Math.random() * selectedColors.length)
|
||||
],
|
||||
);
|
||||
}
|
||||
if (new Set(patternColors).size === 1) {
|
||||
const other = selectedColors.filter((c) => c !== patternColors[0]);
|
||||
if (other.length > 0) {
|
||||
patternColors[Math.floor(Math.random() * 4)] =
|
||||
other[Math.floor(Math.random() * other.length)];
|
||||
}
|
||||
}
|
||||
|
||||
groups.push({
|
||||
shapeId: selectedShapes[gi].id,
|
||||
colors: [...patternColors, ...new Array(6).fill(null)],
|
||||
});
|
||||
}
|
||||
|
||||
return { groups };
|
||||
}
|
||||
|
||||
function generateMatchConnectData() {
|
||||
const allImageIndices = Array.from({ length: 33 }, (_, i) => i + 1);
|
||||
const shuffled = [...allImageIndices].sort(() => Math.random() - 0.5);
|
||||
const selectedImages = shuffled.slice(0, 5);
|
||||
|
||||
const referenceSequence = [...selectedImages];
|
||||
const boxes = Array.from({ length: 6 }, () => ({
|
||||
imageIndices: [...selectedImages],
|
||||
}));
|
||||
|
||||
return { referenceSequence, boxes };
|
||||
}
|
||||
|
||||
function generateLineRecognitionData() {
|
||||
const LINE_TYPES: Array<{ type: string; name: string }> = [
|
||||
{ type: 'straight', name: '直线' },
|
||||
{ type: 'dashed', name: '虚线' },
|
||||
{ type: 'wavy', name: '波浪线' },
|
||||
{ type: 'zigzag', name: '锯齿线' },
|
||||
{ type: 'spiral', name: '电话线' },
|
||||
];
|
||||
|
||||
const colorKeys = Object.keys(NUMBER_COLORS)
|
||||
.map(Number)
|
||||
.filter((k) => k !== 11 && k !== 12);
|
||||
const shuffledColors = [...colorKeys].sort(() => Math.random() - 0.5);
|
||||
const selectedColorKeys = shuffledColors.slice(0, 5);
|
||||
|
||||
const shuffledLineTypes = [...LINE_TYPES].sort(() => Math.random() - 0.5);
|
||||
const referenceLines = shuffledLineTypes.map((lt, i) => ({
|
||||
type: lt.type,
|
||||
name: lt.name,
|
||||
color: NUMBER_COLORS[selectedColorKeys[i]],
|
||||
}));
|
||||
|
||||
const practiceBlocks: Array<{
|
||||
color: string;
|
||||
lineType: string;
|
||||
x: number;
|
||||
y: number;
|
||||
}> = [];
|
||||
for (let row = 0; row < 8; row++) {
|
||||
for (let col = 0; col < 2; col++) {
|
||||
const sel =
|
||||
referenceLines[
|
||||
Math.floor(Math.random() * referenceLines.length)
|
||||
];
|
||||
practiceBlocks.push({
|
||||
color: sel.color,
|
||||
lineType: sel.type,
|
||||
x: (Math.random() - 0.5) * 40,
|
||||
y: (Math.random() - 0.5) * 16,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return { referenceLines, practiceBlocks };
|
||||
}
|
||||
|
||||
function generateGridReasoningData(mode?: string) {
|
||||
const operatorType = mode || 'mixed';
|
||||
const colorKeys = Object.keys(NUMBER_COLORS).map(Number);
|
||||
const selectedColor =
|
||||
NUMBER_COLORS[colorKeys[Math.floor(Math.random() * colorKeys.length)]];
|
||||
|
||||
const rows: Array<{
|
||||
grid1: GridPosition[];
|
||||
grid2: GridPosition[];
|
||||
operator: '+' | '-';
|
||||
result: GridPosition[];
|
||||
}> = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
let operator: '+' | '-';
|
||||
if (operatorType === 'addition') operator = '+';
|
||||
else if (operatorType === 'subtraction') operator = '-';
|
||||
else operator = Math.random() > 0.5 ? '+' : '-';
|
||||
|
||||
const grid1Count =
|
||||
operator === '-'
|
||||
? Math.floor(Math.random() * 8) + 2
|
||||
: Math.floor(Math.random() * 9) + 1;
|
||||
const grid1 = generateRandomPositions(grid1Count);
|
||||
|
||||
let grid2: GridPosition[];
|
||||
let result: GridPosition[];
|
||||
if (operator === '+') {
|
||||
grid2 = generateRandomPositions(Math.floor(Math.random() * 9) + 1);
|
||||
result = unionPositions(grid1, grid2);
|
||||
} else {
|
||||
const maxG2 = grid1Count - 1;
|
||||
grid2 = generateRandomPositions(
|
||||
Math.floor(Math.random() * maxG2) + 1,
|
||||
);
|
||||
result = subtractPositions(grid1, grid2);
|
||||
}
|
||||
|
||||
rows.push({ grid1, grid2, operator, result });
|
||||
}
|
||||
|
||||
const answerOptions = rows.map((r, i) => ({
|
||||
positions: r.result,
|
||||
rowIndex: i,
|
||||
}));
|
||||
answerOptions.sort(() => Math.random() - 0.5);
|
||||
|
||||
return { rows, answerOptions, color: selectedColor };
|
||||
}
|
||||
|
||||
function generateCodeConnectData() {
|
||||
const startOptions = [1, 2, 3];
|
||||
const startNumber =
|
||||
startOptions[Math.floor(Math.random() * startOptions.length)];
|
||||
const numbers = Array.from({ length: 8 }, (_, i) => startNumber + i);
|
||||
|
||||
const colorIndices = Array.from(
|
||||
{ length: WATER_COLORS.extended24.length },
|
||||
(_, i) => i,
|
||||
);
|
||||
const shuffledIdx = [...colorIndices]
|
||||
.sort(() => Math.random() - 0.5)
|
||||
.slice(0, 8);
|
||||
|
||||
const colorMap = numbers.map((num, i) => ({
|
||||
number: num,
|
||||
color: WATER_COLORS.extended24[shuffledIdx[i]].hex,
|
||||
}));
|
||||
|
||||
const groups: Array<{
|
||||
sequence: number[];
|
||||
dots: Array<{ number: number; color: string; angle: number }>;
|
||||
}> = [];
|
||||
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const sequence = [...numbers]
|
||||
.sort(() => Math.random() - 0.5)
|
||||
.slice(0, 5);
|
||||
const dots = numbers.map((num, j) => {
|
||||
const angle = (j / 8) * Math.PI * 2 - Math.PI / 2;
|
||||
const info = colorMap.find((m) => m.number === num);
|
||||
return { number: num, color: info?.color || '#000', angle };
|
||||
});
|
||||
groups.push({ sequence, dots });
|
||||
}
|
||||
|
||||
return { colorMap, startNumber, groups };
|
||||
}
|
||||
|
||||
function generateDotConnectData() {
|
||||
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||||
const colors = getRandomUniqueNumberColors(9);
|
||||
const colorMap = numbers.map((num, i) => ({
|
||||
number: num,
|
||||
color: colors[i],
|
||||
}));
|
||||
|
||||
const groups = Array.from({ length: 9 }, () => {
|
||||
const seqLen = Math.floor(Math.random() * 3) + 4;
|
||||
return { sequence: generateNonBacktrackingSequence(seqLen) };
|
||||
});
|
||||
|
||||
return { colorMap, groups };
|
||||
}
|
||||
|
||||
function generateGridDrawingData(mode?: string) {
|
||||
const m = mode || '3x3';
|
||||
let allShapes: ShapeTemplate[];
|
||||
let config: GridConfig;
|
||||
let groupsPerRow: number;
|
||||
let totalRows: number;
|
||||
|
||||
if (m === '5x5') {
|
||||
allShapes = ALL_5X5_SHAPES;
|
||||
config = { rows: 5, cols: 5 };
|
||||
groupsPerRow = 2;
|
||||
totalRows = 4;
|
||||
} else if (m === '7x7') {
|
||||
allShapes = ALL_7X7_SHAPES;
|
||||
config = { rows: 7, cols: 7 };
|
||||
groupsPerRow = 1;
|
||||
totalRows = 2;
|
||||
} else {
|
||||
allShapes = ALL_3X3_SHAPES;
|
||||
config = { rows: 3, cols: 3 };
|
||||
groupsPerRow = 2;
|
||||
totalRows = 4;
|
||||
}
|
||||
|
||||
const totalGroups = groupsPerRow * totalRows;
|
||||
const groups = generateUniqueGroups(allShapes, totalGroups, config);
|
||||
|
||||
return { config, groups, groupsPerRow, totalRows };
|
||||
}
|
||||
|
||||
// ─── Registry ───
|
||||
|
||||
const GRID_DRAWING_SUBTITLES: Record<string, string> = {
|
||||
'3x3': '简单有趣，培养专注力',
|
||||
'5x5': '创意挑战，提升观察力',
|
||||
'7x7': '大师挑战，锻炼耐心',
|
||||
};
|
||||
|
||||
export const FOCUS_TYPE_CONFIGS: FocusTypeConfig[] = [
|
||||
{
|
||||
id: 'color-shape-match',
|
||||
title: '根据颜色画图形',
|
||||
subTitle: '根据颜色画出对应的图形',
|
||||
icon: '🎯',
|
||||
createDrawService: (canvas, ctx, opts) =>
|
||||
new ColorShapeMatchDraw(canvas, ctx, opts),
|
||||
generateData: generateColorShapeMatchData,
|
||||
},
|
||||
{
|
||||
id: 'shape-symbol',
|
||||
title: '图形符号配对',
|
||||
subTitle: '根据图形画对应的符号',
|
||||
icon: '🔗',
|
||||
createDrawService: (canvas, ctx, opts) =>
|
||||
new ShapeSymbolDraw(canvas, ctx, opts),
|
||||
generateData: generateShapeSymbolData,
|
||||
},
|
||||
{
|
||||
id: 'position-coloring',
|
||||
title: '方位涂涂乐',
|
||||
subTitle: '观察卡片位置，在对应的方格中涂上颜色',
|
||||
icon: '📍',
|
||||
createDrawService: (canvas, ctx, opts) =>
|
||||
new PositionColoringDraw(canvas, ctx, opts),
|
||||
generateData: generatePositionColoringData,
|
||||
},
|
||||
{
|
||||
id: 'color-pattern',
|
||||
title: '颜色找规律',
|
||||
subTitle: '观察颜色规律，在空白图形中涂上颜色',
|
||||
icon: '🎨',
|
||||
createDrawService: (canvas, ctx, opts) =>
|
||||
new ColorPatternDraw(canvas, ctx, opts),
|
||||
generateData: generateColorPatternData,
|
||||
},
|
||||
{
|
||||
id: 'match-connect',
|
||||
title: '连连看',
|
||||
subTitle: '快来根据物品连一连吧!',
|
||||
icon: '🔗',
|
||||
createDrawService: (canvas, ctx, opts) =>
|
||||
new MatchConnectDraw(canvas, ctx, opts),
|
||||
generateData: generateMatchConnectData,
|
||||
},
|
||||
{
|
||||
id: 'line-recognition',
|
||||
title: '线条识别',
|
||||
subTitle: '认识不同线条，画出颜色对应的线条',
|
||||
icon: '📏',
|
||||
createDrawService: (canvas, ctx, opts) =>
|
||||
new LineRecognitionDraw(canvas, ctx, opts),
|
||||
generateData: generateLineRecognitionData,
|
||||
},
|
||||
{
|
||||
id: 'grid-reasoning',
|
||||
title: '方格推理',
|
||||
subTitle: '仔细观察，推理出合并方格并连线',
|
||||
icon: '🧩',
|
||||
actionsTitle: '选择运算',
|
||||
actions: [
|
||||
{ value: 'addition', label: '加法运算' },
|
||||
{ value: 'subtraction', label: '减法运算' },
|
||||
{ value: 'mixed', label: '混合运算' },
|
||||
],
|
||||
defaultMode: 'mixed',
|
||||
createDrawService: (canvas, ctx, opts) =>
|
||||
new GridReasoningDraw(canvas, ctx, opts),
|
||||
generateData: generateGridReasoningData,
|
||||
},
|
||||
{
|
||||
id: 'code-connect',
|
||||
title: '译码连线',
|
||||
subTitle: '按照数字顺序，将数字对应的颜色连起来',
|
||||
icon: '🔢',
|
||||
createDrawService: (canvas, ctx, opts) =>
|
||||
new CodeConnectDraw(canvas, ctx, opts),
|
||||
generateData: generateCodeConnectData,
|
||||
},
|
||||
{
|
||||
id: 'dot-connect',
|
||||
title: '数字点连线',
|
||||
subTitle: '按数字顺序连点成图',
|
||||
icon: '🔗',
|
||||
createDrawService: (canvas, ctx, opts) =>
|
||||
new DotConnectDraw(canvas, ctx, opts),
|
||||
generateData: generateDotConnectData,
|
||||
},
|
||||
{
|
||||
id: 'grid-drawing',
|
||||
title: '格子仿画',
|
||||
subTitle: '在网格中填充颜色，形成各种形状',
|
||||
icon: '🎨',
|
||||
actionsTitle: '选择难度',
|
||||
actions: [
|
||||
{ value: '3x3', label: '3×3' },
|
||||
{ value: '5x5', label: '5×5' },
|
||||
{ value: '7x7', label: '7×7' },
|
||||
],
|
||||
defaultMode: '3x3',
|
||||
getTitle: (mode: string) => {
|
||||
const labels: Record<string, string> = {
|
||||
'3x3': '3×3',
|
||||
'5x5': '5×5',
|
||||
'7x7': '7×7',
|
||||
};
|
||||
return `格子仿画 ${labels[mode] || '3×3'}`;
|
||||
},
|
||||
getSubTitle: (mode: string) =>
|
||||
GRID_DRAWING_SUBTITLES[mode] || GRID_DRAWING_SUBTITLES['3x3'],
|
||||
createDrawService: (canvas, ctx, opts) =>
|
||||
new GridDraw(canvas, ctx, opts),
|
||||
generateData: generateGridDrawingData,
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 通过路由 ID 查找类型配置
|
||||
* 处理 grid-drawing-3x3 → grid-drawing + mode=3x3 等别名
|
||||
*/
|
||||
export function findTypeByRouteId(
|
||||
routeId: string,
|
||||
): { typeConfig: FocusTypeConfig; mode?: string } | null {
|
||||
const direct = FOCUS_TYPE_CONFIGS.find((t) => t.id === routeId);
|
||||
if (direct) return { typeConfig: direct };
|
||||
|
||||
if (routeId.startsWith('grid-drawing-')) {
|
||||
const mode = routeId.replace('grid-drawing-', '');
|
||||
const cfg = FOCUS_TYPE_CONFIGS.find((t) => t.id === 'grid-drawing');
|
||||
if (cfg) return { typeConfig: cfg, mode };
|
||||
}
|
||||
|
||||
return { typeConfig: FOCUS_TYPE_CONFIGS[0] };
|
||||
}
|
||||
Reference in New Issue
Block a user