优化创建问答应用第一个表单的样式

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

@@ -50,7 +50,7 @@ const QuestionAnswerInfo: React.FC = () => {
                     <InputNumber
                         min={0}
                         max={1}
-                        style={{ margin: '0 16px', width: '100px' }}
+                        className='form-input-number-small'
                         step={0.01}
                         value={topPValue}
                         onChange={onChange}
@@ -85,7 +85,7 @@ const QuestionAnswerInfo: React.FC = () => {
                     <InputNumber
                         min={0}
                         max={1}
-                        style={{ margin: '0 16px', width: '100px' }}
+                        className='form-input-number-small'
                         step={0.01}
                         value={tempValue}
                         onChange={onChange}
@@ -421,7 +421,7 @@ const QuestionAnswerInfo: React.FC = () => {
                             name='name'
                             rules={[{ required: true, message: '问答应用名称不能为空' }]}
                         >
-                            <Input placeholder="应用名称" style={{ width: 646, padding: 8 }} />
+                            <Input placeholder="请输入问答应用名称" className='form-input-large' />
                         </FormItem>
 
                         <FormItem
@@ -429,8 +429,8 @@ const QuestionAnswerInfo: React.FC = () => {
                             name='typeId'
                         >
                             <Select
-                                style={{ width: '300px', height: '48px' }}
-                                placeholder='请选应用类型'
+                                className='questionAnswerInfo-content-title'
+                                placeholder='请选择问答应用类型'
                                 onChange={handleAppChange}
                                 allowClear={true}
                             >
@@ -452,7 +452,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                 rules={[{ required: true, message: '项目类型不能为空' }]}
                             >
                                 <Select
-                                    style={{ width: '300px', height: '48px' }}
+                                    className='questionAnswerInfo-content-title'
                                     placeholder='请选择项目类型'
                                     value={selectedAppProId}
                                     onChange={(value) => setSelectedAppProId(value)}
@@ -474,8 +474,8 @@ const QuestionAnswerInfo: React.FC = () => {
                             <TextArea
                                 showCount
                                 maxLength={500}
-                                placeholder="请输入描述"
-                                style={{ height: 120, resize: 'none', width: 646 }}
+                                placeholder="请输入当前应用的描述"
+                                className='form-textarea-large'
                             />
                         </FormItem>
 
@@ -484,16 +484,16 @@ const QuestionAnswerInfo: React.FC = () => {
                             <div>
                                 {
                                     inputs.map(input => (
-                                        <div key={input.id} style={{ paddingTop: '10px' }}>
+                                        <div key={input.id} className='padding-top-10'>
                                             <label>问题 {input.id}</label>
                                             <Input
-                                                style={{ width: 300, paddingTop: 8, marginLeft: 20 }}
+                                                className='question-input'
                                                 type="text"
                                                 value={input.value}
                                                 onChange={e => handleChange(input.id, e.target.value)}
                                             />
-                                            <PlusCircleOutlined style={{ marginLeft: 20 }} onClick={addInput} />
-                                            <MinusCircleOutlined style={{ marginLeft: 20 }} onClick={delInput} />
+                                            <PlusCircleOutlined className='question-icon' onClick={addInput} />
+                                            <MinusCircleOutlined className='question-icon' onClick={delInput} />
                                         </div>
                                     ))}
                             </div>
@@ -512,10 +512,10 @@ const QuestionAnswerInfo: React.FC = () => {
                     </div>
 
                     <div style={{ display: step === 2 ? 'block' : 'none' }} className='questionAnswerInfo-content'>
-                        <div style={{ paddingBottom: '10px', display: 'flex', justifyContent: 'flex-end' }}>
+                        <div className='flex-end padding-bottom-10'>
                             <div>
                                 <Button
-                                    style={{ background: '#f5f5f5' }}
+                                    className='btn-secondary'
                                     onClick={() => {
                                         setStep(1);
                                     }}
@@ -622,14 +622,14 @@ const QuestionAnswerInfo: React.FC = () => {
                         </div>
                         <Splitter style={{ height: '100%', boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
                             <Splitter.Panel defaultSize="40%">
-                                <div style={{ width: '100%', height: '100%' }}>
+                                <div className='full-size'>
                                     <h2>Prompt编写</h2>
                                     <div style={{ paddingTop: '20px' }}>
                                         <TextArea
                                             autoSize
                                             readOnly
                                             placeholder="编写Prompt过程中可以引入2项变量：{{知识}} 代表知识库中检索到的知识内容， {{用户}}代表用户输入的内容。您可以在编写Prompt过程中将变量拼接在合适的位置。插入：{{知识}} 插入：{{用户}}"
-                                            style={{ width: '100%', height: '300px' }}
+                                            className='textarea-full-width textarea-fixed-height'
                                         />
                                     </div>
                                     <Divider plain></Divider>
@@ -667,16 +667,13 @@ const QuestionAnswerInfo: React.FC = () => {
 
                             </Splitter.Panel>
                             <Splitter.Panel defaultSize="60%">
-                                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#f5f5f5', width: '100%', height: '100%' }}>
-                                    <div style={{ width: '50%', height: '100%' }}>
-                                        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingTop: '50px', fontSize: '16px' }}>
+                                                                    <div className='flex-center-container'>
+                                    <div className='half-width'>
+                                        <div className='flex-center-top'>
                                             欢迎使用 {name}
                                         </div>
 
-                                        <div style={{
-                                            display: 'flex', justifyContent: 'center', alignItems: 'center',
-                                            paddingTop: '20px'
-                                        }}>
+                                        <div className='flex-center padding-top-20'>
                                             <FormItem
                                                 label='引用知识库'
                                                 name='knowledge_ids'
@@ -685,7 +682,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                     // mode='multiple'
                                                     // maxCount={MAX_COUNT}
                                                     // suffixIcon={suffix}
-                                                    style={{ width: '300px', height: '48px' }}
+                                                    className='questionAnswerInfo-content-title'
                                                     placeholder='请选择知识库'
                                                 >
                                                     {
@@ -698,7 +695,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                 </Select>
                                             </FormItem>
                                         </div>
-                                        <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                                        <div className='flex-center'>
                                             <FormItem
                                                 label='调用模型'
                                                 name="model"
@@ -706,7 +703,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                 <Select
                                                     placeholder='请选择模型'
                                                     allowClear={true}
-                                                    style={{width: '300px', height: '48px'}}
+                                                    className='questionAnswerInfo-content-title'
                                                     onChange={(value) => {
                                                         if (value === 'Qwen3-30B') {
                                                             setIsDeepThinkVisible(true);
@@ -721,26 +718,20 @@ const QuestionAnswerInfo: React.FC = () => {
 
                                             </FormItem>
                                             </div>
-                                            <div style={{
-                                                display: isDeepThinkVisible  ? 'flex' : 'none',
-                                                justifyContent: 'center',
-                                                alignItems: 'center'
+                                            <div className='flex-center' style={{
+                                                display: isDeepThinkVisible  ? 'flex' : 'none'
                                             }}>
                                                 <FormItem
                                                     label='深度思考'
                                                     name='isDeepThink'
                                                     rules={[{ required: true, message: '请选择是否深度思考' }]}>
-                                                    <Radio.Group buttonStyle="solid" style={{width: '300px'}}>
+                                                    <Radio.Group buttonStyle="solid" className='form-control-width'>
                                                         <Radio.Button value='Y'>是</Radio.Button>
                                                         <Radio.Button value='N'>否</Radio.Button>
                                                     </Radio.Group>
                                                 </FormItem>
                                             </div>
-                                            <div style={{
-                                                display: 'flex',
-                                                justifyContent: 'center',
-                                                alignItems: 'center'
-                                            }}>
+                                            <div className='flex-center'>
                                                 <FormItem
                                                     label='max token'
                                                     name='max_token'
@@ -753,14 +744,10 @@ const QuestionAnswerInfo: React.FC = () => {
 
                                             {
                                                 !isVisible &&
-                                                <div style={{
-                                                    display: 'flex',
-                                                    justifyContent: 'center',
-                                                    alignItems: 'center'
-                                                }}>
+                                                <div className='flex-center'>
                                                     <a onClick={() => {
                                                         setIsVisible(!isVisible);
-                                                    }} className='questionAnswerInfo-content-title'>
+                                                    }} className='link-more-settings'>
                                                         更多设置
                                                     </a>
                                                 </div>
@@ -771,28 +758,20 @@ const QuestionAnswerInfo: React.FC = () => {
                                             <div style={{display: isVisible ? 'block' : 'none', paddingTop: '20px'}}>
                                                 {isVisibleCus &&
                                                     <Space style={{width: '100%'}} direction="vertical">
-                                                        <div style={{
-                                                            display: 'flex',
-                                                            justifyContent: 'center',
-                                                            alignItems: 'center'
-                                                        }}>
+                                                        <div className='flex-center'>
                                                             <FormItem
                                                                 label='Top-p'
                                                                 name='topP'
-                                                                style={{width: '300px'}}
+                                                                className='form-control-width'
                                                             >
                                                                 <TopPDecimalStep/>
                                                             </FormItem>
                                                         </div>
-                                                        <div style={{
-                                                            display: 'flex',
-                                                            justifyContent: 'center',
-                                                            alignItems: 'center'
-                                                        }}>
+                                                        <div className='flex-center'>
                                                             <FormItem
                                                                 label='Temperature'
                                                                 name='temperature'
-                                                                style={{width: '300px'}}
+                                                                className='form-control-width'
                                                             >
                                                                 <TempDecimalStep/>
                                                             </FormItem>
@@ -810,7 +789,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                         name='param_desc'
                                                         rules={[{required: true, message: '回答风格不能为空'}]}>
                                                         <Radio.Group buttonStyle="solid"
-                                                                     className='questionAnswerInfo-content-title'>
+                                                                     className='form-control-width'>
                                                             <Radio.Button onClick={() => {
                                                                 handleRedioClick('strict')
                                                             }} value='strict'>严谨</Radio.Button>
@@ -839,7 +818,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                     <FormItem
                                                         label='展示引用知识'
                                                         name='show_recall_result'
-                                                        className='questionAnswerInfo-content-title'>
+                                                        className='form-control-width'>
                                                         <Switch onChange={onChangeShow}/>
                                                     </FormItem>
                                                 </div>
@@ -869,7 +848,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                     justifyContent: 'center',
                                                     alignItems: 'center'
                                                 }}>
-                                                    <div className='questionAnswerInfo-content-title'>重排方式</div>
+                                                    <div className='section-title'>重排方式</div>
                                                 </div>
                                                 <div style={{
                                                     display: 'flex',
@@ -880,7 +859,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                         label='Rerank模型'
                                                         name='rerank_status'
                                                         valuePropName='checked'
-                                                        className='questionAnswerInfo-content-title'
+                                                        className='form-control-width'
                                                     >
                                                         <Switch onChange={onChangeModel}/>
                                                     </FormItem>
@@ -896,7 +875,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                             name='rerank_model_name'
                                                         >
                                                             <Select
-                                                                style={{width: '300px', height: '48px'}}
+                                                                className='questionAnswerInfo-content-title'
                                                                 placeholder='请选择模型'
                                                                 // defaultValue={'rerank'}
                                                             >
@@ -915,7 +894,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                         name='slice_config_type'
                                                         rules={[{required: true, message: '召回方式不能为空'}]}>
                                                         <Select
-                                                            style={{width: '300px', height: '48px'}}
+                                                            className='questionAnswerInfo-content-title'
                                                             placeholder='请选择'
                                                             onChange={onChangeCount}>
                                                             <Option value="fixed">手动设置</Option>
@@ -950,7 +929,7 @@ const QuestionAnswerInfo: React.FC = () => {
                                                     >
                                                         <TextArea
                                                             rows={4}
-                                                            className='questionAnswerInfo-content-title'
+                                                            className='form-textarea-large'
                                                             placeholder="请输入内容"
                                                         />
                                                     </FormItem>

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

@@ -9,10 +9,171 @@
   width: 100%;
   height: 100%;
   background: #FFFFFF;
-  padding: 10px;
+  padding: 20px;
 }
 
+// 统一的表单控件样式
 .questionAnswerInfo-content-title {
-  width: 300px;
+  width: 100%;
+  max-width: 646px;
   height: 48px;
-}
+}
+
+// 标题文本样式
+.section-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #262626;
+  margin-bottom: 16px;
+}
+
+// 链接样式
+.link-more-settings {
+  color: @primary-color;
+  cursor: pointer;
+  text-decoration: none;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// 通用样式类
+.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%;
+  max-width: 300px;
+  padding-top: 8px;
+  margin-left: 20px;
+}
+
+.question-icon {
+  margin-left: 20px;
+}
+
+// 按钮样式
+.btn-secondary {
+  background: #f5f5f5;
+}
+
+// 容器样式
+.flex-center-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f5f5f5;
+  width: 100%;
+  height: 100%;
+}
+
+// Flex布局样式
+.flex-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.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;
+}
+
+// 布局样式
+.full-size {
+  width: 100%;
+  height: 100%;
+}
+
+.half-width {
+  width: 50%;
+  height: 100%;
+}
+
+.padding-top-10 {
+  padding-top: 10px;
+}
+
+.padding-top-20 {
+  padding-top: 20px;
+}
+
+.padding-bottom-10 {
+  padding-bottom: 10px;
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .questionAnswerInfo-content-title,
+  .form-control-width,
+  .form-input-large,
+  .form-textarea-large {
+    max-width: 100%;
+  }
+  
+  .question-input {
+    max-width: 100%;
+    margin-left: 0;
+  }
+  
+  .half-width {
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .questionAnswerInfo-content {
+    padding: 16px;
+  }
+  
+  .form-input-large,
+  .form-textarea-large {
+    padding: 6px;
+  }
+}
+
+// 移除重复的 Ant Design 组件样式，使用全局样式
+// 只保留组件特有的样式覆盖