feat: webui modules avatar

kotorijs · Jun 13, 2024 · 7cde1cf · 7cde1cf
1 parent 0031d2f
commit 7cde1cf
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 11 deletions.
diff --git a/TODO.md b/TODO.md
@@ -18,8 +18,8 @@
 ## Features
 
 <!-- - [x] ctx.filter() -->
-<!-- - [ ] Kotori cli gui and modules search,install,uninstall,update -->
 
+- [ ] Kotori cli gui and modules search,install,uninstall,update
 - [x] message.schedule()
 - [x] decorator plugin form
 - [x] @kotori-bot/tools Events: protected list
@@ -28,6 +28,11 @@
 - [ ] reduce plugin name under scope
 - [ ] well adapted for custom plugin scope
 - [ ] view core and loader version
+- [ ] plugin scope filter
+- [ ] logger color open or close
+- [ ] custom service auto load
+- [ ] rss subscribe service plugin
+- [ ] protect daemon and auto install
 
 ## Styles
 

diff --git a/modules/webui/README.md b/modules/webui/README.md
@@ -11,3 +11,5 @@ Web front end repository: [kotorijs/webui](https://github.com/kotorijs/webui)
 - [x] Add authorization for websocket server
 - [x] Login at the same time
 - [x] Console outputting support for cmd adapter
+- [ ] Websocket verify
+- [ ] Sync offline and other data
diff --git a/modules/webui/dist/index.html b/modules/webui/dist/index.html
@@ -4,11 +4,80 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <link rel="icon" href="https://kotori.js.org/favicon.svg">
+  <title>Kotori Webui</title>
+  <style>
+    .container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 95vh;
+    }
+
+    .description {
+      font-size: 1.2rem;
+      margin-top: 1rem;
+    }
+
+    .link {
+      font-size: 1.6rem;
+    }
+
+    .link a {
+      color: #007bff;
+      text-decoration: none;
+    }
+
+    .contributors li {
+      margin-bottom: 1rem;
+      font-size: 1.4rem;
+      list-style: none;
+    }
+
+    .contributors a {
+      color: #00ffdd;
+      text-decoration: none;
+    }
+
+    .contributors img {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      margin-right: 1rem;
+    }
+
+    .contributors span {
+      color: #ffbd30
+    }
+  </style>
 </head>
 
 <body>
-
+  <div class="container">
+    <h1>👏 Hi there, Kotori Webui!</h1>
+    <span class="description"> A brand new Kotori Webui front-end - Kams (Kotori Administration Management System) is
+      under development!
+    </span>
+    <br />
+    <span class="link">Go to repository -> <a target="_blank" href="https://github.com/kotorijs/webui">here</a></span>
+    <hr />
+    <div class="contributors">
+      <h2>Web Frontend and Backend main contributors:</span>
+        <ul>
+          <li>
+            <img src="https://avatars.githubusercontent.com/u/116894525?v=4" alt="Space Pch">
+            <a target="_blank" href="https://github.com/spacepch">Painchornds</a>
+          </li>
+          <li>
+            <img src="https://avatars.githubusercontent.com/u/64067440?v=4" alt="biyuehu">
+            <a target="_blank" href="https://github.com/biyuehu">Romi</a>
+          </li>
+        </ul>
+        <h3>Thansk for all contributions!</h3>
+        <span>We are looking for more contributors to join us!</span>
+    </div>
+  </div>
 </body>
 
 </html>
diff --git a/modules/webui/package.json b/modules/webui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kotori-bot/kotori-plugin-webui",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "webui plugin",
   "main": "lib/index.js",
   "keywords": [

diff --git a/modules/webui/request.http b/modules/webui/request.http
@@ -9,9 +9,9 @@
 # Kotori Bot - WebUI Api Documentation
 
 @URL = http://localhost:720
-@KEY = TOKEN
-@USERNAME = 用户名
-@PASSWORD = 密码
+@KEY = dad717a44e9044cfbae2fe82469254e2
+@USERNAME = hotaru
+@PASSWORD = 05170517
 
 ### 登录
 
@@ -98,6 +98,11 @@ Authorization: Bearer {{KEY}}
 GET {{URL}}/api/data/modules/{{moduleName}} HTTP/1.1
 Authorization: Bearer {{KEY}}
 
+
+### 获取模块图标
+
+GET {{URL}}/api/data/avatar/{{moduleName}} HTTP/1.1
+
 ### 获取所有机器人实例信息
 
 GET {{URL}}/api/data/bots HTTP/1.1
@@ -123,8 +128,8 @@ Authorization: Bearer {{KEY}}
 
 ### WebSocket 连接
 
-### ws://localhost:{{port + 1}}/webui
-### WS 端口为 http 端口 + 1
+### ws://localhost:{{port}}/webui
+### WS 端口与 http 端口一致
 
 
 #### 【Server】实时状态（默认每隔 5 秒发送一次）

diff --git a/modules/webui/src/routers/api/avatar.svg b/modules/webui/src/routers/api/avatar.svg
diff --git a/modules/webui/src/routers/api/data.ts b/modules/webui/src/routers/api/data.ts
@@ -1,5 +1,6 @@
 import os from 'node:os';
-import { Adapter, Symbols } from 'kotori-bot';
+import { Adapter, Symbols, loadConfig } from 'kotori-bot';
+import { resolve } from 'node:path';
 import { Context } from '../../types';
 import { calcGrandRecord } from '../../utils/common';
 
@@ -15,6 +16,18 @@ interface BotData {
   lang: string;
 }
 
+const AVATAR_COLOR_LIST = [
+  ['#64FFDA', '#00B0FF', '#FFFFFF'], // default
+  ['#FFD700', '#FF8C00', '#000000'], // gold
+  ['#EF9A9A', '#F44336', '#FFFFFF'], // red
+  ['#03A9F4', '#0D47A1', '#212121'], // blue
+  ['#A5D6A7', '#4CAF50', '#FFFFFF'], // green
+  ['#CE93D8', '#9C27B0', '#FFFFFF'], // purple
+  ['#BCAAA4', '#795548', '#FFFFFF'], // shit
+  ['#FFC0CB', '#FF69B4', '#FFFFFF'], // pink
+  ['#78909C', '#546E7A', '#FFFFFF'] // grey
+];
+
 export default (ctx: Context, app: Context['server']) => {
   const getModuleData = () => {
     const list: ModulePackage[] = [];
@@ -103,5 +116,42 @@ export default (ctx: Context, app: Context['server']) => {
     });
   });
 
+  router.get('/avatar/:scope?/:name?', (req, res) => {
+    const DEFAULT_NAME = 'Kotori Plugin';
+    const DEFAULT_COLOR = AVATAR_COLOR_LIST[0];
+    const DEFAULT_FONT_SIZE = 75;
+
+    /* Handle plugin name */
+    const { scope, name } = req.params;
+    let pluginName = DEFAULT_NAME;
+    if (scope) {
+      pluginName = name ?? scope;
+      if (pluginName.startsWith('kotori-plugin-')) pluginName = pluginName.slice(14);
+      pluginName = pluginName
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+    }
+
+    /* Get index of avatar color based on plugin name */
+    const hash = pluginName.split('').reduce((hash, char) => hash * 31 + char.charCodeAt(0), 0);
+    const index = hash % 9;
+    const color = AVATAR_COLOR_LIST[index >= 0 ? index : index + 9];
+
+    /* Complete font size */
+    const fontSize = Math.ceil(108 * (9 / pluginName.length));
+
+    /* Load avatar image and replace data */
+    let imageData = loadConfig(resolve(__dirname, './avatar.svg'), 'text');
+    imageData = imageData.replace(DEFAULT_COLOR[0], color[0]);
+    imageData = imageData.replace(DEFAULT_COLOR[1], color[1]);
+    imageData = imageData.replace(DEFAULT_COLOR[2], color[2]);
+    imageData = imageData.replace(DEFAULT_NAME, pluginName);
+    imageData = imageData.replace(DEFAULT_FONT_SIZE.toString(), fontSize.toString());
+
+    /* Send image data */
+    res.type('image/svg+xml').send(imageData);
+  });
+
   return router;
 };
diff --git a/modules/webui/src/routers/index.ts b/modules/webui/src/routers/index.ts
@@ -1,6 +1,8 @@
 import { Context } from '../types';
 import RouterConfig from './router';
 
+const NO_VERIFY = ['/api/accounts/login', '/api/data/avatar/'];
+
 export default (ctx: Context, app: Context['server']) => {
   const router = app.router();
 
@@ -15,7 +17,11 @@ export default (ctx: Context, app: Context['server']) => {
 
     if (!RouterConfig.find((item) => item.path === req.path || req.path.startsWith(item.path)))
       return res.sendStatus(404);
-    if (req.path === '/api/accounts/login' || ctx.webui.checkToken(req.headers.authorization)) return next();
+    if (
+      NO_VERIFY.filter((item) => req.path.startsWith(item)).length > 0 ||
+      ctx.webui.checkToken(req.headers.authorization)
+    )
+      return next();
     return res.sendStatus(401);
   });