antd组件初步按需加载以减小体积:zap:

src/Components/Asider/Asider.tsx

@@ -1,5 +1,6 @@
 import { MessageOutlined, TeamOutlined, UserOutlined } from '@ant-design/icons';
-import { Avatar, Badge } from 'antd';
+import Avatar from 'antd/lib/avatar';
+import Badge from 'antd/lib/badge';
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import { decodeJWT } from 'Utils/Global';

src/Components/ChatComponent/ChatMainComponent/ChatInput/ChatInput.tsx

@@ -5,7 +5,9 @@ import {
 	SmileOutlined,
 	WhatsAppOutlined,
 } from '@ant-design/icons';
-import { Button, Modal, Popover } from 'antd';
+import Button from 'antd/lib/button';
+import Modal from 'antd/lib/modal';
+import Popover from 'antd/lib/popover';
 import { ChatRTC } from 'Components/ChatComponent/ChatRTC';
 import { ChatRTCContext } from 'Components/Chats/Chats';
 import { globalMessage } from 'Components/GlobalMessage/GlobalMessage';

src/Components/ChatComponent/ChatMainComponent/ChatMainComponent.tsx

@@ -1,4 +1,5 @@
-import { Dropdown, Menu } from 'antd';
+import Dropdown from 'antd/lib/dropdown';
+import Menu from 'antd/lib/menu';
 import classNames from 'classnames';
 import { ChatRTCContext } from 'Components/Chats/Chats';
 import { globalMessage } from 'Components/GlobalMessage/GlobalMessage';

src/Components/ChatComponent/ChatMainComponent/ChatMessages/ChatMessages.tsx

@@ -1,5 +1,6 @@
 import { HistoryOutlined } from '@ant-design/icons';
-import { Avatar, Button } from 'antd';
+import Avatar from 'antd/lib/avatar';
+import Button from 'antd/lib/button';
 import classNames from 'classnames';
 import { globalMessage } from 'Components/GlobalMessage/GlobalMessage';
 import React, { useEffect, useRef, useState } from 'react';

src/Components/ChatComponent/ChatRTC.tsx

@@ -4,7 +4,7 @@ import {
 	CloseOutlined,
 	ExclamationCircleOutlined,
 } from '@ant-design/icons';
-import { Modal } from 'antd';
+import Modal from 'antd/lib/modal';
 import { globalMessage } from 'Components/GlobalMessage/GlobalMessage';
 import { EventEmitter } from 'events';
 import React from 'react';

src/Components/ChatComponent/FriendBubble.tsx

@@ -1,4 +1,5 @@
-import { Avatar, Badge } from 'antd';
+import Avatar from 'antd/lib/avatar';
+import Badge from 'antd/lib/badge';
 import React, { CSSProperties, useEffect, useState } from 'react';
 import invokeSocket from 'Utils/ChatSocket/ChatSocket';
 import { ChatWebSocketType } from 'Utils/Constraints';

src/Components/Chats/Chats.tsx

@@ -5,18 +5,16 @@ import {
 	SearchOutlined,
 	UserAddOutlined,
 } from '@ant-design/icons';
-import {
-	Avatar,
-	Badge,
-	Button,
-	Divider,
-	Empty,
-	Input,
-	List,
-	Modal,
-	Segmented,
-	Skeleton,
-} from 'antd';
+import Avatar from 'antd/lib/avatar';
+import Badge from 'antd/lib/badge';
+import Button from 'antd/lib/button';
+import Divider from 'antd/lib/divider';
+import Empty from 'antd/lib/empty';
+import Input from 'antd/lib/input';
+import List from 'antd/lib/list';
+import Modal from 'antd/lib/modal';
+import Segmented from 'antd/lib/segmented';
+import Skeleton from 'antd/lib/skeleton';
 import { ChatMainComponent } from 'Components/ChatComponent/ChatMainComponent/ChatMainComponent';
 import { ChatRTC } from 'Components/ChatComponent/ChatRTC';
 import FriendBubble from 'Components/ChatComponent/FriendBubble';

src/Components/GlobalMessage/GlobalMessage.tsx

@@ -1,12 +1,11 @@
-import { message } from 'antd';
+import message from 'antd/lib/message';
 
 const vh = window.innerHeight / 100;
 
 message.config({
-    maxCount: 2,
-    top: 10 * vh,
-    duration: 1,
+	maxCount: 2,
+	top: 10 * vh,
+	duration: 1,
 });
 
 export { message as globalMessage };
-

src/Components/Meeting/MeetingList/MeetingList.tsx

@@ -7,7 +7,14 @@ import {
 	UserOutlined,
 	VerticalAlignTopOutlined,
 } from '@ant-design/icons';
-import { Button, Checkbox, Divider, Empty, Form, Input, InputNumber, Modal } from 'antd';
+import { InputNumber } from 'antd';
+import Button from 'antd/lib/button';
+import Checkbox from 'antd/lib/checkbox';
+import Divider from 'antd/lib/divider';
+import Empty from 'antd/lib/empty';
+import Form from 'antd/lib/form';
+import Input from 'antd/lib/input';
+import Modal from 'antd/lib/modal';
 import { globalMessage } from 'Components/GlobalMessage/GlobalMessage';
 import React, { useEffect, useState } from 'react';
 import ajax from 'Utils/Axios/Axios';

src/Components/Meeting/MeetingRoom/ToolBar/ToolButton/ToolButton.tsx

@@ -1,19 +1,18 @@
-import React, { ReactNode } from "react";
-
+import React, { ReactNode } from 'react';
 
 interface ToolButtonProps {
-    onClick: React.MouseEventHandler<HTMLDivElement>;
-    title: string;
-    icon: ReactNode;
-    text: string;
+	onClick: React.MouseEventHandler<HTMLDivElement>;
+	title: string;
+	icon: ReactNode;
+	text: string;
 }
 export default function ToolButton(props: ToolButtonProps) {
-    return (
-        <>
-            <div className='mettingRoom_toolButton' onClick={props.onClick} title={props.title}>
-                <div className='mettingRoom_toolButton_icon'>{props.icon}</div>
-                <div className='mettingRoom_toolButton_text'>{props.text}</div>
-            </div>
-        </>
-    );
-}
+	return (
+		<>
+			<div className='mettingRoom_toolButton' onClick={props.onClick} title={props.title}>
+				<div className='mettingRoom_toolButton_icon'>{props.icon}</div>
+				<div className='mettingRoom_toolButton_text'>{props.text}</div>
+			</div>
+		</>
+	);
+}

src/Components/Meeting/MeetingRoom/Topbar/Topbar.tsx

@@ -1,47 +1,48 @@
-import { CopyOutlined, DisconnectOutlined, LeftOutlined } from "@ant-design/icons";
-import { Button, Modal } from "antd";
-import { globalMessage } from "Components/GlobalMessage/GlobalMessage";
-import React, { useRef } from "react";
+import { CopyOutlined, DisconnectOutlined, LeftOutlined } from '@ant-design/icons';
+import Button from 'antd/lib/button';
+import Modal from 'antd/lib/modal';
+import { globalMessage } from 'Components/GlobalMessage/GlobalMessage';
+import React, { useRef } from 'react';
 
 interface TopbarProps {
-    leaveMeeting: Function,
-    meetingId: string
+	leaveMeeting: Function;
+	meetingId: string;
 }
 
 export default function Topbar(props: TopbarProps) {
-    const meetingIdRef = useRef<HTMLSpanElement>(null);
+	const meetingIdRef = useRef<HTMLSpanElement>(null);
 
-    return (
-        <div className='topbar'>
-            <Button
-                type='text'
-                className='btn'
-                onClick={() => {
-                    Modal.confirm({
-                        title: '退出会议',
-                        icon: <DisconnectOutlined />,
-                        content: '您确认要退出会议吗？',
-                        onOk: () => {
-                            props.leaveMeeting();
-                        },
-                    });
-                }}>
-                <LeftOutlined />
-                退出会议
-            </Button>
-            <span ref={meetingIdRef}>{props.meetingId}</span>
-            <Button
-                type='text'
-                id='copyBtn'
-                title='复制会议号'
-                onClick={() => {
-                    const clipBoard = navigator.clipboard;
-                    clipBoard.writeText(props.meetingId).then(() => {
-                        globalMessage.success('会议号复制成功');
-                    });
-                }}>
-                <CopyOutlined />
-            </Button>
-        </div>
-    )
-}
+	return (
+		<div className='topbar'>
+			<Button
+				type='text'
+				className='btn'
+				onClick={() => {
+					Modal.confirm({
+						title: '退出会议',
+						icon: <DisconnectOutlined />,
+						content: '您确认要退出会议吗？',
+						onOk: () => {
+							props.leaveMeeting();
+						},
+					});
+				}}>
+				<LeftOutlined />
+				退出会议
+			</Button>
+			<span ref={meetingIdRef}>{props.meetingId}</span>
+			<Button
+				type='text'
+				id='copyBtn'
+				title='复制会议号'
+				onClick={() => {
+					const clipBoard = navigator.clipboard;
+					clipBoard.writeText(props.meetingId).then(() => {
+						globalMessage.success('会议号复制成功');
+					});
+				}}>
+				<CopyOutlined />
+			</Button>
+		</div>
+	);
+}

src/Components/Setting/About/About.tsx

@@ -1,5 +1,7 @@
 import { CloudSyncOutlined } from '@ant-design/icons';
-import { Button, Image, Progress } from 'antd';
+import Button from 'antd/lib/button';
+import Image from 'antd/lib/image';
+import Progress from 'antd/lib/progress';
 import axios from 'axios';
 import { globalMessage } from 'Components/GlobalMessage/GlobalMessage';
 import React, { useEffect, useMemo, useState } from 'react';

src/Components/Setting/General/General.tsx

@@ -1,5 +1,8 @@
 import { AlertOutlined, LogoutOutlined, QuestionCircleFilled } from '@ant-design/icons';
-import { Button, Checkbox, Modal, Tooltip } from 'antd';
+import Button from 'antd/lib/button';
+import Checkbox from 'antd/lib/checkbox';
+import Modal from 'antd/lib/modal';
+import Tooltip from 'antd/lib/tooltip';
 import React, { useEffect, useState } from 'react';
 import { getMainContent } from 'Utils/Global';
 import { eWindow } from 'Utils/Types';

src/Components/Setting/MediaDevices/AudioDevices.tsx

@@ -1,4 +1,7 @@
-import { Button, Checkbox, Progress, Select } from 'antd';
+import Button from 'antd/lib/button';
+import Checkbox from 'antd/lib/checkbox';
+import Progress from 'antd/lib/progress';
+import Select from 'antd/lib/select';
 import { globalMessage } from 'Components/GlobalMessage/GlobalMessage';
 import React, { useEffect, useRef, useState } from 'react';
 import { DEVICE_TYPE } from 'Utils/Constraints';

src/Components/Setting/MediaDevices/MediaDevices.tsx

@@ -1,5 +1,5 @@
 import { CustomerServiceOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import Button from 'antd/lib/button';
 import { globalMessage } from 'Components/GlobalMessage/GlobalMessage';
 import React, { useEffect, useState } from 'react';
 import { DEVICE_TYPE } from 'Utils/Constraints';

src/Components/Setting/MediaDevices/VideoDevices.tsx

@@ -1,4 +1,5 @@
-import { Button, Select } from 'antd';
+import Button from 'antd/lib/button';
+import Select from 'antd/lib/select';
 import React, { useEffect, useRef, useState } from 'react';
 import { DEVICE_TYPE } from 'Utils/Constraints';
 import eventBus from 'Utils/EventBus/EventBus';

src/Components/Setting/MeetingStatus/MeetingStatus.tsx

@@ -1,32 +1,32 @@
-import { Checkbox } from 'antd';
+import Checkbox from 'antd/lib/checkbox';
 import React, { useState } from 'react';
 
 export default function MeetingStatus() {
-    const [autoOpenMicroPhone, setAutoOpenMicroPhone] = useState(
-        localStorage.getItem('autoOpenMicroPhone') === 'true'
-    );
-    const [autoOpenCamera, setAutoOpenCamera] = useState(
-        localStorage.getItem('autoOpenCamera') === 'true'
-    );
+	const [autoOpenMicroPhone, setAutoOpenMicroPhone] = useState(
+		localStorage.getItem('autoOpenMicroPhone') === 'true'
+	);
+	const [autoOpenCamera, setAutoOpenCamera] = useState(
+		localStorage.getItem('autoOpenCamera') === 'true'
+	);
 
-    return (
-        <>
-            <Checkbox
-                checked={autoOpenMicroPhone}
-                onChange={(e) => {
-                    setAutoOpenMicroPhone(e.target.checked);
-                    localStorage.setItem('autoOpenMicroPhone', `${e.target.checked}`);
-                }}>
-                与会时打开麦克风
-            </Checkbox>
-            <Checkbox
-                checked={autoOpenCamera}
-                onChange={(e) => {
-                    setAutoOpenCamera(e.target.checked);
-                    localStorage.setItem('autoOpenCamera', `${e.target.checked}`);
-                }}>
-                与会时打开摄像头
-            </Checkbox>
-        </>
-    );
+	return (
+		<>
+			<Checkbox
+				checked={autoOpenMicroPhone}
+				onChange={(e) => {
+					setAutoOpenMicroPhone(e.target.checked);
+					localStorage.setItem('autoOpenMicroPhone', `${e.target.checked}`);
+				}}>
+				与会时打开麦克风
+			</Checkbox>
+			<Checkbox
+				checked={autoOpenCamera}
+				onChange={(e) => {
+					setAutoOpenCamera(e.target.checked);
+					localStorage.setItem('autoOpenCamera', `${e.target.checked}`);
+				}}>
+				与会时打开摄像头
+			</Checkbox>
+		</>
+	);
 }

src/Components/Setting/Setting.tsx

@@ -1,5 +1,8 @@
 import { SettingFilled } from '@ant-design/icons';
-import { Anchor, Divider, Modal, Typography } from 'antd';
+import Anchor from 'antd/lib/anchor';
+import Divider from 'antd/lib/divider';
+import Modal from 'antd/lib/modal';
+import Typography from 'antd/lib/typography';
 import React, { useEffect, useState } from 'react';
 import eventBus from 'Utils/EventBus/EventBus';
 import { getMainContent } from 'Utils/Global';

src/Components/UploadAvatar/UploadAvatar.tsx

@@ -1,7 +1,9 @@
 import { CameraOutlined, UserOutlined } from '@ant-design/icons';
-import { Avatar, Button, Image, Upload } from 'antd';
 import ImgCrop from 'antd-img-crop';
-import { UploadChangeParam } from 'antd/lib/upload';
+import Avatar from 'antd/lib/avatar';
+import Button from 'antd/lib/button';
+import Image from 'antd/lib/image';
+import Upload, { UploadChangeParam } from 'antd/lib/upload';
 import { globalMessage } from 'Components/GlobalMessage/GlobalMessage';
 import React, { useState } from 'react';
 import './style.scss';

src/Components/User/User.tsx

@@ -1,5 +1,7 @@
 import { IdcardOutlined, SolutionOutlined } from '@ant-design/icons';
-import { Button, Image, Typography } from 'antd';
+import Button from 'antd/lib/button';
+import Image from 'antd/lib/image';
+import Typography from 'antd/lib/typography';
 import { globalMessage } from 'Components/GlobalMessage/GlobalMessage';
 import UploadAvatar from 'Components/UploadAvatar/UploadAvatar';
 import React, { useEffect, useState } from 'react';

src/Utils/Axios/Axios.ts

@@ -1,5 +1,4 @@
 import axios, { AxiosInstance, AxiosRequestHeaders } from 'axios';
-import store from 'Utils/Store/store';
 
 const instance = axios.create({
 	baseURL: 'http://meeting.aiolia.top:8080/',
@@ -10,11 +9,10 @@ const instance = axios.create({
 instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 // wsInstance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
-store.subscribe(() => {
-	const token = store.getState().authToken;
+export const updateToken = (token: string) => {
 	instance.defaults.headers.common['Authorization'] = token;
 	// wsInstance.defaults.headers.common['Authorization'] = token;
-});
+};
 
 function convertParamsToData(param: object) {
 	const paramArr = [];

src/Utils/Prompt/Prompt.ts

@@ -7,7 +7,7 @@ export const AUDIO_TYPE = {
 export const buildPropmt = function (audioType: string, loop = false) {
 	const audioContext = new AudioContext();
 	let source = audioContext.createBufferSource();
-	const audio = require(`./audios/${audioType}.mp3`);
+	const audio = require(`./audios/${audioType}.aac`);
 
 	let abortController = new AbortController();
 	let abortSignal = abortController.signal;