93 lines
3.1 KiB
Markdown
93 lines
3.1 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Project Overview
|
|
|
|
This is **hzhub-portal**, a Vue 3 AI chat application built with TypeScript, Vite, and Element Plus. It provides a chat interface for AI interactions with support for sessions, models, and various authentication methods.
|
|
|
|
## Commands
|
|
|
|
```bash
|
|
# Development
|
|
pnpm dev # Start dev server
|
|
|
|
# Build
|
|
pnpm build # Type-check and build for production
|
|
|
|
# Linting
|
|
pnpm lint # Run ESLint
|
|
pnpm lint:stylelint # Run Stylelint
|
|
pnpm fix # Auto-fix ESLint issues
|
|
|
|
# Preview production build
|
|
pnpm preview
|
|
```
|
|
|
|
## Architecture
|
|
|
|
### Tech Stack
|
|
- **Vue 3** with Composition API (`<script setup>`)
|
|
- **TypeScript** for type safety
|
|
- **Pinia** for state management with persistence (`pinia-plugin-persistedstate`)
|
|
- **Vue Router** for routing with navigation guards
|
|
- **Element Plus** for UI components
|
|
- **UnoCSS** for atomic CSS
|
|
- **hook-fetch** for HTTP requests with SSE support
|
|
|
|
### Directory Structure
|
|
|
|
```
|
|
src/
|
|
├── api/ # API modules (auth, chat, model, session) with types
|
|
├── assets/ # Static assets (SVG icons organized by category)
|
|
├── components/ # Reusable components (LoginDialog, ModelSelect, etc.)
|
|
├── config/ # App configuration constants
|
|
├── constants/ # Enum definitions
|
|
├── hooks/ # Custom Vue composables
|
|
├── layouts/ # Layout components (LayoutVertical, LayoutMobile)
|
|
├── pages/ # Page components (chat, error pages)
|
|
├── routers/ # Route definitions and guards
|
|
├── stores/ # Pinia stores (user, chat, session, model, design)
|
|
├── styles/ # Global SCSS styles and variables
|
|
├── utils/ # Utilities (request wrapper, markdown renderers)
|
|
└── main.ts # App entry point
|
|
```
|
|
|
|
### Key Patterns
|
|
|
|
**API Layer** (`src/api/`):
|
|
- Each module has `index.ts` for API calls and `types.ts` for TypeScript interfaces
|
|
- Uses `hook-fetch` with JWT plugin for authentication
|
|
- Base URL configured via `VITE_API_URL` environment variable
|
|
|
|
**State Management** (`src/stores/`):
|
|
- Stores use Composition API style with `defineStore`
|
|
- User store persists token and userInfo
|
|
- Session store handles chat sessions with pagination
|
|
- Chat store manages messages and deep thinking state
|
|
|
|
**Routing** (`src/routers/`):
|
|
- Static routes defined in `modules/staticRouter.ts`
|
|
- Route guard checks token and handles auth redirect
|
|
- White list routes bypass auth check
|
|
|
|
**HTTP Requests** (`src/utils/request.ts`):
|
|
- Auto-injects `Bearer` token and `ClientID` headers
|
|
- Handles 401 (logout) and 403 (redirect) responses
|
|
- Supports SSE streaming via `sseTextDecoderPlugin`
|
|
|
|
### Environment Variables
|
|
|
|
Configure in `.env.development`:
|
|
- `VITE_API_URL` - Backend API base URL
|
|
- `VITE_CLIENT_ID` - Client identifier for auth
|
|
- `VITE_WEB_TITLE` - Page title
|
|
|
|
### Code Style
|
|
|
|
- ESLint with `@antfu/eslint-config`
|
|
- Vue blocks order: script → template → style
|
|
- Single quotes, semicolons, 2-space indent
|
|
- Commit messages follow conventional commits with commitlint
|