Parcourir la source

调整prompt 参数配置的样式

Ryuiso il y a 1 mois
Parent
commit
7d62bb9e0a

+ 14 - 11
src/pages/deepseek/questionAnswer/info/index.tsx

@@ -937,7 +937,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                 </Tooltip>
                             </div>
                             <Splitter style={{ border: '1px solid #f0f0f0', borderRadius: '6px', height: 550 }}>
-                                <Splitter.Panel defaultSize="45%">
+                                <Splitter.Panel defaultSize="35%">
                                     <div className='prompt'>
                                         <div className='prompt-info'>
                                             <div className='prompt-info-text'>
@@ -947,15 +947,15 @@ const QuestionAnswerInfo: React.FC = () => {
                                                     代表知识库中检索到的知识内容,
                                                     <span className='variable-highlight'>{'{{用户}}'}</span>
                                                     代表用户输入的内容。您可以在编写Prompt过程中将变量拼接在合适的位置。
-                                                    <br />
+                                                    {/* <br />
                                                     插入:
                                                     <span className='variable-highlight'>{'{{知识}}'}</span>,
                                                     插入:
-                                                    <span className='variable-highlight'>{'{{用户}}'}</span>。
+                                                    <span className='variable-highlight'>{'{{用户}}'}</span>。 */}
                                                 </Typography.Paragraph>
                                             </div>
                                         </div>
-                                        <Divider style={{ margin: '0' }} />
+                                        {/* 移除 Divider,使用 CSS 边框替代 */}
                                         <div className='prompt-editor-area'>
                                             <FormItem name='prompt'
                                                 initialValue={
@@ -989,11 +989,11 @@ const QuestionAnswerInfo: React.FC = () => {
                                         </div>
                                     </div>
                                 </Splitter.Panel>
-                                <Splitter.Panel defaultSize="25%">
+                                <Splitter.Panel defaultSize="30%">
                                     <div className='flex-center-container'>
                                         <div className='half-width'>
                                             <div className='flex-center-top'>
-                                                欢迎使用 {name}
+                                                欢迎使用 {name || '问答应用'}
                                             </div>
                                             <div className='flex-center padding-top-20'>
                                                 <FormItem
@@ -1005,7 +1005,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                         maxCount={MAX_COUNT}
                                                         showSearch={true}
                                                         className='form-element-select'
-                                                        placeholder='请选择知识库'
+                                                        placeholder='请选择需要引用的知识库'
                                                     >
                                                         {
                                                             knowledgeList.map((item, index) => {
@@ -1201,7 +1201,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                                 placeholder='请选择模型'
                                                             // defaultValue={'rerank'}
                                                             >
-                                                                <Option value='rerank'>默认rerank模型</Option>
+                                                                <Option value='rerank'>默认Rerank模型</Option>
                                                             </Select>
                                                         </FormItem>
                                                     </div>
@@ -1216,7 +1216,8 @@ const QuestionAnswerInfo: React.FC = () => {
                                                         name='slice_config_type'
                                                         rules={[{ required: true, message: '召回方式不能为空' }]}>
                                                         <Select
-                                                            className='questionAnswerInfo-content-title'
+                                                            // className='questionAnswerInfo-content-title'
+                                                            className='form-element-select'
                                                             placeholder='请选择'
                                                             onChange={onChangeCount}>
                                                             <Option value="fixed">手动设置</Option>
@@ -1236,7 +1237,9 @@ const QuestionAnswerInfo: React.FC = () => {
                                                             name='slice_count'
                                                             rules={[{ required: true, message: '切片数不能为空' }]}>
                                                             <InputNumber max={1024} changeOnWheel
-                                                                className='questionAnswerInfo-content-title' />
+                                                                // className='questionAnswerInfo-content-title'
+                                                                className='form-element-standard'
+                                                            />
                                                         </FormItem>
                                                     </div>
                                                 }
@@ -1261,7 +1264,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                         </div>
                                     </div>
                                 </Splitter.Panel>
-                                {appId && (<Splitter.Panel defaultSize="30%">
+                                {appId && (<Splitter.Panel defaultSize="35%">
                                     <Chat appId={appId} />
                                 </Splitter.Panel>)}
                             </Splitter>

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

@@ -61,7 +61,7 @@
     &-container {
       width: 100%;
       height: 100%;
-      background: #f5f5f5;
+      // 移除浅灰色背景,让父级背景色生效
     }
 
     display: flex;
@@ -179,6 +179,7 @@
       height: 96px;
       resize: none;
       width: 100%;
+      min-width: 200px;
       max-width: 646px;
     }
   }
@@ -225,6 +226,41 @@
   }
 }
 
+// Splitter 面板背景样式
+.ant-splitter-panel {
+  &:first-child {
+    // 左侧 35% 区域 - Prompt 区域
+    background: #f5f5f5;
+  }
+  
+  &:nth-child(2) {
+    // 中间 30% 区域 - 配置区域
+    background: #f5f5f5;
+  }
+  
+  &:last-child {
+    // 右侧 35% 区域 - 聊天区域保持白色背景
+    background: #ffffff;
+  }
+}
+
+// 更多设置区域统一样式
+.more-settings-section {
+  padding-top: 20px;
+  
+  .flex-center {
+    margin-bottom: 20px;
+  }
+  
+  .section-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+    text-align: center;
+    margin: 20px 0;
+  }
+}
+
 // 文本区域样式
 .textarea {
   &-full-width {
@@ -327,6 +363,8 @@
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
+    // background: #f5f5f5;
+    // border-bottom: 1px solid #fff;
 
     &-text {
       // 说明文本
@@ -335,7 +373,7 @@
         color: #1890ff;
         font-weight: 500;
         padding: 2px 6px;
-        border-radius: 4px;
+        border-radius: 1px;
         font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
         margin: 0 2px;
       }
@@ -347,6 +385,8 @@
     flex: 1;
     display: flex;
     flex-direction: column;
+    // background: #ffffff;
+    // border-top: none; // 移除顶部边框,避免与 prompt-info 的底部边框重叠
 
     .ant-form-item {
       margin-bottom: 0;