# 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 管理页面导航。