feat: integrate SEO hook for dynamic metadata management

- Removed hardcoded canonical link from index.html.
- Implemented useSEO hook in layout.tsx to dynamically update SEO metadata including title, description, and canonical URL based on the current route.
- Added new use-seo.ts file containing the SEO hook logic for improved search engine optimization.

src/layout.tsx

@@ -4,20 +4,26 @@ import { Outlet } from "react-router-dom";
 import { ThemeProvider } from "@/components/theme/provider"
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
 import { AppSidebar } from "@/components/sidebar";
+import { useSEO } from "@/hooks/use-seo";
 
-export const Layout: FC = () => (
-  <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-    <SidebarProvider>
-      <AppSidebar />
-      <div className="p-4 flex flex-col w-full h-[100vh] overflow-hidden">
-        <nav className="flex items-center justify-between">
-          <SidebarTrigger className="size-10" />
-          <div role="actions" />
-        </nav>
-        <main className="flex-1 overflow-auto p-4 overflow-hidden">
-          <Outlet />
-        </main>
-      </div>
-    </SidebarProvider>
-  </ThemeProvider>
-);
+export const Layout: FC = () => {
+  // 使用 SEO hook 自动更新 canonical URL 和其他 SEO 元数据
+  useSEO();
+
+  return (
+    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <SidebarProvider>
+        <AppSidebar />
+        <div className="p-4 flex flex-col w-full h-[100vh] overflow-hidden">
+          <nav className="flex items-center justify-between">
+            <SidebarTrigger className="size-10" />
+            <div role="actions" />
+          </nav>
+          <main className="flex-1 overflow-auto p-4 overflow-hidden">
+            <Outlet />
+          </main>
+        </div>
+      </SidebarProvider>
+    </ThemeProvider>
+  );
+};