{} },
{ label: 'Obsidian 知识管理', onClick: () => {} },
{ label: '学习地图' },
]} />
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
### 样张 · 窄处不换行
调用方传 flexWrap: nowrap + overflow: hidden，每项按剩余空间省略
React：
```jsx
import { Breadcrumb } from './components/v4/Breadcrumb.jsx'
export function Narrow() {
return (
{} },
{ label: 'Obsidian 知识管理', onClick: () => {} },
{ label: '双链与反向链接：让想法第一次连起来' },
]}
/>
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
## 属性
| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `items` | [{ label, onClick? }] | [] | 有 onClick 渲染为可点按钮；没有的是当前页（aria-current）；null 项自动过滤 |
| `style` | object | — | 并入 nav 容器；窄处传 flexWrap / overflow |
## 规格
12px · 项色 `#8B8B85`（由容器继承）· 分隔符 `#C6C6C0` · 当前项 `#161616` / 600 · 间距 8 · 行高 20。可点项用 `.zzm-inklink`：基色 `inherit`，悬停变墨，键盘焦点朱色光晕。
## 铁律
- ✓ 要：颜色交给容器继承
- ✗ 不要：在项上写内联 `color`——它会压死 :hover
- ✓ 要：轨迹由页面自己组，组件只管长相
## 本页用到的 CSS
按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：
```css
/* base.css */
.zzm-v4 .zzm-inklink { color: inherit; transition: color .16s ease; }
.zzm-v4 .zzm-inklink:hover { color: #161616; }
.zzm-v4 .zzm-inklink:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 3px rgba(166, 64, 47, .2); }
```
---
上一页：[徽章与档位](https://ui.zhaozimin.com/components/badge.md) · 下一页：[标签页](https://ui.zhaozimin.com/components/tabs.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 标签页 Tabs
url: https://ui.zhaozimin.com/components/tabs/
markdown: https://ui.zhaozimin.com/components/tabs.md
group: 组件
origin: 提炼自 edu AdmDesign 样张，ui.zhaozimin 是源头
source:
- src/extracted/Tabs.jsx # https://ui.zhaozimin.com/src/extracted/Tabs.jsx
- src/extracted/extracted.css # https://ui.zhaozimin.com/src/extracted/extracted.css
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 标签页 Tabs
> 下划线标签页。当前项墨色 600 加 2px 朱色下划线，其余灰字 450。那条朱线就是这一屏的「你在这里」。
### 样张 · 点一下试试
React：
```jsx
import { useState } from 'react'
import { Tabs } from './extracted/Tabs.jsx'
const ITEMS = ['概览', '课程', '设置']
const BODY = ['学习进度、最近观看与收藏。', '全部课程系列与课节。', '账户、通知与偏好。']
export default function TabsDemo() {
const [tab, setTab] = useState(0)
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
### 样张 · 静态标记
React：
```jsx
import { Tabs } from './extracted/Tabs.jsx'
export function Static() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
## 属性
| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `items` | string[] | [] | 标签文字 |
| `value` | number | 0 | 当前下标（受控） |
| `onChange` | (index) => void | — | 切换回调 |
| `label` | string | '标签页' | tablist 的读屏名 |
## 铁律
- ✓ 要：同屏用了朱色下划线，就不再用第二处朱色做装饰
- ✗ 不要：做成胶囊分段控件——需要分段时用 sm 按钮组（当前项墨键）
## 本页用到的 CSS
按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：
```css
/* tokens.css · 用到的令牌 */
:root {
--zzm-accent: #A6402F;
}
/* extracted.css */
.zzm-v4 .zzm-tab { transition: color .16s ease; }
.zzm-v4 .zzm-tab:hover { color: #161616 !important; }
.zzm-v4 .zzm-switch:focus-visible,
.zzm-v4 .zzm-check:focus-visible,
.zzm-v4 .zzm-tab:focus-visible,
.zzm-v4 .zzm-page:focus-visible,
.zzm-v4 .zzm-sort:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(166, 64, 47, .2);
}
```
---
上一页：[面包屑](https://ui.zhaozimin.com/components/breadcrumb.md) · 下一页：[分页](https://ui.zhaozimin.com/components/pagination.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 分页 Pagination
url: https://ui.zhaozimin.com/components/pagination/
markdown: https://ui.zhaozimin.com/components/pagination.md
group: 组件
origin: 提炼自 edu AdmDesign 样张，ui.zhaozimin 是源头
source:
- src/extracted/Pagination.jsx # https://ui.zhaozimin.com/src/extracted/Pagination.jsx
- src/extracted/extracted.css # https://ui.zhaozimin.com/src/extracted/extracted.css
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 分页 Pagination
> 26px 方格：当前页墨底白字，其余 .14 描边，省略号不加框。页数多时只留首页、末页和当前页前后各一页。
### 样张 · 点一下试试
React：
```jsx
import { useState } from 'react'
import { Pagination } from './extracted/Pagination.jsx'
export default function PaginationDemo() {
const [page, setPage] = useState(1)
return
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
### 样张 · 第 6 页 / 共 12 页
React：
```jsx
import { Pagination } from './extracted/Pagination.jsx'
export function Static() {
return
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
## 属性
| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `page` | number | 1 | 当前页（从 1 开始，受控） |
| `total` | number | 1 | 总页数；≤ 7 全部显示 |
| `onChange` | (page) => void | — | 翻页回调，已夹在 1…total 之间 |
## 本页用到的 CSS
按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：
```css
/* extracted.css */
.zzm-v4 .zzm-page { transition: border-color .16s ease; }
.zzm-v4 .zzm-page:not(:disabled):hover { border-color: rgba(0, 0, 0, .3) !important; }
.zzm-v4 .zzm-page:disabled { cursor: not-allowed; }
.zzm-v4 .zzm-switch:focus-visible,
.zzm-v4 .zzm-check:focus-visible,
.zzm-v4 .zzm-tab:focus-visible,
.zzm-v4 .zzm-page:focus-visible,
.zzm-v4 .zzm-sort:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(166, 64, 47, .2);
}
```
---
上一页：[标签页](https://ui.zhaozimin.com/components/tabs.md) · 下一页：[确认窗](https://ui.zhaozimin.com/components/dialog.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 确认窗 Dialog
url: https://ui.zhaozimin.com/components/dialog/
markdown: https://ui.zhaozimin.com/components/dialog.md
group: 组件
origin: 提炼自 edu AdmDesign 样张，ui.zhaozimin 是源头
source:
- src/extracted/ConfirmDialog.jsx # https://ui.zhaozimin.com/src/extracted/ConfirmDialog.jsx
- src/system/styles/v4/controls.css # https://ui.zhaozimin.com/src/system/styles/v4/controls.css
- src/extracted/extracted.css # https://ui.zhaozimin.com/src/extracted/extracted.css
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 确认窗 Dialog
> 纸面卡片、宽 440、圆角 16，遮罩只降亮不模糊——背景仍能认出正在操作什么。朱键只用于破坏性确认。
### 样张 · 真实弹出
Esc 或点遮罩＝取消；打开时焦点落在确认键，关闭后归还
React：
```jsx
import { useState } from 'react'
import { ConfirmProvider, useConfirm } from './extracted/ConfirmDialog.jsx'
import { Btn } from './components/v4/Button.jsx'
function Actions() {
const confirm = useConfirm()
const [result, setResult] = useState('还没有操作')
const remove = async () => {
const ok = await confirm({
title: '确认删除这条笔记？',
description: '此操作不可撤销。',
tone: 'destructive',
confirmText: '删除',
})
setResult(ok ? '已删除' : '已取消')
}
const publish = async () => {
const ok = await confirm({ title: '发布这节课？', description: '发布后学员立即可见。', confirmText: '发布' })
setResult(ok ? '已发布' : '已取消')
}
return (
删除笔记
发布课节
{result}
)
}
export default function DialogDemo() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
还没有操作
```
### 样张 · 破坏性确认
面板本身（inline 陈列）
React：
```jsx
import { ConfirmPanel } from './extracted/ConfirmDialog.jsx'
export function Destructive() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
### 样张 · 普通确认
React：
```jsx
import { ConfirmPanel } from './extracted/ConfirmDialog.jsx'
export function Normal() {
return
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
## useConfirm()
与 edu 的 `useDialog().confirm` 同一个形状：在根部挂一次 `ConfirmProvider`，任何地方 `await confirm({...})` 拿到 `true / false`。
| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `title` | string | — | 标题（17px / 700） |
| `description` | string | — | 说明（13px / 20，灰） |
| `tone` | 'default' · 'primary' · 'destructive' | 'default' | 确认键：墨键，破坏性用朱键 |
| `confirmText` | string | '确认' | 确认键文字，写动作本身（「删除」而不是「确定」） |
| `cancelText` | string | '取消' | 取消键文字 |
## 从 edu 到这里改了什么
edu 的确认窗建在 shadcn `dialog.jsx` 与 Tailwind 工具类上。这里去掉了这两层依赖：皮肤仍是 `controls.css` 的 `.zzm-dialog-*`，定位与入场由 `extracted.css` 用纯 CSS 补齐，所以不装 Tailwind 也能 1:1 成立。
## 铁律
- ✓ 要：朱键只给「删除、作废、注销」这类破坏性确认
- ✗ 不要：用 `window.confirm()` 原生灰框
- ✓ 要：遮罩 `rgba(22,22,22,.46)`，只降亮
- ✗ 不要：给遮罩加模糊
## 本页用到的 CSS
按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：
```css
/* controls.css */
.zzm-v4 .zzm-btn {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 36px;
padding: 0 16px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: .2px;
white-space: nowrap;
cursor: pointer;
user-select: none;
border-radius: 8px; /* 圆角矩形——按钮禁胶囊 */
border: 1px solid rgba(0, 0, 0, .14);
color: #3F3F3B;
background: linear-gradient(180deg, #FFFFFF 0%, #F2F2EF 100%);
box-shadow:
0 0 0 3px rgba(255, 255, 255, .55), /* ④ 反光光晕环 */
0 1px 2px rgba(0, 0, 0, .09), /* ③ 近影 */
0 2px 6px rgba(0, 0, 0, .06), /* ③ 远影 */
inset 0 1px 0 rgba(255, 255, 255, .92), /* ② 顶部反光 */
inset 0 -1px 0 rgba(0, 0, 0, .05); /* ① 底缘收沉 */
transition: box-shadow .16s ease, transform .16s ease, background .16s ease,
border-color .16s ease, filter .16s ease, opacity .16s ease;
}
.zzm-v4 .zzm-btn:hover {
transform: translateY(-1px);
border-color: rgba(0, 0, 0, .18);
box-shadow:
0 0 0 4px rgba(255, 255, 255, .8),
0 2px 4px rgba(0, 0, 0, .10),
0 4px 12px rgba(0, 0, 0, .09),
inset 0 1px 0 rgba(255, 255, 255, .95),
inset 0 -1px 0 rgba(0, 0, 0, .05);
}
.zzm-v4 .zzm-btn:active {
transform: translateY(0);
background: linear-gradient(180deg, #ECECE9 0%, #F4F4F1 100%); /* ⑤ 凹面翻转 */
box-shadow:
0 0 0 3px rgba(255, 255, 255, .45),
0 1px 0 rgba(255, 255, 255, .65),
inset 0 2px 4px rgba(0, 0, 0, .13),
inset 0 1px 2px rgba(0, 0, 0, .09);
}
.zzm-v4 .zzm-btn:focus-visible {
outline: none;
box-shadow:
0 0 0 3px rgba(166, 64, 47, .20), /* 键盘焦点＝朱色光晕 */
0 1px 2px rgba(0, 0, 0, .09),
0 2px 6px rgba(0, 0, 0, .06),
inset 0 1px 0 rgba(255, 255, 255, .92);
}
.zzm-v4 .zzm-btn:disabled {
cursor: not-allowed;
transform: none;
}
.zzm-v4 .zzm-btn:disabled:not(.zzm-btn--busy) {
color: #A2A29C;
background: #F2F2EF;
border-color: rgba(0, 0, 0, .08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .04);
}
.zzm-v4 .zzm-btn--primary {
color: #FFFFFF;
border-color: rgba(0, 0, 0, .85);
background: linear-gradient(180deg, #3A3A36 0%, #1D1D1B 58%, #141412 100%);
box-shadow:
0 0 0 3px rgba(22, 22, 22, .06),
0 1px 2px rgba(0, 0, 0, .18),
0 3px 10px rgba(22, 22, 22, .24),
inset 0 1px 0 rgba(255, 255, 255, .20),
inset 0 -1px 0 rgba(0, 0, 0, .38);
}
.zzm-v4 .zzm-btn--primary:hover {
filter: brightness(1.12);
border-color: rgba(0, 0, 0, .85);
box-shadow:
0 0 0 4px rgba(22, 22, 22, .09),
0 2px 4px rgba(0, 0, 0, .20),
0 5px 14px rgba(22, 22, 22, .28),
inset 0 1px 0 rgba(255, 255, 255, .24),
inset 0 -1px 0 rgba(0, 0, 0, .38);
}
.zzm-v4 .zzm-btn--primary:active {
filter: none;
background: linear-gradient(180deg, #101010 0%, #22221F 100%);
box-shadow:
0 0 0 3px rgba(22, 22, 22, .06),
inset 0 2px 5px rgba(0, 0, 0, .55),
inset 0 1px 2px rgba(0, 0, 0, .4);
}
.zzm-v4 .zzm-btn--accent {
color: #FFFFFF;
border-color: rgba(122, 42, 29, .9);
background: linear-gradient(180deg, #C25743 0%, #A6402F 56%, #99392A 100%);
box-shadow:
0 0 0 3px rgba(166, 64, 47, .10), /* 朱色反光光晕 */
0 1px 2px rgba(0, 0, 0, .14),
0 3px 10px rgba(166, 64, 47, .28),
inset 0 1px 0 rgba(255, 255, 255, .32),
inset 0 -1px 0 rgba(0, 0, 0, .20);
}
.zzm-v4 .zzm-btn--accent:hover {
filter: brightness(1.06);
border-color: rgba(122, 42, 29, .9);
box-shadow:
0 0 0 4px rgba(166, 64, 47, .16),
0 2px 4px rgba(0, 0, 0, .16),
0 5px 14px rgba(166, 64, 47, .34),
inset 0 1px 0 rgba(255, 255, 255, .36),
inset 0 -1px 0 rgba(0, 0, 0, .20);
}
.zzm-v4 .zzm-btn--accent:active {
filter: none;
background: linear-gradient(180deg, #8E3425 0%, #A03D2C 100%);
box-shadow:
0 0 0 3px rgba(166, 64, 47, .10),
inset 0 2px 5px rgba(0, 0, 0, .34),
inset 0 1px 2px rgba(0, 0, 0, .24);
}
.zzm-v4 .zzm-btn--sm { height: 28px; padding: 0 12px; font-size: 12px; gap: 4px; }
.zzm-v4 .zzm-btn--icon.zzm-btn--sm { width: 28px; }
.zzm-v4 .zzm-dialog-panel {
width: min(calc(100% - 32px), 440px);
max-width: 440px;
gap: 16px;
padding: 24px;
border: 1px solid rgba(0, 0, 0, .14);
border-radius: 16px;
background: #FFFFFF;
box-shadow:
0 1px 2px rgba(0, 0, 0, .10),
0 18px 48px rgba(0, 0, 0, .22),
inset 0 1px 0 rgba(255, 255, 255, .92);
}
.zzm-v4 .zzm-dialog-title {
color: #1D1D1B;
font-size: 17px;
font-weight: 700;
line-height: 24px;
}
.zzm-v4 .zzm-dialog-description {
color: #6E6E68;
font-size: 13px;
line-height: 20px;
}
.zzm-v4 .zzm-dialog-actions {
margin-top: 4px;
gap: 8px;
}
/* extracted.css */
.zzm-v4 .zzm-dialog-panel {
position: fixed; top: 50%; left: 50%; z-index: 51; display: grid;
transform: translate(-50%, -50%); animation: zzmDialogIn .2s cubic-bezier(.2, .7, .2, 1) both;
}
.zzm-v4 .zzm-dialog-panel--inline { position: relative; top: auto; left: auto; z-index: auto; transform: none; animation: none; }
.zzm-v4 .zzm-dialog-header { display: grid; gap: 8px; }
.zzm-v4 .zzm-dialog-title,
.zzm-v4 .zzm-dialog-description { margin: 0; }
.zzm-v4 .zzm-dialog-actions { display: flex; justify-content: flex-end; }
/* keyframes */
@keyframes zzmDialogIn {
from { opacity: 0; transform: translate(-50%, -50%) scale(.96) }
to { opacity: 1; transform: translate(-50%, -50%) }
}
```
---
上一页：[分页](https://ui.zhaozimin.com/components/pagination.md) · 下一页：[轻提示](https://ui.zhaozimin.com/components/toast.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 轻提示 Toast
url: https://ui.zhaozimin.com/components/toast/
markdown: https://ui.zhaozimin.com/components/toast.md
group: 组件
origin: 提炼自 edu AdmDesign 样张，ui.zhaozimin 是源头
source:
- src/extracted/Feedback.jsx # https://ui.zhaozimin.com/src/extracted/Feedback.jsx
- src/extracted/extracted.css # https://ui.zhaozimin.com/src/extracted/extracted.css
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 轻提示 Toast
> 深墨胶囊，从下方浮起，1.8 秒后消失。它不可点，所以可以是胶囊。文案说结果，不说过程：「已保存到你的笔记库」。
### 样张 · 点一下试试
React：
```jsx
import { useRef, useState } from 'react'
import { Toast } from './extracted/Feedback.jsx'
import { Btn } from './components/v4/Button.jsx'
export default function ToastDemo() {
const [show, setShow] = useState(false)
const timer = useRef(null)
const fire = () => {
clearTimeout(timer.current)
setShow(false)
requestAnimationFrame(() => setShow(true))
timer.current = setTimeout(() => setShow(false), 1800)
}
return (
保存笔记
{show ? ✓ 已保存到你的笔记库 : null}
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
### 样张 · 静态样式
React：
```jsx
import { Toast } from './extracted/Feedback.jsx'
export function Static() {
return ✓ 已保存到你的笔记库
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
✓ 已保存到你的笔记库
```
## 定位的坑
`.zzm-toast` 带 `zzmUp` 进场动画，动画结束帧是 `transform: none`——如果你用 `left 50%` 加 `translateX(-50%)` 居中，动画会把 transform 覆盖掉，提示就偏到右边去了。**用外层 flex 居中**：
正确的居中方式：
```html
```
## 铁律
- ✓ 要：说结果：「已保存」「已复制」「已删除」
- ✗ 不要：说过程或道歉：「操作成功！」「抱歉，出错了」
- ✓ 要：1.8 秒自动消失；出错要让人处理时用确认窗或内联错误
## 本页用到的 CSS
按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：
```css
/* controls.css */
.zzm-v4 .zzm-btn {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 36px;
padding: 0 16px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: .2px;
white-space: nowrap;
cursor: pointer;
user-select: none;
border-radius: 8px; /* 圆角矩形——按钮禁胶囊 */
border: 1px solid rgba(0, 0, 0, .14);
color: #3F3F3B;
background: linear-gradient(180deg, #FFFFFF 0%, #F2F2EF 100%);
box-shadow:
0 0 0 3px rgba(255, 255, 255, .55), /* ④ 反光光晕环 */
0 1px 2px rgba(0, 0, 0, .09), /* ③ 近影 */
0 2px 6px rgba(0, 0, 0, .06), /* ③ 远影 */
inset 0 1px 0 rgba(255, 255, 255, .92), /* ② 顶部反光 */
inset 0 -1px 0 rgba(0, 0, 0, .05); /* ① 底缘收沉 */
transition: box-shadow .16s ease, transform .16s ease, background .16s ease,
border-color .16s ease, filter .16s ease, opacity .16s ease;
}
.zzm-v4 .zzm-btn:hover {
transform: translateY(-1px);
border-color: rgba(0, 0, 0, .18);
box-shadow:
0 0 0 4px rgba(255, 255, 255, .8),
0 2px 4px rgba(0, 0, 0, .10),
0 4px 12px rgba(0, 0, 0, .09),
inset 0 1px 0 rgba(255, 255, 255, .95),
inset 0 -1px 0 rgba(0, 0, 0, .05);
}
.zzm-v4 .zzm-btn:active {
transform: translateY(0);
background: linear-gradient(180deg, #ECECE9 0%, #F4F4F1 100%); /* ⑤ 凹面翻转 */
box-shadow:
0 0 0 3px rgba(255, 255, 255, .45),
0 1px 0 rgba(255, 255, 255, .65),
inset 0 2px 4px rgba(0, 0, 0, .13),
inset 0 1px 2px rgba(0, 0, 0, .09);
}
.zzm-v4 .zzm-btn:focus-visible {
outline: none;
box-shadow:
0 0 0 3px rgba(166, 64, 47, .20), /* 键盘焦点＝朱色光晕 */
0 1px 2px rgba(0, 0, 0, .09),
0 2px 6px rgba(0, 0, 0, .06),
inset 0 1px 0 rgba(255, 255, 255, .92);
}
.zzm-v4 .zzm-btn:disabled {
cursor: not-allowed;
transform: none;
}
.zzm-v4 .zzm-btn:disabled:not(.zzm-btn--busy) {
color: #A2A29C;
background: #F2F2EF;
border-color: rgba(0, 0, 0, .08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .04);
}
/* extracted.css */
.zzm-v4 .zzm-toast {
display: inline-block; background: #1D1D1B; color: #FFFFFF; font-size: 12px;
padding: 9px 18px; border-radius: 999px; white-space: nowrap;
box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
animation: zzmUp .25s ease both;
}
/* keyframes */
@keyframes zzmUp { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
```
---
上一页：[确认窗](https://ui.zhaozimin.com/components/dialog.md) · 下一页：[进度条](https://ui.zhaozimin.com/components/progress.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 进度条 Progress
url: https://ui.zhaozimin.com/components/progress/
markdown: https://ui.zhaozimin.com/components/progress.md
group: 组件
origin: 提炼自 edu AdmDesign 样张，ui.zhaozimin 是源头
source:
- src/extracted/Feedback.jsx # https://ui.zhaozimin.com/src/extracted/Feedback.jsx
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 进度条 Progress
> 4px 细轨，.09 灰底，朱色填充。高度 ≤ 8px 的微件允许 2px 端帽圆角。
### 样张 · 24% · 64% · 100%
React：
```jsx
import { Progress } from './extracted/Feedback.jsx'
export function Values() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `value` | 0–100 | 0 | 百分比，自动夹紧 |
| `label` | string | '进度' | progressbar 的读屏名 |
## 铁律
- ✓ 要：朱色填充表示「你走到了这里」
- ✗ 不要：同屏多条朱色进度条——只有当前关注的那条用朱色，其余用墨色
---
上一页：[轻提示](https://ui.zhaozimin.com/components/toast.md) · 下一页：[骨架屏](https://ui.zhaozimin.com/components/skeleton.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 骨架屏 Skeleton
url: https://ui.zhaozimin.com/components/skeleton/
markdown: https://ui.zhaozimin.com/components/skeleton.md
group: 组件
origin: 逐字同步自 edu.zhaozimin v23.5.1（086937d），edu 是源头
source:
- src/system/components/v4/Skeleton.jsx # https://ui.zhaozimin.com/src/system/components/v4/Skeleton.jsx
- src/system/styles/v4/base.css # https://ui.zhaozimin.com/src/system/styles/v4/base.css
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 骨架屏 Skeleton
> 纸灰底块，一道微光 1.4 秒扫过。取代「LOADING…」文字。卡片不另写骨架——同一个组件传 loading，骨架与真实态共用同一段布局。
### 样张 · 基础骨架块
React：
```jsx
import { Skel } from './components/v4/Skeleton.jsx'
export function Lines() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `w` | number · string | '100%' | 宽：数字为 px，也可写百分比 |
| `h` | number · string | 12 | 高 |
| `r` | number | 8 | 圆角（取圆角梯） |
| `style` | object | — | 并入，常用于 marginTop |
## 卡片自带骨架
课程卡、系列卡、课节卡都接受 `loading`：在同一段 JSX 里把数据位换成 `Skel`。改真卡的内距或字号，骨架自动跟着变——能消失的分支比能写对的分支好。
### 样张 · CourseCard · SeriesCard · LessonCard
React：
```jsx
import { CourseCard } from './components/v4/CourseCard.jsx'
import { SeriesCard } from './screens/v4/course/SeriesCard.jsx'
import { LessonCard } from './screens/v4/course/LessonCard.jsx'
export function CardSkeletons() {
return (
<>
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
## 铁律
- ✓ 要：骨架与真实态同源（loading prop）
- ✗ 不要：单独手写一份「看起来差不多」的骨架组件
- ✗ 不要：用「加载中…」文字或转圈占位整块内容
## 本页用到的 CSS
按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：
```css
/* base.css */
.zzm-v4 .zzm-skel {
position: relative;
overflow: hidden;
background: #EFEFEC;
border-radius: 8px;
}
.zzm-v4 .zzm-skel::after {
content: '';
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
animation: zzmShimmer 1.4s ease infinite;
}
/* controls.css */
.zzm-v4 .zzm-cardlink {
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, .09);
border-radius: 16px;
padding: 12px;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.zzm-v4 .zzm-cardlink:hover {
transform: translateY(-3px);
border-color: rgba(0, 0, 0, .3);
box-shadow: 0 10px 30px rgba(0, 0, 0, .09), 0 1px 2px rgba(0, 0, 0, .04);
}
/* keyframes */
@keyframes zzmShimmer { 100% { transform: translateX(100%) } }
```
---
上一页：[进度条](https://ui.zhaozimin.com/components/progress.md) · 下一页：[卡片与卡链](https://ui.zhaozimin.com/components/card.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 卡片与卡链 Card
url: https://ui.zhaozimin.com/components/card/
markdown: https://ui.zhaozimin.com/components/card.md
group: 组件
origin: 逐字同步自 edu.zhaozimin v23.5.1（086937d），edu 是源头
source:
- src/system/styles/v4/controls.css # https://ui.zhaozimin.com/src/system/styles/v4/controls.css
- src/system/styles/v4/base.css # https://ui.zhaozimin.com/src/system/styles/v4/base.css
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 卡片与卡链 Card
> 两种容器：.zzm-card 是浮在纸上的白面板；.zzm-cardlink 是可点的内容卡——悬停时描边加深、上浮 3px、落下柔影。
## 浮起面板
### 样张 · .zzm-card
白面 · .09 细线 · 圆角 16 · 两层落影 + 顶部反光
React：
```jsx
export function Panel() {
return (
本周
完成 6 节 · 共 92 分钟
比上周多 2 节。
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
本周
完成 6 节 · 共 92 分钟
比上周多 2 节。
```
## 可点卡链
课节、历史、收藏这类「点进去」的卡统一用 `.zzm-cardlink`：白卡承托、内距 12、内嵌图圆角 12。把鼠标移上去。
### 样张 · .zzm-cardlink
React：
```jsx
export function CardLink() {
return (
双链与反向链接
让想法第一次连起来。
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
双链与反向链接
让想法第一次连起来。
```
### 样张 · 完成态 --done
整卡朱色 4% 底 + 35% 描边；必须走类，内联 borderColor 会压死悬停描边
React：
```jsx
export function Done() {
return (
为什么是 Obsidian
整卡朱染：远看就知道这节看完了。
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
为什么是 Obsidian
整卡朱染：远看就知道这节看完了。
```
## 类名
| 类 | 用途 |
|---|---|
| `.zzm-card` | 静态内容面板：统计、表单卡、说明卡 |
| `.zzm-cardlink` | 可点内容卡：悬停描边 .3 + 上浮 3px + 柔影 |
| `.zzm-cardlink--done` | 已完成：整卡朱染 |
| `.zzm-hovercard` | 课程卡 / 系列卡的悬停手感（与 cardlink 相同，不带白卡承托） |
## 铁律
- ✓ 要：卡 16、卡内嵌图 12
- ✗ 不要：在卡上内联写 `box-shadow` 或 `borderColor`
- ✓ 要：完成态用容器级朱染
- ✗ 不要：在角落放一个 18px 小勾让人去找
## 本页用到的 CSS
按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：
```css
/* tokens.css · 用到的令牌 */
:root {
--zzm-mono: ui-monospace, "SF Mono", Menlo, monospace;
}
/* controls.css */
.zzm-v4 .zzm-cardlink {
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, .09);
border-radius: 16px;
padding: 12px;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.zzm-v4 .zzm-cardlink:hover {
transform: translateY(-3px);
border-color: rgba(0, 0, 0, .3);
box-shadow: 0 10px 30px rgba(0, 0, 0, .09), 0 1px 2px rgba(0, 0, 0, .04);
}
.zzm-v4 .zzm-cardlink--done {
background: rgba(166, 64, 47, .04);
border-color: rgba(166, 64, 47, .35);
}
.zzm-v4 .zzm-cardlink--done:hover {
border-color: rgba(166, 64, 47, .55);
}
.zzm-v4 .zzm-card {
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, .09);
border-radius: 16px;
box-shadow:
0 1px 2px rgba(0, 0, 0, .04),
0 6px 18px rgba(0, 0, 0, .05),
inset 0 1px 0 rgba(255, 255, 255, .85);
}
```
---
上一页：[骨架屏](https://ui.zhaozimin.com/components/skeleton.md) · 下一页：[课程卡](https://ui.zhaozimin.com/components/course-card.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 课程卡 CourseCard
url: https://ui.zhaozimin.com/components/course-card/
markdown: https://ui.zhaozimin.com/components/course-card.md
group: 组件
origin: 逐字同步自 edu.zhaozimin v23.5.1（086937d），edu 是源头
source:
- src/system/components/v4/CourseCard.jsx # https://ui.zhaozimin.com/src/system/components/v4/CourseCard.jsx
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 课程卡 CourseCard
> 综合首页与落地页共用的课程卡：16:9 暗底头图（封面或星座线稿）+ 名称、简介、适合人群、元数据与脚注动作。
登录后的综合首页卡就是基准形态；落地页不再维护变体，只换脚注文案与颜色。
### 样张 · 综合首页
脚注「进入课程 →」墨色；悬停上浮
React：
```jsx
import { CourseCard } from './components/v4/CourseCard.jsx'
const DEMO = {
num: '01',
name: 'Obsidian 知识管理',
intro: '从零搭建一套以你为中心、能用十年的知识管理系统。',
aud: '刚开始整理数字笔记的知识工作者',
cover: null,
art: {
pl: [{ pts: '28,78 84,30 132,62 186,22 214,52', c: 'rgba(255,255,255,.28)', w: '1.2' }],
dt: [
{ x: 28, y: 78, r: 2.4, f: '#FFFFFF' }, { x: 84, y: 30, r: 2.4, f: '#FFFFFF' },
{ x: 132, y: 62, r: 3.2, f: '@' }, { x: 186, y: 22, r: 2.4, f: '#FFFFFF' }, { x: 214, y: 52, r: 2.4, f: '#FFFFFF' },
],
},
}
export function Hub() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
Obsidian 知识管理
从零搭建一套以你为中心、能用十年的知识管理系统。
适合 · 刚开始整理数字笔记的知识工作者
6 系列 · 67 节
进入课程 →
```
### 样张 · 落地页
脚注换成朱色的下一步
React：
```jsx
import { CourseCard } from './components/v4/CourseCard.jsx'
const DEMO = {
num: '01',
name: 'Obsidian 知识管理',
intro: '从零搭建一套以你为中心、能用十年的知识管理系统。',
aud: '刚开始整理数字笔记的知识工作者',
cover: null,
art: {
pl: [{ pts: '28,78 84,30 132,62 186,22 214,52', c: 'rgba(255,255,255,.28)', w: '1.2' }],
dt: [
{ x: 28, y: 78, r: 2.4, f: '#FFFFFF' }, { x: 84, y: 30, r: 2.4, f: '#FFFFFF' },
{ x: 132, y: 62, r: 3.2, f: '@' }, { x: 186, y: 22, r: 2.4, f: '#FFFFFF' }, { x: 214, y: 52, r: 2.4, f: '#FFFFFF' },
],
},
}
export function Landing() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
Obsidian 知识管理
从零搭建一套以你为中心、能用十年的知识管理系统。
适合 · 刚开始整理数字笔记的知识工作者
6 系列 · 67 节
免费试 3 节 →
```
### 样张 · 骨架态
React：
```jsx
import { CourseCard } from './components/v4/CourseCard.jsx'
export function Loading() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
## 属性
| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `course` | { num, name, intro, aud, cover?, art: { pl, dt } } | — | art 是星座线稿：pl 折线、dt 圆点；颜色 "@" 表示品牌朱 |
| `meta` | string | — | 左下 mono 元数据，如「6 系列 · 67 节」 |
| `cta` | string | '进入课程 →' | 右下动作文案 |
| `ctaColor` | string | '#161616' | 动作文案颜色 |
| `onClick` | () => void | — | 整卡点击 |
| `loading` | boolean | false | 骨架态（同一段布局） |
## 铁律
- ✓ 要：封面按上传原图呈现，不叠蒙层
- ✗ 不要：为了一行小字压暗整幅封面
- ✓ 要：编号用深色小底自持可读性
- ✗ 不要：用 textShadow 救浅字——白底海报上一样糊
## 本页用到的 CSS
按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：
```css
/* tokens.css · 用到的令牌 */
:root {
--zzm-accent: #A6402F;
--zzm-mono: ui-monospace, "SF Mono", Menlo, monospace;
}
/* base.css */
.zzm-v4 .zzm-hovercard { transition: all .16s ease; }
.zzm-v4 .zzm-hovercard:hover {
transform: translateY(-3px);
border-color: rgba(0, 0, 0, .3) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
}
.zzm-v4 .zzm-skel {
position: relative;
overflow: hidden;
background: #EFEFEC;
border-radius: 8px;
}
.zzm-v4 .zzm-skel::after {
content: '';
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
animation: zzmShimmer 1.4s ease infinite;
}
/* keyframes */
@keyframes zzmShimmer { 100% { transform: translateX(100%) } }
```
---
上一页：[卡片与卡链](https://ui.zhaozimin.com/components/card.md) · 下一页：[系列卡](https://ui.zhaozimin.com/components/series-card.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 系列卡 SeriesCard
url: https://ui.zhaozimin.com/components/series-card/
markdown: https://ui.zhaozimin.com/components/series-card.md
group: 组件
origin: 逐字同步自 edu.zhaozimin v23.5.1（086937d），edu 是源头
source:
- src/system/screens/v4/course/SeriesCard.jsx # https://ui.zhaozimin.com/src/system/screens/v4/course/SeriesCard.jsx
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 系列卡 SeriesCard
> 课程总览里的一个系列：头图、名称、两行简介、节数与总时长，再加一排每课一格的进度方块——完成的格子是朱色打勾。
### 样张 · 完成 3 / 6
总时长由各课 duration_minutes 求和
React：
```jsx
import { SeriesCard } from './screens/v4/course/SeriesCard.jsx'
export function Progress() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
笔记系统
从收集到输出的流水线：卡片盒方法论、标签与检索、从收集到内化、让笔记长成文章。
6 节课
·
总时长 1 小时 24 分
```
### 样张 · 选中态
朱色 1px 描边 + 1px 外环
React：
```jsx
import { SeriesCard } from './screens/v4/course/SeriesCard.jsx'
export function Selected() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
笔记系统
从收集到输出的流水线：卡片盒方法论、标签与检索、从收集到内化、让笔记长成文章。
6 节课
·
总时长 1 小时 24 分
```
### 样张 · 骨架态
热力格下方「已完成 N/M」行也有等高占位，数据到达时不跳
React：
```jsx
import { SeriesCard } from './screens/v4/course/SeriesCard.jsx'
export function Loading() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
## 属性
| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `cat` | { name, sub, cover?, ls: 课节数组[] } | — | 系列数据；头图优先 cover，再回退首个有封面的课节，再回退线稿 |
| `hist` | { doneIds: Set } | — | 完成的课节 ID 集合 |
| `selected` | boolean | false | 选中描边 |
| `onClick` | () => void | — | 整卡点击 |
| `loading` | boolean | false | 骨架态 |
## 本页用到的 CSS
按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：
```css
/* tokens.css · 用到的令牌 */
:root {
--zzm-mono: ui-monospace, "SF Mono", Menlo, monospace;
--zzm-accent: #A6402F;
}
/* base.css */
.zzm-v4 .zzm-hovercard { transition: all .16s ease; }
.zzm-v4 .zzm-hovercard:hover {
transform: translateY(-3px);
border-color: rgba(0, 0, 0, .3) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
}
.zzm-v4 .zzm-skel {
position: relative;
overflow: hidden;
background: #EFEFEC;
border-radius: 8px;
}
.zzm-v4 .zzm-skel::after {
content: '';
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
animation: zzmShimmer 1.4s ease infinite;
}
/* keyframes */
@keyframes zzmShimmer { 100% { transform: translateX(100%) } }
```
---
上一页：[课程卡](https://ui.zhaozimin.com/components/course-card.md) · 下一页：[课节卡](https://ui.zhaozimin.com/components/lesson-card.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 课节卡 LessonCard
url: https://ui.zhaozimin.com/components/lesson-card/
markdown: https://ui.zhaozimin.com/components/lesson-card.md
group: 组件
origin: 逐字同步自 edu.zhaozimin v23.5.1（086937d），edu 是源头
source:
- src/system/screens/v4/course/LessonCard.jsx # https://ui.zhaozimin.com/src/system/screens/v4/course/LessonCard.jsx
- src/system/screens/v4/course/TierPill.jsx # https://ui.zhaozimin.com/src/system/screens/v4/course/TierPill.jsx
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 课节卡 LessonCard
> 一节课：16:9 暗底缩略图，四角是编号、档位角标、时长；未解锁时整卡压暗并居中一把锁；看完后整卡朱染。
### 样张 · 已完成
整卡朱染 + 标题行「✓ 已完成」
React：
```jsx
import { LessonCard } from './screens/v4/course/LessonCard.jsx'
// 课节位置数组：[标题, 时长, 简介, md, 免费, 源, uid, 课节ID, 行数据]
const lesson = (id, title, level) => [title, '15:32', '让想法第一次连起来。', '', level < 2 ? 1 : 0, '', '', id, { cover_url: null, required_level: level }]
const OPEN = { canWatchCourse: () => true, canWatchLesson: () => true }
const GUEST = { canWatchCourse: () => false, canWatchLesson: (a) => (a[8]?.required_level ?? 0) < 2 }
export function Done() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
免费
双链与反向链接
✓ 已完成
让想法第一次连起来。
```
### 样张 · 试看
免费课节对未购者显朱色「试看」角标
React：
```jsx
import { LessonCard } from './screens/v4/course/LessonCard.jsx'
// 课节位置数组：[标题, 时长, 简介, md, 免费, 源, uid, 课节ID, 行数据]
const lesson = (id, title, level) => [title, '15:32', '让想法第一次连起来。', '', level < 2 ? 1 : 0, '', '', id, { cover_url: null, required_level: level }]
const OPEN = { canWatchCourse: () => true, canWatchLesson: () => true }
const GUEST = { canWatchCourse: () => false, canWatchLesson: (a) => (a[8]?.required_level ?? 0) < 2 }
export function Trial() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
免费
为什么是 Obsidian
让想法第一次连起来。
```
### 样张 · 会员 · 未解锁
暗底锁罩；锁孔是这张卡唯一的朱色
React：
```jsx
import { LessonCard } from './screens/v4/course/LessonCard.jsx'
// 课节位置数组：[标题, 时长, 简介, md, 免费, 源, uid, 课节ID, 行数据]
const lesson = (id, title, level) => [title, '15:32', '让想法第一次连起来。', '', level < 2 ? 1 : 0, '', '', id, { cover_url: null, required_level: level }]
const OPEN = { canWatchCourse: () => true, canWatchLesson: () => true }
const GUEST = { canWatchCourse: () => false, canWatchLesson: (a) => (a[8]?.required_level ?? 0) < 2 }
export function Locked() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
会员
Dataview：笔记变数据库
让想法第一次连起来。
```
### 样张 · 拓展 · 未解锁
传 catName 时脚注带系列名
React：
```jsx
import { LessonCard } from './screens/v4/course/LessonCard.jsx'
// 课节位置数组：[标题, 时长, 简介, md, 免费, 源, uid, 课节ID, 行数据]
const lesson = (id, title, level) => [title, '15:32', '让想法第一次连起来。', '', level < 2 ? 1 : 0, '', '', id, { cover_url: null, required_level: level }]
const OPEN = { canWatchCourse: () => true, canWatchLesson: () => true }
const GUEST = { canWatchCourse: () => false, canWatchLesson: (a) => (a[8]?.required_level ?? 0) < 2 }
export function Extension() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
用笔记管理人脉
人脉管理 · 让想法第一次连起来。
```
### 样张 · 骨架态
React：
```jsx
import { LessonCard } from './screens/v4/course/LessonCard.jsx'
export function Loading() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
## 属性
| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `si / li` | number | — | 系列下标 / 课节下标，生成左上 S1 · E04 编号 |
| `a` | 课节位置数组 | — | 见下表 |
| `plan` | { canWatchCourse(ci), canWatchLesson(a) } | — | 权限视图：决定角标显隐与是否上锁 |
| `done` | boolean | — | 已完成 → 整卡朱染 |
| `tierTag` | boolean | false | 标题前显档位胶囊（带反光） |
| `catName` | string | — | 脚注前缀系列名 |
| `ci` | number | 0 | 课程下标（传给 canWatchCourse） |
| `loading` | boolean | false | 骨架态 |
## 课节位置数组 a
| 下标 | 含义 |
|---|---|
| 0 | 标题；无封面时截首段（「：」前，≤ 12 字）作卡面短标题 |
| 1 | 时长文字，右下角显示 |
| 2 | 简介，作脚注 |
| 3 | Markdown 笔记（卡片不用） |
| 4 | 是否免费 |
| 5 / 6 | 视频源标签 / 播放器 uid（卡片不用） |
| 7 | 课节 ID |
| 8 | 行数据：`cover_url`、`required_level`、`source`、`duration_minutes` |
在 edu 里，悬停可看的课节会预取播放凭证（`hoverPrefetchProps`）。设计系统站用 `src/stubs/playUrlCache.js` 的空实现顶替，源文件一字未改。
## 铁律
- ✓ 要：四角元素（编号、时长、角标）各自带深色小底
- ✗ 不要：给整张封面加暗色蒙层
- ✓ 要：有封面就不叠短标题——封面图自己写着课名
- ✗ 不要：锁定用 backdrop 模糊（同屏几十张卡，GPU 吃不消）
## 本页用到的 CSS
按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：
```css
/* tokens.css · 用到的令牌 */
:root {
--zzm-accent: #A6402F;
--zzm-mono: ui-monospace, "SF Mono", Menlo, monospace;
--zzm-tier-free-bg: rgba(22, 163, 74, 0.12);
--zzm-tier-free-ink: #157F3C;
--zzm-tier-member-bg: rgba(224, 146, 10, 0.18);
--zzm-tier-member-ink: #8A5606;
}
/* base.css */
.zzm-v4 .zzm-skel {
position: relative;
overflow: hidden;
background: #EFEFEC;
border-radius: 8px;
}
.zzm-v4 .zzm-skel::after {
content: '';
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
animation: zzmShimmer 1.4s ease infinite;
}
/* controls.css */
.zzm-v4 .zzm-cardlink {
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, .09);
border-radius: 16px;
padding: 12px;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.zzm-v4 .zzm-cardlink:hover {
transform: translateY(-3px);
border-color: rgba(0, 0, 0, .3);
box-shadow: 0 10px 30px rgba(0, 0, 0, .09), 0 1px 2px rgba(0, 0, 0, .04);
}
.zzm-v4 .zzm-cardlink--done {
background: rgba(166, 64, 47, .04);
border-color: rgba(166, 64, 47, .35);
}
.zzm-v4 .zzm-cardlink--done:hover {
border-color: rgba(166, 64, 47, .55);
}
.zzm-v4 .zzm-pill-shine {
position: relative;
overflow: hidden;
}
.zzm-v4 .zzm-pill-shine::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
transform: translateX(-180%);
background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .85) 50%, transparent 66%);
animation: zzmPillShine 4.6s ease-in-out infinite;
animation-delay: var(--zzm-shine-delay, 0s);
}
/* keyframes */
@keyframes zzmShimmer { 100% { transform: translateX(100%) } }
@keyframes zzmPillShine { 0% { transform: translateX(-180%) } 14% { transform: translateX(180%) } 100% { transform: translateX(180%) } }
```
---
上一页：[系列卡](https://ui.zhaozimin.com/components/series-card.md) · 下一页：[封面图](https://ui.zhaozimin.com/components/cover-image.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 封面图 CoverImage
url: https://ui.zhaozimin.com/components/cover-image/
markdown: https://ui.zhaozimin.com/components/cover-image.md
group: 组件
origin: 逐字同步自 edu.zhaozimin v23.5.1（086937d），edu 是源头
source:
- src/system/components/v4/CoverImage.jsx # https://ui.zhaozimin.com/src/system/components/v4/CoverImage.jsx
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 封面图 CoverImage
> 封面三态：加载中只露父容器的暗底，就绪后 350ms 淡入，失败回退到线稿。杜绝「先画线稿、封面到了再跳变盖上」的闪跳。
### 样张 · 三种结局
React：
```jsx
import { CoverImage } from './components/v4/CoverImage.jsx'
const ACCENT = 'var(--zzm-accent, #A6402F)'
const COVER = 'data:image/svg+xml;utf8,' + encodeURIComponent(
'',
)
const Fallback = () => (
)
const Frame = ({ label, children }) => (
)
export default function CoverImageStates() {
return (
} />
} />
} />
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
## 属性
| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `src` | string · null | — | 封面地址；为空直接渲染 fallback |
| `fallback` | ReactNode | null | 无封面或加载失败时的兜底（通常是星座线稿） |
| `fit` | 'cover' · 'contain' | 'cover' | 导学封面用 contain 保证完整展示 |
| `fadeMs` | number | 350 | 淡入时长 |
父容器负责暗底、比例和圆角（`aspect-ratio: 16/9; background: #131316; position: relative; overflow: hidden`）；图片绝对定位铺满。
## 一个真实踩过的坑
图片的 `load` 事件不冒泡，React 的 `onLoad` 要等 commit 后才绑定。磁盘缓存命中时，字节比监听先到，`load` 已经触发过了，组件会永远卡在「加载中」——图片明明就绪却 `opacity: 0`，回访用户只看见一片黑。所以这个组件挂载后先检查 `el.complete`，没就绪才补挂**原生**的 load / error 监听。复刻时别换回 `onLoad`。
## 铁律
- ✓ 要：封面按上传原图呈现
- ✗ 不要：提供「蒙层」参数——叠字可读性由那颗字自己解决
---
上一页：[课节卡](https://ui.zhaozimin.com/components/lesson-card.md) · 下一页：[神秘卡](https://ui.zhaozimin.com/components/mystery-card.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 神秘卡 MysteryCard
url: https://ui.zhaozimin.com/components/mystery-card/
markdown: https://ui.zhaozimin.com/components/mystery-card.md
group: 组件
origin: 逐字同步自 edu.zhaozimin v23.5.1（086937d），edu 是源头
source:
- src/system/components/v4/MysteryCard.jsx # https://ui.zhaozimin.com/src/system/components/v4/MysteryCard.jsx
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 神秘卡 MysteryCard
> 尚未揭晓的课：3D 绸缎遮罩、朱印封蜡、一道流光，悬停时微微掀起。不显示名称和价格，也不能购买。
### 样张 · 把鼠标移上去
React：
```jsx
import { MysteryCard } from './components/v4/MysteryCard.jsx'
export default function MysteryCardDemo() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
## 刻意的例外
3D 绸缎是这套系统里**有意为之的例外**，专为「神秘感」破例；配色仍守黑白灰加一枚朱色封蜡。它自带全部样式（包括注入自己的 `@keyframes zzmMysterySheen`），尺寸随网格走（宽高比 266 : 316）。
只有一种用法：课程目录里 `comingSoon` 的课渲染成它。不要把这种质感用到别的地方。
## 铁律
- ✓ 要：只用于尚未上线的课程
- ✗ 不要：把 3D、流光这类效果搬到普通卡片上
---
上一页：[封面图](https://ui.zhaozimin.com/components/cover-image.md) · 下一页：[星图](https://ui.zhaozimin.com/components/star-map.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 星图 StarMap
url: https://ui.zhaozimin.com/components/star-map/
markdown: https://ui.zhaozimin.com/components/star-map.md
group: 组件
origin: 逐字同步自 edu.zhaozimin v23.5.1（086937d），edu 是源头
source:
- src/system/components/v4/StarMapSvg.jsx # https://ui.zhaozimin.com/src/system/components/v4/StarMapSvg.jsx
- src/system/domain/v4/mapGeometry.js # https://ui.zhaozimin.com/src/system/domain/v4/mapGeometry.js
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 星图 StarMap
> 学习地图：一条折线穿过五个站点。走过的站墨色实心、实线相连；当前站朱色，外圈一道脉冲光晕；还没到的站白底灰边、虚线相连。
### 样张 · 5 站 · 已完成 2 站
React：
```jsx
import { StarMapSvg } from './components/v4/StarMapSvg.jsx'
import { buildStarMap } from './domain/v4/mapGeometry.js'
const CATS = [{ ls: [['为什么是 Obsidian'], ['建库与初始设置'], ['界面与核心操作'], ['双链与反向链接'], ['图谱视图'], ['插件安装与安全'], ['Dataview'], ['Templater'], ['卡片盒方法论'], ['从收集到内化']] }]
const MAP = {
nodes: [
{ t: '认识与建库', ref: [[0, 0], [0, 1]] },
{ t: '连接想法', ref: [[0, 2], [0, 3]] },
{ t: '图谱与插件', ref: [[0, 4], [0, 5], [0, 6], [0, 7]] },
{ t: '笔记方法', ref: [[0, 8]] },
{ t: '内化输出', ref: [[0, 9]] },
],
pts: [[86, 292], [212, 148], [336, 262], [478, 128], [614, 268]],
}
const DONE = new Set(['0-0-0', '0-0-1', '0-0-2', '0-0-3', '0-0-4'])
export function Roadmap() {
const geo = buildStarMap(MAP, CATS, DONE, 0)
return (
{}} />
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
## 几何从哪来
`buildStarMap(map, cats, doneSet, courseIdx)` 把地图数据变成绘图几何：22 颗装饰背景星、站间连线、每站前三节课的预览。`map.pts` 是 740 × 400 画布上的坐标，与 `map.nodes` 一一对应；`doneSet` 里的键是 `课程-系列-课节`。
| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `geo` | buildStarMap(...) 的返回值 | — | { stars, edges, nodes, … } |
| `onNodeClick` | (index) => void | — | 点击站点 |
## 铁律
- ✓ 要：朱色只给当前站：它就是「你在这里」
- ✗ 不要：给已完成的站也上朱色
- ✓ 要：脉冲光晕只挂在当前站（zzmPulse 2.6s）
## 本页用到的 CSS
按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：
```css
/* tokens.css · 用到的令牌 */
:root {
--zzm-mono: ui-monospace, "SF Mono", Menlo, monospace;
--zzm-accent: #A6402F;
}
/* base.css */
.zzm-v4 .zzm-node { transition: opacity .15s ease; }
.zzm-v4 .zzm-node:hover { opacity: .75; }
```
---
上一页：[神秘卡](https://ui.zhaozimin.com/components/mystery-card.md) · 下一页：[侧栏导航](https://ui.zhaozimin.com/patterns/sidebar.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 侧栏导航 Sidebar
url: https://ui.zhaozimin.com/patterns/sidebar/
markdown: https://ui.zhaozimin.com/patterns/sidebar.md
group: 模式
origin: 复刻自 edu 同名界面的展示版，剥离了业务状态
source:
- src/extracted/SidebarNav.jsx # https://ui.zhaozimin.com/src/extracted/SidebarNav.jsx
- src/extracted/icons.jsx # https://ui.zhaozimin.com/src/extracted/icons.jsx
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 侧栏导航 Sidebar
> 纸色侧栏，宽 266。导航行是扁平的，不是键——当前行只加一层 .07 灰底和 600 字重；真正的操作（收起、退出）才用微拟物键。
### 样张 · 综合页侧栏
悬停导航行、名片、退出键试试
React：
```jsx
import { SidebarNav } from './extracted/SidebarNav.jsx'
import { ClockIcon, HomeIcon, MapIcon, PlayRectIcon, StarIcon } from './extracted/icons.jsx'
export function Hub() {
return (
}] },
{ items: [
{ id: 'fav', label: '我的收藏', icon: , count: 12 },
{ id: 'hist', label: '历史记录', icon: , count: 38 },
] },
]}
user={{ name: '学员示例', email: 'learner@example.com' }}
/>
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
### 样张 · 课程页侧栏
分组标签：mono 10 · 字距 1.5 · #A2A29C
React：
```jsx
import { SidebarNav } from './extracted/SidebarNav.jsx'
import { ClockIcon, HomeIcon, MapIcon, PlayRectIcon, StarIcon } from './extracted/icons.jsx'
export function Course() {
return (
},
{ id: 'ovw', label: '课程总览', icon: },
] },
{ label: '主线课程', items: [
{ id: 's1', label: '软件基础', count: 5 },
{ id: 's2', label: '插件教学', count: 4 },
{ id: 's3', label: '笔记系统', count: 4 },
] },
{ label: '增值课程', items: [{ id: 's4', label: '人脉管理', count: 3 }] },
]}
/>
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
## 规格
| 部位 | 规格 |
|---|---|
| 容器 | 宽 266 · 底 `#F6F6F4` · 右侧 .07 细线 · 进场 `zzmSlide .28s` |
| 头部 | 收起键（28 幽灵图标键，恒位左 14 / 上 12）+ 星座标 22 + 品牌名 15 / 650 |
| 导航行 | 内距 9 × 10 · 圆角 8 · 13.5px · 当前行 `.07` 灰底 + 600 · 悬停 `.zzm-navbtn` |
| 计数 | mono 9.5 · `#B0B0AA` · 两位补零 |
| 名片 | 36 圆形头像 · 名字 13 / 600 · 邮箱 10.5 灰 · 悬停 `.zzm-userfoot` |
| 退出 | `.zzm-btn --block` 纸键 |
## 铁律
- ✓ 要：导航行扁平，当前行灰底
- ✗ 不要：把导航行做成一排凸键
- ✓ 要：收起键展开态与收起态同一坐标，零位移
- ✗ 不要：用朱色标当前导航项——朱色留给内容里的「下一步」
## 本页用到的 CSS
按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：
```css
/* tokens.css · 用到的令牌 */
:root {
--zzm-accent: #A6402F;
}
/* base.css */
.zzm-v4 .zzm-navbtn:hover { background: rgba(0, 0, 0, .07) !important; }
.zzm-v4 .zzm-userfoot:hover { background: rgba(0, 0, 0, .045); border-color: rgba(0, 0, 0, .07) !important; }
/* controls.css */
.zzm-v4 .zzm-btn {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 36px;
padding: 0 16px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: .2px;
white-space: nowrap;
cursor: pointer;
user-select: none;
border-radius: 8px; /* 圆角矩形——按钮禁胶囊 */
border: 1px solid rgba(0, 0, 0, .14);
color: #3F3F3B;
background: linear-gradient(180deg, #FFFFFF 0%, #F2F2EF 100%);
box-shadow:
0 0 0 3px rgba(255, 255, 255, .55), /* ④ 反光光晕环 */
0 1px 2px rgba(0, 0, 0, .09), /* ③ 近影 */
0 2px 6px rgba(0, 0, 0, .06), /* ③ 远影 */
inset 0 1px 0 rgba(255, 255, 255, .92), /* ② 顶部反光 */
inset 0 -1px 0 rgba(0, 0, 0, .05); /* ① 底缘收沉 */
transition: box-shadow .16s ease, transform .16s ease, background .16s ease,
border-color .16s ease, filter .16s ease, opacity .16s ease;
}
.zzm-v4 .zzm-btn:hover {
transform: translateY(-1px);
border-color: rgba(0, 0, 0, .18);
box-shadow:
0 0 0 4px rgba(255, 255, 255, .8),
0 2px 4px rgba(0, 0, 0, .10),
0 4px 12px rgba(0, 0, 0, .09),
inset 0 1px 0 rgba(255, 255, 255, .95),
inset 0 -1px 0 rgba(0, 0, 0, .05);
}
.zzm-v4 .zzm-btn:active {
transform: translateY(0);
background: linear-gradient(180deg, #ECECE9 0%, #F4F4F1 100%); /* ⑤ 凹面翻转 */
box-shadow:
0 0 0 3px rgba(255, 255, 255, .45),
0 1px 0 rgba(255, 255, 255, .65),
inset 0 2px 4px rgba(0, 0, 0, .13),
inset 0 1px 2px rgba(0, 0, 0, .09);
}
.zzm-v4 .zzm-btn:focus-visible {
outline: none;
box-shadow:
0 0 0 3px rgba(166, 64, 47, .20), /* 键盘焦点＝朱色光晕 */
0 1px 2px rgba(0, 0, 0, .09),
0 2px 6px rgba(0, 0, 0, .06),
inset 0 1px 0 rgba(255, 255, 255, .92);
}
.zzm-v4 .zzm-btn:disabled {
cursor: not-allowed;
transform: none;
}
.zzm-v4 .zzm-btn:disabled:not(.zzm-btn--busy) {
color: #A2A29C;
background: #F2F2EF;
border-color: rgba(0, 0, 0, .08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .04);
}
.zzm-v4 .zzm-btn--ghost {
border-color: transparent;
background: transparent;
box-shadow: none;
color: #4A4A46;
}
.zzm-v4 .zzm-btn--ghost:hover {
transform: translateY(-1px);
border-color: rgba(0, 0, 0, .14);
background: linear-gradient(180deg, #FFFFFF 0%, #F2F2EF 100%);
box-shadow:
0 0 0 3px rgba(255, 255, 255, .55),
0 1px 2px rgba(0, 0, 0, .09),
0 2px 6px rgba(0, 0, 0, .06),
inset 0 1px 0 rgba(255, 255, 255, .92);
}
.zzm-v4 .zzm-btn--ghost:active {
transform: translateY(0);
border-color: rgba(0, 0, 0, .14);
background: linear-gradient(180deg, #ECECE9 0%, #F4F4F1 100%);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, .12);
}
.zzm-v4 .zzm-btn--sm { height: 28px; padding: 0 12px; font-size: 12px; gap: 4px; }
.zzm-v4 .zzm-btn--icon { width: 36px; padding: 0; }
.zzm-v4 .zzm-btn--icon.zzm-btn--sm { width: 28px; }
.zzm-v4 .zzm-btn--icon.zzm-btn--lg { width: 44px; }
.zzm-v4 .zzm-btn--block { width: 100%; }
```
---
上一页：[星图](https://ui.zhaozimin.com/components/star-map.md) · 下一页：[数据表格](https://ui.zhaozimin.com/patterns/data-table.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 数据表格 DataTable
url: https://ui.zhaozimin.com/patterns/data-table/
markdown: https://ui.zhaozimin.com/patterns/data-table.md
group: 模式
origin: 提炼自 edu AdmDesign 样张，ui.zhaozimin 是源头
source:
- src/extracted/DataTable.jsx # https://ui.zhaozimin.com/src/extracted/DataTable.jsx
- src/extracted/extracted.css # https://ui.zhaozimin.com/src/extracted/extracted.css
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 数据表格 DataTable
> 同名但用途不同的数据先用一排小键分区，再进表格。浅灰 mono 表头、可排序列、细线分行；窄屏只横向滚动，不折行。
### 样张 · 分区 + 排序
点表头排序；再点一次反向
React：
```jsx
import { useMemo, useState } from 'react'
import { DataTable } from './extracted/DataTable.jsx'
import { StatusPill } from './extracted/Tag.jsx'
import { Btn } from './components/v4/Button.jsx'
const ROWS = [
{ code: 'G7KM4Q2HP9RX', from: '邀请人甲', to: '新学员 A', used: true, reward: 100 },
{ code: 'T2WQ8LN5VJ3C', from: '邀请人乙', to: '新学员 B', used: false, reward: 0 },
{ code: 'M9PD6RZ4KX1B', from: '邀请人丙', to: '新学员 C', used: true, reward: 200 },
]
const COLUMNS = [
{ key: 'code', label: '邀请码', fr: 1.2, mono: true },
{ key: 'from', label: '邀请人', fr: 1.1 },
{ key: 'to', label: '被邀请人', fr: 1.1 },
{ key: 'used', label: '状态', fr: 0.7, render: (r) => {r.used ? '已使用' : '可用'} },
{ key: 'reward', label: '奖励', fr: 0.6, mono: true, accent: true, render: (r) => `¥${r.reward}` },
]
export default function DataTableDemo() {
const [scope, setScope] = useState('register')
const [sort, setSort] = useState({ key: 'from', dir: 'asc' })
const rows = useMemo(() => {
const out = [...ROWS].sort((a, b) => (a[sort.key] > b[sort.key] ? 1 : a[sort.key] < b[sort.key] ? -1 : 0))
return sort.dir === 'desc' ? out.reverse() : out
}, [sort])
const onSort = (key) => setSort((s) => ({ key, dir: s.key === key && s.dir === 'asc' ? 'desc' : 'asc' }))
return (
setScope('register')}>注册激活码
setScope('course')}>课程 / 会员激活码
r.code} />
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
M9PD6RZ4KX1B
邀请人丙
新学员 C
已使用
¥200
T2WQ8LN5VJ3C
邀请人乙
新学员 B
可用
¥0
G7KM4Q2HP9RX
邀请人甲
新学员 A
已使用
¥100
```
### 样张 · 静态标记
React：
```jsx
import { DataTable } from './extracted/DataTable.jsx'
import { StatusPill } from './extracted/Tag.jsx'
export function Static() {
return (
{r.state} },
{ key: 'reward', label: '奖励', fr: 0.6, mono: true, accent: true },
]}
rows={[{ code: 'G7KM4Q2HP9RX', from: '邀请人甲', state: '已使用', reward: '¥100' }]}
minWidth={560}
/>
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
邀请码
邀请人
状态
奖励
G7KM4Q2HP9RX
邀请人甲
已使用
¥100
```
## 属性
| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `columns` | [{ key, label, fr?, mono?, accent?, render?, sortable? }] | [] | fr 为列宽份额；mono 用等宽字；accent 用朱色（金额） |
| `rows` | object[] | [] | 数据行 |
| `sort` | { key, dir: 'asc' · 'desc' } | — | 当前排序（受控） |
| `onSort` | (key) => void | — | 传了才显示排序键 |
| `minWidth` | number | 680 | 内容最小宽度，窄屏靠横向滚动 |
| `rowKey` | (row, i) => key | 下标 | 行的 key |
## 规格
表头：内距 10 × 18 · 底 `#FAFAF8` · mono 10 · 字距 1 · `#A2A29C` · 下方 .07 细线。数据行：内距 11 × 18 · 12px · 行间 .07 细线。容器：.09 描边 · 圆角 16。分区键：当前用 sm 墨键，其余 sm 纸键。
## 本页用到的 CSS
按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：
```css
/* tokens.css · 用到的令牌 */
:root {
--zzm-accent: #A6402F;
}
/* controls.css */
.zzm-v4 .zzm-btn {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 36px;
padding: 0 16px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: .2px;
white-space: nowrap;
cursor: pointer;
user-select: none;
border-radius: 8px; /* 圆角矩形——按钮禁胶囊 */
border: 1px solid rgba(0, 0, 0, .14);
color: #3F3F3B;
background: linear-gradient(180deg, #FFFFFF 0%, #F2F2EF 100%);
box-shadow:
0 0 0 3px rgba(255, 255, 255, .55), /* ④ 反光光晕环 */
0 1px 2px rgba(0, 0, 0, .09), /* ③ 近影 */
0 2px 6px rgba(0, 0, 0, .06), /* ③ 远影 */
inset 0 1px 0 rgba(255, 255, 255, .92), /* ② 顶部反光 */
inset 0 -1px 0 rgba(0, 0, 0, .05); /* ① 底缘收沉 */
transition: box-shadow .16s ease, transform .16s ease, background .16s ease,
border-color .16s ease, filter .16s ease, opacity .16s ease;
}
.zzm-v4 .zzm-btn:hover {
transform: translateY(-1px);
border-color: rgba(0, 0, 0, .18);
box-shadow:
0 0 0 4px rgba(255, 255, 255, .8),
0 2px 4px rgba(0, 0, 0, .10),
0 4px 12px rgba(0, 0, 0, .09),
inset 0 1px 0 rgba(255, 255, 255, .95),
inset 0 -1px 0 rgba(0, 0, 0, .05);
}
.zzm-v4 .zzm-btn:active {
transform: translateY(0);
background: linear-gradient(180deg, #ECECE9 0%, #F4F4F1 100%); /* ⑤ 凹面翻转 */
box-shadow:
0 0 0 3px rgba(255, 255, 255, .45),
0 1px 0 rgba(255, 255, 255, .65),
inset 0 2px 4px rgba(0, 0, 0, .13),
inset 0 1px 2px rgba(0, 0, 0, .09);
}
.zzm-v4 .zzm-btn:focus-visible {
outline: none;
box-shadow:
0 0 0 3px rgba(166, 64, 47, .20), /* 键盘焦点＝朱色光晕 */
0 1px 2px rgba(0, 0, 0, .09),
0 2px 6px rgba(0, 0, 0, .06),
inset 0 1px 0 rgba(255, 255, 255, .92);
}
.zzm-v4 .zzm-btn:disabled {
cursor: not-allowed;
transform: none;
}
.zzm-v4 .zzm-btn:disabled:not(.zzm-btn--busy) {
color: #A2A29C;
background: #F2F2EF;
border-color: rgba(0, 0, 0, .08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .04);
}
.zzm-v4 .zzm-btn--primary {
color: #FFFFFF;
border-color: rgba(0, 0, 0, .85);
background: linear-gradient(180deg, #3A3A36 0%, #1D1D1B 58%, #141412 100%);
box-shadow:
0 0 0 3px rgba(22, 22, 22, .06),
0 1px 2px rgba(0, 0, 0, .18),
0 3px 10px rgba(22, 22, 22, .24),
inset 0 1px 0 rgba(255, 255, 255, .20),
inset 0 -1px 0 rgba(0, 0, 0, .38);
}
.zzm-v4 .zzm-btn--primary:hover {
filter: brightness(1.12);
border-color: rgba(0, 0, 0, .85);
box-shadow:
0 0 0 4px rgba(22, 22, 22, .09),
0 2px 4px rgba(0, 0, 0, .20),
0 5px 14px rgba(22, 22, 22, .28),
inset 0 1px 0 rgba(255, 255, 255, .24),
inset 0 -1px 0 rgba(0, 0, 0, .38);
}
.zzm-v4 .zzm-btn--primary:active {
filter: none;
background: linear-gradient(180deg, #101010 0%, #22221F 100%);
box-shadow:
0 0 0 3px rgba(22, 22, 22, .06),
inset 0 2px 5px rgba(0, 0, 0, .55),
inset 0 1px 2px rgba(0, 0, 0, .4);
}
.zzm-v4 .zzm-btn--sm { height: 28px; padding: 0 12px; font-size: 12px; gap: 4px; }
.zzm-v4 .zzm-btn--icon.zzm-btn--sm { width: 28px; }
/* extracted.css */
.zzm-v4 .zzm-sort { transition: color .16s ease; }
.zzm-v4 .zzm-sort:hover { color: #161616 !important; }
.zzm-v4 .zzm-switch:focus-visible,
.zzm-v4 .zzm-check:focus-visible,
.zzm-v4 .zzm-tab:focus-visible,
.zzm-v4 .zzm-page:focus-visible,
.zzm-v4 .zzm-sort:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(166, 64, 47, .2);
}
```
---
上一页：[侧栏导航](https://ui.zhaozimin.com/patterns/sidebar.md) · 下一页：[安全验证外壳](https://ui.zhaozimin.com/patterns/verify-shell.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 安全验证外壳 VerifyShell
url: https://ui.zhaozimin.com/patterns/verify-shell/
markdown: https://ui.zhaozimin.com/patterns/verify-shell.md
group: 模式
origin: 提炼自 edu AdmDesign 样张，ui.zhaozimin 是源头
source:
- src/extracted/VerifyShell.jsx # https://ui.zhaozimin.com/src/extracted/VerifyShell.jsx
- src/extracted/Tag.jsx # https://ui.zhaozimin.com/src/extracted/Tag.jsx
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 安全验证外壳 VerifyShell
> 第三方人机验证（Cloudflare Turnstile、阿里云验证码）的外围壳：始终可见、占位固定，底下三种反馈态——通过、冷却、限流。
### 样张 · 外壳 + 三种反馈
React：
```jsx
import { VerifyShell } from './extracted/VerifyShell.jsx'
export function Shell() {
return (
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
第三方安全验证 · 始终可见外围壳
正在进行人机验证…
CLOUDFLARE TURNSTILE
验证通过 · 可发送
冷却中 · 60s
请求过多 · 暂时拦截
```
## 为什么要一个外壳
第三方验证控件的 iframe 加载慢、时有时无。直接放进表单，它出现和消失会把表单顶得上下跳。外壳先占住位置（最小高 54），真实 iframe 渲染在里面（`children`）；外壳下方用状态胶囊统一给出反馈。
| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `title` | string | '第三方安全验证 · 始终可见外围壳' | 外壳标题 |
| `provider` | string | 'CLOUDFLARE\nTURNSTILE' | 右侧服务商标识（未传 children 时显示） |
| `states` | ('ok' · 'cooldown' · 'limited')[] | 三种都显示 | 要显示的反馈态 |
| `children` | ReactNode | — | 真实验证控件挂载点 |
## 规则
- ✓ 要：单次 token：每次发送验证码前重新验证
- ✓ 要：发送后 60 秒冷却，冷却中显示倒计时
- ✓ 要：被限流时明确说「请求过多 · 暂时拦截」
- ✗ 不要：验证失败时只让按钮变灰、不说原因
---
上一页：[数据表格](https://ui.zhaozimin.com/patterns/data-table.md) · 下一页：[笔记标注块](https://ui.zhaozimin.com/patterns/callouts.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 笔记标注块 Callouts
url: https://ui.zhaozimin.com/patterns/callouts/
markdown: https://ui.zhaozimin.com/patterns/callouts.md
group: 模式
origin: 逐字同步自 edu.zhaozimin v23.5.1（086937d），edu 是源头
source:
- src/system/components/v4/MarkdownNotes.jsx # https://ui.zhaozimin.com/src/system/components/v4/MarkdownNotes.jsx
- src/system/lib/markdown.js # https://ui.zhaozimin.com/src/system/lib/markdown.js
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 笔记标注块 Callouts
> 课程笔记用 Obsidian 的语法和官方色板：老用户零学习成本，一眼分清提示、警告和完成。这是刻意的边界——笔记区是内容，不是产品界面。
### 样张 · 一段课程笔记
React：
```jsx
import { MarkdownNotes } from './components/v4/MarkdownNotes.jsx'
const MD = `## 本节要点
把收集、整理、输出三件事拆开做，每一步只解决一个问题。
- 收集：先存，不分类
- 整理：每周一次，按项目归档
- 输出：一篇笔记只回答一个问题
> [!note] 笔记
> 标注块语法与 Obsidian 完全一致，老用户零学习成本。
> [!tip] 技巧
> 在笔记里写 \`[跳到第 3 节](#jump:demo-3)\` 会生成朱色跳转胶囊。
> [!warning]- 注意（点我展开）
> 折叠标注块默认收起，标题后加 \`-\` 即可。
> [!success] 完成
> 看完这节，你应该能搭出自己的收件箱。
| 阶段 | 频率 | 产出 |
|---|---|---|
| 收集 | 随时 | 收件箱 |
| 整理 | 每周 | 项目笔记 |
\`\`\`js
// 围栏代码块：缩进逐字保真
function inbox(note) {
return { ...note, tags: [] }
}
\`\`\`
`
export default function CalloutsDemo() {
return (
{}} />
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
本节要点
把收集、整理、输出三件事拆开做，每一步只解决一个问题。
-
收集：先存，不分类
-
整理：每周一次，按项目归档
-
输出：一篇笔记只回答一个问题
标注块语法与 Obsidian 完全一致，老用户零学习成本。
在笔记里写
[跳到第 3 节](#jump:demo-3)
会生成朱色跳转胶囊。
|
阶段
|
频率
|
产出
|
|
收集
|
随时
|
收件箱
|
|
整理
|
每周
|
项目笔记
|
// 围栏代码块：缩进逐字保真
function inbox(note) {
return { ...note, tags: [] }
}
```
## 十三种标注块
| 类型 | 默认标题 | 色族 | RGB | 图标 |
|---|---|---|---|---|
| `note` | Note | blue | `8, 109, 221` | Pencil |
| `abstract` | Abstract | cyan | `0, 191, 188` | ClipboardList |
| `info` | Info | blue | `8, 109, 221` | Info |
| `todo` | Todo | blue | `8, 109, 221` | CheckCircle2 |
| `tip` | Tip | cyan | `0, 191, 188` | Flame |
| `success` | Success | green | `8, 185, 78` | Check |
| `question` | Question | yellow | `224, 172, 0` | HelpCircle |
| `warning` | Warning | orange | `236, 117, 0` | AlertTriangle |
| `failure` | Failure | red | `233, 49, 71` | X |
| `danger` | Danger | red | `233, 49, 71` | Zap |
| `bug` | Bug | red | `233, 49, 71` | Bug |
| `example` | Example | purple | `120, 82, 238` | List |
| `quote` | Quote | mono | `90, 90, 86` | Quote |
类型大小写不敏感；未知类型回落到 `note`（与 Obsidian 一致）。别名：`summary`/`tldr`→abstract，`hint`/`important`→tip，`check`/`done`→success，`help`/`faq`→question，`caution`/`attention`→warning，`fail`/`missing`→failure，`error`→danger，`cite`→quote。标题后加 `-` 默认折叠、加 `+` 默认展开。
## 还支持
标题、段落、列表（含中文顿号 `1、`）、可横向滚动的表格、**缩进逐字保真**的围栏代码块、引用、裸链接自动识别、点击放大的图片，以及 `[文字](#jump:课节ID)` 朱色跳转胶囊——点它跳到对应课节。
## 铁律
- ✓ 要：笔记区（内容）用 Obsidian 官方色
- ✗ 不要：把这些颜色带进按钮、卡片、徽章等产品界面
- ✓ 要：链接没通过白名单（safeHref）时降级为纯文本
---
上一页：[安全验证外壳](https://ui.zhaozimin.com/patterns/verify-shell.md) · 下一页：[勋章与下载](https://ui.zhaozimin.com/resources/assets.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 勋章与下载 Assets
url: https://ui.zhaozimin.com/resources/assets/
markdown: https://ui.zhaozimin.com/resources/assets.md
group: 资源
origin: 逐字同步自 edu.zhaozimin v23.5.1（086937d），edu 是源头
source:
- src/system/manifest.json # https://ui.zhaozimin.com/src/system/manifest.json
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 勋章与下载 Assets
> 会员勋章、全部机读下载件，以及本站每一个源文件的出处与指纹。
## 会员勋章
## 下载件
| 文件 | 内容 |
|---|---|
| /zzm.css | 全部样式（.zzm-v4 作用域） |
| /zzm.global.css | 全部样式（无作用域） |
| /tokens.json | W3C 设计令牌 |
| /DESIGN.md | 单文件规范 |
| /llms.txt | 全站目录 |
| /llms-full.txt | 全站全文 |
| /favicon.svg | 星座标（墨底反白） |
## 同步自 edu v23.5.1（086937d · 2026-09-23）
以下文件逐字复制自 edu.zhaozimin，`src/system/` 只读。sha256 与 `/src/system/manifest.json` 一致；构建前 `npm run check:drift` 会逐个核对。
| 文件 | 角色 | sha256 | 字节 |
|---|---|---|---|
| src/system/styles/v4/tokens.css | style | `9012c08bcbbc` | 3729 |
| src/system/styles/v4/keyframes.css | style | `43cef3e5325c` | 2164 |
| src/system/styles/v4/base.css | style | `dc7c5fe86bfd` | 4610 |
| src/system/styles/v4/controls.css | style | `3790a93a67e6` | 16912 |
| src/system/styles/v4/SPACING.md | spec | `ccaa64a37854` | 7354 |
| src/system/components/v4/Button.jsx | component | `414b31e1a2ef` | 1996 |
| src/system/components/v4/Breadcrumb.jsx | component | `4af9a08bb456` | 2372 |
| src/system/components/v4/Skeleton.jsx | component | `a5a10b30b729` | 1069 |
| src/system/components/v4/CoverImage.jsx | component | `f684b534fe36` | 2910 |
| src/system/components/v4/CourseCard.jsx | component | `7d4811d83d26` | 4868 |
| src/system/components/v4/MysteryCard.jsx | component | `43324542a505` | 4343 |
| src/system/components/v4/StarMapSvg.jsx | component | `87081c12856f` | 2122 |
| src/system/components/v4/MarkdownNotes.jsx | component | `c4c2face72f1` | 12651 |
| src/system/components/course/ImageLightbox.jsx | dependency | `be2db36a21ae` | 3708 |
| src/system/screens/v4/course/LessonCard.jsx | component | `bde44ea3b2e2` | 10862 |
| src/system/screens/v4/course/SeriesCard.jsx | component | `15d19bca55f3` | 6661 |
| src/system/screens/v4/course/TierPill.jsx | component | `51e2ea1045e6` | 1295 |
| src/system/lib/courseTiers.js | dependency | `20f029d930c4` | 2002 |
| src/system/lib/markdown.js | dependency | `198e538bdd95` | 28934 |
| src/system/lib/motion.js | dependency | `03e85c605500` | 5553 |
| src/system/lib/siteIcons.js | dependency | `6e4ce239df38` | 2104 |
| src/system/domain/v4/mapGeometry.js | dependency | `e04543df05b6` | 3502 |
| public/v4/badge-0.png | asset | `e532e7d00255` | 189335 |
| public/v4/badge-1.png | asset | `975943c5bdd6` | 214276 |
| public/v4/badge-2.png | asset | `1b546c46a273` | 215027 |
| public/v4/badge-all.png | asset | `7ad4a48f0f7a` | 225098 |
| public/beian-gongan.png | asset | `974bbcc14bfa` | 2330 |
| public/favicon.svg | asset | `b77a12077e99` | 451 |
| public/favicon.png | asset | `5bb4941163fa` | 8916 |
| public/apple-touch-icon.png | asset | `47325746c00e` | 5684 |
| src/system/PRODUCT.md | spec | `4689282ab40e` | 2248 |
## 提炼层（本站为源头）
| 文件 | 地址 |
|---|---|
| src/extracted/CLAUDE.md | /src/extracted/CLAUDE.md |
| src/extracted/Checkbox.jsx | /src/extracted/Checkbox.jsx |
| src/extracted/ConfirmDialog.jsx | /src/extracted/ConfirmDialog.jsx |
| src/extracted/DataTable.jsx | /src/extracted/DataTable.jsx |
| src/extracted/Feedback.jsx | /src/extracted/Feedback.jsx |
| src/extracted/Pagination.jsx | /src/extracted/Pagination.jsx |
| src/extracted/SidebarNav.jsx | /src/extracted/SidebarNav.jsx |
| src/extracted/Switch.jsx | /src/extracted/Switch.jsx |
| src/extracted/Tabs.jsx | /src/extracted/Tabs.jsx |
| src/extracted/Tag.jsx | /src/extracted/Tag.jsx |
| src/extracted/VerifyShell.jsx | /src/extracted/VerifyShell.jsx |
| src/extracted/baseline.css | /src/extracted/baseline.css |
| src/extracted/extracted.css | /src/extracted/extracted.css |
| src/extracted/icons.jsx | /src/extracted/icons.jsx |
---
上一页：[笔记标注块](https://ui.zhaozimin.com/patterns/callouts.md) · 下一页：[更新记录](https://ui.zhaozimin.com/resources/changelog.md) · 全站目录：https://ui.zhaozimin.com/llms.txt
========
---
title: 更新记录 Changelog
url: https://ui.zhaozimin.com/resources/changelog/
markdown: https://ui.zhaozimin.com/resources/changelog.md
group: 资源
origin: 规范文档
synced: edu v23.5.1 (086937d) · 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/zzm.css
---
# 更新记录 Changelog
> 当前站点 v0.1.1，同步自 edu.zhaozimin v23.5.1（086937d）。
## v0.1.1 · 2026-09-23
双站上线。
- **国际站** `ui.zhaozimin.com`：Cloudflare Pages，推送 main 自动构建发布。
- **大陆站** `ui.zhaozimin.cn`：阿里云 1Panel 静态站，GitHub Actions 推送自动发布，约 40 秒到位；页脚挂 ICP 与公安备案（备案按域名，国际站不挂）。
- **产物改为目录式输出**：`/components/button/` 而不是 `/components/button` → `button.html`。文件式输出依赖「访问 /x 自动找 x.html」这一平台特性，Cloudflare 支持而 nginx 不支持；改完之后同一份产物放在任何静态服务器上都成立。
- **同一份代码发两套站**：构建期 `SITE_ORIGIN` 决定站内绝对地址（canonical、llms.txt、sitemap、每页 .md 头），`SITE_REGION=cn` 决定是否挂备案。
## v0.1.0 · 2026-09-23
首次发布。
- **同步**：从 edu.zhaozimin v23.5.1（086937d）逐字同步 30 个文件——四份样式、SPACING.md、12 个组件、5 个逻辑依赖、4 枚勋章、3 个站点图标、PRODUCT.md。
- **提炼**：把 edu 后台设计系统页（AdmDesign）里只以 inline 样张存在的开关、复选框、标签页、分页、轻提示、进度条、数据表格、验证外壳整理成正式组件；本站是它们的源头。
- **改造**：确认窗在 edu 依赖 shadcn 与 Tailwind，这里保留同一 API 与 `.zzm-dialog-*` 皮肤，用纯 CSS 补齐定位，去掉两层依赖。
- **新增**：宿主基线（`baseline.css`）——把 v4 组件依赖的 Tailwind preflight 子集与减少动效规则单独拿出来，使组件脱离 edu 也能 1:1 成立。
- **复刻**：侧栏导航与自绘图标集，剥离路由状态后的展示版。
- **机读层**：每页 .md、llms.txt、llms-full.txt、DESIGN.md、tokens.json、zzm.css、zzm.global.css、源码直读、robots.txt 全面放行。
## 怎么更新
edu 更新后：
```bash
npm run sync # 从 ../edu.zhaozimin 重新同步，写 manifest
npm run check:drift # 核对快照与源头
npm run build
```
---
上一页：[勋章与下载](https://ui.zhaozimin.com/resources/assets.md) · 下一页：无 · 全站目录：https://ui.zhaozimin.com/llms.txt