feat(user-center): enhance loading fallback and avatar display

- Update HydrateFallback to show a refresh button after 10 seconds of loading
- Improve UserCenter avatar by using username/name as fallback when image is missing
- Add /dev route pointing to HydrateFallback component

src/components/HydrateFallback.tsx

@@ -1,9 +1,20 @@
-import { Spin } from "antd";
+import { Button, Flex, Spin } from "antd";
+import { useEffect, useState } from "react";
 
 export function HydrateFallback() {
+  const [tooLongTime, setTooLongTime] = useState(false);
+  useEffect(() => {
+    const id = setTimeout(() => {
+      setTooLongTime(true);
+    }, 1000 * 10);
+    return () => clearTimeout(id);
+  }, []);
   return (
-    <Spin spinning>
+    <Flex gap={24} vertical align="center" justify="center" style={{ height: '100vh' }}>
-      <div style={{ height: '100vh' }} />
+      <Spin spinning />
-    </Spin>
+      {tooLongTime && (
+        <Button type="link" onClick={() => window.location.reload()}>等的太久了，刷新试试？</Button>
+      )}
+    </Flex>
   );
 }

src/page/UserCenter.tsx

@@ -80,7 +80,9 @@ export const UserCenter = () => {
     <>
       <ChangeBackground url={user?.picture ?? ''} />
       <Flex className="app" gap={12} vertical align="center" style={{ maxWidth: 600 }}>
-        <Avatar size={128} src={user?.picture ?? user?.name} />
+        <Avatar size={128} src={user?.picture} style={{ background: '#f56a00' }}>
+          {(user?.username || user?.name)}
+        </Avatar>
         <Flex>
           <Typography.Text>{user?.username ?? user?.name ?? '未设置'}</Typography.Text>
         </Flex>

src/routes.tsx

@@ -91,4 +91,8 @@ export const route = createBrowserRouter([
       },
     ],
   },
+  {
+    path: '/dev',
+    Component: HydrateFallback,
+  }
 ]);