浏览代码

统一表单样式的宽度

Ryuiso 1 月之前
父节点
当前提交
56659c4071
共有 2 个文件被更改,包括 60 次插入16 次删除
  1. 17 15
      src/pages/deepseek/questionAnswer/info/index.tsx
  2. 43 1
      src/pages/deepseek/questionAnswer/info/style.less

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

@@ -731,14 +731,15 @@ const QuestionAnswerInfo: React.FC = () => {
                                 name='name'
                                 rules={[{ required: true, message: '问答应用名称不能为空' }]}
                             >
-                                <Input placeholder="请输入问答应用名称" className='form-input-large' />
+                                <Input placeholder="请输入问答应用名称" className='form-element-standard' style={{ height: '48px'}}/>
                             </FormItem>
                             <FormItem
                                 label='应用类型'
                                 name='typeId'
                             >
                                 <Select
-                                    className='questionAnswerInfo-content-title'
+                                    className='form-element-select'
+                                    style={{ height: '48px'}}
                                     placeholder='请选择问答应用类型'
                                     onChange={handleAppChange}
                                     allowClear={true}
@@ -764,7 +765,8 @@ const QuestionAnswerInfo: React.FC = () => {
                                             options={appProjectList}
                                             placeholder="请选择项目"
                                             showSearch
-                                            className="questionAnswerInfo-content-title"
+                                            className="form-element-select"
+                                            style={{ height: '48px'}}
                                         />
                                     </FormItem>
                                 </>
@@ -774,7 +776,8 @@ const QuestionAnswerInfo: React.FC = () => {
                                 name='visible'
                             >
                                 <Select
-                                    className='questionAnswerInfo-content-title'
+                                    className='form-element-select'
+                                    style={{ height: '48px'}}
                                     placeholder='请选择是否公开'
                                     allowClear={true}
                                     onChange={(e) => {
@@ -832,12 +835,12 @@ const QuestionAnswerInfo: React.FC = () => {
                             </FormItem>
 
                             <div className='preset-questions'>
-                                <h4>添加预设问题</h4>
+                                <h4>添加引导问题</h4>
                                 <div>
                                     {
                                         inputs.map(input => (
                                             <div key={input.id} className='question-item'>
-                                                <label>问题 {input.id}</label>
+                                                <label>引导问题 {input.id}</label>
                                                 <Input
                                                     className='question-input'
                                                     type="text"
@@ -1001,8 +1004,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                         mode='multiple'
                                                         maxCount={MAX_COUNT}
                                                         showSearch={true}
-                                                        // suffixIcon={suffix}
-                                                        // className='questionAnswerInfo-content-title'
+                                                        className='form-element-select'
                                                         placeholder='请选择知识库'
                                                     >
                                                         {
@@ -1023,7 +1025,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                     <Select
                                                         placeholder='请选择模型'
                                                         allowClear={true}
-                                                        className='questionAnswerInfo-content-title'
+                                                        className='form-element-select'
                                                         onChange={(value) => {
                                                             if (value === 'Qwen3-30B') {
                                                                 setIsDeepThinkVisible(true);
@@ -1045,7 +1047,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                     label='深度思考'
                                                     name='isDeepThink'
                                                     rules={[{ required: true, message: '请选择是否深度思考' }]}>
-                                                    <Radio.Group buttonStyle="solid" className='form-control-width'>
+                                                    <Radio.Group buttonStyle="solid" className='form-element-button-group'>
                                                         <Radio.Button value='Y'>是</Radio.Button>
                                                         <Radio.Button value='N'>否</Radio.Button>
                                                     </Radio.Group>
@@ -1057,7 +1059,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                     name='max_token'
                                                     rules={[{ required: true, message: 'max token不能为空' }]}>
                                                     <InputNumber
-                                                        className='questionAnswerInfo-content-title'
+                                                        className='form-element-input-number'
                                                     />
                                                 </FormItem>
                                             </div>
@@ -1082,7 +1084,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                             <FormItem
                                                                 label='Top-p'
                                                                 name='topP'
-                                                                className='form-control-width'
+                                                                className='form-element-standard'
                                                             >
                                                                 <TopPDecimalStep />
                                                             </FormItem>
@@ -1091,7 +1093,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                             <FormItem
                                                                 label='Temperature'
                                                                 name='temperature'
-                                                                className='form-control-width'
+                                                                className='form-element-standard'
                                                             >
                                                                 <TempDecimalStep />
                                                             </FormItem>
@@ -1109,7 +1111,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                         name='param_desc'
                                                         rules={[{ required: true, message: '回答风格不能为空' }]}>
                                                         <Radio.Group buttonStyle="solid"
-                                                            className='form-control-width'>
+                                                            className='form-element-button-group'>
                                                             <Radio.Button onClick={() => {
                                                                 handleRedioClick('strict')
                                                             }} value='strict'>严谨</Radio.Button>
@@ -1138,7 +1140,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                     <FormItem
                                                         label='展示引用知识'
                                                         name='show_recall_result'
-                                                        className='form-control-width'>
+                                                        className='form-element-standard'>
                                                         <Switch onChange={onChangeShow} />
                                                     </FormItem>
                                                 </div>

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

@@ -164,6 +164,7 @@
     &-large {
       width: 100%;
       max-width: 646px;
+      height: 48px;
       padding: 8px;
     }
 
@@ -175,12 +176,53 @@
 
   &-textarea {
     &-large {
-      height: 120px;
+      height: 96px;
       resize: none;
       width: 100%;
       max-width: 646px;
     }
   }
+
+  // 统一表单元素宽度样式
+  &-element {
+    &-standard {
+      width: 100%;
+      max-width: 646px;
+      min-width: 200px;
+    }
+
+    &-full-width {
+      width: 100%;
+    }
+
+    &-button-group {
+      width: 100%;
+      max-width: 646px;
+      display: flex;
+      
+      .ant-radio-group {
+        width: 100%;
+        display: flex;
+        
+        .ant-radio-button-wrapper {
+          flex: 1;
+          text-align: center;
+        }
+      }
+    }
+
+    &-select {
+      width: 100%;
+      max-width: 646px;
+      min-width: 200px;
+    }
+
+    &-input-number {
+      width: 100%;
+      max-width: 646px;
+      min-width: 200px;
+    }
+  }
 }
 
 // 文本区域样式