From 9277d1690ccde372b63ee9c33e7fb0bcdafdeeba Mon Sep 17 00:00:00 2001
From: v-zhangjc9 <v-zhangjc9.gd@chinatelecom.cn>
Date: Wed, 2 Jul 2025 15:48:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E5=A2=9E=E5=8A=A0=E5=B8=B8?=
 =?UTF-8?q?=E7=94=A8app=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 service-web/client/src/pages/App.tsx | 160 +++++++++++++++++----------
 service-web/client/src/route.tsx     |  14 +--
 2 files changed, 108 insertions(+), 66 deletions(-)

diff --git a/service-web/client/src/pages/App.tsx b/service-web/client/src/pages/App.tsx
index 122198f..e6a44b7 100644
--- a/service-web/client/src/pages/App.tsx
+++ b/service-web/client/src/pages/App.tsx
@@ -3,15 +3,50 @@ import {ConfigProvider} from 'antd'
 import {dateFormat} from 'licia'
 import React, {useMemo} from 'react'
 import {Outlet, useLocation, useNavigate} from 'react-router'
+import styled from 'styled-components'
 import {menus} from '../route.tsx'
 
+const ProLayoutDiv = styled.div`
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+
+    .ant-menu-sub > .ant-menu-item {
+        padding-left: 16px !important;
+    }
+`
+
+const defaultAppIcon =
+  <img
+    src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAMAUExURUdwTBR20EyHx1iq5EWJ1hNyy0mR1EhzwnbB/8P5/Fx/vVuj5zyO4lCY102P0L3u/3K88dz4/8v1/0fW/jLh/013ujN4wBliuEuEy0FrqT13wFmCvkaH0GSLyBVVqe38/0il4FKu7crr/eL3/7Ls/zd3t1WN1TZcnTloojx6whpYpTdfoDVwtVeS1WeOyiNhsTFyuy50wHCPxDFgqLjK5G2Ow2Gy5ylpvB9uxA5x03W/71Wh4E2U2tr2/i6C3G7J+Gex7KTI8eb9/cbz/yC+/srl++P7/Znf+MPv/cn3/rz6/dL8/2fe/8v+/s/6/knN87f5/jx5uRZtwjRppU6I1liM2Bhcrmyl2kZ5uA9vzjd0wj95yjVstqze9hiD2zOH1kqv7Wqv5K7S7LLn/YfT+sfp/bPf+4jb/YbX+735/SjQ/T7J+VjV9rTs+0ns/6Dk/mPJ7eD9/b/8/Q9YxA5Zxw5Zwg5dwg5byhdn0kSO2xFezg5gwg1XwRBjwkqW4EeT3kuY20mV2BBVtg5avxFoxQ9Yu0+g3xJYslWi5h2q9SKA4AtTwAxjzUGN2UiN0VOm4yKj8NX7/0WQ3RFtyUaR1h95zSOc706J0Bt34VCi5yqw9F6s6SOI5Bx02h2M6Rh13SCX7k2c3E6a4lCd5EeQ2iVtyCJ54BVt3ROV8x+0+jS9+hGq+Ra0/WK37sPy/iOR6R1w2A5p0y9nrjJ/1EaO1yV1yDt+zBaJ4hF83FuJyg5nyhei9hJ96BN35ByV5ymq8S151muu5UCr6hzE/xS+/47h/3/r/xyG5SKV6yJ43BlswBJivA5z2A9duw5s1C590CZXpDVvuhec9BGM7xJQrxKE61yo4DOF4DeZ64jG8bbp/h/Q/j2F0xpr1xliyROA4CRst1mc10d8whNQqDqb3Sig5qrh/qLW9iZ/5UeY5pDU9UWf6J7O9oju/mDV/aXp/orj/6P7/4z3/2Pr/iLa/kaDxnuw57rf9ZfW+2Sd5G3X/7LW9zyR51TI+Dao7Zno//A+0MwAAADpdFJOUwD7Lv/+/v4CAQIK/v7+/P7+b/7+/iKh/f5LjBv8z/4d/v5cNf6A5piF/Pts9PST/tP+Qd0Oc/72Pf5B/Pv0/vv7zqD6/4qU+5JjlCv7ff79/lz628SK/pmm+/5cnh/+/vPht/r+pPKX44z7+/z7/P7+wNL////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+///////////////////////+1awirQAAA+BJREFUOMtjYCAXcMIAAVW4OKjKgJjDW8nXyytT0NOKCyjAgUudt29RwMdPb48dO/b2aEa6MkQvpjrlQqCqz3ki/j4+2VnCv44+S5XHVAm0xHPixHXuOSIiX4TfHeo87OJin/IjTYmBgwNdndvEibkF/sIiX26/+7f6yJo1K/fPtL/53BXDPKeJQkLvPx87Knz79qzOI2tWr959acFaAYE3rii2cwDVOQutU8k/+uHv4cNrQMpWrFgxTXHtWoc3gkgqORkEJzqvW3fr/f8Paye4rFzZufvSisuXr95QVJw9W+C3MlwlB4O87Tp+fn6VV2sVgOo6wequ7tkz4zWP3QHrm45IBroJJd/if37w0CygaZ0Tpi1YMO/qnr17b7yeMePFAZufSlAjQQbeyle5qbBq1apZIGUn1s87DlS3/DrPsj8vr/McdES48Lv7q4NPVq3avx+sbP2cOV0zZsxfftfuZcdsbm6Bb1YM7BATk64pPHk6C6hqGljVnK6uZSfnzl2+bObMmR3csx0OhkIUMpgkHgKatW/fvO3HjwMVdXWdPHly7oYNd3mA6jo6uLm5Q0ABDcSxCU/37du+/f79HfPnz507dwNQ0Ya7dyuudyzu6Fi8eNGiOjUukEp2BqZDcXE7dpw5c+bcuY0bK+CgbtEioLK6+kmVLKIQhRZP4iwtgWp6gKCqpwoCyivqQACorLeXhQnkSKDC83a7dgEVlfeUw0BJScm9SfVAAFTHwjIdqpBpafyuspISIEICxSWV9ZMmLQGr0wVbzcEgbb518+YDFcWlxUAAUgMGNXfqKisrl1QCFaqZgL3NwGkgzsbb2LC5u7sYAUprWu/UL2HZto1FZrosJGbYGWIMbdjYpjRuvtddU1MDVAMB3U3bljZdubJNZqceJMDZGSQv8vX1TZnS2HCguwaqqrS5ubm1CQiuRE3faQSNGQYu469glVMalnZ315SBAUghUGX7Y/3psrD0yM6gvQmoEGh5Y0Pv+Xs1pdUQlUCF7e2PzXeawgwEGQm0nI2tsaFhYdvC3qVl1WClZ1vb2+XkHskisgLQlRc0IeoWtrUxn2+urT5dXVt99ixQ4UWEC8EqNS5o8jaClLX191bXQsDps+1hWo+QLAYnIfULMrxAdf39s6dWt4BB7enT4lqb9Bg40DK2+iZea2tmZub+qbsmA0HLqZZT4vqbpBgYMIoKbZ2H166Z1U9mhYKgUw+CJdHVgd0pGvHwmllvJCMYsJ56oKPBheI+hEoGpnDdrVungsBWQwNVaQas6oCWAIWlo6WkxMTEVAOZQFo5cJW57Mgm4FYGMRUGyK0tAGzv0vrmaa6xAAAAAElFTkSuQmCC'}
+  />
 const apps: AppItemProps[] = [
+  {
+    icon: 'http://132.121.223.12:7001/static/webssh/favicon2.ico',
+    title: '运营数据汇聚平台',
+    desc: '企业全融合数字化平台',
+    url: 'http://132.121.223.12:7001/index.html/#/login',
+  },
   {
     icon: 'http://132.126.207.124:8686/udal-manager/static/favicon.ico',
     title: 'CSV-HUDI处理平台',
     desc: 'Hudi 批量割接、稽核任务管理平台',
     url: 'http://132.126.207.124:8686/udal-manager/',
   },
+  {
+    icon: defaultAppIcon,
+    title: '汇聚平台辅助工具',
+    desc: '辅助工具，用于帮助运营工作，不断改进中',
+    url: 'http://132.121.204.100:38080/tools/#/',
+  },
+  {
+    icon: defaultAppIcon,
+    title: 'B12-Yarn',
+    desc: 'B12集群Yarn页面',
+    url: 'http://132.126.207.125:8088/cluster/scheduler',
+  },
 ]
 
 const App: React.FC = () => {
@@ -19,68 +54,75 @@ const App: React.FC = () => {
   const location = useLocation()
   const currentYear = useMemo(() => dateFormat(new Date(), 'yyyy'), [])
   return (
-    <ProLayout
-      siderWidth={180}
-      token={{
-        colorTextAppListIcon: '#dfdfdf',
-        colorTextAppListIconHover: '#ffffff',
-        header: {
-          colorBgHeader: '#292f33',
-          colorHeaderTitle: '#ffffff',
-          colorTextMenu: '#dfdfdf',
-          colorTextMenuSecondary: '#dfdfdf',
-          colorTextMenuSelected: '#ffffff',
-          colorTextMenuActive: '#ffffff',
-          colorBgMenuItemSelected: '#22272b',
-          colorTextRightActionsItem: '#dfdfdf',
-        },
-        pageContainer: {
-          paddingBlockPageContainerContent: 0,
-          paddingInlinePageContainerContent: 0,
-          marginBlockPageContainerContent: 0,
-          marginInlinePageContainerContent: 0,
-        },
-      }}
-      appList={apps}
-      defaultCollapsed={false}
-      breakpoint={false}
-      disableMobile={true}
-      logo={<img src="icon.png" alt="logo"/>}
-      title="Hudi 服务总台"
-      route={menus}
-      location={{pathname: location.pathname}}
-      menu={{type: 'sub'}}
-      menuItemRender={(item, dom) => {
-        return <div onClick={() => navigate(item.path || '/')}>{dom}</div>
-      }}
-      fixSiderbar={true}
-      layout="mix"
-      splitMenus={true}
-      style={{minHeight: '100vh'}}
-      contentStyle={{backgroundColor: 'white', padding: '10px 10px 10px 20px'}}
-      menuFooterRender={props => {
-        return (
-          <div className="text-sm text-center" style={{userSelect: 'none', msUserSelect: 'none'}}>
-            {props?.collapsed
-              ? undefined
-              : <div>© 2023-{currentYear} 汇聚平台</div>}
-          </div>
-        )
-      }}
-    >
-      <ConfigProvider
-        theme={{
-          components: {
-            Card: {
-              bodyPadding: 0,
-              bodyPaddingSM: 0,
-            },
+    <ProLayoutDiv>
+      <ProLayout
+        siderWidth={180}
+        token={{
+          colorTextAppListIcon: '#dfdfdf',
+          colorTextAppListIconHover: '#ffffff',
+          header: {
+            colorBgHeader: '#292f33',
+            colorHeaderTitle: '#ffffff',
+            colorTextMenu: '#dfdfdf',
+            colorTextMenuSecondary: '#dfdfdf',
+            colorTextMenuSelected: '#ffffff',
+            colorTextMenuActive: '#ffffff',
+            colorBgMenuItemSelected: '#22272b',
+            colorTextRightActionsItem: '#dfdfdf',
+          },
+          pageContainer: {
+            paddingBlockPageContainerContent: 0,
+            paddingInlinePageContainerContent: 0,
+            marginBlockPageContainerContent: 0,
+            marginInlinePageContainerContent: 0,
           },
         }}
+        appList={apps}
+        defaultCollapsed={false}
+        breakpoint={false}
+        disableMobile={true}
+        logo={<img src="icon.png" alt="logo"/>}
+        title="Hudi 服务总台"
+        route={menus}
+        location={{pathname: location.pathname}}
+        menu={{type: 'sub'}}
+        menuItemRender={(item) => {
+          return (
+            <div onClick={() => navigate(item.path || '/')}>
+              {item.icon}
+              <span className="ml-2">{item.name}</span>
+            </div>
+          )
+        }}
+        fixSiderbar={true}
+        layout="mix"
+        splitMenus={true}
+        style={{minHeight: '100vh'}}
+        contentStyle={{backgroundColor: 'white', padding: '10px 10px 10px 20px'}}
+        menuFooterRender={props => {
+          return (
+            <div className="text-sm text-center" style={{userSelect: 'none', msUserSelect: 'none'}}>
+              {props?.collapsed
+                ? undefined
+                : <div>© 2023-{currentYear} 汇聚平台</div>}
+            </div>
+          )
+        }}
       >
-        <Outlet/>
-      </ConfigProvider>
-    </ProLayout>
+        <ConfigProvider
+          theme={{
+            components: {
+              Card: {
+                bodyPadding: 0,
+                bodyPaddingSM: 0,
+              },
+            },
+          }}
+        >
+          <Outlet/>
+        </ConfigProvider>
+      </ProLayout>
+    </ProLayoutDiv>
   )
 }
 
diff --git a/service-web/client/src/route.tsx b/service-web/client/src/route.tsx
index 302d924..53079d4 100644
--- a/service-web/client/src/route.tsx
+++ b/service-web/client/src/route.tsx
@@ -18,10 +18,15 @@ import {values} from 'licia'
 import {Navigate, type RouteObject} from 'react-router'
 import Conversation from './pages/ai/Conversation.tsx'
 import Feedback from './pages/ai/feedback/Feedback.tsx'
+import FlowEditor from './pages/ai/flow/FlowEditor.tsx'
 import DataDetail from './pages/ai/knowledge/DataDetail.tsx'
 import DataImport from './pages/ai/knowledge/DataImport.tsx'
 import DataSegment from './pages/ai/knowledge/DataSegment.tsx'
 import Knowledge from './pages/ai/knowledge/Knowledge.tsx'
+import FlowTask from './pages/ai/task/FlowTask.tsx'
+import FlowTaskAdd from './pages/ai/task/FlowTaskAdd.tsx'
+import FlowTaskTemplate from './pages/ai/task/template/FlowTaskTemplate.tsx'
+import FlowTaskTemplateEdit from './pages/ai/task/template/FlowTaskTemplateEdit.tsx'
 import App from './pages/App.tsx'
 import Cloud from './pages/overview/Cloud.tsx'
 import Overview from './pages/overview/Overview.tsx'
@@ -34,11 +39,6 @@ import Yarn from './pages/overview/Yarn.tsx'
 import YarnCluster from './pages/overview/YarnCluster.tsx'
 import Test from './pages/Test.tsx'
 import {commonInfo} from './util/amis.tsx'
-import FlowEditor from './pages/ai/flow/FlowEditor.tsx'
-import FlowTaskTemplate from './pages/ai/task/template/FlowTaskTemplate.tsx'
-import FlowTaskTemplateEdit from './pages/ai/task/template/FlowTaskTemplateEdit.tsx'
-import FlowTask from './pages/ai/task/FlowTask.tsx'
-import FlowTaskAdd from './pages/ai/task/FlowTaskAdd.tsx'
 
 export const routes: RouteObject[] = [
   {
@@ -245,8 +245,8 @@ export const menus = {
         },
         {
           path: '1089caa6-9477-44a5-99f1-a9c179f6cfd3',
-          name: '任务',
-          icon: <FileTextOutlined/>,
+          name: '流程任务',
+          icon: <GatewayOutlined/>,
           routes: [
             {
               path: '/ai/flow_task',