关于我们优化代码

src/locales/en-US/aboutManage.ts

@@ -17,12 +17,12 @@ export default {
   'aboutManage.form.content': 'Content (Chinese)',
   'aboutManage.form.contentRequired': 'Please enter Chinese content',
   'aboutManage.form.contentPlaceholder': 'Please enter Chinese content...',
-  'aboutManage.form.address': 'Address (Chinese)',
+  'aboutManage.form.address': 'Company Address (Chinese)',
-  'aboutManage.form.addressRequired': 'Please enter Chinese address',
+  'aboutManage.form.addressRequired': 'Please enter Chinese company address',
-  'aboutManage.form.addressPlaceholder': 'Please enter Chinese address',
+  'aboutManage.form.addressPlaceholder': 'Please enter Chinese company address',
-  'aboutManage.form.contactsPhone': 'Contact Phone (Chinese)',
+  'aboutManage.form.contactsPhone': 'Contact Information (Chinese)',
-  'aboutManage.form.contactsPhoneRequired': 'Please enter Chinese contact phone',
+  'aboutManage.form.contactsPhoneRequired': 'Please enter Chinese contact information',
-  'aboutManage.form.contactsPhonePlaceholder': 'Please enter Chinese contact phone',
+  'aboutManage.form.contactsPhonePlaceholder': 'Please enter Chinese contact information',
   'aboutManage.form.contactsEmail': 'Contact Email (Chinese)',
   'aboutManage.form.contactsEmailRequired': 'Please enter Chinese contact email',
   'aboutManage.form.contactsEmailPlaceholder': 'Please enter Chinese contact email',
@@ -37,12 +37,12 @@ export default {
   'aboutManage.form.contentEn': 'Content (English)',
   'aboutManage.form.contentEnRequired': 'Please enter English content',
   'aboutManage.form.contentEnPlaceholder': 'Please enter English content...',
-  'aboutManage.form.addressEn': 'Address (English)',
+  'aboutManage.form.addressEn': 'Company Address (English)',
-  'aboutManage.form.addressEnRequired': 'Please enter English address',
+  'aboutManage.form.addressEnRequired': 'Please enter English company address',
-  'aboutManage.form.addressEnPlaceholder': 'Please enter English address',
+  'aboutManage.form.addressEnPlaceholder': 'Please enter English company address',
-  'aboutManage.form.contactsPhoneEn': 'Contact Phone (English)',
+  'aboutManage.form.contactsPhoneEn': 'Contact Information (English)',
-  'aboutManage.form.contactsPhoneEnRequired': 'Please enter English contact phone',
+  'aboutManage.form.contactsPhoneEnRequired': 'Please enter English contact information',
-  'aboutManage.form.contactsPhoneEnPlaceholder': 'Please enter English contact phone',
+  'aboutManage.form.contactsPhoneEnPlaceholder': 'Please enter English contact information',
   'aboutManage.form.contactsEmailEn': 'Contact Email (English)',
   'aboutManage.form.contactsEmailEnRequired': 'Please enter English contact email',
   'aboutManage.form.contactsEmailEnPlaceholder': 'Please enter English contact email',

src/locales/zh-CN/aboutManage.ts

@@ -17,12 +17,12 @@ export default {
   'aboutManage.form.content': '正文内容',
   'aboutManage.form.contentRequired': '请输入正文内容',
   'aboutManage.form.contentPlaceholder': '请输入正文内容...',
-  'aboutManage.form.address': '地址',
+  'aboutManage.form.address': '公司地址',
-  'aboutManage.form.addressRequired': '请输入地址',
+  'aboutManage.form.addressRequired': '请输入公司地址',
-  'aboutManage.form.addressPlaceholder': '请输入地址',
+  'aboutManage.form.addressPlaceholder': '请输入公司地址',
-  'aboutManage.form.contactsPhone': '联系电话',
+  'aboutManage.form.contactsPhone': '联系方式',
-  'aboutManage.form.contactsPhoneRequired': '请输入联系电话',
+  'aboutManage.form.contactsPhoneRequired': '请输入联系方式',
-  'aboutManage.form.contactsPhonePlaceholder': '请输入联系电话',
+  'aboutManage.form.contactsPhonePlaceholder': '请输入联系方式',
   'aboutManage.form.contactsEmail': '联系邮箱',
   'aboutManage.form.contactsEmailRequired': '请输入联系邮箱',
   'aboutManage.form.contactsEmailPlaceholder': '请输入联系邮箱',
@@ -37,12 +37,12 @@ export default {
   'aboutManage.form.contentEn': '正文内容（英文）',
   'aboutManage.form.contentEnRequired': '请输入英文正文内容',
   'aboutManage.form.contentEnPlaceholder': '请输入英文正文内容...',
-  'aboutManage.form.addressEn': '地址（英文）',
+  'aboutManage.form.addressEn': '公司地址（英文）',
-  'aboutManage.form.addressEnRequired': '请输入英文地址',
+  'aboutManage.form.addressEnRequired': '请输入公司地址',
-  'aboutManage.form.addressEnPlaceholder': '请输入英文地址',
+  'aboutManage.form.addressEnPlaceholder': '请输入公司地址',
-  'aboutManage.form.contactsPhoneEn': '联系电话（英文）',
+  'aboutManage.form.contactsPhoneEn': '联系方式（英文）',
-  'aboutManage.form.contactsPhoneEnRequired': '请输入英文联系电话',
+  'aboutManage.form.contactsPhoneEnRequired': '请输入英文联系方式',
-  'aboutManage.form.contactsPhoneEnPlaceholder': '请输入英文联系电话',
+  'aboutManage.form.contactsPhoneEnPlaceholder': '请输入英文联系方式',
   'aboutManage.form.contactsEmailEn': '联系邮箱（英文）',
   'aboutManage.form.contactsEmailEnRequired': '请输入英文联系邮箱',
   'aboutManage.form.contactsEmailEnPlaceholder': '请输入英文联系邮箱',

src/pages/aboutManage/aboutManage.tsx

@@ -1,293 +1,140 @@
 import React, { useState, useEffect } from 'react';
-import { useIntl, FormattedMessage } from 'umi';
+import { useIntl } from 'umi';
-import { Card, Form, Input, Button, message, Tabs, Spin } from 'antd';
+import { Card, Form, Input, Button, message, Tabs, Spin, Typography } from 'antd';
 import WangEditor from '@/components/WangEidtor/WangEidtor';
+import FileUpload from '@/components/FileUpload';
 import { getAboutUs, updateAboutUs, AboutUsRequest } from '@/servers/api/about';
 import styles from './aboutManage.less';
-import FileUpload from '@/components/FileUpload'
 
 const { TabPane } = Tabs;
-
+const { Title } = Typography;
-interface ErrorInfo {
-  errorFields: {
-    name: string[];
-    errors: string[];
-  }[];
-  values: Record<string, any>;
-}
 
 const AboutManage: React.FC = () => {
   const intl = useIntl();
   const [form] = Form.useForm();
-  const [loading, setLoading] = useState<boolean>(false);
+  const [loading, setLoading] = useState(false);
-  const [submitting, setSubmitting] = useState<boolean>(false);
+  const [submitting, setSubmitting] = useState(false);
-  const [activeTabKey, setActiveTabKey] = useState<string>('zh');
+  const [activeTabKey, setActiveTabKey] = useState('zh');
   const [aboutData, setAboutData] = useState<AboutUsRequest | null>(null);
+  const editorHeight = 100;
 
-  // 获取关于我们详情数据
   const fetchAboutData = async () => {
     setLoading(true);
     try {
       const response = await getAboutUs();
-      if (response && response.success) {
+      if (response?.success) {
         setAboutData(response.data);
-        // 设置表单初始值
+        form.setFieldsValue({ ...response.data });
-        form.setFieldsValue({
-          title: response.data.title,
-          titleEn: response.data.titleEn,
-          content: response.data.content,
-          contentEn: response.data.contentEn,
-          address: response.data.address,
-          addressEn: response.data.addressEn,
-          contactsPhone: response.data.contactsPhone,
-          contactsPhoneEn: response.data.contactsPhoneEn,
-          contactsEmail: response.data.contactsEmail,
-          contactsEmailEn: response.data.contactsEmailEn,
-          contactsConsult: response.data.contactsConsult,
-          contactsConsultEn: response.data.contactsConsultEn,
-          // address_img	varchar(255)					地址地图图片
-          addressImg: response.data.addressImg,
-        });
       } else {
         message.error(response.message || intl.formatMessage({ id: 'aboutManage.fetchFailed' }));
       }
     } catch (error) {
-      console.error('获取关于我们数据失败:', error);
       message.error(intl.formatMessage({ id: 'aboutManage.fetchFailed' }));
     } finally {
       setLoading(false);
     }
   };
 
-  // 首次加载时获取数据
   useEffect(() => {
     fetchAboutData();
   }, []);
 
-  // 处理Tab切换
+  const handleTabChange = (key: string) => setActiveTabKey(key);
-  const handleTabChange = (key: string) => {
-    setActiveTabKey(key);
-  };
 
-  // 处理表单提交
   const handleSubmit = async () => {
     try {
       const values = await form.validateFields();
       setSubmitting(true);
-
-      // 处理上传文件字段
       const formattedValues = { ...values };
-      if (values.addressImg && Array.isArray(values.addressImg) && values.addressImg.length > 0) {
+      if (Array.isArray(values.addressImg)) {
-        // 如果addressImg是文件数组，提取URL
         formattedValues.addressImg = values.addressImg[0]?.url || '';
       }
-
+      const submitData: AboutUsRequest = { ...aboutData, ...formattedValues };
-      // 准备提交数据
-      const submitData: AboutUsRequest = {
-        ...aboutData,
-        ...formattedValues,
-      };
-
       const response = await updateAboutUs(submitData);
-      if (response && response.success) {
+      if (response?.success) {
         message.success(intl.formatMessage({ id: 'aboutManage.saveSuccess' }));
-        fetchAboutData(); // 刷新数据
+        fetchAboutData();
       } else {
         message.error(response.message || intl.formatMessage({ id: 'aboutManage.saveFailed' }));
       }
     } catch (errorInfo: any) {
-      // 获取所有字段的错误信息
+      const fields = errorInfo?.errorFields || [];
-      const errorFields = errorInfo.errorFields || [];
+      const hasZhError = fields.some((f: any) => !`${f.name}`.includes('En'));
-
+      const hasEnError = fields.some((f: any) => `${f.name}`.includes('En'));
-      // 检查是否有中文标题或内容的错误
+      if (hasZhError) setActiveTabKey('zh');
-      const hasZhError = errorFields.some((field: any) => {
+      else if (hasEnError) setActiveTabKey('en');
-        if (!field.name) return false;
-        const fieldName = Array.isArray(field.name) ? field.name.join('.') : String(field.name);
-        return !fieldName.includes('En');
-      });
-
-      // 检查是否有英文标题或内容的错误
-      const hasEnError = errorFields.some((field: any) => {
-        if (!field.name) return false;
-        const fieldName = Array.isArray(field.name) ? field.name.join('.') : String(field.name);
-        return fieldName.includes('En');
-      });
-
-      // 如果有中文字段错误，切换到中文Tab
-      if (hasZhError) {
-        setActiveTabKey('zh');
-      }
-      // 如果只有英文字段错误，切换到英文Tab
-      else if (hasEnError && !hasZhError) {
-        setActiveTabKey('en');
-      }
-
-      console.log('表单验证失败:', errorInfo);
     } finally {
       setSubmitting(false);
     }
   };
 
+  const renderFormFields = (lang: 'zh' | 'en') => {
+    const isZh = lang === 'zh';
+    const prefix = isZh ? '' : 'En';
+    const langCode = isZh ? 'zh-CN' : 'en';
+    return (
+      <>
+        <Title level={5} style={{ textAlign: 'center' }}>{intl.formatMessage({ id: 'aboutManage.title' })}</Title>
+        <Form.Item
+          name={`title${prefix}`}
+          label={intl.formatMessage({ id: `aboutManage.form.title${prefix}` })}
+          rules={[{ required: true, message: intl.formatMessage({ id: `aboutManage.form.title${prefix}Required` }) }]}
+        >
+          <Input placeholder={intl.formatMessage({ id: `aboutManage.form.title${prefix}Placeholder` })} />
+        </Form.Item>
+
+        <Form.Item
+          name={`content${prefix}`}
+          label={intl.formatMessage({ id: `aboutManage.form.content${prefix}` })}
+          rules={[{ required: true, message: intl.formatMessage({ id: `aboutManage.form.content${prefix}Required` }) }]}
+        >
+          <WangEditor language={langCode} height={`${editorHeight}px`} placeholder={intl.formatMessage({ id: `aboutManage.form.content${prefix}Placeholder` })} />
+        </Form.Item>
+
+        <Title level={5} style={{ textAlign: 'center' }}>首页管理</Title>
+
+        {(
+          <Form.Item
+            name="addressImg"
+            label="地址图片"
+            rules={[{ required: true, message: '请上传地址图片' }]}
+            normalize={(val) => typeof val === 'string' ? [{ uid: '-1', name: 'image.jpg', status: 'done', url: val }] : val}
+          >
+            <FileUpload maxCount={1} maxSize={2} listType="picture-card" />
+          </Form.Item>
+        )}
+
+        {["address", "contactsConsult", "contactsEmail", "contactsPhone"].map((field) => (
+          <Form.Item
+            key={field}
+            name={`${field}${prefix}`}
+            label={intl.formatMessage({ id: `aboutManage.form.${field}${prefix}` })}
+            rules={[{ required: true, message: intl.formatMessage({ id: `aboutManage.form.${field}${prefix}Required` }) }]}
+          >
+            <WangEditor language={langCode} height={`${editorHeight}px`} placeholder={intl.formatMessage({ id: `aboutManage.form.${field}${prefix}Placeholder` })} />
+          </Form.Item>
+        ))}
+      </>
+    );
+  };
+
   return (
     <div className="common-container">
-      <Card
+      <Card>
-        title={intl.formatMessage({ id: 'aboutManage.title' })}
-        extra={
-          <Button
-            type="primary"
-            onClick={handleSubmit}
-            loading={submitting}
-          >
-            {intl.formatMessage({ id: 'aboutManage.save' })}
-          </Button>
-        }
-      >
         <Spin spinning={loading}>
-          <Form
+          <Form form={form} layout="vertical">
-            form={form}
-            layout="vertical"
-            initialValues={aboutData || {}}
-          >
-            <Form.Item
-              name="addressImg"
-              label="地址图片"
-              rules={[{ required: true, message: '请上传地址图片' }]}
-              normalize={(value) => {
-                if (typeof value === 'string') {
-                  return [
-                    {
-                      uid: '-1',
-                      name: 'image.jpg',
-                      status: 'done',
-                      url: value,
-                    }
-                  ];
-                }
-                return value;
-              }}
-            >
-              <FileUpload
-                maxCount={1}
-                maxSize={2}
-                listType="picture-card"
-              />
-            </Form.Item>
             <Tabs activeKey={activeTabKey} onChange={handleTabChange}>
               <TabPane tab={intl.formatMessage({ id: 'aboutManage.form.chineseTab' })} key="zh">
-                <Form.Item
+                {renderFormFields('zh')}
-                  name="title"
-                  label={intl.formatMessage({ id: 'aboutManage.form.title' })}
-                  rules={[{ required: true, message: intl.formatMessage({ id: 'aboutManage.form.titleRequired' }) }]}
-                >
-                  <Input placeholder={intl.formatMessage({ id: 'aboutManage.form.titlePlaceholder' })} />
-                </Form.Item>
-
-                <Form.Item
-                  name="content"
-                  label={intl.formatMessage({ id: 'aboutManage.form.content' })}
-                  rules={[{ required: true, message: intl.formatMessage({ id: 'aboutManage.form.contentRequired' }) }]}
-                >
-                  <WangEditor
-                    language="zh-CN"
-                    height="400px"
-                    placeholder={intl.formatMessage({ id: 'aboutManage.form.contentPlaceholder' })}
-                  />
-                </Form.Item>
-
-                <Form.Item
-                  name="address"
-                  label={intl.formatMessage({ id: 'aboutManage.form.address' })}
-                  rules={[{ required: true, message: intl.formatMessage({ id: 'aboutManage.form.addressRequired' }) }]}
-                >
-                  <Input placeholder={intl.formatMessage({ id: 'aboutManage.form.addressPlaceholder' })} />
-                </Form.Item>
-
-                <Form.Item
-                  name="contactsPhone"
-                  label={intl.formatMessage({ id: 'aboutManage.form.contactsPhone' })}
-                  rules={[{ required: true, message: intl.formatMessage({ id: 'aboutManage.form.contactsPhoneRequired' }) }]}
-                >
-                  <Input placeholder={intl.formatMessage({ id: 'aboutManage.form.contactsPhonePlaceholder' })} />
-                </Form.Item>
-
-                <Form.Item
-                  name="contactsEmail"
-                  label={intl.formatMessage({ id: 'aboutManage.form.contactsEmail' })}
-                  rules={[{ required: true, message: intl.formatMessage({ id: 'aboutManage.form.contactsEmailRequired' }) }]}
-                >
-                  <Input placeholder={intl.formatMessage({ id: 'aboutManage.form.contactsEmailPlaceholder' })} />
-                </Form.Item>
-
-                <Form.Item
-                  name="contactsConsult"
-                  label={intl.formatMessage({ id: 'aboutManage.form.contactsConsult' })}
-                  rules={[{ required: true, message: intl.formatMessage({ id: 'aboutManage.form.contactsConsultRequired' }) }]}
-                >
-                  <Input placeholder={intl.formatMessage({ id: 'aboutManage.form.contactsConsultPlaceholder' })} />
-                </Form.Item>
               </TabPane>
               <TabPane tab={intl.formatMessage({ id: 'aboutManage.form.englishTab' })} key="en">
-                <Form.Item
+                {renderFormFields('en')}
-                  name="titleEn"
-                  label={intl.formatMessage({ id: 'aboutManage.form.titleEn' })}
-                  rules={[{ required: true, message: intl.formatMessage({ id: 'aboutManage.form.titleEnRequired' }) }]}
-                >
-                  <Input placeholder={intl.formatMessage({ id: 'aboutManage.form.titleEnPlaceholder' })} />
-                </Form.Item>
-
-                <Form.Item
-                  name="contentEn"
-                  label={intl.formatMessage({ id: 'aboutManage.form.contentEn' })}
-                  rules={[{ required: true, message: intl.formatMessage({ id: 'aboutManage.form.contentEnRequired' }) }]}
-                >
-                  <WangEditor
-                    language="en"
-                    height="400px"
-                    placeholder={intl.formatMessage({ id: 'aboutManage.form.contentEnPlaceholder' })}
-                  />
-                </Form.Item>
-
-                <Form.Item
-                  name="addressEn"
-                  label={intl.formatMessage({ id: 'aboutManage.form.addressEn' })}
-                  rules={[{ required: true, message: intl.formatMessage({ id: 'aboutManage.form.addressEnRequired' }) }]}
-                >
-                  <Input placeholder={intl.formatMessage({ id: 'aboutManage.form.addressEnPlaceholder' })} />
-                </Form.Item>
-
-                <Form.Item
-                  name="contactsPhoneEn"
-                  label={intl.formatMessage({ id: 'aboutManage.form.contactsPhoneEn' })}
-                  rules={[{ required: true, message: intl.formatMessage({ id: 'aboutManage.form.contactsPhoneEnRequired' }) }]}
-                >
-                  <Input placeholder={intl.formatMessage({ id: 'aboutManage.form.contactsPhoneEnPlaceholder' })} />
-                </Form.Item>
-
-                <Form.Item
-                  name="contactsEmailEn"
-                  label={intl.formatMessage({ id: 'aboutManage.form.contactsEmailEn' })}
-                  rules={[{ required: true, message: intl.formatMessage({ id: 'aboutManage.form.contactsEmailEnRequired' }) }]}
-                >
-                  <Input placeholder={intl.formatMessage({ id: 'aboutManage.form.contactsEmailEnPlaceholder' })} />
-                </Form.Item>
-
-                <Form.Item
-                  name="contactsConsultEn"
-                  label={intl.formatMessage({ id: 'aboutManage.form.contactsConsultEn' })}
-                  rules={[{ required: true, message: intl.formatMessage({ id: 'aboutManage.form.contactsConsultEnRequired' }) }]}
-                >
-                  <Input placeholder={intl.formatMessage({ id: 'aboutManage.form.contactsConsultEnPlaceholder' })} />
-                </Form.Item>
               </TabPane>
             </Tabs>
           </Form>
         </Spin>
         <div className={styles.saveBtnWrapper}>
-          <Button
+          <Button type="primary" onClick={handleSubmit} loading={submitting}>
-            type="primary"
-            onClick={handleSubmit}
-            loading={submitting}
-          >
             {intl.formatMessage({ id: 'aboutManage.save' })}
           </Button>
         </div>