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

README.md

@@ -1,8 +1,17 @@
 ## TODO
 
+排查退出登录以及偶尔401跳转到 /login?force=true 问题
+
+页头链接完善跳转地址
+
+树组件优化
+
+sse 向客户端推送通知与支付结果等事件
+
 IP 管理按长短效分页
 
 调整页面大小优化：如果单页大小不超过预期大小，不需要刷新数据
+
 翻页优化：调整页面大小后检查是否需要重置页面到最后一页（需要后端实现）
 
 ### 架构改进

eslint.config.mjs

@@ -18,8 +18,8 @@ const eslintConfig = [
       '@stylistic': stylistic,
     },
     rules: {
-      'semi': ['error', 'never'],
+      '@stylistic/semi': ['error', 'never'],
-      'indent': ['error', 2],
+      '@stylistic/indent': ['error', 2],
       '@typescript-eslint/no-empty-object-type': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
       '@stylistic/member-delimiter-style': ['error', {

next.config.ts

@@ -1,7 +1,18 @@
 import type { NextConfig } from "next"
+import createMDX from "@next/mdx"
+import remarkGfm from 'remark-gfm'
 
 const nextConfig: NextConfig = {
   output: "standalone",
+  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
 }
 
-export default nextConfig
+const withMdx = createMDX({
+  extension: /\.(md|mdx)$/,
+  options: {
+    remarkPlugins: [remarkGfm],
+    rehypePlugins: [],
+  }
+})
+
+export default withMdx(nextConfig)

package.json

@@ -3,13 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -H 0.0.0.0 --turbopack",
+    "dev": "next dev -H 0.0.0.0",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@hookform/resolvers": "^4.1.3",
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@next/mdx": "^15.3.3",
     "@radix-ui/react-alert-dialog": "^1.1.6",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.6",
@@ -35,6 +38,7 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "recharts": "^2.15.3",
+    "remark-gfm": "^4.0.1",
     "sonner": "^2.0.1",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",
@@ -46,6 +50,8 @@
     "@next/eslint-plugin-next": "^15.2.1",
     "@stylistic/eslint-plugin": "^4.2.0",
     "@tailwindcss/postcss": "^4",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/mdx": "^2.0.13",
     "@types/node": "^20",
     "@types/qrcode": "^1.5.5",
     "@types/react": "^19",

src/app/globals.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
 
 @plugin "tailwindcss-animate";
+@plugin "@tailwindcss/typography";
 
 :root {
   --idle: oklch(1 0 0);

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,
+  }
+}