From 8ae3280bbd5d6708ca6e8c4c41fb32c2081fecbc Mon Sep 17 00:00:00 2001
From: zyh <zyh320888@vip.qq.com>
Date: Tue, 22 Oct 2024 05:54:15 +0000
Subject: [PATCH] =?UTF-8?q?feat(Avatar):=20=E4=BC=98=E5=8C=96Avatar?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9B=BE=E7=89=87=E5=8A=A0=E8=BD=BD=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=EF=BC=8C=E5=A2=9E=E5=BC=BA=E7=94=A8=E6=88=B7=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/ui/Avatar.tsx |  6 +++---
 app/root.tsx                 | 21 ++++++++++++++++++---
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/components/ui/Avatar.tsx b/app/components/ui/Avatar.tsx
index ded699e..a6a5d2b 100644
--- a/app/components/ui/Avatar.tsx
+++ b/app/components/ui/Avatar.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 interface AvatarProps {
   src: string;
@@ -7,13 +7,13 @@ interface AvatarProps {
 }
 
 export function Avatar({ src, alt, className = '' }: AvatarProps) {
-  const [imgSrc, setImgSrc] = useState(src);
+  const [imgSrc, setImgSrc] = useState(src.startsWith('http') ? src : `${window.ENV.OSS_HOST}${src}`);
   const [error, setError] = useState(false);
 
   const handleError = () => {
     setError(true);
     // 设置一个默认的头像 URL
-    setImgSrc('/avatars/default-avatar.png');
+    setImgSrc(`${window.ENV.OSS_HOST}/avatars/default-avatar.png`);
   };
 
   return (
diff --git a/app/root.tsx b/app/root.tsx
index 31eb387..c070e02 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,11 +1,13 @@
 import { useStore } from '@nanostores/react';
-import type { LinksFunction } from '@remix-run/cloudflare';
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
+import type { LinksFunction, LoaderFunction } from '@remix-run/cloudflare';
+import { json } from '@remix-run/cloudflare';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react';
 import tailwindReset from '@unocss/reset/tailwind-compat.css?url';
 import { themeStore } from './lib/stores/theme';
 import { stripIndents } from './utils/stripIndent';
 import { createHead } from 'remix-island';
 import { useEffect } from 'react';
+import { env } from 'node:process';
 
 import reactToastifyStyles from 'react-toastify/dist/ReactToastify.css?url';
 import globalStyles from './styles/index.scss?url';
@@ -62,9 +64,17 @@ export const Head = createHead(() => (
   </>
 ));
 
+export const loader: LoaderFunction = async () => {
+  return json({
+    ENV: {
+      OSS_HOST: env.VITE_OSS_BASE_URL,
+    },
+  });
+};
+
 export function Layout({ children }: { children: React.ReactNode }) {
   const theme = useStore(themeStore);
-
+  const data = useLoaderData<typeof loader>() as { ENV: { OSS_HOST: string } };
   useEffect(() => {
     document.querySelector('html')?.setAttribute('data-theme', theme);
   }, [theme]);
@@ -73,6 +83,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
     <>
       {children}
       <ScrollRestoration />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `window.ENV = ${JSON.stringify(data.ENV)}`,
+        }}
+      />
       <Scripts />
     </>
   );