69 lines
2.3 KiB
Markdown
69 lines
2.3 KiB
Markdown
|
# 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
|