style: simplify doc content styling with minimal design

src/components/DocContent.tsx

@@ -10,8 +10,8 @@ interface DocContentProps {
 export const DocContent = ({ content, onReferenceClick }: DocContentProps) => {
   if (!content) {
     return (
-      <div className="flex items-center justify-center h-full text-gray-500">
-        <p>Select a document from the sidebar</p>
+      <div className="flex items-center justify-center h-full text-zinc-500">
+        <p className="text-sm">选择左侧文档</p>
       </div>
     )
   }
@@ -22,14 +22,14 @@ export const DocContent = ({ content, onReferenceClick }: DocContentProps) => {
         return (
           <button
             onClick={() => onReferenceClick(href)}
-            className="text-blue-400 hover:text-blue-300 hover:underline"
+            className="text-blue-500 hover:text-blue-400 transition-colors"
           >
             {children}
           </button>
         )
       }
       return (
-        <a href={href} className="text-blue-400 hover:text-blue-300 hover:underline">
+        <a href={href} className="text-blue-500 hover:text-blue-400 transition-colors">
           {children}
         </a>
       )
@@ -44,55 +44,108 @@ export const DocContent = ({ content, onReferenceClick }: DocContentProps) => {
         )
       }
       return (
-        <code className="bg-gray-800 px-1.5 py-0.5 rounded text-blue-300 text-sm font-mono" {...props}>
+        <code className="text-zinc-300 font-mono text-sm" {...props}>
           {children}
         </code>
       )
     },
     pre: ({ children }) => (
-      <pre className="bg-gray-900 border border-gray-700 rounded-lg p-4 overflow-x-auto mb-4">
+      <pre className="bg-zinc-900 rounded-lg p-4 overflow-x-auto my-6 text-sm leading-relaxed">
         {children}
       </pre>
     ),
     table: ({ children }) => (
-      <div className="overflow-x-auto mb-4">
-        <table className="w-full border-collapse text-sm">
+      <div className="overflow-x-auto my-6">
+        <table className="w-full text-sm">
           {children}
         </table>
       </div>
     ),
     thead: ({ children }) => (
-      <thead className="bg-gray-800">
+      <thead className="border-b border-zinc-700">
         {children}
       </thead>
     ),
     th: ({ children }) => (
-      <th className="border border-gray-600 px-3 py-2 text-left text-gray-200 font-semibold">
+      <th className="text-left py-3 pr-4 font-medium text-zinc-300 whitespace-nowrap">
         {children}
       </th>
     ),
     td: ({ children }) => (
-      <td className="border border-gray-600 px-3 py-2 text-gray-300">
+      <td className="py-3 pr-4 text-zinc-400">
         {children}
       </td>
     ),
     tr: ({ children }) => (
-      <tr className="hover:bg-gray-800/50">
+      <tr className="border-b border-zinc-800">
         {children}
       </tr>
     ),
+    h1: ({ children }) => (
+      <h1 className="text-3xl font-bold text-white mt-0 mb-8">
+        {children}
+      </h1>
+    ),
+    h2: ({ children }) => (
+      <h2 className="text-xl font-semibold text-white mt-10 mb-4">
+        {children}
+      </h2>
+    ),
+    h3: ({ children }) => (
+      <h3 className="text-lg font-medium text-zinc-200 mt-8 mb-3">
+        {children}
+      </h3>
+    ),
+    h4: ({ children }) => (
+      <h4 className="text-base font-medium text-zinc-300 mt-6 mb-2">
+        {children}
+      </h4>
+    ),
+    p: ({ children }) => (
+      <p className="text-zinc-400 leading-relaxed my-4">
+        {children}
+      </p>
+    ),
+    ul: ({ children }) => (
+      <ul className="list-disc list-inside text-zinc-400 my-4 space-y-1">
+        {children}
+      </ul>
+    ),
+    ol: ({ children }) => (
+      <ol className="list-decimal list-inside text-zinc-400 my-4 space-y-1">
+        {children}
+      </ol>
+    ),
+    li: ({ children }) => (
+      <li className="text-zinc-400">
+        {children}
+      </li>
+    ),
+    blockquote: ({ children }) => (
+      <blockquote className="border-l-2 border-zinc-700 pl-4 my-4 text-zinc-400 italic">
+        {children}
+      </blockquote>
+    ),
+    hr: () => (
+      <hr className="border-zinc-800 my-8" />
+    ),
+    strong: ({ children }) => (
+      <strong className="font-semibold text-zinc-200">
+        {children}
+      </strong>
+    ),
   }
 
   return (
-    <div className="h-full overflow-auto p-6">
-      <div className="max-w-4xl mx-auto text-gray-200">
+    <div className="h-full overflow-auto px-12 py-10">
+      <article className="max-w-3xl mx-auto">
         <ReactMarkdown
           remarkPlugins={[remarkGfm]}
           components={components}
         >
           {content}
         </ReactMarkdown>
-      </div>
+      </article>
     </div>
   )
 }