feat: 增加左侧菜单的所有主页面文件，首页样式修改
parent
c2f606078b
commit
9f8bebccfb
@ -1,88 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { Card, Spin, Typography } from '@arco-design/web-react';
|
|
||||||
import { DonutChart } from 'bizcharts';
|
|
||||||
import axios from 'axios';
|
|
||||||
import useLocale from '@/utils/useLocale';
|
|
||||||
import locale from './locale';
|
|
||||||
|
|
||||||
function PopularContent() {
|
|
||||||
const t = useLocale(locale);
|
|
||||||
const [data, setData] = useState([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
|
|
||||||
const fetchData = () => {
|
|
||||||
setLoading(true);
|
|
||||||
axios
|
|
||||||
.get('/api/workplace/content-percentage')
|
|
||||||
.then((res) => {
|
|
||||||
setData(res.data);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
setLoading(false);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<Typography.Title heading={6}>
|
|
||||||
{t['workplace.contentPercentage']}
|
|
||||||
</Typography.Title>
|
|
||||||
<Spin loading={loading} style={{ display: 'block' }}>
|
|
||||||
<DonutChart
|
|
||||||
autoFit
|
|
||||||
height={340}
|
|
||||||
data={data}
|
|
||||||
radius={0.7}
|
|
||||||
innerRadius={0.65}
|
|
||||||
angleField="count"
|
|
||||||
colorField="type"
|
|
||||||
color={['#21CCFF', '#313CA9', '#249EFF']}
|
|
||||||
interactions={[
|
|
||||||
{
|
|
||||||
type: 'element-single-selected',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
tooltip={{ showMarkers: false }}
|
|
||||||
label={{
|
|
||||||
visible: true,
|
|
||||||
type: 'spider',
|
|
||||||
formatter: (v) => `${(v.percent * 100).toFixed(0)}%`,
|
|
||||||
style: {
|
|
||||||
fill: '#86909C',
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
legend={{
|
|
||||||
position: 'bottom',
|
|
||||||
}}
|
|
||||||
statistic={{
|
|
||||||
title: {
|
|
||||||
style: {
|
|
||||||
fontSize: '14px',
|
|
||||||
lineHeight: 2,
|
|
||||||
color: 'rgb(--var(color-text-1))',
|
|
||||||
},
|
|
||||||
formatter: () => '内容量',
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
style: {
|
|
||||||
fontSize: '16px',
|
|
||||||
color: 'rgb(--var(color-text-1))',
|
|
||||||
},
|
|
||||||
formatter: (_, data) => {
|
|
||||||
const sum = data.reduce((a, b) => a + b.count, 0);
|
|
||||||
return Number(sum).toLocaleString();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Spin>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default PopularContent;
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Link, Card, Typography } from '@arco-design/web-react';
|
|
||||||
import useLocale from '@/utils/useLocale';
|
|
||||||
import locale from './locale';
|
|
||||||
import styles from './style/docs.module.less';
|
|
||||||
|
|
||||||
const links = {
|
|
||||||
react: 'https://arco.design/react/docs/start',
|
|
||||||
vue: 'https://arco.design/vue/docs/start',
|
|
||||||
designLab: 'https://arco.design/themes',
|
|
||||||
materialMarket: 'https://arco.design/material/',
|
|
||||||
};
|
|
||||||
function QuickOperation() {
|
|
||||||
const t = useLocale(locale);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
||||||
<Typography.Title heading={6}>{t['workplace.docs']}</Typography.Title>
|
|
||||||
<Link suppressHydrationWarning>{t['workplace.seeMore']}</Link>
|
|
||||||
</div>
|
|
||||||
<div className={styles.docs}>
|
|
||||||
{Object.entries(links).map(([key, value]) => (
|
|
||||||
<Link className={styles.link} key={key} href={value} target="_blank" suppressHydrationWarning>
|
|
||||||
{t[`workplace.${key}`]}
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default QuickOperation;
|
|
||||||
@ -1,115 +0,0 @@
|
|||||||
import React, { useState, useEffect, useCallback } from 'react';
|
|
||||||
import { Link, Card, Radio, Table, Typography } from '@arco-design/web-react';
|
|
||||||
import { IconCaretDown, IconCaretUp } from '@arco-design/web-react/icon';
|
|
||||||
import axios from 'axios';
|
|
||||||
import useLocale from '@/utils/useLocale';
|
|
||||||
import locale from './locale';
|
|
||||||
import styles from './style/popular-contents.module.less';
|
|
||||||
|
|
||||||
function PopularContent() {
|
|
||||||
const t = useLocale(locale);
|
|
||||||
const [type, setType] = useState(0);
|
|
||||||
const [data, setData] = useState([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [page, setPage] = useState(1);
|
|
||||||
const [total, setTotal] = useState(0);
|
|
||||||
|
|
||||||
const fetchData = useCallback(() => {
|
|
||||||
setLoading(true);
|
|
||||||
axios
|
|
||||||
.get(
|
|
||||||
`/api/workplace/popular-contents?page=${page}&pageSize=5&category=${type}`
|
|
||||||
)
|
|
||||||
.then((res) => {
|
|
||||||
setData(res.data.list);
|
|
||||||
setTotal(res.data.total);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
setLoading(false);
|
|
||||||
});
|
|
||||||
}, [page, type]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchData();
|
|
||||||
}, [page, fetchData]);
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: t['workplace.column.rank'],
|
|
||||||
dataIndex: 'rank',
|
|
||||||
width: 65,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t['workplace.column.title'],
|
|
||||||
dataIndex: 'title',
|
|
||||||
render: (x) => (
|
|
||||||
<Typography.Paragraph style={{ margin: 0 }} ellipsis>
|
|
||||||
{x}
|
|
||||||
</Typography.Paragraph>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t['workplace.column.pv'],
|
|
||||||
dataIndex: 'pv',
|
|
||||||
width: 100,
|
|
||||||
render: (text) => {
|
|
||||||
return `${text / 1000}k`;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t['workplace.column.increase'],
|
|
||||||
dataIndex: 'increase',
|
|
||||||
sorter: (a, b) => a.increase - b.increase,
|
|
||||||
width: 110,
|
|
||||||
render: (text) => {
|
|
||||||
return (
|
|
||||||
<span>
|
|
||||||
{`${(text * 100).toFixed(2)}%`}
|
|
||||||
<span className={styles['symbol']}>
|
|
||||||
{text < 0 ? (
|
|
||||||
<IconCaretUp style={{ color: 'rgb(var(--green-6))' }} />
|
|
||||||
) : (
|
|
||||||
<IconCaretDown style={{ color: 'rgb(var(--red-6))' }} />
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
||||||
<Typography.Title heading={6}>
|
|
||||||
{t['workplace.popularContents']}
|
|
||||||
</Typography.Title>
|
|
||||||
<Link suppressHydrationWarning>{t['workplace.seeMore']}</Link>
|
|
||||||
</div>
|
|
||||||
<Radio.Group
|
|
||||||
type="button"
|
|
||||||
value={type}
|
|
||||||
onChange={setType}
|
|
||||||
options={[
|
|
||||||
{ label: t['workplace.text'], value: 0 },
|
|
||||||
{ label: t['workplace.image'], value: 1 },
|
|
||||||
{ label: t['workplace.video'], value: 2 },
|
|
||||||
]}
|
|
||||||
style={{ marginBottom: 16 }}
|
|
||||||
/>
|
|
||||||
<Table
|
|
||||||
rowKey="rank"
|
|
||||||
columns={columns}
|
|
||||||
data={data}
|
|
||||||
loading={loading}
|
|
||||||
tableLayoutFixed
|
|
||||||
onChange={(pagination) => {
|
|
||||||
setPage(pagination.current);
|
|
||||||
}}
|
|
||||||
pagination={{ total, current: page, pageSize: 5, simple: true }}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default PopularContent;
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Loading…
Reference in New Issue