liuc/fe_portal_manage_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

关于我们优化代码

Browse Source
This commit is contained in:
linxd
2025-07-17 14:23:21 +08:00
parent 907dd03023
commit 55fa2cf919
3 changed files with 99 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/locales/en-US/aboutManage.ts
View File

@ -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',

24
src/locales/zh-CN/aboutManage.ts
View File

@ -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': '请输入英文联系邮箱',

303
src/pages/aboutManage/aboutManage.tsx
View File

@ -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<string, any>;
}
const { Title } = Typography;
const AboutManage: React.FC = () => {
const intl = useIntl();
const [form] = Form.useForm();
const [loading, setLoading] = useState<boolean>(false);
const [submitting, setSubmitting] = useState<boolean>(false);
const [activeTabKey, setActiveTabKey] = useState<string>('zh');
const [loading, setLoading] = useState(false);
const [submitting, setSubmitting] = useState(false);
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({
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 (
<>
<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
title={intl.formatMessage({ id: 'aboutManage.title' })}
extra={
<Button
type="primary"
onClick={handleSubmit}
loading={submitting}
>
{intl.formatMessage({ id: 'aboutManage.save' })}
</Button>
}
>
<Card>
<Spin spinning={loading}>
<Form
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>
<Form form={form} layout="vertical">
<Tabs activeKey={activeTabKey} onChange={handleTabChange}>
<TabPane tab={intl.formatMessage({ id: 'aboutManage.form.chineseTab' })} key="zh">
<Form.Item
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>
{renderFormFields('zh')}
</TabPane>
<TabPane tab={intl.formatMessage({ id: 'aboutManage.form.englishTab' })} key="en">
<Form.Item
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>
{renderFormFields('en')}
</TabPane>
</Tabs>
</Form>
</Spin>
<div className={styles.saveBtnWrapper}>
<Button
type="primary"
onClick={handleSubmit}
loading={submitting}
>
<Button type="primary" onClick={handleSubmit} loading={submitting}>
{intl.formatMessage({ id: 'aboutManage.save' })}
</Button>
</div>