统一 Airshelf 界面组件与图标
This commit is contained in:
iye
+13
-12
@@ -1,4 +1,4 @@
|
||||
# 流·Studio 设计规范 · design.md
|
||||
# Airshelf 设计规范 · design.md
|
||||
|
||||
> **唯一权威 source of truth** · 所有页面调整必须遵循本文件。
|
||||
> **代号:** Restraint(克制)· V2.1 · Firecrawl-aligned
|
||||
@@ -108,7 +108,7 @@
|
||||
| ---- | -------- | -------- |
|
||||
| 正文 / UI · `--font-sans` | `'Inter', 'Alibaba PuHuiTi', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif` | Inter Google Fonts + 普惠体 CDN |
|
||||
| 强制纯英 · `--font-inter` | `'Inter', system-ui, sans-serif` | 用于 Ctrl K 等英文徽标 |
|
||||
| Mono 装饰 · `--font-mono` | `'JetBrains Mono', 'Geist Mono', ui-monospace, 'Alibaba PuHuiTi', 'PingFang SC', 'Microsoft YaHei', monospace` | JetBrains Google Fonts |
|
||||
| 数字 / 装饰 · `--font-mono` | `'Inter', 'Alibaba PuHuiTi', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif` | Inter Google Fonts |
|
||||
|
||||
**字符级 fallthrough 原理:** 浏览器对每个字符逐个查找,Inter 不含 CJK → 中文自动跳到普惠体。**不需要 JS,不会字重错位。**
|
||||
|
||||
@@ -224,16 +224,17 @@
|
||||
```html
|
||||
<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">
|
||||
<link rel="stylesheet" href="assets/restraint.css">
|
||||
```
|
||||
|
||||
每个新页面 `<body>` 末尾:
|
||||
```html
|
||||
<script src="assets/icons.js" defer></script>
|
||||
<script src="assets/shell.js" defer></script>
|
||||
```
|
||||
|
||||
`shell.js` 自动注入 sidebar + topbar,**页面只写 `<main>` 内的 `.content` 内容**。
|
||||
`icons.js` 提供统一 Lucide-line 图标注册表;`shell.js` 自动注入 sidebar + topbar,**页面只写 `<main>` 内的 `.content` 内容**。
|
||||
|
||||
### §3.2 标题区(必有)
|
||||
|
||||
@@ -399,7 +400,7 @@
|
||||
|
||||
**带 Ctrl K 搜索框关键坑:**
|
||||
1. 左侧 icon 必须 `z-index: 2`(否则被 input 白底盖住)
|
||||
2. 用 "Ctrl K" 纯文本,**不要用 `⌘` 字符**(JetBrains Mono 不带该字形,显示成方框)
|
||||
2. 用 "Ctrl K" 纯文本,**不要用 `⌘` 字符**(Inter 不带该字形,显示成方框)
|
||||
3. 快捷键提示不要 kbd 边框,**纯灰色 mono 平铺**(克制)
|
||||
4. 字体用 `var(--font-inter) / 700`(Inter Bold 紧凑感)
|
||||
|
||||
@@ -525,7 +526,7 @@ Disabled: 底 `--black-alpha-5` + 边 `--black-alpha-12` + 半透明。
|
||||
|
||||
**通用规则:**
|
||||
- 一律 **SVG inline**,禁止 `<img>` 引图标
|
||||
- 库:Lucide 或 Phosphor Regular
|
||||
- 库:统一使用本地 Lucide-line 注册表 `assets/icons.js` 的 `IconKit.svg(name, opts)`,禁止页面内临时手写另一套图标
|
||||
- `stroke-width: 1.5` / `stroke-linecap: round` / `stroke-linejoin: round` / `fill: none`
|
||||
- 颜色:`stroke="currentColor"` 继承
|
||||
- **禁:** 彩色 emoji / filled icon
|
||||
@@ -878,7 +879,7 @@ Modal 内多选 picker:`bg --background-lighter / padding 10 / display flex colu
|
||||
|
||||
<!-- ② Meta chip 行(竖线分隔) -->
|
||||
<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>
|
||||
@@ -970,7 +971,7 @@ img.addEventListener('click', () => {
|
||||
|
||||
## §5 · Mono 装饰元素(品牌签名 · 不能丢)
|
||||
|
||||
> 方括号标签 / 双斜杠注释 / 中点连接 —— 这些是流·Studio 独有的"调试视图感",Firecrawl 没有,绝对保留。
|
||||
> 方括号标签 / 双斜杠注释 / 中点连接 —— 这些是Airshelf 独有的"调试视图感",Firecrawl 没有,绝对保留。
|
||||
|
||||
| 用法 | 示例 |
|
||||
| ---- | ---- |
|
||||
@@ -1076,7 +1077,7 @@ img.addEventListener('click', () => {
|
||||
- ❌ **荧光状态色** — 避免霓虹绿、电光蓝、霓虹粉
|
||||
- ❌ **页面内 `<style>` 重写共享类**(`.btn` `.pill` `.input` `.modal` 等)— 改 restraint.css
|
||||
- ❌ **新建色 token** — 必须复用现有 token
|
||||
- ❌ **`⌘` Unicode 字符** — JetBrains Mono webfont 不带该字形,显示成方框 → 用 "Ctrl K" 纯文本或 SVG
|
||||
- ❌ **`⌘` Unicode 字符** — Inter webfont 不带该字形,显示成方框 → 用 "Ctrl K" 纯文本或 SVG
|
||||
- ❌ **多色 emoji icon / filled icon** — 一律 line icon
|
||||
- ❌ **居中卡片浮在背景上的"贴纸感"** — 用边框 + 装订线,不用阴影
|
||||
- ❌ **彩虹流光 / hover 旋转缩放** — 无意义微动效
|
||||
@@ -1094,8 +1095,8 @@ img.addEventListener('click', () => {
|
||||
|
||||
### 写代码时
|
||||
- [ ] HTML 用 `<div class="app"><aside class="sidebar"></aside><main><div class="topbar"></div><div class="content">…</div></main></div>` 骨架
|
||||
- [ ] head 含 `<link rel="stylesheet" href="assets/restraint.css">` + Inter + JetBrains Mono Google Fonts
|
||||
- [ ] body 末尾 `<script src="assets/shell.js" defer></script>`
|
||||
- [ ] head 含 `<link rel="stylesheet" href="assets/restraint.css">` + Inter Google Fonts
|
||||
- [ ] body 末尾先引 `<script src="assets/icons.js" defer></script>`,再引 `<script src="assets/shell.js" defer></script>`
|
||||
- [ ] 标题区用 `.page-head > h1 + .sub`
|
||||
- [ ] 主操作按钮放 `.page-head > .actions`(自动 40 px 高)
|
||||
- [ ] 子区块用 `.section-h > h2 + .more`
|
||||
@@ -1103,7 +1104,7 @@ img.addEventListener('click', () => {
|
||||
- [ ] 状态徽标全 `.pill.info/.ok/.err/.neutral` · 要新变体先回 restraint.css 加
|
||||
- [ ] 输入框全 `.input / .select / .textarea` · 字段用 `.field`
|
||||
- [ ] 浮层全用现成 Modal / Drawer / Toast
|
||||
- [ ] 图标 SVG line icon · stroke 1.5 / linecap round / `stroke="currentColor"`
|
||||
- [ ] 图标统一走 `IconKit.svg()` · SVG line icon · stroke 1.5 / linecap round / `stroke="currentColor"`
|
||||
- [ ] 时间戳 mono 注释 `// 05.22 · 周四`
|
||||
- [ ] 强调单词加深(不变橙) `<b style="color:var(--accent-black)">3 个</b>`
|
||||
- [ ] 数字加 `.num` 或 `tabular-nums`
|
||||
|
||||
Reference in New Issue
Block a user