修改样式
This commit is contained in:
@ -8,7 +8,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 20px;
|
// margin-bottom: 20px;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
@ -34,4 +34,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.ant-tabs-nav {
|
||||||
|
&::before {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,32 +1,43 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect, useRef } from 'react';
|
||||||
import { Table, Typography, Button } from 'antd';
|
import { Table, Typography, Button, Tabs } from 'antd';
|
||||||
import { history, useIntl } from 'umi';
|
import { history, useIntl, connect } from 'umi';
|
||||||
|
import type { ConnectProps, Dispatch } from 'umi';
|
||||||
import { PlusOutlined } from '@ant-design/icons';
|
import { PlusOutlined } from '@ant-design/icons';
|
||||||
import { getHelpCenterList } from '@/servers/api/help';
|
import { getHelpCenterList, qandaGetPage } from '@/servers/api/help';
|
||||||
|
import type { UserModelState } from '@/models/user';
|
||||||
import { QUESTION_TYPES } from '@/dicts/help';
|
import { QUESTION_TYPES } from '@/dicts/help';
|
||||||
import './help.less';
|
import './help.less';
|
||||||
|
import type { UserInfo } from '@/models/user';
|
||||||
|
|
||||||
const { Title } = Typography;
|
const { Title } = Typography;
|
||||||
|
interface PageProps extends ConnectProps {
|
||||||
const HelpPage: React.FC = () => {
|
user: UserModelState; // dva model状态
|
||||||
|
dispatch: Dispatch; // dva dispatch方法
|
||||||
|
}
|
||||||
|
const HelpPage: React.FC<PageProps> = ({ user, dispatch }) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const [helpData, setHelpData] = useState<API.HelpCenterRecord[]>([]);
|
const [helpData, setHelpData] = useState<API.HelpCenterRecord[]>([]);
|
||||||
const [loading, setLoading] = useState<boolean>(true);
|
const [loading, setLoading] = useState<boolean>(true);
|
||||||
|
const userInfo: UserInfo | undefined = user.userInfo;
|
||||||
const [pagination, setPagination] = useState({
|
const [pagination, setPagination] = useState({
|
||||||
current: 1,
|
current: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
total: 0,
|
total: 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const tabActiveKey = useRef<string>('helpCenter');
|
||||||
// 获取帮助中心数据
|
// 获取帮助中心数据
|
||||||
const fetchHelpData = async (current = 1, pageSize = 10) => {
|
const fetchHelpData = async (current = 1, pageSize = 10) => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
console.log(userInfo?.userId);
|
||||||
|
const request = tabActiveKey.current == 'helpCenter' ? getHelpCenterList : qandaGetPage;
|
||||||
try {
|
try {
|
||||||
const response = await getHelpCenterList({
|
const response = await request({
|
||||||
basePageRequest: {
|
basePageRequest: {
|
||||||
pageNo: current,
|
pageNo: current,
|
||||||
pageSize: pageSize,
|
pageSize: pageSize,
|
||||||
},
|
},
|
||||||
|
createBy: tabActiveKey.current == 'myQuestion' ? userInfo?.userId : null
|
||||||
});
|
});
|
||||||
|
|
||||||
if (response.success) {
|
if (response.success) {
|
||||||
@ -56,7 +67,7 @@ const HelpPage: React.FC = () => {
|
|||||||
|
|
||||||
// 处理点击问题标题
|
// 处理点击问题标题
|
||||||
const handleHelpClick = (id: string) => {
|
const handleHelpClick = (id: string) => {
|
||||||
history.push(`/help/helpInfo?id=${id}`);
|
history.push(`/help/helpInfo?id=${id}&tabActiveKey=${tabActiveKey.current}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 处理点击提问按钮
|
// 处理点击提问按钮
|
||||||
@ -66,7 +77,7 @@ const HelpPage: React.FC = () => {
|
|||||||
|
|
||||||
// 获取问题分类名称
|
// 获取问题分类名称
|
||||||
const getQuestionTypeName = (type: string) => {
|
const getQuestionTypeName = (type: string) => {
|
||||||
const found = QUESTION_TYPES.find(item => item.value === type);
|
const found = QUESTION_TYPES.find((item) => item.value === type);
|
||||||
return found ? found.label : type;
|
return found ? found.label : type;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -107,10 +118,19 @@ const HelpPage: React.FC = () => {
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// 处理标签页切换
|
||||||
|
const tabsOnChange = (key: string) => {
|
||||||
|
tabActiveKey.current = key;
|
||||||
|
fetchHelpData();
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="help-container layout-content-main">
|
<div className="help-container layout-content-main">
|
||||||
<div className="help-header">
|
<div className="help-header">
|
||||||
<Title level={2}>{intl.formatMessage({ id: 'help.title' })}</Title>
|
<Tabs onChange={tabsOnChange} centered>
|
||||||
|
<Tabs.TabPane tab="帮助中心" key="helpCenter"></Tabs.TabPane>
|
||||||
|
{user.token && <Tabs.TabPane tab="我的提问" key="myQuestion"></Tabs.TabPane>}
|
||||||
|
</Tabs>
|
||||||
<Button
|
<Button
|
||||||
type="primary"
|
type="primary"
|
||||||
icon={<PlusOutlined />}
|
icon={<PlusOutlined />}
|
||||||
@ -140,4 +160,4 @@ const HelpPage: React.FC = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default HelpPage;
|
export default connect(({ user }: { user: UserModelState }) => ({ user }))(HelpPage);
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { Typography, Button, Divider, Spin, message } from 'antd';
|
import { Typography, Button, Divider, Spin, message, Tag } from 'antd';
|
||||||
import { ArrowLeftOutlined } from '@ant-design/icons';
|
import { ArrowLeftOutlined, CommentOutlined } from '@ant-design/icons';
|
||||||
import { history, useIntl } from 'umi';
|
import { history, useIntl } from 'umi';
|
||||||
import { getHelpCenterDetail } from '@/servers/api/help';
|
import { getHelpCenterDetail, getQuestionDetail } from '@/servers/api/help';
|
||||||
import { QUESTION_TYPES } from '@/dicts/help';
|
import { QUESTION_TYPES } from '@/dicts/help';
|
||||||
import styles from './helpInfo.less';
|
import styles from './helpInfo.less';
|
||||||
|
|
||||||
@ -17,6 +17,7 @@ const HelpInfoPage: React.FC = () => {
|
|||||||
// 获取URL中的id参数
|
// 获取URL中的id参数
|
||||||
const query = new URLSearchParams(window.location.search);
|
const query = new URLSearchParams(window.location.search);
|
||||||
const id = query.get('id');
|
const id = query.get('id');
|
||||||
|
const tabActiveKey = query.get('tabActiveKey') || 'helpCenter';
|
||||||
|
|
||||||
if (!id) {
|
if (!id) {
|
||||||
message.error(intl.formatMessage({ id: 'help.message.idNotFound' }));
|
message.error(intl.formatMessage({ id: 'help.message.idNotFound' }));
|
||||||
@ -27,11 +28,15 @@ const HelpInfoPage: React.FC = () => {
|
|||||||
// 请求详情数据
|
// 请求详情数据
|
||||||
const fetchHelpDetail = async () => {
|
const fetchHelpDetail = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await getHelpCenterDetail({ id });
|
const response =
|
||||||
if (response.success) {
|
tabActiveKey == 'helpCenter' ? getHelpCenterDetail({ id }) : getQuestionDetail(id);
|
||||||
setHelpDetail(response.data);
|
const responseData = await response;
|
||||||
|
if (responseData.success) {
|
||||||
|
setHelpDetail(responseData.data);
|
||||||
} else {
|
} else {
|
||||||
message.error(response.message || intl.formatMessage({ id: 'help.message.loadFailed' }));
|
message.error(
|
||||||
|
responseData.message || intl.formatMessage({ id: 'help.message.loadFailed' }),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取帮助中心详情失败:', error);
|
console.error('获取帮助中心详情失败:', error);
|
||||||
@ -51,7 +56,7 @@ const HelpInfoPage: React.FC = () => {
|
|||||||
|
|
||||||
// 获取问题分类名称
|
// 获取问题分类名称
|
||||||
const getQuestionTypeName = (type: string) => {
|
const getQuestionTypeName = (type: string) => {
|
||||||
const found = QUESTION_TYPES.find(item => item.value === type);
|
const found = QUESTION_TYPES.find((item) => item.value === type);
|
||||||
return found ? found.label : type;
|
return found ? found.label : type;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -88,30 +93,19 @@ const HelpInfoPage: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.helpInfoContent}>
|
<div className={styles.helpInfoContent}>
|
||||||
<div className={styles.titleContainer}>
|
<Title level={2} className={styles.title}>
|
||||||
<Title level={2} className={styles.title}>
|
{/* <QuestionCircleOutlined /> */}
|
||||||
{helpDetail.title}
|
<CommentOutlined />
|
||||||
</Title>
|
<span style={{ margin: '0 15px' }}>{helpDetail.title}</span>
|
||||||
</div>
|
<Tag color="success">{helpDetail.isAnswer == '1' ? '已回答' : '未回答'}</Tag>
|
||||||
|
</Title>
|
||||||
<div className={styles.metaInfo}>
|
<div dangerouslySetInnerHTML={{ __html: helpDetail.content || '' }} />
|
||||||
<div className={styles.metaLeft}>
|
|
||||||
<Text type="secondary">
|
|
||||||
{intl.formatMessage({ id: 'help.info.publishTime' })}: {helpDetail.createTime}
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
<div className={styles.metaRight}>
|
|
||||||
<Text type="secondary">
|
|
||||||
{intl.formatMessage({ id: 'help.info.questionType' })}: {getQuestionTypeName(helpDetail.type)} |
|
|
||||||
{intl.formatMessage({ id: 'help.info.publisher' })}: {helpDetail.createBy || '系统管理员'}
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Divider className={styles.divider} />
|
<Divider className={styles.divider} />
|
||||||
|
|
||||||
<div className={styles.contentBody}>
|
<div className={styles.contentBody}>
|
||||||
<div dangerouslySetInnerHTML={{ __html: helpDetail.answerContent || helpDetail.content || '暂无内容' }} />
|
答:
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: helpDetail.answerContent || '暂无内容' }} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -199,7 +199,7 @@ const IndexPage: React.FC<any> = ({ user }) => {
|
|||||||
className="cardTitleText"
|
className="cardTitleText"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
history.push({
|
history.push({
|
||||||
pathname: '/announce/announceInfo',
|
pathname: '/notice/noticeInfo',
|
||||||
search: '?id=' + item.id,
|
search: '?id=' + item.id,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
@ -361,7 +361,7 @@ const IndexPage: React.FC<any> = ({ user }) => {
|
|||||||
<div className="linkTitle">友情链接</div>
|
<div className="linkTitle">友情链接</div>
|
||||||
<Card>
|
<Card>
|
||||||
{friendshipConnections.map((item, index) => (
|
{friendshipConnections.map((item, index) => (
|
||||||
<Card.Grid key={item.id} style={{ width: '16.6667%', height: '130px' }}>
|
<Card.Grid onClick={() => window.open(item.url)} key={item.id} style={{ width: '16.6667%', height: '130px' }}>
|
||||||
<img src={item.thumbnail} alt="" />
|
<img src={item.thumbnail} alt="" />
|
||||||
</Card.Grid>
|
</Card.Grid>
|
||||||
))}
|
))}
|
||||||
|
@ -62,6 +62,7 @@
|
|||||||
.contentBody {
|
.contentBody {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
|
word-break: break-all;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
@ -79,7 +79,7 @@ const NoticeInfo: React.FC = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.noticeInfoContainer}>
|
<div className={`${styles.noticeInfoContainer} layout-content-main` }>
|
||||||
<div className={styles.noticeInfoHeader}>
|
<div className={styles.noticeInfoHeader}>
|
||||||
<Button
|
<Button
|
||||||
type="link"
|
type="link"
|
||||||
|
@ -249,7 +249,7 @@ const PolicyInfo: React.FC = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.policyInfoContainer}>
|
<div className={`${styles.policyInfoContainer} layout-content-main`}>
|
||||||
<div className={styles.policyInfoHeader}>
|
<div className={styles.policyInfoHeader}>
|
||||||
<Button
|
<Button
|
||||||
type="link"
|
type="link"
|
||||||
|
@ -35,3 +35,22 @@ export async function addHelpCenterQuestion(params: API.HelpCenterQuestionAddReq
|
|||||||
data: params,
|
data: params,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
获取我的提问
|
||||||
|
*/
|
||||||
|
|
||||||
|
export async function qandaGetPage(params: API.HelpCenterListRequest) {
|
||||||
|
return request<API.APIResponse<any>>('/portals/qanda/getPage', {
|
||||||
|
method: 'POST',
|
||||||
|
data: params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
查询我的提问详情
|
||||||
|
*/
|
||||||
|
export async function getQuestionDetail(id: string) {
|
||||||
|
return request<API.APIResponse<any>>(`/portals/qanda/${id}`, {
|
||||||
|
method: 'GET',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
Reference in New Issue
Block a user