【项目实训08】手写汉字识别关卡前端实现

原创已于 2025-06-16 03:14:51 修改 · 449 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

创新项目实训

于 2025-05-26 10:58:57 首次发布

手写汉字识别关卡前端实现

本周主要实现汉字手写的关卡系统前端的实现。平台采用Next.js框架开发，结合TypeScript类型安全，实现了响应式设计和模块化组件架构。

一、核心功能架构

1.课程管理系统

1.1 课程列表页面 (`handwriting/page.tsx`)

从数据库获取所有汉字学习单元
使用FeedWrapper组件展示课程单元
集成学习时长统计组件StudyTimeClient

export default async function CardPage() {
  const units = await getAllHanziUnits();
  
  return (
    <div className="flex flex-row-reverse gap-[48px] px-6">
      <StudyTimeClient />
      <FeedWrapper>
        {units.map((unit) => (
          <Unit key={unit.unit_id} {...unit} />
        ))}
      </FeedWrapper>
    </div>
  );
}

1.2 课程单元组件 (`units.tsx`)

展示单元横幅(UnitBanner)
渲染课程按钮(LessonButton)
动态计算课程位置形成波浪布局

export const Unit = ({ title, description, lessons }: UnitProps) => {
  return (
    <>
      <UnitBanner title={title} description={description} />
      <div className="relative flex flex-col items-center">
        {lessons.map((lesson, i) => (
          <LessonButton key={lesson.lesson_id} {...lesson} index={i} />
        ))}
      </div>
    </>
  );
};

1.3 课程按钮组件 (`lesson-button.tsx`)

根据完成状态显示不同图标：
- 已完成课程
- 最终课程
- 未完成课程
使用圆形进度条展示完成度
动态计算位置形成波浪布局效果

const Icon = isCompleted ? Check : isLast ? Crown : Star;

return (
  <Link href={href} aria-disabled={locked}>
    <div style={{ right: `${rightPosition}px` }}>
      {current ? (
        <CircularProgressbarWithChildren value={percentage}>
          <Button variant={locked ? "locked" : "secondary"}>
            <Icon className={/* 动态类名 */} />
          </Button>
        </CircularProgressbarWithChildren>
      ) : (
        <Button variant={locked ? "locked" : "secondary"}>
          <Icon className={/* 动态类名 */} />
        </Button>
      )}
    </div>
  </Link>
);

2. 汉字学习系统

2.1 课程页面 (`lessonid/page.tsx`)

根据路由参数获取课程数据
获取汉字字符数据
渲染Quiz组件

const LessonPage: FC<LessonPageProps> = async ({ params }) => {
  const lessonId = params.lessonid;
  const hanziCharacters = await getCharactersByLessonId(lessonId);
  
  return (
    <Quiz 
      initialPercentage={0}
      hanziCharacters={hanziCharacters}
    />
  );
};

2.2 学习主界面 (`quiz.tsx`)

管理当前学习的汉字索引
集成顶部导航(Header)
集成底部操作栏(Footer)
控制书写组件(WritingRecognitionPage)

export const Quiz = ({ hanziCharacters }: QuizProps) => {
  const [index, setIndex] = useState(0);
  const writingRef = useRef(null);
  
  const onNext = () => {
    setIndex(prev => (prev < hanziCharacters.length - 1 ? prev + 1 : 0));
    writingRef.current?.clearCanvas();
  };

  return (
    <>
      <Header />
      <WritingRecognitionPage 
        ref={writingRef}
        character={hanziCharacters[index].chinese_character}
        image_url={hanziCharacters[index].image_url}
        meaning={hanziCharacters[index].meaning}
      />
      <Footer onCheck={onNext} status="none" />
    </>
  );
};

3. 汉字书写识别系统 (`write.tsx`)

3.1 核心功能

笔画动画演示：使用hanzi-writer库
手写画布：支持鼠标/触摸屏书写
AI识别系统：与后端API集成
汉字解析：展示字形、图片和含义

3.2 实现亮点

// 笔画动画初始化
useEffect(() => {
  const writer = HanziWriter.create("character-container", targetChar, {
    width: 360,
    height: 360,
    padding: 5,
  });
  writerRef.current = writer;
  writer.animateCharacter();
}, [targetChar]);

// 手写功能实现
const startDrawing = (e) => {
  contextRef.current.beginPath();
  contextRef.current.moveTo(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
};

// AI识别提交
const recognizeHandwriting = () => {
  const dataURL = canvasRef.current.toDataURL("image/png");
  const result = await analyzeHandwriting(dataURL, targetChar);
  setResultText(result.recognizedText);
  setAnalysisText(result.analysis);
  setIsMatch(result.isMatch);
};

3.3 响应式布局

<div className="grid grid-cols-1 gap-8 lg:grid-cols-1">
  {/* 上部：汉字笔画演示和图片例句 */}
  <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
    {/* 左侧：汉字笔画顺序演示 */}
    <div className="h-[570px] rounded-lg border bg-gray-50 p-6 shadow-sm flex flex-col">
      {/* ... */}
    </div>
    
    {/* 右侧：图片和例句 */}
    <div className="rounded-lg border bg-gray-50 p-6 shadow-sm">
      {/* ... */}
    </div>
  </div>

  {/* 下部：书写区域和识别结果 */}
  <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
    {/* 左侧：手写区域 */}
    <div className="rounded-lg border p-6 shadow-sm">
      {/* ... */}
    </div>
    
    {/* 右侧：识别结果 */}
    <div className="rounded-lg border bg-gray-50 p-6 shadow-sm">
      {/* ... */}
    </div>
  </div>
</div>