折叠面板
折叠面板用于表单分组与详情页分段。展开图标旋转 180°，动画 300ms；手风琴模式下同时只展开一个面板。
18 · COLLAPSE · 折叠面板（§14.11）
基础折叠面板
基本信息
这是基本信息面板的内容区域。支持任意内容，包括文本、表单、表格等。
高级设置
高级设置面板：可配置数据同步频率、脱敏规则与审计日志保留周期。
操作日志
操作日志：记录最近 30 天内所有数据治理动作，支持按操作人筛选。
无边框模式
什么是设计系统？
设计系统是一套完整的标准化设计语言和组件库，确保产品在视觉和交互上的一致性。
如何使用本设计系统？
先阅读 DESIGN.md 中的 token 与组件规范，再复制 Code 标签页的标记，替换其中的业务文案即可。
<section id="collapse" class="section">
<div class="section-title">18 · COLLAPSE · 折叠面板（§14.11）</div>
<div class="demo-sub">基础折叠面板</div>
<div class="demo-box">
<div class="demo-accordion" data-accordion="single">
<div class="demo-acc-item is-open">
<div class="demo-acc-head">
<span>基本信息</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#71717A" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg>
</div>
<div class="demo-acc-body">这是基本信息面板的内容区域。支持任意内容，包括文本、表单、表格等。</div>
</div>
<div class="demo-acc-item">
<div class="demo-acc-head">
<span>高级设置</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#71717A" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg>
</div>
<div class="demo-acc-body">高级设置面板：可配置数据同步频率、脱敏规则与审计日志保留周期。</div>
</div>
<div class="demo-acc-item">
<div class="demo-acc-head">
<span>操作日志</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#71717A" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg>
</div>
<div class="demo-acc-body">操作日志：记录最近 30 天内所有数据治理动作，支持按操作人筛选。</div>
</div>
</div>
</div>
<div class="demo-sub">无边框模式</div>
<div class="demo-box" style="background:#FAFAFA">
<div class="demo-accordion demo-accordion-flat" data-accordion="single">
<div class="demo-acc-item is-open">
<div class="demo-acc-head">
<span>什么是设计系统？</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#71717A" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg>
</div>
<div class="demo-acc-body">设计系统是一套完整的标准化设计语言和组件库，确保产品在视觉和交互上的一致性。</div>
</div>
<div class="demo-acc-item">
<div class="demo-acc-head">
<span>如何使用本设计系统？</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#71717A" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg>
</div>
<div class="demo-acc-body">先阅读 DESIGN.md 中的 token 与组件规范，再复制 Code 标签页的标记，替换其中的业务文案即可。</div>
</div>
</div>
</div>
</section>安装
在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。
<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>使用方式
在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。
组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。
设计规范
完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。