MDC 组件完整测试

本页面展示所有 Docus Prose MDC 组件的渲染效果。

文本样式

这是粗体文本，这是斜体文本，这是删除线文本。

行内代码示例：const hello = 'world'

Badge 徽章

这是一个 新功能 徽章，还有 v2.0 版本徽章。

块级 Badge 间距示例

方式一：使用   空行分隔（推荐，简单直观）

方式二：使用内联 badge 放在同一段落中（适合紧凑排列）

中英文双语 响应式设计 高性能优化

Card 卡片

Alert / Callout 提示框

图片展示多种方式

1. 标准 Markdown 图片

最基础的图片插入方式，适合文章正文插图。

2. 带标题和链接的卡片图片

使用 ::card 包裹图片，可以添加标题、图标和点击跳转链接。

3. 双列图片并排

使用 ::card-group 实现并排显示，适合对比展示。

4. 三列图片展示

适合展示图集或多角度照片。

5. 图文混排

左图右文或上图下文的布局。

6. HTML标签 (自定义控制)

如果需要更精细的控制（如宽度百分比），可以直接使用 HTML 标签。

Tabs 选项卡

# 设计工作流
建模 → 仿真 → 优化 → 验证

代码块

TypeScript 示例

interface RaceCarConfig {
  power: number
  weight: number
  wheelbase: number
}

const e07Config: RaceCarConfig = {
  power: 80, // kW
  weight: 280, // kg
  wheelbase: 1600 // mm
}

function calculateAcceleration(config: RaceCarConfig): number {
  return config.power / config.weight
}

Vue 组件示例

<template>
  <div class="race-car-dashboard">
    <h1>{{ carModel }}</h1>
    <div class="stats">
      <div class="stat">
        <span class="label">速度</span>
        <span class="value">{{ speed }} km/h</span>
      </div>
      <div class="stat">
        <span class="label">电池</span>
        <span class="value">{{ battery }}%</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const carModel = ref('E07')
const speed = ref(0)
const battery = ref(100)
</script>

带文件名的代码块

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

Steps 步骤

Collapsible 折叠面板

表格

引用

速度不是一切，稳定性和可靠性同样重要。只有经过反复测试和优化的赛车，才能在赛场上发挥最佳性能。

—— BITFSAE 技术总监

列表

无序列表

• 底盘组
  • 车架设计
  • 悬架系统
  • 制动系统
• 动力组
  • 电机选型
  • 电池管理
  • 电控系统
• 车身组
  • 空气动力学
  • 车身造型
  • 碳纤维制造

有序列表

1. 概念设计阶段
2. 详细设计阶段
3. 制造装配阶段
4. 测试优化阶段
5. 参赛准备阶段

图片画廊示例

总结

以上展示了所有常用的 MDC 组件及其在车队网站中的应用场景。

高级样式测试（MDC 增强版）

文本位置（::center / ::left / ::right）

文字颜色（预设 + 自定义 HEX）

红色预设 · 蓝色预设 · 紫色预设 · 青色预设

自定义品牌蓝 #0ea5e9 · 自定义深灰 #334155

背景色（预设 + 自定义）

蓝色浅底 · 绿色浅底

自定义背景 #fef3c7 · 自定义渐变背景

字体深浅（tone）与大小（size）

faint · muted · normal · strong

xs · sm · base · lg · xl · 2xl · 3xl

常用组合样式（预设 preset）

highlight 高亮 · code 代码风 · warn 警示

important 重要提示 · success 成功状态 · info 信息提示 · ghost 弱化文本

多行/换行写法（解决“挤在一起”）

方式 1：display="block"（推荐）

方式 2：结合 ::center 与 block，做多行居中

方式 3：同段内紧凑排版（需要手动加入分隔）

标签A 标签B 标签C

数学公式（需要KaTeX支持）

行内公式：$E = mc^2$

块级公式：