锤子便签(重制版)

这是一个基于 Vue 3、Vite 和 Pinia 的移动端现代化 Web 应用，旨在重现并改进经典的锤子便签应用体验。该项目采用 PWA（渐进式 Web 应用）技术，支持离线使用和安装到主屏幕。

主要特性

• 便签管理: 创建、编辑、删除、置顶、加星便签
• 文件夹管理: 将便签分类到不同的文件夹中
• 搜索功能: 按标题或内容搜索便签
• 回收站: 临时存储已删除的便签，支持彻底删除
• 多种排序方式: 按更新时间、标题、星标状态排序
• PWA 支持: 可安装为独立应用，支持离线使用
• 本地存储: 所有数据存储在浏览器的 IndexedDB 中
• 富文本编辑: 支持标题、待办事项、列表、加粗、引用、图片等多种格式
• 动画效果: 使用 Oku Motion 实现流畅的动画效果
• 拖拽排序: 支持图片拖拽排序

技术栈

• 框架: Vue 3 (Composition API)
• 构建工具: Vite
• 状态管理: Pinia
• 路由: Vue Router
• UI 组件库: Ionic Vue (部分使用)
• PWA 支持: vite-plugin-pwa
• 本地存储: IndexedDB (通过 src/utils/indexedDBStorage.js 封装)
• CSS 预处理器: Less
• 动画库: @oku-ui/motion
• 拖拽库: vue-draggable-plus

项目结构

.
├── android/         # Capacitor Android 项目文件
├── public/          # 静态资源目录 (图标等)
├── src/             # 源代码目录
│   ├── App.vue      # 根组件
│   ├── main.js      # 应用入口文件
│   ├── common/      # 通用样式
│   ├── components/  # 可复用的 UI 组件
│   ├── pages/       # 页面组件
│   ├── stores/      # Pinia 状态管理
│   └── utils/       # 工具函数
├── index.html       # 应用入口 HTML 文件
├── package.json     # 项目依赖和脚本
├── vite.config.js   # Vite 配置文件
└── capacitor.config.json # Capacitor 配置文件

开发与构建

前置条件

确保已安装 Node.js (>=14) 和 npm。

安装依赖

npm install

开发

启动开发服务器:

npm run dev

这将在 http://localhost:3000 启动应用。

构建

构建标准 Web 应用:

npm run build

构建 PWA 应用:

npm run build:pwa

构建所有版本 (标准 + PWA):

npm run build:all

部署 PWA

构建 PWA 并上传到服务器:

npm run deploy:pwa

这将执行 vite build --mode pwa 并运行 upload-pwa.js 脚本。

Android 应用

运行 Android 应用:

npm run android