online-order-h5/CLAUDE.md

CLAUDE.md

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

Project Overview

LINE Order App - A mobile-first web application for restaurant ordering, built with Vue 3 + TypeScript + LIFF (LINE Front-end Framework).

Tech Stack

• Framework: Vue 3 (Composition API) + TypeScript
• Build Tool: Vite 5
• State Management: Pinia 2
• Router: Vue Router 4
• UI Components: Vant 4
• HTTP Client: Axios
• WebSocket: Socket.IO Client
• i18n: vue-i18n 9 (ja, en, zh-Hans, zh-Hant)
• LINE SDK: @line/liff

Common Commands

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Architecture

The app supports four business modes:

1. Customer Mode - C-end ordering interface (LINE/mobile browser)
2. POS Mode - Staff tablet interface for table/order management
3. Owner Mode - Mobile management dashboard for shop owners
4. Platform Mode - Aggregated homepage with shop listings and LBS

Key Directories

• src/api/ - API interface definitions
• src/components/ - Reusable Vue components
• src/composables/ - Vue composition functions (hooks)
• src/config/ - Global configuration
• src/locale/ - i18n language packs (ja, en, zh-Hans, zh-Hant)
• src/router/ - Route definitions
• src/store/ - Pinia state management
• src/utils/ - Utility functions
• src/views/ - Page components organized by feature

Internationalization (i18n)

All user-facing text must use i18n. Language files are in src/locale/:

• ja.json - Japanese (default)
• en.json - English
• zh-Hans.json - Simplified Chinese
• zh-Hant.json - Traditional Chinese

When adding new text:

1. Add the key-value pair to all four language files
2. Use $t('key') in templates or t('key') in setup scripts

Coding Conventions

• Use Composition API with <script setup lang="ts">
• Use Vant 4 components for UI (auto-imported)
• Follow existing file naming: kebab-case for files, PascalCase for components
• Keep components focused and reusable
• Use TypeScript for type safety

Environment Variables

Located in .env.development and .env.production:

• VITE_API_URL - Backend API URL
• VITE_WS_URL - WebSocket URL
• VITE_LIFF_ID - LINE LIFF ID
• VITE_TENANT_ID - Tenant ID