f77675e5fc
- 实现 React + Arco Design Pro 基础框架 - 添加页面路由和布局组件 - 实现用户认证和权限管理 - 添加数据可视化图表组件 - 实现列表、表单等常用页面模块 - 配置 Redux 状态管理 - 添加工具函数和自定义 Hooks
68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import axios from 'axios';
|
|
import { Link, Card, Skeleton, Tag, Typography } from '@arco-design/web-react';
|
|
import useLocale from '@/utils/useLocale';
|
|
import locale from './locale';
|
|
import styles from './style/announcement.module.less';
|
|
|
|
function Announcement() {
|
|
const [data, setData] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const t = useLocale(locale);
|
|
|
|
const fetchData = () => {
|
|
setLoading(true);
|
|
axios
|
|
.get('/api/workplace/announcement')
|
|
.then((res) => {
|
|
setData(res.data);
|
|
})
|
|
.finally(() => {
|
|
setLoading(false);
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
function getTagColor(type) {
|
|
switch (type) {
|
|
case 'activity':
|
|
return 'orangered';
|
|
case 'info':
|
|
return 'cyan';
|
|
case 'notice':
|
|
return 'arcoblue';
|
|
default:
|
|
return 'arcoblue';
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
<Typography.Title heading={6}>
|
|
{t['workplace.announcement']}
|
|
</Typography.Title>
|
|
<Link>{t['workplace.seeMore']}</Link>
|
|
</div>
|
|
<Skeleton loading={loading} text={{ rows: 5, width: '100%' }} animation>
|
|
<div>
|
|
{data.map((d) => (
|
|
<div key={d.key} className={styles.item}>
|
|
<Tag color={getTagColor(d.type)} size="small">
|
|
{t[`workplace.${d.type}`]}
|
|
</Tag>
|
|
<span className={styles.link}>{d.content}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Skeleton>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default Announcement;
|