From bd9f69b2dcb6f6fce6ca765f8f8ad60634867c56 Mon Sep 17 00:00:00 2001
From: MorganChenFuHai <chenfuhai@vowei.com>
Date: Fri, 10 Nov 2023 15:42:54 +0800
Subject: [PATCH 1/3] edit i18n for dataset and hyperparameter

---
 src/locales/en-US/common.json                    | 12 ++++++------
 src/locales/en-US/components/AnakinHeader.json   |  2 +-
 src/locales/en-US/views/Dataset.json             | 16 ++++++++--------
 src/locales/en-US/views/Hyperparameter.json      | 12 ++++++------
 .../hyperparameter/HyperparameterCreate.vue      |  2 +-
 .../hyperparameter/HyperparameterDetail.vue      |  2 +-
 6 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/locales/en-US/common.json b/src/locales/en-US/common.json
index 74a8302..99b4b4c 100644
--- a/src/locales/en-US/common.json
+++ b/src/locales/en-US/common.json
@@ -16,13 +16,13 @@
   "reverted": "reverted",
   "export": "export",
   "exported": "exported",
-  "edit": "edit",
-  "editd": "editd",
-  "create": "create",
-  "created": "created",
+  "edit": "Edit",
+  "editd": "Editd",
+  "create": "Create",
+  "created": "Created",
   "add": "add",
-  "delete": "delete",
-  "deleted": "deleted",
+  "delete": "Delete",
+  "deleted": "Deleted",
   "remove": "remove",
   "removed": "removed",
   "fail":"fail",
diff --git a/src/locales/en-US/components/AnakinHeader.json b/src/locales/en-US/components/AnakinHeader.json
index b3665cf..bbe0a7b 100644
--- a/src/locales/en-US/components/AnakinHeader.json
+++ b/src/locales/en-US/components/AnakinHeader.json
@@ -8,7 +8,7 @@
   "menu": {
     "fineTuningExperiment": "Fine Tuning Experiment",
     "dataset": "Dataset",
-    "hyperparameterGroup": "Hyperparameter Group"
+    "hyperparameterGroup": "Hyperparameter"
   },
   "feedback": "Feedback",
   "help": "Help",
diff --git a/src/locales/en-US/views/Dataset.json b/src/locales/en-US/views/Dataset.json
index 2025d0e..cb9283c 100644
--- a/src/locales/en-US/views/Dataset.json
+++ b/src/locales/en-US/views/Dataset.json
@@ -10,20 +10,20 @@
   "duplicateTags": "Duplicate Tags",
   "datasetName": "Dataset Name",
   "language": "Language",
-  "licenseType": "License Type",
+  "licenseType": "License",
   "size": "Size",
-  "taskType": "Task Type",
-  "subtaskType": "Subtask Type",
+  "taskType": "Task",
+  "subtaskType": "Subtask",
   "duplicateSubtask": "duplicate Subtask",
-  "addSubtaskType": "Add Subtask Type",
+  "addSubtaskType": "Add Subtask",
   "datasetInformation": "Dataset Information",
   "pluginConfiguration": "Plugin Configuration",
   "pluginName": "Plugin Name",
   "subsetName": "Subset Name",
   "duplicateSubsetName":"duplicate SubsetName",
-  "trainingDataFile": "Training Data File",
-  "testingDataFile": "Testing Data File",
-  "validationDataFile": "Validation Data File",
+  "trainingDataFile": "Training Data Address",
+  "testingDataFile": "Testing Data Address",
+  "validationDataFile": "Validation Data Address",
   "featureMapping": "Feature Mapping",
   "dataSourceInformation": "Data Source Information",
   "datasetNameExists": "A dataset with this name already exists",
@@ -40,5 +40,5 @@
   "license":"license",
   "datasetFileSource":"Dataset File Source",
   "basicInformation":"Basic Information",
-  "datasetInfoConfig": "Dataset InfoConfig"
+  "datasetInfoConfig": "Dataset Information"
 }
diff --git a/src/locales/en-US/views/Hyperparameter.json b/src/locales/en-US/views/Hyperparameter.json
index 30af402..dbba457 100644
--- a/src/locales/en-US/views/Hyperparameter.json
+++ b/src/locales/en-US/views/Hyperparameter.json
@@ -1,13 +1,13 @@
 {
-  "create": "Create Hyperparameter Group",
-  "update": "Update Hyperparameter Group",
+  "create": "Create Hyperparameter",
+  "update": "Update Hyperparameter",
   "deleteConfirm": "Confirm deletion of Hyperparameter Group {hyperparameterToDelete}?",
 
-  "name": "name",
-  "fineTuningType": "Fine Tuning Type",
+  "name": "Name",
+  "fineTuningType": "Fine-tuning",
   "parameters": "Parameters Preview",
-  "hyperparameterGroup": "Hyperparameter Group ",
-  "configuration": "configuration",
+  "hyperparameterGroup": "Hyperparameter",
+  "configuration": "Configuration",
   "hyperparameterGroupName": "Hyperparameter Group Name",
   "parameterSet":"Parameter Set",
   "parameterDetail":"Parameter Detail",
diff --git a/src/views/hyperparameter/HyperparameterCreate.vue b/src/views/hyperparameter/HyperparameterCreate.vue
index 25665f5..c54f3fb 100644
--- a/src/views/hyperparameter/HyperparameterCreate.vue
+++ b/src/views/hyperparameter/HyperparameterCreate.vue
@@ -148,7 +148,7 @@ onMounted(async () => {
     @confirm="onSubmit"
   >
     <dao-form label-width="120px">
-      <dao-form-group title="基本信息">
+      <dao-form-group :title="t('views.Dataset.basicInformation')">
         <dao-form-item-validate
           :label="t('views.Hyperparameter.hyperparameterGroupName')"
           name="metadata.name"
diff --git a/src/views/hyperparameter/HyperparameterDetail.vue b/src/views/hyperparameter/HyperparameterDetail.vue
index aba9d19..45ae793 100644
--- a/src/views/hyperparameter/HyperparameterDetail.vue
+++ b/src/views/hyperparameter/HyperparameterDetail.vue
@@ -169,7 +169,7 @@ const onEdit = () => {
           @navigate="router.push"
         >
           <dao-breadcrumb-item
-            :label="t('views.Hyperparameter.parameterSet')"
+            :label="t('views.Hyperparameter.hyperparameterGroup')"
             :to="{ name: 'HyperparameterList' }"
           />
           <dao-breadcrumb-item :label="name" />

From 13785a7fd22cea794d25d1012423827fa04fd6ed Mon Sep 17 00:00:00 2001
From: MorganChenFuHai <chenfuhai@vowei.com>
Date: Mon, 13 Nov 2023 14:31:37 +0800
Subject: [PATCH 2/3] feat: ni18+ finetune

---
 src/locales/en-US/views/Dataset.json          |   2 +-
 .../en-US/views/FinetuneExperiment.json       |   9 +
 .../zh-CN/views/FinetuneExperiment.json       |  10 ++
 .../FinetuneExperimentDetail.vue              | 159 +++++++++++++++++-
 .../FinetuneExperimentDetailItem.vue          | 153 +++++++++++++++++
 5 files changed, 331 insertions(+), 2 deletions(-)
 create mode 100644 src/locales/en-US/views/FinetuneExperiment.json
 create mode 100644 src/locales/zh-CN/views/FinetuneExperiment.json
 create mode 100644 src/views/finetune-experiment/components/FinetuneExperimentDetailItem.vue

diff --git a/src/locales/en-US/views/Dataset.json b/src/locales/en-US/views/Dataset.json
index cb9283c..d2eef8c 100644
--- a/src/locales/en-US/views/Dataset.json
+++ b/src/locales/en-US/views/Dataset.json
@@ -1,5 +1,5 @@
 {
-  "header": "Dataset",
+  "header": "DataSet",
   "zh-CN": "Chinese",
   "en-US": "English",
   "create": "Create Dataset",
diff --git a/src/locales/en-US/views/FinetuneExperiment.json b/src/locales/en-US/views/FinetuneExperiment.json
new file mode 100644
index 0000000..9a9a3b6
--- /dev/null
+++ b/src/locales/en-US/views/FinetuneExperiment.json
@@ -0,0 +1,9 @@
+{
+  "finetuneExperiment": "Finetune Experiment",
+  "status": "Status",
+  "evaluationMethod": "Evaluation Method",
+  "optimalResult": "Optimal Result",
+  "time": "Time",
+  "BasicLargeModel": "basic Large Model",
+  "parameterGroup": "Parameter Group"
+}
diff --git a/src/locales/zh-CN/views/FinetuneExperiment.json b/src/locales/zh-CN/views/FinetuneExperiment.json
new file mode 100644
index 0000000..0a592c0
--- /dev/null
+++ b/src/locales/zh-CN/views/FinetuneExperiment.json
@@ -0,0 +1,10 @@
+{
+  "finetuneExperiment": "微调实验",
+  "status": "状态",
+  "evaluationMethod": "评估方式",
+  "optimalresult": "最优结果",
+  "time": "用时",
+  "BasicLargeModel": "基础大模型",
+  "": "数据集",
+  "parameterGroup": "参数组"
+}
diff --git a/src/views/finetune-experiment/FinetuneExperimentDetail.vue b/src/views/finetune-experiment/FinetuneExperimentDetail.vue
index c794a3e..ecd5cc5 100644
--- a/src/views/finetune-experiment/FinetuneExperimentDetail.vue
+++ b/src/views/finetune-experiment/FinetuneExperimentDetail.vue
@@ -1,3 +1,160 @@
+<script lang="ts" setup>
+import { useRoute, useRouter } from 'vue-router';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { useNamespaceStore } from '@/stores/namespace';
+import { FinetuneExperiment, finetuneExperimentClient } from '@/api/finetune-experiment';
+import { useDateFormat } from '@dao-style/extend';
+import FinetuneExperimentDetailItem from './components/FinetuneExperimentDetailItem.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+
+const namespaceStore = useNamespaceStore();
+
+const finetuneExperiment = ref<FinetuneExperiment>();
+
+const fetchDataset = () => {
+  finetuneExperimentClient.read(namespaceStore.namespace, route.params.name as string).then((res) => {
+    finetuneExperiment.value = res.data;
+  });
+};
+
+fetchDataset();
+
+const name = computed(() => finetuneExperiment.value?.metadata?.name);
+
+const infos = computed(() => {
+  const finetuneExperimentData = finetuneExperiment.value?.spec;
+  const creationTimestamp = finetuneExperiment.value?.metadata?.creationTimestamp;
+  const llms = finetuneExperimentData?.finetuneJobs.map((job) => job.spec?.finetune.finetuneSpec.llm).filter((i) => i);
+  const datasets = finetuneExperimentData?.finetuneJobs.map((job) => job.spec?.finetune.finetuneSpec.dataset);
+  const hyperparameters = finetuneExperimentData?.finetuneJobs.map((job) => job.spec?.finetune.finetuneSpec.hyperparameter?.hyperparameterRef);
+
+  const items = [
+    {
+      label: t('views.Hyperparameter.name'),
+      value: finetuneExperiment.value?.metadata?.name,
+    },
+    {
+      label: t('views.FinetuneExperiment.status'),
+      value: '正常',
+    },
+    {
+      label: t('views.FinetuneExperiment.evaluationMethod'),
+      value: finetuneExperiment.value?.spec?.scoringConfig.name,
+    },
+    {
+      label: t('views.FinetuneExperiment.optimalresult'),
+      value: '-',
+    },
+    {
+      label: t('common.createTime'),
+      value: useDateFormat(creationTimestamp),
+    },
+    {
+      label: t('views.FinetuneExperiment.time'),
+      value: '1小时32分',
+    },
+    {
+      label: t('views.FinetuneExperiment.BasicLargeModel'),
+      value: llms?.join(','),
+      slotId: 'llm',
+    },
+    {
+      label: t('views.Dataset.header'),
+      value: datasets?.join(','),
+      slotId: 'dataset',
+
+    },
+    {
+      label: t('views.FinetuneExperiment.parameterGroup'),
+      value: hyperparameters?.join(','),
+      slotId: 'hyperparameter',
+    },
+  ];
+
+  return items;
+});
+
+const finetuneExperimentsData = computed(() => finetuneExperiment.value?.spec?.finetuneJobs);
+
+</script>
 <template>
-  Finetune detail
+  <div class="finetune-experiment-detail console-main-container">
+    <dao-header type="3rd">
+      <template #breadcrumb>
+        <dao-breadcrumb
+          icon="icon-cluster"
+          @navigate="router.push"
+        >
+          <dao-breadcrumb-item
+            :label="t('views.FinetuneExperiment.finetuneExperiment')"
+            :to="{ name: 'FinetuneExperimentList' }"
+          />
+          <dao-breadcrumb-item :label="name" />
+        </dao-breadcrumb>
+      </template>
+
+      <template #action>
+        <!-- <dao-button
+          type="tertiary"
+          @click="onEdit"
+        >
+          {{ t('common.edit') }}
+        </dao-button> -->
+      </template>
+    </dao-header>
+
+    <dao-card
+      type="simple"
+      :title="t('views.Dataset.basicInformation')"
+    >
+      <dao-card-item>
+        <dao-key-value-layout
+          direction="vertical"
+          :column="4"
+          :data="infos"
+        >
+          <template #kv-llm="{ row }">
+            <dao-key-value-layout-item :label="row.label">
+              <dao-hover-card :data="row.value?.split(',')" />
+            </dao-key-value-layout-item>
+          </template>
+          <template #kv-dataset="{ row }">
+            <dao-key-value-layout-item :label="row.label">
+              <dao-hover-card :data="row.value?.split(',')" />
+            </dao-key-value-layout-item>
+          </template>
+          <template #kv-hyperparameter="{ row }">
+            <dao-key-value-layout-item :label="row.label">
+              <dao-hover-card :data="row.value?.split(',')" />
+            </dao-key-value-layout-item>
+          </template>
+        </dao-key-value-layout>
+      </dao-card-item>
+    </dao-card>
+    <FinetuneExperimentDetailItem
+      v-for="experiment in finetuneExperimentsData"
+      :key="experiment.spec?.finetune?.finetuneSpec?.hyperparameter?.hyperparameterRef"
+      :data="experiment"
+    />
+    <!-- <dao-card
+      type="simple"
+      :title="t('views.Dataset.datasetInfoConfig')"
+      class="dataset-detail__subset-info"
+    >
+      <dao-card-item>
+        <dao-table
+          hide-toolbar
+          no-shadow
+          :columns="columns"
+          :data="subsets"
+          :page-layout="[]"
+        />
+      </dao-card-item>
+    </dao-card> -->
+  </div>
 </template>
diff --git a/src/views/finetune-experiment/components/FinetuneExperimentDetailItem.vue b/src/views/finetune-experiment/components/FinetuneExperimentDetailItem.vue
new file mode 100644
index 0000000..a63523f
--- /dev/null
+++ b/src/views/finetune-experiment/components/FinetuneExperimentDetailItem.vue
@@ -0,0 +1,153 @@
+<!-- eslint-disable @typescript-eslint/no-shadow -->
+<script lang="ts" setup>
+import { PropType, computed } from 'vue';
+import { FinetuneJob } from '@/api/finetune-job';
+
+const props = defineProps({
+  data: {
+    type: Array as PropType<FinetuneJob>,
+    default: () => ([]),
+  },
+});
+
+const infos = computed(() => {
+  const { data: { spec } } = props;
+  const llms = spec?.finetune?.finetuneSpec.llm;
+  const datasets = spec?.finetune.finetuneSpec.dataset;
+  const hyperparameters = spec?.finetune.finetuneSpec.hyperparameter?.hyperparameterRef;
+
+  const items = [
+    {
+      label: '基础大模型',
+      value: llms,
+      slotId: 'llm',
+    },
+    // {
+    //   label: '评估方式',
+    //   value: spec?.scoringConfig.name,
+    // },
+    {
+      label: '数据集',
+      value: datasets,
+      slotId: 'dataset',
+    },
+    // {
+    //   label: '创建时间',
+    //   value: useDateFormat(creationTimestamp),
+    // },
+    {
+      label: '超参组',
+      value: hyperparameters,
+      slotId: 'hyperparameter',
+    },
+  ];
+
+  return items;
+});
+
+</script>
+
+<template>
+  <dao-card
+    class="finetune-experiment-item"
+    icon="icon-mspider"
+    divider
+    use-font
+  >
+    <template #title>
+      <router-link
+        class="finetune-experiment-item__header__text active"
+        :to="{
+          name: 'FinetuneExperimentDetail',
+          params: { name: props.data.metadata?.name },
+        }"
+      >
+        {{ props.data.metadata?.name }}
+      </router-link>
+
+      <dao-state-icon :type="'success'">
+        运行中
+      </dao-state-icon>
+
+      <dao-state-icon :type="'error'">
+        运行中
+      </dao-state-icon>
+    </template>
+
+    <dao-card-item class="finetune-experiment-item__base-info">
+      <dao-key-value-layout
+        :column="2"
+        :data="infos"
+      >
+        <template #kv-llm="{ row }">
+          <dao-key-value-layout-item :label="row.label">
+            <dao-hover-card :data="row.value?.split(',')" />
+          </dao-key-value-layout-item>
+        </template>
+
+        <template #kv-dataset="{ row }">
+          <dao-key-value-layout-item :label="row.label">
+            <dao-hover-card :data="row.value?.split(',')" />
+          </dao-key-value-layout-item>
+        </template>
+
+        <template #kv-hyperparameter="{ row }">
+          <dao-key-value-layout-item :label="row.label">
+            <dao-hover-card :data="row.value?.split(',')" />
+          </dao-key-value-layout-item>
+        </template>
+      </dao-key-value-layout>
+    </dao-card-item>
+  </dao-card>
+</template>
+
+<style lang="scss">
+.finetune-experiment-item {
+  &.finetune-experiment-item{
+    margin-top: 20px;
+  }
+
+  // &__base-info.dao-card-item {
+  //   flex: 1.25 1 0;
+  // }
+
+  &__header {
+   display: flex;
+    align-items: center;
+    font-weight: 700;
+    color: var(--dao-text-pageTitle);
+
+    &__text {
+      display: inline-block;
+      max-width: 75%;
+      margin-right: 30px;
+      overflow: hidden;
+      color: var(--dao-text-primary);
+      text-decoration: none;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &.active {
+        &:hover,
+        &:active {
+          color: var(--dao-primary-blue-040);
+        }
+      }
+    }
+  }
+
+  &__text {
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  &__size {
+    color: var(--dao-green-030);
+  }
+
+}
+
+.dao-key-value-layout.is-horizontal .dao-key-value-layout-item__label {
+  width: 110px;
+}
+</style>

From 87954425ea5e02065ad99e1261d7632cab877a34 Mon Sep 17 00:00:00 2001
From: MorganChenFuHai <chenfuhai@vowei.com>
Date: Tue, 14 Nov 2023 14:34:55 +0800
Subject: [PATCH 3/3] feat: add finetune experiment page

---
 src/locales/en-US/common.json                 |   4 +-
 .../en-US/views/FinetuneExperiment.json       |  11 +-
 src/locales/zh-CN/common.json                 |   5 +-
 .../zh-CN/views/FinetuneExperiment.json       |  10 +-
 .../FinetuneExperimentDetail.vue              | 134 ++++++++++++++----
 .../FinetuneExperimentDetailItem.vue          | 111 ++++++++-------
 6 files changed, 196 insertions(+), 79 deletions(-)

diff --git a/src/locales/en-US/common.json b/src/locales/en-US/common.json
index 99b4b4c..c77c876 100644
--- a/src/locales/en-US/common.json
+++ b/src/locales/en-US/common.json
@@ -31,6 +31,8 @@
   "notyError": "Failed to {action} {name}",
   "error": "error",
   "createTime": "Create Time",
-  "default":"default"
+  "default":"default",
+  "stop":"Stop",
+  "run": "Running"
 
 }
diff --git a/src/locales/en-US/views/FinetuneExperiment.json b/src/locales/en-US/views/FinetuneExperiment.json
index 9a9a3b6..eea1e82 100644
--- a/src/locales/en-US/views/FinetuneExperiment.json
+++ b/src/locales/en-US/views/FinetuneExperiment.json
@@ -2,8 +2,15 @@
   "finetuneExperiment": "Finetune Experiment",
   "status": "Status",
   "evaluationMethod": "Evaluation Method",
-  "optimalResult": "Optimal Result",
+  "optimalresult": "Optimal Result",
   "time": "Time",
   "BasicLargeModel": "basic Large Model",
-  "parameterGroup": "Parameter Group"
+  "parameterGroup": "Parameter Group",
+  "dataSet": "Data Set",
+  "results": "Results",
+  "contrast":"Contrast",
+  "taskList":"TaskList",
+  "pleaseEnter":"Please enter a container group name to search for",
+  "stopConfirm":"Confirm deletion of dataset {finetuneToShop}?"
+
 }
diff --git a/src/locales/zh-CN/common.json b/src/locales/zh-CN/common.json
index 33e3a5a..035b32f 100644
--- a/src/locales/zh-CN/common.json
+++ b/src/locales/zh-CN/common.json
@@ -31,5 +31,8 @@
   "notyError": "{name}{action}失败",
   "error": "出错了",
   "createTime": "创建时间",
-  "default":"默认"
+  "default":"默认",
+  "stop":"停止",
+  "run": "运行中"
+
 }
diff --git a/src/locales/zh-CN/views/FinetuneExperiment.json b/src/locales/zh-CN/views/FinetuneExperiment.json
index 0a592c0..0227e3f 100644
--- a/src/locales/zh-CN/views/FinetuneExperiment.json
+++ b/src/locales/zh-CN/views/FinetuneExperiment.json
@@ -5,6 +5,12 @@
   "optimalresult": "最优结果",
   "time": "用时",
   "BasicLargeModel": "基础大模型",
-  "": "数据集",
-  "parameterGroup": "参数组"
+  "dataSet": "数据集",
+  "parameterGroup": "参数组",
+  "results": "评估结果",
+  "contrast":"对比",
+  "taskList":"任务列表",
+  "pleaseEnter":"请输入容器组名称搜索",
+  "stopConfirm":"确认停止微调实验 {finetuneToShop} 吗？"
+
 }
diff --git a/src/views/finetune-experiment/FinetuneExperimentDetail.vue b/src/views/finetune-experiment/FinetuneExperimentDetail.vue
index ecd5cc5..ab3000d 100644
--- a/src/views/finetune-experiment/FinetuneExperimentDetail.vue
+++ b/src/views/finetune-experiment/FinetuneExperimentDetail.vue
@@ -1,31 +1,49 @@
 <script lang="ts" setup>
 import { useRoute, useRouter } from 'vue-router';
-import { computed, ref } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { first } from 'lodash';
 
 import { useNamespaceStore } from '@/stores/namespace';
 import { FinetuneExperiment, finetuneExperimentClient } from '@/api/finetune-experiment';
+import { FinetuneJob } from '@/api/finetune-job';
 import { useDateFormat } from '@dao-style/extend';
+
+import { nError } from '@/utils/useNoty';
+
 import FinetuneExperimentDetailItem from './components/FinetuneExperimentDetailItem.vue';
 
+const search = ref<{ fuzzy: string[] }>();
+const loading = ref(true);
+// 常量定义
+const pageSize = ref(10);
+const currentPage = ref(1);
+const isShow = ref(false);
+
 const { t } = useI18n();
 const router = useRouter();
 const route = useRoute();
 
 const namespaceStore = useNamespaceStore();
-
 const finetuneExperiment = ref<FinetuneExperiment>();
+const showData = ref<FinetuneJob[]>();
+const finetuneToShop = ref<string>();
 
 const fetchDataset = () => {
   finetuneExperimentClient.read(namespaceStore.namespace, route.params.name as string).then((res) => {
     finetuneExperiment.value = res.data;
   });
 };
+// 初始化查询
+const onSearch = () => {
+  currentPage.value = 1;
+};
+// 调用接口
 
 fetchDataset();
-
+// title
 const name = computed(() => finetuneExperiment.value?.metadata?.name);
-
+// 显示基本信息
 const infos = computed(() => {
   const finetuneExperimentData = finetuneExperiment.value?.spec;
   const creationTimestamp = finetuneExperiment.value?.metadata?.creationTimestamp;
@@ -78,9 +96,47 @@ const infos = computed(() => {
 
   return items;
 });
+// 显示任务列表
+const finetuneExperimentDetailData = computed(() => finetuneExperiment.value?.spec?.finetuneJobs.filter((item) => item.spec?.finetune?.finetuneSpec?.dataset.includes(first(search.value?.fuzzy) ?? '')));
+// watch
+
+watchEffect(() => {
+  const startIndex = (currentPage.value - 1) * pageSize.value;
+  const endIndex = currentPage.value * pageSize.value;
+
+  showData.value = finetuneExperimentDetailData.value?.slice(startIndex, endIndex);
+});
+// 加载微调实验详情
+const fetchDatasets = async () => {
+  loading.value = true;
+  try {
+    const res = await finetuneExperimentClient.read(namespaceStore.namespace, route.params.name as string);
+
+    finetuneExperiment.value = res.data;
+    if (finetuneExperimentDetailData.value?.length) {
+      currentPage.value = 1;
+    }
+  } catch (error) {
+    nError(t('common.error'), error);
+  } finally {
+    loading.value = false;
+  }
+};
 
-const finetuneExperimentsData = computed(() => finetuneExperiment.value?.spec?.finetuneJobs);
+// 显示停止对话框
+const showDialog = () => {
+  isShow.value = true;
+  finetuneToShop.value = finetuneExperiment.value?.metadata?.name;
+};
 
+// 隐藏停止对话框
+const hideDialog = () => {
+  isShow.value = false;
+};
+// 确认停止微调实验
+const confirmShop = () => {
+  isShow.value = false;
+};
 </script>
 <template>
   <div class="finetune-experiment-detail console-main-container">
@@ -99,16 +155,17 @@ const finetuneExperimentsData = computed(() => finetuneExperiment.value?.spec?.f
       </template>
 
       <template #action>
-        <!-- <dao-button
+        <dao-button
           type="tertiary"
-          @click="onEdit"
+          @click="showDialog()"
         >
-          {{ t('common.edit') }}
-        </dao-button> -->
+          {{ t('common.stop') }}
+        </dao-button>
       </template>
     </dao-header>
 
     <dao-card
+      class="finetuneJob"
       type="simple"
       :title="t('views.Dataset.basicInformation')"
     >
@@ -136,25 +193,52 @@ const finetuneExperimentsData = computed(() => finetuneExperiment.value?.spec?.f
         </dao-key-value-layout>
       </dao-card-item>
     </dao-card>
+    <div class="task-title">
+      {{ t('views.FinetuneExperiment.taskList') }}
+    </div>
+    <dao-toolbar
+      v-model:search="search"
+      :search-placeholder="t('views.FinetuneExperiment.pleaseEnter')"
+      :hide-refresh="true"
+      :fuzzy="{ key: 'fuzzy', single: true }"
+      class="search-style"
+      @refresh="fetchDatasets"
+      @search="onSearch"
+    />
+
     <FinetuneExperimentDetailItem
-      v-for="experiment in finetuneExperimentsData"
+      v-for="experiment in showData"
       :key="experiment.spec?.finetune?.finetuneSpec?.hyperparameter?.hyperparameterRef"
       :data="experiment"
     />
-    <!-- <dao-card
-      type="simple"
-      :title="t('views.Dataset.datasetInfoConfig')"
-      class="dataset-detail__subset-info"
-    >
-      <dao-card-item>
-        <dao-table
-          hide-toolbar
-          no-shadow
-          :columns="columns"
-          :data="subsets"
-          :page-layout="[]"
-        />
-      </dao-card-item>
-    </dao-card> -->
+    <dao-pagination
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      class="mt-[20px]"
+      :total="showData?.length"
+    />
   </div>
+  <dao-dialog
+    :model-value="isShow"
+    header="Basic Dialog"
+    @cancel="hideDialog"
+    @confirm="confirmShop"
+  >
+    <div class="body">
+      <div class="content">
+        {{ $t('views.FinetuneExperiment.stopConfirm', { finetuneToShop }) }}
+      </div>
+    </div>
+  </dao-dialog>
 </template>
+<style lang="scss">
+  .task-title {
+    padding: 25px 0;
+    font-weight: bold;
+    color: #33363B;
+  }
+
+  .search-style{
+    border-radius: 10px;
+  }
+</style>
diff --git a/src/views/finetune-experiment/components/FinetuneExperimentDetailItem.vue b/src/views/finetune-experiment/components/FinetuneExperimentDetailItem.vue
index a63523f..930e90a 100644
--- a/src/views/finetune-experiment/components/FinetuneExperimentDetailItem.vue
+++ b/src/views/finetune-experiment/components/FinetuneExperimentDetailItem.vue
@@ -2,6 +2,7 @@
 <script lang="ts" setup>
 import { PropType, computed } from 'vue';
 import { FinetuneJob } from '@/api/finetune-job';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
   data: {
@@ -9,6 +10,7 @@ const props = defineProps({
     default: () => ([]),
   },
 });
+const { t } = useI18n();
 
 const infos = computed(() => {
   const { data: { spec } } = props;
@@ -18,25 +20,17 @@ const infos = computed(() => {
 
   const items = [
     {
-      label: '基础大模型',
+      label: t('views.FinetuneExperiment.BasicLargeModel'),
       value: llms,
       slotId: 'llm',
     },
-    // {
-    //   label: '评估方式',
-    //   value: spec?.scoringConfig.name,
-    // },
     {
-      label: '数据集',
+      label: t('views.FinetuneExperiment.dataSet'),
       value: datasets,
       slotId: 'dataset',
     },
-    // {
-    //   label: '创建时间',
-    //   value: useDateFormat(creationTimestamp),
-    // },
     {
-      label: '超参组',
+      label: t('views.FinetuneExperiment.parameterGroup'),
       value: hyperparameters,
       slotId: 'hyperparameter',
     },
@@ -44,7 +38,20 @@ const infos = computed(() => {
 
   return items;
 });
+const infosTwo = computed(() => {
+  const { data: { spec } } = props;
+
+  const items = [
+    {
+      label: t('views.FinetuneExperiment.results'),
+      value: spec?.finetune.finetuneSpec.hyperparameter?.hyperparameterRef,
+      slotId: 'hyperparameterRef',
+
+    },
+  ];
 
+  return items;
+});
 </script>
 
 <template>
@@ -55,48 +62,56 @@ const infos = computed(() => {
     use-font
   >
     <template #title>
-      <router-link
-        class="finetune-experiment-item__header__text active"
-        :to="{
-          name: 'FinetuneExperimentDetail',
-          params: { name: props.data.metadata?.name },
-        }"
-      >
-        {{ props.data.metadata?.name }}
-      </router-link>
-
+      cfh
       <dao-state-icon :type="'success'">
-        运行中
-      </dao-state-icon>
-
-      <dao-state-icon :type="'error'">
-        运行中
+        {{ t('common.run') }}
       </dao-state-icon>
     </template>
 
     <dao-card-item class="finetune-experiment-item__base-info">
-      <dao-key-value-layout
-        :column="2"
-        :data="infos"
-      >
-        <template #kv-llm="{ row }">
-          <dao-key-value-layout-item :label="row.label">
-            <dao-hover-card :data="row.value?.split(',')" />
-          </dao-key-value-layout-item>
-        </template>
-
-        <template #kv-dataset="{ row }">
-          <dao-key-value-layout-item :label="row.label">
-            <dao-hover-card :data="row.value?.split(',')" />
-          </dao-key-value-layout-item>
-        </template>
-
-        <template #kv-hyperparameter="{ row }">
-          <dao-key-value-layout-item :label="row.label">
-            <dao-hover-card :data="row.value?.split(',')" />
-          </dao-key-value-layout-item>
-        </template>
-      </dao-key-value-layout>
+      <div class="flex">
+        <div class="flex-1 w-0">
+          <dao-key-value-layout
+            :column="1"
+            :data="infos"
+            direction="horizontal"
+          >
+            <template #kv-llm="{ row }">
+              <dao-key-value-layout-item :label="row.label">
+                <dao-hover-card :data="row.value?.split(',')" />
+              </dao-key-value-layout-item>
+            </template>
+
+            <template #kv-dataset="{ row }">
+              <dao-key-value-layout-item :label="row.label">
+                <dao-hover-card :data="row.value?.split(',')" />
+              </dao-key-value-layout-item>
+            </template>
+
+            <template #kv-hyperparameter="{ row }">
+              <dao-key-value-layout-item :label="row.label">
+                <dao-hover-card :data="row.value?.split(',')" />
+              </dao-key-value-layout-item>
+            </template>
+          </dao-key-value-layout>
+        </div>
+        <div class="flex-1 ml-[20px]">
+          <dao-key-value-layout
+            :column="1"
+            :data="infosTwo"
+            direction="horizontal"
+          >
+            <template #kv-hyperparameterRef="{ row }">
+              <dao-key-value-layout-item :label="row.label">
+                <dao-hover-card :data="row.value?.split(',')" />
+              </dao-key-value-layout-item>
+            </template>
+          </dao-key-value-layout>
+        </div>
+      </div>
+    </dao-card-item>
+    <dao-card-item class="flex">
+      123
     </dao-card-item>
   </dao-card>
 </template>