kb2022 页面内容参考

此文主要是介绍了 kb2022 网页前端应该包含的页面内容，这只是一个参考前端开发人员可以依据自己的情况和理解对细节进行一定的修剪以方便程序开发以及程式的健壮性，但大体上的内容应该和本文保持一致，如果对于大的方向需要进行调整应该和公司以及后端人员先进行协商。

i18n

因为系统可能会发售给不同国家的人使用，所以前端必须支持多语言即 i18n。可以是 aot 模式即提前将显示语言混入源码编译出多种语言的网页文件；也可以是 jit 即添加新语言不需要重新编译源码，增加语言包供js动态加载即可。

推荐选用 jit 的方案(你也不想后续添加了新语言，再来找你帮忙解决配置环境重新编译之类的麻烦事吧！)，但目前公司没有硬性要求，你可以依据自己情况选择使用的技术方案。但下面是本喵推荐的模式：

1. 提供语言包，比如 default.json zh.json en.json 。默认加载 default.json 显示页面最初语言
2. 向后台请求一个接口，例如 GET /api/i18n/list.json 这个接口返回支持的语言数组例如 [{id:’zh’,name:’中文’},{id:’en’,name:’English’}] 得到存在的语言包。当然这个接口和后端协商好由后端依据配置返回即可
3. 给个列表用户可以从步骤2接口返回的内容中，选择使用的语言并以此语言显示
4. 如果用户没有手动选择语言就使用浏览器默认语言或 default.json 显示，否则以用户选择的语言显示文本

用户登入以及修改信息

对系统的所有操作基本都需要鉴权，所以存在一个用户系统，同理需要做一个用户登入的界面供用户输入用户名/密码后进行登入(用户名可以输入 用户唯一的名称id 也可以输入绑定的电话号码，后台会自动识别)。

登入页面可以做成一个单独的页面，也可以做成一个登入弹出框，这个开发者可以自行确定。

这个系统不是公开的，所以它的用户通常是由管理员使用默认密码创建的，所以必须有一个页面供真实用户修改自己的密码

因为大部分使用系统的人不习惯英文的用户名，所以用户都包含一个昵称(默认为空字符串)，应该提供一个ui供用户修改自己的昵称，并且因为使用者可能更习惯昵称所以显示相关信息时最好能够把昵称显示出来，比如显示任务是谁创建的，在创建者一栏信息中同时显示 id + 昵称(如果存在昵称的化)

此外用户还包含一个可选的头像，它是一个长度不超过255的字符串，后端没有做任何处理，前端可以自行选择如何使用。但预设的用法是，前端打包很多头像图标用于表示不同类型用户，然后用户可以通过 Avatar 接口修改自己显示的头像。(但其实这是一个偏功能向的系统，前端也可以直接无视这个属性不用实现头像显示，除非领导觉得有头像比较好看)

超级管理员和meta信息

系统包含一个所谓的元信息，它包含几种数据，接口都在 meta 模块中。meta 其实就是一个记录在数据库中的配置信息，需要做一个页面来供管理员导出导入这部分配置。同时任何登入用户都可以访问这些元数据，前端一些页面显示的元素内容需要有这些元数据填充。元数据包含下列内容：

• Metadata 这个无法修改，它只是返回了后端服务器的一些平台信息和后台版本信息，供维护人员查看后台运行环境和版本
• Permission 返回了一个权限列表，显示了服务器定义了哪些权限并且每个权限的显示名称以及一个解释说明，如果为用户显示自己拥有的权限代表什么含义可以查询此接口
• Groups 返回了服务器定义的用户组，用户不会直接赋予权限，而是设置它所在的组用户会自动获得这个组下的所有权限以及派生组的权限，Groups 返回了组的定义包含权限以及文本说明等信息
• TaskPriority 返回了任务优先级，例如紧急任务，或者一个一般的宣传通知。当有多个任务时间的目标重叠时，重叠的设备会播放优先级更高的任务。
• Level 返回了任务的等级，例如是一个县级发出的任务，或者一个乡村发出的任务。当有多个任务时间的目标重叠时，重叠的设备会播放等级更高的任务。

区域和设备添加等

kb2022系统是用来管理广播设备的。设备是放到不同的地理区域的，故系统存在一个树形的区域数据需要一个页面对区域进行添加删除和編輯，相关接口都在 area 模块中

同时需要一个页面来将设备添加到系统，或者修改它在系统中的位置等信息。相关接口都在 device 接口中

创建任务，发布，审核

在有了区域和设备后，就是为设备发布任务，这个模块需要页面比较繁多，它接口都在 audio 模块中

首先需要区分直播和流程任务

对于流程任务应该包含如下页面:

1. 创建任务草稿，用户要在这个页面填写流程任务的各种参数(时间 目标 内容…)
2. 可以将未填完的草稿进行保存，以供晚点继续添加
3. 既然保存了草稿，那就需要能够列举出用户自己未完成的草稿，同时恢复草稿内容以供继续填写，或者删除不再需要的草稿
4. 当草稿填写完成后，需要提交到系统审核，等待管理员允许后进行播放，或者拒绝后重新编辑/删除后再进行提交
5. 因为可能被拒绝所以也要一个页面能够列举被拒绝的任务
6. 此外用户也应该能够分页查询到所有自己创建的任务

上面以及提到了管理员审核，所以也需要对应的管理员页面：

1. 分页显示被提交来的任务，并且显示任务详情
2. 对任务进行拒绝 通过
3. 此外对于已通过的任务还可以进行 禁用 删除，对于已禁用的任务可以进行 恢复
4. 所以还需要页面显示各种状态的任务。简单的做法是做一个页面的分页查询，提供查询条件，用户自己选择要查询什么状态的任务

直播任务不需要审核，页面相对会简单点。只需要依据不同的直播类型，提供一个直播接口调用页面以及分页查询自己创建的直播任务即可直播分类有如下类型:

• Assets 它选择已上传到服务器上的音频资产作为直播内容，可以使用 FindAssets 接口查询到分页数据
• File 上传一个音频档案到服务器作为直播内容，可以使用 FindFile 接口查询到分页数据
• BaiduFile 是 File 的一个语法糖，服务器会自动调用baidu的 tts服务将文本转为语音并调用 File 接口进行直播
• Live 进行即时直播，但浏览器通常难以捕获录音设备的音源(在 https 下 html5 后提供了相关 web api)故web端可以不用实现(此外也可以使用 file或其它来源，来模拟音源但感觉其实意义不大场景很少又编码太复杂)，但应该提供 FindLives 的分页查询页面

音频资产管理

流程任务的音频需要先上传到服务器并且通过审核后才能使用大概需要下述相关页面：

1. 用户需要在此页面调用 Create 接口创建资产草稿，并调用 Chunks 来查询已上传的分块并调用 Chunk 来上传分块，在所有分块上传完成后调用 Merge 来将分块合并为完成档案并提交给系统审核
2. 之所以选择分块上传是为了能在上传失败后恢复(此外直接 post 太大的檔案可能會被中間的路由設備阻斷，例如 nginx 默認 body 不能超過 1m)，所以还需要页面能够列举出未上传完成的分块，以供恢复上传或者删除
3. 因为审核可能被拒绝，所以还需要页面列举出被拒绝的音频，以供重新提交审核或删除
4. 用户也需要可以分页查询自己所有上传的各种状态(审核通过 被拒绝 正在等待审核…)的音频

与任务类似，管理员也需要几个页面对音频进行审核相关操作

1. 分页显示被提交来的音频，并且进行试听(download 接口即可以下载也可以放到 audio 标签中供浏览器播放)
2. 对音频进行拒绝 通过
3. 此外对于已通过的音频还可以进行 禁用 删除，对于已禁用的音频可以进行 恢复
4. 所以还需要页面显示各种状态的音频。简单的做法是做一个页面的分页查询，提供查询条件，用户自己选择要查询什么状态的音频

直播查询

直播不需要审核也很难审核(即时直播几乎无法审核)。所以需要一些纠错机制

1. 需要一个页面供管理员分页查询当前存在哪些直播
2. 管理员应该可以收听直播内容。(这个在 web 端可选，因为编码复杂，但 https 下 html5 后提供了api来实现, example 是测试工具使用 web api 实现的浏览器即时播放 mp3 如果要实现可以参考或联系后端要源码)
3. 当管理员发现直播存在非法内容时可以调用 Close 接口来立刻关闭这个直播

设备控制

除了播放任务，系统还可以对设备进行一些指令操作，例如要求某个设备调整它的音量，打开或关闭对讲机功能，重新启动 …

所有不同的指令模式都是类型的，选择要控制的设备(只能是单一，即一次只能控制一个设备)。为其添加要执行的指令 id 以及 参数。服务器会将内容转发给设备，设备会在执行结束后将执行结果回报到服务器。(所以用户不能立刻知道执行结果)

1. 实现应该有个页面，供用户手动输入指令 id 和 参数 字符串。（这个页面主要供维护人员测试，以及能够在不更新前端情况下支持未来新添加指令和某些特别地区特有的指令）
2. 目前预定义了一些指令，应该为这些预定义的指令提供更友好的输入 ui 或单独页面

用户可能需要知道自己下达的指令执行结果，应该在一个单独页面提供分页查询

数据查询

到上个段落为止，基本包含了所有的操作相关功能(执行了会对系统或设备产生影响)，后文主要是包含了一些只读数据，大部分都是统计信息或者历史记录相关的

调度历史

任何任务在执行时都会安排一个调度器，直播任务只有一个调度器因为它只执行一次，流程任务在每次执行时都会安排一个新的调度器。

调度器历史记录了任务从何时开始，从何时结束，任务详情，执行日志(几点开始播放了什么内容，是否遇到错误之类…)。

1. 需要提供一个页面来分页查询存在的调度器
2. 查询到了调度器后需要一个详情页面或弹出框来显示调度器的执行日志
3. 此外也需要一个页面直接分页查询所有调度器的执行日志

模拟器

任务一个设备，服务器都会在后台为它创建一个模拟器，模拟器记录了设备当前的状态(设备是否连接到服务器，连接时间，设备回传的信息，设备当前正在执行的调度器…)

1. 要一个页面来分页查询模拟器
2. 查询模拟器的执行日志
3. 每次设备连接到服务器，都会创建一个自增的乐观锁并与日志相关，可以通过这个乐观锁查询模拟器某个tcp连接下的日志

统计信息

应该制作一个页面来以图表的形式为用户显示一些统计信息，服务器直接包含的统计内容如下：

1. Connected 这用于统计当前全服务器或指定区域下当前有多少设备正常连接到服务器以及多少设备因为未知原因没有连接到服务器
2. Priority 这用于统计当前全服务器或指定区域下各中不同优先级的任务分别有多少
3. Level 这用于统计当前全服务器或指定区域下各中不同等级的任务分别有多少
4. SchedulerPriority 類似 Priority 但它不是統計當前數據而是統計一段時間內的數據，比如一天內，一個月，2022年全年
5. SchedulerLevel 類似 Level 但它不是統計當前數據而是統計一段時間內的數據，比如一天內，一個月，2022年全年
6. SchedulerSource 統計一段時間內有多少任務是直播任務多少任務是流程任務

地圖顯示

需要一個頁面顯示一張地圖，並在地圖上標記出設備的部署爲止，並以顏色區分設備是否上線。也可以將一些統計信息一起顯示在此頁面以豐富頁面內容