RCC Configuration Web UI

RCC Configuration Web UI 是一个用于解析和生成AI服务配置的可视化界面。

功能特性

- 配置文件上传和解析
- 自动加载默认配置文件
- 流水线配置生成
- 实时状态监控
- 导出解析结果和流水线配置

安装和使用

$3

``typescript
import { initializeConfigurationUI } from './src/webui';

// 初始化配置中心UI
const ui = await initializeConfigurationUI({
containerId: 'config-ui-container',
theme: 'auto',
defaultView: 'parser'
});

// 使用配置加载管理器
const configManager = ui.getConfigLoadingManager();
`

$3

`typescript
// 获取配置加载管理器
const configManager = getConfigLoadingManager();

// 加载和解析配置文件
const parseResult = await configManager.loadAndParseConfigFile(file);

// 获取当前状态
const state = configManager.getState();
`

架构设计

$3

1. ConfigurationCenterUI - 主界面管理器
2. ConfigLoadingManager - 配置加载管理器
3. ConfigParserMain - 配置解析主组件
4. PipelineConfigGenerator - 流水线配置生成器

$3

`
用户上传配置文件 → ConfigLoadingManager → ParserService → 解析结果 → 流水线配置生成 → UI显示
`

$3

使用状态监听器模式管理配置加载状态：

`typescript
configManager.addStateListener((state) => {
console.log('状态更新:', state);
});
`

导出功能

支持两种导出类型：

1. 解析结果 - 原始解析数据
2. 流水线配置 - 生成的流水线配置

主题支持

支持三种主题模式：

- light - 浅色主题
- dark - 深色主题
- auto` - 自动跟随系统

API接口

$3

初始化配置中心UI

$3

获取配置加载管理器实例

$3

获取当前UI状态

$3

销毁配置中心UI