diff --git a/DEV_LOG.md b/DEV_LOG.md
index c4e5740..96fcfc0 100644
--- a/DEV_LOG.md
+++ b/DEV_LOG.md
@@ -7,3 +7,4 @@ Task 7: BaseLayout 闭环
 Task 8 修正：已通过替换 @tailwindcss/vite 解决配置文件路径问题，构建成功。
 核心渲染系统闭环成功
 Task 10: MDX 生态集成完毕
+Task 11: 现代表格组件 ModernTable 构建完成
diff --git a/src/content/docs/test.md b/src/content/docs/test.md
deleted file mode 100644
index b333b3b..0000000
--- a/src/content/docs/test.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-title: "极致渲染测试"
----
-# 欢迎来到我的文档
-
-测试一个数学公式：
-$$
-E = mc^2
-$$
-
-测试代码高亮：
-```javascript
-console.log("Hello Astro!");
-```
diff --git a/src/content/docs/test.mdx b/src/content/docs/test.mdx
new file mode 100644
index 0000000..6d423c2
--- /dev/null
+++ b/src/content/docs/test.mdx
@@ -0,0 +1,31 @@
+---
+title: "API 数据面板看板"
+---
+import ModernTable from '../../components/ModernTable.astro';
+
+# 模型消耗统计报告
+
+以下是今日各模型的 Token 消耗与计费统计（采用精美组件渲染）：
+
+<ModernTable>
+  <tr slot="header">
+    <th class="px-6 py-4 font-medium">厂商与模型</th>
+    <th class="px-6 py-4 font-medium">输入费用 (元)</th>
+    <th class="px-6 py-4 font-medium">输出费用 (元)</th>
+    <th class="px-6 py-4 font-medium text-blue-500">总费用 (元)</th>
+  </tr>
+  <tbody slot="body">
+    <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+      <td class="px-6 py-4 flex items-center gap-2">🚀 <span class="font-semibold text-gray-900 dark:text-white">DeepSeek-V4-Flash</span></td>
+      <td class="px-6 py-4">0.72</td>
+      <td class="px-6 py-4">0.16</td>
+      <td class="px-6 py-4 font-bold text-gray-900 dark:text-white">0.88</td>
+    </tr>
+    <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+      <td class="px-6 py-4 flex items-center gap-2">☁️ <span class="font-semibold text-gray-900 dark:text-white">Qwen3.6-Plus</span></td>
+      <td class="px-6 py-4">1.45</td>
+      <td class="px-6 py-4">0.94</td>
+      <td class="px-6 py-4 font-bold text-gray-900 dark:text-white">2.39</td>
+    </tr>
+  </tbody>
+</ModernTable>