Browse Source

增加 prompt-info 样式

Ryuiso 3 months ago
parent
commit
469e9491df

+ 12 - 13
src/pages/deepseek/questionAnswer/info/index.tsx

@@ -646,28 +646,26 @@ const QuestionAnswerInfo: React.FC = () => {
                             </div>
                         </div>
                         <h3>Prompt编写</h3>
-                        <Splitter style={{ border: '1px solid #d9d9d9', borderRadius: '6px' }}>
-                            <Splitter.Panel defaultSize="75%">
+                        <Splitter style={{ border: '1px solid #f0f0f0', borderRadius: '6px' }}>
+                            <Splitter.Panel defaultSize="65%">
                                 <div className='prompt'>
                                     <div className='prompt-info'>
                                         <div className='prompt-info-text'>
-                                            <Typography.Paragraph style={{ fontSize: '12px', lineHeight: '1.6', color: '#999' }}>
+                                            <Typography.Paragraph style={{ fontSize: '12px', lineHeight: '1.6', color: '#999', margin: 0 }}>
                                                 编写Prompt过程中可以引入2项变量:
                                                 <span className='variable-highlight'>{'{{知识}}'}</span> 
                                                 代表知识库中检索到的知识内容, 
                                                 <span className='variable-highlight'>{'{{用户}}'}</span>
                                                 代表用户输入的内容。您可以在编写Prompt过程中将变量拼接在合适的位置。
+                                                <br />
+                                                插入:
+                                                <span className='variable-highlight'>{'{{知识}}'}</span>,
+                                                插入:
+                                                <span className='variable-highlight'>{'{{用户}}'}</span>。
                                             </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>
+                                    <Divider style={{ margin: '0' }} />
                                     <div className='prompt-editor-area'>
                                         <FormItem name='prompt'
                                             initialValue={
@@ -700,9 +698,10 @@ const QuestionAnswerInfo: React.FC = () => {
                                         </FormItem>
                                     </div>
                                 </div>
-
                             </Splitter.Panel>
-                            <Splitter.Panel defaultSize="60%">
+                            <Splitter.Panel defaultSize="35%">
+
+
                                                                     <div className='flex-center-container'>
                                     <div className='half-width'>
                                         <div className='flex-center-top'>

+ 2 - 30
src/pages/deepseek/questionAnswer/info/style.less

@@ -88,7 +88,7 @@
   
   &-back {
     background: #ffffff;
-    border: 1px solid #d9d9d9;
+    border: 1px solid #f0f0f0;
     color: #595959;
     transition: all 0.3s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -250,7 +250,6 @@
 
   // 提示词模板显示区域
   &-info {
-    border-bottom: 1px solid #e9ecef;
     padding: 16px 20px;
     display: flex;
     justify-content: space-between;
@@ -269,34 +268,7 @@
       }
     }
       
-      // 插入按钮
-    .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;
-        }
-      }
-    }
   }
 
   // 提示词编辑区域
@@ -320,7 +292,7 @@
             
             .ant-input {
               height: 100%;
-              border: 1px solid #d9d9d9;
+              border: 1px solid #f0f0f0;
               border-radius: 8px;
               padding: 16px;
               font-size: 14px;