# switch-frontend

**Repository Path**: fatzeng/switch-frontend

## Basic Information

- **Project Name**: switch-frontend
- **Description**: switch-frontend是一个现代的基于React的Web应用程序，为Switch系统提供全面的管理界面。使用TypeScript和Ant Design Pro构建，为管理特性开关、环境和系统配置提供专业直观的用户体验。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 0
- **Created**: 2025-07-30
- **Last Updated**: 2025-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Ant-Design, React

## README

# Switch: 动态特性开关与远程配置系统

<div align="center">

<img src="switch.svg" alt="Switch Logo" width="300">

**为现代应用开发打造的强大实时特性开关系统**

[![Go Version](https://img.shields.io/badge/Go-1.18+-blue.svg)](https://golang.org)
[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
[![Build Status](https://img.shields.io/badge/Build-Passing-brightgreen.svg)](https://gitee.com/fatzeng/collections/413616)

[English](README.md) | [中文](README_zh.md)

</div>

---

## 🎯 什么是Switch？

**Switch是一个分布式实时特性管控平台**，为企业级应用提供安全、高效的动态配置能力。它通过先进的WebSocket长连接架构和多驱动通信机制，实现了配置变更的毫秒级下发，让开发团队能够在不重启应用的情况下，精确控制功能发布、用户体验和系统行为。

### 🏗️ 核心架构优势

**1. 企业级通信架构**

- **WebSocket长连接框架** - 基于`switch-components/pc`的持久连接管理
- **多驱动支持** - Webhook、Kafka、长轮询三种通信模式
- **智能网络发现** - 自动适配NAT环境，解决复杂网络场景
- **分层确认机制** - 确保配置下发的可靠性和一致性

**2. 灵活的因子系统**

```go
// 不只是简单的true/false，而是基于复杂规则的智能决策
if _switch.IsOpen(ctx, "feature_enabled") {
    // 系统会根据配置的多维度因子（例如：用户属性、地理位置、时间窗口等）
    // 实时计算是否启用该功能
}
```

**3. 多租户管理体系**

- **租户隔离** - 完整的数据和权限隔离
- **环境管理** - 开发、测试、生产环境的独立配置搭配严格的配置推送制度
- **审批工作流** - 敏感变更的多级审批机制

## 系统架构

Switch生态系统由以下核心组件组成：

- **switch-admin**: 后端服务，负责管理配置和客户端通信
- **switch-frontend**: Web界面，用于配置管理
- **switch-sdk-go**: Go SDK，用于将开关集成到业务应用中形成客户端
- **switch-sdk-core**: 核心定义和接口
- **switch-components**: 通信和核心逻辑的实现
- **switch-client-demo**: 演示应用示例

---

# Switch-Frontend: 企业级可视化管控平台

**Switch-Frontend** 是基于现代化前端技术栈构建的企业级特性管控可视化平台,为Switch分布式实时配置系统提供全方位的管理界面。该平台采用React 19+与TypeScript深度融合的架构设计,结合Ant Design Pro企业级UI组件库,为特性开关管理、多环境治理、驱动配置及审批工作流等核心业务场景提供专业、直观、高效的用户体验。

作为Switch生态系统的统一管控中心,Switch-Frontend不仅是配置管理的可视化界面,更是连接业务决策与技术实现的关键枢纽,通过精心设计的交互体验和强大的功能模块,赋能企业实现敏捷的特性发布、精细化的配置治理和全链路的可观测性。

---

## ✨ 核心能力矩阵

### 🏢 多租户治理体系
- **租户隔离架构**: 基于命名空间的完整数据隔离机制,确保租户间配置与数据的绝对安全边界
- **统一身份管理**: 集成化的用户注册、身份认证管理体系,支持企业级SSO对接
- **细粒度权限控制**: 基于RBAC模型的多维度权限管理,实现角色、资源、操作的精准授权
- **租户上下文切换**: 无缝的租户工作空间切换能力,支持跨租户管理与协作场景

### 🎛️ 智能开关管控
- **可视化配置中心**: 提供直观的开关创建、编辑与版本管理界面,支持批量操作与配置模板
- **规则编排引擎**: 可视化规则构建器,支持复杂条件组合、逻辑运算与动态表达式
- **多维因子系统**: 灵活配置评估因子(用户画像、地理位置、设备类型、时间窗口等),实现精准灰度策略
- **实时评估沙箱**: 内置开关评估测试环境,支持多场景模拟与结果预览,降低配置风险

### 🌍 全生命周期环境管理
- **环境拓扑编排**: 支持自定义环境层级(开发、测试、预发、生产等),构建完整的配置流转管道
- **环境差异对比**: 跨环境配置的可视化对比分析,快速识别配置差异与潜在风险
- **配置推广机制**: 一键式配置推广能力,支持环境间配置同步与批量部署
- **版本回滚保障**: 完整的配置版本历史追溯,支持任意版本的快速回滚与恢复

### 🔌 多驱动通信架构
- **异构驱动支持**: 统一管理Webhook、Kafka、长轮询三种通信驱动,适配不同网络拓扑与业务场景
- **驱动健康检测**: 实时监测驱动连接状态、吞吐性能与错误率,提供智能诊断建议
- **性能监控面板**: 可视化展示驱动级别的消息延迟、成功率与资源消耗指标
- **容错降级策略**: 灵活配置驱动回退与降级规则,确保配置下发的高可用性

### ✅ 企业级审批工作流
- **多级审批流程**: 内置可配置的审批链路,支持串行、并行与条件审批模式
- **智能审查系统**: 提供配置变更的差异对比、影响范围分析与风险评估能力
- **全链路审计追踪**: 记录所有配置变更、审批决策与操作日志,满足合规审计要求
- **实时消息通知**: 集成应用内通知消息渠道,确保审批流程的及时响应

---

## 🛠️ 技术栈

- **前端框架**: React 19+ with TypeScript - 采用最新React特性与严格类型系统,确保代码质量与可维护性
- **UI组件库**: Ant Design Pro v6 - 企业级中后台设计语言与React组件库,提供开箱即用的高质量组件
- **状态管理**: React Context API + Hooks - 轻量级状态管理方案,避免过度工程化
- **构建工具链**: UmiJS v4 - 企业级前端应用框架,集成路由、构建、部署等完整工具链
- **代码质量**: BiomeJS - 高性能的代码检查与格式化工具,统一代码风格
- **测试框架**: Jest + React Testing Library - 完整的单元测试与集成测试解决方案
- **代码编辑器**: Monaco Editor + CodeMirror - 支持JSON/YAML配置的专业代码编辑体验
- **开发体验**: HMR热模块替换 + TypeScript严格模式 - 极致的开发效率与类型安全

---

## 📁 项目结构

```
switch-frontend/
├── src/                       # 源代码目录
│   ├── components/            # 可复用UI组件库
│   ├── pages/                 # 页面组件(开关、环境、驱动、审批、用户、租户等)
│   ├── services/              # API服务层,封装后端接口调用
│   ├── models/                # TypeScript类型定义与数据模型
│   ├── utils/                 # 通用工具函数(请求、认证、验证等)
│   ├── hooks/                 # 自定义React Hooks
│   ├── layouts/               # 应用布局组件
│   └── locales/               # 国际化语言包
├── config/                    # 构建与开发配置(UmiJS、代理、路由等)
├── public/                    # 静态资源文件
├── tests/                     # 单元测试与集成测试
└── package.json               # 项目依赖与脚本配置
```

---

## 🚀 快速开始

### 前置条件

- Node.js 20.0+
- npm或yarn包管理器

### 安装

```bash
# 克隆仓库
git clone https://gitee.com/fatzeng/switch-frontend.git
cd switch-frontend

# 安装依赖
npm install
# 或
yarn install
```

### 运行

```bash
# 启动开发服务器
npm run dev
# 或
yarn dev

# 应用将在 http://localhost:8000 可用
```
---

## 🤝 贡献指南

我们欢迎并感谢所有形式的贡献！无论是报告问题、提出功能建议、改进文档，还是提交代码，您的参与都将帮助 Switch 变得更好。

### 如何贡献

1. **Fork 本仓库**并创建您的特性分支
2. **编写代码**并确保遵循项目的代码规范
3. **添加测试**以覆盖您的更改
4. **提交 Pull Request**，并详细描述您的更改内容和动机

### 贡献类型

- 🐛 **Bug 修复**: 发现并修复问题
- ✨ **新功能**: 提出并实现新特性
- 📝 **文档改进**: 完善文档和示例
- 🎨 **代码优化**: 提升代码质量和性能
- 🧪 **测试增强**: 增加测试覆盖率

更多详细信息，请参阅我们的贡献指南文档。

## 📄 许可证

本项目采用 [MIT 许可证](LICENSE)。