feat: change agent edit modal style

src/pages/AgentEditor/components/InitModal.tsx

@@ -13,6 +13,7 @@ interface InitModalProps {
   setAgentName: (name: string) => void;
   saving: boolean;
   beforeUploadInitAvatar: (file: any) => Promise<boolean>;
+  isMobile?: boolean;
 }
 
 const PROFILE_SUGGESTIONS = ['客服助理', '内容创作', '数据分析', '私人教练'];
@@ -27,6 +28,7 @@ export default function InitModal({
   agentName,
   setAgentName,
   saving,
+  isMobile,
   beforeUploadInitAvatar,
 }: InitModalProps) {
   const [initForm] = Form.useForm();
@@ -42,7 +44,7 @@ export default function InitModal({
       centered
       maskClosable={false}
       destroyOnHidden
-      className="agent-editor-init-modal"
+      className={`agent-editor-init-modal${isMobile ? ' is-h5-modal' : ''}`}
     >
       <div className="agent-editor-init-content">
         <div className="agent-editor-init-header">

src/pages/AgentEditor/index.tsx

@@ -130,6 +130,7 @@ export default function AgentEditor() {
       </div>
 
       <InitModal
+        isMobile={isMobile}
         open={initModalOpen}
         onCancel={() => navigate('/agents')}
         onConfirm={handleInitConfirm}

src/pages/AgentEditor/styles/agent-editor-modal.css

@@ -51,7 +51,7 @@
 }
 
 .agent-editor-preview-card {
-  padding: 1.375rem 1.25rem;
+  padding: 12px;
   background: linear-gradient(180deg, rgba(235, 246, 255, 0.98), rgba(247, 251, 255, 0.98));
 }
 
@@ -98,7 +98,11 @@
 }
 
 .agent-editor-init-form {
-  padding: 1.25rem;
+  padding: 12px;
+}
+
+.is-h5-modal .ant-form-item {
+  margin-bottom: 12px;
 }
 
 .agent-editor-form-label {
@@ -112,10 +116,6 @@
   border-radius: 0.75rem;
 }
 
-.agent-editor-form-input {
-  height: 3rem;
-}
-
 .agent-editor-suggestion-list {
   display: flex;
   flex-wrap: wrap;
@@ -142,17 +142,20 @@
 .agent-editor-init-actions {
   display: flex;
   gap: 1rem;
-  padding-top: 0.5rem;
 }
 
 .agent-editor-secondary-action,
 .agent-editor-primary-action {
   flex: 1;
-  height: 3rem;
   border-radius: 0.75rem;
   font-weight: 700;
 }
 
+.is-h5-modal .agent-editor-secondary-action,
+.is-h5-modal .agent-editor-primary-action {
+  flex: none;
+}
+
 .agent-editor-primary-action {
   border: 0;
 }

src/styles.css

@@ -1470,7 +1470,7 @@ body {
 }
 
 .agent-editor-modal-card {
-  border-radius: 20px;
+  border-radius: 12px;
   border: 1px solid rgba(148, 163, 184, 0.14);
   background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.88) 100%);
 }