npm - @honor-claw/yoyo - Versions diffs - 1.2.1-beta.2 → 1.2.1-beta.3 - Mend

@honor-claw/yoyo 1.2.1-beta.2 → 1.2.1-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/package.json +1 -1
package/src/honor-auth/auth-result-html.ts +218 -28
package/src/honor-auth/callback-server.ts +111 -46
package/src/vite-env.d.ts +1 -0

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@honor-claw/yoyo",
-  "version": "1.2.1-beta.2",
+  "version": "1.2.1-beta.3",
   "description": "OpenClaw Honor Yoyo connection plugin",
   "keywords": [
     "ai",

package/src/honor-auth/auth-result-html.ts CHANGED Viewed

@@ -1,51 +1,241 @@
-export const AUTH_RESULT_HTML = `<!doctype html>
+const SUCCESS_ICON_SVG = `<svg aria-hidden="true" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="32" cy="32" r="30" fill="currentColor" opacity="0.12"/><circle cx="32" cy="32" r="21" fill="currentColor"/><path d="M22.5 32.5L29 39L42.5 25.5" stroke="white" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+const FAILURE_ICON_SVG = `<svg aria-hidden="true" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="32" cy="32" r="30" fill="currentColor" opacity="0.12"/><circle cx="32" cy="32" r="21" fill="currentColor"/><path d="M24.5 24.5L39.5 39.5M39.5 24.5L24.5 39.5" stroke="white" stroke-width="4.5" stroke-linecap="round"/></svg>`;
+export interface PageDetailItem {
+  key: string;
+  value: string;
+}
+export interface ResultPageOptions {
+  pageTitle: string;
+  statusClass: "success" | "error";
+  title: string;
+  hintText: string;
+  details?: PageDetailItem[];
+}
+function escapeHtml(input: string): string {
+  return input
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+function buildDetailsHtml(details?: PageDetailItem[]): string {
+  if (!details || details.length === 0) {
+    return "";
+  }
+  const detailRows = details
+    .map((item) => {
+      return `<div class="detail-item"><span class="detail-key">${escapeHtml(item.key)}</span><span class="detail-value">${escapeHtml(item.value)}</span></div>`;
+    })
+    .join("");
+  return `<div class="details">${detailRows}</div>`;
+}
+export function getResultHtml(options: ResultPageOptions): string {
+  const icon = options.statusClass === "success" ? SUCCESS_ICON_SVG : FAILURE_ICON_SVG;
+  return `<!doctype html>
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>授权结果</title>
+    <title>${escapeHtml(options.pageTitle)}</title>
     <style>
+      :root {
+        color-scheme: light;
+        --surface: rgba(255, 255, 255, 0.94);
+        --text: #172033;
+        --muted: #667085;
+        --faint: #98a2b3;
+        --border: rgba(23, 32, 51, 0.1);
+        --shadow: 0 22px 70px rgba(31, 41, 55, 0.14);
+        --success: #168255;
+        --error: #d14343;
+        --accent: #2563eb;
+      }
+      * {
+        box-sizing: border-box;
+      }
       body {
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        padding: 24px;
         font-family:
-          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-        background-color: #f0f2f5;
+          "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+        color: var(--text);
+        background:
+          linear-gradient(135deg, rgba(37, 99, 235, 0.09), transparent 34%),
+          linear-gradient(315deg, rgba(22, 130, 85, 0.12), transparent 38%),
+          #f6f8fb;
+      }
+      .card {
+        width: min(100%, 480px);
+        padding: 24px;
+        border-radius: 18px;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        box-shadow: var(--shadow);
+        backdrop-filter: blur(10px);
+        text-align: center;
+      }
+      .brand {
         display: flex;
-        justify-content: center;
         align-items: center;
-        height: 100vh;
+        justify-content: center;
+        gap: 9px;
+        margin-bottom: 24px;
+        color: var(--text);
+        font-size: 15px;
+        font-weight: 700;
+      }
+      .brand-logo {
+        width: 26px;
+        height: 26px;
+        display: block;
+        border-radius: 8px;
+      }
+      .icon-wrap {
+        width: 96px;
+        height: 96px;
+        margin: 0 auto 20px;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        background: transparent;
+      }
+      .icon-wrap.success {
+        color: var(--success);
+        filter: drop-shadow(0 16px 28px rgba(22, 130, 85, 0.18));
+      }
+      .icon-wrap.error {
+        color: var(--error);
+        filter: drop-shadow(0 16px 28px rgba(209, 67, 67, 0.18));
+      }
+      .icon-wrap svg {
+        display: block;
+        width: 78px;
+        height: 78px;
+      }
+      h1 {
         margin: 0;
-        color: #333;
+        font-size: 26px;
+        line-height: 1.2;
+        font-weight: 700;
       }
-      .container {
-        text-align: center;
-        background-color: #ffffff;
-        padding: 48px 40px;
+      .details {
+        margin: 18px 0 0;
+        padding: 0;
         border-radius: 16px;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
-        max-width: 380px;
-        width: 90%;
+        background: rgba(255, 255, 255, 0.72);
+        border: 1px solid rgba(29, 36, 51, 0.07);
+        overflow: hidden;
+        text-align: left;
       }
-      .icon {
-        margin-bottom: 24px;
+      .detail-item {
+        display: grid;
+        grid-template-columns: 64px minmax(0, 1fr);
+        gap: 10px;
+        padding: 12px 14px;
+        font-size: 13px;
+        line-height: 1.5;
       }
-      h1 {
-        font-size: 20px;
-        font-weight: 600;
-        margin: 0 0 12px;
-        color: #1a1a1a;
+      .detail-item + .detail-item {
+        border-top: 1px solid rgba(29, 36, 51, 0.07);
+      }
+      .detail-key {
+        color: #7a808d;
       }
+      .detail-value {
+        color: var(--text);
+        word-break: break-word;
+      }
+      .footer {
+        margin-top: 22px;
+        padding-top: 16px;
+        border-top: 1px solid rgba(29, 36, 51, 0.08);
+      }
       .hint {
-        font-size: 14px;
-        color: #999;
         margin: 0;
+        font-size: 14px;
+        color: var(--muted);
+        line-height: 1.6;
+      }
+      .caption {
+        margin: 8px 0 0;
+        color: var(--faint);
+        font-size: 12px;
+        line-height: 1.5;
+      }
+      @media (max-width: 480px) {
+        body {
+          padding: 16px;
+        }
+        .card {
+          padding: 22px 18px 18px;
+          border-radius: 16px;
+        }
+        .brand {
+          margin-bottom: 22px;
+        }
+        h1 {
+          font-size: 23px;
+        }
+        .icon-wrap {
+          width: 84px;
+          height: 84px;
+        }
+        .icon-wrap svg {
+          width: 70px;
+          height: 70px;
+        }
       }
     </style>
   </head>
   <body>
-    <div class="container">
-      <div class="icon">{{ICON_SVG}}</div>
-      <h1>{{MESSAGE}}</h1>
-      <p class="hint">可安全关闭此页面</p>
-    </div>
+    <main class="card">
+      <div class="brand">
+        <span>YOYOClaw</span>
+      </div>
+      <div class="icon-wrap ${options.statusClass}">${icon}</div>
+      <h1>${escapeHtml(options.title)}</h1>
+      ${buildDetailsHtml(options.details)}
+      <div class="footer">
+        <p class="hint">${escapeHtml(options.hintText)}</p>
+        <p class="caption">浏览器不会自动关闭当前页面，保留或稍后关闭都不影响登录结果。</p>
+      </div>
+    </main>
   </body>
 </html>`;
+}

package/src/honor-auth/callback-server.ts CHANGED Viewed

@@ -3,8 +3,8 @@
  */
 import { createServer, type IncomingMessage, type ServerResponse } from "http";
-import { URL } from "url";
-import { AUTH_RESULT_HTML } from "./auth-result-html.js";
+import { URL } from "node:url";
+import { getResultHtml } from "./auth-result-html.js";
 /**
  * 回调服务器选项
@@ -20,15 +20,6 @@ export interface CallbackServerOptions {
   onError?: (error: Error) => void;
 }
-const SUCCESS_ICON_SVG = `<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28C0 43.464 12.536 56 28 56Z" fill="#28a745"/><path d="M39.6667 20.3333L24.5 35.5L16.3333 27.3333" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
-const FAILURE_ICON_SVG = `<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28C0 43.464 12.536 56 28 56Z" fill="#dc3545"/><path d="M35 21L21 35M21 21L35 35" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
-function getResultHtml(message: string, success: boolean): string {
-  const icon = success ? SUCCESS_ICON_SVG : FAILURE_ICON_SVG;
-  return AUTH_RESULT_HTML.replace("{{ICON_SVG}}", icon).replace("{{MESSAGE}}", message);
-}
 /**
  * 启动本地回调服务器
  */
@@ -40,74 +31,148 @@ export function startCallbackServer(options: CallbackServerOptions): Promise<voi
     let hasReceivedCode = false;
     let promiseResolved = false;
+    const closeServer = () => {
+      if (serverClosed) {
+        return;
+      }
+      serverClosed = true;
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      server.close();
+    };
+    const failAuthorization = (error: Error) => {
+      closeServer();
+      onError?.(error);
+      if (!promiseResolved) {
+        promiseResolved = true;
+        reject(error);
+      }
+    };
+    const closeServerSoon = (delayMs = 120) => {
+      setTimeout(() => {
+        closeServer();
+      }, delayMs);
+    };
     const server = createServer((req: IncomingMessage, res: ServerResponse) => {
       try {
         const url = new URL(req.url || "", `http://localhost:${port}`);
+        if (req.method !== "GET") {
+          res.writeHead(405, { "Content-Type": "text/html; charset=utf-8" });
+          res.end(
+            getResultHtml({
+              pageTitle: "请求方式不支持",
+              statusClass: "error",
+              title: "不支持的请求方式",
+              hintText: "请返回 OpenClaw 重新发起登录。",
+            }),
+          );
+          return;
+        }
         const code = url.searchParams.get("code") || "";
+        const oauthError = url.searchParams.get("error") || "";
+        const oauthErrorDescription =
+          url.searchParams.get("error_description") || url.searchParams.get("error_message") || "";
         if (code && !hasReceivedCode) {
           hasReceivedCode = true;
           // 返回成功响应
           res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
-          res.end(getResultHtml("授权成功", true));
+          res.end(
+            getResultHtml({
+              pageTitle: "授权成功",
+              statusClass: "success",
+              title: "登录已完成",
+              hintText: "请返回 OpenClaw，登录流程会继续完成。",
+            }),
+          );
           // 延迟关闭服务器，确保响应已发送
-          setTimeout(() => {
-            if (!serverClosed) {
-              serverClosed = true;
-              if (timeoutId) {
-                clearTimeout(timeoutId);
-              }
-              server.close();
-            }
-          }, 100);
+          closeServerSoon();
           // 调用回调
           onCodeReceived(code);
+        } else if (oauthError && !hasReceivedCode) {
+          res.writeHead(400, { "Content-Type": "text/html; charset=utf-8" });
+          res.end(
+            getResultHtml({
+              pageTitle: "授权失败",
+              statusClass: "error",
+              title: "未能完成授权",
+              hintText: "请返回 OpenClaw 重新发起登录。",
+              details: [
+                { key: "错误码", value: oauthError },
+                ...(oauthErrorDescription ? [{ key: "说明", value: oauthErrorDescription }] : []),
+              ],
+            }),
+          );
+          setTimeout(() => {
+            failAuthorization(
+              new Error(
+                oauthErrorDescription
+                  ? `authorization failed: ${oauthError} (${oauthErrorDescription})`
+                  : `authorization failed: ${oauthError}`,
+              ),
+            );
+          }, 120);
         } else if (!hasReceivedCode) {
-          // 返回错误响应
+          // 未拿到授权码时，直接提示并结束，避免一直等待到超时。
           res.writeHead(400, { "Content-Type": "text/html; charset=utf-8" });
-          res.end(getResultHtml("授权失败：未获取到授权码", false));
+          res.end(
+            getResultHtml({
+              pageTitle: "授权失败",
+              statusClass: "error",
+              title: "回调参数不完整",
+              hintText: "请返回 OpenClaw 重新发起登录。",
+            }),
+          );
+          setTimeout(() => {
+            failAuthorization(new Error("authorization failed: no code in callback"));
+          }, 120);
         } else {
           // 重复请求，返回成功响应但不处理
           res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
-          res.end(getResultHtml("授权成功", true));
+          res.end(
+            getResultHtml({
+              pageTitle: "登录已完成",
+              statusClass: "success",
+              title: "授权已经处理完成",
+              hintText: "请返回 OpenClaw，登录流程会继续完成。",
+            }),
+          );
         }
       } catch (error) {
         console.error("authorize callback error:", error);
         res.writeHead(500, { "Content-Type": "text/html; charset=utf-8" });
-        res.end(getResultHtml("授权失败：服务器内部错误", false));
+        res.end(
+          getResultHtml({
+            pageTitle: "服务异常",
+            statusClass: "error",
+            title: "回调服务出现异常",
+            hintText: "请返回 OpenClaw 后重新发起登录。",
+          }),
+        );
+        setTimeout(() => {
+          failAuthorization(new Error("authorization failed: callback server internal error"));
+        }, 120);
       }
     });
     server.on("error", (error) => {
-      if (!serverClosed) {
-        serverClosed = true;
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-        onError?.(error);
-        if (!promiseResolved) {
-          promiseResolved = true;
-          reject(error);
-        }
-      }
+      failAuthorization(error);
     });
     server.listen(port, () => {
       // 设置超时
       timeoutId = setTimeout(() => {
-        if (!serverClosed) {
-          serverClosed = true;
-          server.close();
-          const error = new Error("authorize timeout");
-          onError?.(error);
-          if (!promiseResolved) {
-            promiseResolved = true;
-            reject(error);
-          }
-        }
+        failAuthorization(new Error("authorize timeout"));
       }, timeout);
     });

package/src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="vite/client" />