SmartisanNote.Remake/IFLOW.md

SmartisanNote.vue 项目概览

项目简介

这是一个基于 Vue 3 和 Vite 构建的单页 Web 应用（SPA），旨在模仿锤子科技（Smartisan）的便签应用。该项目使用 localStorage 进行本地数据持久化，支持便签的增删改查、文件夹管理和基础设置（如云同步、深色模式）。

技术栈

• 核心框架: Vue 3 (Composition API)
• 构建工具: Vite
• 路由管理: vue-router
• 状态管理: Vue 3 响应式系统 (reactive, provide, inject)
• UI 库: 原生 CSS，使用了锤子便签的经典配色方案（定义在 index.html 的 CSS 变量中）
• 移动端支持: Capacitor (用于构建 Android/iOS 应用)
• 代码语言: JavaScript (ES6+)

项目结构

J:\git\SmartisanNote.vue
├── android/                 # Capacitor Android 项目文件
├── dist/                    # 构建后的生产文件
├── node_modules/            # 项目依赖
├── src/
│   ├── components/          # 可复用的 Vue 组件 (Header, NoteItem, FolderItem)
│   ├── pages/               # 页面级别的 Vue 组件 (NoteList, NoteDetail, NoteEditor, Folder, Settings)
│   ├── utils/               # 工具函数和数据上下文管理
│   │   ├── AppDataContext.js # 全局状态管理（provide/inject）和数据操作函数
│   │   └── storage.js       # localStorage 封装，负责数据的读写
│   ├── App.vue              # 根组件，包裹 AppDataProvider
│   └── main.js              # 应用入口，初始化路由和挂载
├── index.html               # HTML 模板，包含 CSS 变量定义
├── 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 preview
• 在 Android 设备上运行: npm run android
  • 需要预先配置好 Android 开发环境。
• 测试: npm run test
  • 当前脚本未定义具体测试命令。

开发规范与约定

• 状态管理: 使用 AppDataContext.js 中的 provide/inject 模式进行全局状态管理，避免使用 Vuex 或 Pinia。
• 数据持久化: 所有数据（便签、文件夹、设置）均通过 src/utils/storage.js 与 localStorage 进行交互。
• 路由: 使用 vue-router 和 createWebHashHistory 进行前端路由管理。
• UI 风格: 颜色方案严格遵循 index.html 中定义的 CSS 变量，以保持锤子便签的视觉风格。
• 组件组织: 页面组件 (pages/) 和可复用组件 (components/) 分离，结构清晰。
• 代码风格: 采用标准的 Vue 3 Composition API 写法，使用 ES6 模块系统 (import/export)。