You've already forked SmartisanNote.Remake
模型上下文更新；
新增 更新日志；
This commit is contained in:
yuantao
196
IFLOW.md
196
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 管理页面导航。
|
||||
### 代码风格与结构
|
||||
|
||||
* **框架**: 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`
|
||||
|
||||
### 代码组织
|
||||
|
||||
* **组件结构**:
|
||||
* 使用 `<template>`, `<script setup>`, `<style>` 三段式结构
|
||||
* 计算属性 (`computed`) 置于响应式数据之后
|
||||
* 方法 (`methods`) 置于计算属性之后
|
||||
* 生命周期钩子 (`onMounted`, `onUnmounted` 等) 置于方法之前
|
||||
* 样式使用 Less 预处理器，并使用 `scoped` 属性避免样式污染
|
||||
* **状态管理**:
|
||||
* 使用 Pinia 进行全局状态管理
|
||||
* Store 文件中按照 state, getters, actions 的顺序组织代码
|
||||
* 异步操作使用 `async/await` 语法
|
||||
* **工具函数**:
|
||||
* 工具函数按功能模块划分文件，如 `storage.js`, `dateUtils.js`
|
||||
* 工具函数使用 `export const` 导出
|
||||
|
||||
### 注释规范
|
||||
|
||||
* **单行注释**: 使用 `//` 进行单行注释，注释应位于代码上方或行尾
|
||||
* **多行注释**: 使用 `/* */` 进行多行注释，用于解释复杂逻辑
|
||||
* **函数注释**: 使用 JSDoc 格式为函数添加注释，包含函数描述、参数类型和返回值类型
|
||||
|
||||
## 代码提交规范
|
||||
|
||||
* 提交信息应清晰描述变更内容，如 `修复 搜索功能空值检查` 或 `新增 删除按钮功能`。
|
||||
* 对于功能性的新增或修改，使用 `新增` 前缀。
|
||||
* 对于错误修复，使用 `修复` 前缀。
|
||||
* 对于性能优化、代码重构（既不修复错误也不添加功能），使用 `优化` 前缀。
|
||||
* 对于文档更新，使用 `文档` 前缀。
|
||||
* 提交信息应使用中文。
|
||||
* 每次提交代码时，如果涉及功能变更，应在 `update.txt` 文件中添加相应的更新日志，格式为日期和变更描述。
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "smartisannote.vue",
|
||||
"name": "smartisannote.re",
|
||||
"version": "1.0.0",
|
||||
"description": "锤子便签(重制版)",
|
||||
"main": "index.js",
|
||||
|
||||
22
update.txt
22
update.txt
@@ -0,0 +1,22 @@
|
||||
2025.10.16
|
||||
优化 移动端图片拖拽体验和视觉反馈;
|
||||
新增 图片排序后自动退出排序模式;
|
||||
新增 为图片添加移除按钮;
|
||||
|
||||
2025.10.14
|
||||
优化 便签列表页上下滑动时不再触发标签条的移动；
|
||||
优化 调整了编辑器中的工具栏显示隐藏逻辑;
|
||||
新增 编辑器现在可以拖拽图片排序了;
|
||||
|
||||
2025.10.13
|
||||
优化 便签列表页布局调整；
|
||||
新增 便签删除功能；
|
||||
优化 便签列表页布局；
|
||||
新增 设置块组件；
|
||||
新增 开关按钮组件；
|
||||
优化 头部便签管理点击区域；
|
||||
调整了若干样式；
|
||||
|
||||
2025.10.12
|
||||
优化 时间显示格式调整;
|
||||
优化 编辑器中的图片显示尺寸;
|
||||
Reference in New Issue
Block a user