diff --git a/src/locales/en-US/aboutManage.ts b/src/locales/en-US/aboutManage.ts index a0931a3..00d0092 100644 --- a/src/locales/en-US/aboutManage.ts +++ b/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.addressRequired': 'Please enter Chinese address', - 'aboutManage.form.addressPlaceholder': 'Please enter Chinese address', - 'aboutManage.form.contactsPhone': 'Contact Phone (Chinese)', - 'aboutManage.form.contactsPhoneRequired': 'Please enter Chinese contact phone', - 'aboutManage.form.contactsPhonePlaceholder': 'Please enter Chinese contact phone', + 'aboutManage.form.address': 'Company Address (Chinese)', + 'aboutManage.form.addressRequired': 'Please enter Chinese company address', + 'aboutManage.form.addressPlaceholder': 'Please enter Chinese company address', + 'aboutManage.form.contactsPhone': 'Contact Information (Chinese)', + 'aboutManage.form.contactsPhoneRequired': 'Please enter Chinese contact information', + '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.addressEnRequired': 'Please enter English address', - 'aboutManage.form.addressEnPlaceholder': 'Please enter English address', - 'aboutManage.form.contactsPhoneEn': 'Contact Phone (English)', - 'aboutManage.form.contactsPhoneEnRequired': 'Please enter English contact phone', - 'aboutManage.form.contactsPhoneEnPlaceholder': 'Please enter English contact phone', + 'aboutManage.form.addressEn': 'Company Address (English)', + 'aboutManage.form.addressEnRequired': 'Please enter English company address', + 'aboutManage.form.addressEnPlaceholder': 'Please enter English company address', + 'aboutManage.form.contactsPhoneEn': 'Contact Information (English)', + 'aboutManage.form.contactsPhoneEnRequired': 'Please enter English contact information', + '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', diff --git a/src/locales/zh-CN/aboutManage.ts b/src/locales/zh-CN/aboutManage.ts index 3ee83f9..7eae571 100644 --- a/src/locales/zh-CN/aboutManage.ts +++ b/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.addressRequired': '请输入地址', - 'aboutManage.form.addressPlaceholder': '请输入地址', - 'aboutManage.form.contactsPhone': '联系电话', - 'aboutManage.form.contactsPhoneRequired': '请输入联系电话', - 'aboutManage.form.contactsPhonePlaceholder': '请输入联系电话', + 'aboutManage.form.address': '公司地址', + 'aboutManage.form.addressRequired': '请输入公司地址', + 'aboutManage.form.addressPlaceholder': '请输入公司地址', + 'aboutManage.form.contactsPhone': '联系方式', + 'aboutManage.form.contactsPhoneRequired': '请输入联系方式', + '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.addressEnRequired': '请输入英文地址', - 'aboutManage.form.addressEnPlaceholder': '请输入英文地址', - 'aboutManage.form.contactsPhoneEn': '联系电话(英文)', - 'aboutManage.form.contactsPhoneEnRequired': '请输入英文联系电话', - 'aboutManage.form.contactsPhoneEnPlaceholder': '请输入英文联系电话', + 'aboutManage.form.addressEn': '公司地址(英文)', + 'aboutManage.form.addressEnRequired': '请输入公司地址', + 'aboutManage.form.addressEnPlaceholder': '请输入公司地址', + 'aboutManage.form.contactsPhoneEn': '联系方式(英文)', + 'aboutManage.form.contactsPhoneEnRequired': '请输入英文联系方式', + 'aboutManage.form.contactsPhoneEnPlaceholder': '请输入英文联系方式', 'aboutManage.form.contactsEmailEn': '联系邮箱(英文)', 'aboutManage.form.contactsEmailEnRequired': '请输入英文联系邮箱', 'aboutManage.form.contactsEmailEnPlaceholder': '请输入英文联系邮箱', diff --git a/src/pages/aboutManage/aboutManage.tsx b/src/pages/aboutManage/aboutManage.tsx index 05ca606..423acaf 100644 --- a/src/pages/aboutManage/aboutManage.tsx +++ b/src/pages/aboutManage/aboutManage.tsx @@ -1,293 +1,140 @@ import React, { useState, useEffect } from 'react'; -import { useIntl, FormattedMessage } from 'umi'; -import { Card, Form, Input, Button, message, Tabs, Spin } from 'antd'; +import { useIntl } from 'umi'; +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; - -interface ErrorInfo { - errorFields: { - name: string[]; - errors: string[]; - }[]; - values: Record; -} +const { Title } = Typography; const AboutManage: React.FC = () => { const intl = useIntl(); const [form] = Form.useForm(); - const [loading, setLoading] = useState(false); - const [submitting, setSubmitting] = useState(false); - const [activeTabKey, setActiveTabKey] = useState('zh'); + const [loading, setLoading] = useState(false); + const [submitting, setSubmitting] = useState(false); + const [activeTabKey, setActiveTabKey] = useState('zh'); const [aboutData, setAboutData] = useState(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({ - 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, - }); + form.setFieldsValue({ ...response.data }); } 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) { - // 如果addressImg是文件数组,提取URL + if (Array.isArray(values.addressImg)) { 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 errorFields = errorInfo.errorFields || []; - - // 检查是否有中文标题或内容的错误 - const hasZhError = 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'); - }); - - // 检查是否有英文标题或内容的错误 - 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); + const fields = 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'); + else if (hasEnError) setActiveTabKey('en'); } finally { setSubmitting(false); } }; + const renderFormFields = (lang: 'zh' | 'en') => { + const isZh = lang === 'zh'; + const prefix = isZh ? '' : 'En'; + const langCode = isZh ? 'zh-CN' : 'en'; + return ( + <> + {intl.formatMessage({ id: 'aboutManage.title' })} + + + + + + + + + 首页管理 + + {( + typeof val === 'string' ? [{ uid: '-1', name: 'image.jpg', status: 'done', url: val }] : val} + > + + + )} + + {["address", "contactsConsult", "contactsEmail", "contactsPhone"].map((field) => ( + + + + ))} + + ); + }; + return (
- - {intl.formatMessage({ id: 'aboutManage.save' })} - - } - > + -
- { - if (typeof value === 'string') { - return [ - { - uid: '-1', - name: 'image.jpg', - status: 'done', - url: value, - } - ]; - } - return value; - }} - > - - + - - - - - - - - - - - - - - - - - - - - - - - + {renderFormFields('zh')} - - - - - - - - - - - - - - - - - - - - - - - + {renderFormFields('en')}
-