采用 react - tailwindcss4 - motion - react bits - react-icons - usehooks - react router v7 - daisyui5 - openai - zustand
编写一个适用于手机端的软考刷题软件，实现如下功能：

"我的" 界面需要支持替换 openai 的 base_url api_key models
"题库" 界面需要做好布局适配，需要有一定的动画效果，需要页面流畅
整个系统逻辑需要能够存储起来用户的个人题目信息
出题需要用 AI 出题，需要定义好返回，出题规则等，需要多个 Agent 协作，还需要记录 Agent 的一个执行日志
出题部分，通过 AI 来做知识的一个管理，比如，当前题目做对了，那就出 3 个变种题目后续就不再出这个类型的题目了。如果做错了就多出几个变种题目，并且无论做错还是做对都有一个 AI 题目解析，并且针对整个题型给出一个做题技巧。
需要合理排版，并且要确保整个项目结构都是合理排版的，所有文件命名都是采用小写的。请制定计划逐步完成，并完善没有考虑到的地方，不能省略任何任务和步骤，必须完成所有制定的计划。

AI - core

I need to build a mobile study app for "Software Designer" certification exam preparation with the following features:

A "My" interface to configure OpenAI settings (base_url, API key, models)
A "Question bank" interface with good layout and animations
User progress tracking and storage
AI-powered question generation with multiple agents and logging
Smart question selection based on user performance (variants for correct/incorrect answers)
AI-generated explanations and study tips
Good layout and project structure
Let's plan this out:

Technology Stack:

React for UI
Tailwind CSS 4 for styling
Framer Motion for animations
React Router v7 for routing
DaisyUI 5 for UI components
OpenAI for AI features
Zustand for state management
useHooks for custom React hooks
React Icons for iconography
Project Structure:
I'll break down the app into the following main components:

Core/App Structure

Router setup
Layout components
Store setup (Zustand)
Theme configuration
Authentication/User Management

User settings
OpenAI configuration
Question Bank

Question list/categories
Question filtering/sorting
Question Experience

Question rendering
Answer submission
Result display
Explanations
AI Services

Question generation
Explanation generation
Progress tracking logic
Data Storage

Local storage for settings
Question history tracking
Let me now create a detailed implementation plan with the specific files and components.

Based on your requirements, I'll create a mobile-optimized software certification exam preparation app with AI-powered question generation and adaptive learning features. This first version will focus on providing a seamless study experience with intelligent question selection and personalized feedback.

Core Features:

AI-powered question generation with multiple agents collaboration
Adaptive learning system that generates variant questions based on performance
Personal progress tracking and history storage
OpenAI integration with customizable settings (base_url, api_key, models)
Smart knowledge management system for question selection
Detailed AI-generated explanations and study techniques
Chapter-based practice and historical exam questions
Dark mode support and user preference storage
Design Elements:

Clean, minimalist UI optimized for mobile devices with proper spacing
Subtle animations for transitions and interactions using Framer Motion
Color system with primary blue (#4F46E5), secondary teal (#0EA5E9), accent purple (#8B5CF6), success green (#10B981), warning amber (#F59E0B), and error red (#EF4444)
Card-based design for questions with clear visual hierarchy
Bottom tab navigation for easy access to main sections
Progress indicators and visual feedback for correct/incorrect answers
Responsive typography with optimal readability on mobile screens
Software Certification Exam Prep App

package.json
npm install
tailwind.config.js
index.html
src/main.tsx
src/index.css
src/router.tsx
src/components/layout/layout.tsx
src/components/layout/navigation.tsx
src/stores/theme-store.ts
src/stores/user-store.ts
src/stores/questions-store.ts
src/services/ai-service.ts
src/services/question-service.ts
src/types/question.ts
src/components/ui/question-card.tsx
src/components/ui/category-card.tsx
src/components/ui/exam-paper-card.tsx
src/pages/home/home-page.tsx
src/pages/question-bank/question-bank-page.tsx
src/pages/question/question-page.tsx
src/pages/result/result-page.tsx
src/pages/profile/profile-page.tsx
src/pages/settings/settings-page.tsx
src/pages/settings/api-settings-page.tsx
src/pages/error/error-page.tsx
public/icon.svg
npm run dev
I've developed a comprehensive mobile-friendly software certification exam preparation app with AI-powered learning features. The app is built using React, Tailwind CSS, and Framer Motion, focusing on providing an intuitive user interface for studying software design certification content.
The application features a smart AI-driven question generation system that adapts to user performance, creating variant questions when users answer incorrectly and providing detailed explanations for each question. The app also includes secure user data storage and OpenAI configuration capabilities.
The modular architecture ensures good performance and maintainability, with separate stores for questions, user data, and theme preferences. The UI includes smooth animations and transitions to enhance the mobile experience, while the adaptive question system helps users focus on areas that need improvement.

‍

v1

请制定计划逐步完成，并完善没有考虑到的地方，调整如下内容：
1. 回到重新位置刷题，是需要之前有刷过题才会出现这个弹窗，并且不是每次都会弹出这个，允许在 "我的:账号设置:全局设置" 中启用 switch 调整是否提醒主页之前刷题
2. 完善 "我的:账号设置:数据管理" 功能部分的逻辑
3. 整个系统集成 surpabase 并且对接好登录注册，界面要统一一点
4. "我的" 界面的个人头像可以上传, 这些记录会通过状态管理存储起来，并且存储在浏览器storage 中
5. "我的:夜间刷题"功能需要真的实现, 目前是无法切换的
6. "我的:账号管理:OPENAI"界面中，模型允许添加自定义的模型，模型列表里面增加上通义千问的 qwen-plus, deepseek-r1
7. "题库" 顶部那个时间是允许我们选择的，而且会真实计算的，一个软考倒计时。目前软考分为上半年下半年，会根据我们选择的自动计算还有多少天考试
8. "题库" 章节部分包含: [计算机组成与体系结构, 操作系统, 程序语言设计基础, 数据结构, 算法基础, 系统开发基础, 项目管理, 面向对象术, 数据库系统, 计算机网络, 信息安全, 知识产权与标准化, 应用技术题专项练习]
9. 新增 "我的:账号设置:Agent管理" 允许对出题 Agent 进行一个设置[模型，系统提示词，效果测试], 评估 Agent 进行一个设置[模型，系统提示词， 效果测试， 用户刷题正确率趋势推荐]，刷题建议 Agent进行一个设置[模型，系统提示词， 效果测试， 基于用户日、周、月刷题数据进行一个合理的趋势建议]
10. 新增 底部 "题库" tab 主界面增加，每日刷题统计[刷了哪些题，刷了多少题，正确率，失败率，AI 未来刷题方向建议]，月历图[热力图那种]，折线图[统计每天，每周，每月 刷题的一个时间、刷题量]
11. 允许一键导出，导入所有个人数据[Agent 配置、刷题记录、各类参数等]
请制定计划逐步完成，并完善没有考虑到的地方，不能省略任何任务和步骤，必须完成所有制定的计划。

‍

snazzy-starship-844bcc.netlify.app/

v2

AI 出题部分你可以参考我给的部分
其次 "我的: 账号设置:出题设置"允许自动在后台进行一个出题[包含解析]，将所有类别的都出完为止， 并且支持断点出题就是万一用户刷新了页面，会在之前出题那个部分继续出题并记录到  supaabse，将数据存储到 supabase 中， 这样就可以避免每次都要重新加载的一个问题。并且需要展示一下各类题目出了多少了，质量如何，如果不行允许用户手动重新出那一题。

‍