# 网页控制台 (WebUI)

# 指令:status

  • 快捷调用:你的状态,查看状态,运行情况,运行状态

status 指令可以用于查看机器人的运行状态。

聊天记录
A
Alice
你的状态
Koishi

5 名四季酱正在为 20 个群和 2409 名用户提供服务。

四季酱 2 号:工作中(2/min)

四季酱 3 号:工作中(3/min)

四季酱 4 号:工作中(3/min)

四季酱 5 号:工作中(0/min)

四季酱 9 号:工作中(5/min)

==========

更新时间:2019-12-8 14:41:15

启动时间:2019-12-8 14:52:12

已运行 43 天 10 小时 22 分钟

已载入指令:105

已载入中间件:8

CPU 使用率:1% / 2%

内存使用率:34% / 91%

# Web API

本插件还提供了一个 Web API,访问 http://localhost:{port}/status,即可获得 JSON 格式的运行状态:

interface BotStatus {
  type: string
  selfId: number
  username: string
  platform: string
  code: number
}

interface Status {
  activeUsers: number
  activeGroups: number
  allUsers: number
  allGroups: number
  storageSize: number
  bots: BotStatus[]
  memory: [number, number]
  cpu: [number, number]
}

# 扩展功能

# 修改指令输出

可以使用模板语法修改 status 指令的输出。默认的代码实现如下:

template.set('status', {
  bot: '{{ username }}:{{ code ? `无法连接` : `工作中(${currentRate[0]}/min)` }}',
  output: [
    '{{ bots }}',
    '==========',
    '活跃用户数量:{{ activeUsers }}',
    '活跃群数量:{{ activeGroups }}',
    'CPU 使用率:{{ (cpu[0] * 100).toFixed() }}% / {{ (cpu[1] * 100).toFixed() }}%',
    '内存使用率:{{ (memory[0] * 100).toFixed() }}% / {{ (memory[1] * 100).toFixed() }}%',
  ].join('\n'),
})

# 添加前端入口文件

你可以使用 webui.addEntry() 方法添加入口文件。下面是一个例子:

my-plugin.js
const { resolve } = require(path)

module.exports = (ctx) => {
  ctx.with('koishi-plugin-webui', () => {
    ctx.webui.addEntry(resolve(__dirname, 'client-entry.js'))
  })
}
client-entry.js
console.log(window) // 你现在可以操作客户端了!

# 调试模式 beta

调试模式将允许你使用 SFC, HMR 等特性,便于开发自己的功能。

src/index.js
const { resolve } = require(path)

module.exports = (ctx) => {
  // 这个方法可以确保其中的内容仅当 webui 插件被载入时调用
  // 即使使用者没有安装 koishi-plugin-webui,你的插件也不会因此而报错
  ctx.with('koishi-plugin-webui', () => {
    // 生产环境和开发环境使用不同的入口文件
    ctx.webui.addEntry(ctx.webui.config.devMode
      ? resolve(__dirname, '../client/index.ts')
      : resolve(__dirname, '../dist/index.js'))
  })
}
client/index.ts
// 支持 typescript 和 esmodule,同时这里也有类型标注
import { router } from 'koishi-plugin-webui/client'
import MyPage from './my-page.vue'

router.addRoute({
  path: '/my-page',
  name: '扩展页面',
  component: MyPage,
})

# 配置项

# title

  • 类型: string
  • 默认值: 'Koishi 控制台'

网页控制台的标题。

# uiPath

  • 类型: string
  • 默认值: /console

前端页面呈现的路径。

# apiPath

  • 类型: string
  • 默认值: /status

后端 API 服务的路径。

# selfUrl

  • 类型: string
  • 默认值: ''

Koishi 服务暴露在公网的地址。

TIP

与其他需要 selfUrl 配置项的地方不同的是,这里的属性不会继承 app.options.selfUrl 的值。这是因为,由于这里缺省时会使用相对路径,网页依旧可以正常访问。

只有你将 uiPathapiPath 分别部署到了不同的端口或域名时,这个选项才建议使用。

# devMode

  • 类型: boolean
  • 默认值: false

启用调试模式

# expiration

  • 类型: number
  • 默认值: Time.week

登陆控制台所获得的令牌的生效时间。

# tickInterval

  • 类型: number
  • 默认值: Time.second * 5

页面同步 profile 数据的时间。