feat(design): Riso 风格页面设计与静态原型（首页/列表/详情/管理台/登录）
This commit is contained in:
cheney
@@ -0,0 +1,181 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ripgrep · Awesome Index</title>
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='4' y='4' width='20' height='20' rx='5' fill='%232436E8'/%3E%3Crect x='10' y='10' width='18' height='18' rx='5' fill='none' stroke='%23FF4D2E' stroke-width='2.5'/%3E%3C/svg%3E" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="topbar">
|
||||
<div class="container topbar-inner">
|
||||
<a class="brand" href="index.html">
|
||||
<span class="brand-mark"><i></i><i></i></span>
|
||||
AWESOME·INDEX
|
||||
</a>
|
||||
<nav class="topnav" aria-label="主导航">
|
||||
<a href="index.html">首页</a>
|
||||
<a href="list.html" aria-current="page">浏览全部</a>
|
||||
<a href="admin.html">管理入口</a>
|
||||
</nav>
|
||||
<button class="btn btn-sm nav-toggle" aria-expanded="false">菜单</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
<p class="crumbs"><a href="index.html">~/awesome-index</a> / <a href="list.html">工具</a> / ripgrep</p>
|
||||
|
||||
<div class="detail-head">
|
||||
<div class="detail-title">
|
||||
<h1>ripgrep</h1>
|
||||
<span class="chip chip-type">工具</span>
|
||||
<div class="detail-actions">
|
||||
<a class="btn btn-sm" href="#" onclick="return false">访问仓库 ↗</a>
|
||||
<button class="btn btn-sm" type="button" data-copy='https://honor3.com/mcp → get_entry("ripgrep")'>复制给 AI</button>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin-top:12px;color:var(--ink-dim);max-width:56ch">如果你在终端里找过东西，就值得认识 ripgrep：它把「递归 + 正则 + 快」做成了一件不需要思考的事。</p>
|
||||
</div>
|
||||
|
||||
<div class="detail-layout">
|
||||
<!-- 正文 -->
|
||||
<article class="detail-body">
|
||||
<section>
|
||||
<p class="anno">// entry.body · markdown source</p>
|
||||
<h2>这是什么</h2>
|
||||
<p>ripgrep（命令名 rg）是一个面向目录的递归搜索工具。它默认遵循 .gitignore 规则跳过无关文件，自动跳过二进制内容，并利用 Rust 的并行与 SIMD 能力，在大代码库里的搜索速度常年第一梯队。</p>
|
||||
<p>对日常使用来说，它意味着把 grep -r 那串参数彻底忘掉：<code class="mono" style="font-size:.9em">rg TODO</code> 就是全部。</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>为什么牛逼</h2>
|
||||
<ul class="feat-list">
|
||||
<li>默认尊重 .gitignore，搜索结果天然干净；</li>
|
||||
<li>并行遍历 + 字面量优化，速度在同类工具中长期领先；</li>
|
||||
<li>输出对人和管道都友好，可无缝接进 fzf 等工作流；</li>
|
||||
<li>单文件跨平台分发，Windows / macOS / Linux 开箱即用。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>截图</h2>
|
||||
<div class="shot">screenshot placeholder · 16:9 建议尺寸 1280×640</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p class="anno">// dual reader view · 人读 ⇄ 机读</p>
|
||||
<div class="view-tabs" role="tablist" aria-label="视图切换">
|
||||
<button type="button" data-view="human" aria-selected="true">人读</button>
|
||||
<button type="button" data-view="machine" aria-selected="false">机读 JSON</button>
|
||||
</div>
|
||||
<div data-view-panel="human">
|
||||
<p style="color:var(--ink-dim)">这一页就是人读视图。切换到「机读 JSON」可以看到 AI 通过 MCP 的 get_entry 拿到的同一条数据——两种读者，同一份事实。</p>
|
||||
</div>
|
||||
<div data-view-panel="machine" hidden>
|
||||
<div class="code-block">{
|
||||
"id": "ripgrep",
|
||||
"type": "tool",
|
||||
"name": "ripgrep",
|
||||
"description": "以正则递归搜索目录，默认尊重 .gitignore。",
|
||||
"url": "https://github.com/BurntSushi/ripgrep",
|
||||
"tags": ["Rust", "CLI", "跨平台"],
|
||||
"license": "MIT",
|
||||
"stars": 52300,
|
||||
"updated_at": "2026-08-23",
|
||||
"source": { "kind": "human", "editor": "admin" },
|
||||
"status": "active"
|
||||
}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p class="anno">// comments · 3 条</p>
|
||||
<h2>评论</h2>
|
||||
<div class="comment">
|
||||
<span class="avatar">K</span>
|
||||
<div>
|
||||
<div class="comment-head"><b>kentang</b><time>2026-08-20</time></div>
|
||||
<p>配合 fzf 之后基本回不去原生 grep 了，rg --files | fzf 是我每天用得最多的组合键。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment">
|
||||
<span class="avatar">M</span>
|
||||
<div>
|
||||
<div class="comment-head"><b>moss</b><time>2026-08-14</time></div>
|
||||
<p>Windows 下也稳，公司那台老机器上搜几十万文件的 monorepo 依然秒出。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment">
|
||||
<span class="avatar">A</span>
|
||||
<div>
|
||||
<div class="comment-head"><b>anon-42</b><time>2026-08-02</time></div>
|
||||
<p>建议补一条标签：可以加到「AI 编码代理常用工具」组里，agent 检索代码很依赖它。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="comment-form" data-demo-submit="评论已发布">
|
||||
<div class="form-row">
|
||||
<input class="input" type="text" placeholder="昵称" required />
|
||||
</div>
|
||||
<textarea class="textarea" placeholder="说点有用的：使用场景、坑、搭配推荐…" required></textarea>
|
||||
<div>
|
||||
<button class="btn btn-primary" type="submit">发布评论</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<!-- 侧栏 -->
|
||||
<aside>
|
||||
<div class="side-card">
|
||||
<h3>元数据</h3>
|
||||
<table class="meta-table">
|
||||
<tr><td>类型</td><td>工具 / CLI</td></tr>
|
||||
<tr><td>语言</td><td>Rust</td></tr>
|
||||
<tr><td>License</td><td>MIT</td></tr>
|
||||
<tr><td>Stars</td><td>52,300</td></tr>
|
||||
<tr><td>收录时间</td><td>2025-11-03</td></tr>
|
||||
<tr><td>最近核验</td><td>2026-08-23 ✓</td></tr>
|
||||
<tr><td>来源</td><td>人工录入</td></tr>
|
||||
<tr><td>状态</td><td><span class="status-pill status-ok">active</span></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="side-card">
|
||||
<h3>标签</h3>
|
||||
<div class="card-tags" style="margin-top:0">
|
||||
<span class="chip">Rust</span>
|
||||
<span class="chip">CLI</span>
|
||||
<span class="chip">跨平台</span>
|
||||
<span class="chip">终端工具</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="side-card">
|
||||
<h3>相关条目</h3>
|
||||
<a class="related-item" href="#"><b>fd</b><span>find 的现代替代品，和 rg 同门师兄弟</span></a>
|
||||
<a class="related-item" href="#"><b>fzf</b><span>模糊筛选器，rg 结果的下一站</span></a>
|
||||
<a class="related-item" href="#"><b>silversearcher-ag</b><span>前一代经典，如今多被 rg 取代</span></a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer on-panel">
|
||||
<div class="container">
|
||||
<div class="footer-bar" style="border-top:0;padding-top:26px">
|
||||
<span>© 2026 honor3.com · Awesome Index</span>
|
||||
<span><a href="mailto:admin@honor3.com" style="color:inherit">admin@honor3.com</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class="toast" role="status"></div>
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user