mirror of
https://github.com/chansee97/nova-admin.git
synced 2026-04-30 02:18:16 +08:00
docs: add nova-admin AGENT.md
This commit is contained in:
parent
67651d7a3f
commit
05f36509a0
158
AGENTS.md
Normal file
158
AGENTS.md
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
# Nova Admin - Agent Coding Guidelines
|
||||||
|
|
||||||
|
This document provides guidelines for agentic coding agents working on this codebase.
|
||||||
|
|
||||||
|
## Build, Lint & Test Commands
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Development
|
||||||
|
pnpm dev # Start dev server (uses vite --mode dev)
|
||||||
|
pnpm dev:prod # Start with production config
|
||||||
|
|
||||||
|
# Build
|
||||||
|
pnpm build # Production build
|
||||||
|
pnpm preview # Preview production build
|
||||||
|
|
||||||
|
# Linting
|
||||||
|
pnpm lint # Run eslint + vue-tsc type check
|
||||||
|
pnpm lint:fix # Auto-fix eslint issues
|
||||||
|
pnpm lint:check # Inspect eslint configuration
|
||||||
|
pnpm sizecheck # Visualize bundle size
|
||||||
|
|
||||||
|
# Pre-commit hook
|
||||||
|
# Automatically runs pnpm lint-staged (eslint --fix) on commit
|
||||||
|
```
|
||||||
|
|
||||||
|
## Code Style Guidelines
|
||||||
|
|
||||||
|
### Imports
|
||||||
|
- No strict import sorting enforced (eslint `perfectionist/sort-imports` is OFF)
|
||||||
|
- Imports use `@/` alias for `src/` directory (e.g., `@/api`, `@/store`, `@/hooks`)
|
||||||
|
- Third-party and local imports are mixed; follow the pattern in existing files
|
||||||
|
- Auto-imports are enabled via `unplugin-auto-import` for Vue APIs
|
||||||
|
|
||||||
|
### Formatting & Structure
|
||||||
|
- **Vue components**: Use `<script setup lang="ts">` or `<script setup lang="tsx">`
|
||||||
|
- **File naming**: PascalCase for components (e.g., `UserModal.vue`), camelCase for utilities (e.g., `useBoolean.ts`)
|
||||||
|
- **Template**: Use UnoCSS utility classes (e.g., `class="w-70"`, `class="flex-1"`)
|
||||||
|
- **Comments**: Use Chinese comments for user-facing text; JSDoc for functions
|
||||||
|
|
||||||
|
### TypeScript
|
||||||
|
- **Strict mode enabled** (`strict: true`, `strictNullChecks: true`)
|
||||||
|
- **No `I` prefix** for interfaces/types (use `UserQueryParams`, not `IUserQueryParams`)
|
||||||
|
- **Naming**: PascalCase for types/interfaces, camelCase for variables
|
||||||
|
- **Global namespaces**:
|
||||||
|
- `Entity` for database entities (e.g., `Entity.User`, `Entity.Role`)
|
||||||
|
- `Api` for response types (e.g., `Api.Response<T>`, `Api.ListResponse<T>`)
|
||||||
|
- **Props typing**: Use `defineProps<Props>()` with interface
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Example: Props typing
|
||||||
|
interface Props {
|
||||||
|
modalName?: string
|
||||||
|
}
|
||||||
|
const { modalName = '' } = defineProps<Props>()
|
||||||
|
```
|
||||||
|
|
||||||
|
### Naming Conventions
|
||||||
|
- **Variables/Functions**: `camelCase` (e.g., `selectedDeptId`, `loadDeptTree`)
|
||||||
|
- **Async functions**: Start with action verbs (e.g., `fetchLogin`, `getUserList`)
|
||||||
|
- **Components**: `PascalCase` (e.g., `UserModal`, `DarkModeSwitch`)
|
||||||
|
- **Constants/Enums**: `PascalCase` (e.g., `Regex.Phone`, `ThemeColor`)
|
||||||
|
- **Files**: `PascalCase` for components, `camelCase` for hooks/utils
|
||||||
|
|
||||||
|
### Error Handling
|
||||||
|
- **Try-catch**: Wrap async operations that may fail
|
||||||
|
- **User feedback**: Use `window.$message.success/error` for UI feedback
|
||||||
|
- **Logging**: Use `console.error()` for error details
|
||||||
|
- **Silent catch**: Acceptable for non-critical errors (e.g., in search handlers)
|
||||||
|
- **Empty catch blocks**: Sometimes used; avoid in critical operations
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Example: Standard error handling
|
||||||
|
try {
|
||||||
|
await deleteUser(id)
|
||||||
|
window.$message.success('用户删除成功')
|
||||||
|
refresh()
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('删除用户失败:', error)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Example: Non-critical error with fallback
|
||||||
|
try {
|
||||||
|
const { data } = await getUserList()
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
catch {
|
||||||
|
return { list: [], total: 0 }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### API Patterns
|
||||||
|
- **Alova wrapper**: Use `request.Get/Post/Patch/Delete` from `@/utils/alova`
|
||||||
|
- **Response types**: Wrap with `Api.Response<T>` or `Api.ListResponse<T>`
|
||||||
|
- **Entity updates**: Use `Partial<Entity.Type>` for update payloads
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Example: API function
|
||||||
|
export function getUserList(params?: UserQueryParams) {
|
||||||
|
return request.Get<Api.ListResponse<Entity.User>>('/user', { params })
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### State Management (Pinia)
|
||||||
|
- **Store naming**: `PascalCase` with `Store` suffix (e.g., `useAuthStore`)
|
||||||
|
- **State**: Return object with explicit types
|
||||||
|
- **Getters**: Computed properties with JSDoc
|
||||||
|
- **Actions**: Async functions for mutations
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export const useAuthStore = defineStore('auth-store', {
|
||||||
|
state: (): AuthStatus => {
|
||||||
|
return { userInfo: {}, roles: [], permissions: [] }
|
||||||
|
},
|
||||||
|
getters: {
|
||||||
|
isLogin(state) { return Boolean(state.userInfo) },
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
async login() {
|
||||||
|
// ...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### CSS & Styling
|
||||||
|
- **UnoCSS**: Use utility classes (e.g., `grid grid-cols-2`, `col-span-2`)
|
||||||
|
- **Scoped styles**: `<style scoped>` for component-specific CSS
|
||||||
|
- **Tailwind-like syntax**: `w-70`, `flex-1`, `text-2xl`, etc.
|
||||||
|
|
||||||
|
### Vue Component Best Practices
|
||||||
|
- **Composition API**: Use `<script setup>` exclusively
|
||||||
|
- **Expose methods**: Use `defineExpose({ openModal })` for modal/ref methods
|
||||||
|
- **Event emission**: Use `defineEmits<{ success: [] }>()`
|
||||||
|
- **Reactive refs**: Use `shallowRef` for non-reactive objects (e.g., `modalType`)
|
||||||
|
|
||||||
|
## Key File Locations
|
||||||
|
|
||||||
|
| Purpose | Path |
|
||||||
|
|---------|------|
|
||||||
|
| API definitions | `src/api/` |
|
||||||
|
| Types/Entities | `src/typings/` |
|
||||||
|
| State stores | `src/store/` |
|
||||||
|
| Hooks | `src/hooks/` |
|
||||||
|
| Constants | `src/constants/` |
|
||||||
|
| Utils | `src/utils/` |
|
||||||
|
| Views | `src/views/` |
|
||||||
|
| Components | `src/components/` |
|
||||||
|
| Configs | `src/modules/` |
|
||||||
|
|
||||||
|
## Important Dependencies
|
||||||
|
|
||||||
|
- **Vue 3** with Composition API
|
||||||
|
- **Naive UI** for components (auto-imported)
|
||||||
|
- **Alova** for API requests
|
||||||
|
- **Pinia** for state management
|
||||||
|
- **UnoCSS** for styling
|
||||||
|
- **TypeScript** with strict mode
|
||||||
Loading…
x
Reference in New Issue
Block a user