feat
This commit is contained in:
68
.kilo/agent/rules-architect.md
Normal file
68
.kilo/agent/rules-architect.md
Normal file
@@ -0,0 +1,68 @@
|
||||
# Architect Mode Rules (Non-Obvious Only)
|
||||
|
||||
## Architecture Overview
|
||||
|
||||
- Vue 3 SPA with dynamic route loading from server
|
||||
- Pinia stores: `app`, `user`, `tab-bar` (see [`src/store/`](src/store/))
|
||||
- Two-layer route guard: user login check + permission check
|
||||
|
||||
## Dynamic Route System
|
||||
|
||||
- Server menu fetched in [`app store`](src/store/modules/app/index.ts) via `fetchServerMenuConfig()`
|
||||
- Routes registered dynamically in [`permission.ts`](src/router/guard/permission.ts)
|
||||
- Uses `isMenuLoading`/`isMenuLoaded` flags to prevent duplicate loads
|
||||
|
||||
## API Architecture
|
||||
|
||||
- Two axios instances for different auth patterns:
|
||||
- [`request.ts`](src/api/request.ts): Workspace header + custom token format
|
||||
- [`interceptor.ts`](src/api/interceptor.ts): Bearer token + code 20000 validation
|
||||
- Choose based on backend API requirements
|
||||
|
||||
## API Response Format
|
||||
|
||||
- Standard response structure: `{code: 0, details: {data: [...], total: number}}`
|
||||
- Success code is `0`, NOT `200` or `20000`
|
||||
- `request.ts` returns `response.data` directly
|
||||
- Access list data via `response.details.data`
|
||||
- Access total count via `response.details.total`
|
||||
|
||||
## State Management
|
||||
|
||||
- [`SafeStorage`](src/utils/safeStorage.ts) required for all localStorage access
|
||||
- Supports TTL expiry and type-safe keys via enum
|
||||
|
||||
## Component Patterns
|
||||
|
||||
- Global components registered in [`components/index.ts`](src/components/index.ts)
|
||||
- ECharts modules manually imported for bundle size optimization
|
||||
- Use `SearchTable` composite component for list pages
|
||||
|
||||
## Directory Structure
|
||||
|
||||
```
|
||||
src/
|
||||
api/ # API layer (ops/ for business, module/ for auth)
|
||||
components/ # Global reusable components
|
||||
hooks/ # Composition functions
|
||||
router/ # Route config and guards
|
||||
store/ # Pinia stores
|
||||
utils/ # Utility functions
|
||||
views/ops/ # Main business modules
|
||||
pages/
|
||||
dc/ # Data center management
|
||||
monitor/ # Monitoring modules
|
||||
netarch/ # Network architecture
|
||||
report/ # Reports
|
||||
system-settings/ # System config
|
||||
```
|
||||
|
||||
## Module Creation Checklist
|
||||
|
||||
1. Create API file in `src/api/ops/`
|
||||
2. Create page directory in `src/views/ops/pages/`
|
||||
3. Create `config/columns.ts` for table config
|
||||
4. Create `config/search-form.ts` for search config
|
||||
5. Create main `index.vue` with SearchTable
|
||||
6. Create `components/FormDialog.vue` for CRUD
|
||||
7. Create `components/Detail.vue` for detail view
|
||||
47
.kilo/agent/rules-ask.md
Normal file
47
.kilo/agent/rules-ask.md
Normal file
@@ -0,0 +1,47 @@
|
||||
# Ask Mode Rules (Non-Obvious Only)
|
||||
|
||||
## Project Structure
|
||||
|
||||
- Vue 3 + Arco Design admin template with Pinia state management
|
||||
- Vite config files located in `config/` directory (not root)
|
||||
|
||||
## Key Directories
|
||||
|
||||
- `src/api/` - API layer with two axios instances
|
||||
- `src/views/ops/` - Main business modules (kb, netarch, asset, etc.)
|
||||
- `src/router/guard/` - Route guards including dynamic menu loading
|
||||
- `src/store/modules/app/` - App store with server menu fetching
|
||||
|
||||
## Documentation References
|
||||
|
||||
- Arco Design Vue: https://arco.design/vue
|
||||
- Vue Flow (for topology): https://vueflow.dev/
|
||||
|
||||
## API Patterns
|
||||
|
||||
- Use [`request.ts`](src/api/request.ts) for workspace-aware requests
|
||||
- Use [`interceptor.ts`](src/api/interceptor.ts) for standard Bearer token auth
|
||||
|
||||
## API Response Format
|
||||
|
||||
- Standard response: `{code: 0, details: {...}}`
|
||||
- Success code is `0`, NOT `200` or `20000`
|
||||
- Access data via `response.details.data`
|
||||
|
||||
## Component Libraries
|
||||
|
||||
- Arco Design Vue components: `<a-button>`, `<a-table>`, `<a-form>`, etc.
|
||||
- Global components: `SearchTable`, `SearchForm`, `DataTable`, `Chart`
|
||||
|
||||
## Code Style
|
||||
|
||||
- No semicolons
|
||||
- Single quotes
|
||||
- Print width: 140 characters
|
||||
- Path alias: `@/` → `src/`
|
||||
|
||||
## Build Commands
|
||||
|
||||
- `pnpm dev` - Start dev server
|
||||
- `pnpm build` - Production build
|
||||
- `pnpm lint` - Run ESLint + Prettier
|
||||
85
.kilo/agent/rules-code.md
Normal file
85
.kilo/agent/rules-code.md
Normal file
@@ -0,0 +1,85 @@
|
||||
# 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/`
|
||||
60
.kilo/agent/rules-debug.md
Normal file
60
.kilo/agent/rules-debug.md
Normal file
@@ -0,0 +1,60 @@
|
||||
# Debug Mode Rules (Non-Obvious Only)
|
||||
|
||||
## API Response Codes
|
||||
|
||||
- [`request.ts`](src/api/request.ts) returns `response.data` directly, expects `{code: 0, details: ...}`
|
||||
- [`interceptor.ts`](src/api/interceptor.ts) expects `code: 20000` for success
|
||||
- Token expiry codes: 50008, 50012, 50014 trigger logout modal (interceptor.ts)
|
||||
- Token expiry status: 401 or error "Token has expired" (request.ts)
|
||||
|
||||
## Token Storage
|
||||
|
||||
- Tokens stored via [`SafeStorage`](src/utils/safeStorage.ts) with key `AppStorageKey.TOKEN`.
|
||||
- Token expiry redirects to `/auth/login` (not `/login`).
|
||||
|
||||
## Route Loading Issues
|
||||
|
||||
- If routes not loading, check `isMenuLoading`/`isMenuLoaded` flags in [`permission.ts`](src/router/guard/permission.ts).
|
||||
- Server menu fetched via [`fetchServerMenuConfig()`](src/store/modules/app/index.ts).
|
||||
|
||||
## Environment
|
||||
|
||||
- Dev config: `.env.development`, Prod config: `.env.production`
|
||||
- API base URL: `VITE_API_BASE_URL`, Workspace: `VITE_APP_WORKSPACE`
|
||||
|
||||
## Common Issues
|
||||
|
||||
### useRequest Not Working in Async
|
||||
|
||||
- useRequest invokes API immediately - use in setup scope only
|
||||
- For async contexts, call API directly without useRequest
|
||||
|
||||
### Menu Not Loading
|
||||
|
||||
- Check console for `[Permission Guard]` logs
|
||||
- Verify `menuFromServer` setting in app store
|
||||
- Check `fetchServerMenuConfig()` response
|
||||
|
||||
### Token Expiry
|
||||
|
||||
- Response `status: 401` or `error: 'Token has expired'` triggers logout
|
||||
- Clear storage via `SafeStorage.clearAppStorage()`
|
||||
|
||||
## Debug Commands
|
||||
|
||||
```bash
|
||||
# Check lint errors
|
||||
pnpm lint
|
||||
|
||||
# Type check
|
||||
pnpm build
|
||||
|
||||
# Dev server with logs
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
## Browser DevTools
|
||||
|
||||
- Vue DevTools for component state
|
||||
- Network tab for API calls
|
||||
- Console for `[Permission Guard]` logs
|
||||
Reference in New Issue
Block a user