上下文、描述文档更新

2025-10-12 06:10:10 +08:00
parent d1365aaaa5
commit 3957a7d3b2
2 changed files with 129 additions and 2 deletions
--- a/IFLOW.md
+++ b/IFLOW.md
@@ -27,7 +27,7 @@
 ├── src/
 │   ├── common/              # 全局样式和通用工具
 │   ├── components/          # 可复用的 Vue 组件 (Header, NoteItem, FolderItem)
-│   ├── pages/               # 页面级别的 Vue 组件 (NoteList, NoteDetail, NoteEditor, Folder, Settings)
+│   ├── pages/               # 页面级别的 Vue 组件 (NoteList, NoteEditor, Folder, Settings)
 │   ├── stores/              # Pinia 状态管理 stores
 │   │   └── useAppStore.js   # 全局状态管理 store
 │   ├── utils/               # 工具函数
@@ -48,6 +48,10 @@
    *   基于 Vite，支持热更新。
 *   **构建生产版本**: `npm run build`
    *   使用 Vite 构建，并同步到 Capacitor 项目 (`npx cap sync`)。
+*   **构建PWA版本**: `npm run build:pwa`
+    *   构建PWA版本的应用
+*   **部署PWA版本**: `npm run deploy:pwa`
+    *   构建并部署PWA版本到FTP服务器
 *   **在 Android 设备上运行**: `npm run android`
    *   需要预先配置好 Android 开发环境。

@@ -59,6 +63,7 @@
 *   **置顶功能**: 支持将便签置顶显示在列表顶部
 *   **图片标记**: 可以标记便签中是否包含图片
 *   **滑动删除**: 支持右滑显示删除按钮，带有阻尼效果的交互体验
+*   **富文本编辑**: 支持加粗、居中、待办事项、列表、标题、引用等格式

 ### 文件夹管理
 *   **分类组织**: 支持创建文件夹对便签进行分类管理
@@ -111,11 +116,20 @@
 *   每个组件应该附带 `README.MD` 文档。
 *   组件编写应遵循项目中已有的风格。

+### Header 组件
+*   **动态按钮**: 根据页面状态显示不同的操作按钮（新建、保存、插入图片）
+*   **文件夹管理**: 支持文件夹展开/收起功能
+
 ### NoteItem 组件
 *   **滑动交互**: 支持右滑显示删除按钮，带有阻尼效果
 *   **状态切换**: 支持星标和置顶状态的切换
 *   **视觉反馈**: 滑动时便签夹会切换状态，提供直观的交互反馈

+### RichTextEditor 组件
+*   **富文本编辑**: 支持多种文本格式（加粗、居中、待办事项、列表、标题、引用）
+*   **图片插入**: 支持插入图片功能
+*   **工具栏**: 提供浮动工具栏，支持格式化操作
+
 ## 页面

 *   页面使用 Composition API (setup语法糖) 编写。
@@ -127,6 +141,12 @@
 *   **搜索功能**: 提供便签搜索功能
 *   **交互反馈**: 显示便签总数和置顶便签数量

+### NoteEditorPage
+*   **编辑模式**: 支持新建和编辑便签
+*   **富文本编辑**: 集成RichTextEditor组件，支持丰富的文本格式
+*   **图片插入**: 支持通过工具栏插入图片
+*   **状态管理**: 根据路由参数判断是新建还是编辑模式
+
 ## 状态管理 (Pinia)

 项目现在使用 Pinia 作为状态管理解决方案，主要特点包括：
@@ -155,3 +175,7 @@
 *   **置顶支持**: 便签可以置顶显示在列表顶部
 *   **图片标记**: 可以标记便签是否包含图片
 *   **排序优化**: 置顶便签优先显示，按更新时间排序
+
+### PWA 支持
+*   **离线使用**: 支持构建PWA版本，可离线使用
+*   **自动部署**: 支持一键构建并部署到FTP服务器
--- a/README.md
+++ b/README.md
@@ -0,0 +1,103 @@
+# 锤子便签（重制版）
+
+![项目截图](public/icons/icon-192.png)
+
+这是一个基于 Vue 3 和 Vite 构建的单页 Web 应用（SPA），旨在模仿锤子科技（Smartisan）的便签应用。该项目使用 localStorage 进行本地数据持久化，支持便签的增删改查、文件夹管理、便签置顶、星标标记等丰富的交互功能。
+
+## 功能特性
+
+### 核心功能
+- ✅ 便签的增删改查操作
+- ✅ 便签置顶和星标标记
+- ✅ 便签滑动删除交互（带阻尼效果）
+- ✅ 文件夹分类管理
+- ✅ 便签全文搜索
+- ✅ 富文本编辑（支持加粗、居中、待办事项、列表、标题、引用等格式）
+- ✅ 图片插入功能
+- ✅ 响应式设计，适配移动端设备
+- ✅ 刘海屏兼容
+
+### 技术亮点
+- ⚡ 基于 Vite 构建，开发体验流畅
+- 🖼️ 使用原生 CSS 和锤子便签经典配色方案
+- 📦 状态管理采用 Pinia
+- 🔄 路由管理使用 vue-router
+- 📱 支持构建为 PWA 应用
+- 🚀 支持一键部署到 FTP 服务器
+
+## 快速开始
+
+### 环境要求
+- Node.js >= 16.0.0
+- npm >= 7.0.0
+
+### 安装依赖
+```bash
+npm install
+```
+
+### 启动开发服务器
+```bash
+npm run dev
+```
+默认访问地址：http://localhost:3000
+
+### 构建生产版本
+```bash
+# 构建标准版本
+npm run build
+
+# 构建 PWA 版本
+npm run build:pwa
+
+# 构建并部署 PWA 版本到 FTP 服务器
+npm run deploy:pwa
+```
+
+### 在 Android 设备上运行
+```bash
+npm run android
+```
+
+## 项目结构
+```
+.
+├── android/                 # Capacitor Android 项目文件
+├── dist/                    # 构建后的生产文件
+├── node_modules/            # 项目依赖
+├── public/                  # 静态资源目录
+├── src/
+│   ├── common/              # 全局样式和通用工具
+│   ├── components/          # 可复用的 Vue 组件
+│   ├── pages/               # 页面级别的 Vue 组件
+│   ├── stores/              # Pinia 状态管理 stores
+│   ├── utils/               # 工具函数
+│   ├── App.vue              # 根组件
+│   └── main.js              # 应用入口
+├── index.html               # HTML 模板
+├── package.json             # 项目元数据和脚本命令
+├── vite.config.js           # Vite 构建配置
+└── capacitor.config.json    # Capacitor 配置文件
+```
+
+## 技术栈
+- **核心框架**: Vue 3 (Composition API)
+- **构建工具**: Vite
+- **路由管理**: vue-router
+- **状态管理**: Pinia
+- **UI 库**: 原生 CSS
+- **移动端支持**: Capacitor
+- **样式预处理器**: Less
+
+## 开发约定
+- 使用 Vue 3 Composition API
+- 遵循 ES6 规范
+- 使用 Pinia 进行状态管理
+- 通过 localStorage 实现数据持久化
+- 组件和页面分离的目录结构
+
+## 许可证
+ISC
+
+## 贡献
+欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。