You've already forked SmartisanNote.Remake
更新了IFLOW上下文
This commit is contained in:
60
IFLOW.md
60
IFLOW.md
@@ -2,7 +2,7 @@
|
||||
|
||||
## 项目简介
|
||||
|
||||
这是一个基于 Vue 3 和 Vite 构建的单页 Web 应用(SPA),旨在模仿锤子科技(Smartisan)的便签应用。该项目使用 localStorage 进行本地数据持久化,支持便签的增删改查、文件夹管理和基础设置(如云同步、深色模式)。
|
||||
这是一个基于 Vue 3 和 Vite 构建的单页 Web 应用(SPA),旨在模仿锤子科技(Smartisan)的便签应用。该项目使用 localStorage 进行本地数据持久化,支持便签的增删改查、文件夹管理、便签置顶、星标标记、基础设置(如云同步、深色模式)以及丰富的交互功能。
|
||||
|
||||
## 技术栈
|
||||
|
||||
@@ -12,7 +12,9 @@
|
||||
* **状态管理**: Pinia (Vue 3 状态管理库)
|
||||
* **UI 库**: 原生 CSS,使用了锤子便签的经典配色方案(定义在 `index.html` 的 CSS 变量中)
|
||||
* **移动端支持**: Capacitor (用于构建 Android/iOS 应用)
|
||||
* **样式预处理器**: Less
|
||||
* **代码语言**: JavaScript (ES6+)
|
||||
* **UI 组件库**: Ionic Framework
|
||||
|
||||
## 项目结构
|
||||
|
||||
@@ -52,6 +54,27 @@
|
||||
* **测试**: `npm run test`
|
||||
* 当前脚本未定义具体测试命令。
|
||||
|
||||
## 核心功能
|
||||
|
||||
### 便签管理
|
||||
* **增删改查**: 支持创建、查看、编辑和删除便签
|
||||
* **星标标记**: 可以将重要便签标记为星标便签
|
||||
* **置顶功能**: 支持将便签置顶显示在列表顶部
|
||||
* **图片标记**: 可以标记便签中是否包含图片
|
||||
* **滑动删除**: 支持右滑显示删除按钮,带有阻尼效果的交互体验
|
||||
|
||||
### 文件夹管理
|
||||
* **分类组织**: 支持创建文件夹对便签进行分类管理
|
||||
* **默认文件夹**: 提供"全部便签"、"加星便签"、"回收站"等默认文件夹
|
||||
|
||||
### 搜索功能
|
||||
* **全文搜索**: 支持按标题和内容搜索便签
|
||||
* **实时过滤**: 搜索结果实时更新
|
||||
|
||||
### 设置功能
|
||||
* **云同步**: 支持云同步设置(待实现)
|
||||
* **深色模式**: 支持深色模式切换(待完善)
|
||||
|
||||
## 代码规范与开发约定
|
||||
|
||||
* **状态管理**: 使用 Pinia 进行全局状态管理,通过 `useAppStore` composable 函数访问状态。
|
||||
@@ -64,8 +87,9 @@
|
||||
## 样式
|
||||
|
||||
* 全局样式文件是位于 `common/` 目录下的 `base.css`。
|
||||
* `common.css` 提供了codefun原子类样式,用于快速布局。
|
||||
* 使用 Codefun 原子类样式,用于快速布局。
|
||||
* 样式规范应遵循项目中已有的风格。
|
||||
* 使用 Less 作为 CSS 预处理器。
|
||||
|
||||
## JavaScript
|
||||
|
||||
@@ -85,17 +109,27 @@
|
||||
|
||||
## 组件
|
||||
|
||||
* 项目集成了 `ionic framework` 组件库。
|
||||
* 全局组件放在 `components/` 目录下。
|
||||
* 页面独立组件放在页面根目录下的 `components/`。
|
||||
* 每个组件应该附带 `README.MD` 文档。
|
||||
* 组件编写应遵循项目中已有的风格。
|
||||
|
||||
### NoteItem 组件
|
||||
* **滑动交互**: 支持右滑显示删除按钮,带有阻尼效果
|
||||
* **状态切换**: 支持星标和置顶状态的切换
|
||||
* **视觉反馈**: 滑动时便签夹会切换状态,提供直观的交互反馈
|
||||
|
||||
## 页面
|
||||
|
||||
* 页面使用 Composition API (setup语法糖) 编写。
|
||||
* 注释、结构规范应遵循项目中已有的风格。
|
||||
|
||||
### NoteListPage
|
||||
* **便签列表**: 显示所有便签,支持置顶便签优先显示
|
||||
* **文件夹管理**: 支持文件夹的展开和切换
|
||||
* **搜索功能**: 提供便签搜索功能
|
||||
* **交互反馈**: 显示便签总数和置顶便签数量
|
||||
|
||||
## 状态管理 (Pinia)
|
||||
|
||||
项目现在使用 Pinia 作为状态管理解决方案,主要特点包括:
|
||||
@@ -105,4 +139,22 @@
|
||||
* **Getters**: 提供了计算属性如 starredNotesCount 和 allNotesCount
|
||||
* **Actions**: 包含所有状态变更操作,如 addNote、updateNote、deleteNote 等
|
||||
* **数据持久化**: 通过 storage.js 工具函数与 localStorage 进行数据交互
|
||||
* **使用方式**: 在组件中通过 `const store = useAppStore()` 来访问状态和方法
|
||||
* **Mock 数据**: 支持加载预设的 mock 数据用于开发和演示
|
||||
* **使用方式**: 在组件中通过 `const store = useAppStore()` 来访问状态和方法
|
||||
|
||||
## 新增功能特性
|
||||
|
||||
### 滑动交互
|
||||
* **阻尼效果**: 右滑超过阈值后提供阻尼效果,增强交互体验
|
||||
* **状态切换**: 滑动时便签夹会切换到展开状态,松开后根据位置决定是否保持展开
|
||||
* **视觉反馈**: 滑动过程中提供实时视觉反馈
|
||||
|
||||
### Mock 数据
|
||||
* **自动加载**: 当检测到无数据时自动加载预设的 mock 数据
|
||||
* **手动加载**: 可通过 URL 参数 `?mock=true` 强制加载 mock 数据
|
||||
* **丰富内容**: 包含多种类型的便签、文件夹和设置示例
|
||||
|
||||
### 增强的便签功能
|
||||
* **置顶支持**: 便签可以置顶显示在列表顶部
|
||||
* **图片标记**: 可以标记便签是否包含图片
|
||||
* **排序优化**: 置顶便签优先显示,按更新时间排序
|
||||
Reference in New Issue
Block a user