fix: 修复移动端显示

.gitignore

@@ -1,26 +1,26 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-analysis-chart.html
-package-lock.json
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+analysis-chart.html
+package-lock.json

src/components/ErrorBoundary/index.tsx

@@ -140,4 +140,4 @@ function useErrorHandler<P = Error>(givenError?: P | null | undefined): React.Di
   return setError;
 }
 
-export { ErrorBoundary, withErrorBoundary, useErrorHandler };
+export { ErrorBoundary, useErrorHandler, withErrorBoundary };

src/components/LoginLog/index.tsx

@@ -2,7 +2,7 @@ import { findAccountLogs } from "@/api/caravan/Login";
 import { LoginFrequencyChart } from "@/components/Echarts";
 import { Table } from "antd";
 import dayjs from "dayjs";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 const LoginLog = () => {
   const columns: any = [
@@ -13,33 +13,35 @@ const LoginLog = () => {
     {
       title: "浏览器版本",
       dataIndex: "bowser",
-      responsive: ["md", "lg", "xl", "xxl"]
+      responsive: ["lg", "xl", "xxl"]
     },
     {
       title: "来源",
       dataIndex: "host",
-      responsive: ["md", "lg", "xl", "xxl"]
+      responsive: ["lg", "xl", "xxl"]
     },
     {
       title: "登录设备",
       dataIndex: "os",
-      responsive: ["md", "lg", "xl", "xxl"]
+      responsive: ["lg", "xl", "xxl"]
     },
     {
       title: "国家",
-      dataIndex: "country"
+      dataIndex: "country",
+      responsive: ["md", "lg", "xl", "xxl"]
     },
     {
       title: "省份",
-      dataIndex: "province"
+      dataIndex: "province",
+      responsive: ["lg", "xl", "xxl"]
     },
     {
       title: "市区",
       dataIndex: "city",
-      responsive: ["md", "lg", "xl", "xxl"]
+      responsive: ["lg", "xl", "xxl"]
     },
     {
-      title: "登陆时间",
+      title: "登录时间",
       dataIndex: "created",
       render: item => {
         return <span>{dayjs(item).format("YYYY-MM-DD HH:mm")}</span>;

src/components/UserInfoCard/index.tsx

@@ -1,16 +1,16 @@
-import StarrySky from "@/components/StarrySky";
-import FineDay from "@/components/FineDay";
+import { getmyuserinfo } from "@/api/caravan/User";
 import AvatarData from "@/components/AvatarData";
+import FineDay from "@/components/FineDay";
+import StarrySky from "@/components/StarrySky";
 import { useEffect, useState } from "react";
-import { getmyuserinfo } from "@/api/caravan/User";
 
-import styles from "./index.module.scss";
-import { Avatar, Button, Card, Col, Divider, Image, Typography, Flex, List, Row, Segmented } from "antd";
-import IconFont from "../IconFont";
-import { MoreOutlined, AntDesignOutlined, MessageOutlined, ShareAltOutlined, WechatOutlined, GithubOutlined, QqOutlined, InstagramOutlined } from "@ant-design/icons";
+import { AntDesignOutlined, GithubOutlined, InstagramOutlined, MessageOutlined, MoreOutlined, QqOutlined, ShareAltOutlined, WechatOutlined } from "@ant-design/icons";
+import { Avatar, Button, Card, Col, Divider, Flex, Image, List, Row, Segmented, Typography } from "antd";
 import Message from "antd/es/message";
 import dayjs from "dayjs";
 import { Link } from "react-router-dom";
+import IconFont from "../IconFont";
+import styles from "./index.module.scss";
 
 const { Text, Title } = Typography;
 
@@ -103,7 +103,7 @@ const UserInfoCard = () => {
         </div>
       </div>
       <Row gutter={[16, 16]}>
-        <Col span={8}>
+        <Col xs={24} sm={24} md={24} lg={8} xl={8} xxl={8}>
           <Flex gap={16} vertical>
             <Card>
               <Flex align="middle" justify="space-evenly">
@@ -128,8 +128,8 @@ const UserInfoCard = () => {
             </Card>
           </Flex>
         </Col>
-        <Col span={16}>
-          <Flex gap={16} vertical>
+        <Col xs={24} sm={24} md={24} lg={16} xl={16} xxl={16}>
+          <Flex gap={24} vertical>
             <Card
               title={
                 <Flex justify={"space-between"} align="center" gap={16}>

src/pages/AnimateCard/index.tsx

@@ -1,7 +1,7 @@
 import "animate.css";
 
-import styles from "./index.module.scss";
 import { Col, Row } from "antd";
+import styles from "./index.module.scss";
 
 const AnimateCard = () => {
   const animateList = [
@@ -128,7 +128,7 @@ const AnimateCard = () => {
       <Row gutter={[12, 12]}>
         {animateList.map(v => {
           return (
-            <Col span={4} onMouseLeave={event => onMouseOut(event)} key={v}>
+            <Col xs={12} sm={12} md={8} lg={4} xl={4} xxl={4} onMouseLeave={event => onMouseOut(event)} key={v}>
               <div data-sorce="1" onMouseEnter={event => onMouseOver(event, v)} className="animateContainer">
                 {v}
               </div>

src/pages/Chart/AreaChart/index.tsx

@@ -1,29 +1,29 @@
-import { Row, Col } from "antd";
 import { BarChart, HomeSenseChart, LineChart, PictorialBarChart, PieChart, ScatterChart, ServerStatusChart } from "@/components/Echarts";
+import { Col, Row } from "antd";
 
 const AreaChart = () => {
   return (
     <div style={{ padding: 6 }}>
       <Row gutter={[12, 12]}>
-        <Col span={8}>
+        <Col xs={24} sm={24} md={12} xl={8} lg={8}>
           <BarChart />
         </Col>
-        <Col span={8}>
+        <Col xs={24} sm={24} md={12} xl={8} lg={8}>
           <LineChart />
         </Col>
-        <Col span={8}>
+        <Col xs={24} sm={24} md={12} xl={8} lg={8}>
           <PieChart />
         </Col>
-        <Col span={8}>
+        <Col xs={24} sm={24} md={12} xl={8} lg={8}>
           <ScatterChart />
         </Col>
-        <Col span={8}>
+        <Col xs={24} sm={24} md={12} xl={8} lg={8}>
           <ServerStatusChart />
         </Col>
-        <Col span={8}>
+        <Col xs={24} sm={24} md={12} xl={8} lg={8}>
           <PictorialBarChart />
         </Col>
-        <Col span={24}>
+        <Col xs={24} sm={24} md={12} xl={8} lg={8}>
           <HomeSenseChart />
         </Col>
       </Row>

src/pages/Workplace/index.tsx

@@ -50,12 +50,12 @@ const Workplace = () => {
         </Col>
       </Row>
       <Row gutter={8}>
-        <Col span={16}>
+        <Col xs={24} sm={24} md={24} lg={16} xl={16} xxl={16}>
           <div className={styles.baseChart}>
             <ChinaChart />
           </div>
         </Col>
-        <Col span={8}>
+        <Col xs={24} sm={24} md={24} lg={8} xl={8} xxl={8}>
           <div className={styles.baseChart}>
             <DataFlowChart />
           </div>