You've already forked SmartisanNote.Remake
121 lines
4.5 KiB
Markdown
121 lines
4.5 KiB
Markdown
# SmartisanNote.Remake - IFLOW 上下文
|
||
|
||
## 项目简介
|
||
|
||
这是一个基于 Vue 3 (Composition API) 和 Ionic Vue 的移动端便签应用，仿照锤子便签的设计风格。该应用支持富文本编辑、图片插入、便签管理（加星、置顶、删除至回收站）、文件夹分类以及 PWA 离线功能。
|
||
|
||
## 核心技术栈
|
||
|
||
- **Vue 3**: 使用 Composition API 构建用户界面。
|
||
- **Vue Router**: 实现页面路由管理，采用 Hash 模式以支持静态部署。
|
||
- **Pinia**: 用于全局状态管理（便签、文件夹、设置）。
|
||
- **Vite**: 作为构建工具，提供快速的开发和构建体验。
|
||
- **Vite Plugin PWA**: 支持将应用打包为 PWA，实现离线使用。
|
||
- **Ionic Vue**: 提供移动端 UI 组件。
|
||
- **localStorage**: 用于本地数据存储。
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
SmartisanNote.Remake/
|
||
├── android/ # Android 原生项目 (Capacitor)
|
||
├── public/ # 静态资源
|
||
│ ├── assets/ # 应用图标、图片等资源
|
||
│ └── icons/ # PWA 图标
|
||
├── src/ # 源代码目录
|
||
│ ├── App.vue # 根组件
|
||
│ ├── main.js # 应用入口文件
|
||
│ ├── common/ # 公共样式
|
||
│ ├── components/ # 可复用的 UI 组件
|
||
│ ├── pages/ # 页面组件
|
||
│ ├── stores/ # Pinia 状态管理
|
||
│ └── utils/ # 工具函数 (日期处理、本地存储)
|
||
├── index.html # 主页面模板
|
||
├── package.json # 项目依赖和脚本
|
||
├── vite.config.js # Vite 配置文件
|
||
└── capacitor.config.json # Capacitor 配置文件
|
||
```
|
||
|
||
## 核心功能模块
|
||
|
||
1. **便签列表页 (`NoteListPage.vue`)**:
|
||
* 展示所有便签，支持按全部、加星、回收站分类查看。
|
||
* 支持搜索便签标题和内容。
|
||
* 支持对便签进行加星、置顶、删除操作。
|
||
* 点击便签可进入编辑页面。
|
||
* 点击创建按钮可进入新建便签页面。
|
||
2. **便签编辑页 (`NoteEditorPage.vue`)**:
|
||
* 使用自定义富文本编辑器 (`RichTextEditor.vue`) 进行内容编辑。
|
||
* 支持加粗、居中、待办事项、列表、标题、引用等格式。
|
||
* 支持插入和拖拽排序图片。
|
||
* 支持删除图片。
|
||
3. **富文本编辑器 (`RichTextEditor.vue`)**:
|
||
* 核心功能组件，提供富文本编辑能力。
|
||
* 工具栏包含加粗、居中、待办事项、列表、标题、引用等按钮。
|
||
* 支持插入图片并调整尺寸。
|
||
* 支持长按拖拽图片进行排序。
|
||
* 支持点击图片右上角按钮删除图片。
|
||
* 支持待办事项的添加、完成/未完成状态切换。
|
||
4. **文件夹管理页 (`FolderPage.vue`)**:
|
||
* 管理自定义文件夹。
|
||
* 可创建、重命名、删除文件夹。
|
||
5. **设置页 (`SettingsPage.vue`)**:
|
||
* 应用设置，如云同步开关（目前仅是 UI，未实现逻辑）、深色模式开关（目前仅是 UI，未实现逻辑）。
|
||
6. **状态管理 (`stores/useAppStore.js`)**:
|
||
* 使用 Pinia 管理应用所有状态（便签数据、文件夹数据、设置）。
|
||
* 提供操作便签、文件夹和设置的 actions。
|
||
* 负责与 `localStorage` 进行数据交互。
|
||
7. **工具函数 (`utils/`)**:
|
||
* `dateUtils.js`: 处理日期格式化。
|
||
* `storage.js`: 封装 `localStorage` 操作。
|
||
|
||
## 开发与构建
|
||
|
||
### 前置条件
|
||
|
||
- Node.js (推荐 LTS 版本)
|
||
- npm 或 yarn
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
这将在 `http://localhost:3000` 启动开发服务器。
|
||
|
||
### 构建标准版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
构建产物位于 `dist/standard` 目录。
|
||
|
||
### 构建 PWA 离线版本
|
||
|
||
```bash
|
||
npm run build:all
|
||
# 或者只构建 PWA
|
||
npm run deploy:pwa
|
||
```
|
||
PWA 构建产物位于 `dist/offline` 目录。
|
||
|
||
### 在 Android 设备上运行
|
||
|
||
```bash
|
||
npm run android
|
||
```
|
||
这需要配置好 Android 开发环境 (Android Studio, SDK 等)。
|
||
|
||
## 代码规范与约定
|
||
|
||
- **组件化**: 应用遵循组件化开发模式，将 UI 拆分为可复用的组件。
|
||
- **状态管理**: 使用 Pinia 进行全局状态管理，确保数据流清晰。
|
||
- **本地存储**: 便签、文件夹和设置数据存储在浏览器的 `localStorage` 中。
|
||
- **样式**: 使用 CSS 变量定义主题色和尺寸，便于维护和主题切换。
|
||
- **路由**: 使用 Vue Router 管理页面导航。 |