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 配置文件

核心功能模块

便签列表页 (NoteListPage.vue):
- 展示所有便签，支持按全部、加星、回收站分类查看。
- 支持搜索便签标题和内容。
- 支持对便签进行加星、置顶、删除操作。
- 点击便签可进入编辑页面。
- 点击创建按钮可进入新建便签页面。
便签编辑页 (NoteEditorPage.vue):
- 使用自定义富文本编辑器 (RichTextEditor.vue) 进行内容编辑。
- 支持加粗、居中、待办事项、列表、标题、引用等格式。
- 支持插入和拖拽排序图片。
- 支持删除图片。
富文本编辑器 (RichTextEditor.vue):
- 核心功能组件，提供富文本编辑能力。
- 工具栏包含加粗、居中、待办事项、列表、标题、引用等按钮。
- 支持插入图片并调整尺寸。
- 支持长按拖拽图片进行排序。
- 支持点击图片右上角按钮删除图片。
- 支持待办事项的添加、完成/未完成状态切换。
文件夹管理页 (FolderPage.vue):
- 管理自定义文件夹。
- 可创建、重命名、删除文件夹。
设置页 (SettingsPage.vue):
- 应用设置，如云同步开关（目前仅是 UI，未实现逻辑）、深色模式开关（目前仅是 UI，未实现逻辑）。
状态管理 (stores/useAppStore.js):
- 使用 Pinia 管理应用所有状态（便签数据、文件夹数据、设置）。
- 提供操作便签、文件夹和设置的 actions。
- 负责与 localStorage 进行数据交互。
工具函数 (utils/):
- dateUtils.js: 处理日期格式化。
- storage.js: 封装 localStorage 操作。

开发与构建

前置条件

Node.js (推荐 LTS 版本)
npm 或 yarn

安装依赖

npm install

启动开发服务器

npm run dev

这将在 http://localhost:3000 启动开发服务器。

构建标准版本

npm run build

构建产物位于 dist/standard 目录。

构建 PWA 离线版本

npm run build:all
# 或者只构建 PWA
npm run deploy:pwa

PWA 构建产物位于 dist/offline 目录。

在 Android 设备上运行

npm run android

这需要配置好 Android 开发环境 (Android Studio, SDK 等)。

代码规范与约定

组件化: 应用遵循组件化开发模式，将 UI 拆分为可复用的组件。
状态管理: 使用 Pinia 进行全局状态管理，确保数据流清晰。
本地存储: 便签、文件夹和设置数据存储在浏览器的 localStorage 中。
样式: 使用 CSS 变量定义主题色和尺寸，便于维护和主题切换。
路由: 使用 Vue Router 管理页面导航。

4.5 KiB Raw Blame History Unescape Escape