azmat1127/yingqing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

统一 Airshelf 界面组件与图标

Browse Source
This commit is contained in:
iye
2026-05-27 12:29:41 +08:00
parent ea335587d2
commit 086d92991e
47 changed files with 750 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files
电商AI平台/design-system.html
+18 -19
View File
@@ -3,10 +3,10 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>流·Studio 设计系统 · V2.1 · Interactive</title>
<title>Airshelf 设计系统 · V2.1 · Interactive</title>
<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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- 引入项目共享 CSS · token + 100+ 组件类(1592 行) -->
<link rel="stylesheet" href="assets/restraint.css">
<style>
@@ -1172,7 +1172,7 @@ code.tk.heat { background: var(--heat-12); color: var(--heat); border-color: var
<!-- ============ SIDEBAR ============ -->
<aside class="ds-sidebar">
<h1>流·Studio<br>设计系统</h1>
<h1>Airshelf<br>设计系统</h1>
<div class="mono-sub">// V2.1 · 2026-05-22 · INTERACTIVE</div>
<ul class="ds-nav">
@@ -1231,7 +1231,7 @@ code.tk.heat { background: var(--heat-12); color: var(--heat); border-color: var
<!-- HERO -->
<div class="hero">
<span class="badge">// V2.1 · INTERACTIVE · 2026-05-22</span>
<h1>流·Studio 设计系统</h1>
<h1>Airshelf 设计系统</h1>
<p>本页是 <code class="tk">design.md</code> 的可视化样板间。所有 token / 组件均来自 <code class="tk">assets/restraint.css</code> —— <strong style="color:var(--accent-black)">看到的就是页面用的</strong>。点击色块复制 token,hover / 点击组件看真实交互反馈。</p>
<div class="meta">
<span>[ Restraint · V2.1 ]</span>
@@ -1388,7 +1388,7 @@ code.tk.heat { background: var(--heat-12); color: var(--heat); border-color: var
<div class="section-head">
<span class="mono-tag">// §2.5 · TYPE · MIXED STRATEGY</span>
<h2>字体系统 · 中英协作</h2>
<p><code class="tk">Inter</code>(英文/数字)+ <code class="tk">Alibaba PuHuiTi</code>(中文)+ <code class="tk">JetBrains Mono</code>(装饰)。浏览器按字符级 fallthrough,<strong>不需要 JS,中英自然分工</strong>。</p>
<p><code class="tk">Inter</code>(英文/数字)+ <code class="tk">Alibaba PuHuiTi</code>(中文)+ <code class="tk">Inter</code>(装饰)。浏览器按字符级 fallthrough,<strong>不需要 JS,中英自然分工</strong>。</p>
</div>
<div class="subsection">
@@ -1406,7 +1406,7 @@ code.tk.heat { background: var(--heat-12); color: var(--heat); border-color: var
</div>
<div style="padding:24px 26px;border:1px solid var(--border-faint);border-radius:8px;background:var(--surface)">
<div style="font-family:var(--font-mono);font-size:10.5px;color:var(--black-alpha-48);letter-spacing:.06em;margin-bottom:14px">// 03 · 装饰 MONO</div>
<div style="font-family:var(--font-mono);font-size:22px;font-weight:500;color:var(--accent-black);margin-bottom:8px">JetBrains</div>
<div style="font-family:var(--font-mono);font-size:22px;font-weight:500;color:var(--accent-black);margin-bottom:8px">Inter</div>
<div style="font-family:var(--font-mono);font-size:12px;color:var(--black-alpha-64);line-height:1.6;letter-spacing:.02em">[ 200 OK ] · // 05.14 · /v2 — 仅装饰,不参与正文。</div>
</div>
</div>
@@ -1422,19 +1422,19 @@ code.tk.heat { background: var(--heat-12); color: var(--heat); border-color: var
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px">
<div style="padding:20px 22px;border:1px solid var(--border-faint);border-radius:8px;background:var(--surface)">
<div style="font-family:var(--font-mono);font-size:10.5px;color:var(--black-alpha-48);letter-spacing:.04em;margin-bottom:10px">// REGULAR · 400</div>
<div style="font-size:18px;font-weight:400;color:var(--accent-black)">流·Studio · Aa Bb 123</div>
<div style="font-size:18px;font-weight:400;color:var(--accent-black)">Airshelf · Aa Bb 123</div>
</div>
<div style="padding:20px 22px;border:1px solid var(--heat-20);border-radius:8px;background:var(--heat-8)">
<div style="font-family:var(--font-mono);font-size:10.5px;color:var(--heat);letter-spacing:.04em;margin-bottom:10px">// MEDIUM · 500 ★ 默认</div>
<div style="font-size:18px;font-weight:500;color:var(--accent-black)">流·Studio · Aa Bb 123</div>
<div style="font-size:18px;font-weight:500;color:var(--accent-black)">Airshelf · Aa Bb 123</div>
</div>
<div style="padding:20px 22px;border:1px solid var(--border-faint);border-radius:8px;background:var(--surface)">
<div style="font-family:var(--font-mono);font-size:10.5px;color:var(--black-alpha-48);letter-spacing:.04em;margin-bottom:10px">// SEMIBOLD · 600</div>
<div style="font-size:18px;font-weight:600;color:var(--accent-black)">流·Studio · Aa Bb 123</div>
<div style="font-size:18px;font-weight:600;color:var(--accent-black)">Airshelf · Aa Bb 123</div>
</div>
<div style="padding:20px 22px;border:1px solid var(--border-faint);border-radius:8px;background:var(--surface)">
<div style="font-family:var(--font-mono);font-size:10.5px;color:var(--black-alpha-48);letter-spacing:.04em;margin-bottom:10px">// BOLD · 700 · 限徽标</div>
<div style="font-size:18px;font-weight:700;color:var(--accent-black)">流·Studio · Aa Bb 123</div>
<div style="font-size:18px;font-weight:700;color:var(--accent-black)">Airshelf · Aa Bb 123</div>
</div>
</div>
<p class="mono" style="margin-top:14px">// Bold 700 仅用于 Ctrl K 这种纯英文徽标场景 · 正文严禁 700(中英字重错位会暴露)</p>
@@ -1491,7 +1491,7 @@ code.tk.heat { background: var(--heat-12); color: var(--heat); border-color: var
<div class="sample" style="font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;color:var(--black-alpha-56);letter-spacing:.02em">Ctrl K · ESC · Enter · ⇧+Tab</div>
</div>
<div class="type-row">
<div class="meta-col"><strong>Mono 标签</strong>11 / 400 / 0.04em · JetBrains</div>
<div class="meta-col"><strong>Mono 标签</strong>11 / 400 / 0.04em · Inter</div>
<div class="sample" style="font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--black-alpha-48)">[ 200 OK ] [ .MP4 · 9:16 ] [ /v2 ]</div>
</div>
<div class="type-row">
@@ -1605,8 +1605,7 @@ code.tk.heat { background: var(--heat-12); color: var(--heat); border-color: var
<div class="subsection">
<h3>HTML 模板</h3>
<pre class="codebox">&lt;link rel="stylesheet" href="assets/restraint.css"&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700
&amp;family=JetBrains+Mono:wght@400;500&amp;display=swap" rel="stylesheet"&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet"&gt;
&lt;div class="app"&gt;
&lt;aside class="sidebar"&gt;&lt;!-- shell.js 注入 --&gt;&lt;/aside&gt;
@@ -1971,7 +1970,7 @@ code.tk.heat { background: var(--heat-12); color: var(--heat); border-color: var
<input class="input" placeholder="搜索任意内容..."/>
<span class="k">Ctrl K</span>
</div>
<p class="mono" style="margin-top:12px">// 关键坑:左侧 icon 必须 z-index: 2(否则被 input 白底盖住)· Ctrl K 用纯文本不用 ⌘(JetBrains Mono 不带该字形)</p>
<p class="mono" style="margin-top:12px">// 关键坑:左侧 icon 必须 z-index: 2(否则被 input 白底盖住)· Ctrl K 用纯文本不用 ⌘(Inter 不带该字形)</p>
</div>
</section>
@@ -2552,7 +2551,7 @@ code.tk.heat { background: var(--heat-12); color: var(--heat); border-color: var
<!-- ② Meta -->
<div class="gen-meta">
<span class="m-item">流·Studio v2</span>
<span class="m-item">Airshelf v2</span>
<span class="m-sep">|</span>
<span class="m-item">1:1</span>
<span class="m-sep">|</span>
@@ -2628,7 +2627,7 @@ code.tk.heat { background: var(--heat-12); color: var(--heat); border-color: var
<span class="text">东方美人 · 古典园林背景 · 短视频 9:16</span>
</div>
<div class="gen-meta">
<span class="m-item">流·Studio v2</span>
<span class="m-item">Airshelf v2</span>
<span class="m-sep">|</span>
<span class="m-item">9:16</span>
<span class="m-sep">|</span>
@@ -2696,7 +2695,7 @@ code.tk.heat { background: var(--heat-12); color: var(--heat); border-color: var
<div class="section-head">
<span class="mono-tag">// §5 · MONO DECOR · 品牌签名</span>
<h2>Mono 装饰元素</h2>
<p>方括号标签 / 双斜杠注释 / 中点连接 —— 这些是流·Studio 独有的"调试视图感",<strong>Firecrawl 没有,绝对保留</strong>。</p>
<p>方括号标签 / 双斜杠注释 / 中点连接 —— 这些是Airshelf 独有的"调试视图感",<strong>Firecrawl 没有,绝对保留</strong>。</p>
</div>
<div class="subsection">
@@ -2909,7 +2908,7 @@ code.tk.heat { background: var(--heat-12); color: var(--heat); border-color: var
<div class="dont-list-item"><span class="x">×</span><span><strong style="color:var(--accent-black)">同一行混用直角和圆角</strong> · 用户原话:"不要有些是直角,胶囊又是圆角"</span></div>
<div class="dont-list-item"><span class="x">×</span><span><strong style="color:var(--accent-black)">页面 inline style 重写共享类</strong> · 要变体先改 restraint.css</span></div>
<div class="dont-list-item"><span class="x">×</span><span><strong style="color:var(--accent-black)">新建色值</strong> · 必须复用现有 token</span></div>
<div class="dont-list-item"><span class="x">×</span><span><strong style="color:var(--accent-black)">⌘ Unicode 字符</strong> · JetBrains Mono 不带该字形 · 用 "Ctrl K" 纯文本</span></div>
<div class="dont-list-item"><span class="x">×</span><span><strong style="color:var(--accent-black)">⌘ Unicode 字符</strong> · Inter 不带该字形 · 用 "Ctrl K" 纯文本</span></div>
</div>
</section>
@@ -2935,7 +2934,7 @@ code.tk.heat { background: var(--heat-12); color: var(--heat); border-color: var
<div class="ch"><span class="stage">// STAGE 02</span><span class="ti">写代码时</span></div>
<ul class="cl-list">
<li><span class="mk"></span>HTML 用 <code class="tk">app &gt; sidebar + main &gt; topbar + content</code> 骨架</li>
<li><span class="mk"></span>head 含 <code class="tk">assets/restraint.css</code> + Inter + JetBrains Mono</li>
<li><span class="mk"></span>head 含 <code class="tk">assets/restraint.css</code> + Inter</li>
<li><span class="mk"></span>body 末尾 <code class="tk">assets/shell.js</code></li>
<li><span class="mk"></span>标题区用 <code class="tk">.page-head &gt; h1 + .sub</code></li>
<li><span class="mk"></span>主操作按钮放 <code class="tk">.page-head &gt; .actions</code>(自动 40 px 高)</li>