af-mobile-client-vue3 1.3.12 → 1.3.14

package/CLAUDE.md

@@ -1,184 +1,189 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-This is a Vue 3 mobile client application (`af-mobile-client-vue3`) built as a smart gas system (智慧燃气) mobile application. It serves as a micro-frontend main application with comprehensive business components and dynamic form capabilities.
-
-## Development Commands
-
-```bash
-# Install dependencies
-pnpm install
-
-# Development server (with mock server on port 8086)
-pnpm dev
-
-# Build for production
-pnpm build
-
-# Build for development environment
-pnpm build:dev
-
-# Lint and type checking
-pnpm lint
-
-# Auto-fix linting issues
-pnpm lint:fix
-
-# Type checking only
-pnpm typecheck
-
-# Version release
-pnpm release
-```
-
-## Technology Stack
-
-- **Vue 3** with Composition API and `<script setup>` syntax
-- **TypeScript** for type safety
-- **Vite** as build tool (port 7190)
-- **Vant 4** as primary UI component library
-- **Pinia** for state management with persistence
-- **pnpm** as package manager (requires Node.js >=20.19.0)
-- **UnoCSS** for atomic CSS utilities
-- **@micro-zoe/micro-app** for micro-frontend architecture
-
-## Code Style & Standards
-
-From `.cursorrules`:
-
-- Use Composition API and `<script setup>` syntax
-- Component names: PascalCase (e.g., `UserProfile`)
-- Variables: camelCase (e.g., `userName`)
-- Boolean variables: use `is/has/should` prefix (e.g., `isLoading`)
-- Event handlers: use `handle` prefix (e.g., `handleSubmit`)
-- CSS classes: kebab-case (e.g., `user-profile`)
-- **Must explicitly import Vant components** - auto-import is disabled for this component library project
-- Use `interface` for type definitions, `type` for unions/intersections
-- Props must specify types
-
-## Architecture
-
-### Directory Structure
-
-```
-src/
-├── components/
-│   ├── core/           # Core UI components (NavBar, Tabbar, Uploader)
-│   ├── data/           # Business data components
-│   │   ├── XReportForm/     # Dynamic form with JSON configuration
-│   │   ├── XReportGrid/     # Data grid with reporting
-│   │   ├── XForm/           # General form components
-│   │   └── XOlMap/          # OpenLayers map integration
-│   └── layout/         # Layout components
-├── stores/             # Pinia state management
-├── utils/              # Utility functions
-├── views/              # Page components
-├── router/             # Vue Router configuration
-└── api/               # API layer
-```
-
-### Key Business Components
-
-**XReportForm Component** (`src/components/data/XReportForm/index.vue`):
-
-- Dynamic form generation from JSON configuration
-- Supports field types: `input`, `datePicker`, `timePicker`, `dateTimeSecondsPicker`, `curDateInput`, `signature`, `images`, `inputs`, `inputColumns`
-- Built-in validation with custom error messages
-- Slot-based extensibility for complex layouts
-- Integration with file upload and signature capture
-
-**XReportGrid Component**:
-
-- Data grid with reporting capabilities
-- Print functionality integration
-- Design mode for form configuration
-
-**XOlMap Component**:
-
-- OpenLayers integration for GIS functionality
-- Location picker with coordinate transformation
-
-### State Management
-
-- **Pinia stores** with persistence via `pinia-plugin-persistedstate`
-- **User store**: Authentication, permissions, user data
-- **Settings store**: Application configuration
-- **Route cache store**: Performance optimization
-
-### API Layer
-
-- **Axios-based HTTP client** with interceptors
-- **Request/Response transformers** for v3/v4 API compatibility
-- **Automatic token management** and error handling
-- **Mock server integration** for development
-
-## Development Workflow
-
-### Server Configuration
-
-- Development server runs on port 7190
-- Mock server runs on port 8086
-- Multiple API proxy endpoints configured in `vite.config.ts`
-
-### Build Process
-
-- Code splitting: `third` (node_modules), `views` (business pages)
-- Assets organized in `static/` directory with hashing
-- CSS code splitting disabled for mobile optimization
-- Legacy browser support via `@vitejs/plugin-legacy`
-
-### Git Hooks
-
-- Pre-commit: `pnpm lint-staged` (ESLint auto-fix)
-- Commit message: `pnpm commitlint` (conventional commits)
-
-## Micro-Frontend Integration
-
-This is a main application for micro-frontend architecture:
-
-- Uses `@micro-zoe/micro-app` for micro-app management
-- Child apps register in `microApps.ts`
-- Supports dynamic loading and routing
-- Unmount function available at `window.unmount`
-
-## Mobile-Specific Features
-
-- **@vant/touch-emulator** for desktop development
-- **postcss-mobile-forever** for viewport handling
-- **vite-plugin-pwa** for PWA capabilities
-- **VConsole** for mobile debugging
-- Dark mode support throughout the application
-
-## Common Patterns
-
-### Adding New Field Types to XReportForm
-
-1. Add type to `generateDefaultRequiredMessage()` function
-2. Add case in `formatConfigToForm()` switch statement
-3. Add template section in the component template
-4. Follow existing patterns for validation and data binding
-
-### Component Development
-
-- Use `<script setup lang="ts">` syntax
-- Explicitly import Vant components
-- Define props with TypeScript interfaces
-- Use `defineEmits` for events
-- Follow existing component structure patterns
-
-### API Integration
-
-- Use the existing HTTP client in `src/utils/http/`
-- Follow v3/v4 API patterns established in the codebase
-- Handle errors consistently with existing patterns
-
-## Testing & Quality
-
-- **ESLint** with `@antfu/eslint-config`
-- **TypeScript** strict mode
-- **Vue TSC** for type checking
-- **Commitlint** for commit message standards
-- **Lint-staged** for pre-commit hooks
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a Vue 3 mobile client application (`af-mobile-client-vue3`) built as a smart gas system (智慧燃气) mobile application. It serves as a micro-frontend main application with comprehensive business components and dynamic form capabilities.
+
+## Development Commands
+
+```bash
+# Install dependencies
+pnpm install
+
+# Development server (with mock server on port 8086)
+pnpm dev
+
+# Build for production
+pnpm build
+
+# Build for development environment
+pnpm build:dev
+
+# Lint and type checking
+pnpm lint
+
+# Auto-fix linting issues
+pnpm lint:fix
+
+# Type checking only
+pnpm typecheck
+
+# Version release
+pnpm release
+```
+
+## Technology Stack
+
+- **Vue 3** with Composition API and `<script setup>` syntax
+- **TypeScript** for type safety
+- **Vite** as build tool (port 7190)
+- **Vant 4** as primary UI component library
+- **Pinia** for state management with persistence
+- **pnpm** as package manager (requires Node.js >=20.19.0)
+- **UnoCSS** for atomic CSS utilities
+- **@micro-zoe/micro-app** for micro-frontend architecture
+
+## Code Style & Standards
+
+From `.cursorrules`:
+
+- Use Composition API and `<script setup>` syntax
+- Component names: PascalCase (e.g., `UserProfile`)
+- Variables: camelCase (e.g., `userName`)
+- Boolean variables: use `is/has/should` prefix (e.g., `isLoading`)
+- Event handlers: use `handle` prefix (e.g., `handleSubmit`)
+- CSS classes: kebab-case (e.g., `user-profile`)
+- **Must explicitly import Vant components** - auto-import is disabled for this component library project
+- Use `interface` for type definitions, `type` for unions/intersections
+- Props must specify types
+
+## Architecture
+
+### Directory Structure
+
+```
+src/
+├── components/
+│   ├── core/           # Core UI components (NavBar, Tabbar, Uploader)
+│   ├── data/           # Business data components
+│   │   ├── XReportForm/     # Dynamic form with JSON configuration
+│   │   ├── XReportGrid/     # Data grid with reporting
+│   │   ├── XForm/           # General form components
+│   │   └── XOlMap/          # OpenLayers map integration
+│   └── layout/         # Layout components
+├── stores/             # Pinia state management
+├── utils/              # Utility functions
+├── views/              # Page components
+├── router/             # Vue Router configuration
+└── api/               # API layer
+```
+
+### Key Business Components
+
+**XReportForm Component** (`src/components/data/XReportForm/index.vue`):
+
+- Dynamic form generation from JSON configuration
+- Supports field types: `input`, `datePicker`, `timePicker`, `dateTimeSecondsPicker`, `curDateInput`, `signature`, `images`, `inputs`, `inputColumns`
+- Built-in validation with custom error messages
+- Slot-based extensibility for complex layouts
+- Integration with file upload and signature capture
+
+**XReportGrid Component**:
+
+- Data grid with reporting capabilities
+- Print functionality integration
+- Design mode for form configuration
+
+**XOlMap Component**:
+
+- OpenLayers integration for GIS functionality
+- Location picker with coordinate transformation
+
+### State Management
+
+- **Pinia stores** with persistence via `pinia-plugin-persistedstate`
+- **User store**: Authentication, permissions, user data
+- **Settings store**: Application configuration
+- **Route cache store**: Performance optimization
+
+### API Layer
+
+- **Axios-based HTTP client** with interceptors
+- **Request/Response transformers** for v3/v4 API compatibility
+- **Automatic token management** and error handling
+- **Mock server integration** for development
+
+## Development Workflow
+
+### Server Configuration
+
+- Development server runs on port 7190
+- Mock server runs on port 8086
+- Multiple API proxy endpoints configured in `vite.config.ts`
+
+### Build Process
+
+- Code splitting: `third` (node_modules), `views` (business pages)
+- Assets organized in `static/` directory with hashing
+- CSS code splitting disabled for mobile optimization
+- Legacy browser support via `@vitejs/plugin-legacy`
+
+### Git Hooks
+
+- Pre-commit: `pnpm lint-staged` (ESLint auto-fix)
+- Commit message: `pnpm commitlint` (conventional commits)
+
+## Micro-Frontend Integration
+
+This is a main application for micro-frontend architecture:
+
+- Uses `@micro-zoe/micro-app` for micro-app management
+- Child apps register in `microApps.ts`
+- Supports dynamic loading and routing
+- Unmount function available at `window.unmount`
+
+## Mobile-Specific Features
+
+- **@vant/touch-emulator** for desktop development
+- **postcss-mobile-forever** for viewport handling
+- **vite-plugin-pwa** for PWA capabilities
+- **VConsole** for mobile debugging
+- Dark mode support throughout the application
+
+## Common Patterns
+
+### Adding New Field Types to XReportForm
+
+1. Add type to `generateDefaultRequiredMessage()` function
+2. Add case in `formatConfigToForm()` switch statement
+3. Add template section in the component template
+4. Follow existing patterns for validation and data binding
+
+### Component Development
+
+- Use `<script setup lang="ts">` syntax
+- Explicitly import Vant components
+- Define props with TypeScript interfaces
+- Use `defineEmits` for events
+- Follow existing component structure patterns
+
+### API Integration
+
+- Use the existing HTTP client in `src/utils/http/`
+- Follow v3/v4 API patterns established in the codebase
+- Handle errors consistently with existing patterns
+
+## Testing & Quality
+
+- **ESLint** with `@antfu/eslint-config`
+- **TypeScript** strict mode
+- **Vue TSC** for type checking
+- **Commitlint** for commit message standards
+- **Lint-staged** for pre-commit hooks
+
+## 注意事项
+
+- 此项目作为组件库项目 所以没有开启自动引入 不能自动引入 vue 中的 ref/compute 等
+- 此项目为了统一业务项目使用，所以 使用 @af-mobile-client-vue3/ 表示 src 而不是 @/