Inspiration Typewriter

一个复古打字机风格的灵感记录应用，让你的想法以优雅的方式呈现。

项目介绍

Inspiration Typewriter 是一个富有创意的 Web 应用，模拟了复古打字机的体验。你可以记录灵感、想法和创意，应用会将它们"打印"到可拖拽的纸条卡片上，营造出真实的桌面工作体验。

主要特性

• 🖨️ 复古打字机界面 - 逼真的打字机视觉效果和动画
• 📝 可拖拽纸条 - 自由拖动、旋转和管理你的想法卡片
• 🎨 印章系统 - 为重要的想法加盖随机位置和角度的印章
• 💾 本地持久化 - 自动保存所有卡片到浏览器本地存储
• 🎯 智能层叠 - 自动检测卡片重叠并优化显示顺序

技术栈

• 前端框架: React 19.2 + TypeScript
• 构建工具: Vite 6.2
• 样式: Tailwind CSS
• 图标: Lucide React
• 字体: VT323, Special Elite, Courier Prime

快速开始

前置要求

• Node.js (推荐 v18 或更高版本)

安装步骤

1. 克隆仓库

   git clone <your-repo-url>
   cd inspiration-typewriter

2. 安装依赖

   npm install

3. 启动开发服务器

   npm run dev

4. 在浏览器中打开 http://localhost:3000

构建生产版本

npm run build

构建产物将生成在 dist/ 目录下。

使用说明

1. 输入想法 - 在绿色屏幕中输入你的想法或问题
2. 打印纸条 - 点击 PRINT 按钮，内容会以打字机动画的形式"打印"到纸条卡片上
3. 管理卡片 -
   • 拖动卡片到任意位置
   • 点击删除按钮移除单个卡片
   • 双击"清空纸条"按钮清除所有卡片
4. 盖章 - 开启盖章开关，为重要的想法加盖印章（打印后自动关闭）

项目结构

inspiration-typewriter/
├── App.tsx                 # 主应用组件
├── components/
│   ├── DraggablePaper.tsx # 可拖拽纸条卡片组件
│   └── TypewriterConsole.tsx # 打字机控制台组件
├── utils/                 # 工具函数
├── types.ts              # TypeScript 类型定义
├── constants.ts          # 常量配置
├── assets/               # 静态资源（印章图片等）
└── index.html           # HTML 入口文件

致谢

本项目基于 @Lessnoise365 的原创创意和设计进行开发。