优化 Mermaid 流程图的支持

next.config.js

@@ -1 +1,18 @@
- 
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  // Ensure external packages are handled correctly
+  transpilePackages: ['mermaid', 'katex'],
+  // Configure webpack if needed
+  webpack: (config) => {
+    // Handle mermaid.js
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      fs: false,
+    };
+    return config;
+  },
+}
+
+module.exports = nextConfig 

src/app/wechat/page.tsx

@@ -1,10 +1,27 @@
-import WechatEditor from '@/components/editor/WechatEditor'
+import dynamic from 'next/dynamic'
+import { Suspense } from 'react'
+
+// Dynamically import WechatEditor with no SSR
+const WechatEditor = dynamic(() => import('@/components/editor/WechatEditor'), {
+  ssr: false,
+  loading: () => (
+    <div className="h-full bg-background flex items-center justify-center">
+      <div className="animate-pulse">Loading editor...</div>
+    </div>
+  ),
+})
 
 export default function WechatPage() {
   return (
     <main className="h-full bg-background flex flex-col">
       <div className="flex-1 relative">
-        <WechatEditor />
+        <Suspense fallback={
+          <div className="h-full flex items-center justify-center">
+            <div className="animate-pulse">Loading editor...</div>
+          </div>
+        }>
+          <WechatEditor />
+        </Suspense>
       </div>
     </main>
   )