docs: Updated README with new features's explanation

Author: ffy6511

README.md

@@ -1,4 +1,8 @@
-# 𝐜𝐡𝐚𝐭𝐒𝐐𝐋
+<h1 align="center">
+  <a href="https://chat-sql-hazel.vercel.app/" target="_blank">
+    <img src="./chat-sql/public/assets/navLogo.png" width="300" alt="ChatSQL">
+  </a>
+</h1>
 
 [English](./README_EN.md) | 简体中文
 
@@ -12,53 +16,77 @@
 <p align="center" style="font-size: 1.2em; margin: 20px 0;">
   <a href="https://chat-sql-hazel.vercel.app/" target="_blank" style="font-size: 1.2em; font-weight: bold;">Website</a>
 </p>
+<img src="./chat-sql/public/assets/demo.png">
 
+C𝐡𝐚𝐭𝐒𝐐𝐋 是一个交互式的数据库系统学习平台，通过智能体设计与工作流编排，协同前端xyflow等组件库的二次开发与深度适配，帮助用户从入门到精通 SQL 查询、ER图结构设计与B+树操作理解.
 
-ChatSQL 是一个交互式 SQL 学习平台，通过人工智能技术生成个性化的 SQL 练习题，帮助用户从入门到精通 SQL 查询语言。平台结合了直观的数据库可视化工具、智能代码编辑器和即时反馈系统，为用户提供沉浸式学习体验。无论您是 SQL 初学者还是希望提升查询技能的开发者，ChatSQL 都能根据您的水平定制适合的学习内容，让 SQL 学习变得更加高效和有趣。
+## 项目核心模块介绍
 
-## ✨ 特性
+C𝐡𝐚𝐭𝐒𝐐𝐋 由以下核心模块组成：
 
-- 🤖 AI 生成练习：提供两种方式的习题来源
-  - 通过预设的教程, 循序渐进地练习`select`, `join`, 聚合操作与嵌套子查询等知识点.
+- **SQL编程实践模块**：供用户练习SQL查询，提供dify生成与预制课程两方面来源的练习
+- **ER图设计模块**：提供ER图建模工具、ER图建模问题生成与智能体测评反馈
+- **B+树操作模块**：实现B+树操作可视化
+- **ChatBot模块**：基于专业知识库的通用问答，辅助数据库系统课程的学习
+
+### SQL编程实践模块
+
+#### 功能设计
+
+<img src="./chat-sql/public/assets/design-SQL.png">
+
+- 🤖 **智能体生成练习**：提供两种方式的习题来源
+
+  - 通过预设的教程, 循序渐进地练习 `select`, `join`, 聚合操作与嵌套子查询等知识点.
   - 与dify工作流交互, 输入难度,标签与描述自动生成 SQL 练习题.
+- 📊 **数据库结构可视化**：直观展示表关系和字段信息, 外检约束等信息一目了然;
+- ⌨️ **Monaco编辑器与schema的补全整合**：
 
-- 📊 数据库结构可视化：直观展示表关系和字段信息, 外检约束等信息一目了然;
-- ⌨️ Monaco编辑器与schema的补全整合：
   - 支持sql语法高亮和悬浮的语法提示
-  - 针对当前schema信息提供`tab`的自动补全
+  - 针对当前schema信息提供 `tab`的自动补全
+- 📝 **即时结果验证**：实时验证查询结果
 
-- 📝 即时结果验证：实时验证查询结果
-  - 由构建于前端的sql引擎0延迟地处理sql查询结果.
   - 支持将查询结果与期望结果进行比较, 评价查询结果是否正确.
 
+#### 运行效果
+
+<img src="./chat-sql/public/assets/ret-SQL.png">
 
+### ER图设计模块
 
+#### 功能设计
 
-## 🖥 界面预览
+<img src="./chat-sql/public/assets/design-ER.png">
 
-### 初始化界面
+#### 运行效果
 
-![](https://my-blog-img-1358266118.cos.ap-guangzhou.myqcloud.com/undefined20250508164908220.png?imageSlim)
+<img src="./chat-sql/public/assets/ret-ER.png">
 
-- 点击侧边栏中的“初始化教程”, 可以同预设的数据库表结构进行交互;
-- 点击侧边栏中的“帮助”, 可以查看基本的操作演示.
+### B+树操作模块
 
-### 数据库结构可视化
+#### 功能设计
 
-![](https://my-blog-img-1358266118.cos.ap-guangzhou.myqcloud.com/undefined20250508165221364.png?imageSlim)
+<img src="./chat-sql/public/assets/design-B+.png">
 
-- 默认显示数据库结构的可视化视图;
-- 可在左下角切换元组视图.
+#### 运行效果
 
-### SQL 编辑器演示
+<img src="./chat-sql/public/assets/ret-B+.png">
 
-<img src="./chat-sql/public/assets/edit.gif" alt="编辑器演示" width="80%" />
+### ChatBot模块
 
-对应快捷键:
+#### 功能设计
 
-- `command+enter` : 执行查询
-- `command+j`: 检测查询结果是否匹配;
-- `command+k`: 搜索历史记录.
+<img src="./chat-sql/public/assets/design-chat.png">
+
+#### 运行效果
+
+<img src="./chat-sql/public/assets/ret-chat.png">
+
+## 未来计划
+
+### 苏格拉底式对话智能体
+
+<img src="./chat-sql/public/assets/future-chat.png">
 
 ## 🛠 技术栈
 
@@ -71,23 +99,22 @@ ChatSQL 是一个交互式 SQL 学习平台，通过人工智能技术生成个
   <img src="https://img.shields.io/badge/Monaco%20Editor-DD1100?style=for-the-badge&logo=visualstudiocode&logoColor=white" alt="Monaco Editor" />
   <img src="https://img.shields.io/badge/XY%20Flow-22C55E?style=for-the-badge&logo=diagram&logoColor=white" alt="XY Flow" />
 </p>
+<img src="./chat-sql/public/assets/framework.png">
 
-- **框架**: [Next.js](https://nextjs.org/) 15.3.0
+- **框架**: [Next.js](https://nextjs.org/)
 - **UI 组件**:
-  - [Ant Design](https://ant.design/) 5.24.6
-  - [Material-UI](https://mui.com/) 7.0.2
+  - [Ant Design](https://ant.design/)
+  - [Material-UI](https://mui.com/)
 - **编辑器**: [Monaco Editor](https://microsoft.github.io/monaco-editor/)
 - **流程图**:
   - [XY Flow](https://reactflow.dev/) (@xyflow/react)
-  - 用于数据库表关系可视化
-  - 支持自定义节点和边的样式
-  - 提供图表交互操作
-  - 基于 D3.js 的缩放和拖拽功能
-- **AI 集成**: [Dify.ai](https://dify.ai/)
+- **AI 集成**: [Dify.ai](https://dify.ai/) && [阿里云百炼](https://bailian.console.aliyun.com/?utm_content=se_1021228063&gclid=CjwKCAjw49vEBhAVEiwADnMbbN8YRdE4pNrz9txN0_KcUqiOuUc9aPSgyMDqlti1KVOPf5-o-yL1jBoC3usQAvD_BwE#/home)
 - **类型检查**: [TypeScript](https://www.typescriptlang.org/)
 
 ## 🚀 快速开始
 
+> **TODO**：提供百炼平台端的智能体/工作流设计文件 or 迁移到dify
+
 ### 前置要求
 
 - Node.js 18.0 或更高版本

README_EN.md

@@ -1,4 +1,12 @@
-# 𝐜𝐡𝐚𝐭𝐒𝐐𝐋
+
+
+<h1 align="center">
+  <a href="https://chat-sql-hazel.vercel.app/" target="_blank">
+    <img src="./chat-sql/public/assets/navLogo.png" width="300" alt="ChatSQL">
+  </a>
+</h1>
+
+
 
 English | [简体中文](./README.md)
 
@@ -12,42 +20,77 @@ English | [简体中文](./README.md)
 <p align="center" style="font-size: 1.2em; margin: 20px 0;">
   <a href="https://chat-sql-hazel.vercel.app/" target="_blank" style="font-size: 1.2em; font-weight: bold;">Website</a>
 </p>
-ChatSQL is an interactive SQL learning platform that leverages artificial intelligence to generate personalized SQL exercises, helping users master SQL query language from beginner to advanced levels. The platform combines intuitive database visualization tools, a smart code editor, and real-time feedback system to provide an immersive learning experience. Whether you're a SQL beginner or a developer looking to enhance your query skills, ChatSQL tailors learning content to your proficiency level, making SQL learning more efficient and engaging.
+<img src="./chat-sql/public/assets/demo.png">
+
+C𝐡𝐚𝐭𝐒𝐐𝐋 is an interactive database system learning platform that helps users master SQL queries, ER diagram design, and B+ tree operations from beginner to advanced levels through intelligent agent design and workflow orchestration, combined with secondary development and deep adaptation of frontend components like xyflow.
+
+## Core Module Introduction
+
+C𝐡𝐚𝐭𝐒𝐐𝐋 consists of the following core modules:
 
-## ✨ Features
+- **SQL Programming Practice Module**: Provides users with SQL query practice, offering exercises from both Dify-generated and preset course sources
+- **ER Diagram Design Module**: Provides ER diagram modeling tools, ER diagram modeling problem generation, and intelligent agent evaluation feedback
+- **B+ Tree Operation Module**: Implements B+ tree operation visualization
+- **ChatBot Module**: General Q&A based on professional knowledge base, assisting in database system course learning
+
+### SQL Programming Practice Module
+
+#### Feature Design
+
+<img src="./chat-sql/public/assets/design-SQL.png">
+
+- 🤖 **AI-Generated Exercises**: Provides two sources of practice problems
 
-- 🤖 AI-Generated Exercises: Two sources of practice problems
   - Through preset tutorials, progressively practice `select`, `join`, aggregation operations, and nested subqueries.
   - Interact with Dify workflow to automatically generate SQL exercises by inputting difficulty, tags, and descriptions.
+- 📊 **Database Structure Visualization**: Intuitively displays table relationships and field information, with foreign key constraints clearly visible
+- ⌨️ **Monaco Editor with Schema Integration**:
 
-- 📊 Database Structure Visualization: Intuitively displays table relationships and field information, with foreign key constraints clearly visible.
-- ⌨️ Monaco Editor with Schema Completion Integration:
   - Supports SQL syntax highlighting and hover syntax tips
   - Provides `tab` auto-completion based on current schema information
+- 📝 **Instant Result Validation**: Real-time verification of query results
+
+  - Supports comparing query results with expected results to evaluate query correctness
+
+#### Runtime Results
+
+<img src="./chat-sql/public/assets/ret-SQL.png">
 
-- 📝 Instant Result Validation: Real-time verification of query results
-  - SQL engine built into the frontend processes query results with zero delay
-  - Supports comparing query results with expected results to evaluate correctness
+### ER Diagram Design Module
 
-## 🖥 Interface Preview
+#### Feature Design
 
-### Initialization Interface
-![](https://my-blog-img-1358266118.cos.ap-guangzhou.myqcloud.com/undefined20250508164908220.png?imageSlim)
-- Click "Initialization Tutorial" in the sidebar to interact with the preset database structure
-- Click "Help" in the sidebar to view basic operation demonstrations
+<img src="./chat-sql/public/assets/design-ER.png">
 
-### Database Structure Visualization
-![](https://my-blog-img-1358266118.cos.ap-guangzhou.myqcloud.com/undefined20250508165221364.png?imageSlim)
-- Database structure visualization view is displayed by default
-- You can switch to tuple view in the bottom left corner
+#### Runtime Results
 
-### SQL Editor Demo
-<img src="./chat-sql/public/assets/edit.gif" alt="Editor Demo" width="80%" />
+<img src="./chat-sql/public/assets/ret-ER.png">
 
-Corresponding shortcuts:
-- `command+enter` : Execute query
-- `command+j`: Check if query results match
-- `command+k`: Search history records
+### B+ Tree Operation Module
+
+#### Feature Design
+
+<img src="./chat-sql/public/assets/design-B+.png">
+
+#### Runtime Results
+
+<img src="./chat-sql/public/assets/ret-B+.png">
+
+### ChatBot Module
+
+#### Feature Design
+
+<img src="./chat-sql/public/assets/design-chat.png">
+
+#### Runtime Results
+
+<img src="./chat-sql/public/assets/ret-chat.png">
+
+## Future Plans
+
+### Socratic Dialogue Agent
+
+<img src="./chat-sql/public/assets/future-chat.png">
 
 ## 🛠 Tech Stack
 
@@ -60,23 +103,22 @@ Corresponding shortcuts:
   <img src="https://img.shields.io/badge/Monaco%20Editor-DD1100?style=for-the-badge&logo=visualstudiocode&logoColor=white" alt="Monaco Editor" />
   <img src="https://img.shields.io/badge/XY%20Flow-22C55E?style=for-the-badge&logo=diagram&logoColor=white" alt="XY Flow" />
 </p>
+<img src="./chat-sql/public/assets/framework.png">
 
-- **Framework**: [Next.js](https://nextjs.org/) 15.3.0
+- **Framework**: [Next.js](https://nextjs.org/)
 - **UI Components**:
-  - [Ant Design](https://ant.design/) 5.24.6
-  - [Material-UI](https://mui.com/) 7.0.2
+  - [Ant Design](https://ant.design/)
+  - [Material-UI](https://mui.com/)
 - **Editor**: [Monaco Editor](https://microsoft.github.io/monaco-editor/)
 - **Flow Diagram**:
   - [XY Flow](https://reactflow.dev/) (@xyflow/react)
-  - For database table relationship visualization
-  - Supports custom node and edge styles
-  - Provides interactive chart operations
-  - D3.js-based zooming and dragging functionality
-- **AI Integration**: [Dify.ai](https://dify.ai/)
+- **AI Integration**: [Dify.ai](https://dify.ai/) && [Alibaba Cloud Bailian](https://bailian.console.aliyun.com/?utm_content=se_1021228063&gclid=CjwKCAjw49vEBhAVEiwADnMbbN8YRdE4pNrz9txN0_KcUqiOuUc9aPSgyMDqlti1KVOPf5-o-yL1jBoC3usQAvD_BwE#/home)
 - **Type Checking**: [TypeScript](https://www.typescriptlang.org/)
 
 ## 🚀 Quick Start
 
+> **TODO**: Provide intelligent agent/workflow design files for Bailian platform or migrate to Dify
+
 ### Prerequisites
 
 - Node.js 18.0 or higher