现代教室打印演示
独立演示现代教室项目的可打印功能。此应用程序展示了教育工作者如何根据课程内容为学生创建定制的可打印教育材料。
概述
清单
创建可定制的学生进度跟踪清单。作为参考，您可以找到一个示例 谷歌文档中的学生进度跟踪清单.
特性:
- 截面选择：从不同的课程部分中选择
- 课程筛选：选择要包含的特定课程
- 边框样式：从4种装饰性边框设计中选择
- 颜色选项：全彩或黑白打印
- 自定义选项:
- 包含/排除类名 - 包含/排除视频超链接 - 添加教师签退部分
- 导出选项:
- 直接打印 - 导出到Google文档
游戏板
设计引人入胜的游戏板式打印输出，以可视化学习路径。作为参考，您可以在下面找到一个游戏板示例：
特性:
- 截面选择：从不同的课程部分中选择
- 课程分隔符样式：4种不同的课程显示选项
- 课程名称 - 课程编号 - 课程名称+图形 - 课程编号+图形
- 图形主题：自然、学校或体育主题图形
- 颜色选项：全彩或黑白打印
- 横向：针对游戏板布局进行了优化
- 导出选项:
- 直接打印 - 导出到Google文档(_即将推出_)
路线图
- 将游戏板导出到Google Docs:
- 将可编辑的游戏板导出到Google Docs - 保留游戏板的风格和功能 - 在谷歌文档中忠实、像素完美的娱乐
先决条件
- Node.js 18或更高版本
- npm或yarn包管理器
安装
- 克隆或下载此目录
- 安装依赖项：
npm install- （可选）配置Google Drive集成：
- 复制 .env.example 到 .env - 添加您的Google客户端ID以启用Google文档导出：
VITE_GOOGLE_CLIENT_ID=your_google_client_id_here运行应用程序
发展模式
启动开发服务器：
npm run dev该应用程序将在 http://localhost:5174
路线:
/-主页/demo/checklist-清单打印演示/demo/gameboard-游戏板打印演示
生产建设
生产建设：
npm run build预览生产版本：
npm run preview发展
类型检查
运行TypeScript类型检查器：
npm run typecheck代码检查
运行ESLint：
npm run lint技术栈
- 框架：React 19与Vite
- 路由：React Router v7
- 样式：TailwindCSS定制设计系统
- UI组件：Radix UI图元
- PDF生成：@react pdf/renderer
- PDF查看：@mikecousins/react pdf与pdfjs dist
- 状态管理：带有URL搜索参数的React挂钩
- 类型安全：具有严格模式的TypeScript
项目结构
standalone/
├── public/ # Static assets (border SVG files)
├── src/
│ ├── pages/ # Route components
│ │ ├── HomePage.tsx # Landing page with demo navigation
│ │ ├── ChecklistDemo.tsx # Checklist demo page
│ │ └── GameBoardDemo.tsx # Game Board demo page
│ ├── components/
│ │ ├── demo/ # Demo-specific components
│ │ ├── printables/ # Printable components (checklist, gameboard)
│ │ └── ui/ # Reusable UI components
│ ├── const/ # Constants and enums
│ ├── data/ # Mock data for demos
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ ├── types/ # TypeScript type definitions
│ ├── App.tsx # Router setup
│ ├── main.tsx # Application entry point
│ └── index.css # Global styles
├── index.html # HTML template
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript configuration
├── vite.config.ts # Vite build configuration
└── tailwind.config.ts # TailwindCSS configuration演示数据
该应用程序使用代表示例性数学六年级课程的模拟数据：
- 课程：图解数学-六年级
- 单元：第一单元：面积和表面积
- 部分：A部分：寻找区域的推理
- 课程：3个包含各种活动的示例课程
实时预览
工作演示部署在：
浏览器支持
- Chrome/Edge（最新）
- Firefox（最新）
- Safari（最新）
许可证
©现代教室项目