ContextQMD
Back to Spring Ai Alibaba

README

spring-ai-alibaba-admin/frontend/README.md

1.1.2.23.4 KB
Original Source

<p align="center">English | <a href="./README.zh-CN.md">δΈ­ζ–‡</a></p>

πŸ“‹ Project Overview

frontend-monorepo is a frontend project based on Monorepo architecture, mainly consisting of two core functional modules: the workbench application and the visual workflow editor. The project adopts modern frontend technology stack and supports multilingual internationalization.

πŸ“‚ Project Structure

frontend/
β”œβ”€β”€ packages/                # Monorepo subprojects
β”‚   β”œβ”€β”€ main/                # Main workbench application
β”‚   β”œβ”€β”€ spark-flow/          # Visual workflow editor
β”‚   └── spark-i18n/          # Internationalization support
└── package.json             # Root project configuration

πŸ’Ž Core Modules

πŸ–₯️ main (Main Workbench)

  • Single-page application built with Umi 4
  • Main functional modules:
    • Workflow editor integration
    • Agent management
    • MCP management
    • Plugin management
    • Knowledge base management
    • Model service configuration
  • Technical features:
    • Uses TailwindCSS for styling
    • Integrates spark-flow as workflow editor
    • Supports both Python and Java backend modes
    • Supports internationalization

🎨 spark-flow (Workflow Editor)

  • Core features:
    • Visual node editing
    • Node type system (start/end/LLM/script/plugin etc.)
    • Process testing and debugging
    • Version management
  • Technical implementation:
    • Flowchart rendering based on XYFlow (React Flow)
    • Uses ELK.js for automatic layout
    • State management with Zustand
    • Supports internationalization

🌐 spark-i18n (Internationalization)

  • Provides multilingual support
  • Automated translation toolchain
  • Supports Chinese-English switching

⚑ Quick Start

Run from Source

Before starting the web frontend service, please ensure the following environment is ready:

First, install the required dependencies in the root directory:

bash
npm install rimraf copyfiles cross-env --save-dev

Then, install all project dependencies:

bash
npm run re-install

Then, configure environment variables. Create a file named .env in the current directory and copy contents from .env.example. Modify these environment variable values according to your needs:

bash
cd packages/main

On macOS/Linux:

bash
cp .env.example .env

On Windows (PowerShell):

bash
Copy-Item .env.example .env

# Web server URL
WEB_SERVER="http://127.0.0.1:8080"

# Backend type, e.g., java, python
BACK_END="java"

# Default username for application login
DEFAULT_USERNAME=saa

# Default password for application login
DEFAULT_PASSWORD=123456

Finally, run the development server:

bash
npm run dev

Open http://localhost:8000 in your browser to view the result.

You can start editing files in the main/src folder. The page will automatically update when you edit files.

🚒 Deployment

bash
# If backend is java
npm run build:subtree:java

After the command completes, it will generate a ./packages/main/dist directory, which you can then deploy to your server.

πŸ“¦ Additional Dependencies