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

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/)
• Two-layer route guard: user login check + permission check

Dynamic Route System

• Server menu fetched in app store via fetchServerMenuConfig()
• Routes registered dynamically in permission.ts
• Uses isMenuLoading/isMenuLoaded flags to prevent duplicate loads

API Architecture

• Two axios instances for different auth patterns:
  • request.ts: Workspace header + custom token format
  • 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 required for all localStorage access
• Supports TTL expiry and type-safe keys via enum

Component Patterns

• Global components registered in 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