修改首页echarts样式

src/pages/index/index.less

@@ -0,0 +1,7 @@
+.flex{
+  display: flex;
+  justify-content: space-around;
+}
+.card{
+  margin-bottom: 30px;
+}

src/pages/index/index.tsx

@@ -1,10 +1,191 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import styles from './index.less';
+import ReactECharts from 'echarts-for-react';
+import * as echarts from 'echarts'; // 用于获取 echarts 实例
+import {
+  getNoticeCount,
+  getRegulationsCount,
+  getCustomerQandaCount,
+  getLinksCount,
+} from '@/servers/api';
+import { Card, Row, Col } from 'antd';
+
 const IndexPage: React.FC = () => {
+  const [noticeCount, setNoticeCount] = useState({ publishCount: 0, topCount: 0, totalCount: 0 });
+  const [regulationsCount, setRegulationsCount] = useState({
+    publishCount: 0,
+    topCount: 0,
+    totalCount: 0,
+  });
+  const [customerQandaCount, setCustomerQandaCount] = useState({
+    noticeCount: 0,
+    resolvedCount: 0,
+    totalCount: 0,
+  });
+  const [linksCount, setLinksCount] = useState({ publishCount: 0, totalCount: 0 });
+
+  // 创建 4 个图表的 ref
+  const regChartRef = useRef<any>(null);
+  const noticeChartRef = useRef<any>(null);
+  const qaChartRef = useRef<any>(null);
+  const linkChartRef = useRef<any>(null);
+
+  const defaultColors = [
+    '#5470C6', '#73C0DE', '#3BA272',
+    '#FC8452', '#9A60B4', '#EA7CCC'
+  ];
+
+  useEffect(() => {
+    Promise.all([
+      getRegulationsCount(),
+      getNoticeCount(),
+      getCustomerQandaCount(),
+      getLinksCount(),
+    ]).then(([reg, notice, qa, link]) => {
+      setRegulationsCount(reg.data);
+      setNoticeCount(notice.data);
+      setCustomerQandaCount(qa.data);
+      setLinksCount(link.data);
+
+      // 强制 resize 所有图表
+      setTimeout(() => {
+        [regChartRef, noticeChartRef, qaChartRef, linkChartRef].forEach((ref) => {
+          if (ref.current) {
+            ref.current.getEchartsInstance().resize();
+          }
+        });
+      }, 0);
+    });
+  }, []);
+
+  const getSingleChartOption = (title: string, labels: string[], values: number[]) => ({
+    title: {
+      text: title,
+      left: 'center',
+      textStyle: { fontSize: 16, fontWeight: 'bold' },
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '10%',
+      top: 50,
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLine: { lineStyle: { color: '#ccc' } },
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { type: 'dashed' } },
+    },
+    series: [
+      {
+        type: 'bar',
+        barWidth: '30%',
+        data: values.map((val, idx) => ({
+          value: val,
+          itemStyle: {
+            color: defaultColors[idx % defaultColors.length],
+            borderRadius: [6, 6, 0, 0],
+          },
+        })),
+        label: {
+          show: true,
+          position: 'top',
+        },
+        emphasis: {
+          itemStyle: { opacity: 0.9 },
+        },
+      },
+    ],
+    animationDuration: 800,
+  });
 
   return (
     <div className="common-container">
-      首页
+      <Row gutter={30}>
+        <Col span={12}>
+          <Card title="政策法规数量" className={styles.card}>
+            <ReactECharts
+              ref={regChartRef}
+              option={getSingleChartOption(
+                '政策法规',
+                ['发布', '置顶', '总数'],
+                [
+                  regulationsCount.publishCount,
+                  regulationsCount.topCount,
+                  regulationsCount.totalCount,
+                ]
+              )}
+              notMerge={true}
+              lazyUpdate={true}
+              style={{ height: 300, width: '100%', maxWidth: '100%' }}
+            />
+          </Card>
+        </Col>
+        <Col span={12}>
+          <Card title="通知中心数量" className={styles.card}>
+            <ReactECharts
+              ref={noticeChartRef}
+              option={getSingleChartOption(
+                '通知中心',
+                ['发布', '置顶', '总数'],
+                [
+                  noticeCount.publishCount,
+                  noticeCount.topCount,
+                  noticeCount.totalCount,
+                ]
+              )}
+              notMerge={true}
+              lazyUpdate={true}
+              style={{ height: 300, width: '100%', maxWidth: '100%' }}
+            />
+          </Card>
+        </Col>
+        <Col span={12}>
+          <Card title="用户提问数量" className={styles.card}>
+            <ReactECharts
+              ref={qaChartRef}
+              option={getSingleChartOption(
+                '用户提问',
+                ['发布数', '已回答数', '总数'],
+                [
+                  customerQandaCount.noticeCount,
+                  customerQandaCount.resolvedCount,
+                  customerQandaCount.totalCount,
+                ]
+              )}
+              notMerge={true}
+              lazyUpdate={true}
+              style={{ height: 300, width: '100%', maxWidth: '100%' }}
+            />
+          </Card>
+        </Col>
+        <Col span={12}>
+          <Card title="友情链接数量" className={styles.card}>
+            <ReactECharts
+              ref={linkChartRef}
+              option={getSingleChartOption(
+                '友情链接',
+                ['发布', '总数'],
+                [
+                  linksCount.publishCount,
+                  linksCount.totalCount,
+                ]
+              )}
+              notMerge={true}
+              lazyUpdate={true}
+              style={{ height: 300, width: '100%', maxWidth: '100%' }}
+            />
+          </Card>
+        </Col>
+      </Row>
     </div>
   );
 };

src/pages/login/login.tsx

@@ -101,11 +101,11 @@ const LoginPage: React.FC<PageProps> = ({ user, dispatch }) => {
   return (
     <div className="login-page">
       <div className="login-container">
-        <div className="back-home">
+       {/*<div className="back-home">
           <a onClick={() => history.push('/index')}>
             <HomeOutlined /> {intl.formatMessage({ id: 'login.back.home' })}
           </a>
-        </div>
+        </div>*/}
 
         <div className="login-title">{intl.formatMessage({ id: 'login.title' })}</div>
 

src/servers/api/index.ts

@@ -0,0 +1,39 @@
+// 首页接口
+import request from '@/utils/request';
+/*
+通知中心数量首页查询
+/backendHomepage/getNoticeCount get
+
+政策法规数量首页查询
+/backendHomepage/getRegulationsCount
+
+用户提问数量查询
+/backendHomepage/getCustomerQandaCount
+
+友情链接数量查询
+/backendHomepage/getLinksCount
+*/
+
+export async function getNoticeCount() {
+  return request(`/backendHomepage/getNoticeCount`, {
+    method: 'GET',
+  });
+}
+
+export async function getRegulationsCount() {
+  return request(`/backendHomepage/getRegulationsCount`, {
+    method: 'GET',
+  });
+}
+
+export async function getCustomerQandaCount() {
+  return request(`/backendHomepage/getCustomerQandaCount`, {
+    method: 'GET',
+  });
+}
+
+export async function getLinksCount() {
+  return request(`/backendHomepage/getLinksCount`, {
+    method: 'GET',
+  });
+}