feat: 审核添加状态过滤

.gitignore

@@ -65,3 +65,4 @@ mvnw
 /react-ui/types/tsconfig.tsbuildinfo
 /react-ui/storybook-static
 /react-ui/.storybook/scripts
+/react-ui/dist.zip

k8s/template-yaml/k8s-5auth.yaml

@@ -18,6 +18,11 @@ spec:
         image: ${k8s-5auth-image}
         ports:
         - containerPort: 9200
+        env:
+        - name: TZ
+          value: Asia/Shanghai
+        - name: JAVA_TOOL_OPTIONS
+          value: "-Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=*:5005"
 
 ---
 apiVersion: v1
@@ -28,9 +33,15 @@ metadata:
 spec:
   type: NodePort
   ports:
-    - port: 9200
+    - name: http
+      port: 9200
       nodePort: 31206
       protocol: TCP
+    - name: debug
+      nodePort: 31221
+      port: 5005
+      protocol: TCP
+      targetPort: 5005
   selector:
     app: ci4s-auth
 

react-ui/config/config.ts

@@ -127,6 +127,8 @@ export default defineConfig({
   headScripts: [
     // 解决首次加载时白屏的问题
     { src: '/scripts/loading.js', async: true },
+    { src: '/scripts/resize.js', async: true },
+    // { src: '/scripts/resize-breakpoint.js', async: true },
   ],
   // links: [
   //   {
@@ -157,4 +159,19 @@ export default defineConfig({
     javascriptEnabled: true,
   },
   valtio: {},
+  qiankun: {
+    master: {
+      sandbox: true,
+      apps: [
+        {
+          name: 'app1',
+          entry: '//localhost:7001',
+        },
+        {
+          name: 'app2',
+          entry: '//localhost:3000',
+        },
+      ],
+    },
+  },
 });

react-ui/config/defaultSettings.ts

@@ -9,8 +9,7 @@ const Settings: ProLayoutProps & {
 } = {
   locale: 'zh-CN',
   navTheme: 'light',
-  // 拂晓蓝
-  colorPrimary: '#1664ff',
+  colorPrimary: '#514cf9',
   // layout: 'mix',
   contentWidth: 'Fluid',
   fixedHeader: false,

react-ui/config/proxy.ts

@@ -20,14 +20,14 @@ export default {
     // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
     '/api/': {
       // 要代理的地址
-      // target: 'http://172.20.32.197:31213', // 开发环境
+      target: 'http://172.20.32.197:31213', // 开发环境
       // target: 'http://172.20.32.235:31213', // 测试环境
-      target: 'http://172.20.32.44:8082',
-      // target: 'http://172.20.32.150:8082',
+      // target: 'http://172.20.32.127:8082',
+      // target: 'http://172.20.32.164:8082',
       // 配置了这个可以从 http 代理到 https
       // 依赖 origin 的功能可能需要这个，比如 cookie
       changeOrigin: true,
-      pathRewrite: { '^/api': '' },
+      // pathRewrite: { '^/api': '' },
     },
     '/profile/avatar/': {
       target: 'http://172.20.32.235:31213',

react-ui/config/routes.ts

@@ -13,7 +13,20 @@
 export default [
   {
     path: '/',
-    redirect: '/workspace',
+    redirect: '/home',
+  },
+  {
+    name: '首页',
+    path: '/home',
+    layout: false,
+    routes: [
+      {
+        name: '首页',
+        path: '',
+        key: 'home',
+        component: './Home/index',
+      },
+    ],
   },
   {
     name: '工作空间',
@@ -25,6 +38,12 @@ export default [
         key: 'workspace',
         component: './Workspace/index',
       },
+      {
+        name: '消息中心',
+        path: 'message',
+        key: 'message',
+        component: './Message/index',
+      },
     ],
   },
   {
@@ -141,12 +160,23 @@ export default [
           {
             name: '实验对比',
             path: 'compare',
-            component: './Experiment/Comparison/index',
+            routes: [
+              {
+                name: '实验对比',
+                path: '',
+                component: './Experiment/Comparison/index',
+              },
+              {
+                name: '可视化对比',
+                path: 'compare-visual',
+                component: './Experiment/Aim/index',
+              },
+            ],
           },
           {
-            name: '实验可视化对比',
-            path: 'compare-visual',
-            component: './Experiment/Aim/index',
+            name: '可视化',
+            path: 'visual',
+            component: './Experiment/Tensorboard/index',
           },
         ],
       },
@@ -218,7 +248,18 @@ export default [
           {
             name: '实验实例详情',
             path: 'instance/:experimentId/:id',
-            component: './HyperParameter/Instance/index',
+            routes: [
+              {
+                name: '实验实例详情',
+                path: '',
+                component: './HyperParameter/Instance/index',
+              },
+              {
+                name: '可视化对比',
+                path: 'compare-visual',
+                component: './HyperParameter/Aim/index',
+              },
+            ],
           },
         ],
       },
@@ -395,6 +436,18 @@ export default [
           },
         ],
       },
+      {
+        name: '知识图谱',
+        path: 'knowledge',
+        routes: [
+          {
+            name: '知识图谱',
+            path: '',
+            key: 'knowledge',
+            component: './Knowledge/index',
+          },
+        ],
+      },
     ],
   },
   {
@@ -535,6 +588,11 @@ export default [
           },
         ],
       },
+      {
+        name: '审核管理',
+        path: 'approval',
+        component: './System/Approval',
+      },
     ],
   },
   {
@@ -550,29 +608,41 @@ export default [
     ],
   },
   {
-    name: '算力积分',
-    path: '/points',
+    name: 'mixed',
+    path: '/mixed',
     routes: [
       {
-        name: '算力积分',
+        name: '父子页面混合',
         path: '',
-        key: 'points',
-        component: './Points/index',
+        key: 'mixed',
+        component: './Mixed/index',
       },
     ],
   },
   {
-    name: '知识图谱',
-    path: '/knowledge',
+    name: '算力积分',
+    path: '/points',
     routes: [
       {
-        name: '知识图谱',
+        name: '算力积分',
         path: '',
-        key: 'knowledge',
-        component: './Knowledge/index',
+        key: 'points',
+        component: './Points/index',
       },
     ],
   },
+  {
+    path: '/app1/*',
+    name: '子应用1',
+    microApp: 'app1',
+    layout: true,
+  },
+  {
+    path: '/app2/*',
+    name: '子应用2',
+    microApp: 'app2',
+    layout: true,
+  },
   {
     path: '*',
     layout: false,

react-ui/mock/home.ts

@@ -0,0 +1,600 @@
+import { defineMock } from 'umi';
+
+export default defineMock({
+  'GET /api/mmp/workspace/getPublicDatasets': {
+    msg: '操作成功',
+    code: 200,
+    data: {
+      content: [
+        {
+          name: 'R1蒸馏模型数学推理能力测试集',
+          identifier: 'public_dataset_20250519163052',
+          description:
+            '共728道数学推理题目，包括：\nMATH-500：一组具有挑战性的高中数学竞赛问题数据集，涵盖七个科目（如初等代数、代数、数论）共500道题。\nGPQA-Diamond：该数据集包含物理、化学和生物学子领域的硕士水平多项选择题，共198道题。\nAIME-2024：美国邀请数学竞赛的数据集，包含30道数学题。',
+          is_public: true,
+          time_ago: '2个月前',
+          full_last_update_time: '2025-06-23T14:36:48.000+08:00',
+          id: 91,
+          visits: 1,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '有机化学VLM',
+          identifier: 'public_dataset_20250527113008',
+          description: 'Dataset Card for "Chemistry_text_to_image"',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:06:32.000+08:00',
+          id: 134,
+          visits: 2,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'OQMD 开源量子材料数据集',
+          identifier: 'public_dataset_20250527141950',
+          description:
+            'QMD 包含了通过密度泛函理论 (DFT) 计算得到的超过 1,226,781 种材料的热力学和结构性质。数据库中的数据来源于无机晶体结构数据库 (ICSD)，包括了近 300,000 种化合物的 DFT 总能量计算以及常见晶体结构的修饰',
+          is_public: true,
+          time_ago: '2个月前',
+          full_last_update_time: '2025-06-23T14:38:43.000+08:00',
+          id: 136,
+          visits: 5,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '不可降解和可生物降解的材料数据集',
+          identifier: 'public_dataset_20250527142930',
+          description:
+            '此数据集包含大约 256K 图像（156K 原始数据），代表两类：可生物降解和不可生物降解。\n可生物降解，包含可被微生物自然分解的材料，如食物、植物、水果等。这种材料的废物可以加工成堆肥。\n不可生物降解，包含无法自然分解的材料，例如塑料、金属、无机元素等。这种材料的废料将被回收成新材料。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:06:11.000+08:00',
+          id: 137,
+          visits: 2,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '金属有机框架材料预测',
+          identifier: 'public_dataset_20250527143028',
+          description:
+            '金属有机框架 （MOF） 是一类通过金属离子（或金属簇）和有机配体之间的配位键连接的结晶材料。MOF 材料具有多孔结构、高度可调和巨大的比表面积，使其在吸附、储气、分离、催化等领域具有广泛的应用潜力。预测合成是指通过计算机模拟和机器学习方法对新型 MOF 材料的合成路线和条件进行预测和设计。\n',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:06:01.000+08:00',
+          id: 138,
+          visits: 2,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '纤维增强复合材料的弹性特性',
+          identifier: 'public_dataset_20250527144649',
+          description:
+            '纤维增强复合材料弹性特性数据集主要包含其力学性能参数，如弹性模量（纵向、横向）、剪切模量、泊松比以及应力-应变关系等。数据通常通过实验测试（拉伸、压缩、弯曲试验）或计算模拟（有限元分析、细观力学模型）获得，涵盖不同纤维类型（碳纤维、玻璃纤维、芳纶等）、基体材料（环氧树脂、热塑性塑料等）及铺层方式（单向、编织、多轴向）的组合。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:05:24.000+08:00',
+          id: 142,
+          visits: 2,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'OCR 合成材料',
+          identifier: 'public_dataset_20250527144821',
+          description:
+            'OCR（光学字符识别）合成材料数据集是用于训练和评估文本识别模型的专用数据集，主要包含人工生成的文本图像，模拟真实场景中的材料标签、说明书、包装文字等。这类数据集通常涵盖多种字体、背景、光照条件、扭曲变形及噪声干扰，以提高模型鲁棒性。数据可能包含金属、塑料、复合材料等工业材料的名称、参数（如成分、规格、批次号）及安全标识',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:05:18.000+08:00',
+          id: 143,
+          visits: 2,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '钙钛矿稳定性',
+          identifier: 'public_dataset_20250527145953',
+          description:
+            '这个钙钛矿稳定性数据集给出了潜在钙钛矿材料成分相对于用 DFT 计算的凸包的能量。钙钛矿数据集还包括包含钙钛矿结构中 A 位点、B 位点和 X 位点信息的列，以便对数据进行更高级的分组。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:04:30.000+08:00',
+          id: 148,
+          visits: 2,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '纳米颗粒毒性数据集',
+          identifier: 'public_dataset_20250527150856',
+          description:
+            '该数据集是一个毒性数据集，由几列组成，捕获了纳米颗粒 （NPs） 的各种属性及其毒理学影响。该数据集包含与纳米颗粒 （NPs） 及其特性相关的各种特征，这些特征可能与毒性分类有关',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:04:41.000+08:00',
+          id: 149,
+          visits: 2,
+          praises_count: 1,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '3D多模态医疗数据集-分割-fanshuai',
+          identifier: 'public_dataset_20250519151852',
+          description: '大规模通用 3D 医疗图像分割数据集 (M3D-Seg)',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-22T10:20:52.000+08:00',
+          id: 82,
+          visits: 0,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '中文基于满血DeepSeek-R1蒸馏数据集',
+          identifier: 'public_dataset_20250519161406',
+          description:
+            '注意：提供了直接SFT使用的版本。将数据中的思考和答案整合成output字段，大部分SFT代码框架均可直接直接加载训练。\n本数据集为中文开源蒸馏满血R1的数据集，数据集中不仅包含math数据，还包括大量的通用类型数据，总数量为110K。\n为什么开源这个数据？\nR1的效果十分强大，并且基于R1蒸馏数据SFT的小模型也展现出了强大的效果，但检索发现，大部分开源的R1蒸馏数据集均为英文数',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-19T16:14:06.000+08:00',
+          id: 88,
+          visits: 0,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: '中文Text2SQL数据集',
+          identifier: 'public_dataset_20250519165142',
+          description:
+            '同时包含用于训练和测试表格问答预训练模型的数据，数据集包含500条训练数据和100条测试数据。\n表格问答预训练模型的训练和测试数据，支持中文，支持通用领域的表格问答。另外，也可以从本model card中，点击数据集文件panel，然后点击数据文件选项，即可下载trian.zip和test.zip文件',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-19T16:51:43.000+08:00',
+          id: 93,
+          visits: 0,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'MatPES',
+          identifier: 'public_dataset_20250521090336',
+          description:
+            '使用元素周期表几乎完全覆盖的势能面数据集来训练基础 电位 （FP），即机器学习原子间电位 （MLIP），几乎完全覆盖了周期性 桌子。MatPES 是材料虚拟实验室和材料项目的一项倡议，旨在解决此类材料 PES 数据集中的关键缺陷。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:10:21.000+08:00',
+          id: 100,
+          visits: 2,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'innovation_contest/innov202305100905418',
+          identifier: 'public_dataset_20250526093119',
+          description:
+            '1. 赛题解读PPT；2.根据流动状态分开的数据集，方便选手测试自己模型的变状态泛化性能\n新的数据中输入输出与均在一个文件夹中\n新的数据集中，模型文件简称对应的状态如下：\nCBFS 曲线后台阶 雷诺数Re=13700\nCDN 收缩扩张管道 Re=12600\nduct 方管 Re在文件名中包含，比如duct_Re1100.csv代表Re=1100\nperhill 周期山 Re=5600，文件名后面',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:08:27.000+08:00',
+          id: 122,
+          visits: 3,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'WIDERFace',
+          identifier: 'public_dataset_20250526094839',
+          description:
+            '32,203张图像，并对393,703张像样本图像中所描述的在尺度、姿势和遮挡方面具有高度可变性的面孔进行标记。较宽的人脸数据集基于61个事件类进行组织。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:08:18.000+08:00',
+          id: 123,
+          visits: 2,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'StanfordSentimentTreebank',
+          identifier: 'public_dataset_20250526095521',
+          description:
+            '用于情感分析的数据集，其中包含11855个句子的语法分析树中215154个短语的细粒度情感标签，并为情感组成提出了新挑战。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:08:12.000+08:00',
+          id: 124,
+          visits: 2,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'COCO',
+          identifier: 'public_dataset_20250526100341',
+          description:
+            'COCO是大规模的对象检测，分割和字幕数据集。 它包含：330K图像（标为> 200K），150万个对象实例，80个对象类别。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:07:56.000+08:00',
+          id: 125,
+          visits: 2,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'BillionWords',
+          identifier: 'public_dataset_20250526101006',
+          description: '该项目的目的是为语言建模实验提供标准的培训和测试设置，包含10亿字。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:07:47.000+08:00',
+          id: 126,
+          visits: 2,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'car_ims',
+          identifier: 'public_dataset_20250527084401',
+          description:
+            '斯坦福汽车数据集包含196类汽车的16,185张图像。数据被分为8,144个训练图像和8,041个测试图像，其中每个类别已大致分为50-50个分割。',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:07:20.000+08:00',
+          id: 128,
+          visits: 2,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+        {
+          name: 'IU-xrays',
+          identifier: 'public_dataset_20250527093542',
+          description: '放射图像',
+          is_public: true,
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:07:12.000+08:00',
+          id: 129,
+          visits: 2,
+          praises_count: 0,
+          create_by: 'fanshuai',
+          owner: 'fanshuai',
+        },
+      ],
+      pageable: {
+        sort: {
+          sorted: false,
+          unsorted: true,
+          empty: true,
+        },
+        pageNumber: 0,
+        pageSize: 20,
+        offset: 0,
+        unpaged: false,
+        paged: true,
+      },
+      last: false,
+      totalElements: 39,
+      totalPages: 2,
+      first: true,
+      number: 0,
+      sort: {
+        sorted: false,
+        unsorted: true,
+        empty: true,
+      },
+      numberOfElements: 20,
+      size: 20,
+      empty: false,
+    },
+  },
+  'GET /api/mmp/workspace/getPublicModels': {
+    msg: '操作成功',
+    code: 200,
+    data: {
+      content: [
+        {
+          id: 109,
+          name: '介电',
+          create_by: 'ceshi',
+          description: '介电材料模型',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:09:54.000+08:00',
+          owner: 'ceshi',
+          identifier: 'public_model_20250522110231',
+          is_public: true,
+          praises_count: 2,
+        },
+        {
+          id: 156,
+          name: 'ChatGLM2-6B',
+          create_by: 'fanshuai',
+          description:
+            'ChatGLM2-6B 是开源中英双语对话模型 ChatGLM-6B 的第二代版本，在保留了初代模型对话流畅、部署门槛较低等众多优秀特性的基础之上',
+          time_ago: '2个月前',
+          full_last_update_time: '2025-06-20T16:09:02.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528093916',
+          is_public: true,
+          praises_count: 1,
+        },
+        {
+          id: 155,
+          name: '鹏城·脑海(原鹏城·盘古)α-2.6B-CPU',
+          create_by: 'fanshuai',
+          description:
+            '「鹏城·盘古α」由以鹏城实验室为首的技术团队联合攻关，首次基于“鹏城云脑Ⅱ”和国产MindSpore框架的自动混合并行模式实现在2048卡算力集群上的大规模分布式训练，训练出业界首个2000亿参数以中文为核心的预训练生成语言模型。鹏城·盘古α预训练模型支持丰富的场景应用，在知识问答、知识检索、知识推理、阅读理解等文本生成领域表现突出，具备很强的小样本学习能力。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:03:36.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528093254',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 157,
+          name: 'ernie-3.0-base-zh',
+          create_by: 'fanshuai',
+          description: '大规模知识增强预训练，用于语言理解和生成',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:03:08.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528094825',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 158,
+          name: 'FastChat-T5',
+          create_by: 'fanshuai',
+          description:
+            'FastChat-T5是一款开源聊天机器人，通过微调Flan-t5-xl (3B参数）并基于从ShareGPT.收集的用户共享对话进行训练。它基于编码器-解码器变压器架构，能够自回归生成对用户输入的响应。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:03:19.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528101831',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 159,
+          name: 'Kolors-IP-Adapter-Plus',
+          create_by: 'fanshuai',
+          description: '基于Kolors-Basemodel提供了IP-Adapter-Plus的权重和推理代码',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:03:01.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528102217',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 160,
+          name: 'Florence-2-base',
+          create_by: 'fanshuai',
+          description:
+            'Florence-2是一款先进的视觉基础模型，采用提示式方法处理广泛的视觉和视觉-语言任务。Florence-2能够通过简单的文本提示来执行诸如字幕生成、物体检测和分割等任务。该模型利用了包含54亿个注释的FLD-5B数据集，这些注释覆盖了1.26亿张图像，从而掌握了多任务学习。模型的序列到序列架构使其在零样本和微调设置中表现出色，证明了其作为竞争性视觉基础模型的实力。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:02:55.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528102750',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 161,
+          name: 'E5-base',
+          create_by: 'fanshuai',
+          description: '弱监督对比预训练的文本嵌入。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:02:48.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528103059',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 162,
+          name: 'Mini-InternVL-Chat',
+          create_by: 'fanshuai',
+          description:
+            '使用了与InternVL 1相同的数据来训练这个较小的模型。此外，由于较小模型的训练成本较低，我们在训练时采用了8K的上下文长度。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:02:39.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528105945',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 163,
+          name: 'Verdict-Classifier',
+          create_by: 'fanshuai',
+          description:
+            '该模型是基于xlm-roberta-base的微调版本，基于谷歌事实核查工具API提供的2,500条去重多语言判决，并通过谷歌云翻译API转换成65种语言',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:02:27.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528110545',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 164,
+          name: 'Text2Vec-Base-Multilingual',
+          create_by: 'fanshuai',
+          description:
+            '这是一个CoSENT（余弦句子）模型，它将句子映射到一个384维的密集向量空间，并可用于任务，例如句子嵌入、文本匹配或语义搜索。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:02:19.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528110858',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 167,
+          name: 'Latex-OCR',
+          create_by: 'fanshuai',
+          description: '识别图像中的数学公式并转换为Latex源码。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T18:02:09.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528112153',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 169,
+          name: 'XLNet',
+          create_by: 'fanshuai',
+          description:
+            'XLNet是一种基于新型广义置换语言建模目标的新型无监督语言表示学习方法。此外，XLNet采用Transformer-XL作为骨干模型，在处理长上下文的语言任务中表现出色。总体而言，XLNet在包括问答、自然语言推理、情感分析和文档排序在内的多种下游语言任务中取得了最先进的（SOTA）成果。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-28T17:29:05.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250528172905',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 173,
+          name: ' GTE-base',
+          create_by: 'fanshuai',
+          description:
+            'GTE模型由阿里巴巴达摩学院训练。这些模型主要基于BERT框架，目前提供三种不同规模的版本，分别是GTE-large、GTE-base和GTE-small。GTE模型在大规模的相关文本对语料库上进行训练，涵盖了广泛的领域和场景。这使得GTE模型能够应用于文本嵌入的多种下游任务，如信息检索、语义文本相似性分析、文本重排序等。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-29T09:14:15.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250529091415',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 174,
+          name: 'Tiny-lm',
+          create_by: 'fanshuai',
+          description:
+            '此仓库提供了一个小型的1600万参数语言模型，该模型基于英文和日文维基百科数据训练。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-29T09:18:57.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250529091857',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 175,
+          name: "Snowflake's Arctic-embed-s",
+          create_by: 'fanshuai',
+          description:
+            'snowflake-arctic-embed是一套文本嵌入模型，专注于创建高性能的高质量检索模型。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-29T09:23:58.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250529092358',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 176,
+          name: 'ViTMatte model',
+          create_by: 'fanshuai',
+          description:
+            'ViTMatte是一种简单的图像抠图方法，旨在准确估计图像中的前景物体。该模型由一个Vision Transformer（ViT）和一个轻量级头部组成。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-29T09:41:07.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250529094107',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 177,
+          name: 'Wartortle',
+          create_by: 'fanshuai',
+          description: '此模型专为语义自动补全功能而设计。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-29T09:44:43.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250529094443',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 179,
+          name: 'Cerebras-GPT',
+          create_by: 'fanshuai',
+          description:
+            'Cerebras-GPT系列的发布旨在通过开放架构和数据集促进对大型语言模型（LLM）扩展规律的研究，并展示在Cerebras软硬件栈上训练LLM的简便性和可扩展性。所有Cerebras-GPT模型均可在Hugging Face.上获取。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-29T10:01:52.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250529100152',
+          is_public: true,
+          praises_count: 0,
+        },
+        {
+          id: 180,
+          name: 'Qwen2-1.5B-Instruct-AWQ',
+          create_by: 'fanshuai',
+          description:
+            'Qwen2是Qwen大语言模型系列的最新成员。我们为Qwen2推出了多个基础语言模型和指令调优语言模型，参数规模从0.5亿到72亿不等，其中包括一个专家混合模型。本仓库包含1.5亿参数的指令调优Qwen2模型。',
+          time_ago: '3个月前',
+          full_last_update_time: '2025-05-29T10:13:53.000+08:00',
+          owner: 'fanshuai',
+          identifier: 'public_model_20250529101353',
+          is_public: true,
+          praises_count: 0,
+        },
+      ],
+      pageable: {
+        sort: {
+          sorted: false,
+          unsorted: true,
+          empty: true,
+        },
+        pageNumber: 0,
+        pageSize: 20,
+        offset: 0,
+        unpaged: false,
+        paged: true,
+      },
+      last: false,
+      totalElements: 28,
+      totalPages: 2,
+      first: true,
+      number: 0,
+      sort: {
+        sorted: false,
+        unsorted: true,
+        empty: true,
+      },
+      numberOfElements: 20,
+      size: 20,
+      empty: false,
+    },
+  },
+});

react-ui/mock/notices.ts

@@ -1,115 +0,0 @@
-import { Request, Response } from 'express';
-
-const getNotices = (req: Request, res: Response) => {
-  res.json({
-    data: [
-      {
-        id: '000000001',
-        avatar:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/MSbDR4FR2MUAAAAAAAAAAAAAFl94AQBr',
-        title: '你收到了 14 份新周报',
-        datetime: '2017-08-09',
-        type: 'notification',
-      },
-      {
-        id: '000000002',
-        avatar:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/hX-PTavYIq4AAAAAAAAAAAAAFl94AQBr',
-        title: '你推荐的 曲妮妮 已通过第三轮面试',
-        datetime: '2017-08-08',
-        type: 'notification',
-      },
-      {
-        id: '000000003',
-        avatar:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/jHX5R5l3QjQAAAAAAAAAAAAAFl94AQBr',
-        title: '这种模板可以区分多种通知类型',
-        datetime: '2017-08-07',
-        read: true,
-        type: 'notification',
-      },
-      {
-        id: '000000004',
-        avatar:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Wr4mQqx6jfwAAAAAAAAAAAAAFl94AQBr',
-        title: '左侧图标用于区分不同的类型',
-        datetime: '2017-08-07',
-        type: 'notification',
-      },
-      {
-        id: '000000005',
-        avatar:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Mzj_TbcWUj4AAAAAAAAAAAAAFl94AQBr',
-        title: '内容不要超过两行字，超出时自动截断',
-        datetime: '2017-08-07',
-        type: 'notification',
-      },
-      {
-        id: '000000006',
-        avatar:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/eXLzRbPqQE4AAAAAAAAAAAAAFl94AQBr',
-        title: '曲丽丽 评论了你',
-        description: '描述信息描述信息描述信息',
-        datetime: '2017-08-07',
-        type: 'message',
-        clickClose: true,
-      },
-      {
-        id: '000000007',
-        avatar:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/w5mRQY2AmEEAAAAAAAAAAAAAFl94AQBr',
-        title: '朱偏右 回复了你',
-        description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
-        datetime: '2017-08-07',
-        type: 'message',
-        clickClose: true,
-      },
-      {
-        id: '000000008',
-        avatar:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/wPadR5M9918AAAAAAAAAAAAAFl94AQBr',
-        title: '标题',
-        description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
-        datetime: '2017-08-07',
-        type: 'message',
-        clickClose: true,
-      },
-      {
-        id: '000000009',
-        title: '任务名称',
-        description: '任务需要在 2017-01-12 20:00 前启动',
-        extra: '未开始',
-        status: 'todo',
-        type: 'event',
-      },
-      {
-        id: '000000010',
-        title: '第三方紧急代码变更',
-        description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
-        extra: '马上到期',
-        status: 'urgent',
-        type: 'event',
-      },
-      {
-        id: '000000011',
-        title: '信息安全考试',
-        description: '指派竹尔于 2017-01-09 前完成更新并发布',
-        extra: '已耗时 8 天',
-        status: 'doing',
-        type: 'event',
-      },
-      {
-        id: '000000012',
-        title: 'ABCD 版本发布',
-        description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
-        extra: '进行中',
-        status: 'processing',
-        type: 'event',
-      },
-    ],
-  });
-};
-
-export default {
-  'GET /api/notices': getNotices,
-};

react-ui/mock/requestRecord.mock.js

@@ -1,324 +0,0 @@
-module.exports = {
-  'GET /api/currentUser': {
-    data: {
-      name: 'Serati Ma',
-      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
-      userid: '00000001',
-      email: 'antdesign@alipay.com',
-      signature: '海纳百川，有容乃大',
-      title: '交互专家',
-      group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
-      tags: [
-        { key: '0', label: '很有想法的' },
-        { key: '1', label: '专注设计' },
-        { key: '2', label: '辣~' },
-        { key: '3', label: '大长腿' },
-        { key: '4', label: '川妹子' },
-        { key: '5', label: '海纳百川' },
-      ],
-      notifyCount: 12,
-      unreadCount: 11,
-      country: 'China',
-      geographic: {
-        province: { label: '浙江省', key: '330000' },
-        city: { label: '杭州市', key: '330100' },
-      },
-      address: '西湖区工专路 77 号',
-      phone: '0752-268888888',
-    },
-  },
-  'GET /api/rule': {
-    data: [
-      {
-        key: 99,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 99',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 503,
-        status: '0',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 81,
-      },
-      {
-        key: 98,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 98',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 164,
-        status: '0',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 12,
-      },
-      {
-        key: 97,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 97',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 174,
-        status: '1',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 81,
-      },
-      {
-        key: 96,
-        disabled: true,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 96',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 914,
-        status: '0',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 7,
-      },
-      {
-        key: 95,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 95',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 698,
-        status: '2',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 82,
-      },
-      {
-        key: 94,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 94',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 488,
-        status: '1',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 14,
-      },
-      {
-        key: 93,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 93',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 580,
-        status: '2',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 77,
-      },
-      {
-        key: 92,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 92',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 244,
-        status: '3',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 58,
-      },
-      {
-        key: 91,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 91',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 959,
-        status: '0',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 66,
-      },
-      {
-        key: 90,
-        disabled: true,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 90',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 958,
-        status: '0',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 72,
-      },
-      {
-        key: 89,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 89',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 301,
-        status: '2',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 2,
-      },
-      {
-        key: 88,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 88',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 277,
-        status: '1',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 12,
-      },
-      {
-        key: 87,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 87',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 810,
-        status: '1',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 82,
-      },
-      {
-        key: 86,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 86',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 780,
-        status: '3',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 22,
-      },
-      {
-        key: 85,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 85',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 705,
-        status: '3',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 12,
-      },
-      {
-        key: 84,
-        disabled: true,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 84',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 203,
-        status: '0',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 79,
-      },
-      {
-        key: 83,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 83',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 491,
-        status: '2',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 59,
-      },
-      {
-        key: 82,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 82',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 73,
-        status: '0',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 100,
-      },
-      {
-        key: 81,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
-        name: 'TradeCode 81',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 406,
-        status: '3',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 61,
-      },
-      {
-        key: 80,
-        disabled: false,
-        href: 'https://ant.design',
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
-        name: 'TradeCode 80',
-        owner: '曲丽丽',
-        desc: '这是一段描述',
-        callNo: 112,
-        status: '2',
-        updatedAt: '2022-12-06T05:00:57.040Z',
-        createdAt: '2022-12-06T05:00:57.040Z',
-        progress: 20,
-      },
-    ],
-    total: 100,
-    success: true,
-    pageSize: 20,
-    current: 1,
-  },
-  'POST /api/login/outLogin': { data: {}, success: true },
-  'POST /api/login/account': {
-    status: 'ok',
-    type: 'account',
-    currentAuthority: 'admin',
-  },
-};

react-ui/mock/user.ts

@@ -1,203 +0,0 @@
-import { Request, Response } from 'express';
-
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-async function getFakeCaptcha(req: Request, res: Response) {
-  await waitTime(2000);
-  return res.json('captcha-xxx');
-}
-
-const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION } = process.env;
-
-/**
- * 当前用户的权限，如果为空代表没登录
- * current user access， if is '', user need login
- * 如果是 pro 的预览，默认是有权限的
- */
-let access = ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site' ? 'admin' : '';
-
-const getAccess = () => {
-  return access;
-};
-
-// 代码中会兼容本地 service mock 以及部署站点的静态数据
-export default {
-  // 支持值为 Object 和 Array
-  'GET /api/currentUser': (req: Request, res: Response) => {
-    if (!getAccess()) {
-      res.status(401).send({
-        data: {
-          isLogin: false,
-        },
-        errorCode: '401',
-        errorMessage: '请先登录！',
-        success: true,
-      });
-      return;
-    }
-    res.send({
-      success: true,
-      data: {
-        name: 'Serati Ma',
-        avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
-        userid: '00000001',
-        email: 'antdesign@alipay.com',
-        signature: '海纳百川，有容乃大',
-        title: '交互专家',
-        group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
-        tags: [
-          {
-            key: '0',
-            label: '很有想法的',
-          },
-          {
-            key: '1',
-            label: '专注设计',
-          },
-          {
-            key: '2',
-            label: '辣~',
-          },
-          {
-            key: '3',
-            label: '大长腿',
-          },
-          {
-            key: '4',
-            label: '川妹子',
-          },
-          {
-            key: '5',
-            label: '海纳百川',
-          },
-        ],
-        notifyCount: 12,
-        unreadCount: 11,
-        country: 'China',
-        access: getAccess(),
-        geographic: {
-          province: {
-            label: '浙江省',
-            key: '330000',
-          },
-          city: {
-            label: '杭州市',
-            key: '330100',
-          },
-        },
-        address: '西湖区工专路 77 号',
-        phone: '0752-268888888',
-      },
-    });
-  },
-  // GET POST 可省略
-  'GET /api/users': [
-    {
-      key: '1',
-      name: 'John Brown',
-      age: 32,
-      address: 'New York No. 1 Lake Park',
-    },
-    {
-      key: '2',
-      name: 'Jim Green',
-      age: 42,
-      address: 'London No. 1 Lake Park',
-    },
-    {
-      key: '3',
-      name: 'Joe Black',
-      age: 32,
-      address: 'Sidney No. 1 Lake Park',
-    },
-  ],
-  'POST /api/login/account': async (req: Request, res: Response) => {
-    const { password, username, type } = req.body;
-    await waitTime(2000);
-    if (password === 'ant.design' && username === 'admin') {
-      res.send({
-        status: 'ok',
-        type,
-        currentAuthority: 'admin',
-      });
-      access = 'admin';
-      return;
-    }
-    if (password === 'ant.design' && username === 'user') {
-      res.send({
-        status: 'ok',
-        type,
-        currentAuthority: 'user',
-      });
-      access = 'user';
-      return;
-    }
-    if (type === 'mobile') {
-      res.send({
-        status: 'ok',
-        type,
-        currentAuthority: 'admin',
-      });
-      access = 'admin';
-      return;
-    }
-
-    res.send({
-      status: 'error',
-      type,
-      currentAuthority: 'guest',
-    });
-    access = 'guest';
-  },
-  'POST /api/login/outLogin': (req: Request, res: Response) => {
-    access = '';
-    res.send({ data: {}, success: true });
-  },
-  'POST /api/register': (req: Request, res: Response) => {
-    res.send({ status: 'ok', currentAuthority: 'user', success: true });
-  },
-  'GET /api/500': (req: Request, res: Response) => {
-    res.status(500).send({
-      timestamp: 1513932555104,
-      status: 500,
-      error: 'error',
-      message: 'error',
-      path: '/base/category/list',
-    });
-  },
-  'GET /api/404': (req: Request, res: Response) => {
-    res.status(404).send({
-      timestamp: 1513932643431,
-      status: 404,
-      error: 'Not Found',
-      message: 'No message available',
-      path: '/base/category/list/2121212',
-    });
-  },
-  'GET /api/403': (req: Request, res: Response) => {
-    res.status(403).send({
-      timestamp: 1513932555104,
-      status: 403,
-      error: 'Forbidden',
-      message: 'Forbidden',
-      path: '/base/category/list',
-    });
-  },
-  'GET /api/401': (req: Request, res: Response) => {
-    res.status(401).send({
-      timestamp: 1513932555104,
-      status: 401,
-      error: 'Unauthorized',
-      message: 'Unauthorized',
-      path: '/base/category/list',
-    });
-  },
-
-  'GET  /api/login/captcha': getFakeCaptcha,
-};

react-ui/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "cl-model",
+  "name": "ci4s",
   "version": "1.0.0",
   "private": true,
   "description": "",
@@ -8,7 +8,7 @@
     "build": "max build",
     "deploy": "npm run build && npm run gh-pages",
     "dev": "npm run start:dev",
-    "dev-no-sso": "cross-env NO_SSO=true npm run start:dev",
+    "dev-no-sso": "cross-env NO_SSO=true npm run start:mock",
     "docker-hub:build": "docker build  -f Dockerfile.hub -t  ant-design-pro ./",
     "docker-prod:build": "docker-compose -f ./docker/docker-compose.yml build",
     "docker-prod:dev": "docker-compose -f ./docker/docker-compose.yml up",
@@ -35,7 +35,7 @@
     "serve": "umi-serve",
     "start": "cross-env UMI_ENV=dev max dev",
     "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev UMI_DEV_SERVER_COMPRESS=none max dev",
-    "start:mock": "cross-env REACT_APP_ENV=dev UMI_ENV=dev max dev",
+    "start:mock": "cross-env REACT_APP_ENV=dev UMI_ENV=dev UMI_DEV_SERVER_COMPRESS=none max dev",
     "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev",
     "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev",
     "storybook": "storybook dev -p 6006",
@@ -60,14 +60,17 @@
     "not ie <= 10"
   ],
   "dependencies": {
+    "@ant-design/colors": "~7.2.1",
     "@ant-design/icons": "^5.0.0",
     "@ant-design/pro-components": "^2.4.4",
     "@ant-design/use-emotion-css": "1.0.4",
     "@antv/g6": "^4.8.24",
     "@antv/hierarchy": "^0.6.12",
+    "@ctrl/tinycolor": "~4.1.0",
     "@types/crypto-js": "^4.2.2",
     "@umijs/route-utils": "^4.0.1",
     "antd": "~5.21.4",
+    "antd-style": "~3.7.1",
     "caniuse-lite": "~1.0.30001707",
     "classnames": "^2.3.2",
     "crypto-js": "^4.2.0",
@@ -75,6 +78,7 @@
     "fabric": "^5.3.0",
     "highlight.js": "^11.7.0",
     "lodash": "^4.17.21",
+    "motion": "~12.23.12",
     "omit.js": "^2.0.2",
     "pnpm": "^8.9.0",
     "query-string": "^8.1.0",
@@ -82,6 +86,7 @@
     "rc-util": "^5.30.0",
     "react": "^18.2.0",
     "react-activation": "^0.12.4",
+    "react-countup": "~6.5.3",
     "react-cropper": "^2.3.3",
     "react-dev-inspector": "^1.8.1",
     "react-dom": "^18.2.0",

react-ui/public/fonts/font.css

@@ -1,6 +1,6 @@
 @font-face {  
   font-family: Alibaba;  
-  src: url('./ALIBABA-PUHUITI-MEDIUM.TTF');
+  src: url('./ALIBABA-PUHUITI-REGULAR.TTF');
   font-display: swap;
 }
 
@@ -10,4 +10,17 @@
        url('./DingTalk-JinBuTi.woff') format('woff'),    /* 兼容性较好的 woff */
        url('./DingTalk-JinBuTi.ttf') format('truetype'); /* ttf 作为备选 */
   font-display: swap; /* 优化页面加载时的字体显示 */
+}
+
+@font-face {
+  font-family: 'WenYiHei';
+  src: url('./WenYiHei.ttf');
+  font-display: swap; /* 优化页面加载时的字体显示 */
+}
+
+
+@font-face {
+  font-family: 'YouSheBiaoTiHei';
+  src: url('./YouSheBiaoTiHei.ttf');
+  font-display: swap; /* 优化页面加载时的字体显示 */
 }

react-ui/public/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.7.0'
+const PACKAGE_VERSION = '2.7.1'
 const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

react-ui/public/scripts/resize-breakpoint.js

@@ -0,0 +1,52 @@
+(function (doc, win) {
+  'use strict';
+
+  // 配置项
+  const config = {
+    // 断点设置（单位：px）
+    // 1440 1560 1680 1800 1920 2040 2160 2280 2400 2520
+    breakpoints: [
+      { minWidth: 2520, fontSize: 22 }, // 21
+      { minWidth: 2280, fontSize: 20 }, // 19 
+      { minWidth: 2040, fontSize: 18 }, // 17
+      { minWidth: 1800, fontSize: 16 }, // 15
+      { minWidth: 1560, fontSize: 14 }, // 13
+      { minWidth: 0,    fontSize: 12 },
+    ],
+    delay: 300  // 防抖延迟（ms）
+  };
+
+  const docEl = doc.documentElement;
+  const resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
+  let resizeTimeout;
+
+  // 计算当前宽度对应的字体大小
+  function calculateFontSize() {
+    const clientWidth = docEl.clientWidth || win.innerWidth;
+    if (!clientWidth) return;
+
+    // 从大到小匹配断点
+    const targetBreakpoint = config.breakpoints.find(
+      bp => clientWidth >= bp.minWidth
+    );
+
+    // 设置字体大小
+    docEl.style.fontSize = targetBreakpoint.fontSize + 'px';
+
+    // 调试输出（可选）
+    console.debug('[REM-Resize]', 
+      'Width:', clientWidth + 'px', 
+      'Font-Size:', targetBreakpoint.fontSize + 'px');
+  }
+
+  // 防抖处理
+  function handleResize() {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(calculateFontSize, config.delay);
+  }
+
+   calculateFontSize();
+
+  // 初始化监听
+  win.addEventListener(resizeEvt, handleResize, false);
+})(document, window);

react-ui/public/scripts/resize.js

@@ -0,0 +1,44 @@
+// rem-resize.js
+(function (doc, win) {
+  'use strict';
+
+  // 配置项
+  const config = {
+    designWidth: 1920, // 设计稿宽度
+    baseFontSize: 16, // 基础字体大小（设计稿下1rem = 16px）
+    minFontSize: 12, // 最小字体限制
+    maxFontSize: 24, // 最大字体限制
+    delay: 300, // 窗口变化时的延迟执行(ms)
+  };
+
+  const docEl = doc.documentElement;
+  const resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
+  let resizeTimeout;
+
+  function calculateFontSize() {
+    const clientWidth = docEl.clientWidth || win.innerWidth;
+    if (!clientWidth) return;
+
+    const fontSize = Math.min(
+      Math.max((clientWidth / config.designWidth) * config.baseFontSize, config.minFontSize),
+      config.maxFontSize,
+    );
+
+    docEl.style.fontSize = fontSize + 'px';
+
+    // 可选：调试输出
+    if (win.console) {
+      console.debug('[REM-Resize]', 'width:', clientWidth, 'font-size:', fontSize + 'px');
+    }
+  }
+
+  function resizeHandler() {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(calculateFontSize, config.delay);
+  }
+
+  calculateFontSize();
+
+  // 初始化监听
+  win.addEventListener(resizeEvt, resizeHandler, false);
+})(document, window);

react-ui/src/app.tsx

@@ -4,6 +4,7 @@ import { type GlobalInitialState } from '@/types';
 import { menuItemRender } from '@/utils/menuRender';
 import type { Settings as LayoutSettings } from '@ant-design/pro-components';
 import { RuntimeConfig, history } from '@umijs/max';
+import { useState } from 'react';
 import { RuntimeAntdConfig } from 'umi';
 import defaultSettings from '../config/defaultSettings';
 import '../public/fonts/font.css';
@@ -20,8 +21,10 @@ import {
   setRemoteMenu,
 } from './services/session';
 import './styles/menu.less';
-import { needAuth } from './utils';
-import { gotoLoginPage } from './utils/ui';
+import { isLoginPage, needAuth } from './utils';
+import { HomeUrl } from './utils/constant';
+import { closeAllModals } from './utils/modal';
+import { gotoHomePage } from './utils/ui';
 export { requestConfig as request } from './requestConfig';
 
 /**
@@ -29,28 +32,25 @@ export { requestConfig as request } from './requestConfig';
  */
 export async function getInitialState(): Promise<GlobalInitialState> {
   const fetchUserInfo = async () => {
+    globalGetSeverTime();
     try {
-      globalGetSeverTime();
       const response = await getUserInfo();
       return {
         ...response.user,
         avatar: response.user.avatar || require('@/assets/img/avatar-default.png'),
         permissions: response.permissions,
-        roles: response.roles,
-        roleNames: response.user.roles,
+        roleNames: response.roles,
       } as API.CurrentUser;
     } catch (error) {
       console.error('getInitialState', error);
-      gotoLoginPage();
+      // gotoLoginPage(true);
+      gotoHomePage();
     }
     return undefined;
   };
 
-  // 如果不是登录页面，执行
-  const { location } = history;
-
-  // console.log('getInitialState', needAuth(location.pathname));
-  if (needAuth(location.pathname)) {
+  const token = getAccessToken();
+  if (token) {
     const currentUser = await fetchUserInfo();
     return {
       fetchUserInfo,
@@ -71,9 +71,6 @@ export const layout: RuntimeConfig['layout'] = ({ initialState }) => {
   return {
     ErrorBoundary: ErrorBoundary,
     rightContentRender: false,
-    waterMarkProps: {
-      // content: initialState?.currentUser?.nickName,
-    },
     menu: {
       locale: false,
       // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
@@ -84,45 +81,9 @@ export const layout: RuntimeConfig['layout'] = ({ initialState }) => {
         if (!initialState?.currentUser?.userId) {
           return [];
         }
-        // console.log('get menus')
-        // initialState.currentUser 中包含了所有用户信息
-        // console.log('get routers')
-        // setInitialState((preInitialState) => ({
-        //   ...preInitialState,
-        //   menus,
-        // }));
         return getRemoteMenu();
       },
     },
-    onPageChange: () => {
-      const { location } = history;
-      // 如果没有登录，重定向到 login
-      if (!initialState?.currentUser && needAuth(location.pathname)) {
-        gotoLoginPage();
-      }
-    },
-    layoutBgImgList: [
-      {
-        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/D2LWSqNny4sAAAAAAAAAAAAAFl94AQBr',
-        left: 85,
-        bottom: 100,
-        height: '303px',
-      },
-      {
-        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/C2TWRpJpiC0AAAAAAAAAAAAAFl94AQBr',
-        bottom: -68,
-        right: -45,
-        height: '303px',
-      },
-      {
-        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/F6vSTbj8KpYAAAAAAAAAAAAAFl94AQBr',
-        bottom: 0,
-        left: 0,
-        width: '331px',
-      },
-    ],
-    // 自定义 403 页面
-    // unAccessible: <div>unAccessible</div>,
     childrenRender: (children) => {
       // 增加一个 loading 的状态
       // if (initialState?.loading) return <PageLoading />;
@@ -159,10 +120,28 @@ export const layout: RuntimeConfig['layout'] = ({ initialState }) => {
 };
 
 export const onRouteChange: RuntimeConfig['onRouteChange'] = async (e) => {
+  // console.log('onRouteChange');
+
+  // 路由切换时，尤其是回退时，关闭打开的弹框
+  closeAllModals();
+
   const { location } = e;
+  const pathname = location.pathname;
+  const token = getAccessToken();
+  // 没有 token，跳转到登录页面
+  if (!token && needAuth(pathname)) {
+    gotoHomePage();
+    return;
+  }
+
+  // 有 token， 登录页面直接跳转到首页
+  if (token && isLoginPage(pathname)) {
+    history.push(HomeUrl);
+  }
+
   const menus = getRemoteMenu();
-  // console.log('onRouteChange', menus);
-  if (menus === null && needAuth(location.pathname)) {
+  // 没有菜单，刷新页面
+  if (menus === null && needAuth(pathname)) {
     history.go(0);
   }
 };
@@ -179,10 +158,12 @@ export const patchClientRoutes: RuntimeConfig['patchClientRoutes'] = (e) => {
 export function render(oldRender: () => void) {
   // console.log('render');
   const token = getAccessToken();
-  if (!token || token?.length === 0) {
+  if (!token) {
     oldRender();
     return;
   }
+
+  // 有 token，获取路由
   getRoutersInfo()
     .then((res) => {
       setRemoteMenu(res);
@@ -193,16 +174,34 @@ export function render(oldRender: () => void) {
     });
 }
 
+export const useQiankunStateForSlave = () => {
+  const [globalState, setGlobalState] = useState<any>({
+    slogan: 'Hello MicroFrontend',
+  });
+
+  return {
+    globalState,
+    setGlobalState,
+  };
+};
+
 // 主题修改
 export const antd: RuntimeAntdConfig = (memo) => {
   memo.theme ??= {};
   memo.theme.token = {
     colorPrimary: themes['primaryColor'],
+    colorPrimaryHover: themes['primaryHoverColor'],
+    colorPrimaryActive: themes['primaryActiveColor'],
+    colorPrimaryText: themes['primaryColor'],
+    colorPrimaryTextHover: themes['primaryHoverColor'],
+    colorPrimaryTextActive: themes['primaryActiveColor'],
+    // colorPrimaryBg: 'rgba(81, 76, 249, 0.07)',
     colorSuccess: themes['successColor'],
     colorError: themes['errorColor'],
     colorWarning: themes['warningColor'],
     colorLink: themes['primaryColor'],
     colorText: themes['textColor'],
+    fontSize: parseInt(themes['fontSize']),
     controlHeightLG: 46,
   };
   memo.theme.components ??= {};

react-ui/src/components/CodeConfigItem/index.less

@@ -1,11 +1,22 @@
 .code-config-item {
   position: relative;
-  width: calc(25% - 7.5px);
+  width: calc(33.33% - 7px);
   padding: 15px;
   background-color: .addAlpha(@primary-color, 0.04) [];
   border: 1px solid transparent;
   border-radius: 4px;
-  cursor: pointer;
+
+  &__checkbox {
+    flex: 1;
+    min-width: 0;
+
+    :global {
+      .ant-checkbox + span {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+  }
 
   &__name {
     margin-right: 8px;
@@ -38,6 +49,8 @@
     margin-bottom: 10px !important;
     color: @text-color-secondary;
     font-size: 13px;
+    cursor: pointer;
+    word-break: break-all;
   }
 
   &__branch {
@@ -46,11 +59,17 @@
   }
 
   &:hover {
+    background-color: .addAlpha(@primary-color, 0.08) [];
+  }
+
+  &--active {
     border-color: @primary-color;
     box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
   }
 
-  &:hover &__name {
+  &--active &__name {
     color: @primary-color;
   }
+
+
 }

react-ui/src/components/CodeConfigItem/index.tsx

@@ -1,25 +1,51 @@
 import { type CodeConfigData } from '@/pages/CodeConfig/List';
-import { Flex, Typography } from 'antd';
+import { getGitUrl } from '@/utils';
+import { Checkbox, Flex, Typography } from 'antd';
+import { type CheckboxChangeEvent } from 'antd/es/checkbox';
 import classNames from 'classnames';
 import { useState } from 'react';
 import styles from './index.less';
 
 type CodeConfigItemProps = {
   item: CodeConfigData;
-  onClick?: (item: CodeConfigData) => void;
+  checked: boolean;
+  onChange?: (item: CodeConfigData, checked: boolean) => void;
 };
 
-function CodeConfigItem({ item, onClick }: CodeConfigItemProps) {
+function CodeConfigItem({ item, checked, onChange }: CodeConfigItemProps) {
   const [isEllipsis, setIsEllipsis] = useState(false);
+
+  const openProject = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    e.stopPropagation();
+    const { git_url, git_branch } = item;
+    const url = getGitUrl(git_url, git_branch);
+    window.open(url, '_blank');
+  };
+
+  const handleChange = (e: CheckboxChangeEvent) => {
+    onChange?.(item, e.target.checked);
+  };
+
   return (
-    <div className={styles['code-config-item']} onClick={() => onClick?.(item)}>
+    <div
+      id={`code-config-item-${item.id}`}
+      className={classNames(styles['code-config-item'], {
+        [styles['code-config-item--active']]: checked,
+      })}
+    >
       <Flex justify="space-between" align="center" style={{ marginBottom: '15px' }}>
-        <Typography.Paragraph
-          className={styles['code-config-item__name']}
-          ellipsis={{ tooltip: item.code_repo_name }}
+        <Checkbox
+          className={styles['code-config-item__checkbox']}
+          checked={checked}
+          onChange={handleChange}
         >
-          {item.code_repo_name}
-        </Typography.Paragraph>
+          <Typography.Paragraph
+            className={styles['code-config-item__name']}
+            ellipsis={{ tooltip: item.code_repo_name }}
+          >
+            {item.code_repo_name}
+          </Typography.Paragraph>
+        </Checkbox>
         <div
           className={classNames(
             styles['code-config-item__tag'],
@@ -35,9 +61,10 @@ function CodeConfigItem({ item, onClick }: CodeConfigItemProps) {
         className={styles['code-config-item__url']}
         ellipsis={{
           rows: 2,
-          tooltip: isEllipsis ? item.git_url : false, // 仅当省略时显示 tooltip
-          onEllipsis: (ellipsis) => setIsEllipsis(ellipsis),
+          tooltip: isEllipsis ? item.git_url : false,
+          onEllipsis: (ellipsis) => setIsEllipsis(ellipsis), // 必须这样，不然不能省略
         }}
+        onClick={openProject}
       >
         {item.git_url}
       </Typography.Paragraph>

react-ui/src/components/CodeSelect/index.tsx

@@ -4,7 +4,7 @@
  * @Description: 流水线选择代码配置表单
  */
 
-import CodeSelectorModal from '@/components/CodeSelectorModal';
+import CodeSelectorModal, { CodeConfigData } from '@/components/CodeSelectorModal';
 import KFIcon from '@/components/KFIcon';
 import { openAntdModal } from '@/utils/modal';
 import { Button } from 'antd';
@@ -18,7 +18,9 @@ export {
   type ParameterInputValue,
 } from '../ParameterInput';
 
-type CodeSelectProps = ParameterInputProps;
+export interface CodeSelectProps extends ParameterInputProps {
+  value?: CodeConfigData;
+}
 
 /** 代码配置选择表单组件 */
 function CodeSelect({
@@ -32,26 +34,18 @@ function CodeSelect({
 }: CodeSelectProps) {
   // 选择代码配置
   const selectResource = () => {
+    const defaultSelected: CodeConfigData | undefined =
+      value && typeof value === 'object' ? value : undefined;
     const { close } = openAntdModal(CodeSelectorModal, {
+      defaultSelected: defaultSelected,
       onOk: (res) => {
         if (res) {
-          const { id, code_repo_name, git_url, git_branch, git_user_name, git_password, ssh_key } =
-            res;
-          const jsonObj = {
-            id,
-            name: code_repo_name,
-            code_path: git_url,
-            branch: git_branch,
-            username: git_user_name,
-            password: git_password,
-            ssh_private_key: ssh_key,
-          };
-          const jsonObjStr = JSON.stringify(jsonObj);
+          const { code_repo_name } = res;
           onChange?.({
-            value: jsonObjStr,
+            ...res,
+            value: code_repo_name,
             showValue: code_repo_name,
             fromSelect: true,
-            ...jsonObj,
           });
         } else {
           onChange?.(undefined);

react-ui/src/components/CodeSelectorModal/index.less

@@ -17,6 +17,7 @@
     margin-bottom: 30px;
     overflow-x: hidden;
     overflow-y: auto;
+    padding-bottom: 10px;
   }
 
   &__empty {

react-ui/src/components/CodeSelectorModal/index.tsx

@@ -7,7 +7,8 @@
 import KFIcon from '@/components/KFIcon';
 import KFModal from '@/components/KFModal';
 import { type CodeConfigData } from '@/pages/CodeConfig/List';
-import { getCodeConfigListReq } from '@/services/codeConfig';
+import { getCodeConfigListReq, getCodeConfigPageNumReq } from '@/services/codeConfig';
+import { CustomPartial } from '@/types';
 import { to } from '@/utils/promise';
 import type { ModalProps, PaginationProps } from 'antd';
 import { Empty, Input, Pagination } from 'antd';
@@ -17,24 +18,68 @@ import './index.less';
 
 export { type CodeConfigData };
 
+export type SelectCodeData = CustomPartial<
+  CodeConfigData,
+  | 'id'
+  | 'code_repo_name'
+  | 'git_url'
+  | 'git_branch'
+  | 'git_user_name'
+  | 'git_password'
+  | 'ssh_key'
+  | 'is_public'
+>;
+
 export interface CodeSelectorModalProps extends Omit<ModalProps, 'onOk'> {
-  onOk?: (params: CodeConfigData | undefined) => void;
+  defaultSelected?: SelectCodeData;
+  onOk?: (params: SelectCodeData | undefined) => void;
 }
 
 /** 选择代码配置的弹窗，推荐使用函数的方式打开 */
-function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
+function CodeSelectorModal({ defaultSelected, onOk, ...rest }: CodeSelectorModalProps) {
+  const DefaultPageSize = 18;
   const [dataList, setDataList] = useState<CodeConfigData[]>([]);
   const [total, setTotal] = useState(0);
-  const [pagination, setPagination] = useState<PaginationProps>({
-    current: 1,
-    pageSize: 20,
-  });
   const [searchText, setSearchText] = useState<string | undefined>(undefined);
   const [inputText, setInputText] = useState<string | undefined>(undefined);
+  const [selected, setSelected] = useState(defaultSelected);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [pagination, setPagination] = useState<PaginationProps>({
+    current: defaultSelected?.id ? 0 : 1, // 为 0 时，不请求，等待接口返回选中的代码配置在第几页
+    pageSize: DefaultPageSize,
+  });
+
+  useEffect(() => {
+    const getCodeConfigPageNum = async (id: number, size: number) => {
+      const [res] = await to(
+        getCodeConfigPageNumReq(id, {
+          size,
+        }),
+      );
+      if (res) {
+        setPagination({
+          current: typeof res.data === 'number' ? Math.max(0, res.data) + 1 : 1,
+          pageSize: DefaultPageSize,
+        });
+      } else {
+        setPagination({
+          current: 1,
+          pageSize: DefaultPageSize,
+        });
+      }
+    };
+    if (defaultSelected?.id) {
+      getCodeConfigPageNum(defaultSelected?.id, DefaultPageSize);
+    }
+  }, [defaultSelected?.id]);
 
   useEffect(() => {
     // 获取数据请求
     const getDataList = async () => {
+      // 为 0 时，不请求，等待接口返回选中的代码配置在第几页
+      if (pagination.current === 0) {
+        return;
+      }
       const params = {
         page: pagination.current! - 1,
         size: pagination.pageSize,
@@ -50,6 +95,16 @@ function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
     getDataList();
   }, [pagination, searchText]);
 
+  useEffect(() => {
+    if (dataList.length > 0 && !isScrolled && defaultSelected?.id) {
+      const selectedItem = document.getElementById(`code-config-item-${defaultSelected?.id}`);
+      if (selectedItem) {
+        selectedItem.scrollIntoView();
+      }
+      setIsScrolled(true);
+    }
+  }, [isScrolled, dataList, defaultSelected?.id]);
+
   // 搜索
   const handleSearch = (value: string) => {
     setSearchText(value);
@@ -59,8 +114,12 @@ function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
     }));
   };
 
-  const handleClick = (item: CodeConfigData) => {
-    onOk?.(item);
+  const handleChange = (item: CodeConfigData, checked: boolean) => {
+    if (checked) {
+      setSelected(item);
+    } else {
+      setSelected(undefined);
+    }
   };
 
   // 分页切换
@@ -77,7 +136,7 @@ function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
       title="选择代码配置"
       image={require('@/assets/img/modal-code-config.png')}
       width={920}
-      footer={null}
+      onOk={() => onOk?.(selected)}
       destroyOnClose
     >
       <div className="kf-code-selector-modal">
@@ -93,23 +152,31 @@ function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
           prefix={
             <KFIcon type="icon-sousuo" color="rgba(22,100,255,0.4" style={{ marginLeft: '10px' }} />
           }
-          // prefix={
-          //   <Icon icon="local:magnifying-glass" style={{ marginLeft: '10px', marginTop: '2px' }} />
-          // }
         />
         {dataList?.length !== 0 ? (
           <>
             <div className="kf-code-selector-modal__content">
               {dataList?.map((item) => (
-                <CodeConfigItem item={item} key={item.id} onClick={handleClick} />
+                <CodeConfigItem
+                  item={item}
+                  key={item.id}
+                  checked={item.id === selected?.id}
+                  onChange={handleChange}
+                />
               ))}
             </div>
             <Pagination
-              align="center"
+              align="end"
               total={total}
               showSizeChanger
-              defaultPageSize={20}
-              pageSizeOptions={[20, 40, 60, 80, 100]}
+              defaultPageSize={DefaultPageSize}
+              pageSizeOptions={[
+                DefaultPageSize,
+                2 * DefaultPageSize,
+                3 * DefaultPageSize,
+                4 * DefaultPageSize,
+                5 * DefaultPageSize,
+              ]}
               showQuickJumper
               onChange={handlePageChange}
               {...pagination}

react-ui/src/components/ErrorBoundary/index.tsx

@@ -1,4 +1,5 @@
 import KFEmpty, { EmptyType } from '@/components/KFEmpty';
+import { HomeUrl } from '@/utils/constant';
 import { Button } from 'antd';
 import { Component, ReactNode } from 'react';
 
@@ -55,7 +56,7 @@ function ErrorBoundaryFallback({ error }: { error: Error | null }) {
             <Button
               type="default"
               onClick={() => {
-                window.history.pushState({}, '', '/');
+                window.history.pushState({}, '', HomeUrl);
                 window.location.reload();
               }}
             >

react-ui/src/components/FormInfo/index.tsx

@@ -1,3 +1,4 @@
+import { PipelineGlobalParamType, type PipelineGlobalParam } from '@/types';
 import { formatEnum } from '@/utils/format';
 import { Typography, type SelectProps } from 'antd';
 import classNames from 'classnames';
@@ -16,6 +17,8 @@ type FormInfoProps = {
   options?: SelectProps['options'];
   /** 自定义节点 label、value 的字段 */
   fieldNames?: SelectProps['fieldNames'];
+  /** 全局参数 */
+  globalParams?: PipelineGlobalParam[] | null;
   /** 自定义类名 */
   className?: string;
   /** 自定义样式 */
@@ -32,12 +35,29 @@ function FormInfo({
   select = false,
   options,
   fieldNames,
+  globalParams,
   className,
   style,
 }: FormInfoProps) {
   let showValue = value;
   if (value && typeof value === 'object' && valuePropName) {
     showValue = value[valuePropName];
+    const reg = /^\$\{(.*)\}$/;
+    if (value.fromSelect && Array.isArray(globalParams) && globalParams.length > 0) {
+      const match = reg.exec(showValue);
+      if (match) {
+        const paramName = match[1];
+        const foundParam = globalParams.find((v) => v.param_name === paramName);
+        if (foundParam) {
+          showValue =
+            foundParam.param_type === PipelineGlobalParamType.Boolean // 布尔类型转换
+              ? foundParam.param_value
+                ? 'true'
+                : 'false'
+              : foundParam.param_value;
+        }
+      }
+    }
   } else if (select === true && options) {
     let _options: SelectProps['options'] = options;
     if (fieldNames) {

react-ui/src/components/IFramePage/index.tsx

@@ -1,12 +1,11 @@
 import FullScreenFrame from '@/components/FullScreenFrame';
-import KFSpin from '@/components/KFSpin';
 import { getKnowledgeGraphUrl, getLabelStudioUrl } from '@/services/developmentEnvironment';
+import Loading from '@/utils/loading';
 import { to } from '@/utils/promise';
 import SessionStorage from '@/utils/sessionStorage';
 import { FloatButton } from 'antd';
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
 import './index.less';
 
 export enum IframePageType {
@@ -54,9 +53,13 @@ const getRequestAPI = (type: IframePageType): (() => Promise<any>) => {
 
 type IframePageProps = {
   /** 子系统 */
-  type: IframePageType;
+  type?: IframePageType;
+  /** url */
+  url?: string;
   /** 是否可以在页签上打开 */
   openInTab?: boolean;
+  /** 是否显示加载 */
+  showLoading?: boolean;
   /** 自定义样式类名 */
   className?: string;
   /** 自定义样式 */
@@ -64,32 +67,60 @@ type IframePageProps = {
 };
 
 /** 系统内嵌 iframe，目前系统有数据标注、应用开发、开发环境、GitLink 四个子系统，使用时可以添加其他子系统 */
-function IframePage({ type, openInTab = false, className, style }: IframePageProps) {
+function IframePage({
+  type,
+  url,
+  showLoading = true,
+  openInTab = false,
+  className,
+  style,
+}: IframePageProps) {
   const [iframeUrl, setIframeUrl] = useState('');
-  const [loading, setLoading] = useState(false);
+  // const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-    const requestIframeUrl = async () => {
-      setLoading(true);
+    const requestIframeUrl = async (type: IframePageType) => {
+      if (showLoading) {
+        Loading.show();
+      }
       const [res] = await to(getRequestAPI(type)());
       if (res && res.data) {
         setIframeUrl(res.data);
       } else {
-        setLoading(false);
+        if (showLoading) {
+          Loading.hide();
+        }
       }
     };
 
-    requestIframeUrl();
-  }, [type]);
+    if (type) {
+      requestIframeUrl(type);
+    } else if (url) {
+      if (showLoading) {
+        Loading.show();
+      }
+
+      setIframeUrl(url);
+    }
+  }, [type, url, showLoading]);
+
+  const handleLoad = () => {
+    if (showLoading) {
+      Loading.hide();
+    }
+  };
 
-  const hideLoading = () => {
-    setLoading(false);
+  const handleError = (error?: React.SyntheticEvent<HTMLIFrameElement, Event>) => {
+    console.log('error', error);
+    if (showLoading) {
+      Loading.hide();
+    }
   };
 
   return (
     <div className={classNames('kf-iframe-page', className)} style={style}>
-      {loading && createPortal(<KFSpin size="large" />, document.body)}
-      <FullScreenFrame url={iframeUrl} onLoad={hideLoading} onError={hideLoading} />
+      {/* {loading && createPortal(<KFSpin size="large" />, document.body)} */}
+      {iframeUrl && <FullScreenFrame url={iframeUrl} onLoad={handleLoad} onError={handleError} />}
       {openInTab && <FloatButton onClick={() => window.open(iframeUrl, '_blank')} />}
     </div>
   );

react-ui/src/components/KFButton/index.less

@@ -0,0 +1,25 @@
+body {
+  .kf-primary-button.ant-btn-color-primary.ant-btn-variant-link {
+    background-color: .addAlpha(@primary-color, 0.07) [] !important;
+  }
+
+  .kf-default-button.ant-btn-color-default.ant-btn-variant-link {
+    background-color: .addAlpha(@text-color-secondary, 0.07) [] !important;
+  }
+
+  .kf-danger-button.ant-btn-color-danger.ant-btn-variant-link {
+    background-color: .addAlpha(@error-color, 0.07) [] !important;
+  }
+
+  .ant-btn-color-default.ant-btn-variant-link.kf-default-button:not(:disabled):not(
+      .ant-btn-disabled
+    ):hover {
+    color: .addAlpha(@text-color-secondary, 0.5) [];
+  }
+
+  .ant-btn-color-default.ant-btn-variant-link.kf-default-button:not(:disabled):not(
+      .ant-btn-disabled
+    ):active {
+    color: @text-color-secondary;
+  }
+}

react-ui/src/components/KFButton/index.tsx

@@ -0,0 +1,75 @@
+import themes from '@/styles/theme.less';
+import { addAlpha, derivePrimaryStates } from '@/utils/color';
+import { Button, ButtonProps } from 'antd';
+import { createStyles } from 'antd-style';
+import './index.less';
+
+type KFColor = 'primary' | 'default' | 'danger';
+
+export interface KFButtonProps extends ButtonProps {
+  kfColor?: KFColor;
+}
+
+const useStyles = createStyles(({ token, css }) => ({
+  primary: css`
+    color: ${token.colorPrimary} !important;
+    background-color: ${addAlpha(themes['primaryColor'], 0.07)} !important;
+
+    &:hover {
+      color: ${token.colorPrimaryHover} !important;
+    }
+
+    &:active {
+      color: ${token.colorPrimaryActive} !important;
+    }
+  `,
+  default: css`
+    color: ${themes['textColorSecondary']} !important;
+    background-color: ${addAlpha(themes['textColorSecondary'], 0.07)} !important;
+
+    &:hover {
+      color: ${derivePrimaryStates(themes['textColorSecondary']).colorPrimaryHover} !important;
+    }
+
+    &:active {
+      color: ${derivePrimaryStates(themes['textColorSecondary']).colorPrimaryActive} !important;
+    }
+  `,
+  danger: css`
+    color: ${themes['errorColor']} !important;
+    background-color: ${addAlpha(themes['errorColor'], 0.07)} !important;
+
+    &:hover {
+      color: ${derivePrimaryStates(themes['errorColor']).colorPrimaryHover} !important;
+    }
+
+    &:active {
+      color: ${derivePrimaryStates(themes['errorColor']).colorPrimaryActive} !important;
+    }
+  `,
+}));
+
+function KFButton({ kfColor = 'default', className, ...rest }: KFButtonProps) {
+  const { styles, cx } = useStyles();
+
+  let style = '';
+  switch (kfColor) {
+    case 'primary':
+      style = styles.primary;
+      break;
+    case 'default':
+      style = styles.default;
+      break;
+    case 'danger':
+      style = styles.danger;
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <Button {...rest} className={cx(className, style)} color={kfColor} variant="link"></Button>
+  );
+}
+
+export default KFButton;

react-ui/src/components/MessageBroadcast/index.less

@@ -0,0 +1,19 @@
+.message-broadcast {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  margin-right: 8px;
+  cursor: pointer;
+  .backgroundFullImage(url(@/assets/img/message/trumpet.png));
+
+  &:hover {
+    background-image: url(@/assets/img/message/trumpet-hover.png);
+  }
+
+  &__red-point {
+    position: absolute;
+    top: 8px;
+    left: 18px;
+    width: 6px;
+  }
+}

react-ui/src/components/MessageBroadcast/index.tsx

@@ -0,0 +1,47 @@
+import RedPointImg from '@/assets/img/message/red-point.png';
+import { getMessageCountReq } from '@/services/message';
+import { to } from '@/utils/promise';
+import { useModel, useNavigate } from '@umijs/max';
+import { useCallback, useEffect, useState } from 'react';
+import styles from './index.less';
+
+function MessageBroadcast() {
+  const { initialState } = useModel('@@initialState');
+  const { currentUser } = initialState || {};
+  const { userId } = currentUser || {};
+  const [total, setTotal] = useState<number>(0);
+  const navigate = useNavigate();
+
+  const getMessageCount = useCallback(async () => {
+    if (!userId) return;
+    const params: Record<string, any> = {
+      receiver: userId,
+      type: -1,
+    };
+    const [res] = await to(getMessageCountReq(params));
+    if (res && res.data) {
+      const { unread_total } = res.data;
+      setTotal(unread_total);
+    }
+  }, [userId]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      getMessageCount();
+    }, 60 * 1000);
+    getMessageCount();
+    return () => {
+      clearInterval(interval);
+    };
+  }, [getMessageCount]);
+
+  return (
+    <div className={styles['message-broadcast']} onClick={() => navigate('/workspace/message')}>
+      {total > 0 && (
+        <img className={styles['message-broadcast__red-point']} src={RedPointImg}></img>
+      )}
+    </div>
+  );
+}
+
+export default MessageBroadcast;

react-ui/src/components/ParameterInput/index.tsx

@@ -9,6 +9,7 @@ import { CloseOutlined } from '@ant-design/icons';
 import { ConfigProvider, Form, Input, Typography } from 'antd';
 import { RuleObject } from 'antd/es/form';
 import classNames from 'classnames';
+import { ReactNode } from 'react';
 import './index.less';
 
 // 如果值是对象时的类型
@@ -55,6 +56,8 @@ export interface ParameterInputProps {
   disabled?: boolean;
   /** 元素 id */
   id?: string;
+  /** 带标签的 input，设置后置标签 */
+  addonAfter?: ReactNode;
 }
 
 function ParameterInput({
@@ -75,7 +78,7 @@ function ParameterInput({
   const valueObj =
     typeof value === 'string' ? { value: value, fromSelect: false, showValue: value } : value;
   if (valueObj && !valueObj.showValue) {
-    valueObj.showValue = valueObj.value;
+    valueObj.showValue = typeof valueObj.value === 'string' ? valueObj.value : '';
   }
   const isSelect = valueObj?.fromSelect;
   const placeholder = valueObj?.placeholder || rest?.placeholder;

react-ui/src/components/ParameterSelect/config.tsx

@@ -1,29 +1,34 @@
-import { filterResourceStandard, resourceFieldNames } from '@/hooks/useComputingResource';
+import { DatasetData, ModelData } from '@/pages/Dataset/config';
 import { ServiceData } from '@/pages/ModelDeployment/types';
 import { getDatasetList, getModelList } from '@/services/dataset/index.js';
 import { getServiceListReq } from '@/services/modelDeployment';
+import type { JCCResourceImage, JCCResourceStandard, JCCResourceType } from '@/state/jcdResource';
+import { filterResourceStandard, resourceFieldNames } from '@/state/systemResource';
 import { type SelectProps } from 'antd';
-import { pick } from 'lodash';
-
-// id 从 number 转换为 string
-const convertId = (item: any) => ({
-  ...item,
-  id: JSON.stringify({
-    id: `${item.id}`,
-    name: item.name,
-    identifier: item.identifier,
-    owner: item.owner,
-  }),
-});
 
 export type SelectPropsConfig = {
-  getOptions: () => Promise<any>; // 获取下拉数据
+  getOptions?: () => Promise<any>; // 获取下拉数据
   fieldNames?: SelectProps['fieldNames']; // 下拉数据字段
   optionFilterProp?: SelectProps['optionFilterProp']; // 过滤字段名
   filterOption?: SelectProps['filterOption']; // 过滤函数
+  isObjectValue: boolean; // value 是对象
+  getValue?: (value: any) => string | number; // 对象类型时，获取其值
+  getLabel?: (value: any) => string; // 对象类型时，获取其 label
 };
 
-export const paramSelectConfig: Record<string, SelectPropsConfig> = {
+export const ParameterSelectTypeList = [
+  'dataset',
+  'model',
+  'service',
+  'resource',
+  'remote-image',
+  'remote-resource-type',
+  'remote-resource',
+] as const;
+
+export type ParameterSelectDataType = (typeof ParameterSelectTypeList)[number];
+
+export const paramSelectConfig: Record<ParameterSelectDataType, SelectPropsConfig> = {
   dataset: {
     getOptions: async () => {
       const res = await getDatasetList({
@@ -31,13 +36,16 @@ export const paramSelectConfig: Record<string, SelectPropsConfig> = {
         size: 1000,
         is_public: false,
       });
-      return res?.data?.content?.map(convertId) ?? [];
+      return res?.data?.content ?? [];
     },
-    fieldNames: {
-      label: 'name',
-      value: 'id',
+    optionFilterProp: 'label',
+    getValue: (value: DatasetData) => {
+      return value.id;
+    },
+    getLabel: (value: DatasetData) => {
+      return value.name;
     },
-    optionFilterProp: 'name',
+    isObjectValue: true,
   },
   model: {
     getOptions: async () => {
@@ -46,13 +54,16 @@ export const paramSelectConfig: Record<string, SelectPropsConfig> = {
         size: 1000,
         is_public: false,
       });
-      return res?.data?.content?.map(convertId) ?? [];
+      return res?.data?.content ?? [];
+    },
+    optionFilterProp: 'label',
+    getValue: (value: ModelData) => {
+      return value.id;
     },
-    fieldNames: {
-      label: 'name',
-      value: 'id',
+    getLabel: (value: ModelData) => {
+      return value.name;
     },
-    optionFilterProp: 'name',
+    isObjectValue: true,
   },
   service: {
     getOptions: async () => {
@@ -60,25 +71,58 @@ export const paramSelectConfig: Record<string, SelectPropsConfig> = {
         page: 0,
         size: 1000,
       });
-      return (
-        res?.data?.content?.map((item: ServiceData) => ({
-          label: item.service_name,
-          value: JSON.stringify(pick(item, ['id', 'service_name'])),
-        })) ?? []
-      );
-    },
-    fieldNames: {
-      label: 'label',
-      value: 'value',
+      return res?.data?.content ?? [];
     },
     optionFilterProp: 'label',
+    getValue: (value: ServiceData) => {
+      return value.id;
+    },
+    getLabel: (value: ServiceData) => {
+      return value.service_name;
+    },
+    isObjectValue: true,
   },
   resource: {
-    getOptions: async () => {
-      // 不需要这个函数
-      return [];
-    },
     fieldNames: resourceFieldNames,
     filterOption: filterResourceStandard as SelectProps['filterOption'],
+    isObjectValue: false,
+  },
+  'remote-resource-type': {
+    optionFilterProp: 'label',
+    isObjectValue: false,
+    getValue: (value: JCCResourceType) => {
+      return value.value;
+    },
+    getLabel: (value: JCCResourceType) => {
+      return value.label;
+    },
+  },
+  'remote-image': {
+    optionFilterProp: 'label',
+    getValue: (value: JCCResourceImage) => {
+      return value.imageID;
+    },
+    getLabel: (value: JCCResourceImage) => {
+      return value.name;
+    },
+    isObjectValue: true,
+  },
+  'remote-resource': {
+    optionFilterProp: 'label',
+    getValue: (value: JCCResourceStandard) => {
+      return value.id;
+    },
+    getLabel: (value: JCCResourceStandard) => {
+      const cpu = value.baseResourceSpecs.find((v) => v.type === 'CPU');
+      const ram = value.baseResourceSpecs.find((v) => v.type === 'MEMORY' && v.name === 'RAM');
+      const vram = value.baseResourceSpecs.find((v) => v.type === 'MEMORY' && v.name === 'VRAM');
+      const cpuText = cpu ? `CPU:${cpu.availableValue}, ` : '';
+      const ramText = ram ? `内存: ${ram.availableValue}${ram.availableUnit?.toUpperCase()}` : '';
+      const vramText = vram
+        ? `(显存${vram.availableValue}${vram.availableUnit?.toUpperCase()})`
+        : '';
+      return `${value.type}: ${value.availableCount}*${value.name}${vramText}, ${cpuText}${ramText}`;
+    },
+    isObjectValue: true,
   },
 };

react-ui/src/components/ParameterSelect/index.tsx

@@ -4,19 +4,25 @@
  * @Description: 参数下拉选择组件，支持资源规格、数据集、模型、服务
  */
 
-import { useComputingResource } from '@/hooks/useComputingResource';
+import jccResourceState, { getResourceTypes } from '@/state/jcdResource';
+import systemResourceState, { getSystemResources } from '@/state/systemResource';
 import { to } from '@/utils/promise';
+import { useSnapshot } from '@umijs/max';
 import { Select, type SelectProps } from 'antd';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import FormInfo from '../FormInfo';
-import { paramSelectConfig } from './config';
+import { paramSelectConfig, type ParameterSelectDataType } from './config';
+
+export { ParameterSelectTypeList, type ParameterSelectDataType } from './config';
 
 export type ParameterSelectObject = {
   value: any;
   [key: string]: any;
 };
 
-export type ParameterSelectDataType = 'dataset' | 'model' | 'service' | 'resource';
+type SelectOptions = SelectProps['options'];
+
+const identityFunc = (value: any) => value;
 
 export interface ParameterSelectProps extends SelectProps {
   /** 类型 */
@@ -25,8 +31,6 @@ export interface ParameterSelectProps extends SelectProps {
   display?: boolean;
   /** 值，支持对象，对象必须包含 value */
   value?: string | ParameterSelectObject;
-  /** 用于流水线, 流水线资源规格要求 id 为字符串 */
-  isPipeline?: boolean;
   /** 修改后回调 */
   onChange?: (value: string | ParameterSelectObject) => void;
 }
@@ -36,69 +40,127 @@ function ParameterSelect({
   dataType,
   display = false,
   value,
-  isPipeline = false,
   onChange,
   ...rest
 }: ParameterSelectProps) {
-  const [options, setOptions] = useState<SelectProps['options']>([]);
+  const [options, setOptions] = useState<SelectOptions>([]);
   const propsConfig = paramSelectConfig[dataType];
-  const valueText = typeof value === 'object' && value !== null ? value.value : value;
-  const [resourceStandardList] = useComputingResource();
-  const computingResource = isPipeline
-    ? resourceStandardList.map((v) => ({
-        ...v,
-        id: String(v.id),
-      }))
-    : resourceStandardList;
+  const {
+    getLabel = identityFunc,
+    getValue = identityFunc,
+    getOptions,
+    filterOption,
+    fieldNames,
+    optionFilterProp,
+    isObjectValue,
+  } = propsConfig;
+  const selectValue = typeof value === 'object' && value !== null ? value.value : value;
+  // 数据集、模型、服务，对象转换成 json 字符串
+  const valueText =
+    typeof selectValue === 'object' && selectValue !== null ? getValue(selectValue) : selectValue;
+  const jccResourceSnap = useSnapshot(jccResourceState);
+  const systemResourceSnap = useSnapshot(systemResourceState);
+
+  const objectOptions = useMemo(() => {
+    return dataType === 'remote-resource-type'
+      ? jccResourceSnap.types
+      : dataType === 'remote-image'
+      ? jccResourceSnap.images
+      : dataType === 'remote-resource'
+      ? jccResourceSnap.resources
+      : options;
+  }, [dataType, options, jccResourceSnap.types, jccResourceSnap.images, jccResourceSnap.resources]);
+
+  // 将对象类型转换为 Select Options
+  const converObjectToOptions = useCallback(
+    (v: any) => {
+      return {
+        label: getLabel(v),
+        value: getValue(v),
+      };
+    },
+    [getLabel, getValue],
+  );
+
+  // 数据集、模型、服务获取数据后，进行转换
+  const objectSelectOptions = useMemo(() => {
+    return objectOptions?.map(converObjectToOptions);
+  }, [converObjectToOptions, objectOptions]);
+
+  // 快速得到选中的对象
+  const valueMap = useMemo(() => {
+    const map = new Map<string | number, any>();
+    objectOptions?.forEach((v) => {
+      map.set(getValue(v), v);
+    });
+
+    return map;
+  }, [objectOptions, getValue]);
 
   useEffect(() => {
     // 获取下拉数据
     const getSelectOptions = async () => {
-      if (!propsConfig) {
-        return;
-      }
-      const getOptions = propsConfig.getOptions;
-      const [res] = await to(getOptions());
-      if (res) {
-        setOptions(res);
+      if (getOptions) {
+        const [res] = await to(getOptions());
+        if (res) {
+          setOptions(res);
+        }
+      } else if (dataType === 'remote-resource-type') {
+        if (jccResourceSnap.types.length === 0) {
+          getResourceTypes();
+        }
+      } else if (dataType === 'resource') {
+        getSystemResources();
       }
     };
-
     getSelectOptions();
-  }, [propsConfig]);
+  }, [getOptions, dataType, getResourceTypes, jccResourceSnap.types]);
 
-  const selectOptions = dataType === 'resource' ? computingResource : options;
+  const selectOptions = (
+    dataType === 'resource' ? systemResourceSnap.resources : objectSelectOptions
+  ) as SelectOptions;
 
   const handleChange = (text: string) => {
-    if (typeof value === 'object' && value !== null) {
-      onChange?.({
-        ...value,
-        value: text,
-      });
+    // 数据集、模型、服务，转换成对象
+    if (isObjectValue) {
+      // 设置为 null 是因为 ant g6 bug
+      // 如果值为 undefined 时， graph.changeData(data) 会保留前面的值
+      const selectValue = text ? valueMap.get(text) : null;
+      if (typeof value === 'object' && value !== null) {
+        onChange?.({
+          ...value,
+          value: selectValue,
+        });
+      } else {
+        onChange?.(selectValue);
+      }
     } else {
-      onChange?.(text);
+      const selectValue = text ? text : '';
+      if (typeof value === 'object' && value !== null) {
+        onChange?.({
+          ...value,
+          value: selectValue,
+        });
+      } else {
+        onChange?.(selectValue);
+      }
     }
   };
 
   // 只用于展示，FormInfo 组件带有 Tooltip
   if (display) {
     return (
-      <FormInfo
-        select
-        value={valueText}
-        options={selectOptions}
-        fieldNames={propsConfig?.fieldNames}
-      ></FormInfo>
+      <FormInfo select value={valueText} options={selectOptions} fieldNames={fieldNames}></FormInfo>
     );
   }
 
   return (
     <Select
       {...rest}
-      filterOption={propsConfig?.filterOption}
       options={selectOptions}
-      fieldNames={propsConfig?.fieldNames}
-      optionFilterProp={propsConfig?.optionFilterProp}
+      fieldNames={fieldNames}
+      optionFilterProp={optionFilterProp}
+      filterOption={filterOption}
       value={valueText}
       onChange={handleChange}
       showSearch

react-ui/src/components/ResourceSelect/index.tsx

@@ -10,10 +10,10 @@ import ResourceSelectorModal, {
   ResourceSelectorType,
   selectorTypeConfig,
 } from '@/components/ResourceSelectorModal';
+import { CommonTabKeys } from '@/enums';
 import { openAntdModal } from '@/utils/modal';
 import { Button, ConfigProvider } from 'antd';
 import classNames from 'classnames';
-import { pick } from 'lodash';
 import ParameterInput, { type ParameterInputProps } from '../ParameterInput';
 import './index.less';
 
@@ -27,6 +27,8 @@ export { ResourceSelectorType, selectorTypeConfig, type ResourceSelectorResponse
 interface ResourceSelectProps extends ParameterInputProps {
   /** 类型，数据集、模型、镜像 */
   type: ResourceSelectorType;
+  /** 值 */
+  value?: ResourceSelectorResponse;
 }
 
 // 获取选择数据集、模型、镜像后面按钮 icon
@@ -47,68 +49,51 @@ function ResourceSelect({
 }: ResourceSelectProps) {
   const { componentSize } = ConfigProvider.useConfig();
   const mySize = size || componentSize;
-  let selectedResource: ResourceSelectorResponse | undefined = undefined;
-  if (
-    value &&
-    typeof value === 'object' &&
-    value.activeTab &&
-    value.id &&
-    value.name &&
-    value.version &&
-    value.path &&
-    (type === ResourceSelectorType.Mirror || (value.identifier && value.owner))
-  ) {
-    selectedResource = pick(value, [
-      'activeTab',
-      'id',
-      'identifier',
-      'name',
-      'owner',
-      'version',
-      'path',
-    ]) as ResourceSelectorResponse;
+  let defaultActiveTab: CommonTabKeys | undefined,
+    defaultExpandedKeys: string[] = [],
+    defaultCheckedKeys: string[] = [];
+  if (value && typeof value === 'object') {
+    defaultActiveTab = value.activeTab;
+    if (type === ResourceSelectorType.Mirror) {
+      if (value.image_id && value.id) {
+        defaultExpandedKeys = [`${value.image_id}`];
+        defaultCheckedKeys = [`${value.image_id}-${value.id}`];
+      }
+    } else if (value.id && value.version) {
+      defaultExpandedKeys = [value.id];
+      defaultCheckedKeys = [`${value.id}-${value.version}`];
+    }
   }
 
   // 选择数据集、模型、镜像
   const selectResource = () => {
     const { close } = openAntdModal(ResourceSelectorModal, {
       type,
-      defaultExpandedKeys: selectedResource ? [selectedResource.id] : [],
-      defaultCheckedKeys: selectedResource
-        ? [`${selectedResource.id}-${selectedResource.version}`]
-        : [],
-      defaultActiveTab: selectedResource?.activeTab,
+      defaultExpandedKeys: defaultExpandedKeys,
+      defaultCheckedKeys: defaultCheckedKeys,
+      defaultActiveTab: defaultActiveTab,
       onOk: (res) => {
         if (res) {
-          const { activeTab, id, name, version, path, identifier, owner } = res;
           if (type === ResourceSelectorType.Mirror) {
+            const { activeTab, ...rest } = res;
+            const { url } = rest;
             onChange?.({
-              value: path,
-              showValue: path,
+              ...rest,
+              value: url,
+              showValue: url,
               fromSelect: true,
               activeTab,
-              id,
-              name,
-              version,
-              path,
             });
           } else {
-            const jsonObj = {
-              id,
-              name,
-              version,
-              path,
-              identifier,
-              owner,
-            };
-            const jsonObjStr = JSON.stringify(jsonObj);
+            const { activeTab, ...rest } = res;
+            const { name, version } = rest;
             const showValue = `${name}:${version}`;
             onChange?.({
-              value: jsonObjStr,
+              ...rest,
+              value: showValue,
               showValue,
               fromSelect: true,
               activeTab,
-              ...jsonObj,
             });
           }
         } else {

react-ui/src/components/ResourceSelectorModal/config.tsx

@@ -1,8 +1,8 @@
 import datasetImg from '@/assets/img/modal-select-dataset.png';
 import mirrorImg from '@/assets/img/modal-select-mirror.png';
 import modelImg from '@/assets/img/modal-select-model.png';
-import { AvailableRange, CommonTabKeys } from '@/enums';
-import { ResourceData, ResourceVersionData } from '@/pages/Dataset/config';
+import { AvailableRange, CommonTabKeys, MirrorVersionStatus } from '@/enums';
+import { DatasetData, ModelData, ResourceData, ResourceVersionData } from '@/pages/Dataset/config';
 import { MirrorVersionData } from '@/pages/Mirror/Info';
 import { MirrorData } from '@/pages/Mirror/List';
 import {
@@ -24,11 +24,11 @@ export enum ResourceSelectorType {
 }
 
 // 数据集、模型列表转为树形结构
-const convertDatasetToTreeData = (list: ResourceData[]): TreeDataNode[] => {
+const convertDatasetToTreeData = (list: ResourceData[], isPublic: boolean): TreeDataNode[] => {
   return list.map((v) => ({
     ...v,
     key: `${v.id}`,
-    title: v.name,
+    title: isPublic ? `${v.name} (${v.owner})` : v.name,
     isLeaf: false,
     checkable: false,
   }));
@@ -52,9 +52,9 @@ const convertResourceVersionToTreeData = (
 ): TreeDataNode[] => {
   return list.map((item: ResourceVersionData) => ({
     ...pick(info, ['id', 'name', 'owner', 'identifier', 'is_public']),
-    version: item.name,
-    title: item.name,
     key: `${parentId}-${item.name}`,
+    title: item.name,
+    version: item.name,
     isLeaf: true,
     checkable: true,
   }));
@@ -66,9 +66,9 @@ const convertMirrorVersionToTreeData = (
   list: MirrorVersionData[],
 ): TreeDataNode[] => {
   return list.map((item: MirrorVersionData) => ({
-    url: item.url,
-    title: item.tag_name,
+    ...item,
     key: `${parentId}-${item.id}`,
+    title: item.tag_name,
     isLeaf: true,
     checkable: true,
   }));
@@ -106,7 +106,7 @@ export class DatasetSelector implements SelectorTypeInfo {
     const res = await getDatasetList({ is_public: isPublic, page: 0, size: 2000 });
     if (res && res.data) {
       const list = res.data.content || [];
-      return convertDatasetToTreeData(list);
+      return convertDatasetToTreeData(list, isPublic);
     } else {
       return Promise.reject('获取数据集列表失败');
     }
@@ -125,11 +125,16 @@ export class DatasetSelector implements SelectorTypeInfo {
     const params = pick(parentNode, ['owner', 'identifier', 'id', 'name', 'version', 'is_public']);
     const res = await getDatasetInfo(params);
     if (res && res.data) {
-      const path = res.data.relative_paths || '';
-      const list = res.data.dataset_version_vos || [];
+      const dataset = res.data as DatasetData;
+      const {
+        relative_paths: path = '',
+        dataset_version_vos: list = [],
+        version_desc: versionDesc = '',
+      } = dataset;
       return {
         path,
         content: list,
+        versionDesc,
       };
     } else {
       return Promise.reject('获取数据集文件列表失败');
@@ -158,7 +163,7 @@ export class ModelSelector implements SelectorTypeInfo {
     const res = await getModelList({ is_public: isPublic, page: 0, size: 2000 });
     if (res && res.data) {
       const list = res.data.content || [];
-      return convertDatasetToTreeData(list);
+      return convertDatasetToTreeData(list, isPublic);
     } else {
       return Promise.reject('获取模型列表失败');
     }
@@ -177,11 +182,17 @@ export class ModelSelector implements SelectorTypeInfo {
     const params = pick(parentNode, ['owner', 'identifier', 'id', 'name', 'version', 'is_public']);
     const res = await getModelInfo(params);
     if (res && res.data) {
-      const path = res.data.relative_paths || '';
-      const list = res.data.model_version_vos || [];
+      const model = res.data as ModelData;
+      const {
+        relative_paths: path = '',
+        model_version_vos: list = [],
+        version_desc: versionDesc = '',
+      } = model;
+
       return {
         path,
         content: list,
+        versionDesc,
       };
     } else {
       return Promise.reject('获取模型文件列表失败');
@@ -224,8 +235,7 @@ export class MirrorSelector implements SelectorTypeInfo {
       image_id: parentKey,
       page: 0,
       size: 2000,
-      status: 'available',
-      state: 1,
+      status: MirrorVersionStatus.Available,
     });
     if (res && res.data) {
       const list = res.data.content || [];
@@ -236,7 +246,7 @@ export class MirrorSelector implements SelectorTypeInfo {
   }
 
   async getFiles(_parentKey: string, parentNode: MirrorVersionData) {
-    const { url } = parentNode;
+    const { url, description } = parentNode;
     return {
       path: url,
       content: [
@@ -245,6 +255,7 @@ export class MirrorSelector implements SelectorTypeInfo {
           file_name: `${url}`,
         },
       ],
+      versionDesc: description,
     };
   }
 }

react-ui/src/components/ResourceSelectorModal/index.less

@@ -65,7 +65,7 @@
       border-bottom: 1px solid rgba(22, 100, 255, 0.1);
     }
     &__files {
-      height: calc(100% - 75px);
+      height: calc(100% - 61px);
       overflow-y: auto;
 
       &__file {
@@ -76,7 +76,22 @@
         word-break: break-all;
         background: rgba(4, 3, 3, 0.06);
         border-radius: 4px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
       }
     }
+    &__desc {
+      margin-bottom: 10px;
+      padding: 10px;
+      overflow-y: auto;
+      color: @text-color-secondary;
+      font-size: 13px;
+      word-break: break-all;
+      background: rgba(4, 3, 3, 0.06);
+      border-radius: 4px;
+      max-height: calc(100% - 61px);
+    }
   }
 }

react-ui/src/components/ResourceSelectorModal/index.tsx

@@ -8,6 +8,7 @@ import KFIcon from '@/components/KFIcon';
 import KFModal from '@/components/KFModal';
 import { CommonTabKeys } from '@/enums';
 import { ResourceFileData } from '@/pages/Dataset/config';
+import { type MirrorVersionData } from '@/pages/Mirror/Info';
 import { to } from '@/utils/promise';
 import type { GetRef, ModalProps, TreeDataNode, TreeProps } from 'antd';
 import { Input, Tabs, Tree } from 'antd';
@@ -19,13 +20,13 @@ export { ResourceSelectorType, selectorTypeConfig };
 // 选择数据集、模型、镜像的返回类型
 export type ResourceSelectorResponse = {
   activeTab: CommonTabKeys; // 是我的还是公开的
-  id: string; // 数据集\模型\镜像 id
-  name: string; // 数据集\模型\镜像 name
-  version: string; // 数据集\模型\镜像版本
-  path: string; // 数据集\模型\镜像版本路径
-  identifier: string; // 数据集\模型 identifier，镜像这个字段为空
-  owner: string; // 数据集\模型 owner，镜像这个字段为空
-};
+  id: string; // 数据集\模型 id
+  name: string; // 数据集\模型 name
+  identifier: string; // 数据集\模型 identifier
+  owner: string; // 数据集\模型 owner
+  version: string; // 数据集\模型 version
+  path: string; // 数据集\模型 版本路径
+} & MirrorVersionData;
 
 export interface ResourceSelectorModalProps extends Omit<ModalProps, 'onOk'> {
   /** 类型，数据集、模型、镜像 */
@@ -84,6 +85,7 @@ function ResourceSelectorModal({
   const [loadedKeys, setLoadedKeys] = useState<React.Key[]>([]);
   const [originTreeData, setOriginTreeData] = useState<TreeDataNode[]>([]);
   const [files, setFiles] = useState<ResourceFileData[]>([]);
+  const [versionDesc, setVersionDesc] = useState<string | undefined>(undefined);
   const [versionPath, setVersionPath] = useState('');
   const [searchText, setSearchText] = useState('');
   const [firstLoadList, setFirstLoadList] = useState(false);
@@ -119,6 +121,7 @@ function ResourceSelectorModal({
     setCheckedKeys([]);
     setLoadedKeys([]);
     setFiles([]);
+    setVersionDesc(undefined);
     setVersionPath('');
     setSearchText('');
     getTreeData();
@@ -169,9 +172,11 @@ function ResourceSelectorModal({
     if (res) {
       setVersionPath(res.path);
       setFiles(res.content);
+      setVersionDesc(res.versionDesc);
     } else {
       setVersionPath('');
       setFiles([]);
+      setVersionDesc(undefined);
     }
   };
 
@@ -201,6 +206,7 @@ function ResourceSelectorModal({
     } else {
       setVersionPath('');
       setFiles([]);
+      setVersionDesc(undefined);
     }
   };
 
@@ -236,15 +242,22 @@ function ResourceSelectorModal({
       const name = (treeNode?.title ?? '') as string;
       const identifier = (treeNode?.identifier ?? '') as string;
       const owner = (treeNode?.owner ?? '') as string;
-      const res = {
-        id,
-        name,
-        path: versionPath,
-        version,
-        identifier,
-        owner,
-        activeTab: activeTab,
-      };
+      const childNode = treeNode.children.filter((v: TreeDataNode) => v.key === last)[0];
+      const res =
+        type === ResourceSelectorType.Mirror
+          ? {
+              activeTab: activeTab,
+              ...childNode,
+            }
+          : {
+              activeTab: activeTab,
+              id: Number(id),
+              name,
+              path: versionPath,
+              version,
+              identifier,
+              owner,
+            };
       onOk?.(res);
     } else {
       onOk?.(undefined);
@@ -253,8 +266,9 @@ function ResourceSelectorModal({
 
   const title = `选择${config.name}`;
   const palceholder = `请输入${config.name}名称`;
+  const fileLen = files.length > 0 ? `（${files.length}）` : '';
   const fileTitle =
-    type === ResourceSelectorType.Mirror ? '已选镜像' : `已选${config.name}文件（${files.length}）`;
+    type === ResourceSelectorType.Mirror ? '镜像地址' : `${config.name}版本文件${fileLen}`;
   const tabItems = config.tabItems;
   const titleImg = config.modalIcon;
 
@@ -312,14 +326,24 @@ function ResourceSelectorModal({
             />
           </div>
           <div className={styles['model-selector__right']}>
-            <div className={styles['model-selector__right__title']}>{fileTitle}</div>
-            <div className={styles['model-selector__right__files']}>
-              {files.map((v) => (
-                <div key={v.url} className={styles['model-selector__right__files__file']}>
-                  {v.file_name}
-                </div>
-              ))}
+            <div style={{ height: '50%' }}>
+              <div className={styles['model-selector__right__title']}>{fileTitle}</div>
+              <div className={styles['model-selector__right__files']}>
+                {files.map((v) => (
+                  <div key={v.url} className={styles['model-selector__right__files__file']}>
+                    {v.file_name}
+                  </div>
+                ))}
+              </div>
             </div>
+            {versionDesc && (
+              <div style={{ height: '50%' }}>
+                <div
+                  className={styles['model-selector__right__title']}
+                >{`${config.name}版本描述`}</div>
+                <div className={styles['model-selector__right__desc']}>{versionDesc}</div>
+              </div>
+            )}
           </div>
         </div>
       </div>

react-ui/src/components/RightContent/AvatarDropdown.tsx

@@ -1,22 +1,25 @@
 import { clearSessionToken } from '@/access';
+import DefaultAvatar from '@/assets/img/avatar-default.png';
+import { getLabelStudioUrl } from '@/services/developmentEnvironment';
 import { setRemoteMenu } from '@/services/session';
 import { logout } from '@/services/system/auth';
 import { ClientInfo } from '@/types';
-import { sleep } from '@/utils/promise';
+import { sleep, to } from '@/utils/promise';
 import SessionStorage from '@/utils/sessionStorage';
 import { gotoLoginPage, oauthLogout } from '@/utils/ui';
 import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
 import { setAlpha } from '@ant-design/pro-components';
 import { useEmotionCss } from '@ant-design/use-emotion-css';
-import { history, useModel } from '@umijs/max';
+import { useModel, useNavigate } from '@umijs/max';
 import { Avatar, Spin } from 'antd';
 import type { MenuInfo } from 'rc-menu/lib/interface';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { flushSync } from 'react-dom';
 import HeaderDropdown from '../HeaderDropdown';
 
 export type GlobalHeaderRightProps = {
   menu?: boolean;
+  isHome?: boolean;
 };
 
 const Name = () => {
@@ -55,24 +58,47 @@ const AvatarLogo = () => {
       },
     };
   });
-  return <Avatar size="small" className={avatarClassName} src={currentUser?.avatar} alt="avatar" />;
+  return (
+    <Avatar
+      size="small"
+      className={avatarClassName}
+      src={currentUser?.avatar || DefaultAvatar}
+      alt="avatar"
+    />
+  );
 };
 
-const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
+const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu, isHome = false }) => {
+  const navigate = useNavigate();
   /**
    * 退出登录，并且将当前的 url 保存
    */
   const loginOut = async () => {
-    oauthLogout('http://172.20.32.197:31209/oauth/logout');
+    // const { origin } = location;
+    const [res] = await to(getLabelStudioUrl());
+    if (res && res.data) {
+      oauthLogout(`${res.data}/oauth/logout`);
+    }
     // 至少 1 秒后跳转，希望子系统能完成注销
     await Promise.all([logout(), sleep(1000)]);
     clearSessionToken();
     setRemoteMenu(null);
-    gotoLoginPage();
+    // 退出 oauth2
     const clientInfo: ClientInfo = SessionStorage.getItem(SessionStorage.clientInfoKey, true);
     if (clientInfo) {
       const { logoutUri } = clientInfo;
       location.replace(logoutUri);
+      // if (isHome) {
+      //   setTimeout(() => {
+      //     location.replace(origin);
+      //   }, 1);
+      // }
+    } else {
+      if (isHome) {
+        location.reload();
+      } else {
+        gotoLoginPage(true);
+      }
     }
   };
   const actionClassName = useEmotionCss(({ token }) => {
@@ -92,20 +118,17 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
   });
   const { initialState, setInitialState } = useModel('@@initialState');
 
-  const onMenuClick = useCallback(
-    (event: MenuInfo) => {
-      const { key } = event;
-      if (key === 'logout') {
-        flushSync(() => {
-          setInitialState((s) => ({ ...s, currentUser: undefined }));
-        });
-        loginOut();
-        return;
-      }
-      history.push(`/account/${key}`);
-    },
-    [setInitialState],
-  );
+  const onMenuClick = (event: MenuInfo) => {
+    const { key } = event;
+    if (key === 'logout') {
+      flushSync(() => {
+        setInitialState((s) => ({ ...s, currentUser: undefined }));
+      });
+      loginOut();
+      return;
+    }
+    navigate(`/account/${key}`);
+  };
 
   const loading = (
     <span className={actionClassName}>

react-ui/src/components/RightContent/index.tsx

@@ -1,8 +1,9 @@
 import KFIcon from '@/components/KFIcon';
 import { ProBreadcrumb } from '@ant-design/pro-components';
 import { useModel } from '@umijs/max';
-import { Button } from 'antd';
+import { Button, Flex } from 'antd';
 import React from 'react';
+import MessageBroadcast from '../MessageBroadcast';
 import Avatar from './AvatarDropdown';
 import styles from './index.less';
 // import { SelectLang } from '@umijs/max';
@@ -43,7 +44,15 @@ const GlobalHeaderRight: React.FC = () => {
 
       <ProBreadcrumb></ProBreadcrumb>
 
-      <Avatar menu={true} />
+      <Flex
+        align="center"
+        style={{ marginLeft: 'auto', marginRight: 0, background: '#3a3da5', padding: '0 30px' }}
+      >
+        <MessageBroadcast />
+
+        <Avatar menu={true} />
+      </Flex>
+
       {/* <SelectLang className={actionClassName} /> */}
     </div>
   );

react-ui/src/components/RunDuration/index.tsx

@@ -10,13 +10,21 @@ type RunDurationProps = {
 };
 function RunDuration({ createTime, finishTime, className, style }: RunDurationProps) {
   const [now] = useServerTime();
-  const [currentTime, setCurrentTime] = useState<Date>(now());
+  const [currentTime, setCurrentTime] = useState<Date>(finishTime ? new Date(finishTime) : now());
+
+  // console.log(
+  //   'currentTime',
+  //   new Date(createTime ?? 0),
+  //   currentTime,
+  //   (currentTime.getTime() - new Date(createTime ?? 0).getTime()) / 1000,
+  // );
 
   // 定时刷新耗时
   useEffect(() => {
     if (finishTime) {
       setCurrentTime(new Date(finishTime));
     } else {
+      setCurrentTime(now());
       const timer = setInterval(() => {
         setCurrentTime(now());
       }, 1000);
@@ -25,6 +33,7 @@ function RunDuration({ createTime, finishTime, className, style }: RunDurationPr
       };
     }
   }, [finishTime, now]);
+
   return (
     <span className={className} style={style}>
       {elapsedTime(createTime, currentTime)}

react-ui/src/enums/index.ts

@@ -33,7 +33,7 @@ export enum TensorBoardStatus {
   Unknown = 'Unknown', // 未知
   Pending = 'Pending', // 启动中
   Running = 'Running', // 运行中
-  Terminated = 'Terminated', // 未启动或者已终止
+  Terminated = 'Terminated', // 未启动
   Failed = 'Failed', // 失败
 }
 
@@ -95,8 +95,8 @@ export enum AutoMLType {
 
 export const autoMLTypeOptions = [
   { label: '表格', value: AutoMLType.Table },
-  { label: '文本分类', value: AutoMLType.Text },
-  { label: '视频分类', value: AutoMLType.Video },
+  { label: '文本', value: AutoMLType.Text },
+  { label: '视频', value: AutoMLType.Video },
 ];
 
 // 自动化任务类型
@@ -163,3 +163,37 @@ export enum AutoMLTrailStatus {
   CANCELLED = 'CANCELLED', // 取消
   MEMOUT = 'MEMOUT', // 内存溢出
 }
+
+// 流水线组件类型
+export enum ComponentType {
+  Ref = 'ref',
+  Select = 'select',
+  Map = 'map',
+  Str = 'str',
+}
+
+// 消息类型
+export enum MessageType {
+  System = 1,
+  Mine = 2,
+}
+
+// 消息状态
+export enum MessageStatus {
+  All = -1,
+  UnRead = 1,
+  Readed = 2,
+}
+
+// 审核状态
+export enum ApprovalStatus {
+  Pending = 0,
+  Agree = 1,
+  Reject = 2,
+}
+
+export const approvalStatusOptions = [
+  { label: '待审核', value: ApprovalStatus.Pending },
+  { label: '通过', value: ApprovalStatus.Agree },
+  { label: '拒绝', value: ApprovalStatus.Reject },
+];

react-ui/src/enums/pagesEnums.ts

@@ -1,4 +1,6 @@
 export enum PageEnum {
+  Root = '/',
   LOGIN = '/user/login',
   Authorize = '/authorize',
+  Home = '/home',
 }

react-ui/src/global.tsx

@@ -19,6 +19,30 @@ const clearCache = () => {
   }
 };
 
+const doubleText = () => {
+  if (process.env.NODE_ENV === 'development') {
+    document.body.addEventListener(
+      'click',
+      (e) => {
+        const target = e.target;
+        if (
+          //  e.altKey &&
+          e.ctrlKey &&
+          target &&
+          target.innerText &&
+          target.nodeType === Node.ELEMENT_NODE
+        ) {
+          e.stopPropagation();
+          e.preventDefault();
+          const times = 2;
+          target.innerText = target.innerText.repeat(times);
+        }
+      },
+      true,
+    );
+  }
+};
+
 // if pwa is true
 if (pwa) {
   // Notify user if offline now
@@ -89,3 +113,5 @@ if (pwa) {
 
   clearCache();
 }
+
+doubleText();

react-ui/src/hooks/useComputingResource.ts

@@ -4,66 +4,90 @@
  * @Description: 资源规格 hook
  */
 
-import { getComputingResourceReq } from '@/services/pipeline';
-import { ComputingResource } from '@/types';
-import { to } from '@/utils/promise';
-import { type SelectProps } from 'antd';
-import { useCallback, useEffect, useState } from 'react';
+// import { getComputingResourceReq } from '@/services/pipeline';
+// import { ComputingResource } from '@/types';
+// import { to } from '@/utils/promise';
+// import { type SelectProps } from 'antd';
+// import { useCallback, useEffect, useState } from 'react';
 
-const computingResource: ComputingResource[] = [];
+// const computingResource: ComputingResource[] = [];
 
-/** 过滤资源规格 */
-export const filterResourceStandard: SelectProps<string, ComputingResource>['filterOption'] = (
-  input: string,
-  option?: ComputingResource,
-) => {
-  return (
-    option?.computing_resource?.toLocaleLowerCase()?.includes(input.toLocaleLowerCase()) ?? false
-  );
-};
+// /** 过滤资源规格 */
+// export const filterResourceStandard: SelectProps<string, ComputingResource>['filterOption'] = (
+//   input: string,
+//   option?: ComputingResource,
+// ) => {
+//   return (
+//     option?.computing_resource?.toLocaleLowerCase()?.includes(input.toLocaleLowerCase()) ?? false
+//   );
+// };
 
-/** 资源规格字段 */
-export const resourceFieldNames = {
-  label: 'description',
-  value: 'id',
-};
+// /** 资源规格字段 */
+// export const resourceFieldNames = {
+//   label: 'description',
+//   value: 'id',
+// };
 
-/** 获取资源规格 */
-export function useComputingResource() {
-  const [resourceStandardList, setResourceStandardList] = useState<ComputingResource[]>([]);
+// /** 获取资源规格 */
+// export function useComputingResource() {
+//   const [resourceStandardList, setResourceStandardList] = useState<ComputingResource[]>([]);
 
-  useEffect(() => {
-    // 获取资源规格列表数据
-    const getComputingResource = async () => {
-      const params = {
-        page: 0,
-        size: 1000,
-        resource_type: '',
-      };
-      const [res] = await to(getComputingResourceReq(params));
-      if (res && res.data && Array.isArray(res.data.content)) {
-        setResourceStandardList(res.data.content);
-        computingResource.splice(0, computingResource.length, ...res.data.content);
-      }
-    };
+//   useEffect(() => {
+//     // 获取资源规格列表数据
+//     const getComputingResource = async () => {
+//       const params = {
+//         page: 0,
+//         size: 1000,
+//         resource_type: '',
+//       };
+//       const [res] = await to(getComputingResourceReq(params));
+//       if (res && res.data && Array.isArray(res.data.content)) {
+//         setResourceStandardList(res.data.content);
+//         computingResource.splice(0, computingResource.length, ...res.data.content);
+//       }
+//     };
+
+//     if (computingResource.length > 0) {
+//       setResourceStandardList(computingResource);
+//     } else {
+//       getComputingResource();
+//     }
+//   }, []);
 
-    if (computingResource.length > 0) {
-      setResourceStandardList(computingResource);
-    } else {
-      getComputingResource();
-    }
+//   // 根据 standard 获取 description
+//   const getDescription = useCallback(
+//     (id?: string | number) => {
+//       if (!id) {
+//         return undefined;
+//       }
+//       return resourceStandardList.find((item) => Number(item.id) === Number(id))?.description;
+//     },
+//     [resourceStandardList],
+//   );
+
+//   return [resourceStandardList, getDescription] as const;
+// }
+
+import state, { getSystemResources } from '@/state/systemResource';
+import { useSnapshot } from '@umijs/max';
+import { useCallback, useEffect } from 'react';
+
+export const useSystemResource = () => {
+  useEffect(() => {
+    getSystemResources();
   }, []);
 
-  // 根据 standard 获取 description
+  const snap = useSnapshot(state);
+  /* 根据 standard 获取 description */
   const getDescription = useCallback(
     (id?: string | number) => {
       if (!id) {
         return undefined;
       }
-      return resourceStandardList.find((item) => Number(item.id) === Number(id))?.description;
+      return snap.resources.find((item) => Number(item.id) === Number(id))?.description;
     },
-    [resourceStandardList],
+    [snap.resources],
   );
 
-  return [resourceStandardList, getDescription] as const;
-}
+  return getDescription;
+};

react-ui/src/hooks/useSSE.ts

@@ -1,11 +1,24 @@
-import { parseJsonText } from '@/utils';
-import { useEffect } from 'react';
 import { ExperimentStatus } from '@/enums';
 import { NodeStatus } from '@/types';
+import { parseJsonText } from '@/utils';
+import { useEffect } from 'react';
 
-export type MessageHandler = (experimentInsId: number, status: string, finishedAt: string, nodes: Record<string, NodeStatus>) => void
-export const useSSE = (experimentInsId: number, status: ExperimentStatus, name: string, namespace: string, onMessage: MessageHandler) => {
-  const isRunning = status === ExperimentStatus.Pending || status === ExperimentStatus.Running
+export type MessageHandler = (
+  experimentId: number,
+  experimentInsId: number,
+  status: string,
+  finishTime: string,
+  nodes: Record<string, NodeStatus>,
+) => void;
+export const useSSE = (
+  experimentId: number,
+  experimentInsId: number,
+  status: ExperimentStatus,
+  name: string,
+  namespace: string,
+  onMessage: MessageHandler,
+) => {
+  const isRunning = status === ExperimentStatus.Pending || status === ExperimentStatus.Running;
   useEffect(() => {
     if (isRunning) {
       const { origin } = location;
@@ -22,8 +35,8 @@ export const useSSE = (experimentInsId: number, status: ExperimentStatus, name:
         const dataJson = parseJsonText(data);
         const statusData = dataJson?.result?.object?.status;
         if (statusData) {
-          const { finishedAt, phase, nodes } = statusData;    
-          onMessage(experimentInsId, phase, finishedAt, nodes);
+          const { finishedAt, phase, nodes } = statusData;
+          onMessage(experimentId, experimentInsId, phase, finishedAt, nodes);
         }
       };
 
@@ -33,8 +46,7 @@ export const useSSE = (experimentInsId: number, status: ExperimentStatus, name:
 
       return () => {
         evtSource.close();
-      }
+      };
     }
-    
-  }, [experimentInsId, isRunning, name, namespace, onMessage]);
+  }, [experimentId, experimentInsId, isRunning, name, namespace, onMessage]);
 };

react-ui/src/hooks/useServerTime.ts

@@ -10,6 +10,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 let globalTimeOffset: number | undefined = undefined;
 
+// 获取服务器时间偏移
 export const globalGetSeverTime = async () => {
   const requestStartTime = Date.now();
   const [res] = await to(getSeverTimeReq());
@@ -23,7 +24,8 @@ export const globalGetSeverTime = async () => {
   }
 };
 
-export const now = () => {
+// 服务器的当前时间
+export const serverNow = () => {
   return new Date(Date.now() + (globalTimeOffset ?? 0));
 };
 

react-ui/src/overrides.less

@@ -220,35 +220,32 @@
     height: 100%;
     .ant-pro-grid-content-children {
       height: 100%;
-      .ant-pro-layout-watermark-wrapper {
+      .ant-pro-page-container-children-container {
         height: 100%;
-        .ant-pro-page-container-children-container {
+        padding: 0;
+        .ant-pro-table {
+          display: flex;
+          flex-direction: column;
           height: 100%;
-          padding: 0;
-          .ant-pro-table {
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-            .ant-pro-card.ant-pro-table-search {
-              flex: none;
-              height: auto;
-            }
-            .ant-pro-card {
-              flex: 1;
-              min-height: 0;
-              .ant-pro-card-body {
-                height: 100%;
-                .ant-table-wrapper {
-                  height: calc(100% - 64px);
-                  .ant-spin-nested-loading {
+          .ant-pro-card.ant-pro-table-search {
+            flex: none;
+            height: auto;
+          }
+          .ant-pro-card {
+            flex: 1;
+            min-height: 0;
+            .ant-pro-card-body {
+              height: 100%;
+              .ant-table-wrapper {
+                height: calc(100% - 64px - 64px);
+                .ant-spin-nested-loading {
+                  height: 100%;
+                  .ant-spin-container {
                     height: 100%;
-                    .ant-spin-container {
+                    .ant-table-fixed-header {
                       height: 100%;
-                      .ant-table-fixed-header {
+                      .ant-table-container {
                         height: 100%;
-                        .ant-table-container {
-                          height: 100%;
-                        }
                       }
                     }
                   }