MCL 组件全功能测试指南
测试说明 📋 本文档用于测试 MCL 语法规范中定义的所有核心组件，确保每个组件都能正常渲染和交互。建议按顺序阅读并验证每个组件的显示效果。
一、基础组件测试 ⭐⭐⭐
1.1 Alert 提示框
MCL 支持 5 种类型的提示框，用于不同场景的信息展示：
信息提示 ℹ️ 这是 info 类型的提示框，用于提供一般性信息和说明。
操作成功 ✅ 数据已保存，配置已生效。
注意事项 ⚠️ 该操作不可撤销，请谨慎执行。建议在操作前备份重要数据。
错误提示 ❌ 连接失败，请检查网络设置或联系管理员。
小技巧 💡 使用 Ctrl+S 可以快速保存当前文档，提高工作效率。
1.2 Badge 徽章
徽章用于标记状态、分类和标签，可以内联在文本中使用：
产品更新日志 v2.0 重要 新功能
我们发布了多个版本更新：
- 版本 1.0 稳定 - 基础功能完善
- 版本 1.5 热门 - 性能优化
- 版本 2.0 最新 - 全新架构
- 旧版本 已废弃 - 不再维护
Badge 也可以组合使用：前端 后端 全栈
1.3 Button 按钮
按钮用于行动号召和链接跳转，支持多种样式和尺寸：
主要操作区域：
小型按钮组：
1.4 Code 代码块
Code 组件用于在 MCL 组件内部展示代码，避免与 Markdown 语法冲突：
Python 示例：
def greet(name):
"""打招呼函数"""
return f"Hello, {name}!"
if __name__ == "__main__":
print(greet("World"))JavaScript 示例（带行号）：
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(3000);Bash 命令示例：
npm install @mcl/parser
npm run build
npm start1.5 List 样式列表
Check 类型（对勾列表）
- 组件样式完全标准化 ✅
- CSS 变量支持主题定制 🎨
- 响应式适配所有设备 📱
- 零依赖纯原生实现 ⚡
- 完善的文档体系 📚
Arrow 类型（箭头列表）
- 第一步：需求分析与规划
- 第二步：技术方案设计
- 第三步：核心功能开发
- 第四步：测试与优化
- 第五步：部署上线
Star 类型（星号列表）
- 高性能渲染引擎
- 丰富的组件库
- AI 友好的语法设计
- 强大的扩展能力
Number 类型（数字编号）
- 安装 Python 环境
- 配置虚拟环境
- 安装依赖包
- 运行测试用例
- 启动开发服务器
Alpha 类型（字母编号）
- 首要任务：完成需求分析
- 次要任务：设计数据库结构
- 最后任务：编写测试用例
- 补充任务：撰写技术文档
二、布局组件测试 ⭐⭐
2.1 Card Grid 卡片网格
展示多个并列的特性或功能，支持 2/3/4 列布局：
2.2 Card Horizontal 水平卡片
用于强调核心理念、重要观点或特色介绍：
2.3 Tabs 选项卡
分组展示相关内容，节省空间，支持嵌套简单组件：
这里介绍产品的核心功能，支持 Markdown 格式。
主要特性包括：
- 组件化语法
- 主题定制
- 响应式设计
- 零依赖实现
适合技术文档、产品手册、博客文章等多种场景。
技术架构的详细说明。
- 前端：React + TypeScript
- 后端：Node.js + Express
- 数据库：PostgreSQL
- 缓存：Redis
- 部署：Docker + K8s
API 接口文档内容。
// 调用示例
const result = await parseMCL(mclText);
console.log(result.html);更多 API 请参考完整文档。
版本迭代记录：
- v2.0 最新 - 全新架构
- v1.5 - 性能优化
- v1.0 - 初始版本
2.4 Collapse 折叠卡片
隐藏详细内容，保持页面简洁，适合 FAQ 和技术细节：
什么是 MCL？
MCL（Markdown Component Language）是一种 Markdown 的升级版标记语言。
它在标准 Markdown 的基础上扩展了组件化语法，让 AI 能够生成更丰富的内容。MCL 完全兼容 Markdown，你可以把 MCL 理解为"Markdown Plus"。
核心优势：
- 语法简洁规律
- AI 友好度高
- 组件丰富多样
- 零学习成本
如何开始使用？
只需三步即可开始：
- 安装解析器：
pip install mcl-parser - 编写 .mcl 文件
- 运行构建命令：
python build.py
详细教程请参考官方文档。
MCL 和 Markdown 有什么区别？
MCL 完全兼容 Markdown，在此基础上增加了组件化语法。
| 特性 | Markdown | MCL |
|---|---|---|
| 基础语法 | ✓ | ✓ |
| 富媒体组件 | ✗ | ✓ |
| AI 友好 | 一般 | 优秀 |
| 批量生成 | ✗ | ✓ |
简单来说，MCL = Markdown + 组件化能力。
2.5 Steps 步骤条
展示流程、步骤、时间顺序，适合教程和指南：
2.6 Timeline 时间线
展示发展历程、版本迭代、事件记录：
2.7 Feature Grid 特性网格
展示产品特性、功能亮点、核心优势：
AI 原生 🤖
语法专为 LLM 设计，生成准确率高达 98%，是 AI 时代的内容创作利器。
零依赖 ⚡
纯原生实现，无需任何框架，开箱即用，轻量高效，易于集成。
主题丰富 🎨
8 套配色方案，一键切换品牌风格，满足不同场景的视觉需求。
安全可靠 🔒
数据加密传输，权限分级管理，保障内容安全，企业级安全保障。
高性能 🚀
纯静态输出，CDN 加速，首屏加载 < 500ms，用户体验流畅丝滑。
文档完善 📚
详细的语法规范和示例，完善的 API 文档，降低学习成本。
三、数据展示组件测试 ⭐
3.1 Stats 统计数据
突出关键数字、指标，用数据说话：
另一个统计示例：
3.2 Progress 进度条
展示完成度、进度、比例：
项目进度概览：
3.3 Comparison 对比表格
对比不同方案、产品、版本的优劣：
| 特性 | 传统 Markdown | Docusaurus | MCL 系统 |
|---|---|---|---|
| 基础 Markdown | ✓ | ✓ | ✓ |
| 富媒体组件 | ✗ | ✓ | ✓ |
| AI 友好语法 | ✓ | ✗ | ✓ |
| 零构建步骤 | ✓ | ✗ | ✓ |
| 批量生成能力 | ✗ | ✗ | ✓ |
| 学习成本 | 低 | 中 | 低 |
| 社区生态 | 大 | 中 | 成长中 |
3.4 Mindmap 思维导图
将 Markdown 标题层级转换为交互式思维导图：
3.5 Mermaid 图表
绘制专业的技术图表，支持多种图表类型：
流程图示例
时序图示例
状态图示例
3.6 Rating 评分
展示评分、评级、满意度：
产品评价：
3.7 Testimonials 用户评价
展示用户反馈、客户评价：
3.8 CTA 行动号召
引导用户采取行动，通常放在文章结尾：
四、综合应用示例
4.1 完整工作流程
结合多个组件展示完整的工作流程：
最佳实践 💡 在实际文章中，应该根据内容需要选择合适的组件，不要过度使用。文字内容应占 70% 以上，组件仅用于点缀和增强可读性。
一个典型的技术文章结构：
4.2 组件使用频率建议
五、测试总结
测试完成 ✅ 本文档已测试 MCL 语法规范中定义的所有核心组件，包括：
- ✅ 5 个基础组件（Alert、Badge、Button、Code、List）
- ✅ 7 个布局组件（Card Grid、Card Horizontal、Tabs、Collapse、Steps、Timeline、Feature Grid）
- ✅ 8 个数据组件（Stats、Progress、Comparison、Mindmap、Mermaid、Rating、Testimonials、CTA）
- ✅ 2 个媒体组件（Figure、Video）
共计 22 个核心组件全部测试通过！
- 所有组件渲染正常 ✅
- 响应式适配良好 📱
- 交互功能完整 🎯
- 主题切换顺畅 🎨
- 移动端体验优化 ✨