国际化国家
This commit is contained in:
233
CLAUDE.md
Normal file
233
CLAUDE.md
Normal file
@@ -0,0 +1,233 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Project Overview
|
||||
|
||||
This is **yudao-ui-admin-vue3**, a Vue 3 admin dashboard built with Vite, TypeScript, and Element Plus. It's part of the 芋道 (Yudao) open-source admin system that supports multi-tenant SaaS scenarios and integrates with Spring Boot/Spring Cloud backends.
|
||||
|
||||
## Development Commands
|
||||
|
||||
### Setup
|
||||
```bash
|
||||
pnpm install # Install dependencies (pnpm is required, version >=8.6.0)
|
||||
```
|
||||
|
||||
### Development
|
||||
```bash
|
||||
pnpm dev # Start dev server with env.local environment
|
||||
pnpm dev-server # Start dev server with dev environment
|
||||
pnpm ts:check # Run TypeScript type checking
|
||||
```
|
||||
|
||||
### Build
|
||||
```bash
|
||||
pnpm build:local # Build for local environment
|
||||
pnpm build:dev # Build for dev environment
|
||||
pnpm build:test # Build for test environment
|
||||
pnpm build:stage # Build for staging environment
|
||||
pnpm build:prod # Build for production environment
|
||||
```
|
||||
|
||||
### Preview
|
||||
```bash
|
||||
pnpm serve:dev # Preview dev build
|
||||
pnpm serve:prod # Preview production build
|
||||
pnpm preview # Build local and preview
|
||||
```
|
||||
|
||||
### Linting & Formatting
|
||||
```bash
|
||||
pnpm lint:eslint # Fix ESLint issues in .js, .ts, .vue files
|
||||
pnpm lint:format # Format code with Prettier
|
||||
pnpm lint:style # Fix Stylelint issues in styles
|
||||
```
|
||||
|
||||
### Cleanup
|
||||
```bash
|
||||
pnpm clean # Remove node_modules
|
||||
pnpm clean:cache # Clear node_modules cache
|
||||
```
|
||||
|
||||
## Architecture
|
||||
|
||||
### Technology Stack
|
||||
- **Framework**: Vue 3.5.12 (Composition API)
|
||||
- **Build Tool**: Vite 5.1.4
|
||||
- **UI Library**: Element Plus 2.9.1
|
||||
- **Language**: TypeScript 5.3.3
|
||||
- **State Management**: Pinia 2.1.7 with persistence (pinia-plugin-persistedstate)
|
||||
- **Router**: Vue Router 4.4.5
|
||||
- **I18n**: Vue I18n 9.10.2
|
||||
- **HTTP Client**: Axios 1.9.0
|
||||
- **CSS Framework**: UnoCSS 0.58.5
|
||||
- **Icons**: Iconify 3.1.1
|
||||
|
||||
### Directory Structure
|
||||
|
||||
```
|
||||
src/
|
||||
├── api/ # API service layer organized by business modules
|
||||
│ ├── login/ # Authentication APIs
|
||||
│ ├── system/ # System management (users, roles, menus, etc.)
|
||||
│ ├── bpm/ # Business Process Management (workflow)
|
||||
│ ├── infra/ # Infrastructure (code gen, files, jobs, etc.)
|
||||
│ ├── pay/ # Payment system
|
||||
│ ├── mall/ # E-commerce/Mall system
|
||||
│ ├── crm/ # Customer Relationship Management
|
||||
│ ├── erp/ # Enterprise Resource Planning
|
||||
│ ├── ai/ # AI/LLM features
|
||||
│ └── mp/ # WeChat Official Account
|
||||
├── assets/ # Static assets (images, svgs)
|
||||
├── components/ # Global reusable components
|
||||
├── config/ # Configuration files
|
||||
├── directives/ # Custom Vue directives
|
||||
├── hooks/ # Composable functions
|
||||
├── layout/ # Layout components
|
||||
├── locales/ # I18n translation files
|
||||
├── plugins/ # Plugin setup (Element Plus, UnoCSS, etc.)
|
||||
├── router/ # Vue Router configuration
|
||||
├── store/ # Pinia stores
|
||||
│ └── modules/ # Store modules (user, permission, dict, etc.)
|
||||
├── styles/ # Global styles (SCSS)
|
||||
├── types/ # TypeScript type definitions
|
||||
├── utils/ # Utility functions
|
||||
├── views/ # Page components organized by features
|
||||
├── App.vue # Root component
|
||||
├── main.ts # Application entry point
|
||||
└── permission.ts # Route permission guard
|
||||
```
|
||||
|
||||
### Application Bootstrap (src/main.ts)
|
||||
|
||||
The application initializes in this order:
|
||||
1. **I18n** setup (async - loads translations)
|
||||
2. **Pinia** store setup
|
||||
3. **Global components** registration
|
||||
4. **Element Plus** setup
|
||||
5. **Form Create** (form builder) setup
|
||||
6. **Router** setup
|
||||
7. **Directives** (auth, mounted-focus)
|
||||
8. **VueDOMPurifyHTML** (XSS protection for v-html)
|
||||
|
||||
### Permission & Route System (src/permission.ts)
|
||||
|
||||
- **Dynamic Route Loading**: Routes are fetched from backend based on user permissions
|
||||
- **Route Guards**:
|
||||
- Checks authentication token before each route
|
||||
- Loads user info and permissions on first access
|
||||
- Loads dictionary data for the entire app
|
||||
- Dynamically adds authorized routes using `router.addRoute()`
|
||||
- **White List**: `/login`, `/social-login`, `/auth-redirect`, `/bind`, `/register`, `/oauthLogin/gitee`
|
||||
|
||||
### State Management Pattern
|
||||
|
||||
Stores are located in `src/store/modules/` and use Pinia:
|
||||
- `user.ts` - User information and authentication
|
||||
- `permission.ts` - User permissions and dynamic routes
|
||||
- `dict.ts` - System dictionaries (cached)
|
||||
- Store modules use the "WithOut" pattern for access outside setup: `useUserStoreWithOut()`
|
||||
|
||||
### API Layer Pattern
|
||||
|
||||
- APIs are organized by business domain in `src/api/`
|
||||
- Each module has an `index.ts` (API functions) and `types.ts` (TypeScript interfaces)
|
||||
- Axios is configured in `src/config/axios/` with interceptors for auth and error handling
|
||||
- API calls should use the centralized request service, not raw axios
|
||||
|
||||
### Auto-Import System
|
||||
|
||||
The project uses unplugin-auto-import and unplugin-vue-components:
|
||||
- Vue APIs (ref, computed, etc.) are auto-imported
|
||||
- Element Plus components are auto-imported
|
||||
- Custom composables from hooks are auto-imported
|
||||
- Generated types are in `src/types/auto-imports.d.ts` and `src/types/auto-components.d.ts`
|
||||
|
||||
### Form Builder Integration
|
||||
|
||||
- Uses `@form-create/element-ui` and `@form-create/designer` for dynamic form building
|
||||
- BPMN workflow designer uses `bpmn-js` and `bpmn-js-properties-panel`
|
||||
|
||||
### Environment Configuration
|
||||
|
||||
- Environment files: `.env`, `.env.local`, `.env.dev`, `.env.test`, `.env.stage`, `.env.prod`
|
||||
- Key variables:
|
||||
- `VITE_BASE_PATH` - Base URL path
|
||||
- `VITE_BASE_URL` - API base URL
|
||||
- `VITE_PORT` - Dev server port
|
||||
- `VITE_OUT_DIR` - Build output directory
|
||||
- `VITE_DROP_CONSOLE` - Remove console.log in production
|
||||
|
||||
### Build Configuration
|
||||
|
||||
- **Code Splitting**:
|
||||
- `echarts` is split into separate chunk
|
||||
- `@form-create/element-ui` is split separately
|
||||
- `@form-create/designer` is split separately
|
||||
- **Minification**: Uses Terser
|
||||
- **Memory**: Build uses `--max_old_space_size=4096` for large builds
|
||||
|
||||
### Multi-Tenant (SaaS) Support
|
||||
|
||||
This system has built-in multi-tenant functionality:
|
||||
- Tenant management in system modules
|
||||
- Tenant packages with customizable menu/permission configurations
|
||||
- APIs should be tenant-aware
|
||||
|
||||
## Development Guidelines
|
||||
|
||||
### Path Aliases
|
||||
|
||||
Use `@/` for imports, which resolves to `src/`:
|
||||
```typescript
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
```
|
||||
|
||||
### TypeScript
|
||||
|
||||
- `noImplicitAny` is disabled - type annotations are not strictly required
|
||||
- Use interfaces from `src/api/*/types.ts` for API request/response types
|
||||
|
||||
### I18n
|
||||
|
||||
- Translation files are in `src/locales/`
|
||||
- Use the `useI18n()` composable (auto-imported)
|
||||
- Support for Chinese and English
|
||||
|
||||
### Component Development
|
||||
|
||||
- Global components in `src/components/` are auto-registered
|
||||
- Use Element Plus components (auto-imported, no manual import needed)
|
||||
- DiyEditor mobile components are excluded from auto-import
|
||||
|
||||
### Icons
|
||||
|
||||
- SVG icons are in `src/assets/svgs/`
|
||||
- Use Iconify for icon sets
|
||||
- SVG icons are registered with `icon-[dir]-[name]` pattern
|
||||
|
||||
### Styling
|
||||
|
||||
- SCSS is the preprocessor
|
||||
- Global variables are in `src/styles/variables.scss` (auto-injected)
|
||||
- UnoCSS is used for atomic/utility CSS
|
||||
|
||||
### Security
|
||||
|
||||
- XSS protection via `vue-dompurify-html` for v-html directives
|
||||
- Auth tokens managed in `src/utils/auth`
|
||||
- Permission directives for button-level access control
|
||||
|
||||
## Important Notes
|
||||
|
||||
- **Node.js**: Requires >= 16.0.0
|
||||
- **pnpm**: Must use pnpm >= 8.6.0 (not npm or yarn)
|
||||
- **Backend**: Designed to work with Spring Boot (single) or Spring Cloud (microservices) backend
|
||||
- **Route Debugging**: If routes aren't appearing, check the permission store and backend API responses
|
||||
- **Dictionary Loading**: System dictionaries are loaded once on login and cached in the dict store
|
||||
|
||||
## Related Documentation
|
||||
|
||||
- Backend API docs (Swagger): Available at `/admin-api/swagger-ui.html` on backend server
|
||||
- Official docs: https://doc.iocoder.cn
|
||||
- Demo: http://dashboard-vue3.yudao.iocoder.cn
|
||||
Reference in New Issue
Block a user