95 lines
5.1 KiB
HTML
95 lines
5.1 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>组件库</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>
|
||
</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="app.js"></script>
|
||
</body>
|
||
</html>
|