Kaynağa Gözat

优化预设问题处的样式,增加返回按钮

Ryuiso 5 ay önce
ebeveyn
işleme
c5f96a8660

+ 30 - 15
src/pages/deepseek/questionAnswer/info/index.tsx

@@ -479,12 +479,12 @@ const QuestionAnswerInfo: React.FC = () => {
                             />
                         </FormItem>
 
-                        <div>
+                        <div className='preset-questions'>
                             <h4>添加预设问题</h4>
                             <div>
                                 {
                                     inputs.map(input => (
-                                        <div key={input.id} className='padding-top-10'>
+                                        <div key={input.id} className='question-item'>
                                             <label>问题 {input.id}</label>
                                             <Input
                                                 className='question-input'
@@ -492,23 +492,38 @@ const QuestionAnswerInfo: React.FC = () => {
                                                 value={input.value}
                                                 onChange={e => handleChange(input.id, e.target.value)}
                                             />
-                                            <PlusCircleOutlined className='question-icon' onClick={addInput} />
-                                            <MinusCircleOutlined className='question-icon' onClick={delInput} />
+                                            <div className='question-actions'>
+                                                <PlusCircleOutlined className='question-icon' onClick={addInput} />
+                                                <MinusCircleOutlined className='question-icon' onClick={delInput} />
+                                            </div>
                                         </div>
                                     ))}
                             </div>
                         </div>
-                        <br />
-                        <Button type='primary' onClick={() => {
-                            form.validateFields(['name', 'desc', 'appProId']).then(async (values) => {
-                                setStep(2);
-                                setInputs(inputs);
-                            }).catch((error) => {
-                                console.error(error);
-                            });
-                        }} >
-                            下一步
-                        </Button>
+                        
+                        <div style={{ display: 'flex', gap: '12px', marginTop: '24px', paddingTop: '24px', borderTop: '1px solid #f0f0f0' }}>
+                            <Button
+                                className='btn-secondary'
+                                onClick={() => {
+                                    router.navigate({ pathname: '/deepseek/questionAnswer' });
+                                }}
+                            >
+                                返回
+                            </Button>
+                            <Button 
+                                type='primary' 
+                                onClick={() => {
+                                    form.validateFields(['name', 'desc', 'appProId']).then(async (values) => {
+                                        setStep(2);
+                                        setInputs(inputs);
+                                    }).catch((error) => {
+                                        console.error(error);
+                                    });
+                                }}
+                            >
+                                下一步
+                            </Button>
+                        </div>
                     </div>
 
                     <div style={{ display: step === 2 ? 'block' : 'none' }} className='questionAnswerInfo-content'>

+ 85 - 1
src/pages/deepseek/questionAnswer/info/style.less

@@ -38,6 +38,58 @@
   }
 }
 
+// 预设问题区域样式
+.preset-questions {
+  margin: 24px 0;
+  
+  h4 {
+    margin-bottom: 16px;
+    color: #262626;
+    // font-weight: 600;
+  }
+  
+  .question-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+    gap: 12px;
+    
+    label {
+      min-width: 60px;
+      // font-weight: 500;
+      color: #595959;
+      flex-shrink: 0;
+    }
+    
+    .question-input {
+      flex: 1;
+      min-width: 200px;
+      max-width: 400px;
+      margin: 0;
+    }
+    
+    .question-actions {
+      display: flex;
+      gap: 8px;
+      flex-shrink: 0;
+      
+      .question-icon {
+        margin: 0;
+        font-size: 18px;
+        color: @primary-color;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        
+        &:hover {
+          color: @primary-color;
+          transform: scale(1.1);
+        }
+      }
+    }
+  }
+}
+
 // 通用样式类
 .form-control-width {
   width: 100%;
@@ -56,7 +108,7 @@
   height: 300px;
 }
 
-// 问题输入框样式
+// 问题输入框样式(保留向后兼容)
 .question-input {
   width: 100%;
   max-width: 300px;
@@ -162,6 +214,28 @@
   .half-width {
     width: 100%;
   }
+  
+  .preset-questions {
+    .question-item {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 8px;
+      
+      label {
+        min-width: auto;
+      }
+      
+      .question-input {
+        width: 100%;
+        max-width: 100%;
+        min-width: auto;
+      }
+      
+      .question-actions {
+        align-self: flex-end;
+      }
+    }
+  }
 }
 
 @media (max-width: 480px) {
@@ -173,6 +247,16 @@
   .form-textarea-large {
     padding: 6px;
   }
+  
+  .preset-questions {
+    .question-item {
+      .question-actions {
+        align-self: center;
+        width: 100%;
+        justify-content: center;
+      }
+    }
+  }
 }
 
 // 移除重复的 Ant Design 组件样式,使用全局样式