♻️ refactor: Refactor Market Layout

src/app/(main)/market/_layout/Desktop/AgentDetail.tsx → src/app/(main)/market/@detail/_layout/Desktop.tsx

@@ -1,13 +1,14 @@
+'use client';
+
 import { DraggablePanel, DraggablePanelBody, DraggablePanelContainer } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { memo, useCallback, useState } from 'react';
+import { createStyles, useResponsive } from 'antd-style';
+import { PropsWithChildren, memo, useCallback, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { MARKET_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 
-import AgentDetailContent from '../../features/AgentDetailContent';
-
 const useStyles = createStyles(({ css, token, stylish }) => ({
   content: css`
     display: flex;
@@ -23,8 +24,9 @@ const useStyles = createStyles(({ css, token, stylish }) => ({
   noScrollbar: stylish.noScrollbar,
 }));
 
-const SideBar = memo(() => {
+const SideBar = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
+  const { md = true } = useResponsive();
   const [tempId, setTempId] = useState<string>('');
   const [showAgentSidebar, deactivateAgent, activateAgent] = useMarketStore((s) => [
     agentMarketSelectors.showSideBar(s),
@@ -44,15 +46,18 @@ const SideBar = memo(() => {
     [deactivateAgent, activateAgent, tempId],
   );
 
+  const minWidth = md ? MARKET_SIDEBAR_WIDTH : 350;
+
   return (
     <DraggablePanel
       className={styles.drawer}
       classNames={{
         content: styles.content,
       }}
       expand={showAgentSidebar}
-      minWidth={MARKET_SIDEBAR_WIDTH}
-      mode={'fixed'}
+      maxWidth={'80vw' as any}
+      minWidth={minWidth}
+      mode={md ? 'fixed' : 'float'}
       onExpandChange={handleExpandChange}
       placement={'right'}
       showHandlerWideArea={false}
@@ -61,15 +66,15 @@ const SideBar = memo(() => {
         style={{
           flex: 'none',
           height: '100%',
-          minWidth: MARKET_SIDEBAR_WIDTH,
+          minWidth: minWidth,
         }}
       >
-        <SafeSpacing />
+        {md && <SafeSpacing />}
         <DraggablePanelBody
           className={styles.noScrollbar}
           style={{ padding: 0, position: 'relative' }}
         >
-          <AgentDetailContent />
+          <Flexbox>{children}</Flexbox>
         </DraggablePanelBody>
       </DraggablePanelContainer>
     </DraggablePanel>

src/app/(main)/market/(mobile)/features/AgentDetail.tsx → src/app/(main)/market/@detail/_layout/Mobile.tsx

@@ -1,12 +1,12 @@
+'use client';
+
 import { Modal } from '@lobehub/ui';
-import { memo } from 'react';
+import { PropsWithChildren, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 
-import AgentDetailContent from '../../features/AgentDetailContent';
-
-const AgentDetail = memo(() => {
+const AgentDetail = memo<PropsWithChildren>(({ children }) => {
   const [showAgentSidebar, deactivateAgent] = useMarketStore((s) => [
     agentMarketSelectors.showSideBar(s),
     s.deactivateAgent,
@@ -17,12 +17,14 @@ const AgentDetail = memo(() => {
   return (
     <Modal
       allowFullscreen
-      onCancel={deactivateAgent}
+      onCancel={() => {
+        deactivateAgent();
+      }}
       open={showAgentSidebar}
       styles={{ body: { padding: 0 } }}
       title={t('sidebar.title')}
     >
-      <AgentDetailContent />
+      {children}
     </Modal>
   );
 });

src/app/(main)/market/@detail/default.tsx

@@ -0,0 +1,19 @@
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+import AgentDetailContent from './features/AgentDetailContent';
+
+const Layout = ServerLayout({ Desktop, Mobile });
+
+const Detail = () => {
+  return (
+    <Layout>
+      <AgentDetailContent />
+    </Layout>
+  );
+};
+
+Detail.displayName = 'AgentDetail';
+
+export default Detail;

src/app/(main)/market/features/AgentDetailContent/AgentInfo/Header.tsx → src/app/(main)/market/@detail/features/AgentDetailContent/Header.tsx

@@ -1,11 +1,12 @@
 import { Avatar, Tag } from '@lobehub/ui';
 import { App, Button, Typography } from 'antd';
-import { startCase } from 'lodash-es';
+import { isEqual, startCase } from 'lodash-es';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center } from 'react-layout-kit';
 
+import { useSearch } from '@/app/(main)/market/hooks/useSearch';
 import { SESSION_CHAT_URL } from '@/const/url';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
@@ -16,11 +17,13 @@ import { useStyles } from './style';
 const { Link } = Typography;
 
 const Header = memo(() => {
+  const search = useSearch();
   const router = useRouter();
   const { t } = useTranslation('market');
   const { styles, theme } = useStyles();
   const createSession = useSessionStore((s) => s.createSession);
-  const agentItem = useMarketStore(agentMarketSelectors.currentAgentItem);
+  const agentItem = useMarketStore(agentMarketSelectors.currentAgentItem, isEqual);
+
   const { message } = App.useApp();
 
   const { meta, createAt, author, homepage, config } = agentItem;
@@ -38,7 +41,6 @@ const Header = memo(() => {
 
   const handleAddAgent = () => {
     if (!agentItem) return;
-
     createSession({ config, meta }, false);
     message.success(t('addAgentSuccess'));
   };
@@ -55,11 +57,7 @@ const Header = memo(() => {
       <div className={styles.title}>{title}</div>
       <Center gap={6} horizontal style={{ flexWrap: 'wrap' }}>
         {(tags as string[]).map((tag: string, index) => (
-          <Tag
-            key={index}
-            onClick={() => useMarketStore.setState({ searchKeywords: tag })}
-            style={{ margin: 0 }}
-          >
+          <Tag key={index} onClick={() => search(tag)} style={{ margin: 0 }}>
             {startCase(tag).trim()}
           </Tag>
         ))}

src/app/(main)/market/features/AgentDetailContent/AgentInfo/index.tsx → src/app/(main)/market/@detail/features/AgentDetailContent/index.tsx

@@ -1,11 +1,13 @@
+'use client';
+
 import { Markdown, TabsNav } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import AgentCardBanner from '@/app/(main)/market/features/AgentCard/AgentCardBanner';
 import { useMarketStore } from '@/store/market';
 
-import AgentCardBanner from '../../../features/AgentCard/AgentCardBanner';
 import Comment from './Comment';
 import Header from './Header';
 import Loading from './Loading';

src/app/(main)/market/_layout/Desktop/Header.tsx

@@ -1,6 +1,7 @@
+'use client';
+
 import { ChatHeader, Logo } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import Link from 'next/link';
 import { memo } from 'react';
 
 import ShareAgentButton from '../../features/ShareAgentButton';
@@ -17,11 +18,7 @@ const Header = memo(() => {
 
   return (
     <ChatHeader
-      left={
-        <Link aria-label={'home'} href={'/'}>
-          <Logo className={styles.logo} extra={'Discover'} size={36} type={'text'} />
-        </Link>
-      }
+      left={<Logo className={styles.logo} extra={'Discover'} size={36} type={'text'} />}
       right={<ShareAgentButton />}
     />
   );

src/app/(main)/market/_layout/Desktop/Hero.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { GridBackground } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, responsive }) => ({
+  background: css`
+    width: 80%;
+    margin: -60px 0 -20px;
+
+    ${responsive.md} {
+      display: none;
+    }
+  `,
+  title: css`
+    z-index: 2;
+
+    margin-top: 24px;
+
+    font-size: min(56px, 6vw);
+    font-weight: 800;
+    line-height: 1.2;
+    text-align: center;
+  `,
+}));
+
+const Hero = memo(() => {
+  const { theme, styles } = useStyles();
+  return (
+    <Center>
+      <h1 className={styles.title}>Find & Use The Best Agents</h1>
+      <GridBackground animation className={styles.background} colorFront={theme.colorText} random />
+    </Center>
+  );
+});
+
+export default Hero;