Matrix Time — 离线优先的 Neobrutalism 风格智能时间矩阵系统

Matrix Time 是一款基于艾森豪威尔法则（Eisenhower Matrix）设计的高交互性个人时间矩阵管理系统。系统采用现代 React 19 开发框架与最新的 Tailwind CSS v4 构建，采用独特的 Neobrutalism（新粗野主义）拟物化手绘设计风格。应用集成了渐进式 Web 应用（PWA）规范，支持完全离线的本地自愈持久化，并集成了大模型辅助调度接口，为用户提供智能时间管理支持。

---

核心技术特性

1. 新粗野主义 (Neobrutalism) 拟物化风格与交互动效

• 手绘卡片物理拟真：系统整体采用极粗边框、黑白色块阴影的视觉表达。每个任务卡片在初始化时，均通过算法动态随机计算并维持一个微小的旋转倾角（-1.0° 至 +1.0°），模拟真实的物理卡片贴感。
• 高阶布局过渡动画：利用 framer-motion（motion/react）库，在任务状态切换、跨象限拖放、删除等操作中引入无缝的动画过渡效果（如 layout 与 AnimatePresence），显著提升用户体验。

2. 凌晨 4:00 日夜冷滚动与固化习惯机制 (Rollover & Fixed Habits)

• 日夜交替判定算法：为了符合个人实际的作息周期，系统以每日凌晨 4:00 作为时间交替分界点，避免了传统的 0:00 强制截断问题。
• 常驻习惯固化模型：引入“大头针（📌）”习惯固化机制。在凌晨 4:00 重新加载应用执行冷启动时，系统会自动将已过期的昨日普通任务归档至历史回顾中，而将标记为固化习惯（isFixedRule）的任务重置未完成状态并深拷贝克隆至今日清单，实现周期性习惯的自动化追踪。

3. PWA (Progressive Web App) 原生全屏应用支持

• 独立进程进程全屏：遵循现代 PWA 规范，支持将应用脱离浏览器壳，提取并安装为各操作系统（PC/Android/iOS）上的最高级原生独立应用程序（Standalone Mode）。
• 跨平台安装引导策略：在设置控制台中，针对 iOS 设备，系统会自动弹出引导添加至主屏幕的指导遮罩；针对支持的标准平台，系统拦截并保存 beforeinstallprompt 事件，由 UI 事件手动触发一键本地化安装。
• 无状态离线存储：结合系统级别的 Service Worker，实现离线资源本地极速响应，业务数据通过有状态的 LocalStorage 进行静默本地双写持久化，无网络状态下功能完全可用。

4. HTML5 原生拖拽物理排程总线

• 低延迟事件映射：系统利用 HTML5 原生的 draggable 及 onDragStart/onDrop 传输通道，与 React 状态机进行高效绑定。
• 跨象限状态重组：用户拖拽任务卡片放入指定四象限区域时，可实现微秒级的状态变更并自愈更新内存数据库与本地缓存，消除了繁琐的表单选择交互。

5. AI 大模型智能生产力接口

• Gemini 深度开发集成：项目引入了 @google/genai 依赖，为开发智能化的时间分析与调度决策提供了核心链路支持。

---

技术架构

模块维度	技术选型与实现标准
开发框架	React 19 (采用组件化响应式状态管理架构)
构建工具	Vite 6 + TypeScript (具备类型安全的 ESM 构建流)
CSS 框架	Tailwind CSS v4 (基于 @tailwindcss/vite 构建的高速即时编译方案)
动效库	Motion (原 Framer Motion，提供弹性布局动画)
持久化层	Web LocalStorage 离线物理持久化机制
AI 支持	Google Gemini SDK (@google/genai v1.29.0)

---

项目目录结构

.
├── index.html                      # PWA 入口与视口适配配置
├── package.json                    # 项目元数据与最新前端依赖管理
├── tsconfig.json                   # TypeScript 编译器规则声明
├── vite.config.ts                  # Vite 编译、PWA 生成器与宿主端口路由配置
├── public/                         # 静态公共资源目录 (包含 PWA 配置文件与图标)
└── src/                            # 源代码主目录
    ├── App.tsx                     # 核心控制器 (包含四象限视图、PWA 周期管理、模态框及全量交互逻辑)
    ├── main.tsx                    # 挂载入口与系统运行时引导
    ├── index.css                   # 新粗野主义蜡笔色系样式及 Service Worker 动画过渡样式
    └── utils/                      # 基础通用工具方法目录

---

运行与配置指南

1. 环境准备

确保您的开发环境中安装了 Node.js (推荐 v18 或更高版本)。

2. 依赖安装

在项目根目录下执行以下命令以完成开发包的安装：

npm install

3. 配置本地 API 密钥

复制根目录下的 .env.example 文件并重命名为 .env.local：

cp .env.example .env.local

在 .env.local 中填写您的 Gemini API 密钥，用以支持 AI 相关功能开发：

VITE_GEMINI_API_KEY=your_gemini_api_key_here

4. 启动开发服务器

本地开发环境下启动 Vite 热重启监听：

npm run dev

启动后，可在浏览器或开发者工具中通过 http://localhost:3000 访问应用。

5. 构建生产包

运行以下命令编译并生成压缩优化后的生产级静态资源文件：

npm run build

编译产物将统一输出在当前目录的 dist/ 文件夹下。