feat(frontend): add app panel to navigation

apps/frontend/src/components/AppPanel/index.module.css

@@ -0,0 +1,111 @@
+.panel {
+  display: flex;
+  flex-wrap: wrap;
+  width: 40rem;
+  min-height: 10rem;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0.5rem 0 0.5rem 1rem;
+}
+
+.appWrapper {
+  flex-basis: 50%;
+  border-radius: 0.25rem;
+  transition: all 0.2s ease-in-out;
+  overflow: hidden;
+
+  &:hover {
+    background-color: rgba(244, 245, 249, 1);
+
+    .links {
+      opacity: 1;
+    }
+
+    .appContainer {
+      animation: wrapperSlideIn 0.2s ease-in-out forwards;
+    }
+  }
+
+  &:not(:hover) {
+    .links {
+      opacity: 0;
+    }
+
+    .appContainer {
+      animation: wrapperSlideOut 0.2s ease-in-out forwards;
+    }
+  }
+}
+
+.appContainer {
+  display: flex;
+  padding: 0 1rem 1rem;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+}
+
+.avatar {
+  flex-shrink: 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.description {
+  color: var(--color-text-tertiary);
+  font-size: 0.75rem;
+}
+
+.links {
+  display: flex;
+  gap: 1rem;
+  padding: 0.5rem 0;
+  align-items: center;
+  opacity: 0;
+  transition: all 0.2s ease-in-out;
+}
+
+.link {
+  display: flex;
+  justify-items: center;
+  gap: 0.25rem;
+  color: var(--color-text);
+
+  &:hover {
+    color: var(--color-primary);
+
+    .arrow {
+      transform: translateX(0.25rem);
+    }
+  }
+}
+
+.arrow {
+  transition: transform 0.2s ease-in-out;
+}
+
+@keyframes wrapperSlideIn {
+  from {
+    transform: translateY(28px);
+  }
+  to {
+    transform: translateY(12px);
+  }
+}
+
+@keyframes wrapperSlideOut {
+  from {
+    transform: translateY(12px);
+  }
+  to {
+    transform: translateY(28px);
+  }
+}

apps/frontend/src/components/AppPanel/index.tsx

@@ -0,0 +1,76 @@
+import { ArrowRightOutlined } from '@ant-design/icons';
+import { Avatar } from 'antd';
+import _ from 'lodash';
+
+import { ReactComponent as LabelLLM } from '@/assets/svg/labelllm.svg';
+import { ReactComponent as MinorU } from '@/assets/svg/minoru.svg';
+import { ReactComponent as OpenDataLab } from '@/assets/svg/opendatalab.svg';
+
+import styles from './index.module.css';
+
+interface AppLink {
+  name: string;
+  title: string;
+  link: string;
+  icon: JSX.Element;
+  description: string;
+}
+
+const apps = [
+  {
+    name: 'OpenDataLab',
+    title: '立即前往',
+    link: 'https://opendatalab.com',
+    icon: <OpenDataLab />,
+    description: '一个引领 AI 大模型时代的开放数据平台，提供了海量的、多模态的优质数据集，助力 AI 开发落地',
+  },
+  {
+    name: 'LabelLLM',
+    title: 'Github',
+    link: 'https://labelllm.com',
+    icon: <LabelLLM />,
+    description: '专业致力于 LLM 对话标注，通过灵活的工具配置与多种数据模态的广泛兼容，为大模型打造高质量数据',
+  },
+  {
+    name: 'MinorU',
+    title: 'Github',
+    link: 'https://minoru.com',
+    icon: <MinorU />,
+    description: '一站式开源高质量数据提取工具，支持多格式（PDF/网页/电子书），智能萃取，生成高质量语料',
+  },
+];
+
+export default function AppPanel() {
+  const handleGoApp = (app: AppLink) => {
+    window.open(app.link, '_blank');
+  };
+
+  return (
+    <div>
+      <div className={styles.title}>欢迎使用 OpenDataLab 开源工具 🎉</div>
+      <div className={styles.panel}>
+        {_.map(apps, (app) => {
+          return (
+            <div key={app.title} className={styles.appWrapper}>
+              <div className={styles.appContainer}>
+                <div className={styles.header} onClick={() => handleGoApp(app)}>
+                  <Avatar shape="square" className={styles.avatar} src={app.icon} />
+                  <div className={styles.appInfo}>
+                    {app.name}
+                    <div className={styles.description}>{app.description}</div>
+                  </div>
+                </div>
+                <div className={styles.links}>
+                  <a href={app.link} target="_blank" rel="noreferrer" className={styles.link}>
+                    {app.title}
+                    <ArrowRightOutlined className={styles.arrow} />
+                  </a>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

apps/frontend/src/components/Navigate/index.tsx

@@ -1,16 +1,18 @@
-import { Button, Divider, Dropdown, Tag } from 'antd';
-import { Link, useMatch, useNavigate } from 'react-router-dom';
 import Icon, { BellOutlined, PoweroffOutlined } from '@ant-design/icons';
 import { FlexLayout } from '@labelu/components-react';
+import { Button, Divider, Dropdown, Popover, Tag } from 'antd';
+import { Link, useMatch, useNavigate } from 'react-router-dom';
 
-import { ReactComponent as ProfileIcon } from '@/assets/svg/personal.svg';
 import { ReactComponent as LocalDeploy } from '@/assets/svg/local-deploy.svg';
+import { ReactComponent as ProfileIcon } from '@/assets/svg/personal.svg';
+import { ReactComponent as ToolboxSvg } from '@/assets/svg/toolbox.svg';
 import { goAuth } from '@/utils/sso';
 
-import TaskTip from './TaskTip';
+import AppPanel from '../AppPanel';
 import Breadcrumb from '../Breadcrumb';
-import { LabeluLogo, NavigationWrapper } from './style';
 import ImageDemoGuide from './ImageDemoGuide';
+import { LabeluLogo, NavigationWrapper } from './style';
+import TaskTip from './TaskTip';
 
 const Homepage = () => {
   const username = localStorage.getItem('username');
@@ -53,6 +55,17 @@ const Homepage = () => {
       <FlexLayout.Item flex gap="1rem">
         <TaskTip visible={Boolean(isSampleDetail)} />
         <ImageDemoGuide visible={Boolean(isImageDemo)} />
+        {window.IS_ONLINE && (
+          <Popover title={null} content={<AppPanel />}>
+            <Button
+              type="link"
+              icon={<ToolboxSvg />}
+              style={{ color: 'rgba(0, 0, 0, 0.85)', display: 'flex', alignItems: 'center' }}
+            >
+              开源工具箱
+            </Button>
+          </Popover>
+        )}
         {window.IS_ONLINE && (
           <a data-wiz="local-deploy-top-right" href="https://opendatalab.github.io/labelU/#/guide/install">
             <Button type="link" style={{ color: 'rgba(0, 0, 0, 0.85)' }} icon={<Icon component={LocalDeploy} />}>