feat(docs): enhance demo system with LiveDemo and MultiFileFrame, improve code highlighting, and refactor components

Author: Ohh-889

packages/next-docs-plugin/src/components/Code.tsx

@@ -27,7 +27,6 @@ const Code: FC<
     const container = event.currentTarget.closest('.code-block');
     return container?.querySelector('pre code')?.textContent ?? '';
   }
-  console.log('props', props);
 
   return (
     <code

packages/next-docs-plugin/src/components/ComponentPreview.tsx

@@ -5,21 +5,22 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { Check, Copy } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 
-import { Segment } from '@/components/s';
+import { Segment } from '@/components/segment';
 
-import { highlight } from '../lib/shiki';
+import { highlightCode } from '../lib/shiki';
 
 interface Props {
+  children: React.ReactNode;
+
   code: string;
-  demo: React.ReactNode;
   height?: number | string;
   lang?: string;
   name: string;
   tabs?: { label: string; value: string }[];
   title?: string;
 }
 
-export const ComponentPreview: React.FC<Props> = ({ code, demo, height = 360, lang = 'tsx', name, tabs, title }) => {
+const ComponentPreview: React.FC<Props> = ({ children, code, height = 360, lang = 'tsx', name, tabs, title }) => {
   const [active, setActive] = useState(tabs?.[0]?.value ?? 'preview');
   const [copied, setCopied] = useState(false);
   const [html, setHtml] = useState('');
@@ -29,7 +30,9 @@ export const ComponentPreview: React.FC<Props> = ({ code, demo, height = 360, la
   useEffect(() => {
     let canceled = false;
     setIsLoading(true);
-    highlight(code.trim(), lang).then(result => {
+    highlightCode(code, lang).then(result => {
+      console.log('result', result);
+
       if (!canceled) {
         setHtml(result);
         setIsLoading(false);
@@ -51,19 +54,19 @@ export const ComponentPreview: React.FC<Props> = ({ code, demo, height = 360, la
   };
 
   return (
-    <div className="my-8 overflow-hidden rounded-lg border border-border/50 bg-background/50 shadow-sm">
+    <div className="my-8 overflow-hidden prose rounded-lg border border-border/50 bg-background/50 shadow-sm">
       {/* Header */}
       <div className="flex items-center justify-between border-b border-border/50 px-4 py-2 bg-muted/40">
         <span className="font-medium text-sm text-foreground truncate">{title ?? name}</span>
         <Segment
           value={active}
-          options={
+          items={
             tabs ?? [
               { label: 'Preview', value: 'preview' },
               { label: 'Code', value: 'code' }
             ]
           }
-          onChange={setActive}
+          onValueChange={setActive}
         />
       </div>
 
@@ -79,7 +82,7 @@ export const ComponentPreview: React.FC<Props> = ({ code, demo, height = 360, la
             style={{ height }}
             transition={{ duration: 0.2 }}
           >
-            {demo}
+            {children}
           </motion.div>
         ) : (
           <motion.div
@@ -104,8 +107,11 @@ export const ComponentPreview: React.FC<Props> = ({ code, demo, height = 360, la
 
             {/* Code */}
             <div
-              className="overflow-auto text-sm leading-relaxed font-mono not-prose p-4"
               dangerouslySetInnerHTML={{ __html: html }}
+              className={cn(
+                'h-[calc(100vh-380px)] overflow-auto',
+                '[&_pre]:m-0 [&_pre]:whitespace-pre [&_code]:whitespace-pre'
+              )}
             />
             {isLoading && (
               <div className="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm">
@@ -118,3 +124,5 @@ export const ComponentPreview: React.FC<Props> = ({ code, demo, height = 360, la
     </div>
   );
 };
+
+export default ComponentPreview;

packages/next-docs-plugin/src/components/Demo.tsx

@@ -0,0 +1,102 @@
+'use server';
+
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+
+import { Suspense } from 'react';
+
+import { DemoFrame } from './DemoFrame';
+
+interface DemoProps {
+  children?: React.ReactNode;
+  highlight?: string;
+  src?: string;
+  title?: string;
+}
+
+/**
+ * Demo 组件 - 通过 rehype 插件编译时处理
+ *
+ * 使用方式：
+ * <Demo src="@/demos/button-basic.tsx" title="基础按钮" />
+ *
+ * 编译后会变成：
+ * import ButtonBasic from '@/demos/button-basic.tsx';
+ * <Demo src="@/demos/button-basic.tsx" title="基础按钮">
+ *   <ButtonBasic />
+ * </Demo>
+ */
+export default async function Demo({ children, highlight, src, title }: DemoProps) {
+  if (!src) {
+    return <div className="text-red-500">Demo 组件需要 src 属性</div>;
+  }
+
+  // 读取源代码
+  const code = await readSourceCode(src);
+  const filename = path.basename(src);
+
+  return (
+    <DemoFrame
+      code={code}
+      filename={filename}
+      highlight={highlight}
+      lang={getLanguage(src)}
+      title={title ?? filename}
+      exportFiles={{
+        'index.html': `<!doctype html><html><body><div id="root"></div><script type="module" src="src/App.tsx"></script></body></html>`,
+        'package.json': JSON.stringify(
+          {
+            dependencies: { react: '^19.0.0', 'react-dom': '^19.0.0' },
+            devDependencies: { typescript: '^5.5.0', vite: '^5.0.0' },
+            name: 'demo',
+            private: true,
+            scripts: { build: 'tsc && vite build', dev: 'vite', preview: 'vite preview' },
+            type: 'module'
+          },
+          null,
+          2
+        ),
+        'src/App.tsx': code
+      }}
+      preview={
+        <Suspense fallback={<div className="p-6 text-sm text-muted-foreground">Loading...</div>}>{children}</Suspense>
+      }
+    >
+      {children}
+    </DemoFrame>
+  );
+}
+
+/**
+ * 读取源代码文件
+ */
+async function readSourceCode(src: string): Promise<string> {
+  const absPath = resolvePath(src);
+  try {
+    return await readFile(absPath, 'utf-8');
+  } catch (error) {
+    console.error(`Failed to read demo file: ${absPath}`, error);
+    return `// Error: Could not read file ${src}\nexport default function Demo() {\n  return <div>File not found</div>;\n}`;
+  }
+}
+
+/**
+ * 解析文件路径
+ */
+function resolvePath(src: string): string {
+  if (src.startsWith('@/')) {
+    return path.join(process.cwd(), src.slice(2));
+  }
+  if (src.startsWith('/')) {
+    return src;
+  }
+  return path.resolve(process.cwd(), src);
+}
+
+/**
+ * 获取文件语言类型
+ */
+function getLanguage(src: string): string {
+  const ext = path.extname(src).slice(1);
+  return ['tsx', 'jsx', 'ts', 'js'].includes(ext) ? ext : 'tsx';
+}