From 617479e3c1405b0189363ce31a0d3f7086609294 Mon Sep 17 00:00:00 2001
From: zhaozhenfang <zhaozhenfang@kylinos.cn>
Date: Mon, 25 Dec 2023 15:05:50 +0800
Subject: [PATCH] develop the framework of the frontend

---
 atune/web/src/App.vue              |  90 +++++++++----
 atune/web/src/api/atune.ts         |  37 +++---
 atune/web/src/assets/main.css      |  43 +++---
 atune/web/src/components/table.vue | 160 ++++++++++++----------
 atune/web/src/router/index.ts      |  34 +++--
 atune/web/src/types/atune.d.ts     |  11 +-
 atune/web/src/views/Home.vue       | 205 ++++++++++++++---------------
 atune/web/src/views/taskDetail.vue |  13 ++
 atune/web/src/views/taskList.vue   | 198 ++++++++++++++++++++++++++++
 9 files changed, 537 insertions(+), 254 deletions(-)
 create mode 100644 atune/web/src/views/taskDetail.vue
 create mode 100644 atune/web/src/views/taskList.vue

diff --git a/atune/web/src/App.vue b/atune/web/src/App.vue
index 63ccd49e..6b7e6fe4 100644
--- a/atune/web/src/App.vue
+++ b/atune/web/src/App.vue
@@ -1,5 +1,18 @@
 <template>
   <div class="app">
+    <div class="top">
+      <span class="top-title">A-Tune调优管理</span>
+      <span class="top-description">此处应有一段介绍</span>
+    </div>
+    <div class="nav">
+      <!-- 两页 任务列表、调优模板列表 -->
+      <router-link class="nav-link" to="/task" :active-class="'active'">
+        任务</router-link
+      >
+      <router-link class="nav-link" to="/atune" :active-class="'active'">
+        模板</router-link
+      >
+    </div>
     <el-config-provider :locale="zhCn">
       <router-view></router-view>
     </el-config-provider>
@@ -7,8 +20,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import locale from 'element-plus/es/locale/lang/zh-cn';
+import { ref } from "vue";
+import locale from "element-plus/es/locale/lang/zh-cn";
 const zhCn = ref(locale);
 </script>
 
@@ -19,27 +32,56 @@ const zhCn = ref(locale);
   -moz-osx-font-smoothing: grayscale;
   height: 100%;
   width: 100%;
-  // overflow: hidden; /* Ensure no scrollbars on the app container */
-}
+  background-color: #f5f5f9;
+
+  .top {
+    width: 100%;
+    height: 64px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 
-// html {
-//   margin: 0;
-//   padding: 0;
-//   height: 100%;
-//   width: 100%;
-// }
+    &-title {
+      padding-left: 40px;
+      font-size: 18px;
+      font-weight: 600;
+      color: #333;
+      display: inline-block;
+    }
 
-// body {
-//   margin: 0;
-//   padding: 0;
-//   height: 100%;
-//   width: 100%;
-//   background-color: rgb(11, 35, 117);
-//   // overflow: hidden; /* Ensure no scrollbars on the body */
-//   transform-origin: 0 0 0;
-//   -moz-transform-origin: 0 0 0;
-//   -ms-transform-origin: 0 0 0;
-//   -webkit-transform-origin: 0 0 0;
-//   -o-transform-origin: 0 0 0;
-// }
-</style>
\ No newline at end of file
+    &-description {
+      padding-left: 40px;
+      font-size: 16px;
+      color: #444;
+      font-weight: 500;
+    }
+  }
+  .nav {
+    width: 200px;
+    height: 38px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    &-link {
+      display: inline-block;
+      width: 46%;
+      text-align: center;
+      text-decoration: none;
+      color: rgb(96, 122, 207);
+      border-radius: 6px;
+      font-weight: bold;
+      &:hover {
+        background-color: rgba(96, 122, 207, 0.4);
+        color: #fff;
+      }
+    }
+    .active {
+      color: #fff;
+      background-color: rgb(96, 122, 207);
+      box-shadow: 0 1px 6px 0 rgba(96, 122, 207, 0.4),
+        0 2px 6px 0 rgba(96, 122, 207, 0.8);
+    }
+  }
+}
+</style>
diff --git a/atune/web/src/api/atune.ts b/atune/web/src/api/atune.ts
index d1f1f196..fa0cba1b 100644
--- a/atune/web/src/api/atune.ts
+++ b/atune/web/src/api/atune.ts
@@ -1,26 +1,27 @@
-import request from './request';
+import request from "./request";
 
 // 获取所有的任务列表
-export function getTaskLists() {
+export function getTaskLists(data: Object) {
   return request({
-    url: '/plugin/atune/tasks',
-    method: 'get',
+    url: "/plugin/atune/tasks",
+    method: "get",
+    params: data,
   });
 }
 
 // 获取所有的调优列表
 export function getAtuneAllName() {
   return request({
-    url: '/plugin/atune/all',
-    method: 'get',
+    url: "/plugin/atune/all",
+    method: "get",
   });
 }
 
 // 获取某个调优对象的具体信息
 export function getAtuneInfo(data: object) {
   return request({
-    url: '/plugin/atune/info',
-    method: 'get',
+    url: "/plugin/atune/info",
+    method: "get",
     params: data,
   });
 }
@@ -28,8 +29,8 @@ export function getAtuneInfo(data: object) {
 // 获取调优模板列表分页
 export function getTuneLists(data: object) {
   return request({
-    url: '/plugin/atune/tunes',
-    method: 'get',
+    url: "/plugin/atune/tunes",
+    method: "get",
     params: data,
   });
 }
@@ -37,8 +38,8 @@ export function getTuneLists(data: object) {
 // 保存调优模板
 export function saveTune(data: object) {
   return request({
-    url: '/plugin/atune/save',
-    method: 'post',
+    url: "/plugin/atune/save",
+    method: "post",
     data,
   });
 }
@@ -46,8 +47,8 @@ export function saveTune(data: object) {
 // 删除调优模板
 export function deleteTune(data: object) {
   return request({
-    url: '/plugin/atune/delete',
-    method: 'delete',
+    url: "/plugin/atune/delete",
+    method: "delete",
     data,
   });
 }
@@ -55,8 +56,8 @@ export function deleteTune(data: object) {
 // 高级搜索模板列表分页
 export function searchTune(data: object) {
   return request({
-    url: '/plugin/atune/search',
-    method: 'get',
+    url: "/plugin/atune/search",
+    method: "get",
     params: data,
   });
 }
@@ -64,8 +65,8 @@ export function searchTune(data: object) {
 // 编辑模板更新
 export function updateTune(data: object) {
   return request({
-    url: '/plugin/atune/update',
-    method: 'post',
+    url: "/plugin/atune/update",
+    method: "post",
     data,
   });
 }
diff --git a/atune/web/src/assets/main.css b/atune/web/src/assets/main.css
index 4f5ffc80..22c44adf 100644
--- a/atune/web/src/assets/main.css
+++ b/atune/web/src/assets/main.css
@@ -1,20 +1,25 @@
-
 html {
-    height: 100%;
-    width: 100%;
-    margin: 0px;
-    padding: 0px;
-    box-sizing: border-box;
-  }
-  
-  body {
-    height: 100%;
-    width: 100%;
-    margin: 0px;
-    padding: 0px;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
-      Microsoft YaHei, Arial, sans-serif;
-  }
+  height: 100%;
+  width: 100%;
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100%;
+  width: 100%;
+  margin: 0px;
+  padding: 0px;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  /* font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+      Microsoft YaHei, Arial, sans-serif; */
+  font-family: Public Sans, sans-serif, -apple-system, blinkmacsystemfont,
+    Segoe UI, roboto, Helvetica Neue, arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", Segoe UI Symbol;
+}
+.shadow {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 6px 0 rgba(0, 0, 0, 0.1);
+}
diff --git a/atune/web/src/components/table.vue b/atune/web/src/components/table.vue
index c487884d..7c5e3405 100644
--- a/atune/web/src/components/table.vue
+++ b/atune/web/src/components/table.vue
@@ -1,101 +1,123 @@
 <template>
-    <div class="my-table">
-        <div class="header">
-            <div class="header_content">
-                <div class="table_search">
-                    <slot name="table_search"></slot>
-                </div>
-                <div class="table_action">
-                    <slot name="table_action"></slot>
-                </div>
-            </div>
+  <div class="my-table">
+    <div class="header">
+      <div class="header_content">
+        <div class="table_search">
+          <slot name="table_search"></slot>
         </div>
-        <div class="content">
-          <div  v-loading="loading" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading">
-            <el-table :data="props.tableData" @selection-change="onSelectionChange" height="100%" :header-cell-style="{ color: 'black', 'background-color': '#f6f8fd' }"
-            :cell-style="{ color: 'black' }"  tooltip-effect="dark">
-            <el-table-column type="selection"  width="55" align="center" ></el-table-column>
-            <slot name="table"></slot>
-          </el-table>
-        </div>
-      </div >
-        <div class="pagination">
-            <el-pagination 
-                v-model:current-page="currentPage"  v-model:page-size="pageSize" :total="props.total" :page-sizes="props.pageSizes" 
-                layout="total, sizes, prev, pager, next, jumper"
-                @size-change="onPageSizeChange"
-                @current-change="onCurrentPageChange">
-            </el-pagination>
+        <div class="table_action">
+          <slot name="table_action"></slot>
         </div>
+      </div>
+    </div>
+    <div class="content">
+      <div
+        v-loading="loading"
+        element-loading-text="数据加载中"
+        element-loading-spinner="el-icon-loading"
+      >
+        <el-table
+          :data="props.tableData"
+          @selection-change="onSelectionChange"
+          height="100%"
+          :header-cell-style="{ color: 'black', 'background-color': '#f6f8fd' }"
+          :cell-style="{ color: 'black' }"
+          tooltip-effect="dark"
+        >
+          <el-table-column
+            type="selection"
+            width="55"
+            align="center"
+          ></el-table-column>
+          <slot name="table"></slot>
+        </el-table>
+      </div>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :total="props.total"
+        :page-sizes="props.pageSizes"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="onPageSizeChange"
+        @current-change="onCurrentPageChange"
+      >
+      </el-pagination>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, toRaw } from 'vue';
+import { ref, watch, onMounted, toRaw } from "vue";
 
-const emit = defineEmits(['update:pageSize', 'update:currentPage','update:selectedData']);
+const emit = defineEmits([
+  "update:pageSize",
+  "update:currentPage",
+  "update:selectedData",
+]);
 let props = defineProps({
-  loading:{
-    type:Boolean,
-    default:false
+  loading: {
+    type: Boolean,
+    default: false,
   },
   tableData: {
-    type:Array,
-    default:[]
+    type: Array,
+    default: [],
   },
   searchTune: {
     type: Boolean,
-    default: false
+    default: false,
   },
-  total:{
-    type:Number,
-    default:0
+  total: {
+    type: Number,
+    default: 0,
   },
-  currentPage:{
-    type:Number,
-    default:1
+  currentPage: {
+    type: Number,
+    default: 1,
   },
-  pageSize:{
-    type:Number,
-    default:10
+  pageSize: {
+    type: Number,
+    default: 10,
   },
   pageSizes: {
     type: Array,
     default: [10, 20, 50, 100],
   },
-})
+});
 
 const currentPage = ref(props.currentPage);
 const pageSize = ref(props.pageSize);
 
 const onSelectionChange = (val: any[]) => {
-    let d: any[] = []
-    val.forEach((item: any) => {
-        d.push(toRaw(item))
-    })
+  let d: any[] = [];
+  val.forEach((item: any) => {
+    d.push(toRaw(item));
+  });
 
-    emit('update:selectedData', d)
-}
+  emit("update:selectedData", d);
+};
 
-const onPageSizeChange = (newSize:number) => {
-    pageSize.value = newSize;
-    emit('update:pageSize', newSize);
+const onPageSizeChange = (newSize: number) => {
+  pageSize.value = newSize;
+  emit("update:pageSize", newSize);
 };
 
-const onCurrentPageChange = (newPage:number) => {
-    currentPage.value = newPage;
-    emit('update:currentPage', newPage);
+const onCurrentPageChange = (newPage: number) => {
+  currentPage.value = newPage;
+  emit("update:currentPage", newPage);
 };
 
 watch([() => props.currentPage, () => props.pageSize], ([newPage, newSize]) => {
-  emit('update:currentPage', newPage);
-  emit('update:pageSize', newSize);
+  emit("update:currentPage", newPage);
+  emit("update:pageSize", newSize);
 });
 
 // 在组件挂载时触发一次父组件传递的事件
 onMounted(() => {
-    emit('update:pageSize', pageSize.value);
-    emit('update:currentPage', currentPage.value);
+  emit("update:pageSize", pageSize.value);
+  emit("update:currentPage", currentPage.value);
 });
 </script>
 
@@ -111,7 +133,11 @@ onMounted(() => {
     width: 100%;
     height: 6%;
     border-radius: 8px 8px 0 0;
-    background: linear-gradient(to right, rgb(11, 35, 117) 0%, rgb(96, 122, 207) 100%, );
+    background: linear-gradient(
+      to right,
+      rgb(11, 35, 117) 0%,
+      rgb(96, 122, 207) 100%
+    );
 
     .header_content {
       height: 100%;
@@ -121,7 +147,7 @@ onMounted(() => {
       align-items: center;
       color: #fff;
 
-      .table_search{
+      .table_search {
         margin-left: auto;
       }
     }
@@ -135,10 +161,10 @@ onMounted(() => {
     width: 100%;
     margin: 0;
     :deep(.el-pagination) {
-        justify-content: flex-end;
-        .el-pagination__sizes {
-            flex: 1,
-        }
+      justify-content: flex-end;
+      .el-pagination__sizes {
+        flex: 1;
+      }
     }
     .el-pagination {
       text-align: right;
@@ -152,4 +178,4 @@ onMounted(() => {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/atune/web/src/router/index.ts b/atune/web/src/router/index.ts
index 20d23202..e40df3f3 100644
--- a/atune/web/src/router/index.ts
+++ b/atune/web/src/router/index.ts
@@ -1,28 +1,34 @@
-import { createRouter, createWebHistory } from 'vue-router';
-import type { RouteRecordRaw } from 'vue-router';
-import Home from '@/views/Home.vue';
-import Result from '@/views/ResultInfo.vue';
+import { createRouter, createWebHistory } from "vue-router";
+import type { RouteRecordRaw } from "vue-router";
+import Home from "@/views/Home.vue";
+import Atune from "@/components/atuneList.vue";
+import Result from "@/views/ResultInfo.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
-    path: '/',
-    redirect: '/atune'
+    path: "/",
+    redirect: "/task",
   },
   {
-    path: '/atune',
+    path: "/task",
     component: Home,
-    meta: { title: '任务列表' },
+    meta: { title: "任务列表" },
     children: [
       {
-        path: 'detail',
-        component: () => import("../components/atuneTemplete.vue")
-      }
-    ]
+        path: "detail",
+        component: () => import("../views/taskDetail.vue"),
+      },
+    ],
   },
   {
-    path: '/result',
+    path: "/atune",
+    component: Atune,
+    meta: { title: "模板列表" },
+  },
+  {
+    path: "/result",
     component: Result,
-    meta: { title: '结果展示' },
+    meta: { title: "结果展示" },
   },
 ];
 
diff --git a/atune/web/src/types/atune.d.ts b/atune/web/src/types/atune.d.ts
index 340465d8..18ea8b2c 100644
--- a/atune/web/src/types/atune.d.ts
+++ b/atune/web/src/types/atune.d.ts
@@ -1,10 +1,11 @@
 export interface Task {
   id: number;
-  name: string;
-  atune: string;
-  state: number;
-  createTime: string;
-  updateTime: string;
+  task_name: string;
+  command: string;
+  task_status: string;
+  create_time: string;
+  update_time: string;
+  results: [{}];
 }
 
 export interface Atune {
diff --git a/atune/web/src/views/Home.vue b/atune/web/src/views/Home.vue
index dd4034fd..3a1862df 100644
--- a/atune/web/src/views/Home.vue
+++ b/atune/web/src/views/Home.vue
@@ -1,95 +1,110 @@
 <template>
-  <div class="top">
-    <span class="top-title">A-Tune调优管理</span>
-    <span class="top-description">此处应有一段介绍</span>
-  </div>
   <div class="container">
-    <div class="table-container" v-show="!showDetail">
+    <div class="table-container shadow" v-show="!showDetail">
       <div class="title">
-        <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>
+        <div class="title-content" style="font-size: 18px">执行任务列表</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>
-        <atuneList @selectionChange="handleSelectionChange" @selectionEdit="handleSelectEdit" :refreshData="refreshData"
-          :searchTuneName="searchTuneName" :searchTune="searchTune">
-        </atuneList>
+        <taskList
+          @selectionChange="handleSelectionChange"
+          @taskDetail="handleTaskDetail"
+          @atuneDetail="handleAtuneDetail"
+          :refreshData="refreshData"
+          :searchTuneName="searchTuneName"
+          :searchTune="searchTune"
+        >
+        </taskList>
       </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 v-show="showDetail" class="container-nav">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item :to="{ path: '/task' }" @click="returnHome"
+          >执行任务列表</el-breadcrumb-item
+        >
+        <el-breadcrumb-item>任务详情</el-breadcrumb-item>
+      </el-breadcrumb>
     </div>
+    <router-view />
   </div>
+
+  <!-- 调优模板详情 -->
   <el-dialog title="调优模板信息" width="70%" v-model="showDialog">
-    <atuneTemplete :selectedNodeData="selectedNodeData" :selectedEditRow="selectedEditRow" @closeDialog="closeDialog"
-      @dataUpdated="handleDataUpdated">
+    <atuneTemplete
+      :selectedNodeData="selectedNodeData"
+      :selectedEditRow="selectedEditRow"
+      @closeDialog="closeDialog"
+      @dataUpdated="handleDataUpdated"
+    >
     </atuneTemplete>
   </el-dialog>
 </template>
 
 <script lang="ts" setup>
-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 { Task } from '@/types/atune'
-import router from '../router/index.ts';
-
-const selectedNodeData = ref("")
-const searchTuneName = ref("")
-const searchTune = ref(false)
-const showDialog = ref(false)
-const selectedRows = ref([] as Task[])
-const selectedEditRow = ref()
-const refreshData = ref(false)
-const showDetail = ref(false)
+import { ref } from "vue";
+import { deleteTune } from "@/api/atune";
+import { ElDialog, ElMessage, ElMessageBox } from "element-plus";
+import { Search } from "@element-plus/icons-vue";
+import taskList from "./taskList.vue";
+import atuneTemplete from "@/components/atuneTemplete.vue";
+import { Task } from "@/types/atune";
+import router from "../router/index.ts";
+
+const selectedNodeData = ref("");
+const searchTuneName = ref("");
+const searchTune = ref(false);
+const showDialog = ref(false);
+const selectedRows = ref([] as Task[]);
+const selectedEditRow = ref();
+const refreshData = ref(false);
+const showDetail = ref(false);
 
 // 关闭dialog弹框
 const closeDialog = () => {
   showDialog.value = false;
-}
+};
 
 // 选中多选框
 const handleSelectionChange = (selected_Rows: any) => {
   selectedRows.value = selected_Rows;
-}
+};
 
 // 返回任务列表
 const returnHome = () => {
-  router.push({
-    path: '/atune'
-  })
   showDetail.value = false;
-}
+};
 
 // 新增
-const handleCreat = () => {
+const handleCreat = () => {};
 
-}
+// 查看模板详情
+const handleAtuneDetail = (editRow: any) => {
+  selectedEditRow.value = editRow;
+  showDialog.value = true;
+};
 
-// 编辑
-const handleSelectEdit = (editRow: any) => {
-  /* selectedEditRow.value = editRow
-  showDialog.value = true; */
+// 查看任务详情
+const handleTaskDetail = (editRow: any) => {
   router.push({
-    path: '/atune/detail',
+    path: "/task/detail",
     params: {
-      row: editRow
-    }
-  })
+      row: editRow,
+    },
+  });
   showDetail.value = true;
-}
+};
 
 // 刷新
 const handleDataUpdated = () => {
@@ -103,28 +118,29 @@ const handleSearch = () => {
 
 // 删除
 const handleDelete = () => {
-  ElMessageBox.confirm('确定要删除吗？', '提示', {
-    type: 'warning',
-    confirmButtonText: '确定',
-    cancelButtonText: '取消'
-  })
-    .then(() => {
-      let ids = ref<number[]>([])
-      selectedRows.value.forEach(item => {
-        ids.value.push(item.id)
-      })
-      deleteTune({ ids: ids.value }).then(res => {
+  ElMessageBox.confirm("确定要删除吗？", "提示", {
+    type: "warning",
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+  }).then(() => {
+    let ids = ref<number[]>([]);
+    selectedRows.value.forEach((item) => {
+      ids.value.push(item.id);
+    });
+    deleteTune({ ids: ids.value })
+      .then((res) => {
         if (res.data.code === 200) {
-          ElMessage.success(res.data.msg)
+          ElMessage.success(res.data.msg);
           refreshData.value = !refreshData.value;
         } else {
-          ElMessage.error(res.data.msg)
+          ElMessage.error(res.data.msg);
         }
-      }).catch(err => {
-        ElMessage.error("数据传输失败，请检查：", err)
+      })
+      .catch((err) => {
+        ElMessage.error("数据传输失败，请检查：", err);
       });
-    })
-}
+  });
+};
 
 /* // 获取所有的可调优对象
 onMounted(async () => {
@@ -137,39 +153,22 @@ onMounted(async () => {
 </script>
 
 <style lang="less" scoped>
-.top {
-  width: 100%;
-  height: 64px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  &-title {
-    padding-left: 40px;
-    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;
+  flex-direction: column;
+  align-items: center;
   min-width: 100%;
-  height: calc(100% - 64px - 10px);
+  height: calc(100% - 64px - 50px);
+  &-nav {
+    width: 96%;
+    margin: 0 auto;
+    height: 20px;
+    text-align: left;
+  }
 
   .table-container {
     height: 95%;
     width: 98%;
-    border: 2px solid #ddd;
     display: flex;
     flex-direction: column;
     border-radius: 12px;
@@ -182,7 +181,7 @@ onMounted(async () => {
 
   .title {
     height: 30px;
-    background-color: #395a9c;
+    background-color: rgba(96, 122, 207, 0.9);
     color: #fff;
     padding: 10px;
     border-top-left-radius: 10px;
@@ -194,14 +193,6 @@ onMounted(async () => {
 
     .title-content {
       flex: 1;
-
-      &-link {
-        cursor: pointer;
-
-        &:hover {
-          color: #409eff;
-        }
-      }
     }
 
     .delete-button {
diff --git a/atune/web/src/views/taskDetail.vue b/atune/web/src/views/taskDetail.vue
new file mode 100644
index 00000000..5b52e6ee
--- /dev/null
+++ b/atune/web/src/views/taskDetail.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="task_detail shadow">任务详情页面</div>
+</template>
+<script lang="ts" setup></script>
+<style lang="less" scope>
+.task_detail {
+  width: 96%;
+  height: 100%;
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 6px;
+}
+</style>
diff --git a/atune/web/src/views/taskList.vue b/atune/web/src/views/taskList.vue
new file mode 100644
index 00000000..6b70075a
--- /dev/null
+++ b/atune/web/src/views/taskList.vue
@@ -0,0 +1,198 @@
+<template>
+  <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="编号" width="80" />
+      <el-table-column prop="task_name" label="名称" />
+      <el-table-column prop="command" label="命令" />
+      <el-table-column prop="command" label="模板">
+        <template #default="props">
+          <el-link type="primary" @click="atuneDetail"
+            >{{ props.row.command }}
+            <el-icon class="el-icon--right"><icon-view /></el-icon
+          ></el-link>
+        </template>
+      </el-table-column>
+      <el-table-column prop="task_status" label="状态">
+        <template #default="props">
+          <el-progress
+            v-if="props.row.task_status === '执行中'"
+            :percentage="100"
+            :format="format"
+            striped
+            striped-flow
+            :duration="4"
+          />
+          <el-progress
+            v-else-if="props.row.task_status === '已完成'"
+            :percentage="100"
+            status="success"
+            :duration="0"
+          />
+          <el-progress
+            v-else
+            :percentage="0"
+            :format="format"
+            status="exception"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="create_time" label="创建时间" />
+      <el-table-column prop="update_time" label="更新时间" />
+      <el-table-column label="操作" width="80">
+        <template #default="{ row }">
+          <el-button
+            round
+            type="primary"
+            size="small"
+            @click="handleDetail(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 { View as IconView } from "@element-plus/icons-vue";
+import { getTaskLists, searchTune } from "@/api/atune";
+import { Task, Atune } from "@/types/atune";
+
+const tableData = ref([] as Task[]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const totalItems = ref(0);
+const emit = defineEmits(["selectionChange", "taskDetail", "atuneDetail"]);
+
+let props = defineProps({
+  refreshData: {
+    type: Boolean,
+    default: false,
+  },
+  searchTuneName: {
+    type: String,
+    default: "",
+  },
+  searchTune: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// 状态渲染函数
+const format = (percentage: number) => (percentage === 0 ? "error" : "running");
+
+// 获取tune模板列表
+const getTuneListsData = async () => {
+  getTaskLists({ page: currentPage, size: pageSize }).then((res) => {
+    if (res.data.code === 200) {
+      tableData.value = res.data.data;
+      totalItems.value = res.data.total;
+    }
+  });
+};
+
+// 高级搜索tune模板列表
+const searchTuneListsData = () => {
+  searchTune({
+    page: currentPage.value,
+    size: pageSize.value,
+    name: props.searchTuneName,
+  })
+    .then((res) => {
+      tableData.value = res.data.data;
+      totalItems.value = res.data.total;
+    })
+    .catch((error) => {
+      console.error("Error search data:", error);
+    });
+};
+
+// 页码大小
+const handleSizeChange = (newSize: number) => {
+  pageSize.value = newSize;
+  getTuneListsData();
+};
+
+// 页数
+const handleCurrentChange = (newPage: number) => {
+  currentPage.value = newPage;
+  getTuneListsData();
+};
+
+// 查看模板详情
+const atuneDetail = (row: Atune) => {
+  emit("atuneDetail", row);
+};
+
+// 查看任务详情
+const handleDetail = (row: Task) => {
+  emit("taskDetail", row);
+};
+
+// 选中多选框
+const handleSelectionChange = (rows: Task[]) => {
+  emit("selectionChange", rows);
+};
+
+onMounted(() => {
+  getTuneListsData();
+});
+
+watch(
+  () => [props.refreshData, props.searchTune],
+  ([refreshData, searchTune]): void => {
+    if (searchTune !== undefined) {
+      searchTuneListsData();
+    } else if (refreshData !== undefined) {
+      getTuneListsData();
+    }
+  }
+);
+</script>
+
+<style lang="less" scoped>
+.expand-cell {
+  display: flex;
+  flex-direction: column;
+  width: 96%;
+  margin-left: auto;
+}
+
+.note-title {
+  word-wrap: break-word;
+  /* 换行 */
+}
+
+.note-content {
+  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>
-- 
Gitee