feat: ✨ 首页统计

apps/admin/package.json

@@ -19,12 +19,14 @@
  "ahooks": "^3.7.8",
  "antd": "^5.11.2",
  "antd-style": "^3.6.1",
+ "apis": "workspace:*",
  "axios": "^1.6.2",
  "classnames": "^2.3.2",
  "cropperjs": "^1.6.1",
  "crypto-js": "^4.2.0",
  "dayjs": "^1.11.10",
  "echarts": "^5.4.3",
+ "echarts-for-react": "^3.0.2",
  "file-saver": "^2.0.5",
  "gbeata": "workspace:*",
  "immer": "^10.0.3",
@@ -42,12 +44,11 @@
  "redux": "^4.2.1",
  "redux-persist": "^6.0.0",
  "sortablejs": "^1.15.0",
- "use-immer": "^0.9.0",
- "video-react": "^0.16.0",
- "xlsx": "^0.18.5",
  "store": "workspace:^",
  "ui": "workspace:^",
- "apis": "workspace:*"
+ "use-immer": "^0.9.0",
+ "video-react": "^0.16.0",
+ "xlsx": "^0.18.5"
  },
  "devDependencies": {
  "@babel/core": "^7.23.3",

apps/admin/src/components/BaseChart/index.tsx

@@ -0,0 +1,12 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import ReactECharts from 'echarts-for-react';
+
+export interface ChartsProp {
+ option: any;
+}
+
+const BaseCharts = (prop: ChartsProp) => (
+ <ReactECharts opts={{ renderer: 'svg' }} style={{ height: '100px' }} option={prop} />
+);
+
+export default BaseCharts;

apps/admin/src/components/LazyLoad/src/LazyLoad.tsx

@@ -1,4 +1,3 @@
-import { Spin } from 'antd';
 import { type LazyExoticComponent, type ReactNode, Suspense } from 'react';
 
 import Loading from './Loading';
@@ -8,7 +7,7 @@ import Loading from './Loading';
  * @param {Element} Component 需要访问的组件
  * @returns element
  */
-const LazyLoad = (Component: LazyExoticComponent<any>): ReactNode => (
+const LazyLoad = (Component: LazyExoticComponent<React.FC<{}>>): ReactNode => (
  <Suspense fallback={<Loading />}>
  <Component />
  </Suspense>

apps/admin/src/design/public.style.ts

@@ -1,20 +1,18 @@
 import { createStyles } from 'antd-style';
 
-const useStyles = createStyles(() => {
- return {
- 'span.icon-btn': {
- display: 'flex',
- alignItems: 'center',
- cursor: 'pointer',
- marginLeft: '10px',
- },
- '.ant-upload-drag': {
- height: 'auto',
- },
- 'list-upload': {
- '.ant-upload': { width: '100%' },
- '.ant-btn': { display: 'block', margin: '0 auto 8px' },
- },
- };
-});
+const useStyles = createStyles(() => ({
+ 'span.icon-btn': {
+ display: 'flex',
+ alignItems: 'center',
+ cursor: 'pointer',
+ marginLeft: '10px',
+ },
+ '.ant-upload-drag': {
+ height: 'auto',
+ },
+ 'list-upload': {
+ '.ant-upload': { width: '100%' },
+ '.ant-btn': { display: 'block', margin: '0 auto 8px' },
+ },
+}));
 export default useStyles;

apps/admin/src/router/routes/home.tsx

@@ -1,4 +1,6 @@
-import Home from '@/views/home';
+import { lazy } from 'react';
+
+import { LazyLoad } from '@/components/LazyLoad';
 
 import { LayoutGuard } from '../guard';
 
@@ -18,7 +20,7 @@ const HomeRoute: RouteObject = {
  children: [
  {
  path: '',
- element: <Home />,
+ element: LazyLoad(lazy(() => import('@/views/home'))),
  meta: {
  title: '首页',
  key: 'home',

apps/admin/src/views/home/components/AnalyzeCard.tsx

@@ -0,0 +1,212 @@
+import { Col, Typography } from 'antd';
+import { useTheme } from 'antd-style';
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import CountUp from 'react-countup';
+import { BaseCard } from 'ui';
+
+import SvgIcon from '@/components/SvgIcon';
+
+import ChartsCard from './ChartsCard';
+import useStyles from './styles';
+
+const { Text, Title } = Typography;
+
+export const AnalyzeCard = () => {
+ const { styles } = useStyles();
+ const token = useTheme();
+ const [loading, setLoading] = useState(true);
+ useEffect(() => {
+ setTimeout(() => {
+ setLoading(false);
+ }, 1500);
+ }, []);
+ return (
+ <>
+ <Col span={8}>
+ <BaseCard loading={loading}>
+ <div className={classNames(styles.flex)}>
+ <div className='card-left'>
+ <Text strong>活跃用户数量</Text>
+ <Title className='count' level={5} style={{ margin: '8px 0' }}>
+ <SvgIcon size={20} style={{ marginRight: '4px', color: token.colorPrimary }} name='solar'></SvgIcon>
+ +2.6%
+ </Title>
+ <Title level={2} style={{ margin: 0 }}>
+ <CountUp start={0} end={122} duration={3} />
+ </Title>
+ </div>
+ <div className='card-right'>
+ <ChartsCard
+ loading={loading}
+ options={{
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ grid: {
+ left: '30%',
+ right: '0%',
+ bottom: '0%',
+ top: '40%',
+ containLabel: true,
+ },
+ xAxis: [
+ {
+ show: false,
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ },
+ ],
+ yAxis: [
+ {
+ show: false,
+ type: 'value',
+ },
+ ],
+ series: [
+ {
+ name: 'Direct',
+ type: 'bar',
+ barWidth: '40%',
+ itemStyle: {
+ color: token.colorPrimary,
+ },
+ data: [10, 52, 200, 334, 390, 330, 220],
+ },
+ ],
+ }}
+ ></ChartsCard>
+ </div>
+ </div>
+ </BaseCard>
+ </Col>
+ <Col span={8}>
+ <BaseCard loading={loading}>
+ <div className={classNames(styles.flex)}>
+ <div className='card-left'>
+ <Text strong>总下载量</Text>
+ <Title className='count' level={5} style={{ margin: '8px 0' }}>
+ <SvgIcon
+ size={20}
+ style={{ marginRight: '4px', color: token.colorError, transform: 'rotate(180deg)' }}
+ name='solar'
+ ></SvgIcon>
+ -2.6%
+ </Title>
+ <Title level={2} style={{ margin: 0 }}>
+ <CountUp start={0} end={1322} duration={3} />
+ </Title>
+ </div>
+ <div className='card-right'>
+ <ChartsCard
+ loading={loading}
+ options={{
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ grid: {
+ left: '30%',
+ right: '0%',
+ bottom: '0%',
+ top: '40%',
+ containLabel: true,
+ },
+ xAxis: [
+ {
+ show: false,
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ },
+ ],
+ yAxis: [
+ {
+ show: false,
+ type: 'value',
+ },
+ ],
+ series: [
+ {
+ name: 'Direct',
+ type: 'bar',
+ barWidth: '40%',
+ itemStyle: {
+ color: token.colorPrimary,
+ },
+ data: [200, 334, 390, 30, 120, 132, 220],
+ },
+ ],
+ }}
+ ></ChartsCard>
+ </div>
+ </div>
+ </BaseCard>
+ </Col>
+ <Col span={8}>
+ <BaseCard loading={loading}>
+ <div className={classNames(styles.flex)}>
+ <div className='card-left'>
+ <Text strong>总安装数量</Text>
+ <Title className='count' level={5} style={{ margin: '8px 0' }}>
+ <SvgIcon size={20} style={{ marginRight: '4px', color: token.colorPrimary }} name='solar'></SvgIcon>
+ +5.6%
+ </Title>
+ <Title level={2} style={{ margin: 0 }}>
+ <CountUp start={0} end={12322} duration={3} />
+ </Title>
+ </div>
+ <div className='card-right'>
+ <ChartsCard
+ loading={loading}
+ options={{
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ grid: {
+ left: '30%',
+ right: '0%',
+ bottom: '0%',
+ top: '40%',
+ containLabel: true,
+ },
+ xAxis: [
+ {
+ show: false,
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ },
+ ],
+ yAxis: [
+ {
+ show: false,
+ type: 'value',
+ },
+ ],
+ series: [
+ {
+ name: 'Direct',
+ type: 'bar',
+ barWidth: '40%',
+ itemStyle: {
+ color: token.colorPrimary,
+ },
+ data: [10, 52, 100, 34, 90, 100, 120],
+ },
+ ],
+ }}
+ ></ChartsCard>
+ </div>
+ </div>
+ </BaseCard>
+ </Col>
+ </>
+ );
+};

apps/admin/src/views/home/components/ChartsCard.tsx

@@ -1,32 +1,25 @@
-import { Card } from 'antd';
-
 import { useECharts } from '@/hooks/web/useECharts';
 
 import type { EChartsOption } from 'echarts';
 import type { FC } from 'react';
 
-interface propState {
- loading: boolean
- options: EChartsOption
- height: number
+interface PropState {
+ loading: boolean;
+ options: EChartsOption;
+ height?: number;
 }
 
-const ChartsCard: FC<propState> = ({ loading, options, height }) => {
+const ChartsCard: FC<PropState> = ({ loading, options, height = '100%' }) => {
  const { chartRef } = useECharts(options, loading);
 
  return (
- <Card
- loading={loading}
- bordered={false}
- >
- <div
- ref={chartRef}
- style={{
- width: '100%',
- height: `${height}px`,
- }}
- />
- </Card>
+ <div
+ ref={chartRef}
+ style={{
+ width: '100%',
+ height,
+ }}
+ />
  );
 };
 

apps/admin/src/views/home/components/CommitTable.tsx

@@ -3,9 +3,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 // 晚点处理吧，类型导出有问题i
 import dayjs from 'dayjs';
-import { type GSearchTableField, GSearchTable } from 'gbeata';
+import { GSearchTable } from 'gbeata';
 import { memo, useEffect, useMemo, useState } from 'react';
 
+import type { GSearchTableField } from 'gbeata/lib/GSearchTable/g-search-table';
+
 function CommitTable() {
  const [data, setData] = useState([]);