diff --git a/frontend/src/assets/style/arco-reset.less b/frontend/src/assets/style/arco-reset.less
new file mode 100644
index 0000000000..9add0f4c02
--- /dev/null
+++ b/frontend/src/assets/style/arco-reset.less
@@ -0,0 +1,19 @@
+/** 表格样式  **/
+.arco-table-cell {
+  .circle {
+    display: inline-block;
+    margin-right: 4px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: rgb(var(--blue-6));
+    &.pass {
+      background-color: rgb(var(--green-6));
+    }
+  }
+}
+
+/** Tabs 组件样式 **/
+.arco-tabs-nav-add-btn {
+  font-size: var(--font-size-base);
+}
diff --git a/frontend/src/assets/style/global.less b/frontend/src/assets/style/global.less
index d99b6322fd..9320ecb7cd 100644
--- a/frontend/src/assets/style/global.less
+++ b/frontend/src/assets/style/global.less
@@ -1,3 +1,5 @@
+@import url('./arco-reset.less');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -74,16 +76,3 @@ body {
 .split-line {
   border-color: rgb(var(--gray-2));
 }
-.arco-table-cell {
-  .circle {
-    display: inline-block;
-    margin-right: 4px;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: rgb(var(--blue-6));
-    &.pass {
-      background-color: rgb(var(--green-6));
-    }
-  }
-}
diff --git a/frontend/src/views/minder/index.vue b/frontend/src/views/minder/index.vue
index 0d0b330aee..ad2273cf63 100644
--- a/frontend/src/views/minder/index.vue
+++ b/frontend/src/views/minder/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <minder-editor
+  <!-- <minder-editor
     class="minder-container"
     :import-json="importJson"
     :progress-enable="false"
@@ -8,76 +8,135 @@
     :default-mold="defaultMode"
     :del-confirm="delConfirm"
     @save="save"
-  />
+  /> -->
   <!-- <JsonPicker /> -->
+  <div class="bg-white">
+    <a-tabs>
+      <a-tab-pane key="1">
+        <template #title> <icon-calendar /> Tab 1 </template>
+        Content of Tab Panel 1
+      </a-tab-pane>
+      <a-tab-pane key="2">
+        <template #title> <icon-clock-circle /> Tab 2 </template>
+        Content of Tab Panel 2
+      </a-tab-pane>
+      <a-tab-pane key="3">
+        <template #title> <icon-user /> Tab 3 </template>
+        Content of Tab Panel 3
+      </a-tab-pane>
+    </a-tabs>
+    <a-tabs class="w-[500px]" :editable="true" show-add-button auto-switch @add="handleAdd" @delete="handleDelete">
+      <a-tab-pane v-for="(item, index) of data" :key="item.key" :title="item.title" :closable="index !== 2">
+        {{ item?.content }}
+      </a-tab-pane>
+    </a-tabs>
+  </div>
 </template>
 
-<script setup lang="ts">
-  import MinderEditor from '@/components/minder-editor/minderEditor.vue';
+<script setup lang="ts" name="minderIndex">
+  import { ref } from 'vue';
+
+  let count = 5;
+
+  const data = ref([
+    {
+      key: '1',
+      title: 'Tab 1',
+      content: 'Content of Tab Panel 1',
+    },
+    {
+      key: '2',
+      title: 'Tab 2',
+      content: 'Content of Tab Panel 2',
+    },
+    {
+      key: '3',
+      title: 'Tab 3',
+      content: 'Content of Tab Panel 3',
+    },
+    {
+      key: '4',
+      title: 'Tab 4',
+      content: 'Content of Tab Panel 4',
+    },
+  ]);
+
+  const handleAdd = () => {
+    const number = count++;
+    data.value = data.value.concat({
+      key: `${number}`,
+      title: `New Tab ${number}`,
+      content: `Content of New Tab Panel ${number}`,
+    });
+  };
+  const handleDelete = (key: string | number) => {
+    data.value = data.value.filter((item) => item.key !== key);
+  };
+  // import MinderEditor from '@/components/minder-editor/minderEditor.vue';
   // import JsonPicker from '@/components/jsonpath-picker/index.vue';
 
-  const importJson = {
-    root: {
-      data: {
-        // 文本内容
-        text: 'vue3-minder-editor',
-        // 标签
-        resource: ['模块1'],
-        // 是否禁止修改
-        // disable: true,
-        // 默认展开或折叠，默认是展开的，collapse 可设为折叠
-        // expandState: 'collapse',
-        // 在 disable 为 true 的情况下，允许添加标签
-        // tagEnable: true,
-        // 在 disable 为 true 的情况下，允许删除节点
-        // allowDelete: true,
-        // 在 disable 为 true 的情况下，允许添加标签，优先级比 tagEnable 高
-        // allowDisabledTag: true,
-      },
-      // 子节点
-      children: [
-        {
-          data: {
-            text: 'child1',
-            // disable: true,
-            expandState: 'collapse',
-            resource: ['模块2'],
-          },
-          children: [
-            {
-              data: {
-                text: '地图axxaaaa',
-                disable: true,
-                allowDelete: true,
-                // tagEnable: true,
-                allowDisabledTag: true,
-                resource: ['模块12'],
-                priority: 3,
-                loaded: true,
-              },
-            },
-          ],
-        },
-        {
-          data: {
-            text: 'child2',
-          },
-        },
-      ],
-    },
-    template: 'default',
-  };
-  const height = 500;
-  const defaultMode = 3;
-  const tags = ['模块1', '用例', '前置条件', '测试步骤', '预期结果', '备注'];
+  // const importJson = {
+  //   root: {
+  //     data: {
+  //       // 文本内容
+  //       text: 'vue3-minder-editor',
+  //       // 标签
+  //       resource: ['模块1'],
+  //       // 是否禁止修改
+  //       // disable: true,
+  //       // 默认展开或折叠，默认是展开的，collapse 可设为折叠
+  //       // expandState: 'collapse',
+  //       // 在 disable 为 true 的情况下，允许添加标签
+  //       // tagEnable: true,
+  //       // 在 disable 为 true 的情况下，允许删除节点
+  //       // allowDelete: true,
+  //       // 在 disable 为 true 的情况下，允许添加标签，优先级比 tagEnable 高
+  //       // allowDisabledTag: true,
+  //     },
+  //     // 子节点
+  //     children: [
+  //       {
+  //         data: {
+  //           text: 'child1',
+  //           // disable: true,
+  //           expandState: 'collapse',
+  //           resource: ['模块2'],
+  //         },
+  //         children: [
+  //           {
+  //             data: {
+  //               text: '地图axxaaaa',
+  //               disable: true,
+  //               allowDelete: true,
+  //               // tagEnable: true,
+  //               allowDisabledTag: true,
+  //               resource: ['模块12'],
+  //               priority: 3,
+  //               loaded: true,
+  //             },
+  //           },
+  //         ],
+  //       },
+  //       {
+  //         data: {
+  //           text: 'child2',
+  //         },
+  //       },
+  //     ],
+  //   },
+  //   template: 'default',
+  // };
+  // const height = 500;
+  // const defaultMode = 3;
+  // const tags = ['模块1', '用例', '前置条件', '测试步骤', '预期结果', '备注'];
 
-  function save(data: any) {
-    // eslint-disable-next-line no-console
-    console.log(data);
-  }
+  // function save(data: any) {
+  //   // eslint-disable-next-line no-console
+  //   console.log(data);
+  // }
 
-  function delConfirm() {
-    // eslint-disable-next-line no-console
-    console.log('-=-=-=-=-=-=-==');
-  }
+  // function delConfirm() {
+  //   // eslint-disable-next-line no-console
+  //   console.log('-=-=-=-=-=-=-==');
+  // }
 </script>