完成创作页面编辑器布局与适配

src/pages/Create/components/VditorMD/index.scss

@@ -0,0 +1,21 @@
+#vditor {
+    border: none;
+
+    .vditor-toolbar {
+        display: none;
+    }
+
+    .vditor-reset {
+        background-color: transparent !important;
+
+        .vditor-ir__marker--heading{
+            color: #727cf5;
+        }
+    }
+
+    // 针对表单元素的光标样式
+    pre {
+        // 设置光标样式
+        caret-color: #727cf5; // 光标颜色
+    }
+}

src/pages/Create/components/VditorMD/index.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import Vditor from "vditor";
+import "vditor/dist/index.css";
+import "./index.scss"
+
+const VditorEditor = () => {
+    const [vd, setVd] = useState<Vditor>();
+    useEffect(() => {
+        const vditor = new Vditor("vditor", {
+            minHeight: 500,
+            // outline: {
+            //     enable: true,
+            //     position: 'left'
+            // },
+            after: () => {
+                vditor.setValue("`Vditor` 最小代码示例");
+                // vditor.setTheme("classic","","github")
+                setVd(vditor);
+            }
+        })
+
+        // Clear the effect
+        return () => {
+            vd?.destroy();
+            setVd(undefined);
+        };
+    }, []);
+    
+    return <div id="vditor" className="vditor"/>;
+};
+
+export default VditorEditor;

src/pages/Create/index.tsx

@@ -1,14 +1,20 @@
 import Breadcrumb from '@/components/Breadcrumbs/Breadcrumb';
 import { Card } from 'antd';
 
+import VditorEditor from './components/VditorMD';
+import { useEffect, useState } from 'react';
+
 const Create = () => {
+  const [content, setContent] = useState('');
+
+  useEffect(() => {
+    console.log(content);
+  }, [content])
+
   return (
     <>
-      <Card title={<Breadcrumb pageName="创作" />}>
-        
-        <p>Card content</p>
-        <p>Card content</p>
-        <p>Card content</p>
+      <Card title={<Breadcrumb pageName="创作" />} className='border-stroke [&>.ant-card-head]:border-stroke [&>.ant-card-head]:dark:border-strokedark dark:bg-boxdark dark:border-strokedark'>
+        <VditorEditor />
       </Card>
     </>
   );

src/styles/custom.scss

@@ -0,0 +1,3 @@
+.vditor .vditor-reset {
+    @apply dark:text-white;
+}

src/styles/index.css

@@ -1,3 +1,4 @@
+@import url('./custom.scss');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;