feat: wrap message by fluent ui toast

frontend/src/main.tsx

@@ -1,22 +1,25 @@
 import React from 'react'
 import {createRoot} from 'react-dom/client'
 import './style.css'
-import { FluentProvider, webLightTheme } from '@fluentui/react-components';
-import {createBrowserRouter,RouterProvider} from "react-router-dom";
+import {FluentProvider, webLightTheme} from '@fluentui/react-components';
+import {createBrowserRouter, RouterProvider} from "react-router-dom";
 import Home from "./page/home/home";
 import Connection from "./page/connection/connection";
+import {ToastProvider} from "./message";
 
 const container = document.getElementById('root')
 
 const root = createRoot(container!)
 
 const router = createBrowserRouter([
-    {path:'/', element: <Home />},
-    {path:'/connection', element: <Connection />},
+    {path: '/', element: <Home/>},
+    {path: '/connection', element: <Connection/>},
 ])
 
 root.render(
     <FluentProvider theme={webLightTheme}>
-        <RouterProvider router={router} />
+        <ToastProvider>
+            <RouterProvider router={router}/>
+        </ToastProvider>
     </FluentProvider>,
 );