一个高效使用cursor开发项目的方法，怎么让 AI 写的代码不跑题？效果嘎嘎香

最近又用 cursor 做了一个小应用，番茄时钟，用来管理自己的时间，提高效率。然后使用 cursor 开发的过程中。有了一些新的感悟。找打了一条可以让 Curosr不跑题的办法。

生成一份详细的项目资料。然后配置.cursorrule。让Cursor每次开发都参考资料，并自动更新。当然这些也都可以让 AI 帮你完成。下面的用 3 个步骤完成配置。

(ps：这是一个小项目，大型的项目可能效果暂不明确。但是对一个纯用 Cursor开发的小应用，效果嘎嘎香，再也不跑题了)

给项目写一份详细的资料

指令:

写一个详细的项目资料project-overview.md ，等我下次再提需求时，你可以参考快速熟悉项目。

给项目配置一个 cursorrule

指令:

给项目配置一个 cursorrule

让 rule 自动参考以及更新project-overview.md

指令

优化 rule，目的是每当我提问的时候，可以参考project-overview.md学习项目资料，当 AI 修改完成时 ，更新project-overview.md文件。以保持对话的连续性和稳定性。

这样每次让 cursor修改功能时，他都会记录到文件中，可以保持AI 对话的连续性，也方便自己复盘。

附上我的cursor rule

json 复制代码

{
  "editor": {
    "formatOnSave": true,
    "tabSize": 2,
    "insertSpaces": true,
    "defaultFormatter": "prettier"
  },
  "typescript": {
    "preferences": {
      "quoteStyle": "single",
      "importModuleSpecifierPreference": "relative",
      "jsxAttributeCompletionStyle": "auto"
    },
    "suggest": {
      "completeFunctionCalls": true,
      "autoImports": true
    },
    "updateImportsOnFileMove": "always",
    "format": {
      "semicolons": true,
      "singleQuote": true,
      "trailingComma": "es5"
    }
  },
  "javascript": {
    "preferences": {
      "quoteStyle": "single"
    },
    "format": {
      "semicolons": true,
      "singleQuote": true
    }
  },
  "prettier": {
    "singleQuote": true,
    "semi": true,
    "tabWidth": 2,
    "trailingComma": "es5",
    "printWidth": 100,
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "arrowParens": "avoid"
  },
  "eslint": {
    "run": "onSave",
    "packageManager": "npm"
  },
  "files": {
    "exclude": [
      "node_modules",
      "dist",
      "build",
      "coverage",
      ".git",
      "dev-dist"
    ],
    "watcherExclude": {
      "**/node_modules/**": true,
      "**/dist/**": true,
      "**/build/**": true
    },
    "associations": {
      "*.tsx": "typescriptreact",
      "*.ts": "typescript",
      "*.jsx": "javascriptreact",
      "*.js": "javascript"
    }
  },
  "search": {
    "exclude": {
      "**/node_modules": true,
      "**/dist": true,
      "**/build": true
    }
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "project": {
    "name": "番茄时间管理应用",
    "patterns": [
      "**/*.ts",
      "**/*.tsx",
      "**/*.js",
      "**/*.jsx",
      "**/*.json",
      "**/*.css",
      "**/*.html"
    ],
    "ignore": [
      "node_modules",
      "dist",
      "build",
      "coverage",
      ".git",
      "dev-dist"
    ],
    "documentation": {
      "mainFile": "project-overview.md",
      "autoReference": true,
      "autoUpdate": true
    }
  },
  "cursor": {
    "ai": {
      "enableCompletion": true,
      "enableChat": true,
      "contextFiles": [
        "project-overview.md"
      ],
      "hooks": {
        "onConversationStart": [
          {
            "action": "readFile",
            "file": "project-overview.md"
          }
        ],
        "onCodeModification": [
          {
            "action": "updateDocumentation",
            "file": "project-overview.md"
          }
        ]
      },
      "customInstructions": "在每次对话开始时，请先阅读 project-overview.md 文件以了解项目结构和功能。在完成代码修改后，请更新 project-overview.md 文件，添加新的功能或修改的内容。保持文档的准确性和最新状态。"
    }
  }
}

以及project-overview

markdown 复制代码

# 番茄时间管理应用 - 项目概述

## 技术栈
- 前端框架：React + TypeScript
- UI组件库：Ant Design
- 路由管理：React Router
- 构建工具：Vite
- 数据存储：localStorage

## 项目结构
```
src/
├── assets/         # 静态资源
├── components/     # UI组件
│   ├── Timer.tsx   # 计时器组件
│   ├── Statistics.tsx
│   ├── TimerRecords.tsx
│   ├── CategoryManager.tsx
│   ├── Settings.tsx
│   └── ...
├── hooks/          # 自定义钩子
│   ├── useTimer.ts # 计时器逻辑
│   ├── useCategories.ts
│   ├── useSettings.ts
│   ├── useStatistics.ts
│   ├── useTimerRecords.ts
│   └── useTagHistory.ts
├── pages/          # 页面组件
│   └── Home.tsx
├── services/       # 服务
│   └── TimerService.ts # 计时器服务（单例模式）
├── store/          # 状态管理
│   └── AppContext.tsx
├── types/          # 类型定义
│   └── index.ts
├── utils/          # 工具函数
├── App.tsx         # 应用入口
└── main.tsx        # 渲染入口
```

## 核心功能与实现

### 1. 计时器功能 (Timer.tsx, useTimer.ts, TimerService.ts)
- **状态管理** ：使用 `useTimer` 钩子管理计时器状态，包括工作/休息/暂停/空闲
- **倒计时逻辑** ：使用 `setInterval` 实现倒计时，支持暂停和恢复
- **通知功能** ：计时结束时发送系统通知
- **画中画模式** ：支持在浏览器中使用画中画模式显示计时器
- **标签功能** ：可以为每次计时添加自定义标签
- **跨页面计时** ：使用单例模式的 TimerService 确保在页面切换时计时器继续运行
- **事件系统** ：使用发布-订阅模式实现计时器事件通知
- **状态持久化** ：定期将计时器状态保存到 localStorage，确保页面刷新后能恢复状态
- **暂停状态UI** ：在计时器暂停时同时显示继续和重置按钮，提升用户体验
- **智能记录保存** ：重置计时器时，如果已计时超过3分钟，将调用complate保存记录；否则不保存

### 2. 数据管理 (AppContext.tsx)
- **全局状态** ：使用 Context API 管理应用状态
- **数据持久化** ：所有数据存储在 localStorage 中
- **状态类型** ：
  - `TimerRecord`: 记录每次计时的详细信息
  - `CategoryType`: 分类信息
  - `TimerSettings`: 计时器设置
  - `Statistics`: 统计数据

### 3. 分类管理 (CategoryManager.tsx, useCategories.ts)
- 支持创建、编辑和删除分类
- 每个分类有名称和颜色标识
- 默认提供一个"默认"分类

### 4. 记录管理 (TimerRecords.tsx, useTimerRecords.ts)
- 记录每次计时的开始时间、结束时间、持续时间、类型和分类
- 支持按日期和分类筛选记录
- 支持删除记录

### 5. 统计功能 (Statistics.tsx, useStatistics.ts)
- 统计总工作时间和休息时间
- 按日期统计工作和休息时间
- 按分类统计工作时间
- 提供可视化图表展示统计数据

### 6. 设置功能 (Settings.tsx, useSettings.ts)
- 自定义工作和休息时长
- 设置是否自动开始下一个工作/休息周期
- 重置设置到默认值

## 数据结构

### TimerRecord (计时记录)
```typescript
{
  id: string;
  startTime: string;
  endTime: string;
  duration: number; // 持续时间（分钟）
  type: 'work' | 'break'; // 工作或休息
  categoryId: string | null; // 分类ID
  completed: boolean; // 是否完成
  label?: string; // 自定义标签/备注
}
```

### CategoryType (分类)
```typescript
{
  id: string;
  name: string;
  color: string;
}
```

### TimerSettings (设置)
```typescript
{
  workDuration: number; // 工作时长（分钟）
  breakDuration: number; // 休息时长（分钟）
  autoStartBreak: boolean; // 自动开始休息
  autoStartWork: boolean; // 自动开始工作
}
```

### TimerState (计时器状态)
```typescript
{
  state: 'idle' | 'working' | 'breaking' | 'paused';
  timeLeft: number;
  isActive: boolean;
  currentSession: TimerRecord | null;
  selectedCategoryId: string;
  label: string;
}
```

## 最近修复和改进
- 计时器完成处理逻辑：在计时器完成时正确清除当前会话状态，避免状态不一致问题
- 跨页面计时功能：实现了 TimerService 单例服务，确保在页面切换时计时器继续运行
- 事件系统：使用发布-订阅模式实现计时器事件通知，提高组件间通信效率
- 暂停状态UI优化：在计时器暂停时同时显示继续和重置按钮，提升用户体验
- 智能记录保存：重置计时器时，根据已计时时长决定是否记录
  - 超过3分钟：标记为未完成，保存到记录
  - 不足3分钟：不保存记录

学会了赶紧去试一下，好用的话，记得回来写感悟哈！