Add v2 comments support and align APIs

front/src/App.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { tokens } from '@fluentui/react-components';
+import { tokens, useToastController, Toast, ToastTitle } from '@fluentui/react-components';
 import { MainLayout } from './layouts/MainLayout';
 import About from './components/About';
 import CreatePost from './components/CreatePost';
@@ -11,6 +11,8 @@ import './App.css';
 
 const Home: React.FC = () => {
   const { refreshTrigger } = useLayout();
+  const { toasterId } = useLayout();
+  const { dispatchToast } = useToastController(toasterId);
   const [articles, setArticles] = useState<Article[]>([]);
   const [page, setPage] = useState(1);
   const [loading, setLoading] = useState(false);
@@ -81,6 +83,12 @@ const Home: React.FC = () => {
         setLoading(false);
         if (refreshing) {
           setRefreshing(false);
+          dispatchToast(
+            <Toast>
+              <ToastTitle>刷新成功</ToastTitle>
+            </Toast>,
+            { intent: 'success' }
+          );
         }
       }
     };