diff --git a/.nvmdrc b/.nvmdrc new file mode 100644 index 0000000..54954dc --- /dev/null +++ b/.nvmdrc @@ -0,0 +1 @@ +20.0.0 \ No newline at end of file diff --git a/IFLOW.md b/IFLOW.md index 5c51019..f324770 100644 --- a/IFLOW.md +++ b/IFLOW.md @@ -1,80 +1,59 @@ # SmartisanNote.Remake - IFLOW 上下文 -## 项目简介 +## 项目概述 -这是一个基于 Vue 3 (Composition API) 和 Ionic Vue 的移动端便签应用，仿照锤子便签的设计风格。该应用支持富文本编辑、图片插入、便签管理（加星、置顶、删除至回收站）、文件夹分类以及 PWA 离线功能。 +这是一个基于 Vue 3、Vite 和 Pinia 的移动端现代化 Web 应用，旨在重现并改进经典的锤子便签应用体验。该项目采用 PWA（渐进式 Web 应用）技术，支持离线使用和安装到主屏幕。 -## 核心技术栈 +### 主要技术栈 -- **Vue 3**: 使用 Composition API 构建用户界面。 -- **Vue Router**: 实现页面路由管理，采用 Hash 模式以支持静态部署。 -- **Pinia**: 用于全局状态管理（便签、文件夹、设置）。 -- **Vite**: 作为构建工具，提供快速的开发和构建体验。 -- **Vite Plugin PWA**: 支持将应用打包为 PWA，实现离线使用。 -- **Ionic Vue**: 提供移动端 UI 组件。 -- **localStorage**: 用于本地数据存储。 +* **框架**: Vue 3 (Composition API) +* **构建工具**: Vite +* **状态管理**: Pinia +* **路由**: Vue Router +* **UI 组件库**: Ionic Vue (部分使用) +* **PWA 支持**: vite-plugin-pwa +* **本地存储**: localStorage (通过 `src/utils/storage.js` 封装) +* **CSS 预处理器**: Less ## 项目结构 ``` -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 配置文件 +. +├── android/ # Capacitor Android 项目文件 +├── public/ # 静态资源目录 (图标等) +├── src/ # 源代码目录 +│ ├── App.vue # 根组件 +│ ├── main.js # 应用入口文件 +│ ├── common/ # 通用样式 +│ ├── components/ # 可复用的 UI 组件 +│ ├── pages/ # 页面组件 +│ ├── stores/ # Pinia 状态管理 +│ └── utils/ # 工具函数 +├── index.html # 应用入口 HTML 文件 +├── .nvmdrc # node.js 版本 +├── update.txt # 更新日志 +├── 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` 操作。 +* **便签管理**: 创建、编辑、删除、置顶、加星便签。 +* **文件夹管理**: 将便签分类到不同的文件夹中。 +* **搜索功能**: 按标题或内容搜索便签。 +* **回收站**: 临时存储已删除的便签，支持彻底删除。 +* **多种排序方式**: 按更新时间、标题、星标状态排序。 +* **PWA 支持**: 可安装为独立应用，支持离线使用。 +* **本地存储**: 所有数据存储在浏览器的 `localStorage` 中。 +* **深色模式**: (计划中) 支持切换深色/浅色主题。 +* **云同步**: (计划中) 支持多设备间数据同步。 ## 开发与构建 ### 前置条件 -- Node.js (推荐 LTS 版本) -- npm 或 yarn +确保已安装 Node.js (>=14) 和 npm。 ### 安装依赖 @@ -82,40 +61,109 @@ SmartisanNote.Remake/ npm install ``` -### 启动开发服务器 +### 开发 + +启动开发服务器: ```bash npm run dev ``` -这将在 `http://localhost:3000` 启动开发服务器。 -### 构建标准版本 +这将在 `http://localhost:3000` 启动应用。 + +### 构建 + +构建标准 Web 应用: ```bash npm run build ``` -构建产物位于 `dist/standard` 目录。 -### 构建 PWA 离线版本 +构建 PWA 应用: + +```bash +npm run build:pwa +``` + +构建所有版本 (标准 + PWA): ```bash npm run build:all -# 或者只构建 PWA +``` + +### 部署 PWA + +构建 PWA 并上传到服务器: + +```bash npm run deploy:pwa ``` -PWA 构建产物位于 `dist/offline` 目录。 -### 在 Android 设备上运行 +这将执行 `vite build --mode pwa` 并运行 `upload-pwa.js` 脚本。 + +### Android 应用 + +运行 Android 应用: ```bash npm run android ``` -这需要配置好 Android 开发环境 (Android Studio, SDK 等)。 ## 代码规范与约定 -- **组件化**: 应用遵循组件化开发模式，将 UI 拆分为可复用的组件。 -- **状态管理**: 使用 Pinia 进行全局状态管理，确保数据流清晰。 -- **本地存储**: 便签、文件夹和设置数据存储在浏览器的 `localStorage` 中。 -- **样式**: 使用 CSS 变量定义主题色和尺寸，便于维护和主题切换。 -- **路由**: 使用 Vue Router 管理页面导航。 \ No newline at end of file +### 代码风格与结构 + +* **框架**: Vue 3 (Composition API) 与 Pinia 状态管理 +* **构建工具**: Vite +* **路由**: Vue Router +* **UI 组件库**: Ionic Vue (部分使用) +* **PWA 支持**: vite-plugin-pwa +* **本地存储**: localStorage (通过 `src/utils/storage.js` 封装) +* **CSS 预处理器**: Less +* **CSS 命名**: 使用 BEM 命名规范，部分使用原子化 CSS 类名（以 `code-fun-` 开头） +* **响应式设计**: 使用 viewport 单位 (vw/vh) 和 CSS 变量实现响应式布局 +* **图标**: 使用 PNG 图片作为图标，存储在 `public/assets/icons/` 目录下 + +### 命名规范 + +* **文件命名**: + * 组件文件使用 PascalCase 命名法，如 `NoteItem.vue` + * 页面文件使用 PascalCase 命名法，如 `NoteListPage.vue` + * 工具文件使用 camelCase 命名法，如 `dateUtils.js` + * Store 文件使用 `use` 前缀 + PascalCase 命名法，如 `useAppStore.js` +* **组件命名**: 使用 PascalCase 命名法，如 `NoteItem` +* **变量命名**: 使用 camelCase 命名法，如 `noteToDelete` +* **常量命名**: 使用 UPPER_SNAKE_CASE 命名法，如 `NOTES_KEY` +* **函数命名**: 使用 camelCase 命名法，如 `handleNotePress` + +### 代码组织 + +* **组件结构**: + * 使用 `