front/.kilo

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:

/** 服务器类型 */
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.