AuthPanel
auth-panel认证页宣传面板 · 分屏登录/注册页左侧那块（渐变底 + 品牌 + 标语 + 卖点 + 底部区）· 四档背景配方(radial/linear/mesh/none)由 token 混色写死在组件内 —— Tailwind 工具类给不出带 color-mix 的 radial-gradient，guard 又禁消费方传 style，两条一撞只剩裸 div + inline style · color 走 resolveTone 与 Brand/Dot 同路 · 配 LoginForm surface={false} 免卡中卡
用法
分屏登录页
左面板 + 右表单是登录/注册/找回密码的标准版式。右半边配 LoginForm surface={false} —— 视觉重量已由左侧面板承担，再套一张卡就是卡中卡。
把想法送上全球边缘
五分钟创建账号，开启第一个项目。
- 免费开始，闲时算力自动归零
- 从 git push 到全球边缘上线
<div className="grid md:grid-cols-2">
<AuthPanel
brand={<Brand name="瀚云" description="全球边缘计算" />}
title="把想法送上全球边缘"
description="五分钟创建账号，开启第一个项目。无需信用卡。"
highlights={["免费开始，闲时算力自动归零", "从 git push 到全球边缘上线"]}
/>
<div className="grid place-items-center p-8">
<LoginForm surface={false} />
</div>
</div>背景配方
三档都由 token 混色写死在组件内（以 --color-bg 打底，暗色自动跟随）。Tailwind 工具类给不出带 color-mix 的 radial-gradient，而 guard 禁止消费方给库件传 style —— 这正是本组件存在的理由。
radial
以 --color-bg 打底，暗色自动跟随
linear
以 --color-bg 打底，暗色自动跟随
mesh
以 --color-bg 打底，暗色自动跟随
none
以 --color-bg 打底，暗色自动跟随
<>
<AuthPanel gradient="radial" title="radial" />
<AuthPanel gradient="linear" title="linear" />
<AuthPanel gradient="mesh" title="mesh" />
<AuthPanel gradient="none" title="none" />
</>品牌色
color 走 resolveTone，与 Brand.color / Dot.color / ChartSeries.color 同一条路径：语义色名、任意 CSS 色或变量都接得住。渐变与勾选标记一起换色。
chart-2
- 渐变与勾选标记一起跟随
success
- 语义色名照常解析
<AuthPanel color="chart-2" title="换个品牌色" highlights={["渐变与勾选标记一起跟随"]} />底部区
footer 贴在面板底部（备案号 / 版权 / 次要链接），顶部内容与它两端对齐。
欢迎回来
登录以继续
<AuthPanel
brand={<Brand name="瀚云" />}
title="欢迎回来"
footer="© 2026 瀚云 · 京ICP备 000000 号"
/>何时用
「左边一块渐变宣传面板 + 右边表单」是登录 / 注册 / 找回密码页的标准版式，这个件就是左边那块。
它存在的理由不是省几行 flex，而是渐变此前没有正经的表达方式（hulianui/hulian#71）：
- Tailwind 工具类给不出
radial-gradient(125% 125% at 0% 0%, color-mix(in oklab, var(--color-primary) 12%, var(--color-bg)), …)这种带 token 混色的写法； - guard 的
no-style-override是 error 级，style挂到任何库件上直接报错。
两条一撞，结论就是那块面板只能是裸 `<div>` + inline style——不是猜的，官方 signup block 自己就是这么写的。于是同一个版式里边框/圆角/表面都走 token，唯独最显眼的那块背景绕开了组件体系，换品牌色要满仓库找。
配方收进组件后：换色只动 color，暗色自动跟随（三档都以 --color-bg 打底做 color-mix）。
导入
import { AuthPanel } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| brand | ReactNode | — | 品牌位，通常直接放 Brand |
| title | ReactNode | — | 主标语 |
| titleLevel | 1..6 | 2 | 标题语义级别（只换 h1–h6 标签，视觉尺寸不变） |
| description | ReactNode | — | 标语下的补充说明 |
| highlights | ReactNode[] | — | 卖点列表，每条自动带一枚勾选标记（跟随 color） |
| children | ReactNode | — | 中部自由内容（插画、统计数字、客户 logo 墙） |
| footer | ReactNode | — | 底部区（版权、备案号、次要链接） |
| color | string | "primary" | 品牌色：语义色名 / 任意 CSS 色 / 变量，走 resolveTone（同 Brand .color、Dot .color、ChartSeries.color） |
| gradient | "radial" | "linear" | "mesh" | "none" | "radial" | 背景配方，见下 |
| className | string | — | 根节点类名 |
背景配方
| 档 | 长相 | 用在 |
|---|---|---|
radial（默认） | 左上角起的柔和光晕 | 最百搭，后台登录页 |
linear | 135° 斜向渐变，两端各带一点品牌色 | 想要方向感时 |
mesh | 三处光斑叠加 | 设计感最强，注册页 / 落地页 |
none | 纯 surface 底，不写 background | 想自己叠 DotPattern / GridPattern 之类图案时 |
禁忌 / 坑
- 面板自己不定高度（只写
h-full），高度交给外层栅格。分屏页通常是grid min-h-dvh xl:grid-cols-2，面板自然铺满那一列。组件里写死h-dvh会在「嵌进已有卡片」的场景里炸掉，同 AdminLayout 的 `fitViewport` 教训。 - 窄屏用 `className="hidden xl:flex"` 藏掉，而不是不渲染——面板是纯装饰，小屏只留表单；靠条件渲染会让 SSR/CSR 两边的树不一致。
- 三档渐变都以
--color-bg打底，所以暗色不需要另写一套。自己在外面套dark:覆盖背景等于把这个特性关掉。 gradient="none"是给「自己叠图案」用的，不是给「不要背景」用的——它仍有bg-surface，因为面板要和右侧表单区在明暗上分开。- 右半边表单记得传
surface={false}（LoginForm）：视觉重量已由左侧面板承担，再套一张卡就是卡中卡。 - 消费方
style仍能覆盖背景（整块换底图的逃生口），但那属于绕开组件体系——先想想是不是该给gradient加一档。
相关
LoginForm · Brand · Field · SocialButton · ClickCaptcha · DotPattern
Playground
把想法送上全球边缘
五分钟创建账号，开启第一个项目。
- 免费开始，闲时算力自动归零
- 从 git push 到全球边缘上线
<AuthPanel
gradient="radial"
color="primary"
title="把想法送上全球边缘"
description="五分钟创建账号，开启第一个项目。"
/>