# NGINX UI - Claude Code Guidelines

This project is a web-based NGINX management interface built with Go backend and Vue.js frontend.

## Package Manager
- **Use pnpm exclusively** for all frontend package management operations
- Commands: `pnpm install`, `pnpm run dev`, `pnpm typecheck`

## Backend (Go) Development

### Technologies & Frameworks
- **Go** with Gin web framework
- **GORM** for database operations  
- **Gen** for query simplification
- **Cosy** framework (https://cosy.uozi.org/)

### Code Organization
- **API Controllers**: Implement in `api/$module_name/` directory
- **Database Models**: Define in `model/` folder
- **Business Logic**: Place complex logic and error handling in `internal/$module_name/`
- **Routing**: Register routes in `router/` directory
- **Configuration**: Manage settings in `settings/` directory

### Development Guidelines
- Write concise, maintainable Go code with clear examples
- Use Gen to streamline database queries and reduce boilerplate
- Follow Cosy Error Handler best practices for error management
- Implement standardized CRUD operations using Cosy framework
- Apply efficient database pagination for large datasets
- Keep files modular and well-organized by functionality
- **All comments and documentation must be in English**

## Frontend (Vue.js) Development

### Technology Stack
- **TypeScript** for all code
- **Vue 3** with Composition API
- **Vite** build tool
- **Vue Router** for routing
- **Pinia** for state management
- **VueUse** for utilities
- **Ant Design Vue** for UI components
- **UnoCSS** for styling

### Code Standards
- Use functional and declarative programming patterns (avoid classes)
- Prefer interfaces over types for better extendability
- Use descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`)
- Always use Vue Composition API with `<script setup>` syntax
- Leverage Vue 3.4+ features: `defineModel()`, `useTemplateRef()`, v-bind shorthand

### File Organization
- **Components**: Use CamelCase naming in `src/components/` (e.g., `ChatGPT/ChatGPT.vue`)
- **Views**: Use lowercase with underscores for folders, CamelCase for components (e.g., `src/views/system/About.vue`)
- **API & Types**: Define in `app/src/api/`
- **Exports**: Favor named exports for functions

### UI & Styling
- Use Ant Design Vue components and UnoCSS for styling
- Implement responsive design with mobile-first approach
- Use Antdv Flex layout for responsive layouts

### Performance Optimization
- Leverage VueUse functions for enhanced reactivity
- Wrap async components in Suspense with fallback UI
- Use dynamic loading for non-critical components
- Optimize images: WebP format, size data, lazy loading
- Implement code splitting and chunking strategy in Vite build
- Optimize Web Vitals (LCP, CLS, FID)

### Code Quality
- **Always use ESLint MCP after generating frontend code** to ensure code quality and consistency

## Development Commands
- **Frontend**: `pnpm run dev`, `pnpm typecheck`, `pnpm run build`
- **Backend**: Standard Go commands (`go run`, `go build`, `go test`)

## Language Requirements
- **All code comments, documentation, and communication must be in English**
- Maintain consistency and accessibility across the codebase
- 优先使用 context7 mcp 搜索文档
- 生成 find 命令的时候应该排除掉 ./.go/ 这个文件夹，因为那里面是 devcontainer 的依赖