修改 prompt 表单的样式

src/pages/deepseek/questionAnswer/info/index.tsx

@@ -5,7 +5,7 @@ import './style.less';
 import {
     Button, Input, Form, Divider, Splitter, Select, InputNumber, InputNumberProps,
     Radio, Switch, Row, Col, Slider, Space, RadioChangeEvent,
-    Spin, message
+    Spin, message, Typography
 } from 'antd';
 import { PlusCircleOutlined, MinusCircleOutlined, ArrowLeftOutlined } from '@ant-design/icons';
 import { apis } from '@/apis';
@@ -548,8 +548,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                 >
                                     取消
                                 </Button>
-                                {
-                                    createFlag &&
+                                {createFlag && (
                                     <Button
                                         type='primary'
                                         onClick={() => {
@@ -643,22 +642,33 @@ const QuestionAnswerInfo: React.FC = () => {
                                             });
                                         }}
                                     >提交应用</Button>
-                                }
+                                )}
                             </div>
                         </div>
                         <h3>Prompt编写</h3>
-                        <Splitter style={{ height: '100%', border: '1px solid #d9d9d9', borderRadius: '6px' }}>
+                        <Splitter style={{ border: '1px solid #d9d9d9', borderRadius: '6px' }}>
                             <Splitter.Panel defaultSize="75%">
-                                <div className='full-size'>
-                                    <div style={{ paddingTop: '20px' }}>
-                                        <TextArea
-                                            autoSize
-                                            readOnly
-                                            placeholder="编写Prompt过程中可以引入2项变量：{{知识}} 代表知识库中检索到的知识内容， {{用户}}代表用户输入的内容。您可以在编写Prompt过程中将变量拼接在合适的位置。插入：{{知识}} 插入：{{用户}}"
-                                            className='textarea-full-width textarea-fixed-height'
-                                        />
+                                <div className='prompt'>
+                                    <div className='prompt-info'>
+                                        <div className='prompt-info-text'>
+                                            <Typography.Paragraph style={{ fontSize: '12px', lineHeight: '1.6', color: '#999' }}>
+                                                编写Prompt过程中可以引入2项变量：
+                                                <span className='variable-highlight'>{'{{知识}}'}</span> 
+                                                代表知识库中检索到的知识内容， 
+                                                <span className='variable-highlight'>{'{{用户}}'}</span>
+                                                代表用户输入的内容。您可以在编写Prompt过程中将变量拼接在合适的位置。
+                                            </Typography.Paragraph>
+                                            <div className='variable-insert-buttons'>
+                                                <Button type="link" size="small" className='insert-variable-btn'>
+                                                    插入：<span className='variable-highlight'>{'{{知识}}'}</span>
+                                                </Button>
+                                                <Button type="link" size="small" className='insert-variable-btn'>
+                                                    插入：<span className='variable-highlight'>{'{{用户}}'}</span>
+                                                </Button>
+                                            </div>
+                                        </div>
                                     </div>
-                                    <div >
+                                    <div className='prompt-editor-area'>
                                         <FormItem name='prompt'
                                             initialValue={
                                                 `你是一位知识检索助手，你必须并且只能从我发送的众多知识片段中寻找能够解决用户输入问题的最优答案，并且在执行任务的过程中严格执行规定的要求。 \n

src/pages/deepseek/questionAnswer/info/style.less

@@ -1,40 +1,165 @@
+// 主容器样式
 .questionAnswerInfo {
   width: 100%;
   height: 100%;
   background: #FFFFFF;
   border-radius: @border-radius-base;
+  
+  // 内容区域
+  &-content {
+    width: 100%;
+    height: 100%;
+    background: #FFFFFF;
+    padding: 20px;
+    
+    // 标题样式
+    &-title {
+      width: 100%;
+      max-width: 646px;
+      height: 48px;
+    }
+  }
 }
 
-.questionAnswerInfo-content {
-  width: 100%;
-  height: 100%;
-  background: #FFFFFF;
-  padding: 20px;
+// 通用布局样式
+.flex {
+  &-center {
+    &-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #f5f5f5;
+      width: 100%;
+      height: 100%;
+    }
+    
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    &-top {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-top: 50px;
+      font-size: 16px;
+    }
+  }
+  
+  &-between {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  &-end {
+    display: flex;
+    justify-content: flex-end;
+  }
 }
 
-// 统一的表单控件样式
-.questionAnswerInfo-content-title {
-  width: 100%;
-  max-width: 646px;
-  height: 48px;
+// 按钮样式
+.btn {
+  &-cancel {
+    background: #f5f5f5;
+    border: none;
+    color: #000000;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    
+    &:hover {
+      background: #e8e8e8;
+      color: #000000;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+    }
+    
+    &:active {
+      background: #dcdcdc;
+      color: #000000;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+      transform: translateY(0);
+    }
+    
+    &:focus {
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+  }
+  
+  &-back {
+    background: #ffffff;
+    border: 1px solid #d9d9d9;
+    color: #595959;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    
+    &:hover {
+      background: #fafafa;
+      border-color: #40a9ff;
+      color: #40a9ff;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+    }
+    
+    &:active {
+      background: #f0f0f0;
+      border-color: #1890ff;
+      color: #1890ff;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+      transform: translateY(0);
+    }
+    
+    &:focus {
+      border-color: #40a9ff;
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+    }
+  }
 }
 
-// 标题文本样式
-.section-title {
-  font-size: 16px;
-  font-weight: 500;
-  color: #262626;
-  margin-bottom: 16px;
+// 表单样式
+.form {
+  &-control {
+    &-width {
+      width: 100%;
+      max-width: 646px;
+    }
+    
+    &-height {
+      height: 48px;
+    }
+  }
+  
+  &-input {
+    &-large {
+      width: 100%;
+      max-width: 646px;
+      padding: 8px;
+    }
+    
+    &-number-small {
+      margin: 0 16px;
+      width: 100px;
+    }
+  }
+  
+  &-textarea {
+    &-large {
+      height: 120px;
+      resize: none;
+      width: 100%;
+      max-width: 646px;
+    }
+  }
 }
 
-// 链接样式
-.link-more-settings {
-  color: @primary-color;
-  cursor: pointer;
-  text-decoration: none;
+// 文本区域样式
+.textarea {
+  &-full-width {
+    width: 100%;
+  }
   
-  &:hover {
-    text-decoration: underline;
+  &-fixed-height {
+    height: 300px;
   }
 }
 
@@ -45,7 +170,6 @@
   h4 {
     margin-bottom: 16px;
     color: #262626;
-    // font-weight: 600;
   }
   
   .question-item {
@@ -57,7 +181,6 @@
     
     label {
       min-width: 60px;
-      // font-weight: 500;
       color: #595959;
       flex-shrink: 0;
     }
@@ -90,24 +213,6 @@
   }
 }
 
-// 通用样式类
-.form-control-width {
-  width: 100%;
-  max-width: 646px;
-}
-
-.form-control-height {
-  height: 48px;
-}
-
-.textarea-full-width {
-  width: 100%;
-}
-
-.textarea-fixed-height {
-  height: 300px;
-}
-
 // 问题输入框样式（保留向后兼容）
 .question-input {
   width: 100%;
@@ -116,121 +221,127 @@
   margin-left: 20px;
 }
 
-// 按钮样式
-.btn-cancel {
-  background: #f5f5f5;
-  border: none;
-  color: #000000;
-  transition: all 0.3s ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  
-  &:hover {
-    background: #e8e8e8;
-    color: #000000;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-    transform: translateY(-1px);
-  }
-  
-  &:active {
-    background: #dcdcdc;
-    color: #000000;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    transform: translateY(0);
-  }
-  
-  &:focus {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
+// 标题和链接样式
+.section-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #262626;
+  margin-bottom: 16px;
 }
 
-.btn-back {
-  background: #ffffff;
-  border: 1px solid #d9d9d9;
-  color: #595959;
-  transition: all 0.3s ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+.link-more-settings {
+  color: @primary-color;
+  cursor: pointer;
+  text-decoration: none;
   
   &:hover {
-    background: #fafafa;
-    border-color: #40a9ff;
-    color: #40a9ff;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-    transform: translateY(-1px);
-  }
-  
-  &:active {
-    background: #f0f0f0;
-    border-color: #1890ff;
-    color: #1890ff;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    transform: translateY(0);
-  }
-  
-  &:focus {
-    border-color: #40a9ff;
-    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+    text-decoration: underline;
   }
 }
 
-// 容器样式
-.flex-center-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: #f5f5f5;
+// Prompt编辑器布局样式
+.prompt {
   width: 100%;
   height: 100%;
-}
-
-// Flex布局样式
-.flex-end {
   display: flex;
-  justify-content: flex-end;
-}
+  flex-direction: column;
+  // 滚动条
+  overflow-y: auto;
 
-.flex-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.flex-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.flex-center-top {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-top: 50px;
-  font-size: 16px;
-}
-
-// 表单控件样式
-.form-input-large {
-  width: 100%;
-  max-width: 646px;
-  padding: 8px;
-}
-
-.form-textarea-large {
-  height: 120px;
-  resize: none;
-  width: 100%;
-  max-width: 646px;
-}
-
-.form-input-number-small {
-  margin: 0 16px;
-  width: 100px;
-}
+  // 提示词模板显示区域
+  &-info {
+    border-bottom: 1px solid #e9ecef;
+    padding: 16px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    
+    &-text {
+      // 说明文本
+        
+      .variable-highlight {
+        color: #1890ff;
+        font-weight: 600;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        margin: 0 2px;
+      }
+    }
+      
+      // 插入按钮
+    .variable-insert-buttons {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      
+      .insert-variable-btn {
+        color: #1890ff;
+        padding: 6px 12px;
+        border-radius: 6px;
+        transition: all 0.2s ease;
+        font-size: 13px;
+        height: auto;
+        border: 1px solid transparent;
+        
+        &:hover {
+          background: rgba(24, 144, 255, 0.1);
+          color: #40a9ff;
+          border-color: rgba(24, 144, 255, 0.2);
+        }
+        
+        .variable-highlight {
+          color: #1890ff;
+          font-weight: 600;
+          font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        }
+      }
+    }
+  }
 
-// 布局样式
-.full-size {
-  width: 100%;
-  height: 100%;
+  // 提示词编辑区域
+  &-editor-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    
+    .ant-form-item {
+      margin-bottom: 0;
+      height: 100%;
+      
+      .ant-form-item-control {
+        height: 100%;
+        
+        .ant-form-item-control-input {
+          height: 100%;
+          
+          .ant-form-item-control-input-content {
+            height: 100%;
+            
+            .ant-input {
+              height: 100%;
+              border: 1px solid #d9d9d9;
+              border-radius: 8px;
+              padding: 16px;
+              font-size: 14px;
+              line-height: 1.6;
+              resize: none;
+              
+              &:focus {
+                border-color: #1890ff;
+                box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+              }
+              
+              &::placeholder {
+                color: #bfbfbf;
+                font-style: italic;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
 .half-width {
@@ -238,25 +349,41 @@
   height: 100%;
 }
 
-.padding-top-10 {
-  padding-top: 10px;
-}
-
-.padding-top-20 {
-  padding-top: 20px;
-}
-
-.padding-bottom-10 {
-  padding-bottom: 10px;
+// 间距样式
+.padding {
+  &-top {
+    &-10 {
+      padding-top: 10px;
+    }
+    
+    &-20 {
+      padding-top: 20px;
+    }
+  }
+  
+  &-bottom {
+    &-10 {
+      padding-bottom: 10px;
+    }
+  }
 }
 
 // 响应式设计
 @media (max-width: 768px) {
-  .questionAnswerInfo-content-title,
-  .form-control-width,
-  .form-input-large,
-  .form-textarea-large {
-    max-width: 100%;
+  .questionAnswerInfo {
+    &-content {
+      &-title {
+        max-width: 100%;
+      }
+    }
+  }
+  
+  .form {
+    &-control-width,
+    &-input-large,
+    &-textarea-large {
+      max-width: 100%;
+    }
   }
   
   .question-input {
@@ -292,13 +419,17 @@
 }
 
 @media (max-width: 480px) {
-  .questionAnswerInfo-content {
-    padding: 16px;
+  .questionAnswerInfo {
+    &-content {
+      padding: 16px;
+    }
   }
   
-  .form-input-large,
-  .form-textarea-large {
-    padding: 6px;
+  .form {
+    &-input-large,
+    &-textarea-large {
+      padding: 6px;
+    }
   }
   
   .preset-questions {
@@ -311,5 +442,3 @@
     }
   }
 }
-
-// 移除重复的 Ant Design 组件样式，使用全局样式

src/pages/layout/components/Header.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Layout, MenuProps, Modal, Dropdown, Select } from 'antd';
-import { CaretDownOutlined, PoweroffOutlined } from '@ant-design/icons';
+import { Layout, MenuProps, Modal, Dropdown, Select, Button, Tooltip } from 'antd';
+import { CaretDownOutlined, LogoutOutlined } from '@ant-design/icons';
 import logoSrc from '@/assets/public/logo.png';
 import router from '@/router';
 import LocalStorage from '@/LocalStorage';
@@ -22,26 +22,9 @@ const Header: React.FC<Props> = (props: Props) => {
         currentMenuType
     } = props;
 
-    const items: MenuProps['items'] = [
-        {
-            key: 'logout',
-            label: (
-                <a onClick={(e) => {
-                    e.preventDefault(); // 阻止默认行为
-                    Modal.confirm({
-                        title: '提示',
-                        content: '确定退出平台吗？',
-                        async onOk() {
-                            await onClickLogout();
-                        }
-                    });
-                }}>
-                    <PoweroffOutlined style={{ marginRight: 5 }} />
-                    退出登录
-                </a>
-            ),
-        }
-    ];
+    // const items: MenuProps['items'] = [
+    //     // 移除退出登录选项，现在使用独立的登出按钮
+    // ];
 
     const fruits = [
         { id: 1, name: 'DeepSeek' },
@@ -79,7 +62,7 @@ const Header: React.FC<Props> = (props: Props) => {
                     ))}
                 </Select>
             </div>
-            <Dropdown menu={{ items }} >
+            <div className='header-user-section'>
                 <div className='header-operation'>
                     <div className='header-operation-picture'>
                         {userName.slice(0, 1)}
@@ -87,9 +70,25 @@ const Header: React.FC<Props> = (props: Props) => {
                     <div className='header-operation-name'>
                         {userName}
                     </div>
-                    <CaretDownOutlined className='header-operation-down' />
+                        {/* <CaretDownOutlined className='header-operation-down' /> */}
                 </div>
-            </Dropdown>
+                <Tooltip title="退出登录" placement="bottom">
+                    <Button
+                        type="text"
+                        icon={<LogoutOutlined />}
+                        className='header-logout-btn'
+                        onClick={() => {
+                            Modal.confirm({
+                                title: '提示',
+                                content: '确定退出平台吗？',
+                                async onOk() {
+                                    await onClickLogout();
+                                }
+                            });
+                        }}
+                    />
+                </Tooltip>
+            </div>
         </AntdHeader>
     );
 };

src/pages/layout/style.less

@@ -14,12 +14,31 @@
     z-index: 1000;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 
-    // 下拉菜单定位优化
-    .ant-dropdown {
-        .ant-dropdown-menu {
-            margin-top: 8px; // 增加与触发器的距离
-            // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            border-radius: 8px;
+    // 用户区域样式
+    &-user-section {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+
+
+    // 登出按钮样式
+    &-logout-btn {
+        color: #666;
+        border: none;
+        padding: 4px 8px;
+        border-radius: 6px;
+        transition: all 0.3s ease;
+        
+        &:hover {
+            color: #ff4d4f;
+            background: rgba(255, 77, 79, 0.1);
+        }
+        
+        &:active {
+            color: #cf1322;
+            background: rgba(255, 77, 79, 0.2);
         }
     }
 
@@ -33,26 +52,20 @@
         transition: background-color 0.3s ease;
 
         &-picture {
-            width: 28px;
-            height: 28px;
+            width: 30px;
+            height: 30px;
             background: @primary-color;
             border-radius: 50%;
             display: flex;
             justify-content: center;
             align-items: center;
-            margin-right: 12px;
+            margin-right: 8px;
             color: #FFFFFF;
         }
 
         &-name {
             font-weight: 500;
             color: @primary-color;
-            margin-right: 8px;
-        }
-
-        &-down {
-            color: @primary-color !important;
-            transition: transform 0.3s ease;
         }
     }
 
@@ -126,16 +139,9 @@
     }
 }
 
-// 响应式处理 - 优化下拉菜单位置
+// 响应式处理
 @media (max-width: 1200px) {
     .header {
-        .ant-dropdown {
-            .ant-dropdown-menu {
-                // 在较小屏幕上，确保下拉菜单不会超出屏幕边界
-                max-width: calc(100vw - 48px);
-                right: 0;
-            }
-        }
         
         // 优化logo区域在中等屏幕下的显示
         &-logo {
@@ -185,12 +191,8 @@
             }
         }
         
-        .ant-dropdown {
-            .ant-dropdown-menu {
-                // 移动端下拉菜单全宽显示
-                width: calc(100vw - 32px);
-                right: 16px;
-            }
+        &-logout-btn {
+            padding: 2px 4px;
         }
     }
 }
@@ -285,7 +287,7 @@
         background: #fff;
         position: sticky;
         top: 0;
-        z-index: 10;
+        z-index: 999;
     }
 
     .breadcrumb {