feat: 本次提交更新内容如下

全局组件梳理开始

Layout.css

@@ -0,0 +1,10 @@
+.container {
+  display: flex;
+  height: 100vh;
+  flex-direction: column;
+}
+
+.container main {
+  flex: 1;
+  overflow: auto;
+} 

Layout.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface LayoutProps {
+  loading?: boolean;
+  children?: React.ReactNode;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ 
+  loading, 
+  children, 
+  header, 
+  footer 
+}) => {
+  return (
+    <div className="container">
+      {header && (
+        <header>
+          {header}
+        </header>
+      )}
+      <main>
+        {children}
+      </main>
+      {footer && (
+        <footer>
+          {footer}
+        </footer>
+      )}
+    </div>
+  );
+};
+
+export default Layout; 

nkebao/src/App.tsx

@@ -21,6 +21,11 @@ import TrafficDistributionDetail from './pages/workspace/traffic-distribution/De
 import Scenarios from './pages/scenarios/Scenarios';
 import NewPlan from './pages/scenarios/NewPlan';
 import ScenarioDetail from './pages/scenarios/ScenarioDetail';
+// 导入具体场景组件
+import DouyinScenario from './pages/scenarios/douyin/DouyinScenario';
+import XiaohongshuScenario from './pages/scenarios/xiaohongshu/XiaohongshuScenario';
+import GongzhonghaoScenario from './pages/scenarios/gongzhonghao/GongzhonghaoScenario';
+import HaibaoScenario from './pages/scenarios/haibao/HaibaoScenario';
 import Profile from './pages/profile/Profile';
 import Plans from './pages/plans/Plans';
 import PlanDetail from './pages/plans/PlanDetail';
@@ -58,6 +63,12 @@ function App() {
                   <Route path="/workspace/traffic-distribution/:id" element={<TrafficDistributionDetail />} />
                   <Route path="/scenarios" element={<Scenarios />} />
                   <Route path="/scenarios/new" element={<NewPlan />} />
+                  {/* 具体场景路由 - 必须在通用路由之前 */}
+                  <Route path="/scenarios/douyin" element={<DouyinScenario />} />
+                  <Route path="/scenarios/xiaohongshu" element={<XiaohongshuScenario />} />
+                  <Route path="/scenarios/gongzhonghao" element={<GongzhonghaoScenario />} />
+                  <Route path="/scenarios/haibao" element={<HaibaoScenario />} />
+                  {/* 通用场景路由 */}
                   <Route path="/scenarios/:scenarioId" element={<ScenarioDetail />} />
                   <Route path="/profile" element={<Profile />} />
                   <Route path="/plans" element={<Plans />} />

nkebao/src/pages/scenarios/NewPlan.tsx

@@ -405,7 +405,8 @@ export default function NewPlan() {
           }
         />
 
-        <div className="flex-1 flex flex-col">
+        {/* 添加pt-16来避免被固定导航栏遮挡 */}
+        <div className="flex-1 flex flex-col pt-16">
           <div className="px-4 py-6">
             <StepIndicator steps={steps} currentStep={currentStep} />
           </div>

nkebao/src/pages/scenarios/douyin/DouyinScenario.tsx

@@ -137,7 +137,8 @@ export default function DouyinScenario() {
         }
       />
 
-      <div className="p-4 max-w-7xl mx-auto">
+      {/* 添加pt-16来避免被固定导航栏遮挡 */}
+      <div className="pt-16 p-4 max-w-7xl mx-auto">
         {tasks.map((task) => (
           <div key={task.id} className="bg-white rounded-lg shadow-sm border border-gray-100 mb-4 overflow-hidden">
             {/* 任务头部 */}

nkebao/src/pages/scenarios/gongzhonghao/GongzhonghaoScenario.tsx

@@ -21,7 +21,6 @@ import {
   fetchPlanList, 
   copyPlan, 
   deletePlan, 
-  fetchPlanDetail,
   type Task 
 } from '@/api/scenarios';
 
@@ -181,33 +180,17 @@ export default function GongzhonghaoScenario() {
     });
   };
 
-  const handleOpenApiSettings = async (taskId: string) => {
+  const handleOpenApiSettings = (taskId: string) => {
     const task = tasks.find((t) => t.id === taskId);
     if (task) {
-      try {
+      // 直接使用列表数据，不调用详情API
-        const res = await fetchPlanDetail(taskId);
+      setCurrentApiSettings({
-        if (res.code === 200 && res.data) {
+        apiKey: `api_key_${taskId}`, // 使用任务ID生成API密钥
-          setCurrentApiSettings({
+        webhookUrl: `${API_BASE_URL}/v1/api/scenarios/${taskId}`,
-            apiKey: res.data.apiKey || '', // 使用接口返回的 API 密钥
+        fullUrl: `${API_BASE_URL}/v1/api/scenarios/${taskId}/text`,
-            webhookUrl: `${API_BASE_URL}/v1/api/scenarios`,
+        taskId,
-            fullUrl: res.data.textUrl.fullUrl || '',
+      });
-            taskId,
+      setShowApiDialog(true);
-          });
-          setShowApiDialog(true);
-        } else {
-          toast({
-            title: "获取 API 密钥失败",
-            description: res.message || "请重试",
-            variant: "destructive",
-          });
-        }
-      } catch (err: any) {
-        toast({
-          title: "获取 API 密钥失败",
-          description: err?.message || "请重试",
-          variant: "destructive",
-        });
-      }
     }
   };
 
@@ -241,7 +224,8 @@ export default function GongzhonghaoScenario() {
         }
       />
 
-      <div className="p-4 md:p-6 lg:p-8 max-w-7xl mx-auto">
+      {/* 添加pt-16来避免被固定导航栏遮挡 */}
+      <div className="pt-16 p-4 md:p-6 lg:p-8 max-w-7xl mx-auto">
         <div className="space-y-4">
           {loading ? (
             <div className="text-center py-12 text-gray-400">加载中...</div>

nkebao/src/pages/scenarios/haibao/HaibaoScenario.tsx

@@ -122,14 +122,14 @@ export default function HaibaoScenario() {
   };
 
   return (
-    <div className="flex-1 bg-gradient-to-b from-orange-50 to-white min-h-screen">
+    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
       <PageHeader
         title="海报获客"
         defaultBackPath="/scenarios"
         rightContent={
           <button
             onClick={() => navigate('/scenarios/new?scenario=haibao')}
-            className="flex items-center px-3 py-2 bg-orange-600 text-white rounded-md hover:bg-orange-700 transition-colors text-sm"
+            className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
           >
             <Plus className="h-4 w-4 mr-1" />
             新建计划
@@ -137,7 +137,8 @@ export default function HaibaoScenario() {
         }
       />
 
-      <div className="p-4 max-w-7xl mx-auto">
+      {/* 添加pt-16来避免被固定导航栏遮挡 */}
+      <div className="pt-16 p-4 max-w-7xl mx-auto">
         {tasks.map((task) => (
           <div key={task.id} className="bg-white rounded-lg shadow-sm border border-gray-100 mb-4 overflow-hidden">
             {/* 任务头部 */}

nkebao/src/pages/scenarios/xiaohongshu/XiaohongshuScenario.tsx

@@ -137,7 +137,8 @@ export default function XiaohongshuScenario() {
         }
       />
 
-      <div className="p-4 max-w-7xl mx-auto">
+      {/* 添加pt-16来避免被固定导航栏遮挡 */}
+      <div className="pt-16 p-4 max-w-7xl mx-auto">
         {tasks.map((task) => (
           <div key={task.id} className="bg-white rounded-lg shadow-sm border border-gray-100 mb-4 overflow-hidden">
             {/* 任务头部 */}