From efa6ff3eca4129a183aaedfddb7258a91be6eb0b Mon Sep 17 00:00:00 2001
From: gary-Shen <grinson50@gmail.com>
Date: Mon, 12 Aug 2024 13:42:27 +0800
Subject: [PATCH] feat(frontend): add online minoru

---
 .../src/components/AppPanel/index.tsx         | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/apps/frontend/src/components/AppPanel/index.tsx b/apps/frontend/src/components/AppPanel/index.tsx
index 5237a584..a5a4d576 100644
--- a/apps/frontend/src/components/AppPanel/index.tsx
+++ b/apps/frontend/src/components/AppPanel/index.tsx
@@ -11,7 +11,10 @@ import styles from './index.module.css';
 interface AppLink {
   name: string;
   title: string;
-  link: string;
+  links: {
+    name: string;
+    link: string;
+  }[];
   icon: JSX.Element;
   description: string;
 }
@@ -19,22 +22,22 @@ interface AppLink {
 const apps = [
   {
     name: 'OpenDataLab',
-    title: '立即前往',
-    link: 'https://opendatalab.com',
+    links: [{ name: '立即前往', link: 'https://opendatalab.com' }],
     icon: <OpenDataLab />,
     description: '一个引领 AI 大模型时代的开放数据平台，提供了海量的、多模态的优质数据集，助力 AI 开发落地',
   },
   {
     name: 'LabelLLM',
-    title: 'Github',
-    link: 'https://labelllm.com',
+    links: [{ name: 'Github', link: 'https://labelllm.com' }],
     icon: <LabelLLM />,
     description: '专业致力于 LLM 对话标注，通过灵活的工具配置与多种数据模态的广泛兼容，为大模型打造高质量数据',
   },
   {
     name: 'MinorU',
-    title: 'Github',
-    link: 'https://minoru.com',
+    links: [
+      { name: 'Github', link: 'https://minoru.com' },
+      { name: '在线体验', link: 'https://opendatalab.com/OpenSourceTools/Extractor/PDF' },
+    ],
     icon: <MinorU />,
     description: '一站式开源高质量数据提取工具，支持多格式（PDF/网页/电子书），智能萃取，生成高质量语料',
   },
@@ -42,7 +45,7 @@ const apps = [
 
 export default function AppPanel() {
   const handleGoApp = (app: AppLink) => {
-    window.open(app.link, '_blank');
+    window.open(app.links[0].link, '_blank');
   };
 
   return (
@@ -51,7 +54,7 @@ export default function AppPanel() {
       <div className={styles.panel}>
         {_.map(apps, (app) => {
           return (
-            <div key={app.title} className={styles.appWrapper}>
+            <div key={app.name} className={styles.appWrapper}>
               <div className={styles.appContainer}>
                 <div className={styles.header} onClick={() => handleGoApp(app)}>
                   <Avatar shape="square" className={styles.avatar} src={app.icon} />
@@ -61,10 +64,14 @@ export default function AppPanel() {
                   </div>
                 </div>
                 <div className={styles.links}>
-                  <a href={app.link} target="_blank" rel="noreferrer" className={styles.link}>
-                    {app.title}
-                    <ArrowRightOutlined className={styles.arrow} />
-                  </a>
+                  {_.map(app.links, (link) => {
+                    return (
+                      <a href={link.link} key={link.name} target="_blank" rel="noreferrer" className={styles.link}>
+                        {link.name}
+                        <ArrowRightOutlined className={styles.arrow} />
+                      </a>
+                    );
+                  })}
                 </div>
               </div>
             </div>