feat:2.5.0初始化专注启蒙项目

This commit is contained in:
R524809
2025-12-15 17:00:06 +08:00
parent 62ba977a45
commit fefe437f0f
29 changed files with 3465 additions and 700 deletions
@@ -4,7 +4,7 @@
*/
import { createPage, PageCommonMethodsConfig } from '../../../base/pageMixin';
import { FOCUS_FUNCTION_TYPES } from '../../../constants/focusFunctions';
/**
* 专注力模块的函数类型定义
*/
@@ -14,24 +14,6 @@ export interface FocusFunctionType {
desc: string;
}
/**
* 专注力模块的函数列表
* TODO: 根据实际需求补充完整的功能列表
*/
export const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
{
id: 'grid-drawing',
title: '格子仿画',
desc: '在格子中绘制颜色,形成各种形状',
},
// 可以在这里添加更多专注力相关的功能
// {
// id: 'pattern-memory',
// title: '图案记忆',
// desc: '记住并重现图案',
// },
];
/**
* 专注力模块的分享配置
*/
@@ -84,29 +84,54 @@ class GridDraw extends BaseDrawService {
canvasWidth: number;
startY: number;
}): Promise<void> {
const { ctx, gridData, canvasWidth, startY } = params;
const { ctx, gridData, canvasWidth } = params;
let { startY } = params;
const { config, groups, groupsPerRow, totalRows } = gridData;
const { rows, cols } = config;
startY = startY + 30;
// 计算网格尺寸
const margin = 40; // 左右边距
const groupSpacing = 20; // 之间的间距
const rowSpacing = 30; // 之间的间距
const dividerWidth = 2; // 分割线宽度
const gridSpacing = 20; // 填充网格和空网格之间的间距
const groupSpacing = 40; // 两组之间的间距(一行中两组格子仿画中间)
const rowSpacing = 50; // 行之间的间距
const dividerWidth = 1; // 分割线宽度
// 计算每组网格的尺寸
const availableWidth = canvasWidth - margin * 2;
const totalGroupsPerRow = groupsPerRow * 2; // 每组包含填充和空两个网格
const groupWidth =
const totalGridsPerRow = groupsPerRow * 2; // 每组包含填充和空两个网格
const gridWidth =
(availableWidth -
(groupsPerRow - 1) * dividerWidth -
(totalGroupsPerRow - 1) * groupSpacing) /
totalGroupsPerRow;
const cellSize = Math.floor(groupWidth / cols);
const gridWidth = cellSize * cols;
(groupsPerRow - 1) * groupSpacing -
(totalGridsPerRow - 1) * gridSpacing) /
totalGridsPerRow;
const cellSize = Math.floor(gridWidth / cols);
const actualGridWidth = cellSize * cols;
const gridHeight = cellSize * rows;
let currentY = startY + 30; // 顶部间距
const firstRowStartY = startY + 30; // 顶部间距
const lastRowEndY =
firstRowStartY +
totalRows * gridHeight +
(totalRows - 1) * rowSpacing;
// 计算第一行的起始X位置(居中)
const rowTotalWidth =
totalGridsPerRow * actualGridWidth +
(totalGridsPerRow - 1) * gridSpacing +
(groupsPerRow - 1) * groupSpacing;
const rowStartX = margin + (availableWidth - rowTotalWidth) / 2;
// 计算中间垂直分割线的X位置(两组之间的位置)
const middleDividerX =
groupsPerRow > 1
? rowStartX +
actualGridWidth +
gridSpacing +
actualGridWidth +
groupSpacing / 2
: null;
// 遍历每一行
for (let rowIndex = 0; rowIndex < totalRows; rowIndex++) {
@@ -116,13 +141,8 @@ class GridDraw extends BaseDrawService {
rowStartIndex + groupsPerRow,
);
// 计算当前行的起始X位置(居中)
const rowTotalWidth =
totalGroupsPerRow * gridWidth +
(totalGroupsPerRow - 1) * groupSpacing +
(groupsPerRow - 1) * dividerWidth;
const rowStartX = margin + (availableWidth - rowTotalWidth) / 2;
const currentY =
firstRowStartY + rowIndex * (gridHeight + rowSpacing);
let currentX = rowStartX;
// 遍历当前行的每一组
@@ -138,7 +158,7 @@ class GridDraw extends BaseDrawService {
ctx,
gridStartX: currentX,
gridStartY: currentY,
gridWidth,
gridWidth: actualGridWidth,
gridHeight,
cellSize,
rows,
@@ -147,14 +167,14 @@ class GridDraw extends BaseDrawService {
config,
});
currentX += gridWidth + groupSpacing;
currentX += actualGridWidth + gridSpacing;
// 绘制空的网格(右侧)
this.drawSingleGrid({
ctx,
gridStartX: currentX,
gridStartY: currentY,
gridWidth,
gridWidth: actualGridWidth,
gridHeight,
cellSize,
rows,
@@ -163,32 +183,39 @@ class GridDraw extends BaseDrawService {
config,
});
currentX += gridWidth;
currentX += actualGridWidth;
// 如果不是最后一组,绘制垂直分割线
// 如果不是最后一组,添加组间距
if (groupIndex < rowGroups.length - 1) {
ctx.strokeStyle = '#000000';
ctx.lineWidth = dividerWidth;
ctx.beginPath();
ctx.moveTo(currentX, currentY);
ctx.lineTo(currentX, currentY + gridHeight);
ctx.stroke();
currentX += dividerWidth;
currentX += groupSpacing;
}
}
currentY += gridHeight + rowSpacing;
// 如果不是最后一行,绘制水平分割线
if (rowIndex < totalRows - 1) {
ctx.strokeStyle = '#000000';
const lineY = currentY + gridHeight + rowSpacing / 2;
ctx.strokeStyle = '#999';
ctx.lineWidth = dividerWidth;
ctx.setLineDash([4, 4]); // 虚线
ctx.beginPath();
ctx.moveTo(margin, currentY - rowSpacing / 2);
ctx.lineTo(canvasWidth - margin, currentY - rowSpacing / 2);
ctx.moveTo(margin, lineY);
ctx.lineTo(canvasWidth - margin, lineY);
ctx.stroke();
ctx.setLineDash([]); // 重置为实线
}
}
// 绘制中间垂直分割线(贯穿所有行)
if (middleDividerX !== null && groupsPerRow > 1) {
ctx.strokeStyle = '#999';
ctx.lineWidth = dividerWidth;
ctx.setLineDash([4, 4]); // 虚线
ctx.beginPath();
ctx.moveTo(middleDividerX, firstRowStartY);
ctx.lineTo(middleDividerX, lastRowEndY);
ctx.stroke();
ctx.setLineDash([]); // 重置为实线
}
}
/**
@@ -220,7 +247,7 @@ class GridDraw extends BaseDrawService {
} = params;
// 绘制网格线
ctx.strokeStyle = config.gridLineColor || '#000000';
ctx.strokeStyle = config.gridLineColor || '#999';
ctx.lineWidth = config.gridLineWidth || 1;
ctx.setLineDash([]); // 实线
@@ -3,109 +3,686 @@
* 适用于入门级,低龄儿童
*/
import { GridCell, ShapeTemplate } from '../types/gridTypes';
import { ShapeTemplate } from '../types/gridTypes';
// ==================== 3x3 形状模板 ====================
/** 简单十字形 */
export const CROSS_3X3: ShapeTemplate = {
id: 'cross-3x3-001',
name: '十字形',
recommendedSize: { rows: 3, cols: 3 },
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#FFFF00' }, // 顶部
{ x: 0, y: 1, color: '#FFFF00' }, // 左侧
{ x: 1, y: 1, color: '#FFFF00' }, // 中心
{ x: 2, y: 1, color: '#FFFF00' }, // 右侧
{ x: 1, y: 2, color: '#FFFF00' }, // 底部
],
};
/** L形 */
export const L_SHAPE_3X3: ShapeTemplate = {
id: 'l-3x3-001',
name: 'L形',
recommendedSize: { rows: 3, cols: 3 },
category: 'geometric',
difficulty: 1,
supportSymmetry: false,
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#0000FF' },
{ x: 0, y: 1, color: '#0000FF' },
{ x: 0, y: 2, color: '#0000FF' },
{ x: 1, y: 2, color: '#0000FF' },
{ x: 2, y: 2, color: '#0000FF' },
],
};
/** 对角线 */
export const DIAGONAL_3X3: ShapeTemplate = {
id: 'diagonal-3x3-001',
name: '对角线',
recommendedSize: { rows: 3, cols: 3 },
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#FF0000' },
{ x: 1, y: 1, color: '#FF0000' },
{ x: 2, y: 2, color: '#FF0000' },
],
};
/** 小房子 */
export const HOUSE_3X3: ShapeTemplate = {
id: 'house-3x3-001',
name: '小房子',
recommendedSize: { rows: 3, cols: 3 },
category: 'object',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#FF0000' }, // 屋顶
{ x: 0, y: 1, color: '#FFFF00' }, // 左侧墙
{ x: 1, y: 1, color: '#FFFF00' }, // 中间墙
{ x: 2, y: 1, color: '#FFFF00' }, // 右侧墙
{ x: 1, y: 2, color: '#8B4513' }, // 门
],
};
/** 小星星 */
export const STAR_3X3: ShapeTemplate = {
id: 'star-3x3-001',
name: '小星星',
recommendedSize: { rows: 3, cols: 3 },
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#FFD700' }, // 顶部
{ x: 0, y: 1, color: '#FFD700' },
{ x: 1, y: 1, color: '#FFD700' }, // 中心
{ x: 2, y: 1, color: '#FFD700' },
{ x: 1, y: 2, color: '#FFD700' }, // 底部
],
};
/** 所有 3x3 形状模板 */
/** 所有 3x3 形状模板 总共39个形状模板 */
export const ALL_3X3_SHAPES: ShapeTemplate[] = [
CROSS_3X3,
L_SHAPE_3X3,
DIAGONAL_3X3,
HOUSE_3X3,
STAR_3X3,
/** 简单十字形 */
{
id: 'cross-3x3-001',
name: '十字形',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#FFE176' }, // 顶部 - 黄色
{ x: 0, y: 1, color: '#F9A857' }, // 左侧 - 橙色
{ x: 1, y: 1, color: '#ED6D50' }, // 中心 - 红色
{ x: 2, y: 1, color: '#F9A857' }, // 右侧 - 橙色
{ x: 1, y: 2, color: '#FFE176' }, // 底部 - 黄色
],
},
/** L形 */
{
id: 'l-3x3-001',
name: 'L形',
category: 'geometric',
difficulty: 1,
supportSymmetry: false,
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#79A7ED' }, // 蓝色
{ x: 0, y: 1, color: '#6CD2EA' }, // 浅蓝
{ x: 0, y: 2, color: '#53D1B6' }, // 青色
{ x: 1, y: 2, color: '#B2D94B' }, // 绿色
{ x: 2, y: 2, color: '#FFE176' }, // 黄色
],
},
/** 对角线 */
{
id: 'diagonal-3x3-001',
name: '对角线',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#ED6D50' }, // 红色
{ x: 1, y: 1, color: '#F9A857' }, // 橙色
{ x: 2, y: 2, color: '#FFE176' }, // 黄色
],
},
/** 反向对角线 */
{
id: 'reverse-diagonal-3x3-001',
name: '反向对角线',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 0, y: 2, color: '#F2A4C0' },
{ x: 1, y: 1, color: '#79A7ED' },
{ x: 2, y: 0, color: '#B2D94B' },
],
},
/** 小房子 */
{
id: 'house-3x3-001',
name: '小房子',
category: 'object',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#ED6D50' }, // 屋顶
{ x: 0, y: 1, color: '#FFE176' }, // 左侧墙
{ x: 1, y: 1, color: '#FFE176' }, // 中间墙
{ x: 2, y: 1, color: '#FFE176' }, // 右侧墙
{ x: 1, y: 2, color: '#BC8F71' }, // 门
],
},
/** 小星星 */
{
id: 'star-3x3-001',
name: '小星星',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#FFE176' }, // 顶部 - 黄色
{ x: 0, y: 1, color: '#F9A857' }, // 左侧 - 橙色
{ x: 1, y: 1, color: '#ED6D50' }, // 中心 - 红色
{ x: 2, y: 1, color: '#F9A857' }, // 右侧 - 橙色
{ x: 1, y: 2, color: '#FFE176' }, // 底部 - 黄色
],
},
/** T形 */
{
id: 't-3x3-001',
name: 'T形',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#53D1B6' }, // 青色
{ x: 1, y: 0, color: '#6CD2EA' }, // 浅蓝
{ x: 2, y: 0, color: '#53D1B6' }, // 青色
{ x: 1, y: 1, color: '#79A7ED' }, // 蓝色
{ x: 1, y: 2, color: '#6CD2EA' }, // 浅蓝
],
},
/** 倒T形 */
{
id: 'reverse-t-3x3-001',
name: '倒T形',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 0, y: 2, color: '#ED6D50' },
{ x: 1, y: 2, color: '#F9A857' },
{ x: 2, y: 2, color: '#FFE176' },
{ x: 1, y: 1, color: '#B2D94B' },
{ x: 1, y: 0, color: '#79A7ED' },
],
},
/** 三角形 */
{
id: 'triangle-3x3-001',
name: '三角形',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#FFE176' }, // 顶部 - 黄色
{ x: 0, y: 1, color: '#F9A857' }, // 左侧 - 橙色
{ x: 1, y: 1, color: '#ED6D50' }, // 中心 - 红色
{ x: 2, y: 1, color: '#F9A857' }, // 右侧 - 橙色
{ x: 0, y: 2, color: '#F2A4C0' }, // 左下 - 粉色
{ x: 1, y: 2, color: '#ED6D50' }, // 中下 - 红色
{ x: 2, y: 2, color: '#F2A4C0' }, // 右下 - 粉色
],
},
/** 正方形 */
{
id: 'square-3x3-001',
name: '正方形',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#9C98DE' }, // 紫色
{ x: 1, y: 0, color: '#F2A4C0' }, // 粉色
{ x: 0, y: 1, color: '#F2A4C0' }, // 粉色
{ x: 1, y: 1, color: '#9C98DE' }, // 紫色
],
},
/** 向上箭头 */
{
id: 'arrow-up-3x3-001',
name: '向上箭头',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#6CD2EA' }, // 箭头顶部 - 浅蓝
{ x: 0, y: 1, color: '#53D1B6' }, // 左侧 - 青色
{ x: 1, y: 1, color: '#79A7ED' }, // 中心 - 蓝色
{ x: 2, y: 1, color: '#53D1B6' }, // 右侧 - 青色
{ x: 1, y: 2, color: '#6CD2EA' }, // 箭头杆 - 浅蓝
],
},
/** 数字7 */
{
id: 'number-7-3x3-001',
name: '数字7',
category: 'geometric',
difficulty: 1,
supportSymmetry: false,
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#FC9B6C' }, // 橙色
{ x: 1, y: 0, color: '#F9A857' }, // 浅橙
{ x: 2, y: 0, color: '#ED6D50' }, // 红色
{ x: 2, y: 1, color: '#F9A857' }, // 浅橙
{ x: 1, y: 2, color: '#ED6D50' }, // 红色
{ x: 2, y: 2, color: '#FC9B6C' }, // 橙色
],
},
/** 边框 */
{
id: 'frame-3x3-001',
name: '边框',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#B2D94B' }, // 绿色
{ x: 1, y: 0, color: '#53D1B6' }, // 青色
{ x: 2, y: 0, color: '#B2D94B' }, // 绿色
{ x: 0, y: 1, color: '#6CD2EA' }, // 浅蓝
{ x: 2, y: 1, color: '#6CD2EA' }, // 浅蓝
{ x: 0, y: 2, color: '#B2D94B' }, // 绿色
{ x: 1, y: 2, color: '#53D1B6' }, // 青色
{ x: 2, y: 2, color: '#B2D94B' }, // 绿色
],
},
/** 加号(大) */
{
id: 'plus-3x3-001',
name: '加号',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#F2A4C0' }, // 粉色
{ x: 0, y: 1, color: '#ED6D50' }, // 红色
{ x: 1, y: 1, color: '#F9A857' }, // 橙色
{ x: 2, y: 1, color: '#ED6D50' }, // 红色
{ x: 1, y: 2, color: '#F2A4C0' }, // 粉色
],
},
/** 点阵 */
{
id: 'dots-3x3-001',
name: '点阵',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#79A7ED' }, // 蓝色
{ x: 2, y: 0, color: '#6CD2EA' }, // 浅蓝
{ x: 1, y: 1, color: '#53D1B6' }, // 青色
{ x: 0, y: 2, color: '#6CD2EA' }, // 浅蓝
{ x: 2, y: 2, color: '#79A7ED' }, // 蓝色
],
},
/** 向下箭头 */
{
id: 'arrow-down-3x3-001',
name: '向下箭头',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#6CD2EA' }, // 箭头杆 - 浅蓝
{ x: 0, y: 1, color: '#53D1B6' }, // 左侧 - 青色
{ x: 1, y: 1, color: '#79A7ED' }, // 中心 - 蓝色
{ x: 2, y: 1, color: '#53D1B6' }, // 右侧 - 青色
{ x: 1, y: 2, color: '#6CD2EA' }, // 箭头底部 - 浅蓝
],
},
/** 菱形 */
{
id: 'diamond-3x3-001',
name: '菱形',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#FFE176' }, // 顶部 - 黄色
{ x: 0, y: 1, color: '#F9A857' }, // 左侧 - 橙色
{ x: 1, y: 1, color: '#ED6D50' }, // 中心 - 红色
{ x: 2, y: 1, color: '#F9A857' }, // 右侧 - 橙色
{ x: 1, y: 2, color: '#FFE176' }, // 底部 - 黄色
],
},
/** U形 */
{
id: 'u-3x3-001',
name: 'U形',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#53D1B6' }, // 青色
{ x: 2, y: 0, color: '#53D1B6' }, // 青色
{ x: 0, y: 1, color: '#6CD2EA' }, // 浅蓝
{ x: 2, y: 1, color: '#6CD2EA' }, // 浅蓝
{ x: 0, y: 2, color: '#79A7ED' }, // 蓝色
{ x: 1, y: 2, color: '#B2D94B' }, // 绿色
{ x: 2, y: 2, color: '#79A7ED' }, // 蓝色
],
},
/** C形 */
{
id: 'c-3x3-001',
name: 'C形',
category: 'geometric',
difficulty: 1,
supportSymmetry: false,
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#ED6D50' }, // 红色
{ x: 1, y: 0, color: '#F9A857' }, // 橙色
{ x: 0, y: 1, color: '#FFE176' }, // 黄色
{ x: 0, y: 2, color: '#F9A857' }, // 橙色
{ x: 1, y: 2, color: '#ED6D50' }, // 红色
],
},
/** 倒三角形 */
{
id: 'inverted-triangle-3x3-001',
name: '倒三角形',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#B2D94B' }, // 绿色
{ x: 1, y: 0, color: '#53D1B6' }, // 青色
{ x: 2, y: 0, color: '#B2D94B' }, // 绿色
{ x: 0, y: 1, color: '#6CD2EA' }, // 浅蓝
{ x: 1, y: 1, color: '#79A7ED' }, // 蓝色
{ x: 2, y: 1, color: '#6CD2EA' }, // 浅蓝
{ x: 1, y: 2, color: '#53D1B6' }, // 底部 - 青色
],
},
/** 数字1 */
{
id: 'number-1-3x3-001',
name: '数字1',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#FC9B6C' }, // 橙色
{ x: 1, y: 1, color: '#F9A857' }, // 浅橙
{ x: 1, y: 2, color: '#ED6D50' }, // 红色
],
},
/** 数字4 */
{
id: 'number-4-3x3-001',
name: '数字4',
category: 'geometric',
difficulty: 1,
supportSymmetry: false,
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#F2A4C0' }, // 粉色
{ x: 1, y: 0, color: '#ED6D50' }, // 红色
{ x: 0, y: 1, color: '#F9A857' }, // 橙色
{ x: 1, y: 1, color: '#FFE176' }, // 黄色
{ x: 2, y: 1, color: '#F2A4C0' }, // 粉色
{ x: 2, y: 2, color: '#ED6D50' }, // 红色
],
},
/** 圆形(3x3近似) */
{
id: 'circle-3x3-001',
name: '圆形',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#9C98DE' }, // 紫色
{ x: 0, y: 1, color: '#F2A4C0' }, // 粉色
{ x: 2, y: 1, color: '#F2A4C0' }, // 粉色
{ x: 1, y: 2, color: '#9C98DE' }, // 紫色
],
},
/** 数字0 */
{
id: 'number-0-3x3-001',
name: '数字0',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#FFE176' }, // 黄色
{ x: 1, y: 0, color: '#F9A857' }, // 橙色
{ x: 2, y: 0, color: '#FFE176' }, // 黄色
{ x: 0, y: 1, color: '#F9A857' }, // 橙色
{ x: 2, y: 1, color: '#F9A857' }, // 橙色
{ x: 0, y: 2, color: '#FFE176' }, // 黄色
{ x: 1, y: 2, color: '#F9A857' }, // 橙色
{ x: 2, y: 2, color: '#FFE176' }, // 黄色
],
},
/** 数字8 */
{
id: 'number-8-3x3-001',
name: '数字8',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#79A7ED' }, // 蓝色
{ x: 1, y: 0, color: '#6CD2EA' }, // 浅蓝
{ x: 2, y: 0, color: '#79A7ED' }, // 蓝色
{ x: 0, y: 1, color: '#53D1B6' }, // 青色
{ x: 1, y: 1, color: '#B2D94B' }, // 绿色
{ x: 2, y: 1, color: '#53D1B6' }, // 青色
{ x: 0, y: 2, color: '#79A7ED' }, // 蓝色
{ x: 1, y: 2, color: '#6CD2EA' }, // 浅蓝
{ x: 2, y: 2, color: '#79A7ED' }, // 蓝色
],
},
/** 多色十字形 */
{
id: 'colorful-cross-3x3-001',
name: '多色十字形',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#FFE176' }, // 顶部 - 黄色
{ x: 0, y: 1, color: '#F9A857' }, // 左侧 - 橙色
{ x: 1, y: 1, color: '#ED6D50' }, // 中心 - 红色
{ x: 2, y: 1, color: '#F9A857' }, // 右侧 - 橙色
{ x: 1, y: 2, color: '#FFE176' }, // 底部 - 黄色
],
},
/** 多色L形 */
{
id: 'colorful-l-3x3-001',
name: '多色L形',
category: 'geometric',
difficulty: 1,
supportSymmetry: false,
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#79A7ED' }, // 蓝色
{ x: 0, y: 1, color: '#6CD2EA' }, // 浅蓝
{ x: 0, y: 2, color: '#53D1B6' }, // 青色
{ x: 1, y: 2, color: '#B2D94B' }, // 绿色
{ x: 2, y: 2, color: '#FFE176' }, // 黄色
],
},
/** 多色星星 */
{
id: 'colorful-star-3x3-001',
name: '多色星星',
category: 'geometric',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#FFE176' }, // 顶部 - 黄色
{ x: 0, y: 1, color: '#F9A857' }, // 左侧 - 橙色
{ x: 1, y: 1, color: '#ED6D50' }, // 中心 - 红色
{ x: 2, y: 1, color: '#F9A857' }, // 右侧 - 橙色
{ x: 1, y: 2, color: '#FFE176' }, // 底部 - 黄色
],
},
/** 多色小房子 */
{
id: 'colorful-house-3x3-001',
name: '多色小房子',
category: 'object',
difficulty: 1,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#ED6D50' }, // 屋顶 - 红色
{ x: 0, y: 1, color: '#FFE176' }, // 左侧墙 - 黄色
{ x: 1, y: 1, color: '#F9A857' }, // 中间墙 - 橙色
{ x: 2, y: 1, color: '#FFE176' }, // 右侧墙 - 黄色
{ x: 1, y: 2, color: '#BC8F71' }, // 门 - 棕色
],
},
/** 数字2 */
{
id: 'number-2-3x3-001',
name: '数字2',
category: 'geometric',
difficulty: 2,
supportSymmetry: false,
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#79A7ED' }, // 蓝色
{ x: 1, y: 0, color: '#6CD2EA' }, // 浅蓝
{ x: 2, y: 0, color: '#53D1B6' }, // 青色
{ x: 2, y: 1, color: '#6CD2EA' }, // 浅蓝
{ x: 0, y: 2, color: '#53D1B6' }, // 青色
{ x: 1, y: 2, color: '#6CD2EA' }, // 浅蓝
{ x: 2, y: 2, color: '#79A7ED' }, // 蓝色
],
},
/** 数字3 */
{
id: 'number-3-3x3-001',
name: '数字3',
category: 'geometric',
difficulty: 2,
supportSymmetry: false,
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#6CD2EA' }, // 浅蓝
{ x: 1, y: 0, color: '#53D1B6' }, // 青色
{ x: 2, y: 0, color: '#79A7ED' }, // 蓝色
{ x: 2, y: 1, color: '#53D1B6' }, // 青色
{ x: 0, y: 2, color: '#79A7ED' }, // 蓝色
{ x: 1, y: 2, color: '#53D1B6' }, // 青色
{ x: 2, y: 2, color: '#6CD2EA' }, // 浅蓝
],
},
/** 数字5 */
{
id: 'number-5-3x3-001',
name: '数字5',
category: 'geometric',
difficulty: 2,
supportSymmetry: false,
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#53D1B6' }, // 青色
{ x: 1, y: 0, color: '#6CD2EA' }, // 浅蓝
{ x: 2, y: 0, color: '#79A7ED' }, // 蓝色
{ x: 0, y: 1, color: '#6CD2EA' }, // 浅蓝
{ x: 0, y: 2, color: '#79A7ED' }, // 蓝色
{ x: 1, y: 2, color: '#6CD2EA' }, // 浅蓝
{ x: 2, y: 2, color: '#53D1B6' }, // 青色
],
},
/** 数字6 */
{
id: 'number-6-3x3-001',
name: '数字6',
category: 'geometric',
difficulty: 2,
supportSymmetry: false,
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#B2D94B' }, // 绿色
{ x: 1, y: 0, color: '#53D1B6' }, // 青色
{ x: 0, y: 1, color: '#6CD2EA' }, // 浅蓝
{ x: 0, y: 2, color: '#79A7ED' }, // 蓝色
{ x: 1, y: 2, color: '#6CD2EA' }, // 浅蓝
{ x: 2, y: 2, color: '#53D1B6' }, // 青色
],
},
/** 数字9 */
{
id: 'number-9-3x3-001',
name: '数字9',
category: 'geometric',
difficulty: 2,
supportSymmetry: false,
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#F2A4C0' }, // 粉色
{ x: 1, y: 0, color: '#ED6D50' }, // 红色
{ x: 2, y: 0, color: '#F9A857' }, // 橙色
{ x: 0, y: 1, color: '#ED6D50' }, // 红色
{ x: 2, y: 1, color: '#FFE176' }, // 黄色
{ x: 1, y: 2, color: '#F9A857' }, // 橙色
{ x: 2, y: 2, color: '#ED6D50' }, // 红色
],
},
/** 字母A */
{
id: 'letter-a-3x3-001',
name: '字母A',
category: 'geometric',
difficulty: 2,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 1, y: 0, color: '#FFE176' }, // 黄色
{ x: 0, y: 1, color: '#F9A857' }, // 橙色
{ x: 1, y: 1, color: '#ED6D50' }, // 红色
{ x: 2, y: 1, color: '#F9A857' }, // 橙色
{ x: 0, y: 2, color: '#FFE176' }, // 黄色
{ x: 2, y: 2, color: '#FFE176' }, // 黄色
],
},
/** 字母H */
{
id: 'letter-h-3x3-001',
name: '字母H',
category: 'geometric',
difficulty: 2,
supportSymmetry: true,
symmetryType: 'vertical',
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#F9A857' }, // 橙色
{ x: 2, y: 0, color: '#F9A857' }, // 橙色
{ x: 0, y: 1, color: '#ED6D50' }, // 红色
{ x: 1, y: 1, color: '#FFE176' }, // 黄色
{ x: 2, y: 1, color: '#ED6D50' }, // 红色
{ x: 0, y: 2, color: '#F9A857' }, // 橙色
{ x: 2, y: 2, color: '#F9A857' }, // 橙色
],
},
/** 字母O */
{
id: 'letter-o-3x3-001',
name: '字母O',
category: 'geometric',
difficulty: 2,
supportSymmetry: true,
symmetryType: 'both',
isComplete: true,
cells: [
{ x: 0, y: 0, color: '#ED6D50' }, // 红色
{ x: 1, y: 0, color: '#F9A857' }, // 橙色
{ x: 2, y: 0, color: '#ED6D50' }, // 红色
{ x: 0, y: 1, color: '#F9A857' }, // 橙色
{ x: 2, y: 1, color: '#F9A857' }, // 橙色
{ x: 0, y: 2, color: '#ED6D50' }, // 红色
{ x: 1, y: 2, color: '#F9A857' }, // 橙色
{ x: 2, y: 2, color: '#ED6D50' }, // 红色
],
},
];
/**
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
@@ -30,12 +30,8 @@ export interface ShapeTemplate {
id: string;
/** 形状名称 */
name: string;
/** 推荐网格尺寸 */
recommendedSize: { rows: number; cols: number };
/** 形状数据(如果是对称形状,这里存储的是左半部分或上半部分) */
cells: GridCell[];
/** 颜色方案ID */
colorSchemeId?: string;
/** 分类 */
category: 'animal' | 'object' | 'geometric' | 'character' | 'nature';
/** 难度等级 1-5 */
@@ -47,13 +43,3 @@ export interface ShapeTemplate {
/** 是否已经是对称完整的图案(false表示只存储了半边) */
isComplete?: boolean;
}
/** 颜色方案 */
export const COLOR_SCHEMES: Record<string, string[]> = {
basic: ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF'],
warm: ['#FF0000', '#FF7F00', '#FFFF00', '#FF69B4', '#FF4500'],
cool: ['#00FFFF', '#0000FF', '#8A2BE2', '#00FF00', '#87CEEB'],
halloween: ['#FF7F00', '#FFFF00', '#000000', '#90EE90', '#FF0000'],
nature: ['#00FF00', '#90EE90', '#006400', '#FFFF00', '#8B4513'],
rainbow: ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#8A2BE2'],
};
@@ -83,9 +83,13 @@ export function generateSymmetricalPattern(
/**
* 从形状模板生成完整的格子数据
* @param template 形状模板
* @param config 网格配置(用于对称生成)
* @returns 完整的格子数据
*/
export function generateCompletePattern(template: ShapeTemplate): GridCell[] {
export function generateCompletePattern(
template: ShapeTemplate,
config: GridConfig,
): GridCell[] {
if (template.isComplete) {
// 如果已经是完整图案,直接返回
return [...template.cells];
@@ -95,10 +99,7 @@ export function generateCompletePattern(template: ShapeTemplate): GridCell[] {
// 使用对称生成完整图案
return generateSymmetricalPattern(
template.cells,
{
rows: template.recommendedSize.rows,
cols: template.recommendedSize.cols,
},
config,
template.symmetryType,
);
}