koishi-plugin-adapter-onebot-multi 0.0.1 → 0.0.2

package/lib/index.js

@@ -52,6 +52,7 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var import_koishi11 = require("koishi");
+var import_path = require("path");
 
 // src/bot/index.ts
 var import_koishi8 = require("koishi");
@@ -979,8 +980,8 @@ function accept(socket, bot) {
   bot.internal._request = (action, params) => {
     const data = { action, params, echo: ++counter };
     data.echo = ++counter;
-    return new Promise((resolve, reject) => {
-      listeners[data.echo] = resolve;
+    return new Promise((resolve2, reject) => {
+      listeners[data.echo] = resolve2;
       setTimeout(() => {
         delete listeners[data.echo];
         reject(new TimeoutError(params, action));
@@ -1332,8 +1333,8 @@ var StatusManager = class {
 };
 
 // src/panel.ts
-var import_koa = __toESM(require("koa"));
 var import_router = __toESM(require("@koa/router"));
+var import_koa = __toESM(require("koa"));
 var import_koishi10 = require("koishi");
 var import_crypto = require("crypto");
 var SERVER_SECRET = (0, import_crypto.randomBytes)(32).toString("hex");
@@ -1362,10 +1363,23 @@ function verifySignedToken(token) {
   }
 }
 __name(verifySignedToken, "verifySignedToken");
+function getCookieToken(ctx) {
+  const headerToken = ctx.headers["x-admin-token"];
+  if (headerToken) return headerToken;
+  const cookies = ctx.headers.cookie || "";
+  const match = cookies.match(/ob_admin_token=([^;]+)/);
+  return match ? match[1] : null;
+}
+__name(getCookieToken, "getCookieToken");
+function isAuthenticated(ctx) {
+  const token = getCookieToken(ctx);
+  return token ? verifySignedToken(token) : false;
+}
+__name(isAuthenticated, "isAuthenticated");
 var PanelConfig = import_koishi10.Schema.object({
   enabled: import_koishi10.Schema.boolean().default(false).description("是否启用状态展示面板。"),
-  port: import_koishi10.Schema.natural().default(8212).description("面板端口。"),
-  basePath: import_koishi10.Schema.string().default("/status").description("面板路径。")
+  basePath: import_koishi10.Schema.string().default("/status").description("面板路径。"),
+  port: import_koishi10.Schema.natural().description("独立端口（留空则使用 Koishi 内置服务器）。")
 }).description("展示面板");
 var StatusPanel = class {
   constructor(ctx, config, statusManager, configManager) {
@@ -1374,25 +1388,29 @@ var StatusPanel = class {
     this.statusManager = statusManager;
     this.configManager = configManager;
     if (!config.enabled) return;
-    this.app = new import_koa.default();
     this.setupRoutes();
-    this.start();
-    ctx.on("dispose", () => this.stop());
+    if (config.port) {
+      ctx.logger.info(`状态面板已启用: http://localhost:${config.port}${config.basePath}`);
+      ctx.logger.info(`管理面板已启用: http://localhost:${config.port}${config.basePath}/admin`);
+    } else {
+      ctx.logger.info(`状态面板已启用: ${config.basePath}`);
+      ctx.logger.info(`管理面板已启用: ${config.basePath}/admin`);
+    }
   }
   static {
     __name(this, "StatusPanel");
   }
   app;
-  server = null;
+  server;
   async parseJsonBody(ctx) {
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve2, reject) => {
       let body = "";
       ctx.req.on("data", (chunk) => {
         body += chunk.toString();
       });
       ctx.req.on("end", () => {
         try {
-          resolve(body ? JSON.parse(body) : {});
+          resolve2(body ? JSON.parse(body) : {});
         } catch (e) {
           reject(new Error("Invalid JSON"));
         }
@@ -1403,7 +1421,11 @@ var StatusPanel = class {
   setupRoutes() {
     const router = new import_router.default();
     const basePath = this.config.basePath || "/status";
+    const adminPath = `${basePath}/admin`;
     router.get(`${basePath}/api/status`, (ctx) => {
+      ctx.set("Cache-Control", "no-store, no-cache, must-revalidate");
+      ctx.set("Pragma", "no-cache");
+      ctx.set("Expires", "0");
       const status = this.statusManager.getStatus();
       ctx.body = {
         bots: status.bots.map((bot) => ({
@@ -1413,8 +1435,9 @@ var StatusPanel = class {
           groupCount: bot.groupCount,
           friendCount: bot.friendCount,
           messageReceived: bot.messageReceived,
-          messageSent: bot.messageSent
-          // 不返回: protocol, endpoint, path, token 等敏感信息
+          messageSent: bot.messageSent,
+          lastMessageTime: bot.lastMessageTime,
+          startupTime: bot.startupTime
         })),
         updatedAt: status.updatedAt
       };
@@ -1423,29 +1446,14 @@ var StatusPanel = class {
       ctx.type = "html";
       ctx.body = this.renderStatusPage();
     });
-    const adminPath = `${basePath}/admin`;
-    const authMiddleware = /* @__PURE__ */ __name(async (ctx, next) => {
-      const cookies = ctx.headers.cookie || "";
-      const tokenMatch = cookies.match(/ob_admin_token=([^;]+)/);
-      const token = tokenMatch ? tokenMatch[1] : null;
-      if (!token || !verifySignedToken(token)) {
-        ctx.status = 401;
-        ctx.body = { error: "未授权访问" };
-        return;
-      }
-      await next();
-    }, "authMiddleware");
-    router.get(`${adminPath}/api/check-init`, async (ctx) => {
+    router.get(`${adminPath}/api/auth/check`, async (ctx) => {
+      this.ctx.logger.info("检查认证状态...");
       const hasPassword = await this.configManager.hasAdminPassword();
-      ctx.body = { needsInit: !hasPassword };
-    });
-    router.get(`${adminPath}/api/check-auth`, async (ctx) => {
-      const cookies = ctx.headers.cookie || "";
-      const tokenMatch = cookies.match(/ob_admin_token=([^;]+)/);
-      const token = tokenMatch ? tokenMatch[1] : null;
-      ctx.body = { authenticated: token && verifySignedToken(token) };
+      const authenticated = isAuthenticated(ctx);
+      this.ctx.logger.info(`hasPassword=${hasPassword}, authenticated=${authenticated}`);
+      ctx.body = { hasPassword, authenticated };
     });
-    router.post(`${adminPath}/api/init-password`, async (ctx) => {
+    router.post(`${adminPath}/api/auth/setup`, async (ctx) => {
       const hasPassword = await this.configManager.hasAdminPassword();
       if (hasPassword) {
         ctx.status = 400;
@@ -1461,174 +1469,177 @@ var StatusPanel = class {
       await this.configManager.setAdminPassword(data.password);
       this.ctx.logger.info("管理密码已设置");
       const token = generateSignedToken();
-      ctx.set("Set-Cookie", `ob_admin_token=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=${TOKEN_EXPIRY / 1e3}`);
-      ctx.body = { success: true };
+      ctx.set("Set-Cookie", `ob_admin_token=${token}; Path=/; Max-Age=86400`);
+      ctx.body = { success: true, token };
     });
-    router.post(`${adminPath}/api/login`, async (ctx) => {
+    router.post(`${adminPath}/api/auth/login`, async (ctx) => {
+      this.ctx.logger.info("收到登录请求");
       const data = await this.parseJsonBody(ctx);
+      this.ctx.logger.info(`登录数据: ${JSON.stringify(data)}`);
       const valid = await this.configManager.verifyAdminPassword(data.password || "");
-      this.ctx.logger.debug(`登录尝试: ${valid ? "成功" : "失败"}`);
+      this.ctx.logger.info(`登录尝试: ${valid ? "成功" : "失败"}`);
       if (valid) {
         const token = generateSignedToken();
-        this.ctx.logger.debug(`生成签名 token`);
-        ctx.set("Set-Cookie", `ob_admin_token=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=${TOKEN_EXPIRY / 1e3}`);
-        ctx.body = { success: true };
+        this.ctx.logger.info(`生成 token: ${token.substring(0, 20)}...`);
+        ctx.set("Set-Cookie", `ob_admin_token=${token}; Path=/; Max-Age=86400`);
+        ctx.body = { success: true, token };
+        this.ctx.logger.info("登录响应已发送");
       } else {
         ctx.status = 401;
         ctx.body = { error: "密码错误" };
       }
     });
-    router.post(`${adminPath}/api/logout`, async (ctx) => {
+    router.post(`${adminPath}/api/auth/logout`, async (ctx) => {
       ctx.set("Set-Cookie", `ob_admin_token=; Path=/; HttpOnly; Max-Age=0`);
       ctx.body = { success: true };
     });
     router.get(adminPath, async (ctx) => {
-      const hasPassword = await this.configManager.hasAdminPassword();
       ctx.type = "html";
+      ctx.set("Cache-Control", "no-store");
+      ctx.body = this.renderAdminApp();
+    });
+    const authMiddleware = /* @__PURE__ */ __name(async (ctx, next) => {
+      if (!isAuthenticated(ctx)) {
+        ctx.status = 401;
+        ctx.body = { error: "未授权访问" };
+        return;
+      }
+      await next();
+    }, "authMiddleware");
+    router.get(`${adminPath}/api/bots`, authMiddleware, async (ctx) => {
       ctx.set("Cache-Control", "no-store, no-cache, must-revalidate");
       ctx.set("Pragma", "no-cache");
-      if (!hasPassword) {
-        ctx.body = this.renderSetupPage();
-      } else {
-        const cookies = ctx.headers.cookie || "";
-        const tokenMatch = cookies.match(/ob_admin_token=([^;]+)/);
-        const token = tokenMatch ? tokenMatch[1] : null;
-        const isValid = token && verifySignedToken(token);
-        this.ctx.logger.debug(`访问管理面板: token=${token ? "存在" : "无"}, 有效=${isValid}`);
-        if (isValid) {
-          ctx.body = this.renderAdminPage();
-        } else {
-          ctx.body = this.renderLoginPage();
-        }
-      }
-    });
-    router.get(`${adminPath}/api/list`, authMiddleware, async (ctx) => {
-      const configs = await this.configManager.getAllConfigs();
-      const status = this.statusManager.getStatus();
-      const bots = configs.map((config) => {
-        const botStatus = status.bots.find((b) => b.selfId === config.selfId);
+      ctx.set("Expires", "0");
+      const dbConfigs = await this.configManager.getAllConfigs();
+      const runtimeStatus = this.statusManager.getStatus();
+      const runtimeMap = new Map(runtimeStatus.bots.map((b) => [String(b.selfId), b]));
+      const bots = dbConfigs.map((config) => {
+        const runtime = config.selfId ? runtimeMap.get(String(config.selfId)) : null;
         return {
+          id: config.id,
+          name: config.name,
           selfId: config.selfId,
-          nickname: botStatus?.nickname,
+          nickname: runtime?.nickname,
           protocol: config.protocol,
-          status: botStatus?.status || "offline",
+          status: runtime?.status || "offline",
           endpoint: config.endpoint,
           path: config.path,
           enabled: config.enabled,
-          messageReceived: botStatus?.messageReceived,
-          messageSent: botStatus?.messageSent,
-          lastMessageTime: botStatus?.lastMessageTime,
-          startupTime: botStatus?.startupTime,
-          groupCount: botStatus?.groupCount,
-          friendCount: botStatus?.friendCount
+          messageReceived: runtime?.messageReceived,
+          messageSent: runtime?.messageSent,
+          lastMessageTime: runtime?.lastMessageTime,
+          startupTime: runtime?.startupTime,
+          groupCount: runtime?.groupCount,
+          friendCount: runtime?.friendCount
         };
       });
       ctx.body = { bots, updatedAt: Date.now() };
     });
-    router.post(`${adminPath}/api/create`, authMiddleware, async (ctx) => {
-      const data = await this.parseJsonBody(ctx);
-      if (!data.selfId) {
-        ctx.status = 400;
-        ctx.body = { error: "selfId 不能为空" };
-        return;
-      }
-      const existing = await this.configManager.getConfig(data.selfId);
-      if (existing) {
-        ctx.status = 400;
-        ctx.body = { error: `Bot ${data.selfId} 已存在` };
-        return;
-      }
-      if (data.protocol === "ws" && !data.endpoint) {
-        ctx.status = 400;
-        ctx.body = { error: "WS 协议需要配置 endpoint" };
-        return;
+    router.post(`${adminPath}/api/bots/create`, authMiddleware, async (ctx) => {
+      try {
+        const data = await this.parseJsonBody(ctx);
+        if (!data.name) {
+          ctx.status = 400;
+          ctx.body = { error: "配置名称不能为空" };
+          return;
+        }
+        if (data.protocol === "ws" && !data.endpoint) {
+          ctx.status = 400;
+          ctx.body = { error: "WS 协议需要配置 endpoint" };
+          return;
+        }
+        const record = await this.configManager.createConfig({
+          name: data.name,
+          selfId: void 0,
+          // 连接成功后自动填充
+          token: data.token,
+          protocol: data.protocol || "ws-reverse",
+          endpoint: data.endpoint,
+          path: data.path || "/onebot",
+          enabled: true
+        });
+        this.ctx.logger.info(`创建 Bot 配置: #${record.id} ${data.name}`);
+        await this.startBot(this.configManager.toBotConfig(record));
+        ctx.body = { success: true, id: record.id };
+      } catch (error) {
+        this.ctx.logger.error("创建 Bot 配置失败:", error);
+        ctx.status = 500;
+        ctx.body = { error: "创建配置失败: " + error.message };
       }
-      const record = await this.configManager.createConfig({
-        selfId: data.selfId,
-        token: data.token,
-        protocol: data.protocol || "ws-reverse",
-        endpoint: data.endpoint,
-        path: data.path || "/onebot",
-        enabled: true
-      });
-      this.ctx.logger.info(`创建 Bot 配置: ${data.selfId}`);
-      await this.startBot(this.configManager.toBotConfig(record));
-      ctx.body = { success: true };
     });
-    router.post(`${adminPath}/api/update`, authMiddleware, async (ctx) => {
+    router.post(`${adminPath}/api/bots/delete`, authMiddleware, async (ctx) => {
       const data = await this.parseJsonBody(ctx);
-      const existing = await this.configManager.getConfig(data.selfId);
+      const id = Number(data.id);
+      const existing = await this.configManager.getConfigById(id);
       if (!existing) {
         ctx.status = 404;
-        ctx.body = { error: `Bot ${data.selfId} 不存在` };
-        return;
-      }
-      if (data.updates?.protocol === "ws" && !data.updates?.endpoint && !existing.endpoint) {
-        ctx.status = 400;
-        ctx.body = { error: "WS 协议需要配置 endpoint" };
+        ctx.body = { error: `配置 #${id} 不存在` };
         return;
       }
-      await this.configManager.updateConfig(data.selfId, data.updates);
-      this.ctx.logger.info(`更新 Bot 配置: ${data.selfId}`);
-      ctx.body = { success: true, needRestart: true };
-    });
-    router.post(`${adminPath}/api/delete`, authMiddleware, async (ctx) => {
-      const data = await this.parseJsonBody(ctx);
-      const selfId = data.selfId;
-      const existing = await this.configManager.getConfig(selfId);
-      if (!existing) {
-        ctx.status = 404;
-        ctx.body = { error: `Bot ${selfId} 不存在` };
-        return;
+      if (existing.selfId) {
+        await this.stopBot(existing.selfId);
       }
-      await this.stopBot(selfId);
-      await this.configManager.deleteConfig(selfId);
-      this.ctx.logger.info(`删除 Bot 配置: ${selfId}`);
+      await this.configManager.deleteConfigById(id);
+      this.ctx.logger.info(`删除 Bot 配置: #${id} ${existing.name}`);
       ctx.body = { success: true };
     });
-    router.post(`${adminPath}/api/toggle`, authMiddleware, async (ctx) => {
+    router.post(`${adminPath}/api/bots/toggle`, authMiddleware, async (ctx) => {
       const data = await this.parseJsonBody(ctx);
-      const selfId = data.selfId;
-      const existing = await this.configManager.getConfig(selfId);
+      const id = Number(data.id);
+      const existing = await this.configManager.getConfigById(id);
       if (!existing) {
         ctx.status = 404;
-        ctx.body = { error: `Bot ${selfId} 不存在` };
+        ctx.body = { error: `配置 #${id} 不存在` };
         return;
       }
       const newEnabled = !existing.enabled;
-      await this.configManager.updateConfig(selfId, { enabled: newEnabled });
+      await this.configManager.updateConfigById(id, { enabled: newEnabled });
       if (newEnabled) {
-        const config = await this.configManager.getConfig(selfId);
+        const config = await this.configManager.getConfigById(id);
         if (config) {
           await this.startBot(this.configManager.toBotConfig(config));
         }
       } else {
-        await this.stopBot(selfId);
+        if (existing.selfId) {
+          await this.stopBot(existing.selfId);
+        }
       }
-      this.ctx.logger.info(`${newEnabled ? "启用" : "禁用"} Bot: ${selfId}`);
+      this.ctx.logger.info(`${newEnabled ? "启用" : "禁用"} Bot 配置: #${id} ${existing.name}`);
       ctx.body = { success: true, enabled: newEnabled };
     });
-    router.post(`${adminPath}/api/restart`, authMiddleware, async (ctx) => {
+    router.post(`${adminPath}/api/bots/restart`, authMiddleware, async (ctx) => {
       const data = await this.parseJsonBody(ctx);
-      const selfId = data.selfId;
-      const config = await this.configManager.getConfig(selfId);
+      const id = Number(data.id);
+      const config = await this.configManager.getConfigById(id);
       if (!config) {
         ctx.status = 404;
-        ctx.body = { error: `Bot ${selfId} 不存在` };
+        ctx.body = { error: `配置 #${id} 不存在` };
         return;
       }
       if (!config.enabled) {
         ctx.status = 400;
-        ctx.body = { error: `Bot ${selfId} 未启用` };
+        ctx.body = { error: `配置 #${id} 未启用` };
         return;
       }
-      await this.stopBot(selfId);
+      if (config.selfId) {
+        await this.stopBot(config.selfId);
+      }
       await this.startBot(this.configManager.toBotConfig(config));
-      this.ctx.logger.info(`重启 Bot: ${selfId}`);
+      this.ctx.logger.info(`重启 Bot 配置: #${id} ${config.name}`);
       ctx.body = { success: true };
     });
-    this.app.use(router.routes());
-    this.app.use(router.allowedMethods());
+    if (this.config.port) {
+      this.app = new import_koa.default();
+      this.app.use(router.routes());
+      this.app.use(router.allowedMethods());
+      this.server = this.app.listen(this.config.port);
+      this.ctx.on("dispose", () => {
+        this.server?.close();
+      });
+    } else {
+      this.ctx.server.use(router.routes());
+      this.ctx.server.use(router.allowedMethods());
+    }
   }
   async startBot(config) {
     const existing = this.ctx.bots.find((b) => b.selfId === config.selfId && b.platform === "onebot");
@@ -1651,27 +1662,15 @@ var StatusPanel = class {
       delete this.ctx.bots[bot.sid];
     }
   }
-  start() {
-    const port = this.config.port || 8212;
-    this.server = this.app.listen(port, () => {
-      this.ctx.logger.info(`状态面板已启动: http://localhost:${port}${this.config.basePath}`);
-      this.ctx.logger.info(`管理面板已启动: http://localhost:${port}${this.config.basePath}/admin`);
-    });
-  }
-  stop() {
-    if (this.server) {
-      this.server.close();
-      this.ctx.logger.info("状态面板已关闭");
-    }
-  }
-  renderLoginPage() {
+  // ==================== 页面渲染 ====================
+  renderAdminApp() {
     const basePath = this.config.basePath || "/status";
     return `<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>OneBot Multi - 管理登录</title>
+  <title>OneBot Multi - 管理面板</title>
   <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Noto+Sans+SC:wght@400;700;900&display=swap" rel="stylesheet">
   <style>
     :root {
@@ -1681,16 +1680,15 @@ var StatusPanel = class {
       --nl-text: #451a03;
       --nl-border: 3px solid #451a03;
       --nl-shadow: 4px 4px 0 #451a03;
+      --status-online: #32CD32;
+      --status-offline: #FF4500;
+      --status-connecting: #FFA500;
     }
-
     * { margin: 0; padding: 0; box-sizing: border-box; }
-
     body {
       font-family: 'Noto Sans SC', 'Segoe UI', sans-serif;
       background-color: var(--nl-bg);
-      background-image:
-        radial-gradient(#fde68a 1px, transparent 1px),
-        radial-gradient(#fde68a 1px, transparent 1px);
+      background-image: radial-gradient(#fde68a 1px, transparent 1px), radial-gradient(#fde68a 1px, transparent 1px);
       background-size: 20px 20px;
       background-position: 0 0, 10px 10px;
       color: var(--nl-text);
@@ -1700,36 +1698,25 @@ var StatusPanel = class {
       justify-content: center;
       padding: 2rem;
     }
-
-    .login-box {
+    .auth-box {
       background: var(--nl-surface);
       padding: 3rem;
       border: var(--nl-border);
       box-shadow: var(--nl-shadow);
       border-radius: 16px;
-      max-width: 400px;
+      max-width: 450px;
       width: 100%;
       text-align: center;
     }
-
     h1 {
       font-family: 'Fredoka One', 'Noto Sans SC', cursive;
       font-size: 1.8rem;
-      margin-bottom: 2rem;
+      margin-bottom: 1rem;
       text-shadow: 2px 2px 0 #fff;
     }
-
-    .form-group {
-      margin-bottom: 1.5rem;
-    }
-
-    label {
-      display: block;
-      font-weight: 700;
-      margin-bottom: 0.5rem;
-      text-align: left;
-    }
-
+    .desc { color: #92400e; margin-bottom: 2rem; font-weight: 600; }
+    .form-group { margin-bottom: 1.5rem; text-align: left; }
+    label { display: block; font-weight: 700; margin-bottom: 0.5rem; }
     input[type="password"] {
       width: 100%;
       padding: 1rem;
@@ -1738,12 +1725,7 @@ var StatusPanel = class {
       font-size: 1rem;
       font-family: inherit;
     }
-
-    input[type="password"]:focus {
-      outline: none;
-      box-shadow: 0 0 0 3px #fbbf24;
-    }
-
+    input[type="password"]:focus { outline: none; box-shadow: 0 0 0 3px #fbbf24; }
     .btn {
       background: var(--nl-primary);
       border: var(--nl-border);
@@ -1757,1057 +1739,421 @@ var StatusPanel = class {
       transition: all 0.1s;
       width: 100%;
     }
+    .btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #451a03; }
+    .btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #451a03; }
+    .btn:disabled { opacity: 0.6; cursor: not-allowed; }
+    .error { color: #b91c1c; margin-top: 1rem; display: none; font-weight: 600; }
+    .error.show { display: block; }
+    .loading { display: none; }
+    .loading.show { display: block; }
 
-    .btn:hover {
-      transform: translate(-1px, -1px);
-      box-shadow: 5px 5px 0 #451a03;
+    /* 管理面板样式 */
+    .admin-container {
+      display: none;
+      max-width: 1200px;
+      width: 100%;
+      background: var(--nl-surface);
+      padding: 2rem;
+      border: var(--nl-border);
+      box-shadow: var(--nl-shadow);
+      border-radius: 16px;
     }
-
-    .btn:active {
-      transform: translate(1px, 1px);
-      box-shadow: 2px 2px 0 #451a03;
+    .admin-container.show { display: block; }
+    .admin-container h1 { font-size: 2.5rem; margin-bottom: 2rem; }
+    .toolbar { display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
+    .toolbar .btn { width: auto; padding: 0.8rem 1.5rem; font-size: 1rem; box-shadow: 3px 3px 0 #451a03; }
+    .btn-secondary { background: #f3f4f6; }
+    .btn-danger { background: #fee2e2; }
+    .bots { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 2rem; }
+    .bot-card {
+      background: var(--nl-surface);
+      border: var(--nl-border);
+      border-radius: 16px;
+      padding: 1.5rem;
+      box-shadow: var(--nl-shadow);
+      transition: all 0.2s ease;
     }
-
-    .error {
-      color: #b91c1c;
-      margin-top: 1rem;
-      display: none;
+    .bot-card.disabled { opacity: 0.6; }
+    .bot-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #451a03; }
+    .bot-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
+    .bot-avatar { width: 64px; height: 64px; border: var(--nl-border); border-radius: 50%; background: #fff; }
+    .bot-info { flex: 1; }
+    .bot-id { font-weight: 900; font-size: 1.2rem; }
+    .bot-protocol { color: #92400e; font-size: 0.9rem; font-weight: 700; background: #fffbeb; display: inline-block; padding: 2px 6px; border: 2px solid #451a03; border-radius: 6px; margin-top: 4px; }
+    .status-badge { padding: 0.4rem 0.8rem; border: 2px solid #451a03; border-radius: 20px; font-size: 0.8rem; font-weight: 900; }
+    .status-online { background: #dcfce7; border-color: #10b981; color: #15803d; }
+    .status-offline { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }
+    .status-connecting { background: #ffedd5; border-color: #f97316; color: #c2410c; }
+    .bot-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #fff7ed; padding: 1rem; border: 2px solid #451a03; border-radius: 12px; margin-bottom: 1rem; }
+    .bot-stat { display: flex; flex-direction: column; }
+    .bot-stat-label { font-size: 0.75rem; font-weight: 800; color: #92400e; }
+    .bot-stat-value { font-weight: 700; font-size: 1rem; }
+    .bot-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+    .bot-actions .btn { width: auto; padding: 0.5rem 1rem; font-size: 0.85rem; }
+    .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
+    .modal.active { display: flex; }
+    .modal-content { background: var(--nl-surface); border: var(--nl-border); box-shadow: var(--nl-shadow); border-radius: 16px; padding: 2rem; max-width: 500px; width: 90%; }
+    .modal h2 { font-family: 'Fredoka One', cursive; margin-bottom: 1.5rem; }
+    .modal .form-group input, .modal .form-group select { width: 100%; padding: 0.8rem; border: var(--nl-border); border-radius: 8px; font-size: 1rem; font-family: inherit; }
+    .modal-actions { display: flex; gap: 1rem; margin-top: 1.5rem; }
+    .modal-actions .btn { flex: 1; }
+    .toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: var(--nl-surface); border: var(--nl-border); box-shadow: var(--nl-shadow); padding: 1rem 2rem; border-radius: 12px; font-weight: 700; z-index: 2000; display: none; }
+    .toast.show { display: block; }
+    .toast.error { background: #fee2e2; }
+    .toast.success { background: #dcfce7; }
+    .empty-state { text-align: center; padding: 3rem; color: #92400e; }
+    .empty-state h3 { font-size: 1.5rem; margin-bottom: 1rem; }
+    .footer { margin-top: 3rem; text-align: center; font-weight: 700; color: #92400e; }
+    @media (max-width: 768px) {
+      body { padding: 1rem; align-items: flex-start; }
+      .admin-container { padding: 1rem; }
+      .bots { grid-template-columns: 1fr; }
     }
   </style>
 </head>
 <body>
-  <div class="login-box">
+  <!-- 加载状态 -->
+  <div class="auth-box loading" id="loadingView">
+    <h1>加载中...</h1>
+  </div>
+
+  <!-- 设置密码页面 -->
+  <div class="auth-box" id="setupView" style="display:none">
+    <h1>🔧 初始设置</h1>
+    <p class="desc">首次使用，请设置管理密码</p>
+    <form id="setupForm">
+      <div class="form-group">
+        <label for="setupPassword">设置密码</label>
+        <input type="password" id="setupPassword" placeholder="至少4位" required minlength="4">
+      </div>
+      <div class="form-group">
+        <label for="confirmPassword">确认密码</label>
+        <input type="password" id="confirmPassword" placeholder="再次输入密码" required>
+      </div>
+      <button type="submit" class="btn" id="setupBtn">确认设置</button>
+      <p class="error" id="setupError"></p>
+    </form>
+  </div>
+
+  <!-- 登录页面 -->
+  <div class="auth-box" id="loginView" style="display:none">
     <h1>🔐 管理登录</h1>
     <form id="loginForm">
       <div class="form-group">
-        <label for="adminKey">管理密钥</label>
-        <input type="password" id="adminKey" placeholder="请输入管理密钥" required>
+        <label for="loginPassword">管理密钥</label>
+        <input type="password" id="loginPassword" placeholder="请输入管理密钥" required>
       </div>
-      <button type="submit" class="btn">登录</button>
-      <p class="error" id="error">密钥错误</p>
+      <button type="submit" class="btn" id="loginBtn">登录</button>
+      <p class="error" id="loginError"></p>
     </form>
   </div>
 
-  <script>
-    document.getElementById('loginForm').addEventListener('submit', async function(e) {
-      e.preventDefault()
-      const password = document.getElementById('adminKey').value
-      const errorEl = document.getElementById('error')
-      const btn = this.querySelector('button[type="submit"]')
-      btn.disabled = true
-      btn.textContent = '登录中...'
+  <!-- 管理面板 -->
+  <div class="admin-container" id="adminView">
+    <h1>🛠️ OneBot Multi 管理面板</h1>
+    <div class="toolbar">
+      <button class="btn" onclick="showAddModal()">➕ 添加 Bot</button>
+      <button class="btn btn-secondary" onclick="refreshBots()">🔄 刷新</button>
+      <a href="${basePath}" class="btn btn-secondary">📊 状态面板</a>
+      <button class="btn btn-danger" onclick="logout()">🚪 登出</button>
+    </div>
+    <div class="bots" id="botList">
+      <div class="empty-state"><h3>加载中...</h3></div>
+    </div>
+    <div class="footer">OneBot Multi 管理面板</div>
+  </div>
 
-      try {
-        const res = await fetch('${basePath}/admin/api/login', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ password }),
-          credentials: 'include'
-        })
-        const data = await res.json()
-        if (data.success) {
-          // 短暂延迟确保 Cookie 已设置
-          setTimeout(() => {
-            window.location.href = '${basePath}/admin'
-          }, 100)
+  <!-- 添加 Bot 模态框 -->
+  <div class="modal" id="addModal">
+    <div class="modal-content">
+      <h2>添加 Bot 配置</h2>
+      <form id="addForm">
+        <div class="form-group">
+          <label for="configName">配置名称 *</label>
+          <input type="text" id="configName" required placeholder="例如: 主号、小号">
+        </div>
+        <div class="form-group">
+          <label for="protocol">协议</label>
+          <select id="protocol" onchange="toggleEndpoint()">
+            <option value="ws-reverse">反向 WebSocket (ws-reverse)</option>
+            <option value="ws">正向 WebSocket (ws)</option>
+          </select>
+        </div>
+        <div class="form-group" id="endpointGroup" style="display: none;">
+          <label for="endpoint">Endpoint *</label>
+          <input type="text" id="endpoint" placeholder="例如: ws://127.0.0.1:6700">
+        </div>
+        <div class="form-group" id="pathGroup">
+          <label for="path">路径</label>
+          <input type="text" id="path" value="/onebot" placeholder="例如: /onebot">
+        </div>
+        <div class="form-group">
+          <label for="token">Token（可选）</label>
+          <input type="password" id="token" placeholder="访问令牌">
+        </div>
+        <div class="modal-actions">
+          <button type="submit" class="btn">确定</button>
+          <button type="button" class="btn btn-secondary" onclick="hideAddModal()">取消</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <!-- Toast -->
+  <div class="toast" id="toast"></div>
+
+  <script>
+    const API_BASE = '${basePath}/admin/api'
+
+    // 显示视图
+    function showView(viewId) {
+      ['loadingView', 'setupView', 'loginView', 'adminView'].forEach(id => {
+        const el = document.getElementById(id)
+        if (id === viewId) {
+          if (id === 'adminView') {
+            el.classList.add('show')
+            el.style.display = ''
+          } else {
+            el.style.display = ''
+            el.classList.add('show')
+          }
         } else {
-          errorEl.textContent = data.error || '登录失败'
-          errorEl.style.display = 'block'
-          btn.disabled = false
-          btn.textContent = '登录'
+          el.style.display = 'none'
+          el.classList.remove('show')
         }
-      } catch (e) {
-        errorEl.textContent = '网络错误'
-        errorEl.style.display = 'block'
-        btn.disabled = false
-        btn.textContent = '登录'
+      })
+      // 特殊处理 body 对齐
+      if (viewId === 'adminView') {
+        document.body.style.alignItems = 'flex-start'
+      } else {
+        document.body.style.alignItems = 'center'
       }
-    })
-  </script>
-</body>
-</html>`;
-  }
-  renderSetupPage() {
-    const basePath = this.config.basePath || "/status";
-    return `<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>OneBot Multi - 初始设置</title>
-  <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Noto+Sans+SC:wght@400;700;900&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --nl-primary: #fbbf24;
-      --nl-bg: #fffbeb;
-      --nl-surface: #ffffff;
-      --nl-text: #451a03;
-      --nl-border: 3px solid #451a03;
-      --nl-shadow: 4px 4px 0 #451a03;
     }
 
-    * { margin: 0; padding: 0; box-sizing: border-box; }
+    // API 调用 - 使用 token 头部认证（兼容所有浏览器）
+    async function api(endpoint, data = null) {
+      // 从 cookie 或 localStorage 获取 token
+      const cookieToken = document.cookie.match(/ob_admin_token=([^;]+)/)
+      const token = cookieToken ? cookieToken[1] : localStorage.getItem('ob_admin_token')
 
-    body {
-      font-family: 'Noto Sans SC', 'Segoe UI', sans-serif;
-      background-color: var(--nl-bg);
-      background-image:
-        radial-gradient(#fde68a 1px, transparent 1px),
-        radial-gradient(#fde68a 1px, transparent 1px);
-      background-size: 20px 20px;
-      background-position: 0 0, 10px 10px;
-      color: var(--nl-text);
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 2rem;
-    }
+      const headers = { 'Content-Type': 'application/json' }
+      if (token) {
+        headers['X-Admin-Token'] = token
+      }
 
-    .setup-box {
-      background: var(--nl-surface);
-      padding: 3rem;
-      border: var(--nl-border);
-      box-shadow: var(--nl-shadow);
-      border-radius: 16px;
-      max-width: 450px;
-      width: 100%;
-      text-align: center;
+      const options = {
+        method: data ? 'POST' : 'GET',
+        headers,
+        credentials: 'include'
+      }
+      if (data) options.body = JSON.stringify(data)
+      const res = await fetch(API_BASE + endpoint, options)
+      const json = await res.json()
+      if (!res.ok && json.error) throw new Error(json.error)
+      return json
     }
 
-    h1 {
-      font-family: 'Fredoka One', 'Noto Sans SC', cursive;
-      font-size: 1.8rem;
-      margin-bottom: 1rem;
-      text-shadow: 2px 2px 0 #fff;
+    // 保存 token（同时保存到 cookie 和 localStorage）
+    function saveToken(token) {
+      document.cookie = 'ob_admin_token=' + token + '; path=/; max-age=86400'
+      localStorage.setItem('ob_admin_token', token)
     }
 
-    .desc {
-      color: #92400e;
-      margin-bottom: 2rem;
-      font-weight: 600;
+    // 清除 token
+    function clearToken() {
+      document.cookie = 'ob_admin_token=; path=/; max-age=0'
+      localStorage.removeItem('ob_admin_token')
     }
 
-    .form-group {
-      margin-bottom: 1.5rem;
-      text-align: left;
+    // Toast 提示
+    function showToast(message, type = 'success') {
+      const toast = document.getElementById('toast')
+      toast.textContent = message
+      toast.className = 'toast show ' + type
+      setTimeout(() => toast.className = 'toast', 3000)
     }
 
-    label {
-      display: block;
-      font-weight: 700;
-      margin-bottom: 0.5rem;
+    // 初始化
+    async function init() {
+      showView('loadingView')
+      try {
+        const { hasPassword, authenticated } = await api('/auth/check')
+        if (!hasPassword) {
+          showView('setupView')
+        } else if (authenticated) {
+          showView('adminView')
+          refreshBots()
+        } else {
+          showView('loginView')
+        }
+      } catch (e) {
+        showToast('加载失败: ' + e.message, 'error')
+      }
     }
 
-    input[type="password"] {
-      width: 100%;
-      padding: 1rem;
-      border: var(--nl-border);
-      border-radius: 8px;
-      font-size: 1rem;
-      font-family: inherit;
-    }
+    // 设置密码
+    document.getElementById('setupForm').addEventListener('submit', async (e) => {
+      e.preventDefault()
+      const password = document.getElementById('setupPassword').value
+      const confirm = document.getElementById('confirmPassword').value
+      const errorEl = document.getElementById('setupError')
 
-    input[type="password"]:focus {
-      outline: none;
-      box-shadow: 0 0 0 3px #fbbf24;
-    }
+      if (password !== confirm) {
+        errorEl.textContent = '两次密码不一致'
+        errorEl.classList.add('show')
+        return
+      }
 
-    .btn {
-      background: var(--nl-primary);
-      border: var(--nl-border);
-      color: var(--nl-text);
-      padding: 1rem 2rem;
-      border-radius: 12px;
-      cursor: pointer;
-      font-size: 1.1rem;
-      font-weight: 800;
-      box-shadow: var(--nl-shadow);
-      transition: all 0.1s;
-      width: 100%;
-    }
-
-    .btn:hover {
-      transform: translate(-1px, -1px);
-      box-shadow: 5px 5px 0 #451a03;
-    }
-
-    .btn:active {
-      transform: translate(1px, 1px);
-      box-shadow: 2px 2px 0 #451a03;
-    }
-
-    .error {
-      color: #b91c1c;
-      margin-top: 1rem;
-      display: none;
-    }
-  </style>
-</head>
-<body>
-  <div class="setup-box">
-    <h1>🔧 初始设置</h1>
-    <p class="desc">首次使用，请设置管理密码</p>
-    <form id="setupForm">
-      <div class="form-group">
-        <label for="password">设置密码</label>
-        <input type="password" id="password" placeholder="至少4位" required minlength="4">
-      </div>
-      <div class="form-group">
-        <label for="confirmPassword">确认密码</label>
-        <input type="password" id="confirmPassword" placeholder="再次输入密码" required>
-      </div>
-      <button type="submit" class="btn">确认设置</button>
-      <p class="error" id="error"></p>
-    </form>
-  </div>
-
-  <script>
-    document.getElementById('setupForm').addEventListener('submit', async function(e) {
-      e.preventDefault()
-      const password = document.getElementById('password').value
-      const confirmPassword = document.getElementById('confirmPassword').value
-      const errorEl = document.getElementById('error')
-
-      if (password !== confirmPassword) {
-        errorEl.textContent = '两次密码不一致'
-        errorEl.style.display = 'block'
-        return
-      }
-
-      if (password.length < 4) {
-        errorEl.textContent = '密码至少需要4位'
-        errorEl.style.display = 'block'
-        return
-      }
-
-      try {
-        const res = await fetch('${basePath}/admin/api/init-password', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ password }),
-          credentials: 'include'
-        })
-        const data = await res.json()
-        if (data.success) {
-          window.location.href = '${basePath}/admin'
-        } else {
-          errorEl.textContent = data.error || '设置失败'
-          errorEl.style.display = 'block'
-        }
-      } catch (e) {
-        errorEl.textContent = '网络错误'
-        errorEl.style.display = 'block'
-      }
-    })
-  </script>
-</body>
-</html>`;
-  }
-  renderStatusPage() {
-    const basePath = this.config.basePath || "/status";
-    const status = this.statusManager.getStatus();
-    const onlineCount = status.bots.filter((b) => b.status === "online").length;
-    const offlineCount = status.bots.filter((b) => b.status === "offline").length;
-    const totalCount = status.bots.length;
-    const botCardsHtml = status.bots.map((bot) => {
-      const statusText = bot.status === "online" ? "在线" : bot.status === "offline" ? "离线" : "连接中";
-      const displayName = bot.nickname || bot.selfId;
-      const groupCount = bot.groupCount ?? "-";
-      const friendCount = bot.friendCount ?? "-";
-      const messageReceived = bot.messageReceived ?? "-";
-      const messageSent = bot.messageSent ?? "-";
-      const lastMessageTime = bot.lastMessageTime ? new Date(bot.lastMessageTime * 1e3).toLocaleTimeString() : "-";
-      const uptime = bot.startupTime ? this.formatUptime(bot.startupTime) : "-";
-      return `
-        <div class="bot-card">
-          <div class="bot-header">
-            <img class="bot-avatar" src="http://q.qlogo.cn/headimg_dl?dst_uin=${bot.selfId}&spec=640" alt="avatar">
-            <div class="bot-info">
-              <div class="bot-id">${displayName}</div>
-              <div class="bot-protocol">QQ: ${bot.selfId}</div>
-            </div>
-            <span class="status-badge status-${bot.status}">${statusText}</span>
-          </div>
-          <div class="bot-stats">
-            <div class="bot-stat">
-              <span class="bot-stat-label">群聊</span>
-              <span class="bot-stat-value">${groupCount}</span>
-            </div>
-            <div class="bot-stat">
-              <span class="bot-stat-label">好友</span>
-              <span class="bot-stat-value">${friendCount}</span>
-            </div>
-            <div class="bot-stat">
-              <span class="bot-stat-label">收到</span>
-              <span class="bot-stat-value">${messageReceived}</span>
-            </div>
-            <div class="bot-stat">
-              <span class="bot-stat-label">发送</span>
-              <span class="bot-stat-value">${messageSent}</span>
-            </div>
-            <div class="bot-stat">
-              <span class="bot-stat-label">最后消息</span>
-              <span class="bot-stat-value">${lastMessageTime}</span>
-            </div>
-            <div class="bot-stat">
-              <span class="bot-stat-label">运行时间</span>
-              <span class="bot-stat-value">${uptime}</span>
-            </div>
-          </div>
-        </div>`;
-    }).join("");
-    const updatedAtStr = new Date(status.updatedAt).toLocaleString();
-    return `<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>OneBot Multi - 状态面板</title>
-  <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Noto+Sans+SC:wght@400;700;900&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --nl-primary: #fbbf24;
-      --nl-bg: #fffbeb;
-      --nl-surface: #ffffff;
-      --nl-text: #451a03;
-      --nl-border: 3px solid #451a03;
-      --nl-shadow: 4px 4px 0 #451a03;
-
-      --status-online: #32CD32;
-      --status-offline: #FF4500;
-      --status-connecting: #FFA500;
-    }
-
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-
-    body {
-      font-family: 'Noto Sans SC', 'Segoe UI', sans-serif;
-      background-color: var(--nl-bg);
-      background-image:
-        radial-gradient(#fde68a 1px, transparent 1px),
-        radial-gradient(#fde68a 1px, transparent 1px);
-      background-size: 20px 20px;
-      background-position: 0 0, 10px 10px;
-      color: var(--nl-text);
-      min-height: 100vh;
-      padding: 2rem;
-    }
-
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-      background: var(--nl-surface);
-      padding: 2rem;
-      border: var(--nl-border);
-      box-shadow: var(--nl-shadow);
-      border-radius: 16px;
-    }
-
-    h1 {
-      font-family: 'Fredoka One', 'Noto Sans SC', cursive;
-      font-size: 2.5rem;
-      margin-bottom: 2rem;
-      text-align: center;
-      text-shadow: 2px 2px 0 #fff;
-      color: var(--nl-text);
-    }
-
-    .stats {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-      gap: 1.5rem;
-      margin-bottom: 3rem;
-    }
-
-    .stat-card {
-      background: var(--nl-surface);
-      border: var(--nl-border);
-      padding: 1rem;
-      text-align: center;
-      box-shadow: 2px 2px 0 #451a03;
-      transition: transform 0.2s, box-shadow 0.2s;
-      border-radius: 16px;
-    }
-
-    .stat-card:hover {
-      transform: translate(-2px, -2px);
-      box-shadow: 4px 4px 0 #451a03;
-    }
-
-    .stat-value {
-      font-family: 'Fredoka One', sans-serif;
-      font-size: 2.5rem;
-      line-height: 1.2;
-    }
-
-    .stat-label {
-      font-weight: 800;
-      font-size: 14px;
-      color: #92400e;
-    }
-
-    .stat-online .stat-value { color: var(--status-online); }
-    .stat-offline .stat-value { color: var(--status-offline); }
-    .stat-total .stat-value { color: #00BFFF; }
-
-    .bots {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-      gap: 2rem;
-    }
-
-    .bot-card {
-      background: var(--nl-surface);
-      border: var(--nl-border);
-      border-radius: 16px;
-      padding: 1.5rem;
-      position: relative;
-      box-shadow: var(--nl-shadow);
-      transition: all 0.2s ease;
-      overflow: hidden;
-    }
-
-    .bot-card:hover {
-      transform: translate(-2px, -2px);
-      box-shadow: 6px 6px 0 #451a03;
-    }
-
-    .bot-header {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-      margin-bottom: 1.5rem;
-    }
-
-    .bot-avatar {
-      width: 64px;
-      height: 64px;
-      border: var(--nl-border);
-      border-radius: 50%;
-      background: #fff;
-    }
-
-    .bot-info { flex: 1; }
-
-    .bot-id {
-      font-weight: 900;
-      font-size: 1.2rem;
-      color: var(--nl-text);
-    }
-
-    .bot-protocol {
-      color: #92400e;
-      font-size: 0.9rem;
-      font-weight: 700;
-      background: #fffbeb;
-      display: inline-block;
-      padding: 2px 6px;
-      border: 2px solid #451a03;
-      border-radius: 6px;
-      margin-top: 4px;
-    }
-
-    .status-badge {
-      padding: 0.4rem 0.8rem;
-      border: 2px solid #451a03;
-      border-radius: 20px;
-      font-size: 0.8rem;
-      font-weight: 900;
-    }
-
-    .status-online { background: #dcfce7; border-color: #10b981; color: #15803d; }
-    .status-offline { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }
-    .status-connecting { background: #ffedd5; border-color: #f97316; color: #c2410c; }
-
-    .bot-stats {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 10px;
-      background: #fff7ed;
-      padding: 1rem;
-      border: 2px solid #451a03;
-      border-radius: 12px;
-    }
-
-    .bot-stat {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-    }
-
-    .bot-stat-label {
-      font-size: 0.75rem;
-      font-weight: 800;
-      color: #92400e;
-    }
-
-    .bot-stat-value {
-      font-weight: 700;
-      font-size: 1rem;
-      color: var(--nl-text);
-    }
-
-    .footer {
-      margin-top: 3rem;
-      text-align: center;
-      font-weight: 700;
-      color: #92400e;
-      padding: 0.5rem;
-      width: 100%;
-    }
-
-    .refresh-btn {
-      position: fixed;
-      bottom: 2rem;
-      right: 2rem;
-      background: var(--nl-primary);
-      border: var(--nl-border);
-      color: var(--nl-text);
-      padding: 1rem 2rem;
-      border-radius: 12px;
-      cursor: pointer;
-      font-size: 1.1rem;
-      font-weight: 800;
-      box-shadow: var(--nl-shadow);
-      transition: all 0.1s;
-      z-index: 100;
-    }
-
-    .refresh-btn:hover {
-      transform: translate(-1px, -1px);
-      box-shadow: 5px 5px 0 #451a03;
-    }
-
-    .refresh-btn:active {
-      transform: translate(1px, 1px);
-      box-shadow: 2px 2px 0 #451a03;
-    }
-
-    @media (max-width: 768px) {
-      body { padding: 1rem; }
-      .container { padding: 1rem; }
-      .stats { grid-template-columns: 1fr; }
-      .bot-card { margin-bottom: 1rem; }
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1 ondblclick="window.location='${basePath}/admin'" style="cursor: default;" title="双击进入管理">OneBot Multi 状态面板</h1>
-
-    <div class="stats">
-      <div class="stat-card stat-online">
-        <div class="stat-value">${onlineCount}</div>
-        <div class="stat-label">在线</div>
-      </div>
-      <div class="stat-card stat-offline">
-        <div class="stat-value">${offlineCount}</div>
-        <div class="stat-label">离线</div>
-      </div>
-      <div class="stat-card stat-total">
-        <div class="stat-value">${totalCount}</div>
-        <div class="stat-label">总计</div>
-      </div>
-    </div>
-
-    <div class="bots">
-      ${botCardsHtml}
-    </div>
-
-    <div class="footer">
-      更新时间: ${updatedAtStr}
-    </div>
-  </div>
-
-  <button class="refresh-btn" onclick="location.reload()">刷新 ⚡</button>
-
-  <script>
-    // 自动刷新
-    setTimeout(() => location.reload(), 30000)
-  </script>
-</body>
-</html>`;
-  }
-  renderAdminPage() {
-    const basePath = this.config.basePath || "/status";
-    return `<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>OneBot Multi - 管理面板</title>
-  <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Noto+Sans+SC:wght@400;700;900&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --nl-primary: #fbbf24;
-      --nl-bg: #fffbeb;
-      --nl-surface: #ffffff;
-      --nl-text: #451a03;
-      --nl-border: 3px solid #451a03;
-      --nl-shadow: 4px 4px 0 #451a03;
-
-      --status-online: #32CD32;
-      --status-offline: #FF4500;
-      --status-connecting: #FFA500;
-    }
-
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-
-    body {
-      font-family: 'Noto Sans SC', 'Segoe UI', sans-serif;
-      background-color: var(--nl-bg);
-      background-image:
-        radial-gradient(#fde68a 1px, transparent 1px),
-        radial-gradient(#fde68a 1px, transparent 1px);
-      background-size: 20px 20px;
-      background-position: 0 0, 10px 10px;
-      color: var(--nl-text);
-      min-height: 100vh;
-      padding: 2rem;
-    }
-
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-      background: var(--nl-surface);
-      padding: 2rem;
-      border: var(--nl-border);
-      box-shadow: var(--nl-shadow);
-      border-radius: 16px;
-    }
-
-    h1 {
-      font-family: 'Fredoka One', 'Noto Sans SC', cursive;
-      font-size: 2.5rem;
-      margin-bottom: 2rem;
-      text-align: center;
-      text-shadow: 2px 2px 0 #fff;
-      color: var(--nl-text);
-    }
-
-    .toolbar {
-      display: flex;
-      gap: 1rem;
-      margin-bottom: 2rem;
-      flex-wrap: wrap;
-    }
-
-    .btn {
-      background: var(--nl-primary);
-      border: var(--nl-border);
-      color: var(--nl-text);
-      padding: 0.8rem 1.5rem;
-      border-radius: 12px;
-      cursor: pointer;
-      font-size: 1rem;
-      font-weight: 800;
-      box-shadow: 3px 3px 0 #451a03;
-      transition: all 0.1s;
-      text-decoration: none;
-    }
-
-    .btn:hover {
-      transform: translate(-1px, -1px);
-      box-shadow: 4px 4px 0 #451a03;
-    }
-
-    .btn:active {
-      transform: translate(1px, 1px);
-      box-shadow: 2px 2px 0 #451a03;
-    }
-
-    .btn-danger {
-      background: #fee2e2;
-    }
-
-    .btn-success {
-      background: #dcfce7;
-    }
-
-    .btn-secondary {
-      background: #f3f4f6;
-    }
-
-    .bots {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
-      gap: 2rem;
-    }
-
-    .bot-card {
-      background: var(--nl-surface);
-      border: var(--nl-border);
-      border-radius: 16px;
-      padding: 1.5rem;
-      position: relative;
-      box-shadow: var(--nl-shadow);
-      transition: all 0.2s ease;
-      overflow: hidden;
-    }
-
-    .bot-card.disabled {
-      opacity: 0.6;
-    }
-
-    .bot-card:hover {
-      transform: translate(-2px, -2px);
-      box-shadow: 6px 6px 0 #451a03;
-    }
-
-    .bot-header {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-      margin-bottom: 1rem;
-    }
-
-    .bot-avatar {
-      width: 64px;
-      height: 64px;
-      border: var(--nl-border);
-      border-radius: 50%;
-      background: #fff;
-    }
-
-    .bot-info { flex: 1; }
-
-    .bot-id {
-      font-weight: 900;
-      font-size: 1.2rem;
-      color: var(--nl-text);
-    }
-
-    .bot-protocol {
-      color: #92400e;
-      font-size: 0.9rem;
-      font-weight: 700;
-      background: #fffbeb;
-      display: inline-block;
-      padding: 2px 6px;
-      border: 2px solid #451a03;
-      border-radius: 6px;
-      margin-top: 4px;
-    }
-
-    .status-badge {
-      padding: 0.4rem 0.8rem;
-      border: 2px solid #451a03;
-      border-radius: 20px;
-      font-size: 0.8rem;
-      font-weight: 900;
-    }
-
-    .status-online { background: #dcfce7; border-color: #10b981; color: #15803d; }
-    .status-offline { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }
-    .status-connecting { background: #ffedd5; border-color: #f97316; color: #c2410c; }
-
-    .bot-stats {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 10px;
-      background: #fff7ed;
-      padding: 1rem;
-      border: 2px solid #451a03;
-      border-radius: 12px;
-      margin-bottom: 1rem;
-    }
-
-    .bot-stat {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-    }
-
-    .bot-stat-label {
-      font-size: 0.75rem;
-      font-weight: 800;
-      color: #92400e;
-    }
-
-    .bot-stat-value {
-      font-weight: 700;
-      font-size: 1rem;
-      color: var(--nl-text);
-    }
-
-    .bot-actions {
-      display: flex;
-      gap: 0.5rem;
-      flex-wrap: wrap;
-    }
-
-    .bot-actions .btn {
-      padding: 0.5rem 1rem;
-      font-size: 0.85rem;
-    }
-
-    /* Modal */
-    .modal {
-      display: none;
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0,0,0,0.5);
-      z-index: 1000;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .modal.active {
-      display: flex;
-    }
-
-    .modal-content {
-      background: var(--nl-surface);
-      border: var(--nl-border);
-      box-shadow: var(--nl-shadow);
-      border-radius: 16px;
-      padding: 2rem;
-      max-width: 500px;
-      width: 90%;
-    }
-
-    .modal h2 {
-      font-family: 'Fredoka One', cursive;
-      margin-bottom: 1.5rem;
-    }
-
-    .form-group {
-      margin-bottom: 1rem;
-    }
-
-    .form-group label {
-      display: block;
-      font-weight: 700;
-      margin-bottom: 0.5rem;
-    }
-
-    .form-group input, .form-group select {
-      width: 100%;
-      padding: 0.8rem;
-      border: var(--nl-border);
-      border-radius: 8px;
-      font-size: 1rem;
-      font-family: inherit;
-    }
-
-    .form-group input:focus, .form-group select:focus {
-      outline: none;
-      box-shadow: 0 0 0 3px #fbbf24;
-    }
-
-    .modal-actions {
-      display: flex;
-      gap: 1rem;
-      margin-top: 1.5rem;
-    }
-
-    .footer {
-      margin-top: 3rem;
-      text-align: center;
-      font-weight: 700;
-      color: #92400e;
-    }
-
-    .toast {
-      position: fixed;
-      bottom: 2rem;
-      left: 50%;
-      transform: translateX(-50%);
-      background: var(--nl-surface);
-      border: var(--nl-border);
-      box-shadow: var(--nl-shadow);
-      padding: 1rem 2rem;
-      border-radius: 12px;
-      font-weight: 700;
-      z-index: 2000;
-      display: none;
-    }
-
-    .toast.show {
-      display: block;
-    }
-
-    .toast.error {
-      background: #fee2e2;
-    }
-
-    .toast.success {
-      background: #dcfce7;
-    }
-
-    .empty-state {
-      text-align: center;
-      padding: 3rem;
-      color: #92400e;
-    }
-
-    .empty-state h3 {
-      font-size: 1.5rem;
-      margin-bottom: 1rem;
-    }
-
-    @media (max-width: 768px) {
-      body { padding: 1rem; }
-      .container { padding: 1rem; }
-      .bots { grid-template-columns: 1fr; }
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>🛠️ OneBot Multi 管理面板</h1>
-
-    <div class="toolbar">
-      <button class="btn" onclick="showAddModal()">➕ 添加 Bot</button>
-      <button class="btn btn-secondary" onclick="refreshList()">🔄 刷新</button>
-      <a href="${basePath}" class="btn btn-secondary">📊 状态面板</a>
-    </div>
-
-    <div class="bots" id="botList">
-      <div class="empty-state">
-        <h3>加载中...</h3>
-      </div>
-    </div>
-
-    <div class="footer">
-      OneBot Multi 管理面板
-    </div>
-  </div>
-
-  <!-- Add Modal -->
-  <div class="modal" id="addModal">
-    <div class="modal-content">
-      <h2>添加 Bot</h2>
-      <form id="addForm">
-        <div class="form-group">
-          <label for="selfId">QQ 号 *</label>
-          <input type="text" id="selfId" required placeholder="例如: 123456789">
-        </div>
-        <div class="form-group">
-          <label for="protocol">协议</label>
-          <select id="protocol" onchange="toggleEndpoint()">
-            <option value="ws-reverse">反向 WebSocket (ws-reverse)</option>
-            <option value="ws">正向 WebSocket (ws)</option>
-          </select>
-        </div>
-        <div class="form-group" id="endpointGroup" style="display: none;">
-          <label for="endpoint">Endpoint *</label>
-          <input type="text" id="endpoint" placeholder="例如: ws://127.0.0.1:6700">
-        </div>
-        <div class="form-group" id="pathGroup">
-          <label for="path">路径</label>
-          <input type="text" id="path" value="/onebot" placeholder="例如: /onebot">
-        </div>
-        <div class="form-group">
-          <label for="token">Token（可选）</label>
-          <input type="password" id="token" placeholder="访问令牌">
-        </div>
-        <div class="modal-actions">
-          <button type="submit" class="btn">确定</button>
-          <button type="button" class="btn btn-secondary" onclick="hideAddModal()">取消</button>
-        </div>
-      </form>
-    </div>
-  </div>
-
-  <!-- Toast -->
-  <div class="toast" id="toast"></div>
+      try {
+        document.getElementById('setupBtn').disabled = true
+        const result = await api('/auth/setup', { password })
+        if (result.token) {
+          saveToken(result.token)
+        }
+        showView('adminView')
+        refreshBots()
+      } catch (e) {
+        errorEl.textContent = e.message
+        errorEl.classList.add('show')
+      } finally {
+        document.getElementById('setupBtn').disabled = false
+      }
+    })
 
-  <script>
-    const BASE_PATH = '${basePath}/admin'
+    // 登录
+    document.getElementById('loginForm').addEventListener('submit', async (e) => {
+      e.preventDefault()
+      console.log('登录表单提交')
+      const password = document.getElementById('loginPassword').value
+      const errorEl = document.getElementById('loginError')
 
-    async function apiCall(endpoint, data = null) {
-      const options = {
-        method: data ? 'POST' : 'GET',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        credentials: 'include'
-      }
-      if (data) {
-        options.body = JSON.stringify(data)
-      }
-      const res = await fetch(BASE_PATH + endpoint, options)
-      if (res.status === 401) {
-        // 认证失败，重定向到登录页
-        window.location.href = '${basePath}/admin'
-        throw new Error('认证失败')
+      try {
+        document.getElementById('loginBtn').disabled = true
+        console.log('调用登录 API...')
+        const result = await api('/auth/login', { password })
+        console.log('登录结果:', result)
+        // 保存 token（cookie + localStorage 双保险）
+        if (result.token) {
+          saveToken(result.token)
+          console.log('已保存 token')
+        }
+        console.log('切换到管理面板...')
+        showView('adminView')
+        console.log('刷新 Bot 列表...')
+        refreshBots()
+      } catch (e) {
+        console.error('登录失败:', e)
+        errorEl.textContent = e.message
+        errorEl.classList.add('show')
+      } finally {
+        document.getElementById('loginBtn').disabled = false
       }
-      return res.json()
-    }
-
-    function showToast(message, type = 'success') {
-      const toast = document.getElementById('toast')
-      toast.textContent = message
-      toast.className = 'toast show ' + type
-      setTimeout(() => toast.className = 'toast', 3000)
-    }
+    })
 
-    function formatUptime(startTime) {
-      const diff = Math.floor(Date.now() / 1000 - startTime)
-      const hours = Math.floor(diff / 3600)
-      const minutes = Math.floor((diff % 3600) / 60)
-      if (hours > 0) return hours + 'h ' + minutes + 'm'
-      return minutes + 'm'
+    // 登出
+    async function logout() {
+      await api('/auth/logout', {})
+      clearToken()
+      showView('loginView')
     }
 
-    async function refreshList() {
+    // 刷新 Bot 列表
+    async function refreshBots() {
       try {
-        const data = await apiCall('/api/list')
-        if (data.error) {
-          showToast('加载失败: ' + data.error, 'error')
-          return
-        }
-        renderBots(data.bots || [])
+        const { bots } = await api('/bots')
+        renderBots(bots || [])
       } catch (e) {
-        console.error('refreshList error:', e)
-        showToast('加载失败: ' + e.message, 'error')
+        if (e.message === '未授权访问') {
+          showView('loginView')
+        } else {
+          showToast('加载失败: ' + e.message, 'error')
+        }
       }
     }
 
+    // 渲染 Bot 列表
     function renderBots(bots) {
       const container = document.getElementById('botList')
       if (bots.length === 0) {
-        container.innerHTML = '<div class="empty-state"><h3>暂无 Bot</h3><p>点击"添加 Bot"按钮创建</p></div>'
+        container.innerHTML = '<div class="empty-state"><h3>暂无 Bot 配置</h3><p>点击"添加 Bot"按钮创建</p></div>'
         return
       }
 
       container.innerHTML = bots.map(bot => {
         const statusText = bot.status === 'online' ? '在线' : bot.status === 'offline' ? '离线' : '连接中'
-        const displayName = bot.nickname || bot.selfId
+        const displayName = bot.nickname || bot.name || '未连接'
+        const selfIdDisplay = bot.selfId ? ('QQ: ' + bot.selfId) : '等待连接...'
         const uptime = bot.startupTime ? formatUptime(bot.startupTime) : '-'
-        const disabledClass = !bot.enabled ? 'disabled' : ''
+        const lastMsg = bot.lastMessageTime ? new Date(bot.lastMessageTime * 1000).toLocaleTimeString() : '-'
+        const avatarUrl = bot.selfId ? ('http://q.qlogo.cn/headimg_dl?dst_uin=' + bot.selfId + '&spec=640') : ''
 
-        return '<div class="bot-card ' + disabledClass + '">' +
+        return '<div class="bot-card' + (!bot.enabled ? ' disabled' : '') + '">' +
           '<div class="bot-header">' +
-            '<img class="bot-avatar" src="http://q.qlogo.cn/headimg_dl?dst_uin=' + bot.selfId + '&spec=640" alt="avatar">' +
+            (avatarUrl ? '<img class="bot-avatar" src="' + avatarUrl + '" alt="avatar">' : '<div class="bot-avatar" style="background:#ddd;display:flex;align-items:center;justify-content:center;font-size:24px;">?</div>') +
             '<div class="bot-info">' +
               '<div class="bot-id">' + displayName + '</div>' +
-              '<div class="bot-protocol">' + bot.protocol.toUpperCase() + ' | QQ: ' + bot.selfId + '</div>' +
+              '<div class="bot-protocol">' + (bot.protocol || 'WS-REVERSE').toUpperCase() + ' | ' + selfIdDisplay + '</div>' +
             '</div>' +
             '<span class="status-badge status-' + bot.status + '">' + statusText + '</span>' +
           '</div>' +
           '<div class="bot-stats">' +
+            '<div class="bot-stat"><span class="bot-stat-label">配置名</span><span class="bot-stat-value">' + bot.name + '</span></div>' +
+            '<div class="bot-stat"><span class="bot-stat-label">连接</span><span class="bot-stat-value">' + (bot.endpoint || bot.path || '-') + '</span></div>' +
             '<div class="bot-stat"><span class="bot-stat-label">群聊</span><span class="bot-stat-value">' + (bot.groupCount ?? '-') + '</span></div>' +
             '<div class="bot-stat"><span class="bot-stat-label">好友</span><span class="bot-stat-value">' + (bot.friendCount ?? '-') + '</span></div>' +
             '<div class="bot-stat"><span class="bot-stat-label">收到</span><span class="bot-stat-value">' + (bot.messageReceived ?? '-') + '</span></div>' +
             '<div class="bot-stat"><span class="bot-stat-label">发送</span><span class="bot-stat-value">' + (bot.messageSent ?? '-') + '</span></div>' +
-            '<div class="bot-stat"><span class="bot-stat-label">连接</span><span class="bot-stat-value">' + (bot.endpoint || bot.path || '-') + '</span></div>' +
-            '<div class="bot-stat"><span class="bot-stat-label">运行时间</span><span class="bot-stat-value">' + uptime + '</span></div>' +
           '</div>' +
           '<div class="bot-actions">' +
-            '<button class="btn btn-secondary" onclick="toggleBot('' + bot.selfId + '')">' + (bot.enabled ? '禁用' : '启用') + '</button>' +
-            '<button class="btn btn-secondary" onclick="restartBot('' + bot.selfId + '')">重启</button>' +
-            '<button class="btn btn-danger" onclick="deleteBot('' + bot.selfId + '')">删除</button>' +
+            '<button class="btn btn-secondary" onclick="toggleBot(' + bot.id + ')">' + (bot.enabled ? '禁用' : '启用') + '</button>' +
+            '<button class="btn btn-secondary" onclick="restartBot(' + bot.id + ')">重启</button>' +
+            '<button class="btn btn-danger" onclick="deleteBot(' + bot.id + ', \\'' + bot.name + '\\')">删除</button>' +
           '</div>' +
         '</div>'
       }).join('')
     }
 
+    function formatUptime(startTime) {
+      const diff = Math.floor(Date.now() / 1000 - startTime)
+      const hours = Math.floor(diff / 3600)
+      const minutes = Math.floor((diff % 3600) / 60)
+      if (hours > 0) return hours + 'h ' + minutes + 'm'
+      return minutes + 'm'
+    }
+
+    // Bot 操作（使用配置 ID）
+    async function toggleBot(id) {
+      try {
+        const result = await api('/bots/toggle', { id })
+        showToast(result.enabled ? '配置已启用' : '配置已禁用')
+        refreshBots()
+      } catch (e) {
+        showToast('操作失败: ' + e.message, 'error')
+      }
+    }
+
+    async function restartBot(id) {
+      try {
+        await api('/bots/restart', { id })
+        showToast('Bot 正在重启')
+        setTimeout(refreshBots, 1000)
+      } catch (e) {
+        showToast('重启失败: ' + e.message, 'error')
+      }
+    }
+
+    async function deleteBot(id, name) {
+      if (!confirm('确定要删除配置 "' + name + '" 吗？')) return
+      try {
+        await api('/bots/delete', { id })
+        showToast('配置已删除')
+        refreshBots()
+      } catch (e) {
+        showToast('删除失败: ' + e.message, 'error')
+      }
+    }
+
+    // 添加 Bot 模态框
     function showAddModal() {
       document.getElementById('addModal').classList.add('active')
       document.getElementById('addForm').reset()
@@ -2827,7 +2173,7 @@ var StatusPanel = class {
     document.getElementById('addForm').addEventListener('submit', async (e) => {
       e.preventDefault()
       const data = {
-        selfId: document.getElementById('selfId').value,
+        name: document.getElementById('configName').value,
         protocol: document.getElementById('protocol').value,
         endpoint: document.getElementById('endpoint').value || undefined,
         path: document.getElementById('path').value || undefined,
@@ -2835,55 +2181,213 @@ var StatusPanel = class {
       }
 
       try {
-        const result = await apiCall('/api/create', data)
-        if (result.error) throw new Error(result.error)
-        showToast('Bot 添加成功')
+        await api('/bots/create', data)
+        showToast('配置添加成功')
         hideAddModal()
-        refreshList()
+        refreshBots()
       } catch (e) {
         showToast('添加失败: ' + e.message, 'error')
       }
     })
 
-    async function toggleBot(selfId) {
-      try {
-        const result = await apiCall('/api/toggle', { selfId })
-        if (result.error) throw new Error(result.error)
-        showToast(result.enabled ? 'Bot 已启用' : 'Bot 已禁用')
-        refreshList()
-      } catch (e) {
-        showToast('操作失败: ' + e.message, 'error')
+    // 自动刷新
+    setInterval(() => {
+      if (document.getElementById('adminView').classList.contains('show')) {
+        refreshBots()
       }
-    }
+    }, 30000)
 
-    async function restartBot(selfId) {
-      try {
-        const result = await apiCall('/api/restart', { selfId })
-        if (result.error) throw new Error(result.error)
-        showToast('Bot 正在重启')
-        setTimeout(refreshList, 1000)
-      } catch (e) {
-        showToast('重启失败: ' + e.message, 'error')
-      }
+    // 启动
+    init()
+  </script>
+</body>
+</html>`;
+  }
+  renderStatusPage() {
+    const basePath = this.config.basePath || "/status";
+    const status = this.statusManager.getStatus();
+    const onlineCount = status.bots.filter((b) => b.status === "online").length;
+    const offlineCount = status.bots.filter((b) => b.status === "offline").length;
+    const totalCount = status.bots.length;
+    const botCardsHtml = status.bots.map((bot) => {
+      const statusText = bot.status === "online" ? "在线" : bot.status === "offline" ? "离线" : "连接中";
+      const displayName = bot.nickname || bot.selfId;
+      const groupCount = bot.groupCount ?? "-";
+      const friendCount = bot.friendCount ?? "-";
+      const messageReceived = bot.messageReceived ?? "-";
+      const messageSent = bot.messageSent ?? "-";
+      const lastMessageTime = bot.lastMessageTime ? new Date(bot.lastMessageTime * 1e3).toLocaleTimeString() : "-";
+      const uptime = bot.startupTime ? this.formatUptime(bot.startupTime) : "-";
+      return `
+        <div class="bot-card">
+          <div class="bot-header">
+            <img class="bot-avatar" src="http://q.qlogo.cn/headimg_dl?dst_uin=${bot.selfId}&spec=640" alt="avatar">
+            <div class="bot-info">
+              <div class="bot-id">${displayName}</div>
+              <div class="bot-protocol">QQ: ${bot.selfId}</div>
+            </div>
+            <span class="status-badge status-${bot.status}">${statusText}</span>
+          </div>
+          <div class="bot-stats">
+            <div class="bot-stat"><span class="bot-stat-label">群聊</span><span class="bot-stat-value">${groupCount}</span></div>
+            <div class="bot-stat"><span class="bot-stat-label">好友</span><span class="bot-stat-value">${friendCount}</span></div>
+            <div class="bot-stat"><span class="bot-stat-label">收到</span><span class="bot-stat-value">${messageReceived}</span></div>
+            <div class="bot-stat"><span class="bot-stat-label">发送</span><span class="bot-stat-value">${messageSent}</span></div>
+            <div class="bot-stat"><span class="bot-stat-label">最后消息</span><span class="bot-stat-value">${lastMessageTime}</span></div>
+            <div class="bot-stat"><span class="bot-stat-label">运行时间</span><span class="bot-stat-value">${uptime}</span></div>
+          </div>
+        </div>`;
+    }).join("");
+    const updatedAtStr = new Date(status.updatedAt).toLocaleString();
+    return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OneBot Multi - 状态面板</title>
+  <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Noto+Sans+SC:wght@400;700;900&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --nl-primary: #fbbf24;
+      --nl-bg: #fffbeb;
+      --nl-surface: #ffffff;
+      --nl-text: #451a03;
+      --nl-border: 3px solid #451a03;
+      --nl-shadow: 4px 4px 0 #451a03;
+      --status-online: #32CD32;
+      --status-offline: #FF4500;
+      --status-connecting: #FFA500;
     }
-
-    async function deleteBot(selfId) {
-      if (!confirm('确定要删除 Bot ' + selfId + ' 吗？')) return
-      try {
-        const result = await apiCall('/api/delete', { selfId })
-        if (result.error) throw new Error(result.error)
-        showToast('Bot 已删除')
-        refreshList()
-      } catch (e) {
-        showToast('删除失败: ' + e.message, 'error')
-      }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: 'Noto Sans SC', 'Segoe UI', sans-serif;
+      background-color: var(--nl-bg);
+      background-image: radial-gradient(#fde68a 1px, transparent 1px), radial-gradient(#fde68a 1px, transparent 1px);
+      background-size: 20px 20px;
+      background-position: 0 0, 10px 10px;
+      color: var(--nl-text);
+      min-height: 100vh;
+      padding: 2rem;
     }
-
-    // 初始加载
-    refreshList()
-    // 自动刷新
-    setInterval(refreshList, 30000)
-  </script>
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      background: var(--nl-surface);
+      padding: 2rem;
+      border: var(--nl-border);
+      box-shadow: var(--nl-shadow);
+      border-radius: 16px;
+    }
+    h1 {
+      font-family: 'Fredoka One', 'Noto Sans SC', cursive;
+      font-size: 2.5rem;
+      margin-bottom: 2rem;
+      text-align: center;
+      text-shadow: 2px 2px 0 #fff;
+    }
+    .stats {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 1.5rem;
+      margin-bottom: 3rem;
+    }
+    .stat-card {
+      background: var(--nl-surface);
+      border: var(--nl-border);
+      padding: 1rem;
+      text-align: center;
+      box-shadow: 2px 2px 0 #451a03;
+      transition: transform 0.2s, box-shadow 0.2s;
+      border-radius: 16px;
+    }
+    .stat-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #451a03; }
+    .stat-value { font-family: 'Fredoka One', sans-serif; font-size: 2.5rem; line-height: 1.2; }
+    .stat-label { font-weight: 800; font-size: 14px; color: #92400e; }
+    .stat-online .stat-value { color: var(--status-online); }
+    .stat-offline .stat-value { color: var(--status-offline); }
+    .stat-total .stat-value { color: #00BFFF; }
+    .bots { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; }
+    .bot-card {
+      background: var(--nl-surface);
+      border: var(--nl-border);
+      border-radius: 16px;
+      padding: 1.5rem;
+      box-shadow: var(--nl-shadow);
+      transition: all 0.2s ease;
+    }
+    .bot-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #451a03; }
+    .bot-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
+    .bot-avatar { width: 64px; height: 64px; border: var(--nl-border); border-radius: 50%; background: #fff; }
+    .bot-info { flex: 1; }
+    .bot-id { font-weight: 900; font-size: 1.2rem; }
+    .bot-protocol { color: #92400e; font-size: 0.9rem; font-weight: 700; background: #fffbeb; display: inline-block; padding: 2px 6px; border: 2px solid #451a03; border-radius: 6px; margin-top: 4px; }
+    .status-badge { padding: 0.4rem 0.8rem; border: 2px solid #451a03; border-radius: 20px; font-size: 0.8rem; font-weight: 900; }
+    .status-online { background: #dcfce7; border-color: #10b981; color: #15803d; }
+    .status-offline { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }
+    .status-connecting { background: #ffedd5; border-color: #f97316; color: #c2410c; }
+    .bot-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #fff7ed; padding: 1rem; border: 2px solid #451a03; border-radius: 12px; }
+    .bot-stat { display: flex; flex-direction: column; }
+    .bot-stat-label { font-size: 0.75rem; font-weight: 800; color: #92400e; }
+    .bot-stat-value { font-weight: 700; font-size: 1rem; }
+    .footer { margin-top: 3rem; text-align: center; font-weight: 700; color: #92400e; }
+    .refresh-btn {
+      position: fixed;
+      bottom: 2rem;
+      right: 2rem;
+      background: var(--nl-primary);
+      border: var(--nl-border);
+      color: var(--nl-text);
+      padding: 1rem 2rem;
+      border-radius: 12px;
+      cursor: pointer;
+      font-size: 1.1rem;
+      font-weight: 800;
+      box-shadow: var(--nl-shadow);
+      transition: all 0.1s;
+      z-index: 100;
+    }
+    .refresh-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #451a03; }
+    .refresh-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #451a03; }
+    .admin-btn {
+      position: fixed;
+      bottom: 2rem;
+      right: 9rem;
+      background: #f3f4f6;
+      border: var(--nl-border);
+      color: var(--nl-text);
+      padding: 1rem 2rem;
+      border-radius: 12px;
+      cursor: pointer;
+      font-size: 1.1rem;
+      font-weight: 800;
+      box-shadow: var(--nl-shadow);
+      transition: all 0.1s;
+      z-index: 100;
+      text-decoration: none;
+    }
+    .admin-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #451a03; }
+    .admin-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #451a03; }
+    @media (max-width: 768px) {
+      body { padding: 1rem; }
+      .container { padding: 1rem; }
+      .stats { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1 ondblclick="window.location='${basePath}/admin'" style="cursor: default;" title="双击进入管理">OneBot Multi 状态面板</h1>
+    <div class="stats">
+      <div class="stat-card stat-online"><div class="stat-value">${onlineCount}</div><div class="stat-label">在线</div></div>
+      <div class="stat-card stat-offline"><div class="stat-value">${offlineCount}</div><div class="stat-label">离线</div></div>
+      <div class="stat-card stat-total"><div class="stat-value">${totalCount}</div><div class="stat-label">总计</div></div>
+    </div>
+    <div class="bots">${botCardsHtml}</div>
+    <div class="footer">更新时间: ${updatedAtStr}</div>
+  </div>
+  <a href="${basePath}/admin" class="admin-btn">管理 🛠️</a>
+  <button class="refresh-btn" onclick="location.reload()">刷新 ⚡</button>
+  <script>setTimeout(() => location.reload(), 30000)</script>
 </body>
 </html>`;
   }
@@ -2898,7 +2402,7 @@ var StatusPanel = class {
 
 // src/config-manager.ts
 var import_crypto2 = require("crypto");
-var SYSTEM_CONFIG_ID = "_system_";
+var SYSTEM_CONFIG_NAME = "_system_";
 function generateSalt() {
   return (0, import_crypto2.randomBytes)(16).toString("hex");
 }
@@ -2924,18 +2428,20 @@ var ConfigManager = class {
     this.ctx = ctx;
     ctx.model.extend("onebot_multi_bots", {
       id: "unsigned",
-      selfId: "string",
-      token: "string",
+      name: "string",
+      // 配置名称/别名
+      selfId: { type: "string", nullable: true },
+      // 连接成功后自动填充，可为空
+      token: { type: "string", nullable: true },
       protocol: "string",
-      endpoint: "string",
-      path: "string",
+      endpoint: { type: "string", nullable: true },
+      path: { type: "string", nullable: true },
       enabled: "boolean",
       createdAt: "timestamp",
       updatedAt: "timestamp"
     }, {
       autoInc: true,
-      primary: "id",
-      unique: [["selfId"]]
+      primary: "id"
     });
   }
   static {
@@ -2946,7 +2452,7 @@ var ConfigManager = class {
    * 获取存储的密码哈希
    */
   async getStoredPasswordHash() {
-    const results = await this.ctx.database.get("onebot_multi_bots", { selfId: SYSTEM_CONFIG_ID });
+    const results = await this.ctx.database.get("onebot_multi_bots", { name: SYSTEM_CONFIG_NAME });
     return results[0]?.token || null;
   }
   /**
@@ -2954,12 +2460,12 @@ var ConfigManager = class {
    */
   async setAdminPassword(password) {
     const hashedPassword = createPasswordHash(password);
-    const existing = await this.ctx.database.get("onebot_multi_bots", { selfId: SYSTEM_CONFIG_ID });
+    const existing = await this.ctx.database.get("onebot_multi_bots", { name: SYSTEM_CONFIG_NAME });
     if (existing.length > 0) {
-      await this.ctx.database.set("onebot_multi_bots", { selfId: SYSTEM_CONFIG_ID }, { token: hashedPassword, updatedAt: /* @__PURE__ */ new Date() });
+      await this.ctx.database.set("onebot_multi_bots", { name: SYSTEM_CONFIG_NAME }, { token: hashedPassword, updatedAt: /* @__PURE__ */ new Date() });
     } else {
       await this.ctx.database.create("onebot_multi_bots", {
-        selfId: SYSTEM_CONFIG_ID,
+        name: SYSTEM_CONFIG_NAME,
         token: hashedPassword,
         protocol: "ws-reverse",
         enabled: false,
@@ -2996,65 +2502,82 @@ var ConfigManager = class {
    */
   async getAllConfigs() {
     const all = await this.ctx.database.get("onebot_multi_bots", {});
-    return all.filter((r) => r.selfId !== SYSTEM_CONFIG_ID);
+    return all.filter((r) => r.name !== SYSTEM_CONFIG_NAME);
   }
   /**
    * 获取启用的 Bot 配置（排除系统配置）
    */
   async getEnabledConfigs() {
     const all = await this.ctx.database.get("onebot_multi_bots", { enabled: true });
-    return all.filter((r) => r.selfId !== SYSTEM_CONFIG_ID);
+    return all.filter((r) => r.name !== SYSTEM_CONFIG_NAME);
   }
   /**
-   * 获取单个 Bot 配置
+   * 根据 ID 获取单个 Bot 配置
    */
-  async getConfig(selfId) {
-    const results = await this.ctx.database.get("onebot_multi_bots", { selfId });
+  async getConfigById(id) {
+    const results = await this.ctx.database.get("onebot_multi_bots", { id });
     return results[0];
   }
+  /**
+   * 根据 selfId 获取配置（用于关联运行时 Bot）
+   */
+  async getConfigBySelfId(selfId) {
+    const results = await this.ctx.database.get("onebot_multi_bots", { selfId });
+    const filtered = results.filter((r) => r.name !== SYSTEM_CONFIG_NAME);
+    return filtered[0];
+  }
   /**
    * 创建 Bot 配置
    */
   async createConfig(config) {
     const now = /* @__PURE__ */ new Date();
+    const { selfId, ...rest } = config;
     const record = await this.ctx.database.create("onebot_multi_bots", {
-      ...config,
+      ...rest,
       createdAt: now,
       updatedAt: now
     });
     return record;
   }
   /**
-   * 更新 Bot 配置
+   * 更新 Bot 配置（根据 ID）
    */
-  async updateConfig(selfId, updates) {
-    const result = await this.ctx.database.set("onebot_multi_bots", { selfId }, {
+  async updateConfigById(id, updates) {
+    const result = await this.ctx.database.set("onebot_multi_bots", { id }, {
       ...updates,
       updatedAt: /* @__PURE__ */ new Date()
     });
     return result.modified > 0;
   }
   /**
-   * 删除 Bot 配置
+   * 删除 Bot 配置（根据 ID）
    */
-  async deleteConfig(selfId) {
-    const result = await this.ctx.database.remove("onebot_multi_bots", { selfId });
+  async deleteConfigById(id) {
+    const result = await this.ctx.database.remove("onebot_multi_bots", { id });
     return result.removed > 0;
   }
   /**
    * 切换 Bot 启用状态
    */
-  async toggleEnabled(selfId) {
-    const config = await this.getConfig(selfId);
+  async toggleEnabled(id) {
+    const config = await this.getConfigById(id);
     if (!config) return false;
-    return this.updateConfig(selfId, { enabled: !config.enabled });
+    return this.updateConfigById(id, { enabled: !config.enabled });
+  }
+  /**
+   * 更新配置的 selfId（Bot 连接成功后调用）
+   */
+  async updateSelfId(id, selfId) {
+    return this.updateConfigById(id, { selfId });
   }
   /**
-   * 将数据库配置转换为 BotConfig 格式
+   * 将数据库配置转换为 BotConfig 格式（用于启动 Bot）
    */
   toBotConfig(record) {
     return {
-      selfId: record.selfId,
+      configId: record.id,
+      selfId: record.selfId || `pending_${record.id}`,
+      // 临时 ID，连接后会更新
       token: record.token,
       protocol: record.protocol,
       endpoint: record.endpoint,
@@ -3087,7 +2610,8 @@ var Config = import_koishi11.Schema.intersect([
 ]);
 var name = "adapter-onebot-multi";
 var inject = {
-  required: ["server", "database"]
+  required: ["server", "database"],
+  optional: ["console"]
 };
 function apply(ctx, config) {
   const logger = ctx.logger("adapter-onebot-multi");
@@ -3105,6 +2629,25 @@ function apply(ctx, config) {
   if (config.panel?.enabled) {
     new StatusPanel(ctx, config.panel, statusManager, configManager);
   }
+  ctx.inject(["console"], (ctx2) => {
+    ctx2.console.addEntry({
+      dev: (0, import_path.resolve)(__dirname, "../client/index.ts"),
+      prod: (0, import_path.resolve)(__dirname, "../dist")
+    });
+    ctx2.console.addListener("onebot-multi/config", () => {
+      return {
+        basePath: config.panel?.basePath || "/status",
+        enabled: config.panel?.enabled || false
+      };
+    });
+  });
+  ctx.on("onebot-multi/bot-online", async (bot) => {
+    const configId = bot.config.configId;
+    if (configId && bot.selfId) {
+      await configManager.updateSelfId(configId, bot.selfId);
+      logger.info(`Bot 配置 #${configId} 已关联 QQ: ${bot.selfId}`);
+    }
+  });
   const startBots = /* @__PURE__ */ __name(async () => {
     const dbConfigs = await configManager.getEnabledConfigs();
     if (dbConfigs.length > 0) {
@@ -3131,12 +2674,12 @@ function startBot(ctx, botConfig, globalConfig, logger) {
   };
   if (protocol === "ws") {
     if (!botConfig.endpoint) {
-      logger.warn(`Bot ${botConfig.selfId} 使用 ws 协议但未配置 endpoint，跳过`);
+      logger.warn(`配置 #${botConfig.configId} 使用 ws 协议但未配置 endpoint，跳过`);
       return;
     }
-    logger.info(`创建 Bot: ${botConfig.selfId} (ws → ${botConfig.endpoint})`);
+    logger.info(`启动配置 #${botConfig.configId} (ws → ${botConfig.endpoint})`);
   } else {
-    logger.info(`创建 Bot: ${botConfig.selfId} (ws-reverse ← ${botConfig.path || "/onebot"})`);
+    logger.info(`启动配置 #${botConfig.configId} (ws-reverse ← ${botConfig.path || "/onebot"})`);
   }
   ctx.plugin(OneBotBot, fullConfig);
 }