diff --git a/backend/src/main/java/io/metersphere/excel/listener/EasyExcelListener.java b/backend/src/main/java/io/metersphere/excel/listener/EasyExcelListener.java
index 77ce4d66f4..85f6dc31f6 100644
--- a/backend/src/main/java/io/metersphere/excel/listener/EasyExcelListener.java
+++ b/backend/src/main/java/io/metersphere/excel/listener/EasyExcelListener.java
@@ -29,12 +29,7 @@ public abstract class EasyExcelListener<T> extends AnalysisEventListener<T> {
      */
     protected static final int BATCH_COUNT = 2000;
 
-    protected Class<T> clazz;
-
-    public EasyExcelListener() {
-        Type type = getClass().getGenericSuperclass();
-        this.clazz = (Class<T>) ((ParameterizedType) type).getActualTypeArguments()[0];
-    }
+    protected Class clazz;
 
     /**
      * 每条数据解析都会调用
diff --git a/backend/src/main/java/io/metersphere/excel/listener/TestCaseDataListener.java b/backend/src/main/java/io/metersphere/excel/listener/TestCaseDataListener.java
index d4d590586d..1dff285527 100644
--- a/backend/src/main/java/io/metersphere/excel/listener/TestCaseDataListener.java
+++ b/backend/src/main/java/io/metersphere/excel/listener/TestCaseDataListener.java
@@ -5,6 +5,7 @@ import com.alibaba.fastjson.JSONObject;
 import io.metersphere.base.domain.TestCaseWithBLOBs;
 import io.metersphere.commons.constants.TestCaseConstants;
 import io.metersphere.commons.utils.BeanUtils;
+import io.metersphere.commons.utils.CommonBeanFactory;
 import io.metersphere.excel.domain.TestCaseExcelData;
 import io.metersphere.i18n.Translator;
 import io.metersphere.track.service.TestCaseService;
@@ -25,8 +26,9 @@ public class TestCaseDataListener extends EasyExcelListener<TestCaseExcelData> {
 
     Set<String> userIds;
 
-    public TestCaseDataListener(TestCaseService testCaseService, String projectId, Set<String> testCaseNames, Set<String> userIds) {
-        this.testCaseService = testCaseService;
+    public TestCaseDataListener(Class clazz, String projectId, Set<String> testCaseNames, Set<String> userIds) {
+        this.clazz = clazz;
+        this.testCaseService = (TestCaseService) CommonBeanFactory.getBean("testCaseService");
         this.projectId = projectId;
         this.testCaseNames = testCaseNames;
         this.userIds = userIds;
diff --git a/backend/src/main/java/io/metersphere/track/service/TestCaseService.java b/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
index dc827b3246..f59bc8b5ca 100644
--- a/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
@@ -319,8 +319,9 @@ public class TestCaseService {
             Set<String> userIds = userRoleMapper.selectByExample(userRoleExample).stream().map(UserRole::getUserId).collect(Collectors.toSet());
 
             try {
-                EasyExcelListener easyExcelListener = new TestCaseDataListener(this, projectId, testCaseNames, userIds);
-                EasyExcelFactory.read(multipartFile.getInputStream(), new TestCaseExcelDataFactory().getExcelDataByLocal(), easyExcelListener).sheet().doRead();
+                Class clazz = new TestCaseExcelDataFactory().getExcelDataByLocal();
+                EasyExcelListener easyExcelListener = new TestCaseDataListener(clazz, projectId, testCaseNames, userIds);
+                EasyExcelFactory.read(multipartFile.getInputStream(), clazz, easyExcelListener).sheet().doRead();
                 errList = easyExcelListener.getErrList();
             } catch (Exception e) {
                 LogUtil.error(e.getMessage(), e);
diff --git a/frontend/src/business/components/track/case/components/TestCaseDetail.vue b/frontend/src/business/components/track/case/components/TestCaseDetail.vue
new file mode 100644
index 0000000000..94aadc184f
--- /dev/null
+++ b/frontend/src/business/components/track/case/components/TestCaseDetail.vue
@@ -0,0 +1,201 @@
+<template>
+  <el-form :model="form" ref="caseFrom" v-loading="result.loading">
+
+    <el-row>
+      <el-col :span="8" :offset="1">
+        <el-form-item
+          :placeholder="$t('test_track.case.input_name')"
+          :label="$t('test_track.case.name')"
+          :label-width="formLabelWidth"
+          prop="name">
+          <el-input class="case-name" :disabled="readOnly" v-model="testCase.name"></el-input>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="11" :offset="2">
+        <el-form-item :label="$t('test_track.case.module')" :label-width="formLabelWidth" prop="module">
+          <el-select
+            v-model="testCase.module"
+            :disabled="readOnly"
+            :placeholder="$t('test_track.case.input_module')"
+            filterable>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <el-col :span="10" :offset="1">
+        <el-form-item :label="$t('test_track.case.maintainer')" :label-width="formLabelWidth" prop="maintainer">
+          <el-select :disabled="readOnly" v-model="testCase.maintainer"
+                     :placeholder="$t('test_track.case.input_maintainer')" filterable>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item :label="$t('test_track.case.priority')" :label-width="formLabelWidth" prop="priority">
+          <el-select :disabled="readOnly" v-model="testCase.priority" clearable
+                     :placeholder="$t('test_track.case.input_priority')">
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <el-col :span="10" :offset="1">
+        <el-form-item :label="$t('test_track.case.type')" :label-width="formLabelWidth" prop="type">
+          <el-select :disabled="readOnly" v-model="testCase.type"
+                     :placeholder="$t('test_track.case.input_type')">
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item :label="$t('test_track.case.method')" :label-width="formLabelWidth" prop="method">
+          <el-select :disabled="readOnly" v-model="testCase.method" :placeholder="$t('test_track.case.input_method')">
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row v-if="testCase.method && testCase.method == 'auto'">
+      <el-col :span="9" :offset="1">
+        <el-form-item :label="$t('test_track.case.relate_test')" :label-width="formLabelWidth" prop="testId">
+          <el-select filterable :disabled="readOnly" v-model="testCase.testId"
+                     :placeholder="$t('test_track.case.input_type')">
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="9" :offset="1" v-if="testCase.testId=='other'">
+        <el-form-item :label="$t('test_track.case.test_name')" :label-width="formLabelWidth" prop="testId">
+          <el-input v-model="testCase.otherTestName" :placeholder="$t('test_track.case.input_test_case')"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 15px;">
+      <el-col :offset="2">{{ $t('test_track.case.prerequisite') }}:</el-col>
+    </el-row>
+    <el-row type="flex" justify="center" style="margin-top: 10px;">
+      <el-col :span="20">
+        <el-form-item prop="prerequisite">
+          <el-input :disabled="readOnly" v-model="testCase.prerequisite"
+                    type="textarea"
+                    :autosize="{ minRows: 2, maxRows: 4}"
+                    :rows="2"
+                    :placeholder="$t('test_track.case.input_prerequisite')"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row v-if="testCase.method && testCase.method != 'auto'" style="margin-bottom: 10px">
+      <el-col :offset="2">{{ $t('test_track.case.steps') }}:</el-col>
+    </el-row>
+
+    <el-row v-if="testCase.method && testCase.method != 'auto'" type="flex" justify="center">
+      <el-col :span="20">
+        <el-table
+          v-if="isStepTableAlive"
+          :data="JSON.parse(testCase.steps)"
+          class="tb-edit"
+          border
+          size="mini"
+          :default-sort="{prop: 'num', order: 'ascending'}"
+          highlight-current-row>
+          <el-table-column :label="$t('test_track.case.number')" prop="num" min-width="15%"></el-table-column>
+          <el-table-column :label="$t('test_track.case.step_desc')" prop="desc" min-width="35%">
+            <template v-slot:default="scope">
+              <el-input
+                class="table-edit-input"
+                size="mini"
+                :disabled="readOnly"
+                type="textarea"
+                :autosize="{ minRows: 1, maxRows: 6}"
+                :rows="2"
+                v-model="scope.row.desc"
+                :placeholder="$t('commons.input_content')"
+                clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('test_track.case.expected_results')" prop="result" min-width="35%">
+            <template v-slot:default="scope">
+              <el-input
+                class="table-edit-input"
+                size="mini"
+                :disabled="readOnly"
+                type="textarea"
+                :autosize="{ minRows: 1, maxRows: 6}"
+                :rows="2"
+                v-model="scope.row.result"
+                :placeholder="$t('commons.input_content')"
+                clearable/>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+
+    <el-row style="margin-top: 15px;margin-bottom: 10px">
+      <el-col :offset="2">{{ $t('commons.remark') }}:</el-col>
+    </el-row>
+    <el-row type="flex" justify="center">
+      <el-col :span="20">
+        <el-form-item prop="remark">
+          <el-input v-model="testCase.remark"
+                    :autosize="{ minRows: 2, maxRows: 4}"
+                    type="textarea"
+                    :disabled="readOnly"
+                    :rows="2"
+                    :placeholder="$t('commons.input_content')"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+
+</template>
+
+<script>
+
+export default {
+  name: "TestCaseDetail",
+  data() {
+    return {
+      result: {},
+      dialogFormVisible: false,
+      readOnly: true,
+      form: {
+        name: '',
+        module: '',
+        maintainer: '',
+        priority: '',
+        type: '',
+        method: '',
+        prerequisite: '',
+        testId: '',
+        otherTestName: '',
+        steps: [{
+          num: 1,
+          desc: '',
+          result: ''
+        }],
+        remark: '',
+      },
+      workspaceId: '',
+      formLabelWidth: "120px",
+
+      isStepTableAlive: true,
+      methodOptions: [
+        {value: 'auto', label: this.$t('test_track.case.auto')},
+        {value: 'manual', label: this.$t('test_track.case.manual')}
+      ]
+    };
+  },
+  props: {
+    testCase: {
+      type: Object
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index 94b9b5c67e..8b9fb910ec 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -56,9 +56,18 @@
           show-overflow-tooltip
         >
           <template v-slot:default="scope">
-            <div @mouseover="showDetail(scope.row)">
+            <!--<div @mouseover="showDetail(scope.row)">
               <p>{{ scope.row.name }}</p>
-            </div>
+            </div>-->
+            <el-popover
+              placement="right-end"
+              :title="$t('test_track.case.view_case')"
+              width="60%"
+              trigger="hover"
+            >
+              <test-case-detail :test-case="scope.row"/>
+              <p slot="reference">{{ scope.row.name }}</p>
+            </el-popover>
           </template>
         </el-table-column>
         <el-table-column
@@ -164,7 +173,7 @@
   import {WORKSPACE_ID} from "../../../../../common/js/constants";
   import {LIST_CHANGE, TrackEvent} from "@/business/components/common/head/ListEvent";
   import StatusTableItem from "@/business/components/track/common/tableItems/planview/StatusTableItem";
-
+  import TestCaseDetail from "./TestCaseDetail";
   export default {
     name: "TestCaseList",
     components: {
@@ -182,7 +191,8 @@
       MsTableHeader,
       ShowMoreBtn,
       BatchEdit,
-      StatusTableItem
+      StatusTableItem,
+      TestCaseDetail
     },
     data() {
       return {