# VizForge-UI

**Repository Path**: rorop/vizforge-ui

## Basic Information

- **Project Name**: VizForge-UI
- **Description**: 基于 Next.js 15 + Spring Boot 3 的现代化数据可视化与分析平台
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-12
- **Last Updated**: 2026-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VizForge - 企业级数据可视化平台

> 基于 Next.js 15 + Spring Boot 3 的现代化数据可视化与分析平台

[![Next.js](https://img.shields.io/badge/Next.js-15-black)](https://nextjs.org/)
[![React](https://img.shields.io/badge/React-19-blue)](https://react.dev/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5-blue)](https://www.typescriptlang.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind-v4-38bdf8)](https://tailwindcss.com/)
[![Spring Boot](https://img.shields.io/badge/Spring_Boot-3-6DB33F)](https://spring.io/projects/spring-boot)

---

## ✨ 核心特性

- 🎯 **可视化查询构建器** - 拖拽表建立关联，自动生成 SQL
- 📊 **多数据源支持** - MySQL/PostgreSQL/Oracle/ClickHouse
- 🔐 **企业级安全** - RSA+AES 加密、RBAC 权限控制
- 🎨 **现代化 UI** - shadcn/ui + Tailwind CSS v4
- ⚡ **高性能** - Next.js 15 SSR + Turbopack
- 📱 **响应式设计** - 完美适配桌面和移动端

---

## 🚀 快速开始

### 环境要求

- Node.js 18+
- Java 17+
- MySQL 8.0+ / PostgreSQL 12+

### 安装运行

```bash
# 1. 克隆项目
git clone <repository>
cd vizforge

# 2. 安装依赖
npm install

# 3. 配置环境变量
cp .env.example .env.local
# 编辑 .env.local 设置后端 API 地址

# 4. 启动开发服务器
npm run dev

# 5. 访问
http://localhost:3000
```

### 后端启动

```bash
cd ../dataloom/application
mvn spring-boot:run
```

---

## 📁 项目结构

```
vizforge/
├── src/
│   ├── app/(main)/dashboard/
│   │   ├── sources/              # 数据源管理
│   │   ├── views/                # 视图管理
│   │   │   └── _components/
│   │   │       └── visual-query-builder/  # ✅ 可视化查询构建器
│   │   ├── charts/               # 图表管理
│   │   ├── boards/               # 仪表板
│   │   ├── schedules/            # 定时任务
│   │   ├── members/              # 成员管理
│   │   ├── permissions/          # 权限管理
│   │   └── variables/            # 变量管理
│   ├── components/
│   │   ├── ui/                   # shadcn/ui 组件
│   │   └── brand/                # 品牌资源（Logo 组件）
│   ├── hooks/                    # React Hooks
│   ├── lib/                      # 工具函数
│   ├── stores/                   # Zustand 状态
│   └── types/                    # TypeScript 类型
├── public/
│   ├── logo.svg                  # VizForge Logo (Light)
│   ├── logo-dark.svg             # VizForge Logo (Dark)
│   └── favicon.ico               # 网站图标
└── docs/                         # 📚 文档
```

---

## 🎯 核心功能

### 1. 可视化查询构建器 (Visual Query Builder)

**业界标准的图形化 SQL 构建工具**

- ✅ 拖拽表到画布
- ✅ 可视化建立表关联
- ✅ 智能推荐 JOIN 条件
- ✅ 自动生成标准 SQL
- ✅ 支持自定义 SQL 子查询
- ✅ 实时预览查询结果

**快速开始**: 访问 `/dashboard/views/new`

详细文档: [Visual Query Builder 文档](./src/app/(main)/dashboard/views/_components/visual-query-builder/README.md)

### 2. 数据源管理

- 多种数据库支持
- 连接测试
- Schema 浏览
- 安全加密存储

### 3. 认证与权限

- Zustand 统一状态管理
- RSA+AES 混合加密
- 自动持久化
- 跨标签页同步

---

## 📚 文档

### 核心文档

- [文档索引](./docs/00-文档索引.md) - 📚 文档导航（推荐起点）
- [架构设计](./docs/01-架构设计.md) - 技术栈和架构设计
- [功能说明](./docs/02-功能说明.md) - 功能模块详解
- [实施指南](./docs/03-实施指南.md) - 开发指南和快速命令

### 技术文档

- [认证系统](./docs/04-认证系统.md) - Zustand 认证设计
- [API加密](./docs/05-API加密.md) - RSA+AES 加密实现
- [开发规范](./docs/06-开发规范.md) - 代码质量自动化

---

## 🛠️ 开发命令

```bash
# 开发
npm run dev              # 启动开发服务器
npm run build            # 构建生产版本
npm start                # 运行生产服务器

# 代码质量
npm run lint             # 检查代码
npm run lint:fix         # 自动修复
npm run format           # 格式化代码
npm run fix:all          # 一键修复所有问题

# 类型检查
npm run type-check       # TypeScript 类型检查
```

---

## 🎨 技术栈

### 前端

| 技术 | 版本 | 用途 |
|------|------|------|
| Next.js | 15 | 前端框架 |
| React | 19 | UI 库 |
| TypeScript | 5 | 类型安全 |
| Tailwind CSS | v4 | 样式方案 |
| shadcn/ui | latest | 组件库 |
| Zustand | 5 | 状态管理 |
| TanStack Query | 5 | 服务端状态 |
| React Flow | 12 | 图形编辑器 |
| ECharts | 5 | 图表引擎 |
| Monaco Editor | latest | 代码编辑器 |

### 后端

| 技术 | 版本 | 用途 |
|------|------|------|
| Spring Boot | 3 | 后端框架 |
| MyBatis Plus | 3.5 | ORM |
| MySQL | 8.0+ | 数据库 |
| Redis | 6.0+ | 缓存 |
| Sa-Token | 1.37 | 认证鉴权 |

---

## 📈 项目进度

### ✅ 已完成

- ✅ 基础架构搭建
- ✅ 认证系统 (Zustand + API 加密)
- ✅ 数据源管理
- ✅ 视图管理 (含可视化查询构建器)
- ✅ 文件夹管理
- ✅ Lint 自动化

### ⏳ 进行中

- ⏳ 图表编辑器
- ⏳ 仪表板编辑器
- ⏳ 权限系统

### 📅 计划中

- 📅 定时任务
- 📅 数据故事板
- 📅 多租户支持

---

## 🤝 贡献指南

### 代码规范

项目使用自动化 Lint 工具，保存时自动修复：

1. **VSCode 自动保存修复** - 安装推荐扩展
2. **Git 提交前自动检查** - Husky + lint-staged
3. **一键修复**: `npm run fix:all`

详见: [Lint 自动化文档](./LINT_AUTOMATION.md)

### 命名规范

- 文件名: `kebab-case`
- 组件名: `PascalCase`
- 函数名: `camelCase`
- 使用业界标准术语 (如 Query Builder，不是自创词汇)

---

## 📄 License

[MIT License](./LICENSE)

---

## 🙏 致谢

- [Next.js](https://nextjs.org/)
- [shadcn/ui](https://ui.shadcn.com/)
- [React Flow](https://reactflow.dev/)
- [ECharts](https://echarts.apache.org/)
- [Spring Boot](https://spring.io/projects/spring-boot)

---

**项目**: VizForge  
**版本**: 2.0.0  
**状态**: 🟢 开发中  
**最后更新**: 2025-10-20