实战AI快速开发微信智能客服系统（五）- 系统架构细化-优快云博客

本文链接：https://blog.youkuaiyun.com/icestone2000/article/details/149101892

我们现在大的架构有了，但是还需要细化一下。

首先，我要考虑的是我们的客户群。大的企业肯定不会购买我们这个产品。我把这个智能客服系统定位在服务中小用户，我们的目标：

用户自己直接能上手安装在自己的台式机或者笔记本上，它就可以直接接管用户的微信客户端，实现微信的自动智能回复。

从这点出发，我又重新考虑了一下我们的MVP。我们需要实现的知识库可能并不需要很复杂，像一般的网店，产品就几个或者几十个，每一个产品的说明也并不多。在大多数情况下，我们只要清楚客户咨询哪个产品，就可以把整个产品的说明发给大模型来进行回答，这样可以极大的简化我们的系统。这样就意味着我们不需要一整套的RAG的服务器来实现相关功能。虽然实现一个RAG的服务很酷，但是我们的用户可能并不需要。根据我对其他一些类似产品的研究，这种简单的实现已经可以满足大部分需求了。

所以，我大致确定方案如下：

1. 微信的信息收发，使用开源的Python库，可以直接操控微信桌面客户端，封号风险小；

2. 知识库的搭建，直接用简单的数据库存储产品信息和历史聊天记录。需要回答问题时，可以直接把单个产品的信息，或者关键聊天记录，发送给大模型，让大模型直接从中获取信息，进行回答

3. 提供一个简单的配置界面，可以让用户做一些基本的配置

4. 发布的时候用Python Install打包成一个Windows上的可执行程序

对于界面配置的实现方式，我问了一下Claude：

我现在希望做一个能在桌面上运行的微信自动客服软件，我找到一个python的开源项目，可以操控微信客户端，实现微信消息的收发，监听等操作，我想基于它来做。我现在需要做一个配置界面，实现对软件的配置管理，比如配置要监听哪些群，对于每个群，配置一些回答问题的知识等。然后我在接收到别人从微信里发过来的消息后，我需要连接一个大模型用于回答问题。我希望最终做成一个windows上的可执行程序，用户直接运行就可以。像这个配置界面通过什么来实现比较好？

Claude给出的建议：

推荐方案

1. Tkinter (最推荐)

优势：Python内置，无需额外依赖，打包后体积小
适合场景：配置界面相对简单，主要是表单、列表、按钮等基础组件
打包：用PyInstaller打包成exe非常方便

2. PyQt5/PyQt6 或 PySide6

优势：界面美观，功能强大，控件丰富
适合场景：需要复杂界面，如表格编辑、树形结构等
注意：会增加打包后的体积

3. Web界面 + 本地服务

技术栈：Flask/FastAPI + HTML/CSS/JS
优势：界面现代化，易于美化，跨平台
实现：软件启动时开启本地Web服务，自动打开浏览器

考虑到我对Tkinter不熟，又考虑到以后的可扩展性，我决定采用Web界面+本地服务的方式。

我又问了一下Flash/FastAPI的情况：

Flask和FastAPI介绍

这两个都是Python的Web框架，可以用来创建Web应用和API服务。

Flask

Flask是一个轻量级的Web框架，简单易学：

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/api/config', methods=['GET', 'POST'])
def handle_config():
    if request.method == 'GET':
        # 返回配置数据
        return jsonify({"groups": [], "settings": {}})
    else:
        # 保存配置
        config = request.json
        return jsonify({"status": "success"})

if __name__ == '__main__':
    app.run(host='127.0.0.1', port=5000)

FastAPI

FastAPI是更现代的框架，有自动API文档生成等特性：

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from fastapi.responses import FileResponse

app = FastAPI()

# 静态文件服务（CSS、JS等）
app.mount("/static", StaticFiles(directory="static"), name="static")

@app.get("/")
async def read_root():
    return FileResponse('templates/index.html')

@app.get("/api/config")
async def get_config():
    return {"groups": [], "settings": {}}

@app.post("/api/config")
async def save_config(config: dict):
    # 保存配置逻辑
    return {"status": "success"}

在你的项目中的应用

整体架构

你的微信客服软件
├── main.py              # 主程序入口
├── wechat_handler.py    # 微信消息处理
├── ai_client.py         # AI模型接口
├── config_manager.py    # 配置管理
├── web_ui.py           # Web界面服务
├── templates/          # HTML模板
│   └── index.html
├── static/             # CSS、JS文件
└── config.json         # 配置文件

对于前端代码的实现方式也可以有很多种，我继续问了一下Claude：

Flask/FastAPI都是可以用来实现一些后台的api，对吗？前台界面的编写呢？我们是可以使用React/Vue来写吗？还是有其他更合适的方案？

Claude给出的建议：

前台界面方案

1. 原生HTML + CSS + JavaScript（推荐）

对于配置界面这种相对简单的场景，原生开发最直接：

<!DOCTYPE html>
<html>
<head>
    <title>微信客服配置</title>
    <style>
        /* 可以使用Bootstrap或Tailwind CSS美化 */
        .container { max-width: 800px; margin: 0 auto; padding: 20px; }
        .form-group { margin-bottom: 15px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>微信客服配置</h1>
        <form id="configForm">
            <div class="form-group">
                <label>群组名称：</label>
                <input type="text" id="groupName" />
                <button type="button" onclick="addGroup()">添加群组</button>
            </div>
        </form>
    </div>
    
    <script>
        // 调用后台API
        async function loadConfig() {
            const response = await fetch('/api/config');
            const config = await response.json();
            // 渲染配置到界面
        }
        
        async function saveConfig() {
            const config = gatherFormData();
            await fetch('/api/config', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(config)
            });
        }
    </script>
</body>
</html>

2. React/Vue（如果需要复杂交互）

如果配置界面比较复杂，可以用现代框架：

React示例：

import React, { useState, useEffect } from 'react';

function ConfigPanel() {
    const [groups, setGroups] = useState([]);
    
    useEffect(() => {
        // 加载配置
        fetch('/api/config')
            .then(res => res.json())
            .then(data => setGroups(data.groups));
    }, []);
    
    const addGroup = (groupName) => {
        setGroups([...groups, { name: groupName, enabled: true }]);
    };
    
    return (
        <div>
            <h1>微信客服配置</h1>
            <GroupList groups={groups} onAdd={addGroup} />
        </div>
    );
}

3. 现成的Admin界面库

AdminLTE：基于Bootstrap的后台模板
Ant Design：如果用React
Element Plus：如果用Vue

适合你项目的方案选择

推荐方案：原生HTML + CSS框架

理由：
✓ 学习成本低，开发快速
✓ 打包后体积小
✓ 不需要Node.js环境
✓ 配置界面功能相对简单

项目结构建议：

your_project/
├── backend/
│   ├── main.py          # 主程序
│   ├── web_server.py    # Flask/FastAPI服务
│   └── config_manager.py
├── frontend/
│   ├── templates/
│   │   └── index.html
│   ├── static/
│   │   ├── css/
│   │   │   └── style.css
│   │   └── js/
│   │       └── app.js
└── config.json