# Code Mode Rules (Non-Obvious Only)

## API Layer

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

## Storage

- Always use [`SafeStorage`](src/utils/safeStorage.ts) with `AppStorageKey` enum - never use localStorage directly. Supports TTL via third parameter.

## useRequest Hook

- [`useRequest()`](src/hooks/request.ts) 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`](src/router/guard/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:

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