前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

2025年06月04日

Cursor新功能:让rules规则编写，从 “大海捞针” 到 “一键定制”

作为一名系统开发者，最近在使用Cursor编辑器时发现了一个堪称"开发者救星"的功能——"/Generate Cursor Rules"！这个与Claude 3.7火爆集成的新功能让我彻底爱上了AI辅助开发的工作方式。今天就来分享我的亲身体验，看看它如何将我的开发效率提升到一个全新水平！

什么是"/Generate Cursor Rules"？

在Cursor v0.49更新中新增的这个功能，允许你直接从对话中生成项目规则。简单来说，它能智能分析你与AI的交互内容，自动总结成一组结构化的规则，帮助AI更好地理解你的项目需求和编码风格。

这意味着什么？ 再也不用手动编写繁琐的.cursorrules文件了！只需一个简单命令，你与AI的所有讨论决策都能被保存下来，用于指导未来的代码生成和项目开发。

实战应用：我的JianLiPro开发体验

在我开发简历评分系统(JianLiPro)的过程中，利用"/Generate Cursor Rules"生成了多种规则，这些规则极大的提高了我与Cursor+Claude 3.7的协作体验：

这才是 rules 规则该有的样子

还在为项目规则发愁？看着开源大神的代码规则两眼放光，却不知道怎么适配自己的项目？现在，/Generate Cursor Rules功能已经上线！只需输入指令，AI 就能根据你的项目需求，量身定制专属规则，就像给你的项目请了一位智能管家。有了它，AI 能更懂你的代码逻辑，开发流程也会变得更顺畅，效率直接拉满！别再东拼西凑找规则了，专属你的智能规则方案，一键生成！

1 App结构与路由规则

# App 结构与路由规则

简历评分系统使用 Next.js 15.2.4 的 App Router，遵循文件系统路由约定组织代码结构。

## 主要路由结构

```
src/app/
├── api/                # API 路由
├── auth/               # 认证相关页面
│   ├── login/          # 登录页面
│   └── register/       # 注册页面
├── dashboard/          # 管理后台
│   ├── analytics/      # 数据分析
│   ├── batch-score/    # 批量评分
│   ├── history/        # 历史记录
│   ├── permission-management/ # 权限管理
│   ├── resume-score/   # 简历评分
│   ├── rules/          # 评分规则
│   ├── settings/       # 设置
│   └── user-management/ # 用户管理
├── layout.tsx          # 全局布局
├── page.tsx            # 首页
└── globals.css         # 全局样式
```

## 布局与组件规则

- @src/app/layout.tsx 全局根布局，配置字体和元数据
- @src/app/page.tsx 首页，包含营销内容和功能介绍
- @src/app/dashboard/layout.tsx 管理后台布局，包含侧边栏导航和顶部菜单

## 路由保护

系统使用 @src/middleware.ts 进行路由保护：

- `/dashboard/*` - 受保护路由，需要认证
- `/auth/*`, `/api/*` - 公开路由，无需认证

这套规则让AI生成的代码结构始终保持一致，不会在项目中期突然改变目录结构或命名方式，大大减少了重构工作。


2 API服务规则

每当我需要添加新的API端点时，AI会严格遵循已定义的模式：

# API 服务规则

简历评分系统通过集中式API服务与后端通信，API服务定义在 @src/utils/api.ts 文件中。

## API 模块划分

系统将API按功能模块拆分为多个服务：

- **authApi**: 用户认证相关
  - `register()`: 用户注册
  - `login()`: 用户登录
  - `logout()`: 退出登录
  - `getUserInfo()`: 获取用户信息

- **scoreApi**: 评分规则相关
  - `getRules()`: 获取评分规则列表
  - `saveRules()`: 保存评分规则
  - `resetRules()`: 重置评分规则

- **ossApi**: 对象存储相关
  - `getSTSCredentials()`: 获取OSS临时访问凭证
  - `saveUploadFile()`: 保存上传文件信息

## 公共接口约定

所有API响应均遵循统一格式：

```typescript
interface ApiResponse<T = any> {
  code: number;     // 状态码，200表示成功
  message: string;  // 状态描述或错误信息
  data: T;          // 响应数据
}
```

## 请求拦截器

API服务自动处理认证令牌添加和认证过期处理：

- 从localStorage或Cookies获取accessToken
- 自动在请求头中添加Authorization: Bearer {token}
- 响应401错误时自动跳转到登录页面


3 认证流程规则

# 认证流程规则

简历评分系统使用JWT令牌认证，同时在客户端和服务器端实现认证逻辑。

## 认证状态管理

JWT令牌同时存储在两个位置：

1. localStorage - 客户端访问使用
2. Cookies - 服务器端认证使用

相关函数定义在 @src/utils/api.ts 中：

- `setAuth(token, user)`: 保存认证信息
- `clearAuth()`: 清除认证信息
- `getCurrentUser()`: 获取当前用户信息
- `isAuthenticated()`: 检查是否已认证

## 登录流程

1. 用户提交凭证到 `/api/auth/login`
2. 服务器验证凭证并返回JWT令牌
3. 客户端存储令牌并重定向到仪表板

## 路由保护

使用 @src/middleware.ts 在服务器端保护路由：

- 检查Cookie中的token是否存在
- 未认证用户访问受保护页面会被重定向到登录页
- 公开路由无需认证即可访问

## 认证过期处理

API响应拦截器检测401错误：

- 清除本地认证信息
- 显示友好的错误通知
- 重定向到登录页面


4 开发最佳实践

同时还定义了一套开发最佳实践，包括代码风格、测试策略和性能优化：

# 开发最佳实践

本项目遵循以下开发最佳实践，以确保代码质量和可维护性。

## Next.js 最佳实践

- 使用 App Router 进行路由管理
- 优先使用 Server Components，仅在必要时使用 Client Components
- 页面组件文件命名为 `page.tsx`
- 布局组件文件命名为 `layout.tsx`
- 使用 Server Actions 处理表单提交和数据修改
- 使用 React Server Components 减少客户端JavaScript
- 静态内容使用 Static Site Generation (SSG)
- 动态内容使用 Server-Side Rendering (SSR)

## TypeScript 实践

- 为所有组件和函数提供明确的类型定义
- 使用接口（Interface）描述API响应和请求结构
- 避免使用 `any` 类型，尽量使用明确的类型定义
- 利用 TypeScript 的类型推断减少冗余类型注解

## 组件编写规范

- 使用函数式组件和React Hooks
- 组件名称使用PascalCase命名法
- 工具函数和钩子函数使用camelCase命名法
- 在必要时使用React.memo()和useMemo()优化性能
- 利用React.Suspense和动态导入优化加载体验

## 错误处理

- 对所有API调用进行错误处理
- 使用try/catch捕获异步操作中的错误
- 显示友好的错误消息给用户
- 记录错误信息以便于调试

## 环境变量

使用`.env.local`文件存储敏感配置：

```
NEXT_PUBLIC_API_BASE_URL=https://api.example.com
NEXT_PUBLIC_OSS_REGION=oss-cn-beijing
NEXT_PUBLIC_OSS_BUCKET=my-bucket

5 快速上手指南

为了帮助使用者快速上手，生成了简明的快速上手指南：

# 快速上手指南

本指南将帮助你快速了解简历评分系统项目并开始开发。

## 开发环境设置

1. 克隆项目并安装依赖：

```bash
# 安装依赖
npm install
```

2. 创建并配置环境变量文件 `.env.local`：

```
NEXT_PUBLIC_API_BASE_URL=http://localhost:8080
NEXT_PUBLIC_OSS_REGION=oss-cn-beijing
NEXT_PUBLIC_OSS_BUCKET=your-bucket-name
```

3. 启动开发服务器：

```bash
npm run dev
```

## 项目结构概览

- `src/app/` - Next.js App Router页面和API路由
- `src/utils/` - 工具函数和API服务
- `public/` - 静态资源

## 常见任务指南

### 添加新页面

1. 在`src/app/`目录下创建新的目录和`page.tsx`文件
2. 根据路由规则，目录名将成为URL路径

### 修改API服务

1. 编辑 @src/utils/api.ts 文件
2. 在适当的API服务对象中添加新方法
3. 确保遵循现有的类型定义和错误处理模式

### 添加新组件

1. 在需要的目录下创建新的组件文件
2. 遵循项目的命名约定和样式规则
3. 使用TypeScript定义组件的props类型

## 资源和参考

- @Next.js 15.2.4 文档
- @Tailwind CSS 文档
- @TypeScript 文档

6 JianLiPro项目概览

# 简历评分系统 (JianLiPro) 项目概览

简历评分系统是一个基于Next.js 15.2.4开发的现代化Web应用，旨在提供智能的简历评估和管理功能。系统通过分析简历内容，根据预设的评分规则，为用户提供客观的简历评分和改进建议。

## 核心文件

- @README.md - 项目详细说明文档
- @src/app/layout.tsx - 应用根布局
- @src/app/page.tsx - 首页
- @src/app/dashboard/layout.tsx - 管理后台布局
- @src/utils/api.ts - API服务封装

## 主要功能模块

- **认证系统**: 用户注册、登录和身份验证
- **简历评分**: 单份简历智能评分与分析
- **批量评分**: 支持多份简历同时上传和评估
- **评分规则**: 可自定义的评分规则和权重配置
- **历史记录**: 查看和管理过去的评分历史
- **数据分析**: 简历评分数据统计和可视化

## 技术架构

- **前端框架**: Next.js 15.2.4 (App Router)
- **UI组件库**: Tailwind CSS
- **字体**: Geist Font Family
- **状态管理**: React Hooks
- **API通信**: Axios
- **认证方式**: JWT Token + Cookies

7 UI组件与样式规则

# UI组件与样式规则

简历评分系统使用Tailwind CSS进行样式管理，并遵循现代UI设计理念。

## 样式管理

- 使用 @src/app/globals.css 管理全局样式
- 组件样式使用Tailwind CSS工具类
- 响应式设计使用Tailwind CSS的响应式前缀: sm, md, lg, xl, 2xl
- 样式优先使用工具类，避免使用内联样式
- 主题颜色和设计风格保持一致

## 字体配置

使用 Geist 字体系列：

```typescript
// 在 src/app/layout.tsx 中配置
const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});
```

## 布局组件

- @src/app/layout.tsx - 全局布局
- @src/app/dashboard/layout.tsx - 仪表板布局 

## 组件命名约定

- **页面组件**: page.tsx
- **布局组件**: layout.tsx
- **UI组件**: PascalCase.tsx (如 Button.tsx, Card.tsx)
- **组合组件**: kebab-case.tsx (如 user-card.tsx)

## 响应式设计

所有页面和组件应适配以下屏幕尺寸：

- 移动设备: < 640px
- 平板设备: 640px - 1024px
- 桌面设备: > 1024px

使用Tailwind CSS的响应式类实现，例如：
```html
<div class="px-4 sm:px-6 lg:px-8">...</div>
```

使用方法：超简单3步走

使用"/Generate Cursor Rules"功能非常简单：

  1. 在Cursor编辑器中启动一个新的对话，讨论你的项目需求、架构和规范
  2. 讨论完成后，在聊天输入栏中键入/Generate Cursor Rules
  3. AI会自动分析你们的对话，生成一个规则文件，你可以直接应用到项目中

生成后的规则会保存在.cursor/rules目录下，Cursor会根据你设置的规则类型自动应用：

规则类型

描述

Always

始终应用于所有上下文

Auto Attached

根据文件路径匹配自动应用

Agent Requested

由 AI 决定是否应用

Manual

只有手动指定时才应用

为什么这个功能如此强大？

  1. 一致性保障：确保整个项目遵循统一的编码风格和架构决策
  2. 知识传承：新团队成员可以快速了解项目规范，而不必从零学习
  3. 效率提升：减少反复解释项目需求的时间，让AI真正"理解"你的项目
  4. 迭代优化：随着项目发展，可以不断更新规则，反映最新的最佳实践

总结

Cursor与Claude 3.7的强强联手，再加上"/Generate Cursor Rules"这一强大功能，让AI辅助开发真正站上了一个新台阶。不再是简单的代码补全，而是成为了真正理解你项目的智能伙伴。

如果你还在手动编写项目规范，或者反复向AI解释项目架构，不妨试试这个强大的功能。一次对话，规则自动生成，从此AI与你心有灵犀，开发效率直线飙升！

你尝试过这个功能吗？欢迎在评论区分享你的使用体验！

#cursor##Claude3.7Sonnet##AI编程##开发效率##rules#

标签：css引入字体 

作者:whsf66 , 分类:前端教程 , 浏览:4 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言