♻️ refactor: Refactor Market Layout (lobehub#2320)

* ♻️ refactor: Refactor Market Layout * ♻️ refactor: Market Layout * ♻️ refactor: Market Layout * 🐛 fix: Fix spotlight * 🐛 fix: Fix isEqual * 💄 style: Update market style * 💄 style: Update Market Style --------- Co-authored-by: Arvin Xu <arvinx@foxmail.com>
SilvaneiMartins · May 1, 2024 · c05c3c1 · c05c3c1
1 parent f7a0f46
commit c05c3c1
Show file tree

Hide file tree

Showing 46 changed files with 620 additions and 525 deletions.
diff --git a/src/app/(main)/market/(desktop)/index.tsx b/src/app/(main)/market/(desktop)/index.tsx
diff --git a/src/app/(main)/market/(mobile)/features/AgentCard.tsx b/src/app/(main)/market/(mobile)/features/AgentCard.tsx
diff --git a/src/app/(main)/market/(mobile)/index.tsx b/src/app/(main)/market/(mobile)/index.tsx
diff --git a/...n)/market/_layout/Desktop/AgentDetail.tsx → ...(main)/market/@detail/_layout/Desktop.tsx b/...n)/market/_layout/Desktop/AgentDetail.tsx → ...(main)/market/@detail/_layout/Desktop.tsx
@@ -1,30 +1,32 @@
+'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;
     flex-direction: column;
     height: 100% !important;
   `,
   drawer: css`
-    background: ${token.colorBgLayout};
+    background: ${token.colorBgContainer};
   `,
   header: css`
     border-bottom: 1px solid ${token.colorBorder};
   `,
   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>

diff --git a/.../market/(mobile)/features/AgentDetail.tsx → .../(main)/market/@detail/_layout/Mobile.tsx b/.../market/(mobile)/features/AgentDetail.tsx → .../(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>
   );
 });

diff --git a/src/app/(main)/market/@detail/default.tsx b/src/app/(main)/market/@detail/default.tsx
@@ -0,0 +1,21 @@
+import ServerLayout from '@/components/server/ServerLayout';
+import { isMobileDevice } from '@/utils/responsive';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+import AgentDetailContent from './features/AgentDetailContent';
+
+const Layout = ServerLayout({ Desktop, Mobile });
+
+const Detail = () => {
+  const mobile = isMobileDevice();
+  return (
+    <Layout>
+      <AgentDetailContent mobile={mobile} />
+    </Layout>
+  );
+};
+
+Detail.displayName = 'AgentDetail';
+
+export default Detail;
diff --git a/.../AgentDetailContent/AgentInfo/Comment.tsx → ...l/features/AgentDetailContent/Comment.tsx b/.../AgentDetailContent/AgentInfo/Comment.tsx → ...l/features/AgentDetailContent/Comment.tsx
diff --git a/...s/AgentDetailContent/AgentInfo/Header.tsx → ...il/features/AgentDetailContent/Header.tsx b/...s/AgentDetailContent/AgentInfo/Header.tsx → ...il/features/AgentDetailContent/Header.tsx
@@ -1,10 +1,11 @@
 import { Avatar, Tag } from '@lobehub/ui';
 import { App, Button, Typography } from 'antd';
+import isEqual from 'fast-deep-equal';
 import { 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 { Center, Flexbox } from 'react-layout-kit';
 
 import { SESSION_CHAT_URL } from '@/const/url';
 import { useIsMobile } from '@/hooks/useIsMobile';
@@ -15,12 +16,14 @@ import { useStyles } from './style';
 
 const { Link } = Typography;
 
-const Header = memo(() => {
+const Header = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const setSearchKeywords = useMarketStore((s) => s.setSearchKeywords);
   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,43 +41,49 @@ const Header = memo(() => {
 
   const handleAddAgent = () => {
     if (!agentItem) return;
-
     createSession({ config, meta }, false);
     message.success(t('addAgentSuccess'));
   };
 
   return (
     <Center className={styles.container} gap={16}>
-      <Avatar
-        animation
-        avatar={avatar}
-        background={backgroundColor || theme.colorFillTertiary}
-        className={styles.avatar}
-        size={100}
-      />
-      <div className={styles.title}>{title}</div>
+      <Center
+        flex={'none'}
+        height={120}
+        style={{
+          backgroundColor:
+            backgroundColor || mobile ? theme.colorBgElevated : theme.colorBgContainer,
+          borderRadius: '50%',
+          overflow: 'hidden',
+          zIndex: 2,
+        }}
+        width={120}
+      >
+        <Avatar animation avatar={avatar} size={100} />
+      </Center>
+      <h2 className={styles.title}>{title}</h2>
       <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={() => setSearchKeywords(tag)} style={{ margin: 0 }}>
             {startCase(tag).trim()}
           </Tag>
         ))}
       </Center>
       <div className={styles.desc}>{description}</div>
-      <Link aria-label={author} className={styles.author} href={homepage} target={'_blank'}>
-        @{author}
-      </Link>
       <Button block onClick={handleAddAgentAndConverse} type={'primary'}>
         {t('addAgentAndConverse')}
       </Button>
       <Button block onClick={handleAddAgent}>
         {t('addAgent')}
       </Button>
-      <div className={styles.date}>{createAt}</div>
+      <Flexbox align={'center'} gap={12} horizontal>
+        <Link aria-label={author} className={styles.author} href={homepage} target={'_blank'}>
+          @{author}
+        </Link>
+        <time className={styles.time} dateTime={new Date(createAt).toISOString()}>
+          {createAt}
+        </time>
+      </Flexbox>
     </Center>
   );
 });

diff --git a/.../AgentDetailContent/AgentInfo/Loading.tsx → ...l/features/AgentDetailContent/Loading.tsx b/.../AgentDetailContent/AgentInfo/Loading.tsx → ...l/features/AgentDetailContent/Loading.tsx
diff --git a/...AgentDetailContent/AgentInfo/TokenTag.tsx → .../features/AgentDetailContent/TokenTag.tsx b/...AgentDetailContent/AgentInfo/TokenTag.tsx → .../features/AgentDetailContent/TokenTag.tsx
diff --git a/...es/AgentDetailContent/AgentInfo/index.tsx → ...ail/features/AgentDetailContent/index.tsx b/...es/AgentDetailContent/AgentInfo/index.tsx → ...ail/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';
@@ -17,7 +19,7 @@ enum InfoTabs {
   prompt = 'prompt',
 }
 
-const AgentModalInner = memo(() => {
+const AgentModalInner = memo<{ mobile?: boolean }>(({ mobile }) => {
   const [useFetchAgent, currentIdentifier] = useMarketStore((s) => [
     s.useFetchAgent,
     s.currentIdentifier,
@@ -34,8 +36,12 @@ const AgentModalInner = memo(() => {
 
   return (
     <>
-      <AgentCardBanner meta={meta} size={400} style={{ height: 120, marginBottom: -60 }} />
-      <Header />
+      <AgentCardBanner
+        avatar={meta?.avatar}
+        size={800}
+        style={{ height: 120, marginBottom: -60 }}
+      />
+      <Header mobile={mobile} />
       <Flexbox align={'center'}>
         <TabsNav
           activeKey={tab}

diff --git a/...res/AgentDetailContent/AgentInfo/style.ts → ...tail/features/AgentDetailContent/style.ts b/...res/AgentDetailContent/AgentInfo/style.ts → ...tail/features/AgentDetailContent/style.ts
@@ -4,21 +4,13 @@ export const useStyles = createStyles(({ css, token, prefixCls }) => ({
   author: css`
     font-size: 12px;
   `,
-
-  avatar: css`
-    flex: none;
-  `,
   container: css`
     position: relative;
     padding: 16px 16px 24px;
     border-bottom: 1px solid ${token.colorBorderSecondary};
   `,
-  date: css`
-    font-size: 12px;
-    color: ${token.colorTextDescription};
-  `,
   desc: css`
-    color: ${token.colorTextDescription};
+    color: ${token.colorTextSecondary};
     text-align: center;
   `,
   loading: css`
@@ -30,9 +22,13 @@ export const useStyles = createStyles(({ css, token, prefixCls }) => ({
   nav: css`
     padding-top: 8px;
   `,
+  time: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
   title: css`
-    font-size: 20px;
-    font-weight: 600;
+    margin-bottom: 0;
+    font-weight: bold;
     text-align: center;
   `,
 }));