Well2333 / nonebot-plugin-bilichat

一个通过 OpenAI 来对b站视频进行总结的多功能 B站解析插件
GNU Affero General Public License v3.0
207 stars 8 forks source link

Feature: WebUI 开发与完善 #150

Closed Well2333 closed 7 months ago

Well2333 commented 7 months ago

希望能解决的问题

在 bilichat 的 v5 版本中计划添加 WebUI 以实现更加直观、便捷、简易的使用体验。

但由于个人技术不足,很难独自完成WebUI的前端部分开发。因此,我在此恳请社区的开发者们加入这一努力,帮助我们完成这个重要的里程碑。

如果你对前端开发有经验,或者对该项目感兴趣并愿意贡献一己之力,请不要犹豫,你的帮助将对项目产生深远的影响。

描述所需要的功能

页面设计

目前,WebUI需要包含三个主要页面:

主页:

主页应当对插件的各个子功能进行有效的引导,提供直观的用户界面。

如果设计允许,也可将其他子功能直接整合到主页中。

Bilibili Cookies 更新:

此部分已有通过 ChatGPT4 编写的初步实现,已经可以投入使用,可以进一步的优化。

此页面提供了直接将 bilibili 的 Cookies 直接上传至服务器的功能,也可以生成一个油猴脚本,在用户访问 bilibili 时自动将 cookies 上传至服务器

订阅配置项更新:

这个页面的目的是为了让用户能够直观地管理每个用户(包括群组和频道)的订阅信息,以及订阅部分的整体配置信息。

  1. 配置更新应通过GET方法从API获取当前配置项(JSON格式),然后显示在代码块中,或允许用户手动粘贴配置至代码块。
  2. 需要基于配置项内容渲染可视化的配置项解释和修改功能。
  3. 配置保存后,应使用PUT方法上传至相同的API。如果上传成功,服务器将返回修改后的配置文件;如果失败,状态值可能为400或422,并附带失败原因。
  4. 代码块和可视化部分应保持双向同步,任何一方的改动都应反映在另一方。
  5. 配置文件中 uploader 在前端中无需展示,但前端在展示订阅时可以从中获取对应UP主的信息(如昵称)。

其他信息

  1. API 的文件位于 nonebot_plugin_bilichat/api/,挂载在 /{path}/api/ 下,在 WebUI 启动时会在日志中输出在本机中的访问地址 http://{ip}:{port}/{path}/api/,例如 http://127.0.0.1:8080/bilichat/api/
  2. WebUI 不挂载在 nonebot app 下,可采用 nginx 或其他静态托管服务进行单独部署,类似 Clash 管理面板 的方式工作,即在用户使用前询问用户的后端地址。
  3. 订阅配置项由于可能会在之后的更新中进行修改,请务必在前端页面中保留一定的拓展性。
Well2333 commented 7 months ago

配置文件格式说明

根对象

此配置文件包含三个主要部分:configuploaders,和 users

config -> object

这部分包含了应用的基本配置项。字段如下:

uploaders -> array

这部分定义了上传者的列表。每个上传者对象包含以下字段:

users -> array

这部分定义了用户的列表。每个用户对象包含以下字段:

{
  "config": {
    "dynamic_grpc": false,
    "dynamic_interval": 90,
    "live_interval": 30,
    "push_delay": 3,
    "subs_limit": 5
  },
  "uploaders": [
    {
      "dyn_offset": 0,
      "living": -1,
      "nickname": "Well404",
      "uid": 33138220
    }
  ],
  "users": [
    {
      "at_all": false,
      "platform": "QQ Group",
      "subscriptions": [
        {
          "dynamic": true,
          "dynamic_at_all": true,
          "live": true,
          "live_at_all": false,
          "uid": 33138220
        }
      ],
      "user_id": "123456"
    }
  ]
}
wosiwq commented 7 months ago

配置保存后,应使用PUT方法上传至相同的API。如果上传成功,服务器将返回修改后的配置文件;如果失败,状态值可能为400或422,并附带失败原因。 建议更改为固定状态200 然后在model内附带code和msg进行判断

{
    "code":200,
    "msg":"请求成功"
    "data":{}
}
{
    "code":400,
    "msg":"请求参数缺失"
    "data":{}
}
wosiwq commented 7 months ago

此页面提供了直接将 bilibili 的 Cookies 直接上传至服务器的功能,也可以生成一个油猴脚本,在用户访问 bilibili 时自动将 cookies 上传至服务器 此部分无法实现,bilibili 的 Cookie 有部分设置为httponly 例如SESSDATA,设置为httponly的cookie无法通过js访问,测试版的油猴有一个GM_cookie功能可以读取,但此功能从未上过油猴正式版,我们无法要求用户使用测试版的油猴

Well2333 commented 7 months ago

配置保存后,应使用PUT方法上传至相同的API。如果上传成功,服务器将返回修改后的配置文件;如果失败,状态值可能为400或422,并附带失败原因。 建议更改为固定状态200 然后在model内附带code和msg进行判断

{
  "code":200,
  "msg":"请求成功"
  "data":{}
}
{
  "code":400,
  "msg":"请求参数缺失"
  "data":{}
}

真并不符合 restful 的设计规范,如果前端实在无法解决我可以考虑在header中添加一个参数来控制使用那种方式进行通信

Well2333 commented 7 months ago

此页面提供了直接将 bilibili 的 Cookies 直接上传至服务器的功能,也可以生成一个油猴脚本,在用户访问 bilibili 时自动将 cookies 上传至服务器 此部分无法实现,bilibili 的 Cookie 有部分设置为httponly 例如SESSDATA,设置为httponly的cookie无法通过js访问,测试版的油猴有一个GM_cookie功能可以读取,但此功能从未上过油猴正式版,我们无法要求用户使用测试版的油猴

可以参考现有的脚本,其可以正常工作,不需要测试版 tampermonkey

wosiwq commented 7 months ago

此页面提供了直接将 bilibili 的 Cookies 直接上传至服务器的功能,也可以生成一个油猴脚本,在用户访问 bilibili 时自动将 cookies 上传至服务器 此部分无法实现,bilibili 的 Cookie 有部分设置为httponly 例如SESSDATA,设置为httponly的cookie无法通过js访问,测试版的油猴有一个GM_cookie功能可以读取,但此功能从未上过油猴正式版,我们无法要求用户使用测试版的油猴

可以参考现有的脚本,其可以正常工作,不需要测试版 tampermonkey

经过测试 现有脚本无法正常工作

Well2333 commented 7 months ago

此页面提供了直接将 bilibili 的 Cookies 直接上传至服务器的功能,也可以生成一个油猴脚本,在用户访问 bilibili 时自动将 cookies 上传至服务器 此部分无法实现,bilibili 的 Cookie 有部分设置为httponly 例如SESSDATA,设置为httponly的cookie无法通过js访问,测试版的油猴有一个GM_cookie功能可以读取,但此功能从未上过油猴正式版,我们无法要求用户使用测试版的油猴

可以参考现有的脚本,其可以正常工作,不需要测试版 tampermonkey

经过测试 现有脚本无法正常工作

可以将此部分移除,仅保留上传接口

Well2333 commented 7 months ago

感谢 wosiwq 大佬的项目 https://github.com/wosiwq/nonebot-plugin-bilichat-webui 目前WebUI的预览已部署在 https://unrivaled-sprite-65b8cc.netlify.app/