引入 mdx 以显示 markdown 文档，使用 tailwind 默认排版样式；修正 eslint 规则

src/app/globals.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
 
 @plugin "tailwindcss-animate";
+@plugin "@tailwindcss/typography";
 
 :root {
   --idle: oklch(1 0 0);
@@ -119,4 +120,4 @@
   th {
     @apply font-normal;
   }
-}
+}

src/app/test/page.tsx

@@ -0,0 +1,10 @@
+import Qqwwee from "@/components/docs/qqwwee.mdx"
+import Markdown from "@/components/markdown"
+
+export default async function TestPage(){
+  return (
+    <Markdown>
+      <Qqwwee/>
+    </Markdown>
+  )
+}

src/components/docs/qqwwee.mdx

@@ -0,0 +1,22 @@
+import {Button} from '@/components/ui/button';
+
+# qweqwe
+
+## awdasdasd
+
+### zxczxczxc
+
+afsdfasf
+
+- qweqwe
+- awdasdasd
+- zxczxc
+
+- [ ] asd
+
+| qwe | asd | zxc |
+| --- | --- | --- |
+| 111 | 222 | 333 |
+
+<Button>哈哈</Button>
+

src/components/markdown.tsx

@@ -0,0 +1,12 @@
+import { merge } from "@/lib/utils"
+
+export default function Markdown(props: React.ComponentProps<'div'>) {
+  return (
+    <div {...props} className={merge(
+      `prose`,
+      props.className,
+    )}>
+      {props.children}
+    </div>
+  )
+}

src/components/ui/tabs.tsx

@@ -26,7 +26,7 @@ function TabsList({
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={merge(
-        "bg-muted text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-1",
+        "bg-muted text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-1 h-10",
         className
       )}
       {...props}

src/mdx-components.tsx

@@ -0,0 +1,7 @@
+import type { MDXComponents } from 'mdx/types'
+ 
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+  }
+}