refactor(app): 重构问题页面并添加 AI 优化功能

- 重构了问题页面的布局和组件
- 添加了 AI 优化代码的功能和相关组件
- 更新了 Dockview 配置，移除了 AI 优化相关的冗余代码
- 优化了代码结构，提高了组件的可复用性和可维护性

src/app/(app)/problems/[id]/@Code/page.tsx

@@ -1,10 +1,29 @@
-import { ProblemEditor } from "@/components/problem-editor";
+import { AIProblemEditor } from "@/components/ai-optimized-editor";
+import { useParams } from "next/navigation";
 
 export default function CodePage() {
+  const params = useParams();
+  const problemId = params.id as string;
+
+  const handleOptimize = async () => {
+    // 这里实现调用AI优化逻辑
+    console.log("Optimizing code for problem", problemId);
+  };
+
   return (
     <div className="relative flex-1">
-      <div className="absolute w-full h-full">
+      <div className="absolute w-full h-full flex flex-col">
-        <ProblemEditor />
+        <div className="p-2 border-b border-border flex justify-between items-center">
+          <button 
+            onClick={handleOptimize}
+            className="px-3 py-1 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+          >
+            Optimize Code
+          </button>
+        </div>
+        <AIProblemEditor 
+          problemId={problemId} 
+        />
       </div>
     </div>
   );

src/app/(app)/problems/[id]/page.tsx

@@ -11,10 +11,8 @@ import {
 import { Locale } from "@/config/i18n";
 import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
-import { usePathname } from "next/navigation";
 import Dockview from "@/components/dockview";
 import { useDockviewStore } from "@/stores/dockview";
-import { AIProblemEditor } from "@/components/ai-optimized-editor";
 
 interface ProblemPageProps {
   locale: Locale;
@@ -28,169 +26,123 @@ interface ProblemPageProps {
 }
 
 export default function ProblemPage({
-  locale,
+                                      locale,
-  Description,
+                                      Description,
-  Solutions,
+                                      Solutions,
-  Submissions,
+                                      Submissions,
-  Details,
+                                      Details,
-  Code,
+                                      Code,
-  Testcase,
+                                      Testcase,
-  Bot,
+                                      Bot,
-}: ProblemPageProps) {
+                                    }: ProblemPageProps) {
   const [key, setKey] = useState(0);
   const { setApi } = useDockviewStore();
   const t = useTranslations("ProblemPage");
-  const pathname = usePathname();
-  const problemId = pathname.split("/").pop(); // 从URL提取problemId
-  
-  // AI优化相关状态
-  const [showAIEditor, setShowAIEditor] = useState(false);
-  const [userCode, setUserCode] = useState(`function example() {
-  // 初始代码
-  return "Hello World";
-}`);
-  
-  // 修改Code面板内容以包含切换功能
-  const CodeWithToggle = (
-    <div className="p-2">
-      <div className="flex justify-between items-center mb-2">
-        <button
-          onClick={() => setShowAIEditor(!showAIEditor)}
-          className="px-3 py-1 bg-primary text-primary-foreground rounded-md text-sm"
-        >
-          {showAIEditor ? "普通编辑器" : "AI优化编辑器"}
-        </button>
-        
-        {showAIEditor && (
-          <button
-            onClick={() => setShowAIEditor(false)}
-            className="px-3 py-1 bg-secondary text-secondary-foreground rounded-md text-sm"
-          >
-            返回编辑
-          </button>
-        )}
-      </div>
-      
-      {showAIEditor ? (
-        <AIProblemEditor
-          initialCode={userCode}
-          problemId={problemId}
-          onCodeChange={setUserCode}
-        />
-      ) : (
-        // 原始Code组件保持不变
-        <div className="h-[500px]">
-          {Code}
-        </div>
-      )}
-    </div>
-  );
 
   useEffect(() => {
     setKey((prevKey) => prevKey + 1);
   }, [locale]);
 
-  // 修改Dockview配置：更新Code面板引用
   return (
-    <Dockview
+      <Dockview
-      key={key}
+          key={key}
-      storageKey="dockview:problem"
+          storageKey="dockview:problem"
-      onApiReady={setApi}
+          onApiReady={setApi}
-      options={[
+          options={[
-        {
+            {
-          id: "Description",
+              id: "Description",
-          component: "Description",
+              component: "Description",
-          tabComponent: "Description",
+              tabComponent: "Description",
-          params: {
+              params: {
-            icon: FileTextIcon,
+                icon: FileTextIcon,
-            content: Description,
+                content: Description,
-            title: t("Description"),
+                title: t("Description"),
-          },
+              },
-        },
+            },
-        {
+            {
-          id: "Solutions",
+              id: "Solutions",
-          component: "Solutions",
+              component: "Solutions",
-          tabComponent: "Solutions",
+              tabComponent: "Solutions",
-          params: {
+              params: {
-            icon: FlaskConicalIcon,
+                icon: FlaskConicalIcon,
-            content: Solutions,
+                content: Solutions,
-            title: t("Solutions"),
+                title: t("Solutions"),
-          },
+              },
-          position: {
+              position: {
-            referencePanel: "Description",
+                referencePanel: "Description",
-            direction: "within",
+                direction: "within",
-          },
+              },
-          inactive: true,
+              inactive: true,
-        },
+            },
-        {
+            {
-          id: "Submissions",
+              id: "Submissions",
-          component: "Submissions",
+              component: "Submissions",
-          tabComponent: "Submissions",
+              tabComponent: "Submissions",
-          params: {
+              params: {
-            icon: CircleCheckBigIcon,
+                icon: CircleCheckBigIcon,
-            content: Submissions,
+                content: Submissions,
-            title: t("Submissions"),
+                title: t("Submissions"),
-          },
+              },
-          position: {
+              position: {
-            referencePanel: "Solutions",
+                referencePanel: "Solutions",
-            direction: "within",
+                direction: "within",
-          },
+              },
-          inactive: true,
+              inactive: true,
-        },
+            },
-        {
+            {
-          id: "Details",
+              id: "Details",
-          component: "Details",
+              component: "Details",
-          tabComponent: "Details",
+              tabComponent: "Details",
-          params: {
+              params: {
-            icon: CircleCheckBigIcon,
+                icon: CircleCheckBigIcon,
-            content: Details,
+                content: Details,
-            title: t("Details"),
+                title: t("Details"),
-            autoAdd: false,
+                autoAdd: false,
-          },
+              },
-        },
+            },
-        {
+            {
-          id: "Code",
+              id: "Code",
-          component: "Code",
+              component: "Code",
-          tabComponent: "Code",
+              tabComponent: "Code",
-          params: {
+              params: {
-            icon: SquarePenIcon,
+                icon: SquarePenIcon,
-            content: CodeWithToggle, // 替换为带切换功能的容器
+                content: Code,
-            title: t("Code"),
+                title: t("Code"),
-          },
+              },
-          position: {
+              position: {
-            referencePanel: "Submissions",
+                referencePanel: "Submissions",
-            direction: "right",
+                direction: "right",
-          },
+              },
-        },
+            },
-        {
+            {
-          id: "Testcase",
+              id: "Testcase",
-          component: "Testcase",
+              component: "Testcase",
-          tabComponent: "Testcase",
+              tabComponent: "Testcase",
-          params: {
+              params: {
-            icon: SquareCheckIcon,
+                icon: SquareCheckIcon,
-            content: Testcase,
+                content: Testcase,
-            title: t("Testcase"),
+                title: t("Testcase"),
-          },
+              },
-          position: {
+              position: {
-            referencePanel: "Code",
+                referencePanel: "Code",
-            direction: "below",
+                direction: "below",
-          },
+              },
-        },
+            },
-        {
+            {
-          id: "Bot",
+              id: "Bot",
-          component: "Bot",
+              component: "Bot",
-          tabComponent: "Bot",
+              tabComponent: "Bot",
-          params: {
+              params: {
-            icon: BotIcon,
+                icon: BotIcon,
-            content: Bot,
+                content: Bot,
-            title: t("Bot"),
+                title: t("Bot"),
-            autoAdd: false,
+                autoAdd: false,
-          },
+              },
-          position: {
+              position: {
-            direction: "right",
+                direction: "right",
-          },
+              },
-        },
+            },
-      ]}
+          ]}
-    />
+      />
   );
 }