diff --git a/IFLOW.md b/IFLOW.md index d55e474..2d6c48e 100644 --- a/IFLOW.md +++ b/IFLOW.md @@ -15,6 +15,7 @@ * **样式预处理器**: Less * **代码语言**: JavaScript (ES6+) * **UI 组件库**: Ionic Framework +* **日期处理**: moment.js ## 项目结构 @@ -31,6 +32,7 @@ │ ├── stores/ # Pinia 状态管理 stores │ │ └── useAppStore.js # 全局状态管理 store │ ├── utils/ # 工具函数 +│ │ ├── dateUtils.js # 日期处理工具,基于 moment.js │ │ └── storage.js # localStorage 封装,负责数据的读写 │ ├── App.vue # 根组件 │ └── main.js # 应用入口,初始化路由、Pinia 和挂载 @@ -48,8 +50,8 @@ * 基于 Vite,支持热更新。 * **构建生产版本**: `npm run build` * 使用 Vite 构建,并同步到 Capacitor 项目 (`npx cap sync`)。 -* **构建PWA版本**: `npm run build:pwa` - * 构建PWA版本的应用 +* **构建所有版本**: `npm run build:all` + * 构建标准版本和 PWA 版本 * **部署PWA版本**: `npm run deploy:pwa` * 构建并部署PWA版本到FTP服务器 * **在 Android 设备上运行**: `npm run android` @@ -77,6 +79,11 @@ * **云同步**: 支持云同步设置(待实现) * **深色模式**: 支持深色模式切换(待完善) +### 日期时间处理 +* **智能格式化**: 根据时间范围自动格式化日期显示 +* **多场景适配**: 不同页面使用不同的日期格式化规则 +* **本地化支持**: 支持中文日期格式显示 + ## 代码规范与开发约定 * **状态管理**: 使用 Pinia 进行全局状态管理,通过 `useAppStore` composable 函数访问状态。 @@ -85,6 +92,7 @@ * **UI 风格**: 颜色方案严格遵循 `index.html` 中定义的 CSS 变量,以保持锤子便签的视觉风格。 * **组件组织**: 页面组件 (`pages/`) 和可复用组件 (`components/`) 分离,结构清晰。 * **代码风格**: 采用标准的 Vue 3 Composition API 写法,使用 ES6 模块系统 (`import`/`export`)。 +* **日期处理**: 使用 moment.js 进行日期处理,通过 `src/utils/dateUtils.js` 统一管理日期格式化逻辑。 ## 样式 @@ -124,6 +132,7 @@ * **滑动交互**: 支持右滑显示删除按钮,带有阻尼效果 * **状态切换**: 支持星标和置顶状态的切换 * **视觉反馈**: 滑动时便签夹会切换状态,提供直观的交互反馈 +* **日期显示**: 显示格式化后的便签更新时间 ### RichTextEditor 组件 * **富文本编辑**: 支持多种文本格式(加粗、居中、待办事项、列表、标题、引用) @@ -140,12 +149,23 @@ * **文件夹管理**: 支持文件夹的展开和切换 * **搜索功能**: 提供便签搜索功能 * **交互反馈**: 显示便签总数和置顶便签数量 +* **智能日期显示**: 根据时间范围显示不同的日期格式 + * 今天:显示为 "今天 下午 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) @@ -170,6 +190,7 @@ * **自动加载**: 当检测到无数据时自动加载预设的 mock 数据 * **手动加载**: 可通过 URL 参数 `?mock=true` 强制加载 mock 数据 * **丰富内容**: 包含多种类型的便签、文件夹和设置示例 +* **固定日期**: 使用固定的日期值确保数据一致性 ### 增强的便签功能 * **置顶支持**: 便签可以置顶显示在列表顶部 @@ -178,4 +199,10 @@ ### PWA 支持 * **离线使用**: 支持构建PWA版本,可离线使用 -* **自动部署**: 支持一键构建并部署到FTP服务器 \ No newline at end of file +* **自动部署**: 支持一键构建并部署到FTP服务器 + +### 智能日期处理 +* **统一管理**: 通过 `dateUtils.js` 统一管理所有日期处理逻辑 +* **多格式支持**: 支持多种日期格式化方式以适应不同场景 +* **本地化显示**: 支持中文友好的日期时间显示 +* **场景适配**: 不同页面使用最适合的日期格式化规则 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index a49559a..eb0ac12 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@vue/compiler-sfc": "^3.5.22", "basic-ftp": "^5.0.5", "ionicons": "^7.4.0", + "moment": "^2.30.1", "pinia": "^3.0.3", "vue": "^3.5.22", "vue-router": "^4.5.1" @@ -8868,6 +8869,15 @@ "integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==", "license": "MIT" }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "license": "MIT", + "engines": { + "node": "*" + } + }, "node_modules/mrmime": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz", diff --git a/package.json b/package.json index 3b122b7..0de50b6 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@vue/compiler-sfc": "^3.5.22", "basic-ftp": "^5.0.5", "ionicons": "^7.4.0", + "moment": "^2.30.1", "pinia": "^3.0.3", "vue": "^3.5.22", "vue-router": "^4.5.1" diff --git a/src/components/NoteItem.vue b/src/components/NoteItem.vue index 52589a4..57de9d6 100644 --- a/src/components/NoteItem.vue +++ b/src/components/NoteItem.vue @@ -30,6 +30,7 @@