diff --git a/atune/web/src/components/atuneTemplete.vue b/atune/web/src/components/atuneTemplete.vue
index 5cb87d3bd8e74551dd6db9d954f23f1ffd1b4d6c..69301f8d1bfd214ad3f40aabad24632ab0ff9df1 100644
--- a/atune/web/src/components/atuneTemplete.vue
+++ b/atune/web/src/components/atuneTemplete.vue
@@ -1,8 +1,22 @@
 <template>
   <div>
     <el-form :model="form" class="custom-form">
-      <el-form-item label="调优对象">
-        <el-input v-model="form.tuneName"></el-input>
+      <el-form-item label="调优对象" v-show="isTune">
+        <el-select
+          v-model="form.tuneName"
+          placeholder="请选择调优模板"
+          @change="fetchAtuneInfo(form.tuneName)"
+        >
+          <el-option
+            v-for="item in allTune"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="自定义名">
+        <el-input v-model="form.custom_name"></el-input>
       </el-form-item>
       <el-form-item label="概述介绍">
         <el-input v-model="form.description"></el-input>
@@ -20,11 +34,16 @@
         <el-input v-model="form.restore"></el-input>
       </el-form-item>
       <el-form-item label="注意事项">
-        <el-input v-model="form.note" class="custom-input" type="textarea" :rows="6"></el-input>
+        <el-input
+          v-model="form.note"
+          class="custom-input"
+          type="textarea"
+          :rows="6"
+        ></el-input>
       </el-form-item>
     </el-form>
     <el-form class="centered-buttons">
-      <my-button v-show="isEdit" @click="onSubmit">保存</my-button>
+      <my-button v-show="isTune" @click="onSubmit">保存</my-button>
       <my-button @click="onCancel">取消</my-button>
     </el-form>
   </div>
@@ -33,11 +52,21 @@
 <script lang="ts" setup>
 import { ElMessage } from "element-plus";
 import { reactive, watchEffect, ref } from "vue";
-import { getAtuneInfo, saveTune, updateTune } from "@/api/atune";
+import {
+  getAtuneInfo,
+  saveTune,
+  updateTune,
+  getAtuneAllName,
+} from "@/api/atune";
 import { Atune, Task } from "@/types/atune";
 import MyButton from "@/components/myButton.vue";
 
 let props = defineProps({
+  isTune: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
   selectedNodeData: {
     type: String,
     default: "",
@@ -47,11 +76,11 @@ let props = defineProps({
     default: null,
   },
 });
-
-const isEdit = ref(false);
+const allTune = ref([""]);
 const form = reactive({
   id: 0,
   tuneName: "",
+  custom_name: "",
   description: "",
   workDir: "",
   prepare: "",
@@ -60,20 +89,31 @@ const form = reactive({
   note: "",
 });
 const emit = defineEmits(["closeDialog", "dataUpdated"]);
+// 获取所有的调优模板
+const getAllTune = () => {
+  getAtuneAllName().then((res) => {
+    if (res.data.code === 200) {
+      allTune.value = res.data.data;
+    }
+  });
+};
 
 // 编辑
 const handleEdit = () => {
   form.id = props.selectedEditRow.id;
   form.tuneName = props.selectedEditRow.tuneName;
+  form.custom_name = props.selectedEditRow.custom_name;
   form.workDir = props.selectedEditRow.workDir;
   form.prepare = props.selectedEditRow.prepare;
   form.tune = props.selectedEditRow.tune;
   form.restore = props.selectedEditRow.restore;
   form.note = props.selectedEditRow.note;
+  form.description = props.selectedEditRow.description;
 };
 
-const fetchAtuneInfo = () => {
-  getAtuneInfo({ name: props.selectedNodeData }).then((res) => {
+const fetchAtuneInfo = (tuneName?: string) => {
+  let paramName = tuneName ? tuneName : props.selectedNodeData;
+  getAtuneInfo({ name: paramName }).then((res) => {
     if (res.data && res.data.code === 200) {
       const data = res.data.data;
       // 判断数据结构类型
@@ -132,7 +172,11 @@ const onSubmit = () => {
 const onCancel = () => {
   emit("closeDialog");
 };
-
+watchEffect(() => {
+  if (props.isTune) {
+    getAllTune();
+  }
+});
 watchEffect(() => {
   if (props.selectedNodeData !== "") {
     fetchAtuneInfo();
@@ -159,4 +203,7 @@ watchEffect(() => {
     vertical-align: top;
   }
 }
+.centered-buttons {
+  text-align: center;
+}
 </style>
diff --git a/atune/web/src/components/flowChart.ts b/atune/web/src/components/flowChart.ts
deleted file mode 100644
index 88503722d870fa20d0287e3c9073d4ae9939846e..0000000000000000000000000000000000000000
--- a/atune/web/src/components/flowChart.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useCanvasStore } from "@/store/canvas";
-const fromX = useCanvasStore().width || 0;
-console.log("起始位置X:", fromX);
-export const rectStart = {
-  x: fromX / 2,
-  y: 50,
-  width: 100,
-  height: 40,
-  fill: "#fff",
-  stroke: "#fff",
-  shadowBlur: 2,
-  cornerRadius: 10,
-};
-
-export const rectPrepare = {
-  x: 20,
-  y: 50,
-  width: 100,
-  height: 40,
-  fill: "#fff",
-  stroke: "#fff",
-  shadowBlur: 2,
-  cornerRadius: 10,
-};
-
-export const rectTune = {
-  x: 20,
-  y: 50,
-  width: 100,
-  height: 40,
-  fill: "#fff",
-  stroke: "#fff",
-  shadowBlur: 2,
-  cornerRadius: 10,
-};
-
-export const rectRestore = {
-  x: 20,
-  y: 50,
-  width: 100,
-  height: 40,
-  fill: "#fff",
-  stroke: "#fff",
-  shadowBlur: 2,
-  cornerRadius: 10,
-};
diff --git a/atune/web/src/components/flowChart.vue b/atune/web/src/components/flowChart.vue
index 6f76c79bed8f5ece954ab2335ed58f1d35420ce8..6d1eb088cffe93a63e1a51d1789b5e43bc51c723 100644
--- a/atune/web/src/components/flowChart.vue
+++ b/atune/web/src/components/flowChart.vue
@@ -3,43 +3,25 @@
     <v-stage ref="stage" :config="stageSize" v-if="showFlow">
       <v-layer>
         <v-rect
-          @click="handleClick('reStart')"
-          :config="reStart"
-          @mousemove="handleMouseMove('reStart')"
-          @mouseout="handleMouseOut('reStart')"
-        /><v-rect
-          :config="rectPrepare"
-          @click="handleClick('rectPrepare')"
-          @mousemove="handleMouseMove('rectPrepare')"
-          @mouseout="handleMouseOut('rectPrepare')"
-        /><v-rect
-          :config="rectTune"
-          @click="handleClick('rectTune')"
-          @mousemove="handleMouseMove('rectTune')"
-          @mouseout="handleMouseOut('rectTune')"
-        /><v-rect
-          :config="rectRestore"
-          @click="handleClick('rectRestore')"
-          @mousemove="handleMouseMove('rectRestore')"
-          @mouseout="handleMouseOut('rectRestore')"
-        />
-        <v-text :config="{ x: 0, y: 20, text: 'start', fontSize: 16 }" />
-        <v-text :config="{ x: 20, y: 40, text: 'prepare', fontSize: 16 }" />
-        <v-text :config="{ x: 20, y: 80, text: 'restore', fontSize: 16 }" />
-        <v-text :config="{ x: 20, y: 60, text: 'tune', fontSize: 16 }" />
-        <v-shape
+          v-for="(item, index) in rectArr"
+          @click="handleClick(index, item)"
           :config="{
-            sceneFunc: arrowConfig1,
-            fill: '#00D2FF',
-            stroke: '#00D2FF',
-            strokeWidth: 2,
+            ...useCanvasStore().drawRect(index),
+            fill: rectBgColor[index],
           }"
         />
+        <v-text
+          v-for="(item, index) in rectArr"
+          @click="handleClick(index, item)"
+          :config="useCanvasStore().writeText(index, item)"
+        />
+
         <v-shape
+          v-for="item in 3"
           :config="{
-            sceneFunc: arrowConfig2,
-            fill: '#00D2FF',
-            stroke: '#00D2FF',
+            sceneFunc: (...event:any) =>{arrowConfig(event[0],event[1], item)},
+            fill: '#222',
+            stroke: '#222',
             strokeWidth: 2,
           }"
         />
@@ -51,28 +33,24 @@
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
 import { useCanvasStore } from "@/store/canvas";
-import { RectConfig } from "@/types/atune";
-import { pa } from "element-plus/es/locale/index.mjs";
 const showFlow = ref(false);
 const stage = ref();
 const stageW = ref(0);
 const stageH = ref(0);
 const stageSize = ref({});
-const reStart = ref({} as RectConfig);
-const rectPrepare = ref({} as RectConfig);
-const rectTune = ref({} as RectConfig);
-const rectRestore = ref({} as RectConfig);
-
+const rectBgColor = ref(["yellow", "#fff", "#fff", "#fff"]);
+const emit = defineEmits(["clickRect"]);
+let rectArr = ["start", "prepare", "restore", "tune"];
 let arrowStartX = 0;
 let arrowStartY = 0;
-let rectHeight = 0;
+let arrowLength = 0;
 onMounted(() => {
   const stageDiv = document.getElementById("flowChart");
   stageW.value = stageDiv!.clientWidth;
   stageH.value = stageDiv!.clientHeight;
   useCanvasStore().setWidth(stageW.value);
 });
-// 舞台的大小
+// 舞台的大小，基本参数的动态获取
 setTimeout(() => {
   const width = stageW.value;
   const height = stageH.value;
@@ -80,60 +58,44 @@ setTimeout(() => {
     width: width,
     height: height,
   };
-  reStart.value = useCanvasStore().rectStart;
-  rectPrepare.value = useCanvasStore().rectPrepare;
-  rectTune.value = useCanvasStore().rectTune;
-  rectRestore.value = useCanvasStore().rectRestore;
-
   arrowStartX = useCanvasStore().arrowStartX;
   arrowStartY = useCanvasStore().arrowStartY;
-  rectHeight = useCanvasStore().rectHeight;
+  arrowLength = useCanvasStore().arrowLength;
   showFlow.value = true;
 }, 100);
 
 // 鼠标移入事件
-const handleMouseMove = (shapeName: string) => {
-  console.log("移入", shapeName);
-  eval(shapeName).value.fill = "yellow";
-};
+const handleMouseMove = (_shapeName: string) => {};
 // 鼠标移出事件
-const handleMouseOut = (shapeName: string) => {
-  console.log("移出", shapeName);
-  eval(shapeName).value.fill = "#fff";
-};
+const handleMouseOut = (_shapeName: string) => {};
 // 鼠标点击事件
-const handleClick = (shapeName: string) => {
-  console.log("点击了：", shapeName);
+const handleClick = (index: number, rectText: string) => {
+  rectBgColor.value[index] = "yellow";
+  rectBgColor.value.forEach((_item, itemIndex) => {
+    if (itemIndex != index) {
+      rectBgColor.value[itemIndex] = "#fff";
+    }
+  });
+  emit("clickRect", rectText);
 };
 
 // 配置箭头参数
 let arrowPosition = (idNum: number) => {
   let arrowFX = arrowStartX;
   let arrowTX = arrowStartX;
-  let arrowFY = arrowStartY + rectHeight * idNum + 1;
-  let arrowTY = arrowStartY + rectHeight * (idNum + 1) - 2;
-  return { arrowFX, arrowTX, arrowFY, arrowTY };
-};
-const arrowConfig1 = (context: any, shape: any) => {
-  let { arrowFX, arrowTX, arrowFY, arrowTY } = arrowPosition(0);
-
-  useCanvasStore().drawArrow(
-    context,
-    shape,
-    arrowFX,
-    arrowTX,
-    arrowFY,
-    arrowTY
-  );
+  let arrowFY = arrowStartY * idNum + 1;
+  let arrowTY = arrowStartY * idNum + arrowLength - 2;
+  return [arrowFX, arrowTX, arrowFY, arrowTY];
 };
-const arrowConfig2 = (context: any, shape: any) => {
+const arrowConfig = (context: any, shape: any, idNum: number) => {
+  let params: number[] = arrowPosition(idNum);
   useCanvasStore().drawArrow(
     context,
     shape,
-    arrowStartX,
-    arrowStartX,
-    arrowStartY + rectHeight * 2 + 1,
-    arrowStartY + rectHeight * 3 - 2
+    params[0],
+    params[1],
+    params[2],
+    params[3]
   );
 };
 </script>
diff --git a/atune/web/src/components/table.vue b/atune/web/src/components/table.vue
index 6cb24f026200b483927b38fe40ba85a329b97c65..aa6f0157640ae03e2efb9f286e2338e23f9cd173 100644
--- a/atune/web/src/components/table.vue
+++ b/atune/web/src/components/table.vue
@@ -8,8 +8,14 @@
       <div class="my_table_header_operation">
         <!-- 模糊搜索 -->
         <div class="operation-select-input">
-          <el-input v-model="keyWord" placeholder="请输入关键词进行搜索..." :prefix-icon="Search" clearable
-            @keydown.enter.native="handleSearch"></el-input>
+          <el-input
+            v-model="keyWord"
+            placeholder="请输入关键词进行搜索..."
+            :prefix-icon="Search"
+            clearable
+            @keydown.enter.native="handleSearch"
+            @clear="handleRefresh"
+          ></el-input>
         </div>
       </div>
       <div class="my_table_header_button">
@@ -18,8 +24,14 @@
     </el-row>
     <!-- 列表 -->
     <div class="my_table_content" ref="tableBox">
-      <el-table ref="myTableRef" :data="tableData" class="table" @select="handleRowSelectionChange"
-        @selection-change="handleSelectinChange" v-loading="loading">
+      <el-table
+        ref="myTableRef"
+        :data="tableData"
+        class="table"
+        @select="handleRowSelectionChange"
+        @selection-change="handleSelectinChange"
+        v-loading="loading"
+      >
         <slot></slot>
         <template #append>
           <slot name="append"></slot>
@@ -31,10 +43,18 @@
     </div>
     <!-- 分页 -->
     <div class="my_table_page">
-      <el-pagination v-model:current-page="page.currentPage" v-model:page-size="page.pageSize" popper-class="pagePopper"
-        :page-sizes="[10, 20, 25, 50, 75, 100]" :small="page.small" :background="page.background"
-        layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="getTableData"
-        @current-change="getTableData" />
+      <el-pagination
+        v-model:current-page="page.currentPage"
+        v-model:page-size="page.pageSize"
+        popper-class="pagePopper"
+        :page-sizes="[10, 20, 25, 50, 75, 100]"
+        :small="page.small"
+        :background="page.background"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="page.total"
+        @size-change="getTableData"
+        @current-change="getTableData"
+      />
     </div>
   </div>
 </template>
diff --git a/atune/web/src/store/atune.ts b/atune/web/src/store/atune.ts
index 65767fd26d756441985bbc338e0f33a3b302006e..a36d31a5d1a9d0990d0defddb9eb027f97a85b9b 100644
--- a/atune/web/src/store/atune.ts
+++ b/atune/web/src/store/atune.ts
@@ -5,6 +5,7 @@ export const useAtuneStore = defineStore("atune", {
   state: () => ({
     count: 0,
     taskRow: {} as Task,
+    tuneRow: {} as Atune,
   }),
   getters: {
     double: (state) => state.count * 2,
@@ -17,6 +18,11 @@ export const useAtuneStore = defineStore("atune", {
     setTaskRow(row: Task) {
       this.taskRow = row;
     },
+    // 设置taskRow数据
+    setTuneRow(row: Atune) {
+      this.tuneRow = row;
+      console.log(this.tuneRow);
+    },
   },
   //   persist: {
   //     enabled: true, // 开启存储
diff --git a/atune/web/src/store/canvas.ts b/atune/web/src/store/canvas.ts
index 0e5dfbb50662c045522c5690133c66a2cf900686..6d757c86a89f603877dc7a7009a2ac6b97a74899 100644
--- a/atune/web/src/store/canvas.ts
+++ b/atune/web/src/store/canvas.ts
@@ -6,6 +6,7 @@ export const useCanvasStore = defineStore("canvas", {
     width: 0,
     fromX: 0,
     fromY: 50,
+    arrowLength: 50,
     rectWidth: 100,
     rectHeight: 50,
     rectConfig: {
@@ -13,11 +14,11 @@ export const useCanvasStore = defineStore("canvas", {
       y: 0,
       width: 100,
       height: 50,
-      fill: "#fff",
       stroke: "#fff",
       shadowBlur: 2,
       cornerRadius: 10,
     },
+    textConfig: { x: 0, y: 20, text: "start", fontSize: 16 },
   }),
   getters: {
     /**
@@ -27,33 +28,9 @@ export const useCanvasStore = defineStore("canvas", {
      * @param state
      * @returns
      */
-    // 计算各个图形的起始位置
-    rectStart: (state) => {
-      let rectConfig: RectConfig = JSON.parse(JSON.stringify(state.rectConfig));
-      rectConfig.x = state.width / 2 - state.rectWidth;
-      rectConfig.y = state.fromY;
-      return rectConfig;
-    },
-    rectPrepare: (state) => {
-      let rectConfig: RectConfig = JSON.parse(JSON.stringify(state.rectConfig));
-      rectConfig.x = state.width / 2 - state.rectWidth;
-      rectConfig.y = state.fromY + state.fromY * 2;
-      return rectConfig;
-    },
-    rectTune: (state) => {
-      let rectConfig: RectConfig = JSON.parse(JSON.stringify(state.rectConfig));
-      rectConfig.x = state.width / 2 - state.rectWidth;
-      rectConfig.y = state.fromY + state.fromY * 4;
-      return rectConfig;
-    },
-    rectRestore: (state) => {
-      let rectConfig: RectConfig = JSON.parse(JSON.stringify(state.rectConfig));
-      rectConfig.x = state.width / 2 - state.rectWidth;
-      rectConfig.y = state.fromY + state.fromY * 6;
-      return rectConfig;
-    },
+    // 箭头的起始位置X Y
     arrowStartX: (state) => {
-      return state.fromX - state.rectWidth / 2;
+      return state.fromX;
     },
     arrowStartY: (state) => {
       return state.fromY + state.rectHeight;
@@ -67,7 +44,39 @@ export const useCanvasStore = defineStore("canvas", {
       this.width = width;
       this.fromX = width / 2;
     },
+    drawRect(idNum: number) {
+      // 画矩形
+      let rectConfig: RectConfig = JSON.parse(JSON.stringify(this.rectConfig));
+      rectConfig.x = this.width / 2 - this.rectWidth / 2;
+      rectConfig.y = this.fromY + this.fromY * idNum * 2;
+      return rectConfig;
+    },
+    // 计算文字像素
+    getTextWidth(text: string, fontSize: number, fontWeight: string) {
+      // 创建临时元素
+      const ele: HTMLElement = document.createElement("div");
+      ele.style.position = "absolute";
+      ele.style.whiteSpace = "nowrap";
+      ele.style.fontSize = fontSize + "px";
+      ele.style.fontWeight = fontWeight;
+      ele.innerText = text;
+      document.body.append(ele);
+      const width: number = ele.getBoundingClientRect().width;
+      document.body.removeChild(ele);
+      return width;
+    },
+    // 写text
+    writeText(idNum: number, text: string) {
+      let getTextWidth = this.getTextWidth(text, 16, "none");
+      let textConfig = JSON.parse(JSON.stringify(this.textConfig));
+      textConfig.x = this.fromX - getTextWidth / 2;
+      textConfig.y =
+        this.fromY + this.fromY * idNum * 2 + this.rectHeight / 2 - 6;
+      textConfig.text = text;
+      return textConfig;
+    },
     drawArrow(
+      // 画箭头
       context: any,
       shape: any,
       fX: number,
diff --git a/atune/web/src/types/atune.d.ts b/atune/web/src/types/atune.d.ts
index d2f093ab5a3aa4533795d169be0eb94938d06031..2bde747e96f65be65a81e7389f13ff9679d9fe48 100644
--- a/atune/web/src/types/atune.d.ts
+++ b/atune/web/src/types/atune.d.ts
@@ -7,15 +7,16 @@ export interface Task {
   update_time: string;
   results: Array;
   tune_id: int;
-  tune: Atune
+  tune: Atune;
 }
 
 export interface Atune {
   id: number;
   description: string;
   create_time: string;
-  update_time: string
+  update_time: string;
   tuneName: string;
+  custom_name: string;
   workDir: string;
   prepare: string;
   tune: string;
diff --git a/atune/web/src/views/Home.vue b/atune/web/src/views/Home.vue
index 2b2db2168d9e932b554c6e8c69126b85fe24a9f5..1c85de626d2a88e6ad30c704d35623a95883fc10 100644
--- a/atune/web/src/views/Home.vue
+++ b/atune/web/src/views/Home.vue
@@ -2,14 +2,21 @@
   <div class="container">
     <!-- 任务列表 -->
     <div class="container-table shadow" v-show="!showDetail">
-      <taskList @taskDetail="handleTaskDetail" @atuneDetail="handleAtuneDetail" :refreshData="refreshData"
-        :searchTuneName="searchTuneName" :searchTune="searchTune">
+      <taskList
+        @taskDetail="handleTaskDetail"
+        @atuneDetail="handleAtuneDetail"
+        :refreshData="refreshData"
+        :searchTuneName="searchTuneName"
+        :searchTune="searchTune"
+      >
       </taskList>
     </div>
     <!-- 单项任务详情 -->
     <div v-show="showDetail" class="container-nav">
       <el-breadcrumb separator="/">
-        <el-breadcrumb-item :to="{ path: '/task' }" @click="returnHome">执行任务列表</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/task' }" @click="returnHome"
+          >执行任务列表</el-breadcrumb-item
+        >
         <el-breadcrumb-item>任务详情</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
@@ -18,8 +25,13 @@
 
   <!-- 调优模板详情 -->
   <el-dialog title="调优模板信息" width="70%" v-model="showDialog">
-    <atuneTemplete :selectedNodeData="selectedNodeData" :selectedEditRow="selectedEditRow" @closeDialog="closeDialog"
-      @dataUpdated="handleDataUpdated">
+    <atuneTemplete
+      :is-tune="false"
+      :selectedNodeData="selectedNodeData"
+      :selectedEditRow="selectedEditRow"
+      @closeDialog="closeDialog"
+      @dataUpdated="handleDataUpdated"
+    >
     </atuneTemplete>
   </el-dialog>
 </template>
@@ -54,7 +66,7 @@ const returnHome = () => {
 };
 
 // 新增
-const handleCreat = () => { };
+const handleCreat = () => {};
 
 // 查看模板详情
 const handleAtuneDetail = (taskRow: Task | Atune) => {
diff --git a/atune/web/src/views/atuneDetail.vue b/atune/web/src/views/atuneDetail.vue
index e9e1d82f9c39ab5bab8b6cde3d07f5a522f7bbad..b33d2be451e9e48617f2a2e48e5d1ffe6f81f9be 100644
--- a/atune/web/src/views/atuneDetail.vue
+++ b/atune/web/src/views/atuneDetail.vue
@@ -1,43 +1,29 @@
 <template>
   <div class="atuneDetail">
-    <el-container style="width: 100%; height: 100%">
+    <el-container class="atuneDetail_con">
       <el-header height="20%">
-        <el-descriptions title="User Info">
-          <el-descriptions-item label="Username"
-            >kooriookami</el-descriptions-item
-          >
-          <el-descriptions-item label="Telephone"
-            >18100000000</el-descriptions-item
-          >
-          <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
-          <el-descriptions-item label="Remarks">
-            <el-tag size="small">School</el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="Address"
-            >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
-            Province</el-descriptions-item
+        <el-descriptions title="模板详情">
+          <el-descriptions-item label="名称:">
+            <el-tag>{{ tuneName }}</el-tag></el-descriptions-item
           >
+          <el-descriptions-item label="工作目录:">{{
+            workDir
+          }}</el-descriptions-item>
+          <br />
+          <el-descriptions-item label="注意事项:">{{
+            note
+          }}</el-descriptions-item>
         </el-descriptions>
       </el-header>
       <el-container>
-        <el-aside
-          width="50%"
-          style="
-            display: flex;
-            justify-content: center;
-            background-color: aquamarine;
-          "
+        <el-aside width="40%" style="display: flex; justify-content: center"
           ><flow-chart
-            style="
-              width: 90%;
-              height: 100%;
-              margin: 0 auto;
-              background-color: blueviolet;
-            "
+            style="width: 90%; height: 100%; margin: 0 auto"
+            @clickRect="showShell"
           ></flow-chart
         ></el-aside>
         <el-main>
-          <div class="shell">{{ "qweqweqeqr/qweqeqwew" }}</div>
+          <div class="shell">{{ shell }}</div>
         </el-main>
       </el-container>
     </el-container>
@@ -46,11 +32,40 @@
 <script lang="ts" setup>
 import flowChart from "@/components/flowChart.vue";
 import { ref } from "vue";
+import { useAtuneStore } from "@/store/atune";
+const shell = ref("start:点击查看每一步具体的脚本信息");
+let { prepare, restore, tune, workDir, tuneName, note } =
+  useAtuneStore().tuneRow;
+
+const showShell = (shellName: string) => {
+  switch (shellName) {
+    case "prepare":
+      shell.value = prepare;
+      break;
+    case "restore":
+      shell.value = restore;
+      break;
+    case "tune":
+      shell.value = tune;
+      break;
+
+    default:
+      shell.value = "start:点击查看每一步具体的脚本信息";
+      break;
+  }
+};
 </script>
 <style lang="less" scoped>
 .atuneDetail {
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  &_con {
+    width: 100%;
+    height: 96%;
+  }
   .shell {
     width: 90%;
     height: 100%;
diff --git a/atune/web/src/views/atuneList.vue b/atune/web/src/views/atuneList.vue
index 29227d05e9ac2845af12836f61aa61ce057e1d49..4851902f482c82454b64e7bb815f9cce19fdb5a1 100644
--- a/atune/web/src/views/atuneList.vue
+++ b/atune/web/src/views/atuneList.vue
@@ -14,11 +14,12 @@
       </template>
       <el-table-column type="selection" width="55" />
       <el-table-column prop="id" label="编号" width="100" />
-      <el-table-column prop="tuneName" label="名称" width="100" />
+      <el-table-column prop="tuneName" label="调优对象" width="100" />
+      <el-table-column prop="custom_name" label="自定义名称" width="100" />
       <el-table-column prop="description" label="概述" />
-      <el-table-column prop="createTime" label="创建时间" />
-      <el-table-column prop="updateTime" label="更新时间" />
-      <el-table-column label="操作" width="80">
+      <el-table-column prop="create_time" label="创建时间" />
+      <el-table-column prop="update_time" label="更新时间" />
+      <el-table-column label="操作" width="180">
         <template #default="{ row }">
           <my-button size="small" @click="handleDetail(row)">详情</my-button>
           <my-button size="small" @click="handleEdit(row)">编辑</my-button>
@@ -26,6 +27,16 @@
       </el-table-column>
     </my-table>
   </div>
+  <el-dialog title="调优模板信息" width="70%" v-model="showDialog">
+    <atuneTemplete
+      :is-tune="true"
+      :selectedNodeData="selectedNodeData"
+      :selectedEditRow="selectedEditRow"
+      @closeDialog="closeDialog"
+      @dataUpdated="handleDataUpdated"
+    >
+    </atuneTemplete>
+  </el-dialog>
   <div class="tuneList shadow" v-if="showDetail">
     <router-view />
   </div>
@@ -33,28 +44,44 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
+import { ElDialog } from "element-plus";
 import { getTuneLists, searchTune, deleteTune } from "@/api/atune";
+import atuneTemplete from "@/components/atuneTemplete.vue";
 import { Atune } from "@/types/atune";
 import { useRouter } from "vue-router";
-const emit = defineEmits(["atuneDetail"]);
+import { useAtuneStore } from "@/store/atune";
 const tuneRef = ref();
 const router = useRouter();
 const showDetail = ref(false);
+const selectedNodeData = ref("");
+const showDialog = ref(false);
+const selectedEditRow = ref();
+// 关闭dialog弹框
+const closeDialog = () => {
+  showDialog.value = false;
+};
 // 新增
-const handleCreat = () => {};
+const handleCreat = () => {
+  showDialog.value = true;
+};
 // 删除
 const handleDelete = () => {
   tuneRef.value.handleDelete();
 };
 // 详情
-const handleDetail = (atuneRow: any) => {
-  atuneRow;
+const handleDetail = (row: Atune) => {
+  useAtuneStore().setTuneRow(row);
   showDetail.value = true;
   router.push("/atune/detail");
 };
 // 编辑
 const handleEdit = (row: Atune) => {
-  emit("atuneDetail", row);
+  selectedEditRow.value = row;
+  showDialog.value = true;
+};
+// 刷新
+const handleDataUpdated = () => {
+  tuneRef.value.handleRefresh();
 };
 </script>