style: Update agent list Style

messages/en/components.ts

@@ -1,6 +1,6 @@
 export default {
   index: {
-    faXianAIZhi: 'Discover AI Agents',
+    faXianAIZhi: 'Discover  Agents',
     dengLu: 'Login',
     tuiJian: 'Recommend',
   },

messages/zh/components.ts

@@ -1,6 +1,6 @@
 export default {
   index: {
-    faXianAIZhi: '发现 AI 智能体',
+    faXianAIZhi: '发现智能体',
     dengLu: '登录',
     tuiJian: '推荐',
   },

src/app/[locale]/agent/components/index.tsx

@@ -8,7 +8,7 @@ import { useTranslations } from 'next-intl';
 // import { useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
-import ReturnBtn from '@/components/ReturnBtn';
+import TitleCom from '@/components/Title';
 
 import TagContent from './TagContent';
 import { useStyles } from './styles';
@@ -68,11 +68,10 @@ const Agent = React.memo<AgentProps>(({ agentData }) => {
   return (
     <div className={styles.agentContainer}>
       <div className={styles.agentContent}>
-        <ReturnBtn
+        <TitleCom
           extra={<Button>{t('index.dengLu')}</Button>}
           isLeftTitle
           title={t('index.faXianAIZhi')}
-          to="/chat"
         />
         <div>
           <div className={styles.main}>

src/app/[locale]/agent/components/styles.ts

@@ -50,6 +50,7 @@ export const useStyles = createStyles(({ token, isDarkMode }) => ({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     fontWeight: 700,
+    color: `${isDarkMode ? '#fff' : '#000'}`,
   },
   desc: {
     color: token.colorTextDescription,

src/components/Title/index.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { Flex } from 'antd';
+import { createStyles } from 'antd-style';
+import React from 'react';
+
+export const useStyles = createStyles(() => ({
+  TitleCom: {
+    padding: '0 24px',
+    height: '64px',
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    zIndex: 9,
+    overflowY: 'auto',
+  },
+  title: {
+    flex: '1 1',
+    alignItems: 'center',
+    display: 'flex',
+    fontWeight: 590,
+    fontSize: 16,
+    flexDirection: 'column',
+    marginLeft: '-40px',
+  },
+  leftTitle: {
+    fontWeight: 590,
+    fontSize: 16,
+  },
+  layout: {
+    width: '100%',
+  },
+}));
+
+interface TitleComProps {
+  to?: string;
+  title?: string;
+  isLeftTitle?: boolean;
+  extra?: React.ReactNode;
+}
+
+const TitleCom = React.memo<TitleComProps>(props => {
+  const { extra, isLeftTitle } = props;
+  const { styles } = useStyles();
+  return (
+    <Flex align={'center'} className={styles.TitleCom}>
+      {isLeftTitle ? (
+        <Flex align="center" className={styles.layout} justify="space-between">
+          <div className={styles.leftTitle}>{props.title}</div>
+          {extra}
+        </Flex>
+      ) : (
+        <div className={styles.title}>{props.title}</div>
+      )}
+    </Flex>
+  );
+});
+
+export default TitleCom;