chore: checkpoint admin editor and perf work

admin/src/components/lazy-monaco.tsx

@@ -0,0 +1,72 @@
+import { lazy, Suspense } from 'react'
+
+import type { DiffEditorProps, EditorProps } from '@monaco-editor/react'
+
+const MonacoEditor = lazy(async () => {
+  const mod = await import('@monaco-editor/react')
+  return { default: mod.default }
+})
+
+const MonacoDiffEditor = lazy(async () => {
+  const mod = await import('@monaco-editor/react')
+  return { default: mod.DiffEditor }
+})
+
+function MonacoLoading({
+  height,
+  width,
+  className,
+  loading,
+}: {
+  height?: string | number
+  width?: string | number
+  className?: string
+  loading?: React.ReactNode
+}) {
+  return (
+    <div
+      className={className}
+      style={{ height: height ?? '100%', width: width ?? '100%' }}
+    >
+      {loading ?? (
+        <div className="flex h-full min-h-[280px] items-center justify-center bg-[#111111] text-sm text-slate-400">
+          正在加载编辑器...
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function LazyEditor(props: EditorProps) {
+  return (
+    <Suspense
+      fallback={
+        <MonacoLoading
+          height={props.height}
+          width={props.width}
+          className={props.className}
+          loading={props.loading}
+        />
+      }
+    >
+      <MonacoEditor {...props} />
+    </Suspense>
+  )
+}
+
+export function LazyDiffEditor(props: DiffEditorProps) {
+  return (
+    <Suspense
+      fallback={
+        <MonacoLoading
+          height={props.height}
+          width={props.width}
+          className={props.className}
+          loading={props.loading}
+        />
+      }
+    >
+      <MonacoDiffEditor {...props} />
+    </Suspense>
+  )
+}