所有页面的语法改写为setup形式；

修改了Header组件的样式、布局；
更新了IFLOW上下文；
添加了全局样式；
添加了pinia状态管理；

IFLOW.md

@@ -9,7 +9,7 @@
 *   **核心框架**: Vue 3 (Composition API)
 *   **构建工具**: Vite
 *   **路由管理**: vue-router
-*   **状态管理**: Vue 3 响应式系统 (`reactive`, `provide`, `inject`)
+*   **状态管理**: Pinia (Vue 3 状态管理库)
 *   **UI 库**: 原生 CSS，使用了锤子便签的经典配色方案（定义在 `index.html` 的 CSS 变量中）
 *   **移动端支持**: Capacitor (用于构建 Android/iOS 应用)
 *   **代码语言**: JavaScript (ES6+)
@@ -17,18 +17,21 @@
 ## 项目结构
 
 ```
-J:\git\SmartisanNote.vue
+.
 ├── android/                 # Capacitor Android 项目文件
 ├── dist/                    # 构建后的生产文件
 ├── node_modules/            # 项目依赖
+├── public/                  # 静态资源目录
 ├── src/
+│   ├── common/              # 全局样式和通用工具
 │   ├── components/          # 可复用的 Vue 组件 (Header, NoteItem, FolderItem)
 │   ├── pages/               # 页面级别的 Vue 组件 (NoteList, NoteDetail, NoteEditor, Folder, Settings)
-│   ├── utils/               # 工具函数和数据上下文管理
-│   │   ├── AppDataContext.js # 全局状态管理（provide/inject）和数据操作函数
+│   ├── stores/              # Pinia 状态管理 stores
+│   │   └── useAppStore.js   # 全局状态管理 store
+│   ├── utils/               # 工具函数
 │   │   └── storage.js       # localStorage 封装，负责数据的读写
-│   ├── App.vue              # 根组件，包裹 AppDataProvider
-│   └── main.js              # 应用入口，初始化路由和挂载
+│   ├── App.vue              # 根组件
+│   └── main.js              # 应用入口，初始化路由、Pinia 和挂载
 ├── index.html               # HTML 模板，包含 CSS 变量定义
 ├── package.json             # 项目元数据和脚本命令
 ├── vite.config.js           # Vite 构建配置
@@ -49,11 +52,57 @@ J:\git\SmartisanNote.vue
 *   **测试**: `npm run test`
     *   当前脚本未定义具体测试命令。
 
-## 开发规范与约定
+## 代码规范与开发约定
 
-*   **状态管理**: 使用 `AppDataContext.js` 中的 `provide`/`inject` 模式进行全局状态管理，避免使用 Vuex 或 Pinia。
+*   **状态管理**: 使用 Pinia 进行全局状态管理，通过 `useAppStore` composable 函数访问状态。
 *   **数据持久化**: 所有数据（便签、文件夹、设置）均通过 `src/utils/storage.js` 与 `localStorage` 进行交互。
 *   **路由**: 使用 `vue-router` 和 `createWebHashHistory` 进行前端路由管理。
 *   **UI 风格**: 颜色方案严格遵循 `index.html` 中定义的 CSS 变量，以保持锤子便签的视觉风格。
 *   **组件组织**: 页面组件 (`pages/`) 和可复用组件 (`components/`) 分离，结构清晰。
-*   **代码风格**: 采用标准的 Vue 3 Composition API 写法，使用 ES6 模块系统 (`import`/`export`)。
+*   **代码风格**: 采用标准的 Vue 3 Composition API 写法，使用 ES6 模块系统 (`import`/`export`)。
+
+## 样式
+
+*   全局样式文件是位于 `common/` 目录下的 `base.css`。
+*   `common.css` 提供了codefun原子类样式，用于快速布局。
+*   样式规范应遵循项目中已有的风格。
+
+## JavaScript
+
+*   严格遵循ES6规范。
+*   遵循JavaScript函数式编程范式。
+*   方法类函数应该使用 `function` 进行定义。
+*   避免出现超过4个以上的 `ref`，超过4个则使用 `reactive`。
+*   全局变量都集中放置于代码顶部。
+*   变量名使用小驼峰命名法。
+*   常量名使用全大写。
+*   状态类变量命名参考 `isLogin`、`isOpen`。
+*   事件类方法命名参考 `onClick`、`onSelect`。
+*   变量都应该写有注释说明、类型说明。
+*   `Promise` 方法使用 `async` `await` 写法，并进行容错处理。
+*   字符串拼接使用ES6的模板语法。
+*   JavaScript规范应遵循项目中已有的风格。
+
+## 组件
+
+*   项目集成了 `ionic framework` 组件库。
+*   全局组件放在 `components/` 目录下。
+*   页面独立组件放在页面根目录下的 `components/`。
+*   每个组件应该附带 `README.MD` 文档。
+*   组件编写应遵循项目中已有的风格。
+
+## 页面
+
+*   页面使用 Composition API (setup语法糖) 编写。
+*   注释、结构规范应遵循项目中已有的风格。
+
+## 状态管理 (Pinia)
+
+项目现在使用 Pinia 作为状态管理解决方案，主要特点包括：
+
+*   **Store 定义**: 在 `src/stores/useAppStore.js` 中定义了全局状态 store
+*   **状态结构**: 包含 notes、folders 和 settings 三个主要状态
+*   **Getters**: 提供了计算属性如 starredNotesCount 和 allNotesCount
+*   **Actions**: 包含所有状态变更操作，如 addNote、updateNote、deleteNote 等
+*   **数据持久化**: 通过 storage.js 工具函数与 localStorage 进行数据交互
+*   **使用方式**: 在组件中通过 `const store = useAppStore()` 来访问状态和方法