front-end/hdApp/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

This is 花掌柜 (huā zhǎng guì - Flower Shop Manager), a comprehensive flower shop management system built with UniApp. It's a cross-platform application targeting WeChat Mini Programs, H5 web apps, and native mobile apps (iOS/Android).

Key Features

• Inventory Management: Flower materials, plants, bouquets, and greenery tracking
• Order Management: Customer orders, procurement, sales, and refunds
• Customer Management: Member system with levels and benefits
• Financial Management: Billing, payments, revenue tracking, and financial reports
• Supply Chain: Supplier management and procurement workflows
• Multi-store Support: Multiple shop locations management
• Analytics: Sales statistics, profit analysis, and inventory reports

Technology Stack

• Framework: UniApp (Vue.js 2.x)
• Build Tool: Vue CLI with uni-app plugin
• State Management: Vuex
• UI Framework: Vant WeApp components + custom components
• HTTP Client: Flyio
• Charts: ECharts 4.2.1
• Platforms: WeChat Mini Program, H5, iOS, Android

Development Environment

Prerequisites

• Node.js
• HBuilderX or VS Code with uni-app plugin
• WeChat Developer Tools (for mini program testing)

Available Scripts

# Development
npm run dev:h5          # H5 development server (port 81)
npm run dev:mp-weixin   # WeChat Mini Program
npm run dev:app-plus    # App development

# Production Build
npm run build:h5        # H5 production build
npm run build:mp-weixin # Mini program production build
npm run build:app-plus  # App production build

# Other platforms
npm run dev:mp-alipay   # Alipay Mini Program
npm run dev:mp-baidu    # Baidu Smart Program
npm run dev:mp-qq       # QQ Mini Program
npm run dev:mp-toutiao  # ByteDance Mini Program

Environment Configuration

• Development API: http://api.shop.huaml.com
• Production API: http://shop.huaml.com
• Image Host: http://img.huaml.com
• Current Environment: dev (see src/config.js)

Project Structure

src/
├── admin/                 # Admin management system
│   ├── home/             # Main navigation pages (workbench, order, member, apply, me)
│   ├── goods/            # Product management (flowers, plants, categories)
│   ├── order/            # Order management system
│   ├── billing/          # Billing and checkout flows
│   ├── customer/         # Customer management
│   ├── staff/            # Employee management
│   ├── shop/             # Shop management
│   ├── stat/             # Statistics and reports
│   └── ...               # Other admin modules
├── pagesClient/          # Client-facing pages
├── pagesPurchase/        # Procurement system
├── pagesStorehouse/      # Inventory management
├── pagesOrder/           # Order processing
├── pagesStatistics/      # Business analytics
├── components/           # Reusable UI components
├── api/                  # API service modules (organized by business domain)
├── store/                # Vuex state management
├── utils/                # Utility functions and helpers
└── static/               # Static assets

Key Configuration Files

• src/manifest.json: App configuration (app name, permissions, SDKs)
• src/pages.json: Page routing and navigation configuration
• src/config.js: Environment-specific API endpoints
• vue.config.js: Webpack configuration for fallback modules
• project.config.json: WeChat Mini Program project settings

API Architecture

The API layer is organized by business domain:

• /api/goods/ - Product management
• /api/order/ - Order processing
• /api/custom/ - Customer management
• /api/stat/ - Statistics and analytics
• /api/billing/ - Billing and payments
• /api/storehouse/ - Inventory management

Important Notes

• The app supports sub-package loading for WeChat Mini Program optimization
• Lazy loading is enabled for required components
• Multiple deployment targets: H5 (port 81), WeChat Mini Program, iOS/Android apps
• Native plugins: Includes Bluetooth printer support (佳博打印机) and custom dialog components
• Payment integration: WeChat Pay and Alipay support
• Multi-language: Chinese language support throughout

Common Development Tasks

1. Adding new pages: Update src/pages.json and create corresponding Vue files
2. API integration: Add new endpoints in appropriate /api/ modules
3. State management: Use Vuex modules in /store/modules/
4. Styling: Use SCSS in /static/css/ or component-scoped styles
5. Component creation: Add reusable components to /components/ directory

Platform-Specific Considerations

• WeChat Mini Program: Follows WeChat's component and API standards
• H5: Uses responsive design with port 81 for development
• iOS/Android: Uses native capabilities like camera, Bluetooth, geolocation
• Cross-platform compatibility: Uses UniApp's conditional compilation for platform-specific code