86 lines
2.6 KiB
Markdown
86 lines
2.6 KiB
Markdown
|
# 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/`
|