Cards / 02
手风琴 · 分割线
手风琴用原生 details 实现，零脚本即可展开收起，四种样式覆盖 FAQ、折叠面板与互斥选项；分割线提供文本、垂直、纯线与图标四种形态，用于切分内容密度。
手风琴 4 种样式
details / 分隔 / .acc-item / data-acc="single"① 默认 · details 原生
保留浏览器原生三角标记与展开行为，不引入任何装饰，适合正文里的轻量折叠。
组件库需要打包构建吗？
不需要。所有样式以单个 CSS 文件交付，页面里引入后即可直接使用类名，支持按需覆盖变量。
如何切换深浅色主题？
在根元素上切换 dark 类即可，颜色全部走语义变量，无需重写任何组件样式。
旧浏览器兼容性如何？
依赖 details、CSS 变量与网格布局，主流浏览器近两个大版本均可正常运行。
② 分隔样式 · 1px 细分隔线
去掉原生标记，用发丝线串成列表，标题右侧带方向指示，适合设置项与条款说明。
发票与报销流程
在「团队设置 · 财务」中提交开票信息，增值税专票 3 个工作日内寄出，电子普票即时发送到邮箱。
成员席位如何计费
按自然月结算活跃席位，只读成员不计费；当月新增席位按剩余天数折算。
数据导出格式
支持导出为 Excel、CSV 与 JSON 三种格式，单次导出上限 20 万行，超出部分自动分片。
③ 卡片样式 · .acc-item
每条独占一张圆角卡片，展开时加强边框与投影，圆形按钮里的两条横线在展开时旋转收起。
如何接入企业 SSO？
在管理后台的「安全 · 单点登录」中上传 IdP 元数据，保存后即可用 SAML 2.0 或 OIDC 登录，已登录用户会保留 30 天会话。
支持哪些云区域的部署？
目前覆盖新加坡、法兰克福、弗吉尼亚与东京四个主区域，每个区域内提供三个可用区，数据默认不出境。
超出配额后会怎样？
只读请求不受影响，写入请求会被临时限流并给出 429 与重试间隔，同时向管理员发送告警邮件。
④ 互斥多开 · data-acc="single"
同一组内展开一项时自动收起其它项，适合选项说明、决策向导这类只应保留一个焦点的场景。
按月订阅
每月 ¥299，含 10 个席位与全部行业页面，随时可取消，当月剩余天数按比例退还。
按年订阅
每年 ¥2990，相当于 10 个月价格，含 20 个席位、专属技术支持与季度设计评审。
私有化部署
一次性授权 ¥98000，含一年内 3 次版本升级与源码级定制支持，可在自有云或内网环境中运行。
分割线 4 种形态
.divider / .divider-v / 纯线 / 图标① 文本分割 · .divider
已使用邮箱与密码完成注册。
或选择其它登录方式
今天
文本分割线同时承担时间轴分组的职责。
② 垂直分割 · .divider-v
首页组件库卡片体系面包屑
运行中
node-01
CPU 32%
③ 纯线分割
实线
虚线
渐隐线
粗分隔 · 2px
④ 图标分割
图标线常用于把「已有内容」与「新内容」分开，图标本身可以承载状态。
反色圆底用于主要动作之间的分隔，视线会自然落在图标上。
已归档
组合用法
手风琴 + 分割线 → 设置面板设置面板
3 组 · 9 项
通知与提醒
安全与登录
外观与偏好
外观偏好会保存在本机，不随账号同步。
类名与行为
.acc-item圆角 20px 卡片外框，展开时加强边框并叠加卡片阴影
.acc-ic28px 圆形按钮，内含两条横线组成加号，展开后旋转 180° 并收起竖线
.acc-content正文区，左右 22px 与标题对齐，底部留 20px 内边距
data-acc="single"同组内展开一项自动收起其它项，实现互斥
.divider两段等宽细线夹住中间文本，自动两端对齐
.divider-v1px 高 16px 的垂直分割，行内元素之间使用