feat: 添加自定义头像功能

- 在 .env.template 中添加 HEADER_LOGO_URL 配置项 - 在 access.ts 中添加 headerLogoUrl 状态管理 - 在 layout.tsx 中添加头像的 favicon 支持 - 更新 config 相关文件，支持 HEADER_LOGO_URL 配置 - 修改 sidebar.tsx，支持自定义头像显示
kiritoko1029 · Oct 29, 2024 · bb21c0a · bb21c0a
1 parent 0147c65
commit bb21c0a
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 13 deletions.
diff --git a/.env.template b/.env.template
@@ -73,3 +73,6 @@ SIDEBAR_TITLE=
 
 ### (optional)
 HITOKOTO_URL=
+
+###(optional)
+HEADER_LOGO_URL=
diff --git a/app/api/config/route.ts b/app/api/config/route.ts
@@ -17,6 +17,7 @@ const DANGER_CONFIG = {
   defaultModel: serverConfig.defaultModel,
   title: sidebarConfig.title,
   hitokotoUrl: sidebarConfig.hitokotoUrl,
+  headerLogoUrl: sidebarConfig.headerLogoUrl,
 };
 
 declare global {

diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
@@ -162,11 +162,25 @@ export function SideBarContainer(props: {
 export function SideBarHeader(props: {
   title?: string | React.ReactNode;
   subTitle?: string;
-  logo?: React.ReactNode;
+  logo?: React.ReactNode | string;
   children?: React.ReactNode;
   shouldNarrow?: boolean;
 }) {
   const { title, subTitle, logo, children, shouldNarrow } = props;
+  let logoComp;
+  if (typeof logo === "string") {
+    logoComp = (
+      <img
+        className={styles["sidebar-logo"] + " no-dark"}
+        style={{ width: "45px" }}
+        src={logo}
+      ></img>
+    );
+  } else {
+    logoComp = (
+      <div className={styles["sidebar-logo"] + " no-dark"}>{logo}</div>
+    );
+  }
   return (
     <Fragment>
       <div
@@ -181,7 +195,7 @@ export function SideBarHeader(props: {
           </div>
           <SubTitle />
         </div>
-        <div className={styles["sidebar-logo"] + " no-dark"}>{logo}</div>
+        {logoComp}
       </div>
       {children}
     </Fragment>
@@ -256,7 +270,7 @@ export function SideBar(props: { className?: string }) {
   const navigate = useNavigate();
   const config = useAppConfig();
   const chatStore = useChatStore();
-  const { title } = useAccessStore();
+  const { title, headerLogoUrl } = useAccessStore();
   return (
     <SideBarContainer
       onDragStart={onDragStart}
@@ -266,7 +280,7 @@ export function SideBar(props: { className?: string }) {
       <SideBarHeader
         title={title}
         subTitle=""
-        logo={<ChatGptIcon />}
+        logo={headerLogoUrl ?? <ChatGptIcon />}
         shouldNarrow={shouldNarrow}
       >
         <div className={styles["sidebar-header-bar"]}>

diff --git a/app/config/server.ts b/app/config/server.ts
@@ -79,6 +79,7 @@ declare global {
       DEFAULT_INPUT_TEMPLATE?: string;
       HITOKOTO_URL?: string;
       SIDEBAR_TITLE?: string;
+      HEADER_LOGO_URL?: string;
     }
   }
 }
@@ -115,6 +116,7 @@ export const getSidebarConfig = () => {
   return {
     title: process.env.SIDEBAR_TITLE ?? "Next Web",
     hitokotoUrl: process.env.HITOKOTO_URL ?? "https://v1.hitokoto.cn",
+    headerLogoUrl: process.env.HEADER_LOGO_URL ?? "",
   };
 };
 export const getServerSideConfig = () => {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -5,7 +5,7 @@ import "./styles/highlight.scss";
 import { getClientConfig } from "./config/client";
 import type { Metadata, Viewport } from "next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
-import { getServerSideConfig } from "./config/server";
+import { getServerSideConfig, getSidebarConfig } from "./config/server";
 import { GoogleTagManager, GoogleAnalytics } from "@next/third-parties/google";
 const serverConfig = getServerSideConfig();
 
@@ -33,6 +33,10 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
+  const { headerLogoUrl } = getSidebarConfig();
+  let favicon;
+  if (headerLogoUrl !== "") favicon = <link rel="icon" href={headerLogoUrl} />;
+  else favicon = <link rel="icon" href="/favicon.ico" />;
   return (
     <html lang="en">
       <head>
@@ -41,6 +45,7 @@ export default function RootLayout({
           name="viewport"
           content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
         />
+        {favicon}
         <link
           rel="manifest"
           href="/site.webmanifest"

diff --git a/app/store/access.ts b/app/store/access.ts
@@ -118,6 +118,7 @@ const DEFAULT_ACCESS_STATE = {
   defaultModel: "",
   title: "",
   hitokotoUrl: "",
+  headerLogoUrl: "",
   // tts config
   edgeTTSVoiceName: "zh-CN-YunxiNeural",
 };
@@ -126,14 +127,6 @@ export const useAccessStore = createPersistStore(
   { ...DEFAULT_ACCESS_STATE },
 
   (set, get) => ({
-    setSideBarTitle() {
-      this.fetch();
-      return get().title;
-    },
-    setHitokotoUrl() {
-      this.fetch();
-      return get().hitokotoUrl;
-    },
     enabledAccessControl() {
       this.fetch();