样式展示
本页展示项目中所有通用组件和样式,用于快速验证视觉一致性。
当前应用可接收到的内置参数:
| 参数名 | 参数值 |
|---|---|
| service | {"name":"样式展示","desc":"展示所有通用组件和样式变量","path":"/app/style-showcase","icon":"material-symbols:palette","category":"other"} |
| isCurrentFavorite | false |
| isInApp | false |
| currentTheme | "auto" |
| loginStatus | "unknown" |
| userInfo | null |
DetailsSection — 可折叠区块
支持懒加载的可折叠区块,通过 onReveal 在首次展开时触发回调,返回的清理函数在折叠时自动调用。
基础用法(点击展开)
始终渲染
关闭时内容不被销毁,适合频繁切换显示/隐藏的轻量内容。
每次重新加载
默认展开示例
默认展开的内容,适合默认展示的信息区块。
SectionCard
基础卡片容器,当前你正在看到的每一个区块都是 SectionCard。
颜色变量
--color-primary
--color-secondary
--color-accent
--color-fg-primary
--color-fg-muted
--color-fg-inverse
--color-bg
--color-bg-elevated
--color-bg-sunken
--color-card-bg
--color-card-bg-hover
--color-card-bg-active
--color-border
--color-border-strong
--color-success
--color-danger
--color-primary
--color-secondary
--color-accent
--color-fg-primary
--color-fg-muted
--color-fg-inverse
--color-bg
--color-bg-elevated
--color-bg-sunken
--color-card-bg
--color-card-bg-hover
--color-card-bg-active
--color-border
--color-border-strong
--color-success
--color-danger
AppCard
IconButton
点击次数: 0
TextareaInput
TextareaOutput / TextareaOutputRaw
自定义内容的输出容器
TooltipIcon
上侧提示
下侧提示
左侧提示
右侧提示
ImageIcon
MarkdownRender
很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的一级标题
三级标题
- 列表项一
- 列表项二
- 列表项三
粗体文本 和 斜体文本
引用块示例
行内代码
DialogContext — 全局弹窗
基于 Context 的全局弹窗系统,提供 alert / confirm / prompt / load 四种模式。 所有弹窗均为 Promise 化调用。
alert — 提示框
confirm — 确认框
prompt — 输入框
load — 加载框
已完成 0 次加载
提示:prompt 输入框支持 Enter 确认、Escape 取消;alert 支持点击遮罩关闭。
图标展示
home
apps
settings
functions
content-paste-search
kid-star
history
check-circle
