Skip to content

Commit 1edd72f

Browse files
lltxlltx
committed
docs(cursor): 新增多种技术栈的最佳实践文档
- 添加Vue3、Element Plus、Vue Router等框架的最佳实践指南 - 包含TypeScript、Tailwind CSS等技术规范文档 - 新增Pinia状态管理和Axios请求的代码规范 - 补充国际化(i18n)和VueUse工具库的使用指南
1 parent 68b3d00 commit 1edd72f

12 files changed

+128
-0
lines changed

‎.cursor/rules/axios-best-practices.mdc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
description: Best practices for Axios HTTP requests
3+
globs: *.ts,*.vue
4+
alwaysApply: false
5+
---
6+
- Refer to `src/api/admin/audit.ts` as a template to make an API call with the same effect
7+
- The API method must be called using the synchronous syntax await, and then the result is deconstructed
8+
- All axios call logic needs to be placed in `src/api`

‎.cursor/rules/daisyui-best-practices.mdc‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
description: Best practices for Daisy UI
3+
globs: *.vue
4+
alwaysApply: false
5+
---
6+
- Use Daisy UI classes for consistent theming
7+
- All colors and themes should be consistent with the overall UI element-plus. Please refer to `src/theme/element.scss`
8+
- Implement Daisy UI buttons and form controls for UI consistency
9+
- Customize themes using Daisy UI's theme system
10+
- Ensure responsive design with Daisy UI's responsive classes

‎.cursor/rules/element-plus-best-practices.mdc‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
description: Best practices for using Element Plus components
3+
globs: *.vue
4+
alwaysApply: false
5+
---
6+
- Use Element Plus components for rich UI functionality
7+
- Implement proper form validation with Element Plus forms
8+
- Customize Element Plus themes using SCSS variables
9+
- Utilize Element Plus's built-in internationalization support

‎.cursor/rules/mcp-interactive-feedback.mdc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
description:
3+
globs:
4+
alwaysApply: true
5+
---
6+
# MCP Interactive Feedback 规则
7+
8+
1. 在任何流程、任务、对话进行时，无论是询问、回复、或完成阶段性任务，皆必须调用 MCP mcp-feedback-enhanced。
9+
2. 每当收到用户反馈，若反馈内容非空，必须再次调用 MCP mcp-feedback-enhanced，并根据反馈内容调整行为。
10+
3. 仅当用户明确表示「结束」或「不再需要交互」时，才可停止调用 MCP mcp-feedback-enhanced，流程才算结束。
11+
4. 除非收到结束指令，否则所有步骤都必须重复调用 MCP mcp-feedback-enhanced。

‎.cursor/rules/pinia-best-practices.mdc‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
description: Best practices for state management with Pinia
3+
globs: src/stores/*.ts
4+
alwaysApply: false
5+
---
6+
- Use Pinia stores for global state management
7+
- Implement getters for computed state
8+
- Use actions for side effects and asynchronous operations
9+
- Utilize `defineStore` with `id` for better store organization

‎.cursor/rules/tailwind-best-practices.mdc‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
description: Best practices for Tailwind CSS
3+
globs: *.vue
4+
alwaysApply: false
5+
---
6+
- Implement responsive design with Tailwind's responsive modifiers
7+
- All colors and themes should be consistent with the overall UI element-plus. Please refer to `src/theme/element.scss`
8+
- Customize Tailwind's default theme using `tailwind.config.js`
9+
- Use `@apply` directive for component-level styling
10+
11+
## Dark Mode Guidelines
12+
- **Color Variables**: Use CSS custom properties defined in `src/theme/dark.scss` for dark mode colors
13+
- **Primary Colors**:
14+
- Background: `--next-bg-main` (#17202a) - Twitter standard dark background
15+
- Text: `--next-color-white` (#f7f9f9) - Primary text color
16+
- Accent: `#1d9bf0` - Twitter blue for active states and links
17+
- **Component Colors**:
18+
- Disabled background: `--next-color-disabled` (#202e3a)
19+
- Hover states: `--next-color-hover` (#1e2732) or `--next-color-hover-rgba` (rgba(239, 243, 244, 0.1))
20+
- Borders: `--next-border-color` (#38444d) or `--next-border-black` (#2f3336)
21+
- **Text Colors**:
22+
- Regular text: `--next-text-color-regular` (#8b98a5)
23+
- Placeholder text: `--next-text-color-placeholder` (#536471)
24+
- **Consistency Rules**:
25+
- Always use `[data-theme='dark']` selector for dark mode styles
26+
- Maintain Twitter-inspired color scheme consistency
27+
- Use semi-transparent overlays for hover effects: `rgba(29, 155, 240, 0.1)` for primary, `rgba(239, 243, 244, 0.1)` for neutral
28+
- **Component Specific**:
29+
- Cards: Background `--next-color-disabled` with `--next-border-color` borders
30+
- Buttons: Use defined CSS variables, avoid hardcoded colors
31+
- Forms: Input background `#273340`, border `#38444d`, focus with Twitter blue accent
32+
- Tables: Header background `#1c2732`, hover `--next-color-hover`
33+
- **Avoid**: Hardcoded hex colors in dark mode, use CSS variables for maintainability

‎.cursor/rules/typescript-best-practices.mdc‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
description: TypeScript coding standards and type safety guidelines
3+
globs: *.vue,*.ts
4+
alwaysApply: false
5+
---
6+
- Use strict null checks for better type safety
7+
- Prefer interfaces over types for object shapes
8+
- Use type guards and assertions for runtime type checking
9+
- Implement proper type inference for cleaner code
10+
- Use enums for a set of named constants

‎.cursor/rules/vue-best-practices.mdc‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
description: Best practices for Vue 3 applications
3+
globs: *.vue
4+
alwaysApply: false
5+
---
6+
- Use Vue3 Composition API for better code organization and reusability
7+
- Components should be automatically split into multiple small components that are easy to maintain
8+
- parseTime/parseDate/baseURL are global properties and can be used directly
9+
- Leverage Vue's built-in directives like `v-model` for form handling
10+
- Implement proper error handling with `try/catch` in component setup

‎.cursor/rules/vue-i18n-best-practices.mdc‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
description: Best practices for Vue I18n internationalization
3+
globs: *.vue,*.ts
4+
alwaysApply: false
5+
---
6+
- Use Vue I18n for managing translations
7+
- Use `const { t } = useI18n()` in Vue components to use t('area.areaType') as a placeholder
8+
- The global I18N translation files are in `src/i18n`
9+
- The Chinese and English I18N file names use 'zh-cn.ts' and' en.ts' and save them in the 'i18n' folder in the current directory
10+
- The key values in the language file are named by the hump

‎.cursor/rules/vue-router-best-practices.mdc‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
description: Best practices for Vue Router 4 configuration and usage
3+
globs: src/router/*.ts
4+
alwaysApply: false
5+
---
6+
- Use named routes for better maintainability
7+
- Implement route-level code-splitting for performance
8+
- Use navigation guards for route protection and redirection
9+
- Leverage route meta fields for additional route information

0 commit comments

Comments
 (0)