diff --git a/IFLOW.md b/IFLOW.md index 2329ba7..5c51019 100644 --- a/IFLOW.md +++ b/IFLOW.md @@ -1,216 +1,121 @@ -# SmartisanNote.vue 项目概览 +# SmartisanNote.Remake - IFLOW 上下文 ## 项目简介 -这是一个基于 Vue 3 和 Vite 构建的单页 Web 应用（SPA），旨在模仿锤子科技（Smartisan）的便签应用。该项目使用 localStorage 进行本地数据持久化，支持便签的增删改查、文件夹管理、便签置顶、星标标记、基础设置（如云同步、深色模式）以及丰富的交互功能。 +这是一个基于 Vue 3 (Composition API) 和 Ionic Vue 的移动端便签应用，仿照锤子便签的设计风格。该应用支持富文本编辑、图片插入、便签管理（加星、置顶、删除至回收站）、文件夹分类以及 PWA 离线功能。 -## 技术栈 +## 核心技术栈 -* **核心框架**: Vue 3 (Composition API) -* **构建工具**: Vite -* **路由管理**: vue-router -* **状态管理**: Pinia (Vue 3 状态管理库) -* **UI 库**: 原生 CSS，使用了锤子便签的经典配色方案（定义在 `index.html` 的 CSS 变量中） -* **移动端支持**: Capacitor (用于构建 Android/iOS 应用) -* **样式预处理器**: Less -* **代码语言**: JavaScript (ES6+) -* **UI 组件库**: Ionic Framework -* **日期处理**: moment.js +- **Vue 3**: 使用 Composition API 构建用户界面。 +- **Vue Router**: 实现页面路由管理，采用 Hash 模式以支持静态部署。 +- **Pinia**: 用于全局状态管理（便签、文件夹、设置）。 +- **Vite**: 作为构建工具，提供快速的开发和构建体验。 +- **Vite Plugin PWA**: 支持将应用打包为 PWA，实现离线使用。 +- **Ionic Vue**: 提供移动端 UI 组件。 +- **localStorage**: 用于本地数据存储。 ## 项目结构 ``` -. -├── android/ # Capacitor Android 项目文件 -├── dist/ # 构建后的生产文件 -├── node_modules/ # 项目依赖 -├── public/ # 静态资源目录 -├── src/ -│ ├── common/ # 全局样式和通用工具 -│ ├── components/ # 可复用的 Vue 组件 (Header, NoteItem, FolderItem) -│ ├── pages/ # 页面级别的 Vue 组件 (NoteList, NoteEditor, Folder, Settings) -│ ├── stores/ # Pinia 状态管理 stores -│ │ └── useAppStore.js # 全局状态管理 store -│ ├── utils/ # 工具函数 -│ │ ├── dateUtils.js # 日期处理工具，基于 moment.js -│ │ └── storage.js # localStorage 封装，负责数据的读写 +SmartisanNote.Remake/ +├── android/ # Android 原生项目 (Capacitor) +├── public/ # 静态资源 +│ ├── assets/ # 应用图标、图片等资源 +│ └── icons/ # PWA 图标 +├── src/ # 源代码目录 │ ├── App.vue # 根组件 -│ └── main.js # 应用入口，初始化路由、Pinia 和挂载 -├── index.html # HTML 模板，包含 CSS 变量定义 -├── package.json # 项目元数据和脚本命令 -├── vite.config.js # Vite 构建配置 +│ ├── main.js # 应用入口文件 +│ ├── common/ # 公共样式 +│ ├── components/ # 可复用的 UI 组件 +│ ├── pages/ # 页面组件 +│ ├── stores/ # Pinia 状态管理 +│ └── utils/ # 工具函数 (日期处理、本地存储) +├── index.html # 主页面模板 +├── package.json # 项目依赖和脚本 +├── vite.config.js # Vite 配置文件 └── capacitor.config.json # Capacitor 配置文件 ``` -## 开发与构建命令 +## 核心功能模块 -* **安装依赖**: `npm install` -* **启动开发服务器**: `npm run dev` - * 默认端口: 3000 - * 基于 Vite，支持热更新。 -* **构建生产版本**: `npm run build` - * 使用 Vite 构建，并同步到 Capacitor 项目 (`npx cap sync`)。 -* **构建所有版本**: `npm run build:all` - * 构建标准版本和 PWA 版本 -* **部署PWA版本**: `npm run deploy:pwa` - * 构建并部署PWA版本到FTP服务器 -* **在 Android 设备上运行**: `npm run android` - * 需要预先配置好 Android 开发环境。 +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` 启动开发服务器。 -* **状态管理**: 使用 Pinia 进行全局状态管理，通过 `useAppStore` composable 函数访问状态。 -* **数据持久化**: 所有数据（便签、文件夹、设置）均通过 `src/utils/storage.js` 与 `localStorage` 进行交互。 -* **路由**: 使用 `vue-router` 和 `createWebHashHistory` 进行前端路由管理。 -* **UI 风格**: 颜色方案严格遵循 `index.html` 中定义的 CSS 变量，以保持锤子便签的视觉风格。 -* **组件组织**: 页面组件 (`pages/`) 和可复用组件 (`components/`) 分离，结构清晰。 -* **代码风格**: 采用标准的 Vue 3 Composition API 写法，使用 ES6 模块系统 (`import`/`export`)。 -* **日期处理**: 使用 moment.js 进行日期处理，通过 `src/utils/dateUtils.js` 统一管理日期格式化逻辑。 +### 构建标准版本 -## 样式 +```bash +npm run build +``` +构建产物位于 `dist/standard` 目录。 -* 全局样式文件是位于 `common/` 目录下的 `base.css`。 -* 使用 Codefun 原子类样式，用于快速布局。 -* 样式规范应遵循项目中已有的风格。 -* 使用 Less 作为 CSS 预处理器。 +### 构建 PWA 离线版本 -## JavaScript +```bash +npm run build:all +# 或者只构建 PWA +npm run deploy:pwa +``` +PWA 构建产物位于 `dist/offline` 目录。 -* 严格遵循ES6规范。 -* 遵循JavaScript函数式编程范式。 -* 方法类函数应该使用 `function` 进行定义。 -* 避免出现超过4个以上的 `ref`，超过4个则使用 `reactive`。 -* 全局变量都集中放置于代码顶部。 -* 变量名使用小驼峰命名法。 -* 常量名使用全大写。 -* 状态类变量命名参考 `isLogin`、`isOpen`。 -* 事件类方法命名参考 `onClick`、`onSelect`。 -* 变量都应该写有注释说明、类型说明。 -* `Promise` 方法使用 `async` `await` 写法，并进行容错处理。 -* 字符串拼接使用ES6的模板语法。 -* JavaScript规范应遵循项目中已有的风格。 +### 在 Android 设备上运行 -## 组件 +```bash +npm run android +``` +这需要配置好 Android 开发环境 (Android Studio, SDK 等)。 -* 全局组件放在 `components/` 目录下。 -* 页面独立组件放在页面根目录下的 `components/`。 -* 每个组件应该附带 `README.MD` 文档。 -* 组件编写应遵循项目中已有的风格。 +## 代码规范与约定 -### Header 组件 -* **动态按钮**: 根据页面状态显示不同的操作按钮（新建、保存、插入图片） -* **文件夹管理**: 支持文件夹展开/收起功能 - -### NoteItem 组件 -* **滑动交互**: 支持右滑显示删除按钮，带有阻尼效果 -* **状态切换**: 支持星标和置顶状态的切换 -* **视觉反馈**: 滑动时便签夹会切换状态，提供直观的交互反馈 -* **日期显示**: 显示格式化后的便签更新时间 - -### RichTextEditor 组件 -* **富文本编辑**: 支持多种文本格式（加粗、居中、待办事项、列表、标题、引用） -* **图片插入**: 支持插入图片功能 -* **图片删除**: 支持通过短按图片显示删除按钮，二次点击删除按钮执行删除操作 -* **图片拖拽排序**: 支持长按图片进行拖拽排序 -* **工具栏**: 提供浮动工具栏，支持格式化操作 - -## 页面 - -* 页面使用 Composition API (setup语法糖) 编写。 -* 注释、结构规范应遵循项目中已有的风格。 - -### NoteListPage -* **便签列表**: 显示所有便签，支持置顶便签优先显示 -* **文件夹管理**: 支持文件夹的展开和切换 -* **搜索功能**: 提供便签搜索功能 -* **交互反馈**: 显示便签总数和置顶便签数量 -* **智能日期显示**: 根据时间范围显示不同的日期格式 - * 今天：显示为 "今天 下午 4:00" - * 昨天：显示为 "昨天 下午 4:00" - * 超过两天但小于一周：显示为 "星期一 10/8 上午 3:00" - * 超过一周但小于一年：显示为 "10天前 9/20 下午 2:00" - * 超过一年：显示为 "635天前 2024/8/10 上午 9:00" - -### NoteEditorPage -* **编辑模式**: 支持新建和编辑便签 -* **富文本编辑**: 集成RichTextEditor组件，支持丰富的文本格式 -* **图片插入**: 支持通过工具栏插入图片 -* **图片删除**: 支持通过短按图片显示删除按钮，二次点击删除按钮执行删除操作 -* **状态管理**: 根据路由参数判断是新建还是编辑模式 -* **智能日期显示**: 根据时间范围显示不同的日期格式 - * 今天：显示为 "今天 下午 4:00" - * 昨天：显示为 "昨天 下午 4:00" - * 超过两天但小于一个月：显示为 "10/8 上午 3:00" - * 超过一个月：显示为 "2024/8/10 上午 9:00" - -## 状态管理 (Pinia) - -项目现在使用 Pinia 作为状态管理解决方案，主要特点包括： - -* **Store 定义**: 在 `src/stores/useAppStore.js` 中定义了全局状态 store -* **状态结构**: 包含 notes、folders 和 settings 三个主要状态 -* **Getters**: 提供了计算属性如 starredNotesCount 和 allNotesCount -* **Actions**: 包含所有状态变更操作，如 addNote、updateNote、deleteNote 等 -* **数据持久化**: 通过 storage.js 工具函数与 localStorage 进行数据交互 -* **Mock 数据**: 支持加载预设的 mock 数据用于开发和演示 -* **使用方式**: 在组件中通过 `const store = useAppStore()` 来访问状态和方法 - -## 新增功能特性 - -### 滑动交互 -* **阻尼效果**: 右滑超过阈值后提供阻尼效果，增强交互体验 -* **状态切换**: 滑动时便签夹会切换到展开状态，松开后根据位置决定是否保持展开 -* **视觉反馈**: 滑动过程中提供实时视觉反馈 - -### Mock 数据 -* **自动加载**: 当检测到无数据时自动加载预设的 mock 数据 -* **手动加载**: 可通过 URL 参数 `?mock=true` 强制加载 mock 数据 -* **丰富内容**: 包含多种类型的便签、文件夹和设置示例 -* **固定日期**: 使用固定的日期值确保数据一致性 - -### 增强的便签功能 -* **置顶支持**: 便签可以置顶显示在列表顶部 -* **图片标记**: 可以标记便签是否包含图片 -* **排序优化**: 置顶便签优先显示，按更新时间排序 - -### PWA 支持 -* **离线使用**: 支持构建PWA版本，可离线使用 -* **自动部署**: 支持一键构建并部署到FTP服务器 - -### 智能日期处理 -* **统一管理**: 通过 `dateUtils.js` 统一管理所有日期处理逻辑 -* **多格式支持**: 支持多种日期格式化方式以适应不同场景 -* **本地化显示**: 支持中文友好的日期时间显示 -* **场景适配**: 不同页面使用最适合的日期格式化规则 - -### 图片处理增强 -* **图片删除优化**: 通过二次点击机制避免误删，提升用户体验 -* **图片拖拽排序**: 支持长按图片进行拖拽排序，操作更直观 -* **事件冲突解决**: 优化了图片删除按钮与容器短按事件的冲突问题 \ No newline at end of file +- **组件化**: 应用遵循组件化开发模式，将 UI 拆分为可复用的组件。 +- **状态管理**: 使用 Pinia 进行全局状态管理，确保数据流清晰。 +- **本地存储**: 便签、文件夹和设置数据存储在浏览器的 `localStorage` 中。 +- **样式**: 使用 CSS 变量定义主题色和尺寸，便于维护和主题切换。 +- **路由**: 使用 Vue Router 管理页面导航。 \ No newline at end of file diff --git a/README.md b/README.md deleted file mode 100644 index b13a210..0000000 --- a/README.md +++ /dev/null @@ -1,103 +0,0 @@ -# 锤子便签（重制版） - -![项目截图](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 来帮助改进这个项目。 \ No newline at end of file diff --git a/history.txt b/history.txt deleted file mode 100644 index dfbeca8..0000000 --- a/history.txt +++ /dev/null @@ -1,80 +0,0 @@ -│ 1. Primary Request and Intent: │ -│ - The user explicitly requested to modify the RichTextEditor.vue component to use the vue-draggable-plus │ -│ library (https://www.npmjs.com/package/vue-draggable-plus) for implementing drag functionality for images. │ -│ - The intent was to replace the existing native HTML5 drag and drop implementation with the │ -│ vue-draggable-plus library while maintaining the same functionality. │ -│ │ -│ 2. Key Technical Concepts: │ -│ - Vue 3 Composition API │ -│ - vue-draggable-plus library for drag and drop functionality │ -│ - HTML5 native drag and drop APIs │ -│ - Contenteditable div manipulation │ -│ - Image handling in rich text editors │ -│ - Event handling for drag operations (dragstart, dragover, drop, dragend) │ -│ │ -│ 3. Files and Code Sections: │ -│ - E:\yuantao\SmartisanNote.VUE\src\components\RichTextEditor.vue │ -│ - This is the main file that was modified to implement vue-draggable-plus │ -│ - Modified the script setup section to import vDraggable from vue-draggable-plus │ -│ - Added a images ref to store image data for vue-draggable-plus │ -│ - Added draggableOptions configuration for the library │ -│ - Modified the template to use v-draggable directive │ -│ - Updated the insertImage function to add vue-draggable-plus attributes to images │ -│ - Updated the adjustExistingImages function to work with vue-draggable-plus │ -│ - Modified drag event handlers to be compatible with vue-draggable-plus │ -│ - Important code snippet for the template modification: │ -│ ```html │ -│
│ -│ ``` │ -│ - Important code snippet for the script setup modification: │ -│ ```javascript │ -│ import { vDraggable } from 'vue-draggable-plus' │ -│ const images = ref([]) // Store images for vue-draggable-plus │ -│ const draggableOptions = { │ -│ animation: 200, │ -│ group: 'images', │ -│ ghostClass: 'dragging', │ -│ dragClass: 'dragging', │ -│ onEnd: (evt) => { │ -│ console.log('Drag end event:', evt) │ -│ handleImageDragEnd(evt) │ -│ } │ -│ } │ -│ ``` │ -│ │ -│ 4. Errors and fixes: │ -│ - No specific errors were encountered during the implementation process. The vue-draggable-plus library │ -│ was already installed, and the implementation was done incrementally to maintain compatibility with │ -│ existing functionality. │ -│ │ -│ 5. Problem Solving: │ -│ - The main challenge was integrating vue-draggable-plus with an existing contenteditable div │ -│ implementation that already had native drag functionality │ -│ - The solution involved maintaining the existing drag functions while adding vue-draggable-plus │ -│ attributes and data structures │ -│ - Care was taken to ensure backward compatibility and preserve existing functionality │ -│ │ -│ 6. All user messages: │ -│ - "@src\components\RichTextEditor.vue │ -│ 把拖拽功能改为使用(https://www.npmjs.com/package/vue-draggable-plus)这个库来实现" │ -│ │ -│ 7. Pending Tasks: │ -│ - Test the drag functionality to ensure it works correctly with the vue-draggable-plus implementation │ -│ │ -│ 8. Current Work: │ -│ - The implementation of vue-draggable-plus in the RichTextEditor.vue component has been completed │ -│ - The last action was preparing to test the functionality by running the development server │ -│ - All necessary modifications to integrate vue-draggable-plus have been made: │ -│ 1. Added vDraggable import │ -│ 2. Created images ref for storing image data │ -│ 3. Added draggableOptions configuration │ -│ 4. Modified template to use v-draggable directive │ -│ 5. Updated insertImage function to work with vue-draggable-plus │ -│ 6. Updated adjustExistingImages function to work with vue-draggable-plus │ -│ 7. Modified drag event handlers for compatibility │ -│ │ -│ 9. Optional Next Step: │ -│ The next step would be to actually run the development server to test the implementation: │ -│ "Now I'll test the drag functionality by running the development server" │ \ No newline at end of file diff --git a/update.txt b/update.txt new file mode 100644 index 0000000..e69de29