# Kilo Configuration for Vue Admin Project

This directory contains the Kilo AI assistant configuration for this Vue 3 + Arco Design admin project.

## Directory Structure

```
.kilo/
├── agent/           # Agent mode rules
│   ├── rules-code.md      # Code writing rules
│   ├── rules-architect.md # Architecture rules
│   ├── rules-debug.md     # Debugging rules
│   └── rules-ask.md       # Q&A rules
├── command/         # Slash commands
│   ├── new-page.md        # Create new page module
│   ├── new-api.md         # Create new API module
│   ├── new-component.md   # Create new component
│   ├── lint-fix.md        # Fix lint issues
│   └── type-check.md      # Check TypeScript types
├── skill/           # Skill definitions
│   └── vue-admin-dev.md   # Vue admin development skill
├── templates/       # Code templates
│   ├── api-module.ts      # API module template
│   ├── columns.ts         # Table columns template
│   ├── search-form.ts     # Search form template
│   ├── index.vue          # Main page template
│   ├── FormDialog.vue     # Form dialog template
│   └── Detail.vue         # Detail view template
├── logs/            # Log files
└── node_modules/    # Dependencies
```

## Configuration Files

### kilo.json

Main configuration file with:

- Agent settings (default mode, allowed modes)
- Command directory path
- Rules directory path
- Skills directory path
- Hooks (beforeFileWrite, afterTaskComplete)
- Context settings (maxTokens, include/exclude patterns)
- Logging configuration

### AGENTS.md

Project-level guidance file in root directory with:

- Build commands
- Architecture notes
- Module structure patterns
- Code style requirements
- Import order
- Debug tips

## Usage

### Commands

```
/new-page <module-name> <category>    # Create new page module
/new-api <module-name> [base-path]    # Create new API module
/new-component <name> [type]          # Create new component
/lint-fix [path]                       # Fix lint issues
/type-check                            # Check TypeScript types
```

### Skills

Load the vue-admin-dev skill for comprehensive development guidance:

```
/skill vue-admin-dev
```

## Key Rules

### Storage

Always use `SafeStorage` with `AppStorageKey` enum - never use localStorage directly.

### API Choice

- Use `request.ts` for workspace-aware APIs (most ops APIs)
- Use `interceptor.ts` for Bearer token APIs expecting `code: 20000`

### API Response Format

Standard response from `request.ts`: `{code: 0, details: {data: [...], total: number}}`

- Success code is `0`, NOT `200` or `20000`
- Access data via `response.details.data`
- Access total via `response.details.total`

### Comments

Add JSDoc comments for interfaces and functions:

```ts
/** 服务器类型 */
export interface ServerItem { ... }

/** 获取服务器列表（分页） */
export const fetchServerList = (params?: ServerListParams) => { ... }
```

### useRequest Hook

Does NOT work in async functions. Use `.bind(null, params)` pattern in setup scope.

### Dynamic Routes

Routes loaded from server via permission guard. Don't modify `isMenuLoading`/`isMenuLoaded` flags.

### Code Style

- No semicolons
- Single quotes
- Print width: 140 characters
- JSDoc comments for types and functions

## Templates

Templates use placeholder syntax:

- `{{Module}}` - PascalCase module name (e.g., `UrlDevice`)
- `{{module}}` - lowercase module name (e.g., `url-device`)
- `{{ModuleTitle}}` - Chinese title (e.g., `URL监控设备`)
- `{{ModuleName}}` - Vue component name (e.g., `UrlDeviceManagement`)

Replace these placeholders when generating new modules.