create-react-docs-ui 0.2.0 → 0.4.0

package/template/public/docs/zh-cn/docs/test/katex-test.md

@@ -0,0 +1,260 @@
+# 🧪 KaTeX 全功能测试
+
+> 用于验证 KaTeX 是否正确加载所有扩展（mhchem / physics / mathtools 等）
+
+---
+
+## ✅ 行内公式
+
+爱因斯坦质能方程：  
+$E = mc^2$
+
+欧拉公式：  
+$e^{i\pi} + 1 = 0$
+
+分数测试：  
+$\frac{a+b}{c+d}$
+
+根号测试：  
+$\sqrt{2},\ \sqrt[n]{x}$
+
+---
+
+## ✅ 块级公式
+
+$$
+\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}
+$$
+
+$$
+\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
+$$
+
+---
+
+## ✅ 矩阵（mathtools）
+
+### 基础矩阵
+
+$$
+\begin{matrix}
+1 & 2 \\
+3 & 4
+\end{matrix}
+$$
+
+### 括号矩阵
+
+$$
+\begin{pmatrix}
+a & b \\
+c & d
+\end{pmatrix}
+$$
+
+### 方括号矩阵
+
+$$
+\begin{bmatrix}
+1 & 0 \\
+0 & 1
+\end{bmatrix}
+$$
+
+### 行列式
+
+$$
+\begin{vmatrix}
+a & b \\
+c & d
+\end{vmatrix}
+$$
+
+---
+
+## ✅ 对齐环境（ams）
+
+$$
+\begin{aligned}
+a^2 + b^2 &= c^2 \\
+e^{i\theta} &= \cos\theta + i\sin\theta
+\end{aligned}
+$$
+
+---
+
+## ✅ 分段函数
+
+$$
+f(x) =
+\begin{cases}
+x^2 & x \ge 0 \\
+-x & x < 0
+\end{cases}
+$$
+
+---
+
+## ✅ 化学公式（mhchem）
+
+水：
+
+$$
+\ce{H2O}
+$$
+
+燃烧反应：
+
+$$
+\ce{CH4 + 2O2 -> CO2 + 2H2O}
+$$
+
+可逆反应：
+
+$$
+\ce{A <=> B}
+$$
+
+离子：
+
+$$
+\ce{Na+ + Cl- -> NaCl}
+$$
+
+---
+
+## ✅ physics 宏测试
+
+导数：
+
+$$
+\dv{y}{x}
+$$
+
+偏导：
+
+$$
+\pdv{f}{x}
+$$
+
+二阶导：
+
+$$
+\dv[2]{y}{x}
+$$
+
+绝对值：
+
+$$
+\abs{x}
+$$
+
+范数：
+
+$$
+\norm{\vec{v}}
+$$
+
+期望值：
+
+$$
+\expval{A}
+$$
+
+括号自动伸缩：
+
+$$
+\qty(\frac{a}{b})
+$$
+
+---
+
+## ✅ mathtools 扩展
+
+多行对齐：
+
+$$
+\begin{aligned}
+\max_x \quad & x^2 + 2x \\
+\text{s.t.}\quad & x \ge 0
+\end{aligned}
+$$
+
+带标签：
+
+$$
+\underbrace{a+b+\cdots+z}_{26}
+$$
+
+---
+
+## ✅ 常用数学符号
+
+希腊字母：
+
+$$
+\alpha,\ \beta,\ \gamma,\ \Gamma,\ \Delta,\ \Omega
+$$
+
+关系符号：
+
+$$
+\le,\ \ge,\ \neq,\ \approx,\ \equiv
+$$
+
+集合符号：
+
+$$
+\in,\ \notin,\ \subset,\ \supset,\ \cup,\ \cap
+$$
+
+箭头：
+
+$$
+\rightarrow,\ \Rightarrow,\ \leftrightarrow,\ \mapsto
+$$
+
+---
+
+## 🚨 极限压力测试（很重要）
+
+> 如果这一段渲染正常，说明 KaTeX 基本完全 OK
+
+$$
+\pdv{ }{t}\qty(
+\int_{V} \rho(\vb{r},t)\, dV
+) =
+- \oint_{S} \rho \vb{v} \cdot d\vb{S}
+$$
+
+$$
+\ce{^{235}_{92}U + ^1_0n -> ^{236}_{92}U -> ^{141}_{56}Ba + ^{92}_{36}Kr + 3^1_0n}
+$$
+
+$$
+\begin{aligned}
+\mathcal{L} &= \frac{1}{2} m \dot{x}^2 - V(x) \\
+\hat{H}\psi &= i\hbar \pdv{\psi}{t}
+\end{aligned}
+$$
+
+---
+
+## ✅ 渲染检查清单
+
+- [ ] 行内公式正常
+- [ ] 块级公式居中
+- [ ] 矩阵对齐正确
+- [ ] mhchem 正常
+- [ ] physics 宏正常
+- [ ] 对齐环境正常
+- [ ] 移动端不溢出
+- [ ] 暗色模式可见
+
+---
+
+
+
+# 🎉 如果全部通过
+
+👉 你的 KaTeX 配置已经是**完整版**

package/template/public/docs/zh-cn/docs/test/mdx-test.mdx

@@ -0,0 +1,139 @@
+# MDX 组件使用示例
+
+本页面演示了如何在 Markdown 文档中使用自定义 React 组件。
+
+## 使用内置组件
+
+react-docs-ui 提供了一些内置的 MDX 组件，可以直接使用。
+
+**注意**：组件名称支持 PascalCase（推荐）和小写两种写法。例如，`<CodeBlock>` 和 `<codeblock>` 都可以正常工作。
+
+<Tip title="这是提示">
+    这是一个提示组件的内容。你可以在这里放置重要的提示信息。
+</Tip>
+
+<Warning title="这是警告">
+    这是一个警告组件的内容。用于提醒用户注意潜在的问题或风险。
+</Warning>
+
+<Card title="这是卡片">
+    这是一个卡片组件的内容。卡片可以用来组织相关的内容块。
+</Card>
+
+## 使用自定义组件
+
+在 template 的 `src/components` 目录下创建的 React 组件会自动被扫描并注册，可以直接在 MDX 文档中使用：
+
+<MyTip>
+    这是来自 template/src/components 的自定义组件！你可以在 `src/components`
+    目录下创建任何 React 组件，它们都会自动在 MDX 文档中可用。
+</MyTip>
+
+## 新增组件示例
+
+### Alert 组件
+
+Alert 组件支持多种类型：info、success、warning、error
+
+<Alert type="info" title="信息提示">
+    这是一条普通的信息提示，用于展示一般性的信息。
+</Alert>
+
+<Alert type="success" title="操作成功">
+    恭喜！操作已成功完成。
+</Alert>
+
+<Alert type="warning" title="注意">
+    请注意，这里有一些需要注意的事项。
+</Alert>
+
+<Alert type="error" title="错误提示">
+    发生了一个错误，请检查后重试。
+</Alert>
+
+
+
+### Feature 组件
+
+Feature 组件用于展示功能特性：
+
+<Feature
+    icon="⚡"
+    title="快速启动"
+    description="只需几秒钟即可启动项目，无需复杂配置。"
+></Feature>
+<Feature
+    icon="🎨"
+    title="主题定制"
+    description="支持亮色和暗色主题，完全可定制。"
+></Feature>
+<Feature
+    icon="📱"
+    title="响应式设计"
+    description="完美适配各种设备，提供最佳用户体验。"
+></Feature>
+
+### Callout 组件
+
+Callout 组件用于强调重要内容：
+
+<Callout variant="default">
+    这是一个默认样式的 Callout，用于强调重要的内容。
+</Callout>
+
+<Callout variant="primary">
+    这是一个主要样式的 Callout，用于突出显示核心信息。
+</Callout>
+
+<Callout variant="secondary">
+    这是一个次要样式的 Callout，用于补充说明。
+</Callout>
+
+### StepList 组件
+
+StepList 组件用于展示步骤流程：
+
+<StepList>
+    <StepList.Step title="安装依赖">
+        运行 `npm install` 命令安装项目所需的依赖包。
+    </StepList.Step>
+    <StepList.Step title="配置环境">
+        根据项目需求配置环境变量和开发环境。
+    </StepList.Step>
+    <StepList.Step title="启动项目">
+        运行 `npm run dev` 启动开发服务器。
+    </StepList.Step>
+    <StepList.Step title="开始开发">
+        开始编写代码，实现你的功能需求。
+    </StepList.Step>
+</StepList>
+
+### BadgeList 组件
+
+BadgeList 组件用于展示标签或状态：
+
+<BadgeList>
+    <BadgeList.Badge variant="default">默认标签</BadgeList.Badge>
+    <BadgeList.Badge variant="success">成功状态</BadgeList.Badge>
+    <BadgeList.Badge variant="warning">警告状态</BadgeList.Badge>
+    <BadgeList.Badge variant="error">错误状态</BadgeList.Badge>
+    <BadgeList.Badge variant="info">信息标签</BadgeList.Badge>
+</BadgeList>
+
+## 代码块示例
+
+你可以在 MDX 中使用标准的 Markdown 代码块语法：
+
+```tsx
+// 这是一个 TypeScript 代码块示例
+function Greeting({ name }: { name: string }) {
+    return <div>Hello, {name}!</div>;
+}
+```
+
+```javascript
+// 这是一个 JavaScript 代码块示例
+function add(a, b) {
+    return a + b;
+}
+```

package/template/public/docs/zh-cn/docs/test/test.md

@@ -0,0 +1,215 @@
+
+# 📄 文档渲染测试页
+
+> 用于测试文档网站是否正确渲染各种 Markdown / MDX 功能。
+
+---
+
+## 🧭 目录
+
+- [标题测试](#标题测试)
+- [文本样式](#文本样式)
+- [列表](#列表)
+- [代码块](#代码块)
+- [表格](#表格)
+- [引用块](#引用块)
+- [提示块](#提示块)
+- [图片](#图片)
+- [数学公式](#数学公式)
+- [MDX 组件（可选）](#mdx-组件可选)
+
+---
+
+## 标题测试
+
+### H3 标题
+#### H4 标题
+##### H5 标题
+###### H6 标题
+
+---
+
+## 文本样式
+
+**粗体**
+
+*斜体*
+
+~~删除线~~
+
+`行内代码`
+
+<kbd>Ctrl</kbd> + <kbd>C</kbd>
+
+---
+
+## 列表
+
+### 无序列表
+
+- Apple
+- Banana
+  - 子项 1
+  - 子项 2
+- Orange
+
+### 有序列表
+
+1. 第一步
+2. 第二步
+3. 第三步
+
+### 任务列表
+
+- [x] 已完成
+- [ ] 未完成
+
+---
+
+## 代码块
+
+### JavaScript
+
+```js
+function greet(name) {
+  console.log(`Hello, ${name}!`)
+}
+
+greet("World")
+````
+
+### Bash
+
+```bash
+pnpm install
+pnpm dev
+```
+
+### JSON
+
+```json
+{
+  "name": "docs-test",
+  "version": "1.0.0"
+}
+```
+
+---
+
+## 表格
+
+| 功能   | 是否支持 | 备注    |
+| ---- | ---- | ----- |
+| 标题   | ✅    | 正常    |
+| 代码块  | ✅    | 高亮    |
+| 数学公式 | ⏳    | 视主题而定 |
+
+---
+
+## 引用块
+
+> 这是一个引用块
+> 用于测试样式。
+
+---
+
+## 提示块
+
+> [!NOTE]
+> 这是 NOTE 提示块（部分主题支持）
+
+> [!TIP]
+> 这是 TIP 提示块
+
+> [!WARNING]
+> 这是 WARNING 提示块
+
+---
+
+## 图片
+
+![示例图片](https://picsum.photos/800/400)
+![01-image](/images/yrzx.png)
+
+---
+
+## 数学公式
+
+行内公式：
+
+$E = mc^2$
+
+块级公式：
+
+$$
+\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
+$$
+
+---
+
+## MDX 组件（可选）
+
+如果你的文档系统支持 MDX，可以测试：
+
+```jsx
+export function Hello() {
+  return <div style={{color: 'red'}}>Hello MDX!</div>
+}
+```
+
+---
+
+## 🔥 折叠块（部分主题支持）
+
+<details>
+<summary>点击展开</summary>
+
+这里是折叠内容。
+
+</details>
+
+---
+
+## 🧪 长内容滚动测试
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+（你可以复制多几段测试滚动）
+
+---
+
+## ✅ 渲染检查清单
+
+* [ ] 代码高亮正常
+* [ ] 表格样式正常
+* [ ] 提示块有样式
+* [ ] 数学公式正常
+* [ ] 图片自适应
+* [ ] 移动端响应式正常
+
+---
+
+**测试完成 🎉**
+
+
+---
+
+如果你愿意，我可以帮你再生成一个：
+
+- 🔥 专门针对 **Nextra** 的测试版  
+- 🚀 专门针对 **VitePress** 的测试版  
+- 🎨 极限压力测试版（专测样式崩不崩）
+
+你只要说一声 👍

package/template/public/docs/zh-cn/docs/test.md

@@ -0,0 +1,9 @@
+# 文档测试
+
+这里汇集了各种文档功能的测试页面，用于验证 React Docs UI 的渲染能力。
+
+## 测试页面
+
+- [MD 测试](/docs/test/test) - 测试各种 Markdown 语法和功能
+- [KaTeX 测试](/docs/test/katex-test) - 测试数学公式的完整功能
+- [MDX 演示](/docs/test/mdx-test) - 查看 MDX 组件的使用示例

package/template/public/docs/zh-cn/docs.md

@@ -0,0 +1,16 @@
+# 文档
+
+欢迎使用 React Docs UI 文档系统。
+
+## 快速开始
+
+- [介绍](/docs/guide/introduction) - 了解 React Docs UI 的核心理念
+- [安装](/docs/guide/installation) - 学习如何安装和配置
+- [快速上手](/docs/guide/quick-start) - 在 5 分钟内创建你的第一个文档网站
+- [配置说明](/docs/guide/configuration) - 深入了解配置选项
+
+## 文档测试
+
+- [MD 测试](/docs/test/test) - 测试 Markdown 渲染功能
+- [KaTeX 测试](/docs/test/katex-test) - 测试数学公式渲染
+- [MDX 演示](/docs/test/mdx-test) - 查看 MDX 组件使用示例

package/template/src/components/Alert.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+
+interface AlertProps {
+  type?: 'info' | 'success' | 'warning' | 'error'
+  title?: string
+  children: React.ReactNode
+}
+
+export function Alert({ type = 'info', title, children }: AlertProps) {
+  const styles = {
+    info: 'border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-200',
+    success: 'border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-200',
+    warning: 'border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-200',
+    error: 'border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200'
+  }
+
+  const icons = {
+    info: 'ℹ️',
+    success: '✅',
+    warning: '⚠️',
+    error: '❌'
+  }
+
+  return (
+    <div className={`my-4 rounded-lg border p-4 ${styles[type]}`}>
+      {title && <div className="mb-2 font-semibold">{icons[type]} {title}</div>}
+      <div>{children}</div>
+    </div>
+  )
+}

package/template/src/components/BadgeList.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+
+interface BadgeProps {
+  variant?: 'default' | 'success' | 'warning' | 'error' | 'info'
+  children: React.ReactNode
+}
+
+interface BadgeListProps {
+  children: React.ReactNode
+}
+
+function Badge({ variant = 'default', children }: BadgeProps) {
+  const styles = {
+    default: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200',
+    success: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
+    warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
+    error: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
+    info: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
+  }
+
+  return (
+    <span className={`inline-block rounded-full px-3 py-1 text-sm ${styles[variant]}`}>
+      {children}
+    </span>
+  )
+}
+
+export function BadgeList({ children }: BadgeListProps) {
+  return (
+    <div className="my-4 flex flex-wrap gap-2">
+      {React.Children.map(children, child => 
+        React.isValidElement(child) ? child : null
+      )}
+    </div>
+  )
+}
+
+BadgeList.Badge = Badge