feat: 添加背景

src/app/chat/Background/index.tsx

@@ -0,0 +1,33 @@
+import { useGlobalStore } from '@/store/global';
+import { useSettingStore } from '@/store/setting';
+
+import { useStyles } from './style';
+
+const Background = () => {
+  const { styles } = useStyles();
+  const backgroundImageUrl = useGlobalStore((s) => s.backgroundImageUrl);
+  const backgroundEffect = useSettingStore((s) => s.config.backgroundEffect);
+
+  if (backgroundImageUrl) {
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          backgroundImage: `url(${backgroundImageUrl})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          width: '100%',
+          height: '100%',
+          zIndex: -1,
+          transition: 'background-image 0.5s ease-in-out',
+        }}
+      ></div>
+    );
+  }
+
+  return backgroundEffect === 'glow' ? <div className={styles.glow}></div> : null;
+};
+
+export default Background;

src/layout/Background/style.ts → src/app/chat/Background/style.ts

@@ -6,7 +6,7 @@ export const useStyles = createStyles(({ css, token }) => ({
     will-change: transform;
 
     position: absolute;
-    top: -250px;
+    top: 250px;
     left: 50%;
     transform: translateX(-50%) scale(1.5);
 

src/app/chat/ChatInfo/BackGround/index.tsx

@@ -0,0 +1,161 @@
+import GridList from '@/components/GridList';
+import { useGlobalStore } from '@/store/global';
+
+interface BackgroundOption {
+  id: string;
+  name: string;
+  thumbnail: string;
+  url: string; // 添加 thumbnail 参数
+}
+
+const TRANSPARENT_ID = 'transparent';
+
+const backgroundOptions: BackgroundOption[] = [
+  {
+    id: TRANSPARENT_ID,
+    name: 'transparent',
+    url: '1920x1080/transparent.jpg',
+    thumbnail: '160x90/transparent.jpg',
+  },
+  {
+    id: 'bedroom-clean',
+    name: 'bedroom clean',
+    url: '1920x1080/bedroom clean.jpg',
+    thumbnail: '160x90/bedroom clean.jpg',
+  },
+  {
+    id: 'bedroom-cyberpunk',
+    name: 'bedroom cyberpunk',
+    url: '1920x1080/bedroom cyberpunk.jpg',
+    thumbnail: '160x90/bedroom cyberpunk.jpg',
+  },
+  {
+    id: 'bedroom-red',
+    name: 'bedroom red',
+    url: '1920x1080/bedroom red.jpg',
+    thumbnail: '160x90/bedroom red.jpg',
+  },
+  {
+    id: 'bedroom-tatami',
+    name: 'bedroom tatami',
+    url: '1920x1080/bedroom tatami.jpg',
+    thumbnail: '160x90/bedroom tatami.jpg',
+  },
+  {
+    id: 'cityscape-medieval-market',
+    name: 'cityscape medieval market',
+    url: '1920x1080/cityscape medieval market.jpg',
+    thumbnail: '160x90/cityscape medieval market.jpg',
+  },
+  {
+    id: 'cityscape-medieval-night',
+    name: 'cityscape medieval night',
+    url: '1920x1080/cityscape medieval night.jpg',
+    thumbnail: '160x90/cityscape medieval night.jpg',
+  },
+  {
+    id: 'cityscape-postapoc',
+    name: 'cityscape postapoc',
+    url: '1920x1080/cityscape postapoc.jpg',
+    thumbnail: '160x90/cityscape postapoc.jpg',
+  },
+  {
+    id: 'forest-treehouse',
+    name: 'forest treehouse fireworks air baloons',
+    url: '1920x1080/forest treehouse.jpg',
+    thumbnail: '160x90/forest treehouse.jpg',
+  },
+  {
+    id: 'japan-classroom-side',
+    name: 'japan classroom side',
+    url: '1920x1080/japan classroom side.jpg',
+    thumbnail: '160x90/japan classroom side.jpg',
+  },
+  {
+    id: 'japan-classroom',
+    name: 'japan classroom',
+    url: '1920x1080/japan classroom.jpg',
+    thumbnail: '160x90/japan classroom.jpg',
+  },
+  {
+    id: 'japan-path-cherry-blossom',
+    name: 'japan path cherry blossom',
+    url: '1920x1080/japan path cherry blossom.jpg',
+    thumbnail: '160x90/japan path cherry blossom.jpg',
+  },
+  {
+    id: 'japan-university',
+    name: 'japan university',
+    url: '1920x1080/japan university.jpg',
+    thumbnail: '160x90/japan university.jpg',
+  },
+  {
+    id: 'landscape-autumn-great-tree',
+    name: 'landscape autumn great tree',
+    url: '1920x1080/landscape autumn great tree.jpg',
+    thumbnail: '160x90/landscape autumn great tree.jpg',
+  },
+  {
+    id: 'landscape-beach-day',
+    name: 'landscape beach day',
+    url: '1920x1080/landscape beach day.png',
+    thumbnail: '160x90/landscape beach day.png',
+  },
+  {
+    id: 'landscape-beach-night',
+    name: 'landscape beach night',
+    url: '1920x1080/landscape beach night.jpg',
+    thumbnail: '160x90/landscape beach night.jpg',
+  },
+  {
+    id: 'landscape-mountain-lake',
+    name: 'landscape mountain lake',
+    url: '1920x1080/landscape mountain lake.jpg',
+    thumbnail: '160x90/landscape mountain lake.jpg',
+  },
+  {
+    id: 'landscape-postapoc',
+    name: 'landscape postapoc',
+    url: '1920x1080/landscape postapoc.jpg',
+    thumbnail: '160x90/landscape postapoc.jpg',
+  },
+  {
+    id: 'landscape-winter-lake-house',
+    name: 'landscape winter lake house',
+    url: '1920x1080/landscape winter lake house.jpg',
+    thumbnail: '160x90/landscape winter lake house.jpg',
+  },
+  { id: 'royal', name: 'royal', url: '1920x1080/royal.jpg', thumbnail: '160x90/royal.jpg' },
+  {
+    id: 'tavern-day',
+    name: 'tavern day',
+    url: '1920x1080/tavern day.jpg',
+    thumbnail: '160x90/tavern day.jpg',
+  },
+];
+
+const Background = () => {
+  const setBackgroundImageUrl = useGlobalStore((s) => s.setBackgroundImageUrl);
+  return (
+    <GridList
+      items={backgroundOptions.map((option) => ({
+        avatar: `https://r2.vidol.chat/backgrounds/${encodeURIComponent(option.thumbnail)}`,
+        id: option.id,
+        name: option.name,
+        url: option.url,
+      }))}
+      onClick={(_, item: BackgroundOption) => {
+        if (item.id === TRANSPARENT_ID) {
+          // 透明背景清空背景色
+          setBackgroundImageUrl(null);
+        } else {
+          setBackgroundImageUrl(
+            `https://r2.vidol.chat/backgrounds/${encodeURIComponent(item.url)}`,
+          );
+        }
+      }}
+    />
+  );
+};
+
+export default Background;

src/app/chat/ChatInfo/index.tsx

@@ -2,13 +2,15 @@
 
 import { DraggablePanel, TabsNav } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { CHAT_HEADER_HEIGHT, CHAT_INFO_MAX_WIDTH, CHAT_INFO_WIDTH } from '@/constants/token';
 import { useGlobalStore } from '@/store/global';
 
+import BackGround from './BackGround';
 import ChatList from './ChatList';
 import DanceList from './DanceList';
 import MotionList from './MotionList';
@@ -20,6 +22,7 @@ const useStyles = createStyles(({ css, token }) => ({
     position: relative;
     display: flex;
     flex-direction: column;
+    background-color: ${rgba(token.colorBgLayout, 0.4)};
   `,
   header: css`
     height: ${CHAT_HEADER_HEIGHT}px;
@@ -73,6 +76,10 @@ export default () => {
               label: t('info.posture'),
               key: Tab.Posture,
             },
+            {
+              label: t('info.background'),
+              key: Tab.Background,
+            },
           ]}
           onChange={(key) => {
             setTab(key as Tab);
@@ -84,6 +91,7 @@ export default () => {
         {tab === Tab.DanceList && <DanceList />}
         {tab === Tab.Motions && <MotionList />}
         {tab === Tab.Posture && <PostureList />}
+        {tab === Tab.Background && <BackGround />}
       </Flexbox>
     </DraggablePanel>
   );

src/app/chat/ChatInfo/type.ts

@@ -1,4 +1,5 @@
 export enum Tab {
+  Background = 'background',
   ChatList = 'chats',
   DanceList = 'dances',
   Motions = 'motions',

src/app/chat/SideBar/index.tsx

@@ -2,6 +2,7 @@
 
 import { DraggablePanel } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
 import { Suspense } from 'react';
 
 import { SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/token';
@@ -10,10 +11,11 @@ import { useGlobalStore } from '@/store/global';
 import SessionList from './SessionList';
 import SkeletonList from './SkeletonList';
 
-const useStyles = createStyles(({ css }) => ({
+const useStyles = createStyles(({ css, token }) => ({
   sidebar: css`
     display: flex;
     flex-direction: column;
+    background-color: ${rgba(token.colorBgLayout, 0.4)};
   `,
 }));
 

src/app/chat/layout.tsx

@@ -5,14 +5,20 @@ import { ReactNode, memo } from 'react';
 import AppLayout from '@/layout/AppLayout';
 import { HeaderNavKey } from '@/layout/type';
 
+import Background from './Background';
+
 export interface LayoutProps {
   children?: ReactNode;
 }
 
 const LayoutDesktop = (props: LayoutProps) => {
   const { children } = props;
 
-  return <AppLayout headerKey={HeaderNavKey.Chat}>{children}</AppLayout>;
+  return (
+    <AppLayout headerKey={HeaderNavKey.Chat}>
+      {children} <Background />
+    </AppLayout>
+  );
 };
 
 export default memo(LayoutDesktop);

src/components/GridList/index.tsx

@@ -6,19 +6,13 @@ import SkeletonList from '@/components/SkeletonList';
 import ListItem from './ListItem';
 import { useStyles } from './style';
 
-interface Item {
-  avatar: string;
-  id: string;
-  name: string;
-}
-
 interface GridListProps {
   className?: string;
   isActivated?: (id: string) => boolean;
   isChecked?: (id: string) => boolean;
   items: any[];
   loading?: boolean;
-  onClick?: (id: string, item: Item) => void;
+  onClick?: (id: string, item: any) => void;
   style?: React.CSSProperties;
 }
 

src/features/AgentViewer/style.ts

@@ -28,7 +28,7 @@ export const useStyles = createStyles(({ css, token }) => ({
     max-height: 100%;
 
     background-color: ${rgba(token.colorBgContainer, 0.8)};
-    backdrop-filter: saturate(180%) blur(2px);
+    backdrop-filter: saturate(180%) blur(4px);
   `,
   canvas: css`
     display: block;

src/layout/AppLayout.tsx

@@ -3,8 +3,6 @@
 import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import Background from '@/layout/Background';
-
 import Header from './Header';
 import { HeaderNavKey } from './type';
 
@@ -18,7 +16,6 @@ const AppLayoutDesktop = memo<AppLayoutDesktopProps>(({ children, headerKey }) =
     <Flexbox height={'100%'} width={'100%'}>
       <Header headerKey={headerKey} />
       {children}
-      <Background />
     </Flexbox>
   );
 });

src/locales/default/chat.ts

@@ -23,6 +23,7 @@ export default {
     dance: '舞蹈',
     motions: '动作',
     posture: '姿势',
+    background: '背景',
   },
   history: {
     title: '聊天记录',