front/.kilo/agent/rules-code.md

Code Mode Rules (Non-Obvious Only)

API Layer

• Two axios instances exist: request.ts (custom with workspace header) and interceptor.ts (global with Bearer token). Choose based on whether you need workspace support.
• request.ts returns response.data directly (no nesting)

Storage

• Always use SafeStorage with AppStorageKey enum - never use localStorage directly. Supports TTL via third parameter.

useRequest Hook

• useRequest() invokes API immediately - does NOT work in async functions. Pass params via .bind(null, params) pattern.

Dynamic Routes

• Routes loaded from server in permission.ts using isMenuLoading/isMenuLoaded flags. Don't modify these flags manually.

Vue Component Structure

• Use <script lang="ts" setup> for main logic
• Add <script lang="ts"> block with export default { name: 'ComponentName' } for component naming
• Style: <style scoped lang="less">

Page Module Pattern

src/views/ops/pages/{module}/
  index.vue              # Main page component
  components/
    FormDialog.vue       # CRUD form dialog
    Detail.vue           # Detail drawer/view
    QuickConfigDialog.vue # Quick config dialog (optional)
  config/
    columns.ts           # Table columns config
    search-form.ts       # Search form config

API File Pattern

src/api/ops/{module}.ts
  - Export interfaces for types
  - Export fetch functions using `request.get/post/put/patch/delete`
  - Name functions: `fetch{Resource}List`, `fetch{Resource}Detail`, `create{Resource}`, `update{Resource}`, `delete{Resource}`

Import Order

1. Vue core (ref, reactive, computed, etc.)
2. Third-party (arco-design, axios, etc.)
3. Local components
4. Local configs
5. Local APIs
6. Types

Comments (JSDoc Style)

• Add JSDoc comments for interfaces, types, and functions

• Interface comment format: /** {{TypeName}} */

• Function comment format: /** {{Function description}} */

• Example:

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

API Response Format

• Standard response: {code: 0, details: {data: [...], total: number}}
• Success code is 0, NOT 200 or 20000
• Access data via response.details.data and total via response.details.total

Code Style (Prettier)

• No semicolons
• Single quotes
• Trailing commas (es5)
• Print width: 140 characters
• Path alias: @/ → src/