Frontend for the Moon monitoring platform — a micro-frontend multi-app management console

中文

Moon Web is the frontend for the Moon Monitoring Platform. It uses a micro-frontend architecture that splits system management, messaging, strategy/alerting, and node probing into independent sub-applications, orchestrated by a main shell app that handles navigation, authentication, theming, and internationalization.

┌─────────────────────────────────────────────────────────┐
│                   main (Shell Application)               │
│  Login · Layout · Menu · Auth · Theme · i18n · NS      │
└──────────┬──────────┬──────────┬──────────┬───────────────┘
           │          │          │          │
     ┌─────▼────┐ ┌───▼───┐ ┌───▼────┐ ┌──▼──────┐ ┌──────────┐
     │ goddess  │ │ rabbit│ │marksman│ │jade_tree│ │Standalone│
     │ System   │ │Message│ │Strategy│ │  Probe  │ │  Access  │
     └──────────┘ └───────┘ └────────┘ └─────────┘ └──────────┘

• The shell app embeds sub-app pages via iframe using SubAppContainer.
• Each sub-app can be developed, built, and deployed independently, or accessed standalone without the shell.
• Sub-apps communicate route, locale, and theme changes through micro-app's setData / addDataListener.

• Node.js ≥ 18 (20 LTS recommended)
• pnpm ≥ 8

# Clone the repository
git clone git@github.com:aide-family/moon-web.git
cd moon-web

# Install dependencies
pnpm install

# Start all sub-apps (development)
pnpm dev

Access URLs:

When using the shell app, all sub-apps must be running for embedded micro-frontend pages to load.

Development config: .env.development. Production config: .env.production. Each sub-app is identified by the APP_NAME env var; Vite proxies /v1, /oauth2, and /health to the corresponding backend.

Ensure the corresponding backend services are running locally, otherwise API requests will fail.

moon-web/
├── src/
│   ├── apps/                  # Sub-app entry points
│   │   ├── main/              # Shell + menu config
│   │   ├── goddess/
│   │   ├── rabbit/
│   │   ├── marksman/
│   │   └── jade_tree/
│   ├── pages/                 # Page components (by module)
│   │   ├── goddess/           # Namespaces, users, members, profile
│   │   ├── rabbit/            # Templates, emails, webhooks, messages
│   │   ├── marksman/          # Alerts, datasources, strategies
│   │   ├── jade_tree/         # SSH, audits, probes, machines
│   │   └── main/              # Login page
│   ├── api/                   # API layer
│   │   ├── common/            # Axios instance, shared types
│   │   ├── account/           # Auth, users, namespaces
│   │   ├── marksman/          # Strategy & datasources
│   │   ├── rabbit/            # Messaging
│   │   └── jade_tree/         # Node probing
│   ├── components/            # Shared components
│   ├── contexts/              # React Context (theme, locale, namespace)
│   ├── locales/               # i18n resources (zh/en)
│   ├── config/                # Shared config
│   ├── utils/                 # Utilities & hooks
│   └── styles/                # Global styles
├── .env.development
├── .env.production
├── vite.config.ts
├── tsconfig.app.json
└── package.json

• All HTTP requests go through the http wrapper in src/api/common/request.ts with baseURL /v1.
• Requests automatically include Authorization: Bearer <token> and X-Namespace headers.
• Page components must not call http or axios directly — use functions from src/api/**.
• API modules are organized by backend service; each submodule has:
  • index.ts — request functions
  • types.ts — TypeScript type definitions
• Backend OpenAPI spec: {service base URL}/doc/swagger/openapi.yaml. When APIs change, update src/api/ and all consuming pages.

• Supports Chinese (zh-CN) and English (en-US); switchable from the header.
• All user-facing text must use the t() function from useLocale() — no hardcoded strings.
• Translation files live in src/locales/, split by module; each file exports both zhCN and enUS.
• See src/locales/README.md for details.

• Components: Functional components + Hooks; use useMemo for derived state, useCallback for handlers.
• Ant Design v6: Use open on Modal (not visible); use menu={{ items }} on Dropdown; always set rowKey on Table.
• Data fetching: Handle loading state; complete try/catch/finally; avoid setState after unmount.
• Path alias: @/ maps to src/.
• Formatting: Prettier (prettier.config.js); run pnpm format before commit or use format-on-save (see .vscode/settings.json).
• Hover docs: Only /** JSDoc */ and types appear on hover—not // line comments. Workspace uses the project TypeScript SDK (.vscode/settings.json).
• Page conventions: .cursor/rules/moon-web-pages-conventions.mdc.

# Build all sub-apps
pnpm build

# Output directories
dist/
├── main/
├── goddess/
├── rabbit/
├── marksman/
└── jade_tree/

Each sub-app output is independent and can be deployed to separate paths or domains. Configure CORS and SPA fallback on your web server or CDN for production.

Preview ports:

1. Fork the repo and create a feature branch
2. Follow existing code style and i18n conventions
3. Run pnpm format:check, pnpm lint, and pnpm typecheck before submitting
4. Open a Pull Request

This project is licensed under the MIT License.