feat(creater): add feature to display multi-language description and solution in problem-creater

- 在编辑题目描述和解析面板中添加语言切换功能
- 实现获取题目支持的语言列表和对应语言的题目数据
- 增加添加新语言的功能（仅前端）
-优化题目描述和解析的编辑、预览和对比功能
- 在预览中添加 Accordion 和 VideoEmbed 组件支持

src/app/actions/getProblem.ts

@@ -2,18 +2,25 @@
 'use server';
 
 import prisma from '@/lib/prisma';
+import { Locale } from '@/generated/client'; // ✅ 导入 enum Locale
 import { serialize } from 'next-mdx-remote/serialize';
 
-export async function getProblemData(problemId: string) {
+export async function getProblemData(problemId: string, locale: string) {
+    const selectedLocale = locale as Locale; // ✅ 强制转换 string 为 Prisma enum
+
     const problem = await prisma.problem.findUnique({
         where: { id: problemId },
         include: {
-            localizations: true,
             templates: true,
             testcases: {
                 include: { inputs: true }
-            }
-        }
+            },
+            localizations: {
+                where: {
+                    locale: selectedLocale, // ✅ 这里使用枚举
+                },
+            },
+        },
     });
 
     if (!problem) {
@@ -25,9 +32,7 @@ export async function getProblemData(problemId: string) {
 
     const rawDescription = getContent('DESCRIPTION');
 
-    // MDX序列化，给客户端渲染用
     const mdxDescription = await serialize(rawDescription, {
-        // 可以根据需要添加MDX插件配置
         parseFrontmatter: false,
     });
 
@@ -40,19 +45,19 @@ export async function getProblemData(problemId: string) {
         memoryLimit: problem.memoryLimit,
         title: getContent('TITLE'),
         description: rawDescription,
-        mdxDescription,  // 新增序列化后的字段
+        mdxDescription,
         solution: getContent('SOLUTION'),
         templates: problem.templates.map(t => ({
             language: t.language,
-            content: t.content
+            content: t.content,
         })),
         testcases: problem.testcases.map(tc => ({
             id: tc.id,
             expectedOutput: tc.expectedOutput,
             inputs: tc.inputs.map(input => ({
                 name: input.name,
-                value: input.value
-            }))
-        }))
+                value: input.value,
+            })),
+        })),
     };
 }

src/app/actions/getProblemLocales.ts

@@ -0,0 +1,14 @@
+// src/app/actions/getProblemLocales.ts
+'use server';
+
+import prisma from "@/lib/prisma";
+
+export async function getProblemLocales(problemId: string): Promise<string[]> {
+    const locales = await prisma.problemLocalization.findMany({
+        where: { problemId },
+        select: { locale: true },
+        distinct: ['locale'],
+    });
+
+    return locales.map(l => l.locale);
+}

src/components/creater/edit-description-panel.tsx

@@ -1,108 +1,147 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import MdxPreview from "@/components/mdx-preview";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { CoreEditor } from '@/components/core-editor';
-import { getProblemData } from '@/app/actions/getProblem';
-import { Accordion } from "@/components/ui/accordion"; // ← 这里导入 Accordion
+import { CoreEditor } from "@/components/core-editor";
+import MdxPreview from "@/components/mdx-preview";
+import { getProblemData } from "@/app/actions/getProblem";
+import { getProblemLocales } from "@/app/actions/getProblemLocales";
+import { Accordion } from "@/components/ui/accordion";
+import { VideoEmbed } from "@/components/content/video-embed";
 
-export default function EditDescriptionPanel({
-                                               problemId,
-                                             }: {
-  problemId: string;
-}) {
-  const [description, setDescription] = useState({
-    title: `Description for Problem ${problemId}`,
-    content: `Description content for Problem ${problemId}...`
-  });
-  const [viewMode, setViewMode] = useState<'edit' | 'preview' | 'compare'>('edit');
+export default function EditDescriptionPanel({ problemId }: { problemId: string }) {
+  const [locales, setLocales] = useState<string[]>([]);
+  const [currentLocale, setCurrentLocale] = useState<string>("");
+  const [customLocale, setCustomLocale] = useState("");
 
+  const [description, setDescription] = useState({ title: "", content: "" });
+  const [viewMode, setViewMode] = useState<"edit" | "preview" | "compare">("edit");
+
+  // 获取语言列表
   useEffect(() => {
-    async function fetchData() {
-      try {
-        const problemData = await getProblemData(problemId);
-        setDescription({
-          title: problemData.title,
-          content: problemData.description
-        });
-      } catch (error) {
-        console.error('获取题目信息失败:', error);
+    async function fetchLocales() {
+      const langs = await getProblemLocales(problemId);
+      setLocales(langs);
+      if (langs.length > 0) {
+        setCurrentLocale(langs[0]);
       }
     }
-
-    fetchData();
+    fetchLocales();
   }, [problemId]);
 
+  // 获取对应语言的题目数据
+  useEffect(() => {
+    if (!currentLocale) return;
+    async function fetchProblem() {
+      const data = await getProblemData(problemId, currentLocale);
+      setDescription({
+        title: data?.title || "",
+        content: data?.description || "",
+      });
+    }
+    fetchProblem();
+  }, [problemId, currentLocale]);
+
+  // 添加新语言（仅前端）
+  function handleAddCustomLocale() {
+    if (customLocale && !locales.includes(customLocale)) {
+      const newLocales = [...locales, customLocale];
+      setLocales(newLocales);
+      setCurrentLocale(customLocale);
+      setCustomLocale("");
+      setDescription({ title: "", content: "" });
+    }
+  }
+
   return (
       <Card className="w-full">
         <CardHeader>
           <CardTitle>题目描述</CardTitle>
         </CardHeader>
-        <CardContent>
-          <div className="space-y-6">
-            <div className="space-y-2">
-              <Label htmlFor="description-title">标题</Label>
-              <Input
-                  id="description-title"
-                  value={description.title}
-                  onChange={(e) => setDescription({...description, title: e.target.value})}
-                  placeholder="输入题目标题"
-              />
-            </div>
-
+        <CardContent className="space-y-6">
+          {/* 语言切换 */}
+          <div className="space-y-2">
+            <Label>选择语言</Label>
             <div className="flex space-x-2">
-              <Button
-                  type="button"
-                  variant={viewMode === 'edit' ? 'default' : 'outline'}
-                  onClick={() => setViewMode('edit')}
+              <select
+                  value={currentLocale}
+                  onChange={(e) => setCurrentLocale(e.target.value)}
+                  className="border rounded-md px-3 py-2"
               >
-                编辑
-              </Button>
-              <Button
-                  type="button"
-                  variant={viewMode === 'preview' ? 'default' : 'outline'}
-                  onClick={() => setViewMode(viewMode === 'preview' ? 'edit' : 'preview')}
-              >
-                {viewMode === 'preview' ? '取消' : '预览'}
-              </Button>
-              <Button
-                  type="button"
-                  variant={viewMode === 'compare' ? 'default' : 'outline'}
-                  onClick={() => setViewMode('compare')}
-              >
-                对比
-              </Button>
+                {locales.map((locale) => (
+                    <option key={locale} value={locale}>
+                      {locale}
+                    </option>
+                ))}
+              </select>
+              <Input
+                  placeholder="添加新语言"
+                  value={customLocale}
+                  onChange={(e) => setCustomLocale(e.target.value)}
+              />
+              <Button onClick={handleAddCustomLocale}>添加</Button>
             </div>
+          </div>
 
-            <div className={viewMode === 'compare' ? "grid grid-cols-2 gap-6" : "flex flex-col gap-6"}>
-              <div className={viewMode === 'edit' || viewMode === 'compare' ? "block" : "hidden"}>
+          {/* 标题输入 */}
+          <div className="space-y-2">
+            <Label htmlFor="description-title">标题</Label>
+            <Input
+                id="description-title"
+                value={description.title}
+                onChange={(e) => setDescription({ ...description, title: e.target.value })}
+                placeholder="输入题目标题"
+            />
+          </div>
+
+          {/* 编辑/预览切换 */}
+          <div className="flex space-x-2">
+            <Button
+                type="button"
+                variant={viewMode === "edit" ? "default" : "outline"}
+                onClick={() => setViewMode("edit")}
+            >
+              编辑
+            </Button>
+            <Button
+                type="button"
+                variant={viewMode === "preview" ? "default" : "outline"}
+                onClick={() => setViewMode(viewMode === "preview" ? "edit" : "preview")}
+            >
+              {viewMode === "preview" ? "取消" : "预览"}
+            </Button>
+            <Button
+                type="button"
+                variant={viewMode === "compare" ? "default" : "outline"}
+                onClick={() => setViewMode("compare")}
+            >
+              对比
+            </Button>
+          </div>
+
+          {/* 编辑/预览区域 */}
+          <div className={viewMode === "compare" ? "grid grid-cols-2 gap-6" : "flex flex-col gap-6"}>
+            {(viewMode === "edit" || viewMode === "compare") && (
                 <div className="relative h-[600px]">
                   <CoreEditor
                       value={description.content}
-                      onChange={(newContent) =>
-                          setDescription({ ...description, content: newContent || '' })
-                      }
+                      onChange={(newVal) => setDescription({ ...description, content: newVal || "" })}
                       language="markdown"
                       className="absolute inset-0 rounded-md border border-input"
                   />
                 </div>
-              </div>
-              {viewMode !== 'edit' && (
-                  <div className="prose dark:prose-invert">
-                    <MdxPreview
-                        source={description.content}
-                        components={{ Accordion }} // ← 这里传入 Accordion
-                    />
-                  </div>
-              )}
-            </div>
-
-            <Button>保存更改</Button>
+            )}
+            {viewMode !== "edit" && (
+                <div className="prose dark:prose-invert">
+                  <MdxPreview source={description.content} components={{ Accordion, VideoEmbed }} />
+                </div>
+            )}
           </div>
+
+          <Button>保存更改</Button>
         </CardContent>
       </Card>
   );

src/components/creater/edit-solution-panel.tsx

@@ -1,99 +1,142 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import MdxPreview from "@/components/mdx-preview";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { CoreEditor } from "@/components/core-editor";
-import { getProblemData } from "@/app/actions/getProblem";// 修改为你实际路径
+import MdxPreview from "@/components/mdx-preview";
+import { getProblemData } from "@/app/actions/getProblem";
+import { getProblemLocales } from "@/app/actions/getProblemLocales";
+import { Accordion } from "@/components/ui/accordion";
+import { VideoEmbed } from "@/components/content/video-embed";
 
-export default function EditSolutionPanel({
-                                            problemId,
-                                          }: {
-  problemId: string;
-}) {
-  const [solution, setSolution] = useState({
-    title: `Solution for Problem ${problemId}`,
-    content: `Solution content for Problem ${problemId}...`,
-  });
+export default function EditSolutionPanel({ problemId }: { problemId: string }) {
+  const [locales, setLocales] = useState<string[]>([]);
+  const [currentLocale, setCurrentLocale] = useState<string>("");
+  const [customLocale, setCustomLocale] = useState("");
+
+  const [solution, setSolution] = useState({ title: "", content: "" });
   const [viewMode, setViewMode] = useState<"edit" | "preview" | "compare">("edit");
 
   useEffect(() => {
+    async function fetchLocales() {
+      const langs = await getProblemLocales(problemId);
+      setLocales(langs);
+      if (langs.length > 0) setCurrentLocale(langs[0]);
+    }
+    fetchLocales();
+  }, [problemId]);
+
+  useEffect(() => {
+    if (!currentLocale) return;
     async function fetchSolution() {
-      try {
-        const data = await getProblemData(problemId);
-        setSolution({
-          title: data.title ? data.title + " 解析" : `Solution for Problem ${problemId}`,
-          content: data.solution || "",
-        });
-      } catch (error) {
-        console.error("加载题解失败", error);
-      }
+      const data = await getProblemData(problemId, currentLocale);
+      setSolution({
+        title: (data?.title || "") + " 解析",
+        content: data?.solution || "",
+      });
     }
     fetchSolution();
-  }, [problemId]);
+  }, [problemId, currentLocale]);
+
+  function handleAddCustomLocale() {
+    if (customLocale && !locales.includes(customLocale)) {
+      const newLocales = [...locales, customLocale];
+      setLocales(newLocales);
+      setCurrentLocale(customLocale);
+      setCustomLocale("");
+      setSolution({ title: "", content: "" });
+    }
+  }
 
   return (
       <Card className="w-full">
         <CardHeader>
           <CardTitle>题目解析</CardTitle>
         </CardHeader>
-        <CardContent>
-          <div className="space-y-6">
-            <div className="space-y-2">
-              <Label htmlFor="solution-title">题解标题</Label>
-              <Input
-                  id="solution-title"
-                  value={solution.title}
-                  onChange={(e) => setSolution({ ...solution, title: e.target.value })}
-                  placeholder="输入题解标题"
-              />
-            </div>
+        <CardContent className="space-y-6">
+          {/* 语言切换 */}
+          <div className="space-y-2">
+            <Label>选择语言</Label>
             <div className="flex space-x-2">
-              <Button
-                  type="button"
-                  variant={viewMode === "edit" ? "default" : "outline"}
-                  onClick={() => setViewMode("edit")}
+              <select
+                  value={currentLocale}
+                  onChange={(e) => setCurrentLocale(e.target.value)}
+                  className="border rounded-md px-3 py-2"
               >
-                编辑
-              </Button>
-              <Button
-                  type="button"
-                  variant={viewMode === "preview" ? "default" : "outline"}
-                  onClick={() => setViewMode(viewMode === "preview" ? "edit" : "preview")}
-              >
-                {viewMode === "preview" ? "取消" : "预览"}
-              </Button>
-              <Button
-                  type="button"
-                  variant={viewMode === "compare" ? "default" : "outline"}
-                  onClick={() => setViewMode("compare")}
-              >
-                对比
-              </Button>
+                {locales.map((locale) => (
+                    <option key={locale} value={locale}>
+                      {locale}
+                    </option>
+                ))}
+              </select>
+              <Input
+                  placeholder="添加新语言"
+                  value={customLocale}
+                  onChange={(e) => setCustomLocale(e.target.value)}
+              />
+              <Button onClick={handleAddCustomLocale}>添加</Button>
             </div>
+          </div>
 
-            <div className={viewMode === "compare" ? "grid grid-cols-2 gap-6" : "flex flex-col gap-6"}>
-              <div className={viewMode === "edit" || viewMode === "compare" ? "block" : "hidden"}>
+          {/* 标题输入 */}
+          <div className="space-y-2">
+            <Label htmlFor="solution-title">题解标题</Label>
+            <Input
+                id="solution-title"
+                value={solution.title}
+                onChange={(e) => setSolution({ ...solution, title: e.target.value })}
+                placeholder="输入题解标题"
+            />
+          </div>
+
+          {/* 编辑/预览切换 */}
+          <div className="flex space-x-2">
+            <Button
+                type="button"
+                variant={viewMode === "edit" ? "default" : "outline"}
+                onClick={() => setViewMode("edit")}
+            >
+              编辑
+            </Button>
+            <Button
+                type="button"
+                variant={viewMode === "preview" ? "default" : "outline"}
+                onClick={() => setViewMode(viewMode === "preview" ? "edit" : "preview")}
+            >
+              {viewMode === "preview" ? "取消" : "预览"}
+            </Button>
+            <Button
+                type="button"
+                variant={viewMode === "compare" ? "default" : "outline"}
+                onClick={() => setViewMode("compare")}
+            >
+              对比
+            </Button>
+          </div>
+
+          {/* 编辑/预览区域 */}
+          <div className={viewMode === "compare" ? "grid grid-cols-2 gap-6" : "flex flex-col gap-6"}>
+            {(viewMode === "edit" || viewMode === "compare") && (
                 <div className="relative h-[600px]">
                   <CoreEditor
                       value={solution.content}
-                      onChange={(newContent) => setSolution({ ...solution, content: newContent })}
+                      onChange={(val) => setSolution({ ...solution, content: val || "" })}
                       language="markdown"
                       className="absolute inset-0 rounded-md border border-input"
                   />
                 </div>
-              </div>
-
-              {viewMode !== "edit" && (
-                  <div className="prose dark:prose-invert">
-                    <MdxPreview source={solution.content} />
-                  </div>
-              )}
-            </div>
+            )}
+            {viewMode !== "edit" && (
+                <div className="prose dark:prose-invert">
+                  <MdxPreview source={solution.content} components={{ Accordion, VideoEmbed }} />
+                </div>
+            )}
           </div>
+
+          <Button>保存更改</Button>
         </CardContent>
       </Card>
   );