diff --git a/atune/web/index.html b/atune/web/index.html
index 338418c7bb49c56f66ed4a44eb97e1fe0edc67c0..9437bd9e7299d4de06c0003f5c42e6aee1fb52c6 100644
--- a/atune/web/index.html
+++ b/atune/web/index.html
@@ -1,14 +1,18 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="icon" href="/public/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>智能调优</title>
-  </head>
-  <body>
-    <div id="app" style="height: 100%; width: 100%;"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <link rel="icon" href="/public/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>智能调优</title>
+</head>
+
+<body>
+  <div id="app" style="height: 100%; width: 100%;">
+  </div>
+  <script type="module" src="./src/main.ts"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/atune/web/src/App.vue b/atune/web/src/App.vue
index 5bc96cbbd23ea48aea63cd90664352b5a1ee9ee0..63ccd49e67b52153e2b316feb9654082760a4117 100644
--- a/atune/web/src/App.vue
+++ b/atune/web/src/App.vue
@@ -9,7 +9,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import locale from 'element-plus/es/locale/lang/zh-cn';
-const zhCn = ref(locale); 
+const zhCn = ref(locale);
 </script>
 
 <style lang="less" scoped>
diff --git a/atune/web/src/api/atune.ts b/atune/web/src/api/atune.ts
index 4427c8a74b8f20bb55c2eb1aa8be6fb1f518410a..d1f1f1964fdb910aa9e7ff833ef6f54c3e9a39e9 100644
--- a/atune/web/src/api/atune.ts
+++ b/atune/web/src/api/atune.ts
@@ -1,5 +1,13 @@
 import request from './request';
 
+// 获取所有的任务列表
+export function getTaskLists() {
+  return request({
+    url: '/plugin/atune/tasks',
+    method: 'get',
+  });
+}
+
 // 获取所有的调优列表
 export function getAtuneAllName() {
   return request({
diff --git a/atune/web/src/components/atuneList.vue b/atune/web/src/components/atuneList.vue
index 2d84f930395b72866dad8cdeb9c85d70baceb22c..be5dd06d277e89d7cbe25ef792367bc845cc4b4c 100644
--- a/atune/web/src/components/atuneList.vue
+++ b/atune/web/src/components/atuneList.vue
@@ -1,41 +1,40 @@
 <template>
-  <div class="table-container">
-    <div class="table-wrapper">
-      <el-table :data="tableData" style="width: 100%;height:90%" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" />
-        <el-table-column type="expand" width="30">
-          <template #default="props">
-            <div class="expand-cell">
-              <p class="note-title">注意事项:</p>
-              <div class="note-content">{{ props.row.note }}</div>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="tuneName" label="名称" width="150" />
-        <el-table-column prop="prepare" label="环境准备" width="370" />
-        <el-table-column prop="tune" label="调优" width="400" />
-        <el-table-column prop="restore" label="环境恢复" width="370" />
-        <el-table-column label="操作" width="80">
-          <template #default="{ row }">
-            <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <div class="pagination">
-      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50]"
-        :total="totalItems" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"></el-pagination>
-    </div>
+  <div class="">
+    <el-table :data="tableData" style="width: 100%;height:90%" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="id" label="编号" />
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="atune" label="调优模板" />
+      <el-table-column prop="state" label="状态">
+        <template #default="props">
+          <!-- 成功1 失败0 执行中2 -->
+          <div v-if="props.state == 1">成功</div>
+          <div v-else-if="props.state == 0">失败</div>
+          <div v-else>执行中</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建时间" />
+      <el-table-column prop="updateTime" label="更新时间" />
+      <el-table-column label="操作" width="80">
+        <template #default="{ row }">
+          <el-button type="primary" size="small" @click="handleEdit(row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+  <div class="pagination">
+    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50]"
+      :total="totalItems" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"></el-pagination>
   </div>
 </template>
 
 <script lang='ts' setup>
 import { onMounted, ref, watch } from 'vue';
-import { getTuneLists, searchTune } from '@/api/atune'
-import { Atune } from '@/types/atune'
+import { getTaskLists, searchTune } from '@/api/atune'
+import { Task } from '@/types/atune'
 
-const tableData = ref([] as Atune[]);
+const tableData = ref([] as Task[]);
 const currentPage = ref(1);
 const pageSize = ref(10);
 const totalItems = ref(0);
@@ -58,17 +57,21 @@ let props = defineProps({
 
 // 获取tune模板列表
 const getTuneListsData = async () => {
-  try {
-    const response = await getTuneLists({
-      page: currentPage.value,
-      size: pageSize.value,
-    });
-
-    tableData.value = response.data.data;
-    totalItems.value = response.data.total;
-  } catch (error) {
-    console.error('Error fetching data:', error);
-  }
+  // 虚拟数据
+  tableData.value = [{
+    id: 1,
+    name: '任务XXX',
+    atune: 'nginx',
+    state: 0,
+    createTime: '2023-12-09',
+    updateTime: '2023-12-19',
+  }]
+  getTaskLists().then(res => {
+    if (res.data.code === 200) {
+      tableData.value = res.data.data;
+      totalItems.value = res.data.total;
+    }
+  })
 };
 
 // 高级搜索tune模板列表
@@ -99,12 +102,12 @@ const handleCurrentChange = (newPage: number) => {
 };
 
 // 编辑
-const handleEdit = (row: Atune) => {
+const handleEdit = (row: Task) => {
   emit('selectionEdit', row);
 }
 
 // 选中多选框
-const handleSelectionChange = (rows: Atune[]) => {
+const handleSelectionChange = (rows: Task[]) => {
   emit('selectionChange', rows);
 };
 
@@ -123,29 +126,6 @@ watch(() => [props.refreshData, props.searchTune], ([refreshData, searchTune]):
 </script>
 
 <style lang = 'less' scoped>
-.table-container {
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
-
-.table-wrapper {
-  overflow: auto;
-  height: 82vh; 
-  margin-left: 10px;
-}
-
-.pagination {
-  position: absolute;
-  bottom: 0;
-  padding-bottom: 10px;
-  padding-left: 20px;
-  z-index: 1;
-}
-
 .expand-cell {
   display: flex;
   flex-direction: column;
@@ -154,13 +134,22 @@ watch(() => [props.refreshData, props.searchTune], ([refreshData, searchTune]):
 }
 
 .note-title {
-  word-wrap: break-word; /* 换行 */
+  word-wrap: break-word;
+  /* 换行 */
 }
 
 .note-content {
-  word-wrap: break-word; 
+  word-wrap: break-word;
   line-height: 1.8;
   padding-left: 2em;
   white-space: pre-line;
 }
+
+.pagination {
+  position: absolute;
+  bottom: 0;
+  padding-bottom: 10px;
+  padding-left: 20px;
+  z-index: 1;
+}
 </style>
diff --git a/atune/web/src/components/taskDetail.vue b/atune/web/src/components/taskDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/atune/web/src/router/index.ts b/atune/web/src/router/index.ts
index 06d6afc25e22f2e2f725779c1b2066d8922c9ecf..20d23202b40a270f0a962636d6b4eaa21ba45852 100644
--- a/atune/web/src/router/index.ts
+++ b/atune/web/src/router/index.ts
@@ -5,19 +5,29 @@ import Result from '@/views/ResultInfo.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
-    path: '/plugin/atune',
+    path: '/',
+    redirect: '/atune'
+  },
+  {
+    path: '/atune',
     component: Home,
-    meta: { title: '首页' },
+    meta: { title: '任务列表' },
+    children: [
+      {
+        path: 'detail',
+        component: () => import("../components/atuneTemplete.vue")
+      }
+    ]
   },
   {
-    path: '/plugin/atune/result',
+    path: '/result',
     component: Result,
     meta: { title: '结果展示' },
   },
 ];
 
 const router = createRouter({
-  history: createWebHistory('/'),
+  history: createWebHistory(),
   routes,
 });
 
diff --git a/atune/web/src/types/atune.d.ts b/atune/web/src/types/atune.d.ts
index 32dbd226e6aa503d4ea96a09faf516373acceb61..340465d80dd85451e39fed66f4db314cc30822c9 100644
--- a/atune/web/src/types/atune.d.ts
+++ b/atune/web/src/types/atune.d.ts
@@ -1,3 +1,12 @@
+export interface Task {
+  id: number;
+  name: string;
+  atune: string;
+  state: number;
+  createTime: string;
+  updateTime: string;
+}
+
 export interface Atune {
   id: number;
   tuneName: string;
diff --git a/atune/web/src/views/Home.vue b/atune/web/src/views/Home.vue
index 5057d95828b6be8d6a2bdf203f92d0e476975f21..dd4034fde3853eacdaa84c723452f7192bfeefad 100644
--- a/atune/web/src/views/Home.vue
+++ b/atune/web/src/views/Home.vue
@@ -1,28 +1,33 @@
 <template>
   <div class="top">
     <span class="top-title">A-Tune调优管理</span>
+    <span class="top-description">此处应有一段介绍</span>
   </div>
   <div class="container">
-    <div class="tree-container">
-      <div class="title">可调优对象</div>
-      <el-tree :data="atuneTree" :props="defaultProps" :highlight-current="true" @node-click="handleNodeClick"></el-tree>
-    </div>
-    <div class="table-container">
+    <div class="table-container" v-show="!showDetail">
       <div class="title">
-        <div class="title-content">
-          <p>调优模板</p>
-        </div>
-        <el-input v-model="searchTuneName" placeholder="请输入调优名称进行搜索..." :prefix-icon="Search" clearable
+        <div class="title-content">执行任务列表</div>
+        <el-input v-model="searchTuneName" placeholder="请输入任务名称进行搜索..." :prefix-icon="Search" clearable
           style="width: 280px;margin-right: 10px;" @keydown.enter.native="handleSearch"></el-input>
         <el-button :icon="Search" @click="handleSearch">搜索</el-button>
+        <el-button class="delete-button" @click="handleCreat">新增</el-button>
         <el-button class="delete-button" @click="handleDelete">删除</el-button>
       </div>
-      <div class="table">
+      <div>
         <atuneList @selectionChange="handleSelectionChange" @selectionEdit="handleSelectEdit" :refreshData="refreshData"
           :searchTuneName="searchTuneName" :searchTune="searchTune">
         </atuneList>
       </div>
     </div>
+    <div class="table-container" v-show="showDetail">
+      <div class="title">
+        <div class="title-content">
+          <span class="title-content-link" @click="returnHome">执行任务列表&nbsp;</span>
+          <span>> 任务详情</span>
+        </div>
+      </div>
+      <router-view />
+    </div>
   </div>
   <el-dialog title="调优模板信息" width="70%" v-model="showDialog">
     <atuneTemplete :selectedNodeData="selectedNodeData" :selectedEditRow="selectedEditRow" @closeDialog="closeDialog"
@@ -32,31 +37,23 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import { getAtuneAllName, deleteTune } from '@/api/atune';
-import { ElTree, ElDialog, ElMessage, ElMessageBox } from 'element-plus';
+import { ref } from 'vue';
+import { deleteTune } from '@/api/atune';
+import { ElDialog, ElMessage, ElMessageBox } from 'element-plus';
 import { Search } from '@element-plus/icons-vue'
 import atuneList from '@/components/atuneList.vue'
 import atuneTemplete from '@/components/atuneTemplete.vue'
-import { Atune } from '@/types/atune'
+import { Task } from '@/types/atune'
+import router from '../router/index.ts';
 
-const atuneTree = ref([]);
 const selectedNodeData = ref("")
 const searchTuneName = ref("")
 const searchTune = ref(false)
 const showDialog = ref(false)
-const selectedRows = ref([] as Atune[])
+const selectedRows = ref([] as Task[])
 const selectedEditRow = ref()
 const refreshData = ref(false)
-const defaultProps = ref({
-  label: 'label',
-});
-
-// 选中调优对象
-const handleNodeClick = (node: any) => {
-  selectedNodeData.value = node.label;
-  showDialog.value = true;
-}
+const showDetail = ref(false)
 
 // 关闭dialog弹框
 const closeDialog = () => {
@@ -68,10 +65,30 @@ const handleSelectionChange = (selected_Rows: any) => {
   selectedRows.value = selected_Rows;
 }
 
+// 返回任务列表
+const returnHome = () => {
+  router.push({
+    path: '/atune'
+  })
+  showDetail.value = false;
+}
+
+// 新增
+const handleCreat = () => {
+
+}
+
 // 编辑
 const handleSelectEdit = (editRow: any) => {
-  selectedEditRow.value = editRow
-  showDialog.value = true;
+  /* selectedEditRow.value = editRow
+  showDialog.value = true; */
+  router.push({
+    path: '/atune/detail',
+    params: {
+      row: editRow
+    }
+  })
+  showDetail.value = true;
 }
 
 // 刷新
@@ -109,13 +126,14 @@ const handleDelete = () => {
     })
 }
 
+/* // 获取所有的可调优对象
 onMounted(async () => {
   const res = await getAtuneAllName();
   atuneTree.value = res.data.data.map((item: string, index: number) => ({
     label: item,
     key: index.toString(),
   }));
-});
+}); */
 </script>
 
 <style lang="less" scoped>
@@ -123,45 +141,38 @@ onMounted(async () => {
   width: 100%;
   height: 64px;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  justify-content: center;
 
   &-title {
     padding-left: 40px;
-    font-size: 20px;
-    color: #222;
-    font-weight: 500;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
     display: inline-block;
   }
+
+  &-description {
+    padding-left: 40px;
+    font-size: 16px;
+    color: #444;
+    font-weight: 500;
+  }
 }
 
 .container {
   display: flex;
+  justify-content: center;
   min-width: 100%;
-  height: calc(100% - 64px);
-
-
-  .tree-container,
-  .table-container {
-    border-radius: 10px;
-    overflow: hidden;
-    margin: 10px;
-    background-color: #fff;
-  }
-
-  .tree-container {
-    height: 95%;
-    width: 20%;
-    border: 1px solid #ddd;
-    margin-left: 30px;
-  }
+  height: calc(100% - 64px - 10px);
 
   .table-container {
     height: 95%;
-    width: 99%;
+    width: 98%;
     border: 2px solid #ddd;
     display: flex;
     flex-direction: column;
+    border-radius: 12px;
   }
 
   .table {
@@ -183,6 +194,14 @@ onMounted(async () => {
 
     .title-content {
       flex: 1;
+
+      &-link {
+        cursor: pointer;
+
+        &:hover {
+          color: #409eff;
+        }
+      }
     }
 
     .delete-button {
diff --git a/atune/web/src/vite-env.d.ts b/atune/web/src/vite-env.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..25d28cd1f93302523faab296a5b6ed0a1c4c1239
--- /dev/null
+++ b/atune/web/src/vite-env.d.ts
@@ -0,0 +1 @@
+declare module "*.vue";
\ No newline at end of file
diff --git a/atune/web/vite.config.ts b/atune/web/vite.config.ts
index 75a32402d41d9240a130a43aba7558e5078768e7..eb222fa1a1f445cc89927579c11468eca823cfea 100644
--- a/atune/web/vite.config.ts
+++ b/atune/web/vite.config.ts
@@ -4,7 +4,6 @@ import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: '/plugin/atune/',
   plugins: [vue()],
   resolve: {
     alias: {
@@ -16,12 +15,14 @@ export default defineConfig({
     https: false,
     cors: true,
     proxy: {
-      '/': {
-        target: 'http://localhost:8099',
+      '/plugin/atune': {
+        target: 'http://10.41.107.32:8099',
         changeOrigin: true,
+        rewrite: (p) => p.replace('/^\/plugin\/atune/', '')
       },
     },
   },
+  // base: '/plugin/atune/',
   build: {
     outDir: 'dist',
     assetsDir: 'static/', //指定静态资源存放路径
