feat: Empty is displayed when the data is empty, and the problem of t…

…he login button not responding is fixed.
kubeagi · Mar 29, 2024 · adba3cd · adba3cd
1 parent 82671aa
commit adba3cd
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 38 deletions.
diff --git a/src/app/[locale]/agent/components/index.tsx b/src/app/[locale]/agent/components/index.tsx
@@ -2,22 +2,19 @@
 
 import { FireOutlined } from '@ant-design/icons';
 import { sdk as bff } from '@yuntijs/arcadia-bff-sdk';
-import { Avatar, Button, Col, Row, Spin, Tooltip } from 'antd';
+import { Avatar, Button, Col, Empty, Row, Spin, Tooltip } from 'antd';
 import classNames from 'classnames';
 import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
 // import { useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
+import { AgentProps, GPTNode } from '@/app/[locale]/agent/type';
 import TitleCom from '@/components/Title';
 
 import TagContent from './TagContent';
 import { useStyles } from './styles';
 
-interface AgentProps {
-  agentData?: any;
-  TZH_AGENT_CATEGORY: string[];
-}
-
 const layout = {
   xs: {
     span: 24,
@@ -55,22 +52,31 @@ const Agent = React.memo<AgentProps>(({ agentData, TZH_AGENT_CATEGORY }) => {
     },
     { fallbackData: agentData }
   );
-  // const router = useRouter();
+
+  const router = useRouter();
   // const searchParams = useSearchParams()
 
   useEffect(() => {
     // console.log(searchParams.get('classification'))
   }, []);
 
-  const handleSelectTagChange = tag => {
+  const handleSelectTagChange = (tag: string) => {
     setSelectedTags(tag);
   };
-
+  const nodes = (ListData?.GPT?.listGPT?.nodes || []) as GPTNode[];
   return (
     <div className={styles.agentContainer}>
       <div className={styles.agentContent}>
         <TitleCom
-          extra={<Button>{t('index.dengLu')}</Button>}
+          extra={
+            <Button
+              onClick={() => {
+                router.push('/oidc/auth');
+              }}
+            >
+              {t('index.dengLu')}
+            </Button>
+          }
           isLeftTitle
           title={t('index.faXianAIZhi')}
         />
@@ -84,34 +90,41 @@ const Agent = React.memo<AgentProps>(({ agentData, TZH_AGENT_CATEGORY }) => {
             <div className={classNames(styles.content, 'scrollBar')}>
               <Spin spinning={loading}>
                 <Row gutter={[16, 16]}>
-                  {(ListData?.GPT?.listGPT?.nodes || [])
-                    .filter(item => item.category.includes(selectedTag))
-                    .map((item, index) => (
-                      <Col {...layout} key={index}>
-                        <a
-                          className={styles.card}
-                          href={`/chat/new?appNamespace=${item.name?.split(
-                            '/'
-                          )?.[0]}&appName=${item.name?.split('/')?.[1]}`}
-                        >
-                          <div className={styles.left}>
-                            <Avatar shape="square" size={72} src={item.icon} />
-                          </div>
-                          <div className={styles.right}>
-                            <div className={styles.title}>{item.displayName}</div>
-                            <Tooltip title={item.description || '-'}>
-                              <div className={styles.desc}>{item.description || '-'}</div>
-                            </Tooltip>
-                            <div className={styles.info}>
-                              <span className={styles.heat}>
-                                <FireOutlined /> {item.hot} w
-                              </span>
-                              <span className={styles.creator}>@{item.creator}</span>
+                  {nodes.length > 0 ? (
+                    nodes
+                      .filter(item => item?.category?.includes(selectedTag))
+                      .map((item, index) => (
+                        <Col {...layout} key={index}>
+                          <a
+                            className={styles.card}
+                            href={`/chat/new?appNamespace=${item.name?.split(
+                              '/'
+                            )?.[0]}&appName=${item.name?.split('/')?.[1]}`}
+                          >
+                            <div className={styles.left}>
+                              <Avatar shape="square" size={72} src={item.icon} />
+                            </div>
+                            <div className={styles.right}>
+                              <div className={styles.title}>{item.displayName}</div>
+                              <Tooltip title={item.description || '-'}>
+                                <div className={styles.desc}>{item.description || '-'}</div>
+                              </Tooltip>
+                              <div className={styles.info}>
+                                <span className={styles.heat}>
+                                  <FireOutlined /> {item.hot} w
+                                </span>
+                                <span className={styles.creator}>@{item.creator}</span>
+                              </div>
                             </div>
-                          </div>
-                        </a>
-                      </Col>
-                    ))}
+                          </a>
+                        </Col>
+                      ))
+                  ) : (
+                    <Empty
+                      image={Empty.PRESENTED_IMAGE_SIMPLE}
+                      style={{ flex: 1, marginTop: '20vh' }}
+                    />
+                  )}
                 </Row>
               </Spin>
             </div>

diff --git a/src/app/[locale]/agent/page.tsx b/src/app/[locale]/agent/page.tsx
@@ -5,6 +5,8 @@ import React from 'react';
 
 import { AGENT_CATEGORY_INDEXES } from '@/utils/constants';
 
+import { AgentData } from '@/app/[locale]/agent/type';
+
 import Agent from './components';
 
 export default async function Page() {
@@ -22,7 +24,7 @@ export default async function Page() {
   const TZH_AGENT_CATEGORY = AGENT_CATEGORY_INDEXES.map(item => t_zh(item));
   return (
     <Flex style={{ overflow: 'hidden', flex: 1 }}>
-      <Agent TZH_AGENT_CATEGORY={TZH_AGENT_CATEGORY} agentData={agentData} />
+      <Agent TZH_AGENT_CATEGORY={TZH_AGENT_CATEGORY} agentData={agentData as AgentData} />
     </Flex>
   );
 }
diff --git a/src/app/[locale]/agent/type.ts b/src/app/[locale]/agent/type.ts
@@ -0,0 +1,28 @@
+import { ListGpTsQuery } from '@yuntijs/arcadia-bff-sdk';
+
+export type GPTNode = {
+  __typename?: 'GPT';
+  name?: string | null;
+  displayName?: string | null;
+  description?: string | null;
+  hot?: any | null;
+  creator?: string | null;
+  category?: Array<string | null> | null;
+  icon?: string | null;
+  prologue?: string | null;
+};
+
+export type AgentData = ListGpTsQuery & {
+  GPT?: {
+    __typename?: 'GPTQuery';
+    listGPT: {
+      __typename?: 'PaginatedResult';
+      nodes?: Array<GPTNode> | null;
+    };
+  } | null;
+};
+
+export interface AgentProps {
+  agentData?: AgentData;
+  TZH_AGENT_CATEGORY: string[];
+}