# madichat

**Repository Path**: 42690727/madichat

## Basic Information

- **Project Name**: madichat
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-05-21
- **Last Updated**: 2025-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# 项目需求
MadiChat 提供与不同AI模型聊天的功能，支持网页，安卓和鸿蒙多端。

# 项目效果
。。。。

# 项目技术价值
1.完整体验使用Trae+大模型claude3.7，采用与AI的“Code Pilot 模式”开发一个半完整的应用，包含前后端。
2.复习使用springboot3+mybatisplus的后台技术栈开发后台服务，并使用spring security+jwt鉴权，提供接口返回Flux流式对象。
3.学习使用[Spring AI Alibaba](https://java2ai.com/docs/1.0.0-M6.1/get-started)，调用阿里百联服务与大模型交流，并带上prompt，历史记录等。
4.//todo 复习使用jetpackcompose开发安卓应用
5.//todo 复习使用arkts开发纯鸿蒙应用
6.//todo 学习使用fluuter/rn开发应用
7.//todo 学习开发微信小程序
8.//todo 学习微信授权登录
9.//todo ai rag/mcp

# 项目启动方式
## 后端
1.使用V1__CreateTables.sql创建和初始化mysql5.x数据库，并修改application.properties关于数据库的配置
2.到[阿里云百炼](https://help.aliyun.com/zh/model-studio/get-api-key)开通并获取API Key，并修改application.properties里spring.ai.dashscope的APIKEY和模型
3.准备jdk17+ , maven
4.编译打包：mvn clean package
5.启动命令：nohup java -jar chat-0.0.1-SNAPSHOT.jar --spring.profiles.active=test --server.port=8080> /server.log 2>&1 & 

## 网页端
1.安装node.js。当前我装的是v22.15.0
2.修改http.js里baseURL: 'http://127.0.0.1:8080/chat-api'修改为上述后端服务的地址
3.在web目录下，使用命令npx serve -p 8081启动服务


# 项目开发流程
1.使用trae+claude3.7，根据提示词生成页面，并打磨修改。  
2.根据已生成页面和之前沟通的上下文，要求AI生成接口文档，保存成markdown格式。  
3.使用现有springboot3框架，参考[文档](https://java2ai.com/docs/1.0.0-M6.1/get-started)，集成Spring AI Alibaba，并实现chat接口，流式返回大模型的输出。   
4.更新接口文档，使用trae+claude3.7进一步开发前端，使用后端接口，联调与大模型交流的接口。   
5.使用trae+claude3.7，完成集成spring security + JWT鉴权，服务端login接口，并完成前端网页的登录和登出。  
6.使用trae+claude3.7，完成后端conversation接口，根据当前登录的用户信息，实现创建会话，删除会话，获取会话列表，获取会话消息历史，导出聊天记录等接口,并完成与前端的联调：创建，显示，删除会话。  
7.使用trae+claude3.7，完成后端message会话历史记录的接口，并实现聊天时带入当前会话的历史记录。  



# web端提示词生成原型
```
你是一个网页的设计师和软件工程师，需要实现一个网站，网站名称叫“MadiChat”，提供与不同AI模型聊天的功能。

# 核心功能
- 支持选择不同的大模型，与大模型聊天
- 支持发送文本、图片
- 支持选择深度思考和选择联网搜索
- 支持显示历史对话，并支持创建和删除历史对话
- 用户登录注册与注销
- 查看用户信息

# UI界面参考
参考腾讯元宝或deepseek的聊天界面设计

现在需要你帮我输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：
1、用户体验分析：先分析这个网页的主要功能和用户需求，确定核心交互逻辑。
2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。
3、遵循现代PC端网页和H5网页设计规范，有良好的视觉体验。
4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美。拆分代码文件，保持结构清晰。
5、每个界面应作为独立的 HTML 文件存放，例如 chat.html、profile.html 等，点击按钮后可以进行各页面跳转。
6.index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。
7.真实感增强：  - 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。注意，内容不需要设计手机顶部的状态栏。
8.使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。
请按照以上要求在web目录下生成完整的 HTML 代码，尤其是图片要保障可用，并确保其可用于实际开发。

```