koishi-plugin-kkk 1.0.0

package/lib/ktr/template/other/handlerError/components/handlerError.js

@@ -0,0 +1,392 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handlerError = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const date_fns_1 = require("date-fns");
+const locale_1 = require("date-fns/locale");
+const lucide_react_1 = require("lucide-react");
+const md_1 = require("react-icons/md");
+const DefaultLayout_1 = require("../../../components/DefaultLayout");
+const QRcode_1 = require("../../../../utils/QRcode");
+const theme_1 = require("../../../../utils/theme");
+const errorTitles_1 = require("./errorTitles");
+const stackHighlight_1 = require("./stackHighlight");
+/**
+ * 取「最后一次 `node_modules/` 之后的那一段」——包名，供调用栈的归属判定使用。
+ *
+ * 不能只看帧的路径里有没有 `node_modules`：发布后插件**自己**就装在 `node_modules` 里，
+ * 帧形如 `…/node_modules/.pnpm/koishi-plugin-kkk@…/node_modules/koishi-plugin-kkk/lib/core_chunk/main.js:…`，
+ * `node_modules` 出现两次 —— 只看文本特征会把每一帧都当成依赖压暗，整块图失去分层。
+ * 所以改问「这一帧和本模块是不是同一个包」：模块自身的位置就是包根的答案，两边各取包名比对即可。
+ * 源码树（开发态）里取不到包名，返回 `undefined`，此时凡进了 `node_modules` 的帧一律算外部帧。
+ *
+ * 只做字符串切分，**不做 URL→路径转换**：模板在 ktr dev 的 iframe 沙箱里由浏览器求值，
+ * `import.meta.url` 是 `http://localhost:5174/@fs/D:/…`，生产 bundle 里是 `file:///…`，
+ * 折算成文件系统路径要同时处理协议、主机、`/@fs` 与前导斜杠四种差异，漏一样就会把所有帧
+ * 都判成外部帧、整块压暗；而这两种形态都原样带着 `node_modules` 这一段，直接切更稳。
+ * 也**不能**为图省事引入 `node:*` 内置模块：模板会被 vite 当浏览器代码打包，`node:url`
+ * 这类会被 externalize 成空壳，模块求值期直接抛错，整个判定失效。
+ * @param input - 模块 URL 或帧里的路径原文
+ * @returns 包名，形如 `koishi-plugin-kkk`；不在 `node_modules` 里时返回 `undefined`
+ */
+const packageSegmentOf = (input) => {
+    const path = input.replace(/\\/g, '/');
+    const marker = '/node_modules/';
+    const at = path.lastIndexOf(marker);
+    if (at < 0)
+        return undefined;
+    return path.slice(at + marker.length).split('/')[0];
+};
+/**
+ * 本模块所在的包名；开发态跑源码树时为 `undefined`。
+ *
+ * Koishi 移植：上游用 `import.meta.url`（模板在 ktr dev 的浏览器沙箱里求值）。
+ * 我们的产物是 CJS，`import.meta` 会让 Node 把整个文件当 ESM（报 "exports is not defined"），
+ * 因此改用 `__filename` 拼一个 file:// URL —— 这里只做字符串切分找 `node_modules`，语义一致。
+ */
+const selfModuleUrl = typeof __filename === 'string' ? 'file:///' + __filename.replace(/\\/g, '/') : '';
+const selfPackageSegment = packageSegmentOf(selfModuleUrl);
+/**
+ * 判断一个调用帧的位置是否属于本插件自己的代码。
+ * @param location - 帧里的位置原文，形如 `路径:行:列` 或 `node:internal/…`
+ * @returns 是否属于本插件自己的代码
+ */
+const isOwnFrameLocation = (location) => {
+    const path = location.replace(/\\/g, '/');
+    // node 内部帧没有包名可言，直接算外部帧（与 stackHighlight 的兜底判定同款）
+    if (/^node:|\(node:/.test(path))
+        return false;
+    // 没进 node_modules 的帧就是源码树里的自己（开发态）
+    if (!path.includes('/node_modules/'))
+        return true;
+    // 进了 node_modules：只有和本模块同属一个包才算自己的代码
+    return packageSegmentOf(path) === selfPackageSegment;
+};
+/**
+ * ANSI 颜色代码映射
+ */
+const ansiColorMap = {
+    30: 'text-foreground',
+    31: 'text-danger',
+    32: 'text-success',
+    33: 'text-warning',
+    34: 'text-accent',
+    35: 'text-accent',
+    36: 'text-cyan-600',
+    37: 'text-muted',
+    90: 'text-foreground/70',
+    91: 'text-danger',
+    92: 'text-success',
+    93: 'text-warning',
+    94: 'text-accent',
+    95: 'text-accent',
+    96: 'text-muted',
+    97: 'text-background/80'
+};
+const ansi256ToColor = (colorCode) => {
+    const standardColors = [
+        '#000000',
+        '#800000',
+        '#008000',
+        '#808000',
+        '#000080',
+        '#800080',
+        '#008080',
+        '#c0c0c0',
+        '#808080',
+        '#ff0000',
+        '#00ff00',
+        '#ffff00',
+        '#0000ff',
+        '#ff00ff',
+        '#00ffff',
+        '#ffffff'
+    ];
+    if (colorCode < 16)
+        return standardColors[colorCode];
+    if (colorCode < 232) {
+        const index = colorCode - 16;
+        const r = Math.floor(index / 36), g = Math.floor((index % 36) / 6), b = index % 6;
+        const toHex = (v) => (v === 0 ? 0 : 55 + v * 40).toString(16).padStart(2, '0');
+        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+    }
+    const gray = (colorCode - 232) * 10 + 8;
+    const hex = gray.toString(16).padStart(2, '0');
+    return `#${hex}${hex}${hex}`;
+};
+const convertAnsiToHtml = (text) => {
+    // 完全避免在正则字面量中出现任何转义
+    const ESC = String.fromCharCode(27);
+    const ansiRegex = new RegExp(ESC + '\\[([0-9;]+)m', 'g');
+    let result = '', lastIndex = 0;
+    let currentStyles = { classes: [] };
+    let match;
+    const escapeHtml = (str) => str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
+    const formatLogContent = (content) => escapeHtml(content).replace(/([\u3400-\u9fff\uf900-\ufaff\u3000-\u303f\uff00-\uffef]+)/g, '<span class="font-[HarmonyOSHans-Regular]">$1</span>');
+    const makeSpan = (content) => {
+        const hasClass = currentStyles.classes.length > 0, hasInline = currentStyles.inlineColor;
+        if (!hasClass && !hasInline)
+            return formatLogContent(content);
+        const classAttr = hasClass ? ` class="${currentStyles.classes.join(' ')}"` : '';
+        const styleAttr = hasInline ? ` style="color: ${currentStyles.inlineColor}"` : '';
+        return `<span${classAttr}${styleAttr}>${formatLogContent(content)}</span>`;
+    };
+    while ((match = ansiRegex.exec(text)) !== null) {
+        if (match.index > lastIndex)
+            result += makeSpan(text.substring(lastIndex, match.index));
+        const codes = match[1].split(';').map(Number);
+        let i = 0;
+        while (i < codes.length) {
+            const code = codes[i];
+            if (code === 90 && codes[i + 1] === 2) {
+                currentStyles.classes = currentStyles.classes.filter((c) => !c.startsWith('text-'));
+                currentStyles.inlineColor = undefined;
+                currentStyles.classes.push('text-muted');
+                i++;
+            }
+            else if (code === 0 || code === 39 || code === 49) {
+                currentStyles.classes = currentStyles.classes.filter((c) => !c.startsWith('text-') && !c.startsWith('bg-') && !c.startsWith('dark:'));
+                currentStyles.inlineColor = undefined;
+            }
+            else if (code === 1) {
+                if (!currentStyles.classes.includes('font-bold'))
+                    currentStyles.classes.push('font-bold');
+            }
+            else if (code === 22) {
+                currentStyles.classes = currentStyles.classes.filter((c) => c !== 'font-bold');
+            }
+            else if (code === 38 && codes[i + 1] === 5) {
+                const colorCode = codes[i + 2];
+                if (colorCode !== undefined) {
+                    currentStyles.classes = currentStyles.classes.filter((c) => !c.startsWith('text-') && !c.startsWith('dark:'));
+                    currentStyles.inlineColor = ansi256ToColor(colorCode);
+                    i += 2;
+                }
+            }
+            else if (ansiColorMap[code]) {
+                currentStyles.classes = currentStyles.classes.filter((c) => !c.startsWith('text-') && !c.startsWith('dark:'));
+                currentStyles.inlineColor = undefined;
+                currentStyles.classes.push(ansiColorMap[code]);
+            }
+            i++;
+        }
+        lastIndex = ansiRegex.lastIndex;
+    }
+    if (lastIndex < text.length)
+        result += makeSpan(text.substring(lastIndex));
+    return result;
+};
+/** 把请求 URL 拆成「主体」与「查询参数名」两截：签名 URL 动辄上千字符，全印没法看 */
+const splitRequestUrl = (raw) => {
+    try {
+        const u = new URL(raw);
+        const names = [...u.searchParams.keys()];
+        return { head: `${u.origin}${u.pathname}`, names, queryLength: u.search.length };
+    }
+    catch {
+        return { head: raw, names: [], queryLength: 0 };
+    }
+};
+/** trace 里 reason 的中文名 */
+const TRACE_REASON_LABELS = {
+    initial: '首次',
+    retry: '重试',
+    page: '翻页',
+    segment: '分段',
+    prepare: '前置'
+};
+const getLogLevelTheme = (level, dark) => {
+    const themeMap = {
+        TRAC: {
+            bgClass: dark ? 'bg-muted/10' : 'bg-muted/5',
+            borderClass: 'border-muted/20',
+            textClass: 'text-muted',
+            iconClass: 'text-muted',
+            levelClass: dark ? 'text-muted/10' : 'text-muted/10',
+            dotClass: 'bg-muted/40'
+        },
+        DEBU: {
+            bgClass: dark ? 'bg-cyan-400/10' : 'bg-cyan-500/5',
+            borderClass: dark ? 'border-cyan-400/20' : 'border-cyan-500/20',
+            textClass: dark ? 'text-cyan-400' : 'text-cyan-600',
+            iconClass: dark ? 'text-cyan-400' : 'text-cyan-600',
+            levelClass: dark ? 'text-cyan-400/10' : 'text-cyan-600/10',
+            dotClass: dark ? 'bg-cyan-400/40' : 'bg-cyan-500/40'
+        },
+        MARK: {
+            bgClass: dark ? 'bg-muted/10' : 'bg-muted/5',
+            borderClass: 'border-muted/20',
+            textClass: 'text-muted',
+            iconClass: 'text-muted',
+            levelClass: dark ? 'text-muted/10' : 'text-muted/10',
+            dotClass: 'bg-muted/40'
+        },
+        INFO: {
+            bgClass: 'bg-success-soft',
+            borderClass: 'border-success/25',
+            textClass: 'text-success',
+            iconClass: 'text-success',
+            levelClass: dark ? 'text-success/10' : 'text-success/10',
+            dotClass: 'bg-success/40'
+        },
+        WARN: {
+            bgClass: 'bg-warning-soft',
+            borderClass: 'border-warning/25',
+            textClass: 'text-warning',
+            iconClass: 'text-warning',
+            levelClass: dark ? 'text-warning/10' : 'text-warning-soft',
+            dotClass: 'bg-warning/40'
+        },
+        ERRO: {
+            bgClass: 'bg-danger-soft',
+            borderClass: 'border-danger/25',
+            textClass: 'text-danger',
+            iconClass: 'text-danger',
+            levelClass: dark ? 'text-danger/10' : 'text-danger/10',
+            dotClass: 'bg-danger/40'
+        },
+        FATA: {
+            bgClass: dark ? 'bg-pink-400/10' : 'bg-pink-500/5',
+            borderClass: dark ? 'border-pink-400/25' : 'border-pink-500/25',
+            textClass: dark ? 'text-pink-400' : 'text-pink-500',
+            iconClass: dark ? 'text-pink-400' : 'text-pink-500',
+            levelClass: dark ? 'text-pink-400/10' : 'text-pink-500/10',
+            dotClass: dark ? 'bg-pink-400/40' : 'bg-pink-500/40'
+        }
+    };
+    return themeMap[level] || themeMap['TRAC'];
+};
+const ADAPTER_LOGO_MAP = {
+    napcat: '/image/other/handlerError/napcat.webp',
+    lagrange: '/image/other/handlerError/lagrange.webp',
+    chronocat: '/image/other/handlerError/chronocat.svg',
+    llonebot: '/image/other/handlerError/llonebot.webp',
+    lltwobot: '/image/other/handlerError/llonebot.webp',
+    conwechat: '/image/other/handlerError/conwechat.webp',
+    gocq: '/image/other/handlerError/gocq-http.webp'
+};
+const getAdapterLogo = (adapterName) => {
+    const nameLower = adapterName.toLowerCase();
+    for (const [key, logoPath] of Object.entries(ADAPTER_LOGO_MAP)) {
+        if (nameLower.includes(key))
+            return (0, jsx_runtime_1.jsx)("img", { src: logoPath, className: "h-20 w-auto", alt: adapterName });
+    }
+    return (0, jsx_runtime_1.jsx)(lucide_react_1.Puzzle, { size: 64, className: "text-danger/80" });
+};
+/**
+ * amagi 12 个错误大类的中文名与「该怎么办」。
+ *
+ * 印 `kind` 本身对看图的人没用 —— 有用的是它指向哪一类处置：改配置、等一会儿、
+ * 还是提 issue。所以每一类都带一句处置提示。
+ */
+/** 未知 kind 的兜底（表里找不到时用它，避免整张错误卡片渲染失败） */
+const FALLBACK_KIND_META = { zh: '接口错误', hint: '接口没有返回预期数据，可能是登录凭证过期或被风控拦截。' };
+const ERROR_KIND_META = {
+    validation: { zh: '参数校验', hint: '调用参数不合法，通常是插件自身的问题' },
+    auth: { zh: '身份失效', hint: 'Cookie 缺失或已过期，重新扫码登录即可' },
+    rate_limit: { zh: '触发限流', hint: '请求太频繁，等一会儿再试' },
+    risk: { zh: '命中风控', hint: '平台要求人机验证，或需要换一个账号的 Cookie' },
+    not_found: { zh: '内容不存在', hint: '作品可能已删除、被设为私密或仅粉丝可见' },
+    forbidden: { zh: '无权访问', hint: '当前账号看不到这份内容（付费 / 地区 / 权限）' },
+    unavailable: { zh: '服务不可用', hint: '平台侧临时故障，稍后重试' },
+    network: { zh: '网络错误', hint: '检查代理配置与出口网络' },
+    timeout: { zh: '请求超时', hint: '调大 amagi.timeout，或检查代理链路' },
+    parse: { zh: '响应解析失败', hint: '平台改了协议，或返回的是反爬页面' },
+    internal: { zh: 'amagi 内部错误', hint: '解析库内部异常，建议反馈' },
+    unknown: { zh: '未分类错误', hint: '平台返回了未被识别的错误码' }
+};
+/** 诊断区的一格：小标签 + 大值，值缺失时整格不渲染 */
+const DetailCell = ({ icon, label, value, color, valueColor }) => {
+    if (value === undefined || value === null || value === '')
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 opacity-70", children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "text-xl font-semibold tracking-[0.12em]", style: { color }, children: label })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-3xl font-bold font-mono break-all", style: { color: valueColor }, children: value })] }));
+};
+const SectionTitle = ({ icon, en, zh, color }) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-5 mb-6", children: [icon, (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col leading-tight", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xl font-semibold tracking-[0.2em] uppercase", style: { color }, children: en }), (0, jsx_runtime_1.jsx)("span", { className: "text-base font-medium tracking-[0.08em] opacity-80", style: { color }, children: zh })] })] }));
+/**
+ * API错误显示组件 - 手机端 Apple 风格
+ */
+const handlerError = (props) => {
+    const { data } = props;
+    const dark = (0, theme_1.isDark)(props.ctx);
+    const isBusinessError = data.type === 'business_error';
+    const businessError = isBusinessError ? data.error : null;
+    const displayMethod = businessError?.businessName || data.method;
+    // 高亮方式看文本本身有没有 ANSI，而不是看错误来源：amagi 与非 amagi 现在都只印
+    // 纯文本调用帧，走结构上色；只有调用方显式覆盖进来的 util.inspect 转储仍走 ANSI 那条。
+    // 归属判定必须由本包给出：插件发布后自己就装在 node_modules 里，只看路径特征会把
+    // 每一帧都当成依赖压暗（构建产物整块图失去分层）。
+    const stackText = String(businessError?.stack || data.error?.stack || '');
+    const stackHtml = stackText.includes(String.fromCharCode(27))
+        ? convertAnsiToHtml(stackText)
+        : (0, stackHighlight_1.highlightStack)(stackText, dark, { isOwnFrame: isOwnFrameLocation });
+    // 631 配色 - 红/珊瑚色系
+    const bgColor = dark ? '#0f0a0a' : '#faf5f5';
+    const primaryColor = dark ? '#f87171' : '#dc2626';
+    const secondaryColor = dark ? '#fca5a5' : '#b91c1c';
+    const mutedColor = dark ? 'rgba(248,113,113,0.7)' : '#991b1b';
+    const accentColor = dark ? '#fecaca' : '#7f1d1d';
+    return ((0, jsx_runtime_1.jsxs)(DefaultLayout_1.DefaultLayout, { ...props, 
+        // version={undefined}
+        className: "relative overflow-hidden", style: { backgroundColor: bgColor, width: '1440px', minHeight: '1800px' }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 pointer-events-none", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute rounded-full w-300 h-350 -top-75 -left-50 blur-[120px] -rotate-15", style: {
+                            background: dark
+                                ? 'radial-gradient(ellipse at 40% 40%, rgba(220,38,38,0.35) 0%, rgba(185,28,28,0.18) 50%, transparent 100%)'
+                                : 'radial-gradient(ellipse at 40% 40%, rgba(248,113,113,0.45) 0%, rgba(252,165,165,0.22) 50%, transparent 100%)'
+                        } }), (0, jsx_runtime_1.jsx)("div", { className: "absolute rounded-full w-225 h-250 top-100 -right-25 blur-[100px] rotate-20", style: {
+                            background: dark
+                                ? 'radial-gradient(ellipse at 50% 50%, rgba(127,29,29,0.3) 0%, rgba(69,10,10,0.15) 50%, transparent 100%)'
+                                : 'radial-gradient(ellipse at 50% 50%, rgba(254,202,202,0.4) 0%, rgba(254,226,226,0.2) 50%, transparent 100%)'
+                        } }), (0, jsx_runtime_1.jsx)("div", { className: "absolute rounded-full w-250 h-200 -bottom-50 left-50 blur-[140px] -rotate-10", style: {
+                            background: dark
+                                ? 'radial-gradient(ellipse at 50% 60%, rgba(153,27,27,0.3) 0%, rgba(127,29,29,0.15) 50%, transparent 100%)'
+                                : 'radial-gradient(ellipse at 50% 60%, rgba(252,165,165,0.35) 0%, rgba(254,202,202,0.18) 50%, transparent 100%)'
+                        } })] }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 pointer-events-none", style: { opacity: dark ? 0.12 : 0.18 }, children: (0, jsx_runtime_1.jsxs)("svg", { className: "w-full h-full", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsxs)("filter", { id: "errorPixelNoise", x: "0%", y: "0%", width: "100%", height: "100%", children: [(0, jsx_runtime_1.jsx)("feTurbulence", { type: "fractalNoise", baseFrequency: "0.8", numOctaves: "1", stitchTiles: "stitch", result: "noise" }), (0, jsx_runtime_1.jsx)("feColorMatrix", { type: "saturate", values: "0", result: "gray" }), (0, jsx_runtime_1.jsxs)("feComponentTransfer", { children: [(0, jsx_runtime_1.jsx)("feFuncR", { type: "discrete", tableValues: "0 1" }), (0, jsx_runtime_1.jsx)("feFuncG", { type: "discrete", tableValues: "0 1" }), (0, jsx_runtime_1.jsx)("feFuncB", { type: "discrete", tableValues: "0 1" })] })] }), (0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", filter: "url(#errorPixelNoise)" })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-20 right-15 pointer-events-none select-none opacity-[0.03]", children: (0, jsx_runtime_1.jsx)("span", { className: "text-[180px] font-black tracking-tighter leading-none block text-right", style: { color: dark ? '#fff' : '#7f1d1d' }, children: "ERROR" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 pointer-events-none overflow-hidden z-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "absolute top-10 right-10 grid grid-cols-2 gap-3 opacity-20", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4", style: { backgroundColor: primaryColor } }), (0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4", style: { backgroundColor: secondaryColor } }), (0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4", style: { backgroundColor: secondaryColor } }), (0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4", style: { backgroundColor: primaryColor } })] }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-0 left-0 w-125 h-125 opacity-[0.06] pointer-events-none", style: {
+                            backgroundImage: `repeating-linear-gradient(45deg, ${primaryColor}, ${primaryColor} 4px, transparent 2px, transparent 12px)`,
+                            maskImage: 'linear-gradient(to top right, black, transparent 70%)',
+                            WebkitMaskImage: 'linear-gradient(to top right, black, transparent 70%)'
+                        } }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute -bottom-20 -right-20 w-150 h-150 opacity-10 pointer-events-none", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-0 right-0 w-full h-full border-40 rounded-full", style: { borderColor: primaryColor } }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-20 right-20 w-[calc(100%-160px)] h-[calc(100%-160px)] border-20 rounded-full", style: { borderColor: secondaryColor } }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-35 right-35 w-[calc(100%-280px)] h-[calc(100%-280px)] border-10 rounded-full", style: { borderColor: mutedColor } })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative z-10 flex flex-col h-full p-16", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-14", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-16 w-3 mr-4 opacity-80", style: {
+                                            backgroundColor: primaryColor,
+                                            backgroundImage: 'repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.2) 2px, rgba(0,0,0,0.2) 4px)'
+                                        } }), (0, jsx_runtime_1.jsxs)("div", { className: "relative px-8 py-3 backdrop-blur-md", style: {
+                                            backgroundColor: dark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.02)',
+                                            border: `1px solid ${dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'}`
+                                        }, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 left-0 w-2 h-2 border-t-2 border-l-2", style: { borderColor: primaryColor } }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 right-0 w-2 h-2 border-t-2 border-r-2", style: { borderColor: primaryColor } }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-0 left-0 w-2 h-2 border-b-2 border-l-2", style: { borderColor: primaryColor } }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-0 right-0 w-2 h-2 border-b-2 border-r-2", style: { borderColor: primaryColor } }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center border-r pr-6", style: { borderColor: dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 rounded-full shadow-[0_0_15px_currentColor] animate-pulse", style: { backgroundColor: primaryColor, color: primaryColor } }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] font-mono mt-2 tracking-wider opacity-50", style: { color: mutedColor }, children: "ERR.01" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-mono font-bold tracking-[0.4em] uppercase mb-1 opacity-50", style: { color: secondaryColor }, children: "System Alert" }), (0, jsx_runtime_1.jsx)("span", { className: "text-2xl font-black tracking-[0.25em] uppercase", style: { color: primaryColor }, children: "Runtime Exception" })] })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-8 pr-12", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1 items-end opacity-40", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-16 h-0.5", style: { backgroundColor: primaryColor } }), (0, jsx_runtime_1.jsx)("div", { className: "w-8 h-0.5", style: { backgroundColor: secondaryColor } })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-end gap-3 mb-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-black tracking-[0.3em] uppercase opacity-60", style: { color: mutedColor }, children: "System Time" }), (0, jsx_runtime_1.jsx)("span", { className: "w-2 h-2 rounded-full animate-pulse", style: { backgroundColor: primaryColor } })] }), (0, jsx_runtime_1.jsx)("div", { className: "font-mono text-5xl font-black tracking-widest leading-none", style: { color: mutedColor }, children: new Date(data.timestamp).toLocaleTimeString('en-GB', { hour12: false }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-12 w-0.5 opacity-20", style: { backgroundColor: mutedColor } }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs font-black tracking-[0.3em] uppercase opacity-60 mb-1", style: { color: mutedColor }, children: "Date" }), (0, jsx_runtime_1.jsx)("div", { className: "font-mono text-3xl font-bold tracking-[0.2em]", style: { color: secondaryColor }, children: new Date(data.timestamp)
+                                                    .toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
+                                                    .replaceAll('/', '-') })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-20", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-[120px] font-black leading-none tracking-tight mb-10", style: { color: accentColor }, children: (0, errorTitles_1.getRandomErrorTitle)() }), (0, jsx_runtime_1.jsx)("p", { className: "text-5xl font-semibold", style: { color: primaryColor }, children: displayMethod })] }), data.amagi && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-16", children: [(0, jsx_runtime_1.jsx)(SectionTitle, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ShieldAlert, { size: 36, style: { color: mutedColor } }), en: "Amagi Diagnosis", zh: "\u89E3\u6790\u5E93\u9519\u8BEF\u8BCA\u65AD", color: mutedColor }), (0, jsx_runtime_1.jsxs)("div", { className: "p-12 rounded-[36px]", style: {
+                                    backgroundColor: dark ? 'rgba(0,0,0,0.22)' : 'rgba(255,255,255,0.55)',
+                                    border: `1px solid ${dark ? 'rgba(248,113,113,0.18)' : 'rgba(252,165,165,0.45)'}`
+                                }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-6 flex-wrap mb-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "px-8 py-3 rounded-full text-3xl font-black tracking-wide", style: {
+                                                    backgroundColor: dark ? 'rgba(248,113,113,0.18)' : 'rgba(220,38,38,0.12)',
+                                                    color: primaryColor
+                                                }, children: (ERROR_KIND_META[data.amagi.kind] ?? FALLBACK_KIND_META).zh }), (0, jsx_runtime_1.jsx)("span", { className: "px-6 py-3 rounded-full text-2xl font-bold tracking-wide", style: {
+                                                    backgroundColor: data.amagi.retryable
+                                                        ? dark
+                                                            ? 'rgba(74,222,128,0.16)'
+                                                            : 'rgba(22,163,74,0.12)'
+                                                        : dark
+                                                            ? 'rgba(148,163,184,0.16)'
+                                                            : 'rgba(100,116,139,0.12)',
+                                                    color: data.amagi.retryable ? (dark ? '#4ade80' : '#15803d') : dark ? '#cbd5e1' : '#475569'
+                                                }, children: data.amagi.retryable ? '可以重试' : '重试无用' }), (0, jsx_runtime_1.jsx)("span", { className: "font-mono text-2xl opacity-70", style: { color: mutedColor }, children: data.amagi.kind })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-3xl mb-10", style: { color: secondaryColor }, children: (ERROR_KIND_META[data.amagi.kind] ?? FALLBACK_KIND_META).hint }), (0, jsx_runtime_1.jsxs)("div", { className: "p-8 rounded-7xl mb-10", style: { backgroundColor: dark ? 'rgba(220,38,38,0.12)' : 'rgba(254,202,202,0.35)' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xl font-semibold tracking-[0.12em] opacity-70 mb-3", style: { color: mutedColor }, children: "\u5E73\u53F0\u539F\u6587" }), (0, jsx_runtime_1.jsx)("p", { className: "text-3xl leading-relaxed break-all", style: { color: accentColor }, children: data.amagi.reason || '(平台未给出说明)' })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-3 gap-x-12 gap-y-10", children: [(0, jsx_runtime_1.jsx)(DetailCell, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { size: 26, style: { color: mutedColor } }), label: "AMAGI \u7801", value: data.amagi.code, color: mutedColor, valueColor: accentColor }), (0, jsx_runtime_1.jsx)(DetailCell, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Radio, { size: 26, style: { color: mutedColor } }), label: "\u5E73\u53F0\u4E1A\u52A1\u7801", value: data.amagi.platformCode, color: mutedColor, valueColor: accentColor }), (0, jsx_runtime_1.jsx)(DetailCell, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Gauge, { size: 26, style: { color: mutedColor } }), label: "HTTP \u72B6\u6001", value: data.amagi.httpStatus, color: mutedColor, valueColor: accentColor }), (0, jsx_runtime_1.jsx)(DetailCell, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Fingerprint, { size: 26, style: { color: mutedColor } }), label: "\u8BF7\u6C42 ID", value: data.amagi.requestId, color: mutedColor, valueColor: accentColor }), (0, jsx_runtime_1.jsx)(DetailCell, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Repeat, { size: 26, style: { color: mutedColor } }), label: "\u5B9E\u9645\u8BF7\u6C42\u6B21\u6570", value: data.amagi.attempts, color: mutedColor, valueColor: accentColor }), (0, jsx_runtime_1.jsx)(DetailCell, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Timer, { size: 26, style: { color: mutedColor } }), label: "\u8017\u65F6", value: data.amagi.durationMs === undefined ? undefined : `${data.amagi.durationMs} ms`, color: mutedColor, valueColor: accentColor })] }), data.amagi.issues && data.amagi.issues.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-12", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 mb-5 opacity-70", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListChecks, { size: 26, style: { color: mutedColor } }), (0, jsx_runtime_1.jsx)("span", { className: "text-xl font-semibold tracking-[0.12em]", style: { color: mutedColor }, children: "\u53C2\u6570\u95EE\u9898" })] }), (0, jsx_runtime_1.jsx)("ul", { className: "space-y-4", children: data.amagi.issues.map((issue, index) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex gap-5 text-2xl leading-relaxed", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-mono font-bold shrink-0", style: { color: primaryColor }, children: issue.path || '(根)' }), (0, jsx_runtime_1.jsx)("span", { style: { color: accentColor }, children: issue.message })] }, `${issue.path}-${index}`))) })] })), data.amagi.trace && data.amagi.trace.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-12", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 mb-6 opacity-70", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Route, { size: 26, style: { color: mutedColor } }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xl font-semibold tracking-[0.12em]", style: { color: mutedColor }, children: ["\u8BF7\u6C42\u8F68\u8FF9\uFF08", data.amagi.trace.length, " \u6B21\uFF09"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-6", children: data.amagi.trace.map((entry, index) => {
+                                                    const { head, names, queryLength } = splitRequestUrl(entry.url);
+                                                    const ok = entry.status !== undefined && entry.status >= 200 && entry.status < 300;
+                                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "p-8 rounded-7xl", style: { backgroundColor: dark ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.5)' }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4 flex-wrap mb-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "px-4 py-1 rounded-full text-xl font-bold", style: {
+                                                                            backgroundColor: dark ? 'rgba(148,163,184,0.18)' : 'rgba(100,116,139,0.14)',
+                                                                            color: dark ? '#cbd5e1' : '#475569'
+                                                                        }, children: TRACE_REASON_LABELS[entry.reason] ?? entry.reason }), (0, jsx_runtime_1.jsx)("span", { className: "font-mono text-2xl font-bold", style: { color: accentColor }, children: entry.method }), (0, jsx_runtime_1.jsx)("span", { className: "font-mono text-2xl font-bold", style: { color: entry.status === undefined ? mutedColor : ok ? (dark ? '#4ade80' : '#15803d') : primaryColor }, children: entry.status ?? '未发出' }), (0, jsx_runtime_1.jsxs)("span", { className: "font-mono text-xl opacity-70", style: { color: mutedColor }, children: [entry.durationMs, " ms"] }), entry.retryOf && ((0, jsx_runtime_1.jsxs)("span", { className: "font-mono text-xl", style: { color: primaryColor }, children: ["\u91CD\u8BD5\u4E8E ", entry.retryOf] }))] }), (0, jsx_runtime_1.jsx)("p", { className: "font-mono text-xl break-all leading-relaxed", style: { color: secondaryColor }, children: head }), names.length > 0 && ((0, jsx_runtime_1.jsxs)("p", { className: "font-mono text-lg break-all mt-3 opacity-60", style: { color: mutedColor }, children: [names.length, " \u4E2A\u67E5\u8BE2\u53C2\u6570 / ", queryLength, " \u5B57\u7B26\uFF1A", names.slice(0, 12).join(' '), names.length > 12 ? ` …+${names.length - 12}` : ''] }))] }, `${entry.url}-${index}`));
+                                                }) })] }))] })] })), data.isVerification && data.verificationUrl && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-16 p-12 rounded-[40px]", style: { backgroundColor: dark ? 'rgba(0,0,0,0.25)' : 'rgba(255,255,255,0.6)' }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-6 mb-10", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.QrCode, { size: 40, className: "text-warning" }), (0, jsx_runtime_1.jsx)("span", { className: "text-3xl font-semibold", style: { color: accentColor }, children: "\u4EBA\u673A\u9A8C\u8BC1" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-16 items-center", children: [(0, jsx_runtime_1.jsx)("img", { src: (0, QRcode_1.generateQRCode)(data.verificationUrl, dark), alt: "\u9A8C\u8BC1\u4E8C\u7EF4\u7801", className: "w-64 h-64 rounded-3xl" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-3xl", style: { color: secondaryColor }, children: "\u8BF7\u5728 120 \u79D2\u5185\u5B8C\u6210\u9A8C\u8BC1" }), (0, jsx_runtime_1.jsxs)("ol", { className: "space-y-4 text-2xl", style: { color: mutedColor }, children: [(0, jsx_runtime_1.jsx)("li", { children: "1. \u4F7F\u7528\u624B\u673A\u626B\u63CF\u4E8C\u7EF4\u7801" }), (0, jsx_runtime_1.jsx)("li", { children: "2. \u5728\u7F51\u9875\u4E2D\u5B8C\u6210\u4EBA\u673A\u9A8C\u8BC1" }), (0, jsx_runtime_1.jsx)("li", { children: "3. \u5C06\u9A8C\u8BC1\u7ED3\u679C\u53D1\u9001\u81F3\u6B64\u5BF9\u8BDD" })] }), data.verificationUrl && ((0, jsx_runtime_1.jsx)("p", { className: "text-xl break-all mt-8", style: { color: mutedColor }, children: data.verificationUrl }))] })] })] })), data.triggerCommand && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-14", children: [(0, jsx_runtime_1.jsx)(SectionTitle, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Terminal, { size: 36, style: { color: mutedColor } }), en: "Trigger Command", zh: "\u89E6\u53D1\u547D\u4EE4", color: mutedColor }), (0, jsx_runtime_1.jsx)("div", { className: "p-10 rounded-[36px]", style: { backgroundColor: dark ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.5)' }, children: (0, jsx_runtime_1.jsx)("pre", { className: "text-3xl leading-relaxed whitespace-pre-wrap break-all font-mono", style: { color: accentColor }, dangerouslySetInnerHTML: { __html: convertAnsiToHtml(data.triggerCommand) } }) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "mb-14", children: [(0, jsx_runtime_1.jsx)(SectionTitle, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { size: 36, style: { color: mutedColor } }), en: "Stack Trace", zh: data.amagi ? '调用栈（结构化上下文见上）' : data.error?.dump ? '调用栈（对象转储见下）' : '错误堆栈', color: mutedColor }), (0, jsx_runtime_1.jsx)("div", { className: "p-10 rounded-[36px]", style: {
+                                    backgroundColor: dark ? 'rgba(220,38,38,0.1)' : 'rgba(254,202,202,0.4)',
+                                    border: `1px solid ${dark ? 'rgba(248,113,113,0.2)' : 'rgba(252,165,165,0.5)'}`
+                                }, children: (0, jsx_runtime_1.jsx)("pre", { className: "text-2xl leading-relaxed whitespace-pre-wrap break-all font-mono", style: { color: dark ? 'rgba(255,255,255,0.85)' : 'rgba(127,29,29,0.9)' }, dangerouslySetInnerHTML: { __html: stackHtml } }) })] }), data.error?.dump && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-14", children: [(0, jsx_runtime_1.jsx)(SectionTitle, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Braces, { size: 36, style: { color: mutedColor } }), en: "Object Dump", zh: "\u5BF9\u8C61\u8F6C\u50A8", color: mutedColor }), (0, jsx_runtime_1.jsx)("div", { className: "p-10 rounded-[36px]", style: { backgroundColor: dark ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.5)' }, children: (0, jsx_runtime_1.jsx)("pre", { className: "text-2xl leading-relaxed whitespace-pre-wrap break-all font-mono", style: { color: dark ? 'rgba(255,255,255,0.85)' : 'rgba(127,29,29,0.9)' }, dangerouslySetInnerHTML: { __html: convertAnsiToHtml(data.error.dump) } }) })] })), data.logs && data.logs.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-14", children: [(0, jsx_runtime_1.jsx)(SectionTitle, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 36, style: { color: mutedColor } }), en: "Execution Logs", zh: "\u6267\u884C\u65E5\u5FD7", color: mutedColor }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-6", children: data.logs.map((log, index) => {
+                                    const theme = getLogLevelTheme(log.level, dark);
+                                    return ((0, jsx_runtime_1.jsxs)("fieldset", { className: `relative rounded-3xl ${theme.bgClass} border-2 ${theme.borderClass} p-6`, children: [(0, jsx_runtime_1.jsxs)("legend", { className: "flex items-center gap-2 ml-4", children: [(0, jsx_runtime_1.jsx)("span", { className: `w-2 h-6 rounded-full -mr-1.5 ${theme.dotClass}` }), (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-2 px-3", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { size: 18, className: theme.iconClass }), (0, jsx_runtime_1.jsx)("span", { className: `text-xl font-mono font-medium ${theme.textClass}`, children: log.timestamp })] }), (0, jsx_runtime_1.jsx)("span", { className: `w-2 h-6 rounded-full -ml-1.5 ${theme.dotClass}` })] }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-2 right-6 pointer-events-none", children: (0, jsx_runtime_1.jsxs)("span", { className: `text-6xl font-black uppercase leading-none tracking-tight ${theme.levelClass}`, children: [log.level, "\u300D"] }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative z-1 text-2xl font-mono whitespace-pre-wrap break-all leading-relaxed", style: { color: dark ? 'rgba(255,255,255,0.88)' : 'rgba(0,0,0,0.82)' }, dangerouslySetInnerHTML: { __html: convertAnsiToHtml(log.message) } })] }, index));
+                                }) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "mt-auto pt-12", style: { borderTop: `2px solid ${dark ? 'rgba(248,113,113,0.15)' : 'rgba(252,165,165,0.3)'}` }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center flex-wrap gap-x-16 gap-y-6 mb-12", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-6", children: [(0, jsx_runtime_1.jsx)("img", { src: data.frameworkLogo ?? '/image/frame-logo.png', className: "h-16 w-auto", alt: "Framework" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xl", style: { color: mutedColor }, children: "Framework / \u6846\u67B6\u7248\u672C" }), (0, jsx_runtime_1.jsx)("p", { className: "text-3xl font-bold", style: { color: accentColor }, children: data.frameworkVersion })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-6", children: [(0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 230 221", className: "h-16 w-auto", style: { color: accentColor }, children: [(0, jsx_runtime_1.jsx)("path", { d: "M132.75,87.37l-53.72-53.37c-4.66-4.63-1.38-12.58,5.18-12.58h115.13c6.57,0,9.84,7.95,5.18,12.58l-53.72,53.37c-4.99,4.96-13.06,4.96-18.05,0Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M28.49,186.89l.03-51.42c-.02-6.57,7.92-9.87,12.56-5.23l57.02,57.02c4.64,4.64,1.34,12.41-5.23,12.39h-51.42c-7.04-.02-12.94-5.72-12.96-12.76Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M41.54,23.68l163.04,163.05c4.78,4.78,1.39,12.95-5.36,12.94h-47.88c-9.69,0-18.99-3.86-25.84-10.71L39.3,102.75c-6.85-6.85-10.7-16.15-10.7-25.84V29.04c0-6.76,8.16-10.14,12.94-5.36Z", fill: "currentColor" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xl", style: { color: mutedColor }, children: "Plugin / \u63D2\u4EF6\u7248\u672C" }), (0, jsx_runtime_1.jsx)("p", { className: "text-3xl font-bold", style: { color: accentColor }, children: data.pluginVersion })] })] }), data.adapterInfo && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-6", children: [getAdapterLogo(data.adapterInfo.name), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xl", style: { color: mutedColor }, children: "Adapter / \u9002\u914D\u5668" }), (0, jsx_runtime_1.jsx)("p", { className: "text-3xl font-bold truncate", style: { color: accentColor }, children: data.adapterInfo.name })] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-10 text-xl mb-12", style: { color: mutedColor }, children: [data.buildTime && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(md_1.MdSchedule, { size: 24 }), (0, jsx_runtime_1.jsxs)("span", { children: ["Built Time: ", data.buildTime, " \u4E8E", ' ', (0, date_fns_1.formatDistanceToNow)((0, date_fns_1.parse)(data.buildTime, 'yyyy年MM月dd日 HH:mm', new Date()), { locale: locale_1.zhCN }), "\u524D"] })] })), data.commitHash && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.GitBranch, { size: 24 }), (0, jsx_runtime_1.jsxs)("span", { children: ["Commit Hash: ", data.commitHash] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-10 rounded-[36px]", style: { backgroundColor: dark ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.5)' }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-end justify-between mb-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-3xl font-semibold mb-2", style: { color: accentColor }, children: "Need Help? / \u9700\u8981\u5E2E\u52A9\uFF1F" }), (0, jsx_runtime_1.jsx)("p", { className: "text-2xl", style: { color: secondaryColor }, children: "\u63D0\u4EA4\u95EE\u9898\u65F6\u8BF7\u9644\u4E0A\u5B8C\u6574\u62A5\u9519\u622A\u56FE\u3001\u590D\u73B0\u6B65\u9AA4\u548C\u73AF\u5883\u7248\u672C\u4FE1\u606F\u3002" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-black tracking-[0.2em] uppercase px-3 py-1 rounded-full", style: {
+                                                    color: primaryColor,
+                                                    backgroundColor: dark ? 'rgba(248,113,113,0.12)' : 'rgba(220,38,38,0.08)'
+                                                }, children: "Support" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-x-6 gap-y-6 text-2xl leading-relaxed py-6", style: {
+                                            borderTop: `1px solid ${dark ? 'rgba(248,113,113,0.2)' : 'rgba(220,38,38,0.12)'}`,
+                                            borderBottom: `1px solid ${dark ? 'rgba(248,113,113,0.2)' : 'rgba(220,38,38,0.12)'}`
+                                        }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "font-semibold mb-1", style: { color: accentColor }, children: "GitHub Issue" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xl break-all", style: { color: secondaryColor }, children: "https://github.com/maimai993/koishi-plugin-kkk/issues/new/choose" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "font-semibold mb-1", style: { color: accentColor }, children: "GitHub Repository" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xl break-all", style: { color: secondaryColor }, children: "https://github.com/maimai993/koishi-plugin-kkk" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "font-semibold mb-1", style: { color: accentColor }, children: "QQ \u7FA4" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xl", style: { color: secondaryColor }, children: "1050229473" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "font-semibold mb-1", style: { color: accentColor }, children: "\u9644\u5E26\u4FE1\u606F" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xl", style: { color: secondaryColor }, children: "\u6B64\u56FE\u7247 + \u89E6\u53D1\u547D\u4EE4 + \u5BF9\u5E94\u914D\u7F6E\uFF08\u81EA\u884C\u8131\u654F\u5904\u7406\uFF09" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4 mt-6 text-xl", style: { color: mutedColor }, children: [(0, jsx_runtime_1.jsx)("span", { className: "font-mono", children: "Tips:" }), (0, jsx_runtime_1.jsx)("span", { children: "\u4FE1\u606F\u8D8A\u5B8C\u6574\uFF0C\u5B9A\u4F4D\u8D8A\u5FEB\u3002" })] })] })] })] })] }));
+};
+exports.handlerError = handlerError;
+exports.handlerError.displayName = 'handlerError';
+exports.default = exports.handlerError;

package/lib/ktr/template/other/handlerError/components/stackHighlight.js

@@ -0,0 +1,109 @@
+"use strict";
+/**
+ * 调用栈的结构化高亮。
+ *
+ * 与 `convertAnsiToHtml` 的分工：那个按 ANSI 转义上色，只适用于 `util.inspect`
+ * 的彩色转储。amagi 的错误现在只印 `error.stack`（纯文本、没有 ANSI），交给它
+ * 整段就是一个颜色 —— 所以这里按**结构**上色：错误名、`[kind/CODE]` 标签、
+ * 函数名、目录、文件名、行列号各一色，外部帧（依赖库与 node 内部）整行压暗，
+ * 一眼能挑出项目里的帧。归属由调用方的 {@link HighlightStackOptions.isOwnFrame} 判定 ——
+ * 不能只看路径里有没有 `node_modules`：发布后的插件自己就装在 `node_modules` 里。
+ *
+ * 单独成文件（不带 JSX / React import）是为了能直接单测 —— 颜色是否真的分层，
+ * 只有断言才说得清。
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.highlightStack = exports.stackPalette = void 0;
+/**
+ * 调用栈高亮用的一组颜色。
+ *
+ * 整个错误页是暖红底，所以这里只用邻近色：玫瑰 → 红 → 橙 → 琥珀，靠色相小步移动
+ * 加明度差把各段分开，不再借蓝紫这类对比色 —— 蓝紫压在红底上会跳出来抢戏。
+ */
+const stackPalette = (dark) => ({
+    base: dark ? 'rgba(255,255,255,0.82)' : 'rgba(127,29,29,0.88)',
+    dim: dark ? 'rgba(255,255,255,0.32)' : 'rgba(127,29,29,0.38)',
+    errName: dark ? '#f87171' : '#dc2626',
+    tag: dark ? '#fb923c' : '#9a3412',
+    fn: dark ? '#fda4af' : '#be123c',
+    file: dark ? '#fcd34d' : '#a16207',
+    num: dark ? '#fdba74' : '#c2410c'
+});
+exports.stackPalette = stackPalette;
+const escapeHtmlText = (str) => str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
+/** 转义 + 给 CJK 段落套字体，与 convertAnsiToHtml 的 formatLogContent 同款 */
+const withCjkFont = (str) => escapeHtmlText(str).replace(/([㐀-鿿豈-﫿　-〿＀-￯]+)/g, '<span class="font-[HarmonyOSHans-Regular]">$1</span>');
+/**
+ * 兜底的外部帧判定：只看文本特征，认不出路径。
+ *
+ * 它区分不了「第三方依赖」与「装在 node_modules 里跑的插件自己」—— 发布后的 kkk 正是
+ * 后者，调用帧形如
+ * `file:///…/node_modules/.pnpm/koishi-plugin-kkk@…/node_modules/koishi-plugin-kkk/lib/core_chunk/main.js:84860:65`，
+ * `node_modules` 出现两次，于是每一帧都被压暗、整块图失去分层。所以它只作兜底（单测等
+ * 无调用方上下文的场景），真实渲染一律由调用方给出 {@link HighlightStackOptions.isOwnFrame}。
+ * @param location - 帧里的位置原文
+ * @returns 是否属于本插件自己的代码
+ */
+const defaultIsOwnFrame = (location) => !/node_modules|^node:|\(node:/.test(location);
+/**
+ * 按结构高亮 JS 调用栈。
+ * @param text - `error.stack` 原文（纯文本）
+ * @param dark - 是否深色模式
+ * @param options - 可选覆盖项；不给 `isOwnFrame` 时退回文本特征判定
+ * @returns 可交给 dangerouslySetInnerHTML 的 HTML
+ */
+const highlightStack = (text, dark, options = {}) => {
+    const isOwnFrame = options.isOwnFrame ?? defaultIsOwnFrame;
+    const c = (0, exports.stackPalette)(dark);
+    const paint = (color, str, bold = false) => `<span style="color:${color}${bold ? ';font-weight:700' : ''}">${withCjkFont(str)}</span>`;
+    /**
+     * `路径:行:列` —— 目录压暗、文件名高亮、行列号另一色。
+     * @param loc - 位置原文
+     * @param foreign - 外部帧，整行压暗
+     * @param ownFrame - 有路径可判归属的帧；裸文件名无从判断，按外部保守处理
+     */
+    const paintLocation = (loc, foreign, ownFrame) => {
+        const dimAll = foreign || !ownFrame;
+        const pos = /^(.*?):(\d+):(\d+)$/.exec(loc);
+        const body = pos ? pos[1] : loc;
+        const tail = pos ? paint(dimAll ? c.dim : c.num, `:${pos[2]}:${pos[3]}`) : '';
+        const cut = Math.max(body.lastIndexOf('/'), body.lastIndexOf('\\'));
+        if (cut < 0)
+            return paint(dimAll ? c.dim : c.file, body) + tail;
+        return paint(c.dim, body.slice(0, cut + 1)) + paint(dimAll ? c.dim : c.file, body.slice(cut + 1)) + tail;
+    };
+    return text
+        .split('\n')
+        .map((line) => {
+        // 调用帧：`    at [async |new ]名字 (位置)` 或 `    at 位置`
+        const frame = /^(\s*)at\s+(.*)$/.exec(line);
+        if (frame) {
+            const rest = frame[2];
+            const prefix = paint(c.dim, `${frame[1]}at `);
+            const named = /^(?:(async|new)\s+)?(.+?)\s+\((.+)\)$/.exec(rest);
+            if (named) {
+                const foreign = !isOwnFrame(named[3]);
+                const modifier = named[1] ? paint(c.dim, `${named[1]} `) : '';
+                return (prefix +
+                    modifier +
+                    paint(foreign ? c.dim : c.fn, named[2]) +
+                    paint(c.dim, ' (') +
+                    paintLocation(named[3], foreign, true) +
+                    paint(c.dim, ')'));
+            }
+            // 匿名帧：整段就是位置；没有行列号的多半是裸文件名，无从判归属，按外部处理
+            const hasPosition = /^(.*?):(\d+):(\d+)$/.test(rest);
+            return prefix + paintLocation(rest, !isOwnFrame(rest), hasPosition);
+        }
+        // 首行：`AmagiError: [risk/ANTIBOT_PAGE] 平台返回了反爬页面 (...)`
+        const head = /^([A-Za-z_$][\w$]*):\s([\s\S]*)$/.exec(line);
+        if (head) {
+            const tagMatch = /^(\[[^\]]+\])\s?([\s\S]*)$/.exec(head[2]);
+            const body = tagMatch ? paint(c.tag, tagMatch[1], true) + paint(c.base, ` ${tagMatch[2]}`) : paint(c.base, head[2]);
+            return paint(c.errName, head[1], true) + paint(c.dim, ': ') + body;
+        }
+        return paint(c.base, line);
+    })
+        .join('\n');
+};
+exports.highlightStack = highlightStack;

package/lib/ktr/template/other/handlerError/components/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ktr/template/other/handlerError/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const template_react_1 = require("../../../../compat/template-react.js");
+const handlerError_1 = require("./components/handlerError");
+exports.default = (0, template_react_1.defineTemplate)({
+    name: '错误页面',
+    description: 'KKK插件错误页面',
+    component: handlerError_1.handlerError
+});