Merge pull request #213 from scszcoder/gui-v2-merge-from-dev

Gui v2 merge from dev

Author: liulongqiang1984

gui_v2/src/pages/Prompts/PromptsDetail.module.css

@@ -188,6 +188,14 @@
   border-color: rgba(148, 163, 184, 0.12) !important;
 }
 
+/* ========== Scroll Container ========== */
+.scrollContainer {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overflow-y: scroll;
+}
+
 /* ========== Scrollbar ========== */
 .scrollContainer::-webkit-scrollbar {
   width: 8px;

gui_v2/src/pages/Prompts/PromptsDetail.tsx

@@ -859,7 +859,7 @@ const PromptsDetail: React.FC<PromptsDetailProps> = ({ prompt, onChange, initial
             </Button>
           </Space>
         </div>
-      <div className={styles.scrollContainer} style={{ flex: 1, minHeight: 150, overflow: 'auto', overflowY: 'scroll', padding: '16px 20px', paddingBottom: '40px' }}>
+      <div className={styles.scrollContainer} style={{ flex: 1, minHeight: 150 }}>
         {/* Top editable area */}
         <SectionContainer
           title={t('pages.prompts.fields.title', { defaultValue: 'Title' })}

gui_v2/src/pages/Prompts/PromptsEnhanced.module.css

@@ -1,22 +1,20 @@
 /* Fix Tabs content area scrolling */
-.promptsTabs :global(.ant-tabs-content) {
+.promptsTabs {
   height: 100%;
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-.promptsTabs :global(.ant-tabs-content-holder) {
-  height: 100%;
-  overflow: hidden;
+.promptsTabs :global(.ant-tabs-content) {
+  flex: 1;
+  min-height: 0;
 }
 
-.promptsTabs :global(.ant-tabs-tabpane) {
+.promptsTabs :global(.ant-tabs-content-holder) {
   height: 100%;
-  overflow: hidden;
+  overflow: auto;
 }
 
-/* Ensure tab content can scroll */
-.promptsTabs :global(.ant-tabs-tabpane-active) {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+.promptsTabs :global(.ant-tabs-tabpane) {
+  padding: 16px 20px 40px 20px;
 }

gui_v2/src/pages/Prompts/PromptsEnhanced.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { Tabs, Button, Space, Tooltip } from 'antd';
+import { Tabs, Space } from 'antd';
 import {
   EditOutlined,
   BulbOutlined,
@@ -207,35 +207,6 @@ const PromptsEnhanced: React.FC = () => {
     return selected ? selected.title : t('pages.prompts.details');
   }, [activeTab, selected, t]);
 
-  const detailsExtra = useMemo(() => {
-    if (activeTab !== 'editor') return null;
-    
-    return (
-      <Space size={8}>
-        <Tooltip title={t('pages.prompts.tabs.guide', { defaultValue: '设计指南' })}>
-          <Button
-            type="text"
-            size="small"
-            icon={<BulbOutlined />}
-            onClick={() => setActiveTab('guide')}
-          >
-            {t('pages.prompts.viewGuide', { defaultValue: '查看指南' })}
-          </Button>
-        </Tooltip>
-        <Tooltip title={t('pages.prompts.tabs.templates', { defaultValue: '模板库' })}>
-          <Button
-            type="text"
-            size="small"
-            icon={<ThunderboltOutlined />}
-            onClick={() => setActiveTab('templates')}
-          >
-            {t('pages.prompts.useTemplate', { defaultValue: '使用模板' })}
-          </Button>
-        </Tooltip>
-      </Space>
-    );
-  }, [activeTab, t]);
-
   return (
     <DetailLayout
       listTitle={null}
@@ -257,14 +228,12 @@ const PromptsEnhanced: React.FC = () => {
         />
       }
       detailsContent={
-        <div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
           <Tabs
             activeKey={activeTab}
             onChange={setActiveTab}
-            items={tabItems}
-            style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
-            tabBarStyle={{ marginBottom: 0, paddingLeft: 20, paddingRight: 20, background: '#0f172a', flex: '0 0 auto' }}
             className={styles.promptsTabs}
+            items={tabItems}
           />
         </div>
       }

gui_v2/src/pages/Prompts/components/PromptExamples.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { Card, Typography, Space, Tag, Divider, Collapse, Tabs, Spin, Alert } from 'antd';
 import {
   CheckCircleOutlined,
@@ -14,6 +14,28 @@ import ReactMarkdown from 'react-markdown';
 
 const { Title, Text, Paragraph } = Typography;
 
+// Style constants to prevent recreation on every render
+const CONTAINER_STYLE = {
+  height: '100%',
+  display: 'flex' as const,
+  flexDirection: 'column' as const,
+  background: '#0f172a'
+};
+
+const TABS_STYLE = {
+  flex: 1,
+  display: 'flex' as const,
+  flexDirection: 'column' as const
+};
+
+const TAB_BAR_STYLE = {
+  margin: '0 20px',
+  paddingTop: '16px',
+  marginBottom: 16,
+  borderBottom: '1px solid rgba(148,163,184,0.14)',
+  flexShrink: 0
+};
+
 interface Example {
   id: string;
   category: string;
@@ -32,6 +54,7 @@ const PromptExamples: React.FC = () => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Load markdown only once on mount
   useEffect(() => {
     const loadMarkdown = async () => {
       setLoading(true);
@@ -331,7 +354,8 @@ class User(BaseModel):
     return acc;
   }, {} as Record<string, Example[]>);
 
-  const tabItems = [
+  // Memoize tabItems to prevent recreation on every render
+  const tabItems = useMemo(() => [
     {
       key: 'builtin',
       label: (
@@ -341,8 +365,7 @@ class User(BaseModel):
         </Space>
       ),
       children: (
-        <div style={{ height: '100%', overflow: 'auto', overflowY: 'scroll', paddingBottom: '40px' }}>
-          <Space direction="vertical" size="large" style={{ width: '100%' }}>
+        <Space direction="vertical" size="large" style={{ width: '100%' }}>
             <Card
             size="small"
             style={{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', border: 'none' }}
@@ -464,8 +487,7 @@ class User(BaseModel):
             </Space>
           </div>
           ))}
-          </Space>
-        </div>
+        </Space>
       ),
     },
     {
@@ -477,7 +499,7 @@ class User(BaseModel):
         </Space>
       ),
       children: (
-        <div style={{ width: '100%', height: '100%', overflow: 'auto', overflowY: 'scroll', paddingBottom: '40px' }}>
+        <>
           {loading && (
             <div style={{ textAlign: 'center', padding: '40px' }}>
               <Spin size="large" />
@@ -635,31 +657,21 @@ class User(BaseModel):
               </div>
             </Card>
           )}
-        </div>
+        </>
       ),
     },
-  ];
+  ], [t, loading, error, markdownContent, groupedExamples, getLevelColor, getLevelText]);
 
   return (
-    <div style={{ 
-      height: '100%', 
-      overflow: 'auto', 
-      overflowY: 'scroll',
-      padding: '16px 20px', 
-      paddingBottom: '40px',
-      background: '#0f172a' 
-    }}>
+    <div style={CONTAINER_STYLE}>
       <Tabs
         defaultActiveKey="builtin"
         items={tabItems}
-        style={{ height: '100%' }}
-        tabBarStyle={{ 
-          marginBottom: 16,
-          borderBottom: '1px solid rgba(148,163,184,0.14)',
-        }}
+        style={TABS_STYLE}
+        tabBarStyle={TAB_BAR_STYLE}
       />
     </div>
   );
 };
 
-export default PromptExamples;
+export default React.memo(PromptExamples);

gui_v2/src/pages/Prompts/components/PromptGuide.tsx

@@ -159,14 +159,7 @@ const PromptGuide: React.FC<PromptGuideProps> = ({ visible = true }) => {
   ];
 
   return (
-    <div style={{
-      height: '100%',
-      overflow: 'auto',
-      padding: '16px 20px',
-      background: '#0f172a',
-      overflowY: 'scroll'
-    }}>
-      <Space direction="vertical" size="large" style={{ width: '100%', paddingBottom: '40px' }}>
+    <Space direction="vertical" size="large" style={{ width: '100%' }}>
         {/* Quick Action Banner */}
         <Card
           size="small"
@@ -332,8 +325,7 @@ const PromptGuide: React.FC<PromptGuideProps> = ({ visible = true }) => {
           </Space>
         </Card>
       </Space>
-    </div>
   );
 };
 
-export default PromptGuide;
+export default React.memo(PromptGuide);

gui_v2/src/pages/Prompts/components/PromptTemplates.tsx

@@ -419,14 +419,7 @@ Output Format:
   };
 
   return (
-    <div style={{
-      height: '100%',
-      overflow: 'auto',
-      padding: '16px 20px',
-      background: '#0f172a',
-      overflowY: 'scroll'
-    }}>
-      <Space direction="vertical" size="large" style={{ width: '100%', paddingBottom: '40px' }}>
+    <Space direction="vertical" size="large" style={{ width: '100%' }}>
         {/* Quick Action Banner */}
         <Card
           size="small"
@@ -589,8 +582,7 @@ Output Format:
           </Card>
         ))}
       </Space>
-    </div>
   );
 };
 
-export default PromptTemplates;
+export default React.memo(PromptTemplates);

requirements-base.txt

@@ -128,7 +128,7 @@ aioconsole==0.7.1
 aiohappyeyeballs==2.6.1
 aiolimiter==1.2.1
 aiosignal==1.4.0
-anyio==4.9.0
+anyio==4.12.1  # Required by browser-use 0.12.0, compatible with all other packages
 nest_asyncio==1.6.0
 asgiref==3.8.1
 gevent==25.9.1