# Project Context

## Purpose

Kami Frontend is a comprehensive management platform for multi-service card and account operations. The system provides centralized management for Apple Card, JD accounts, Walmart accounts, and T-Mall game accounts, including order tracking, cookie management, and merchant operations.

## Tech Stack

- **Frontend Framework**: Vue 3 with Composition API and `<script setup>` syntax
- **UI Library**: Arco Design Vue
- **State Management**: Pinia with modular stores
- **Routing**: Vue Router 4
- **Data Fetching**: TanStack Vue Query + Axios
- **Build Tool**: Vite with TypeScript
- **Package Manager**: pnpm (>=8.11.0)
- **Code Quality**: ESLint, Stylelint, Prettier with Husky pre-commit hooks
- **API Generation**: OpenAPI Generator with TypeScript Axios client
- **Rich Text**: Milkdown editor
- **Code Editor**: CodeMirror 6
- **Charts**: ECharts with Vue integration

## Project Conventions

### Code Style

- **Vue Components**: Use `<script setup>` syntax with Composition API
- **TypeScript**: Strict mode enabled, prefer explicit typing
- **File Naming**: kebab-case for directories, PascalCase for components
- **CSS/Less**: Use Less preprocessor with Arco Design theme variables
- **Imports**: Use path aliases (`@/` for `src/`)
- **API Calls**: Use generated clients or manual definitions from `src/api/`

### Architecture Patterns

- **Dual API Approach**: Generated OpenAPI clients + manual API definitions
- **Component Structure**: Feature-based organization under `src/views/`
- **Global Components**: Auto-registered via `src/components/index.ts`
- **State**: Pinia stores for app state, TanStack Query for server state
- **Authentication**: JWT tokens with automatic refresh via axios interceptors

### Testing Strategy

Currently no formal testing framework is configured. Testing focuses on manual QA and code review.

### Git Workflow

- **Branching**: `develop` for development, `production` for releases
- **Commits**: Conventional commits with Commitlint
- **Pre-commit**: Husky + lint-staged for automated code quality checks
- **PR Target**: Production branch for release merges

## Domain Context

### Business Domains

- **Apple Card Management**: Card info, recharge history, order tracking
- **JD Account Management**: Cookie management, order processing, account tracking
- **Walmart Account Management**: Account groups, order management, statistics
- **T-Mall Game Operations**: Account info, shop management, order processing
- **Merchant Operations**: Configuration, steal card settings, deployment

### Key Concepts

- **Cookie Management**: JD session cookies for automated operations
- **Order Processing**: Multi-platform order tracking and management
- **Account Groups**: Batch account operations and management
- **Merchant Steal Settings**: Configuration for automated account acquisition

## Important Constraints

- **Node.js**: Requires ^18.0.0 || >=20.0.0
- **Browser Support**: Modern browsers with ES2020 support
- **API Base URL**: Configurable via environment variables
- **Authentication**: JWT-based with automatic token refresh
- **OpenAPI**: Client generation from backend spec at `http://127.0.0.1:12401/api.json`

## External Dependencies

- **Backend API**: Node.js backend at configurable base URL
- **OpenAPI Generator**: Client code generation from backend specification
- **Arco Design**: UI component library with theme customization
- **Chart Libraries**: ECharts for data visualization
- **Code Editors**: CodeMirror for code editing, Milkdown for rich text

### Development Services

- **Development API**: `http://127.0.0.1:12401` (local development)
- **Production API**: Configured via `VITE_API_BASE_URL` environment variable
