aurora-admin
cbed5ba7ca
i18n（竞品 7 家全有、Aurora 唯一还缺的一线能力） - site/i18n.js：330 条文案字典，顶栏「中 / EN」切换，偏好存 aa-lang， <html lang> 与 document.title 同步 - 设计取舍：以中文源串为字典键，而非抽象 key。中文是规范原文语言也是 app.js 现有字面量；源串作键意味着未收录文案自动回退原文，不会出现 空白或 key 泄漏 - 覆盖：导航/侧栏/首页 Hero 与设计原则/总览/快速开始/设计规范（含令牌 导出区）/For Agents 全表/更新日志/组件详情页（何时使用、API 三表、 无障碍键盘表、Do&Don't、设计契约、实现资源、相关组件）/Playground/ 主题面板/搜索弹窗/FAB 提示 - 语言感知显示：组件名主次调换（中文模式主显中文名，英文模式主显英文 名），详情页大标题不再重复；分类名走 CAT_EN 不占字典 修复回归时序（根治偶发） - DensitySwitcher 对比度偶发失败：断言在演示页内联脚本执行完之前就跑了， 读到 is-active 尚未应用的中间态（白字未落到品牌蓝底）。单页打开通过、 并发收集器里偶发失败 - 根因是固定帧数等待（load + 双 rAF）在多个 iframe 抢主线程时不够稳。 改为就绪轮询：readyState === 'complete' 且 DOM 连续 3 次采样（约 48ms） 无变化才断言，另设约 4.8s 超时兜底 - 验证：四次连跑全部 100%，偶发不再复现 修复 i18n 接入中的三个真实缺陷 - TDZ 顺序：KIND_KEYS 等模块级常量在 I18N/T 定义前调用 T()，抛 Cannot read properties of undefined。改为存中文源串、渲染时求值 （模块级预先求值还会导致语言切换后不更新） - 局部变量遮蔽：renderDesign 内原有 var T = data.tokens 遮蔽全局翻译 函数，导致设计规范页整个渲染失败。改名 TOKENS - 模板拼接括号：el() 调用在包装 T() 后少一个右括号 验证 - 9 个路由 × 2 语言全部正常渲染（中英文内容均非空且确实不同） - 回归保持 100%：961 断言 / 925 通过 / 0 失败 / 79 页全通过 / N/A 36
99 lines
5.3 KiB
HTML
99 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Aurora Admin · 组件库文档</title>
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Crect%20width='32'%20height='32'%20rx='8'%20fill='%232F54EB'/%3E%3Ctext%20x='16'%20y='23'%20font-size='19'%20font-family='Arial'%20font-weight='bold'%20fill='white'%20text-anchor='middle'%3EA%3C/text%3E%3C/svg%3E">
|
||
<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<!-- 顶部导航 -->
|
||
<header class="topbar">
|
||
<div class="topbar-inner">
|
||
<a class="logo" href="#/">
|
||
<span class="logo-mark">A</span>
|
||
<span class="logo-text">Aurora Admin <em class="logo-sub">组件库</em></span>
|
||
<span class="ver" id="ver">v1.0.0</span>
|
||
</a>
|
||
<button id="search-trigger" class="search-trigger" type="button">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
|
||
<span class="st-text">搜索组件…</span>
|
||
<kbd>Ctrl K</kbd>
|
||
</button>
|
||
<label class="fw-select-wrap" title="选择你的技术栈，文档将只展示对应框架的内容">
|
||
<span class="fw-label">框架</span>
|
||
<select id="fw-select">
|
||
<option value="h5">H5</option>
|
||
<option value="react">React</option>
|
||
<option value="vue2">Vue 2</option>
|
||
<option value="vue3">Vue 3</option>
|
||
</select>
|
||
</label>
|
||
<nav class="topnav">
|
||
<a href="#/" data-nav="home">首页</a>
|
||
<a href="#/overview" data-nav="overview">组件</a>
|
||
<a href="#/guide" data-nav="guide">快速开始</a>
|
||
<a href="#/design" data-nav="design">设计规范</a>
|
||
<a href="#/changelog" data-nav="changelog">更新日志</a>
|
||
<a href="#/agents" data-nav="agents">AI 消费</a>
|
||
</nav>
|
||
<button id="lang-toggle" class="lang-toggle" type="button" title="中文 / English">
|
||
<span class="lang-zh">中</span><span class="lang-sep">/</span><span class="lang-en">EN</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="body-wrap">
|
||
<aside class="sidebar" id="sidebar"></aside>
|
||
<main class="content" id="content"></main>
|
||
<aside class="toc" id="toc"></aside>
|
||
</div>
|
||
|
||
<!-- 全局搜索弹窗 -->
|
||
<div class="modal-mask hidden" id="search-modal">
|
||
<div class="modal">
|
||
<div class="modal-input-wrap">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
|
||
<input id="search-input" placeholder="搜索组件（中文 / 英文 / slug）" autocomplete="off" spellcheck="false">
|
||
</div>
|
||
<div id="search-cats" class="search-cats"></div>
|
||
<div id="search-results" class="search-results"></div>
|
||
<div class="modal-foot"><span>↑↓ 选择</span><span>Enter 跳转</span><span>Esc 关闭</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="fatal" class="fatal hidden"></div>
|
||
|
||
<!-- 悬浮工具：深色模式 + 主题定制 + 回到顶部 -->
|
||
<div class="fab-stack">
|
||
<div class="theme-panel hidden" id="theme-panel">
|
||
<div class="tp-head">主题定制</div>
|
||
<div id="theme-presets" class="tp-presets"></div>
|
||
<div id="theme-colors"></div>
|
||
<div class="tp-actions">
|
||
<button id="theme-reset" class="tp-btn" type="button">重置</button>
|
||
<button id="theme-copy" class="tp-btn primary" type="button">复制覆盖代码</button>
|
||
</div>
|
||
<div class="tp-note">覆盖代码可直接粘贴到令牌文件之后，即完成整站换色。</div>
|
||
</div>
|
||
<button id="fab-mode" class="fab" type="button" title="深色 / 浅色模式切换">
|
||
<svg id="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
||
<svg id="icon-sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
|
||
</button>
|
||
<button id="fab-theme" class="fab" type="button" title="主题定制">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01a1.5 1.5 0 0 1 1.12-2.49H16a5 5 0 0 0 5-5c0-4.42-4.03-8-9-8z"/></svg>
|
||
</button>
|
||
<button id="fab-top" class="fab" type="button" title="回到顶部" style="display:none">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<script src="data.js"></script>
|
||
<script src="logger.js"></script>
|
||
<script src="i18n.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|