From 3e3090a7655d499bb45956574281506f0417fcf3 Mon Sep 17 00:00:00 2001 From: canisminor1990 Date: Thu, 12 Oct 2023 12:04:42 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(agent-card):=20Add=20and=20mod?= =?UTF-8?q?ify=20features=20for=20agent=20card?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add and modify configurations, dependencies, styles, and metadata - Remove and modify props and styles in AgentCardBanner, AvatarBanner, and Hero components - Adjust height of elements in the layout The changes are made to enhance the agent card feature in the market application. --- next.config.mjs | 13 +++++- package.json | 1 - .../market/(mobile)/features/AgentCard.tsx | 4 +- .../features/AgentCard/AgentCardBanner.tsx | 31 ++++--------- .../features/AgentCard/AgentCardItem.tsx | 7 +-- .../AgentDetailContent/AgentInfo/index.tsx | 13 ++---- src/app/metadata.ts | 17 ++++++-- .../(mobile)/features/AvatarBanner.tsx | 43 +++++++++---------- src/app/settings/(mobile)/mobile/index.tsx | 2 +- src/app/welcome/features/Banner/Hero.tsx | 2 +- src/app/welcome/features/Banner/index.tsx | 10 ++--- src/const/layoutTokens.ts | 4 +- 12 files changed, 66 insertions(+), 81 deletions(-) diff --git a/next.config.mjs b/next.config.mjs index 71d04a2e1d9e..d0fec264ac06 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -16,8 +16,9 @@ const withPWA = nextPWA({ /** @type {import('next').NextConfig} */ const nextConfig = { + compress: isProd, + productionBrowserSourceMaps: true, reactStrictMode: true, - swcMinify: true, images: { unoptimized: !isProd, remotePatterns: [ @@ -39,12 +40,20 @@ const nextConfig = { port: '', pathname: '/@lobehub/assets-logo/1.1.0/files/assets/**', }, + { + protocol: 'https', + hostname: 'registry.npmmirror.com', + port: '', + pathname: '/@lobehub/assets-favicons/latest/files/assets/**', + }, ], }, experimental: { + webVitalsAttribution: ['CLS', 'LCP'], forceSwcTransforms: true, + optimizePackageImports: ['modern-screenshot','emoji-mart','@emoji-mart/react','@emoji-mart/data','@icons-pack/react-simple-icons','gpt-tokenizer','chroma-js'], }, - transpilePackages: ['@lobehub/ui', 'antd-style'], + transpilePackages: ['@lobehub/ui', 'antd-style', 'lodash-es'], webpack(config) { config.experiments = { diff --git a/package.json b/package.json index 47ba8d676d46..332fd6bf5eca 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,6 @@ }, "dependencies": { "@ant-design/colors": "^7", - "@ant-design/icons": "^5", "@emoji-mart/data": "^1", "@emoji-mart/react": "^1", "@icons-pack/react-simple-icons": "^9", diff --git a/src/app/market/(mobile)/features/AgentCard.tsx b/src/app/market/(mobile)/features/AgentCard.tsx index e1856adb1a10..153c68718ae3 100644 --- a/src/app/market/(mobile)/features/AgentCard.tsx +++ b/src/app/market/(mobile)/features/AgentCard.tsx @@ -3,11 +3,11 @@ import { createStyles } from 'antd-style'; import { memo } from 'react'; import { Flexbox } from 'react-layout-kit'; -const useStyles = createStyles(({ css, token }) => ({ +const useStyles = createStyles(({ css, token, isDarkMode }) => ({ container: css` overflow: hidden; background: ${token.colorBgContainer}; - border: 1px solid ${token.colorFillTertiary}; + border: 1px solid ${isDarkMode ? token.colorFillTertiary : token.colorFillSecondary}; border-radius: ${token.borderRadiusLG}px; `, })); diff --git a/src/app/market/features/AgentCard/AgentCardBanner.tsx b/src/app/market/features/AgentCard/AgentCardBanner.tsx index 9b5f44067cb2..4a758f13b9b7 100644 --- a/src/app/market/features/AgentCard/AgentCardBanner.tsx +++ b/src/app/market/features/AgentCard/AgentCardBanner.tsx @@ -5,7 +5,7 @@ import { Flexbox } from 'react-layout-kit'; import { MetaData } from '@/types/meta'; -export const useStyles = createStyles(({ css, token }, maskColor: string) => ({ +export const useStyles = createStyles(({ css, token }) => ({ banner: css` position: relative; @@ -14,20 +14,14 @@ export const useStyles = createStyles(({ css, token }, maskColor: string) => ({ height: 64px; margin-bottom: -56px; - background: ${token.colorFill}; + background: ${token.colorFillSecondary}; + + mask-image: linear-gradient(to bottom, #fff, transparent); `, bannerImg: css` - filter: blur(6px) saturate(1.6); - `, - bannerMask: css` position: absolute; - bottom: 0; - left: 0; - - width: 100%; - height: 100%; - - background: linear-gradient(to bottom, transparent, ${maskColor || token.colorBgLayout}); + top: -50%; + filter: blur(50px) saturate(2); `, })); @@ -39,8 +33,8 @@ interface AgentCardBannerProps extends DivProps { } const AgentCardBanner = memo( - ({ meta, className, mask, size = 8, maskColor, children, ...props }) => { - const { styles, theme, cx } = useStyles(maskColor); + ({ meta, className, size = 200, children, ...props }) => { + const { styles, cx } = useStyles(); return ( ( justify={'center'} {...props} > - - {mask &&
} + {children} ); diff --git a/src/app/market/features/AgentCard/AgentCardItem.tsx b/src/app/market/features/AgentCard/AgentCardItem.tsx index 067808e84def..53276f53f4c6 100644 --- a/src/app/market/features/AgentCard/AgentCardItem.tsx +++ b/src/app/market/features/AgentCard/AgentCardItem.tsx @@ -22,12 +22,7 @@ const AgentCardItem = memo(({ meta, identifier }) => { const { isDarkMode } = useThemeMode(); return ( onAgentCardClick(identifier)}> - + { s.useFetchAgent, s.currentIdentifier, ]); - const { styles, theme } = useStyles(); - const { mobile } = useResponsive(); + const { styles } = useStyles(); + const { data, isLoading } = useFetchAgent(currentIdentifier); const { t } = useTranslation('market'); const [tab, setTab] = useState(InfoTabs.prompt); @@ -36,13 +35,7 @@ const AgentModalInner = memo(() => { return ( <> - +
({ +export const useStyles = createStyles(({ css, token }) => ({ banner: css` position: relative; @@ -15,36 +15,32 @@ export const useStyles = createStyles(({ css, token }, maskColor: string) => ({ height: 172px; min-height: 172px; max-height: 172px; + `, + bannerBox: css` + position: relative; + + width: 100%; + height: 100%; background: ${token.colorBgLayout}; + + mask-image: linear-gradient(to bottom, #fff, transparent); `, bannerImg: css` position: absolute; top: -50%; filter: blur(100px) saturate(2); `, - bannerMask: css` - position: absolute; - bottom: 0; - left: 0; - - width: 100%; - height: 100%; - - background: linear-gradient(to bottom, transparent, ${maskColor || token.colorBgLayout}); - `, })); interface AgentCardBannerProps extends DivProps { avatar: string; - mask?: boolean; - maskColor?: string; size?: number; } const AvatarBanner = memo( - ({ avatar, className, mask, size = 200, maskColor, children, ...props }) => { - const { styles, cx } = useStyles(maskColor); + ({ avatar, className, size = 200, children, ...props }) => { + const { styles, cx } = useStyles(); return ( ( justify={'center'} {...props} > - {'banner'} - {mask &&
} + + {'banner'} + {children} ); diff --git a/src/app/settings/(mobile)/mobile/index.tsx b/src/app/settings/(mobile)/mobile/index.tsx index 47fe025fac03..0c25ac84e175 100644 --- a/src/app/settings/(mobile)/mobile/index.tsx +++ b/src/app/settings/(mobile)/mobile/index.tsx @@ -33,7 +33,7 @@ const Setting = memo(() => { return ( - +
diff --git a/src/app/welcome/features/Banner/Hero.tsx b/src/app/welcome/features/Banner/Hero.tsx index 92ce30d5421e..9ac60ca8d89f 100644 --- a/src/app/welcome/features/Banner/Hero.tsx +++ b/src/app/welcome/features/Banner/Hero.tsx @@ -24,7 +24,7 @@ const Hero = memo<{ mobile?: boolean; width: number }>(({ width, mobile }) => { <>
- LobeChat + LobeChat {mobile ?
: ' '} {t('slogan.title')}
diff --git a/src/app/welcome/features/Banner/index.tsx b/src/app/welcome/features/Banner/index.tsx index b1fe7f438c10..4fb0d1caa46e 100644 --- a/src/app/welcome/features/Banner/index.tsx +++ b/src/app/welcome/features/Banner/index.tsx @@ -1,11 +1,10 @@ 'use client'; import { Icon } from '@lobehub/ui'; -import { useSize } from 'ahooks'; import { Button, Upload } from 'antd'; import { SendHorizonal } from 'lucide-react'; import dynamic from 'next/dynamic'; -import { memo, useCallback, useRef } from 'react'; +import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { Flexbox } from 'react-layout-kit'; @@ -18,9 +17,6 @@ const Hero = dynamic(() => import('./Hero')); const Banner = memo<{ mobile?: boolean }>(({ mobile }) => { const { importConfig } = useImportConfig(); - const ref = useRef(null); - const domSize = useSize(ref); - const width = domSize?.width || 1024; const { t } = useTranslation('welcome'); const { styles } = useStyles(); const [switchSession, switchBackToChat, router, isMobile] = useSessionStore((s) => [ @@ -36,8 +32,8 @@ const Banner = memo<{ mobile?: boolean }>(({ mobile }) => { return ( <> -
- +
+