You've already forked SmartisanNote.Remake
109 lines
2.6 KiB
Markdown
109 lines
2.6 KiB
Markdown
# 锤子便签(重制版)
|
||
|
||
这是一个基于 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。
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 开发
|
||
|
||
启动开发服务器:
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
这将在 `http://localhost:3000` 启动应用。
|
||
|
||
### 构建
|
||
|
||
构建标准 Web 应用:
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
构建 PWA 应用:
|
||
|
||
```bash
|
||
npm run build:pwa
|
||
```
|
||
|
||
构建所有版本 (标准 + PWA):
|
||
|
||
```bash
|
||
npm run build:all
|
||
```
|
||
|
||
### 部署 PWA
|
||
|
||
构建 PWA 并上传到服务器:
|
||
|
||
```bash
|
||
npm run deploy:pwa
|
||
```
|
||
|
||
这将执行 `vite build --mode pwa` 并运行 `upload-pwa.js` 脚本。
|
||
|
||
### Android 应用
|
||
|
||
运行 Android 应用:
|
||
|
||
```bash
|
||
npm run android
|
||
``` |