Glimmer（日记应用）

一个功能强大、美观易用的Web端日记应用，支持富文本编辑、文件夹管理和本地存储。

📖 开发者指南: 查看 docs/DEVELOPMENT.md 了解如何继续开发和优化此应用

功能特性

📝 富文本编辑器

• 文本格式化: 粗体、斜体、下划线、删除线
• 标题: 支持H1-H6多级标题
• 列表: 有序列表、无序列表、任务列表（待办事项）
• 引用和代码: 引用块、代码块（带语法高亮）
• 媒体支持: 图片上传和预览
• 表格: 完整的表格支持
• 链接: 添加超链接
• 水平分割线: 内容分隔

📁 组织管理

• 文件夹系统: 创建、重命名、删除文件夹
• 日记管理: 创建、编辑、删除日记
• 搜索功能: 全文搜索日记内容
• 自动保存: 编辑内容自动保存到本地
• 字数统计: 实时显示字数

🏷️ 标签系统

• 标签管理: 添加、删除、重命名、合并标签
• 标签筛选: 多标签组合筛选日记
• 标签统计: 显示每个标签的使用次数
• 颜色自定义: 为标签设置自定义颜色

📅 多视图模式

• 文件夹视图: 按文件夹组织日记
• 标签视图: 按标签筛选和管理
• 日历视图: 在日历上查看和创建日记

📤 导出功能

• Markdown: 纯文本格式导出
• HTML: 带样式的网页格式
• JSON: 数据备份格式
• Word (.docx): 可编辑文档格式
• PDF: 打印格式（支持中文）

💾 数据存储

• 本地存储: 所有数据存储在浏览器localStorage中
• 隐私保护: 数据完全本地化，不上传到服务器
• 持久化: 刷新页面后数据不丢失

☁️ 云端同步（可选）

• 账号系统: 邮箱 + 密码登录
• 云端存储: 使用 Supabase 保存日记/文件夹/任务
• 跨设备同步: 登录后即可在手机/电脑同步访问

🎨 用户界面

• 简约现代: Notion风格的简洁设计
• 响应式布局: 适配不同屏幕尺寸
• 流畅动画: 优雅的过渡效果
• 直观操作: 易于上手的用户体验

技术栈

• React 18 - UI框架
• TypeScript - 类型安全
• Vite - 构建工具
• TipTap - 富文本编辑器
• Tailwind CSS - 样式框架
• Lucide React - 图标库
• date-fns - 日期处理

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

应用将在 http://localhost:5173 启动

构建生产版本

npm run build

构建产物将生成在 dist 目录

部署与分享（推荐：Vercel / Netlify / GitHub Pages） ✅

最简单的分享方式是将 dist 静态产物部署到托管平台（Vercel、Netlify、GitHub Pages）。该应用为本地优先（数据存储在用户浏览器的 localStorage），因此部署静态站点即可让其他人访问并独立使用它。

推荐步骤（Vercel）:

1. 在 https://vercel.com 使用 GitHub 账号登录并创建一个新项目。
2. 连接到本仓库，Vercel 会自动识别为 Vite 应用并设置构建命令 npm run build。无需额外配置。
3. 部署后会得到一个可分享的 URL，用户打开即可使用并（如需要）将其安装为 PWA。

自动部署（GitHub Pages）:

• 我已在仓库中添加了一个 GitHub Actions workflow（.github/workflows/deploy.yml），当你将代码推送到 main 分支时，它会自动运行 npm ci、npm run build 并将 dist 文件夹内容发布到 gh-pages 分支。
• 若要启用，请确保仓库的默认分支是 main（或你可以调整 workflow 的分支过滤器），并在 GitHub 仓库设置中将 Pages 源设置为 gh-pages 分支的根目录。部署完成后你将得到一个 https://<your-username>.github.io/<repo>/ 的可分享地址。

额外建议：已为应用添加 PWA 支持（manifest + service worker），部署后用户可以“安装”应用到桌面/移动设备，实现类似本地应用的体验。

云端同步（Supabase）

如需跨设备同步，请在 Supabase 创建项目并配置环境变量：

VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here

然后在 Supabase 创建数据表（diaries / folders / tasks），并启用按用户隔离的 Row Level Security (RLS)。

如需发布为桌面原生应用（可安装程序）或提供云同步（多人数据同步），请看下方备选方案。

预览生产版本

npm run preview

使用指南

创建日记

1. 点击日记列表顶部的 "+" 按钮
2. 输入标题和内容
3. 内容会自动保存

创建文件夹

1. 点击文件夹列表顶部的文件夹图标
2. 输入文件夹名称
3. 点击"Create"按钮

搜索日记

1. 在日记列表顶部的搜索框中输入关键词
2. 系统会实时过滤匹配的日记

编辑器快捷操作

• 粗体: 选中文字后点击工具栏的B按钮
• 插入图片: 点击图片图标，选择本地图片
• 插入表格: 点击表格图标，自动插入3x3表格
• 任务列表: 点击复选框图标创建待办事项

删除操作

• 删除日记: 鼠标悬停在日记上，点击垃圾桶图标
• 删除文件夹: 鼠标悬停在文件夹上，点击垃圾桶图标
• 删除前会弹出确认对话框

注意事项

存储限制

• localStorage有5MB的存储限制
• 建议单张图片不超过2MB
• 如果存储空间不足，请删除不需要的日记或图片

浏览器兼容性

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

数据备份

由于数据存储在浏览器本地，建议定期导出重要日记内容进行备份。清除浏览器数据会导致日记丢失。

项目结构

src/
├── components/
│   ├── Editor/          # 编辑器组件
│   ├── Sidebar/         # 侧边栏组件
│   ├── Layout/          # 布局组件
│   └── UI/              # 基础UI组件
├── hooks/               # 自定义Hooks
├── types/               # TypeScript类型定义
├── utils/               # 工具函数
├── App.tsx              # 主应用组件
└── main.tsx             # 入口文件

开发计划

未来可能添加的功能：

• 标签系统
• 夜间模式
• 导出功能（Markdown/PDF）
• 云端同步
• 移动端适配优化
• AI写作辅助

许可证

MIT License

贡献

欢迎提交Issue和Pull Request！