皮丘Bot - 基于 Pichubot 开发的定制化QQ机器人

前言

这是基于 Pichubot 开发的QQ机器人，名为皮丘Bot。

写它是为了青年大学习。团组织每周有一次线上学习，成员学完要把完成截图发到 QQ 群，团支书要数谁交了谁没交。皮丘Bot 做的就是把这件事自动化：群里发截图就算完成，管理员在群里用指令或者在网页面板上查完成情况、改成员状态、看提交的截图。

功能：青年大学习管理系统

这个功能共有三个模块，分别为：

• 网页面板

• QQ群管理

• 网络API

网页面板

在这个模块中，皮丘Bot会提供一个简单的网页面板，用于管理青年大学习系统。管理员登录后看到的是自己所在群的数据，面板顶部会提示「群 xxx 的管理员」。

面板有三个页面：

• 完成情况：一条进度条和完成人数，下面是未完成人员名单，表格列出名称和 QQ，带分页
• 成员编辑：维护本群参与大学习的成员列表
• 截图查看：每个成员提交的截图，带姓名和 QQ，点开可以放大

该模块有响应式布局，对手机端适配。桌面端左侧是 el-aside 侧边菜单，手机端把侧边菜单藏起来，换成顶部的 headtable 组件。

响应式布局仅需设置 el-aside 与 headtable 的 display 属性即可。

@media screen and (max-width: 768px) {
  .asidemenu {
    display: none;
  }
  .headmenu {
    display: visible;
  }
}

@media screen and (min-width: 768px) {
  .asidemenu {
    display: visible;
  }
  .headmenu {
    display: none;
  }
}

QQ群管理

在这个模块中，皮丘Bot会接收到群消息，并将消息解析处理，这个功能是皮丘Bot的核心功能。

成员在群里发一张图片，皮丘Bot 就把这个人标记为本期已完成，回复「成功完成本期青年大学习」，并把收到的图片回显一遍，方便本人确认交对了图。

管理员用 !dxx 开头的指令管理：

指令	作用
!dxx cx	查询本次完成人数，并列出未完成的人
!dxx add @某人	把某人的状态设为完成
!dxx rem @某人	把某人的状态设为未完成
!dxx reset	重置本群本期的完成情况，下一期开始时用

网络API

网页面板采用的是前后端分离的模式，这个模块是用于提供网络API的。

面板每次请求都带 Bearer Token，服务端按 QQ 号存了一份登录时发的 token，收到请求后取出 Authorization 头做比对：

func verifyToken(qq string, token string) bool {
	if strings.HasPrefix(token, "Bearer") {
		if _, ok := Cookies[qq]; ok && Cookies[qq] == token[7:] {
			return true
		}
	}
	return false
}

前端开发时面板和 API 不在一个域下，API 的响应里要加上跨域头：

writer.Header().Set("Access-Control-Allow-Origin", "*") //允许访问所有域
writer.Header().Set("Access-Control-Allow-Methods", "*")
writer.Header().Set("Access-Control-Allow-Headers", "*")

文档站是静态文件，直接用 http 包的 FileServer 挂出去：

// 将本地 "/doc" 路径下的文件绑定至 "www.xxx.com/" 下
http.Handle("/", http.FileServer(http.Dir("./doc")))

// 将本地 "/doc" 路径下的文件绑定至 "www.xxx.com/abc/" 下
http.Handle("/abc/", http.StripPrefix("/abc", http.FileServer(http.Dir("./doc"))))