diff --git a/atune/web/index.html b/atune/web/index.html
index dde16aaf3671c5f9770aed03d3db0b35486b8357..570d2d23a30ce47e37dcf5bb56e707c9d9a54e3f 100644
--- a/atune/web/index.html
+++ b/atune/web/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>智能调优</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/atune/web/src/components/atuneTemp.vue b/atune/web/src/components/atuneTemp.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f5289a6e8f0c3d55ac1ca8c71243ef0bc552fd8f
--- /dev/null
+++ b/atune/web/src/components/atuneTemp.vue
@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <p>{{ selectedNodeData }}</p>
+        <button @click="fetchAtuneInfo">获取调优信息</button>
+
+        <el-form :model="form" label-width="120px">
+            <el-form-item label="调优对象">
+                <el-input v-model="form.tuneName"></el-input>
+            </el-form-item>
+            <el-form-item label="工作目录">
+                <el-input v-model="form.workDir"></el-input>
+            </el-form-item>
+            <el-form-item label="环境准备">
+                <el-input v-model="form.perpare"></el-input>
+            </el-form-item>
+            <el-form-item label="智能调优">
+                <el-input v-model="form.tune"></el-input>
+            </el-form-item>
+            <el-form-item label="环境恢复">
+                <el-input v-model="form.restore"></el-input>
+            </el-form-item>
+            <el-form-item label="注意事项">
+                <el-input v-model="form.note"></el-input>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { ref, onUpdated, reactive} from 'vue'
+import { getAtuneInfo } from '@/api/atune'
+
+let props=defineProps({
+    selectedNodeData:{
+        type:String,
+        default:""
+    }
+})
+
+const atuneName = ref(props.selectedNodeData)
+// 使用 onUpdated 钩子来监视 selectedNodeData 的变化
+onUpdated(() => {
+    atuneName.value = props.selectedNodeData
+    console.log(atuneName.value)
+})
+
+const atuneInfo = ref(null)
+const form = reactive({
+    tuneName:"",
+    workDir:"",
+    perpare:"",
+    tune:"",
+    restore:"",
+    note:""
+})
+const fetchAtuneInfo=()=>{
+    if (atuneName.value) {
+        // 获取单个模板信息
+        getAtuneInfo({ name: atuneName.value })
+          .then((res) => {
+            if (res.data && res.data.code === 200){
+                atuneInfo.value = res.data; 
+                console.log('获取到的调优信息：', atuneInfo.value);
+            }else{
+                console.log('获取调优信息时出错:', res.data.msg)   
+            }
+          })
+    } else {
+        console.warn('atuneName 为空，无法获取调优信息');
+    }
+}
+
+</script>
+
+<style lang = 'less' scoped>
+
+ 
+</style>
diff --git a/atune/web/vite.config.ts b/atune/web/vite.config.ts
index 2618062bd3a79a519dee1a0bc1599471b8a3cef6..ac5d1d574e814fc5efb22f22a8ae43ebd1e7a49b 100644
--- a/atune/web/vite.config.ts
+++ b/atune/web/vite.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
   plugins: [vue()],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, 'src'), //在任何模块文件内部，可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径。
+      '@': path.join(__dirname, 'src'), //在任何模块文件内部，可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径。
     },
   },
   server: {
