diff --git a/src/App.vue b/src/App.vue
index 6a3a9ac..7d9651b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,36 +12,54 @@ const activeMenu = computed(() => route.path)
   <el-container class="admin-shell">
     <el-aside width="151px" class="admin-aside">
       <el-menu class="admin-menu" :default-active="activeMenu" router>
-        
+
         <el-sub-menu index="coach">
           <template #title>
-            <el-icon><Grid /></el-icon>
+            <el-icon>
+              <Grid />
+            </el-icon>
             <span>教练管理</span>
           </template>
           <el-menu-item index="/coach">
-            <el-icon><Link /></el-icon>
+            <el-icon>
+              <Link />
+            </el-icon>
             <span>教练列表</span>
           </el-menu-item>
+          <el-menu-item index="/addcoach">
+            <el-icon>
+              <Link />
+            </el-icon>
+            <span>教练新增</span>
+          </el-menu-item>
         </el-sub-menu>
 
         <el-sub-menu index="member">
           <template #title>
-            <el-icon><Grid /></el-icon>
+            <el-icon>
+              <Grid />
+            </el-icon>
             <span>会员管理</span>
           </template>
           <el-menu-item index="/member">
-            <el-icon><Link /></el-icon>
+            <el-icon>
+              <Link />
+            </el-icon>
             <span>会员列表</span>
           </el-menu-item>
         </el-sub-menu>
 
         <el-sub-menu index="course">
           <template #title>
-            <el-icon><Grid /></el-icon>
+            <el-icon>
+              <Grid />
+            </el-icon>
             <span>课程管理</span>
           </template>
           <el-menu-item index="/course">
-            <el-icon><Link /></el-icon>
+            <el-icon>
+              <Link />
+            </el-icon>
             <span>课程列表</span>
           </el-menu-item>
         </el-sub-menu>
@@ -133,7 +151,7 @@ const activeMenu = computed(() => route.path)
   background: #ffffff;
 }
 
-.el-main{
+.el-main {
   display: flex;
 }
 </style>
diff --git a/src/mock/coach.js b/src/mock/coach.js
index 59ea4f7..97b1c7f 100644
--- a/src/mock/coach.js
+++ b/src/mock/coach.js
@@ -44,4 +44,15 @@ export const getByPage = (query) => {
     })
     const start = (page - 1) * limit
     return { total: result.length, data: result.slice(start, start + limit) }
-}
\ No newline at end of file
+}
+
+// 离职
+export const quit = (id) => {
+    const target = list.find(item => item.id === id)
+    target.quitDate = new Date().toLocaleDateString()
+}
+// 复职
+export const rejoin = (id) => {
+    const target = list.find(item => item.id === id)
+    target.quitDate = null
+}
diff --git a/src/router/index.js b/src/router/index.js
index 4e1dd8e..60c5fe9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,4 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import CoachView from '../views/CoachView.vue'
-import MemberView from '../views/MemberView.vue'
-import CourseView from '../views/CourseView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -12,18 +9,19 @@ const router = createRouter({
     },
     {
       path: '/coach',
-      name: 'coach',
-      component: CoachView,
+      component: ()=>import('../views/CoachView.vue'),
     },
     {
       path: '/member',
-      name: 'member',
-      component: MemberView,
+      component: ()=>import('../views/MemberView.vue'),
     },
     {
       path: '/course',
-      name: 'course',
-      component: CourseView,
+      component: ()=>import('../views/CourseView.vue'),
+    },
+    {
+      path: '/addcoach',
+      component: ()=>import('../views/AddCoachView.vue'),
     },
   ],
 })
diff --git a/src/views/AddCoachView.vue b/src/views/AddCoachView.vue
new file mode 100644
index 0000000..a8a9308
--- /dev/null
+++ b/src/views/AddCoachView.vue
@@ -0,0 +1,44 @@
+<script setup>
+import { reactive } from 'vue'
+const coach = reactive({
+    name: " ",
+    sex: 1,
+    //avater:""
+    remark: ""
+})
+
+</script>
+
+
+<template>
+    <el-form label-width="100px" label-position="left">
+        <h2 class="title">——新增教练——</h2>
+        <el-form-item label="教练名字">
+            <el-input placeholder="请输入.." v-model.trim="coach.name"></el-input>
+        </el-form-item>
+        <el-form-item label="性别：">
+            <el-radio-group v-model="coach.sex">
+                <el-radio :value="1">男</el-radio>
+                <el-radio :value="2">女</el-radio>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注">
+            <el-input v-model.trim="coach.remark" type="textarea" :rows="5" placeholder="请输入教练备注..."></el-input>
+        </el-form-item>
+        <el-form-item>
+            <el-button type="primary">确定</el-button>
+            <el-button>取消</el-button>
+        </el-form-item>
+
+
+    </el-form>
+</template>
+
+
+<style scoped>
+.title {
+    text-align: center;
+    margin-bottom: 30px;
+    color: #333;
+}
+</style>
diff --git a/src/views/CoachView.vue b/src/views/CoachView.vue
index f31279e..dcb96ad 100644
--- a/src/views/CoachView.vue
+++ b/src/views/CoachView.vue
@@ -25,10 +25,13 @@
 
         <el-form-item>
           <el-button type="warning" native-type='submit' :icon="Search">查询</el-button>
+          <el-button type="primary" :icon="Plus" @click="$router.push('/addcoach')">新增</el-button>
+
         </el-form-item>
       </el-form>
     </el-header>
-    <el-main><!-- 表单 -->
+    <el-main>
+      <!-- 表单 -->
       <el-table border :data="coachList">
         <el-table-column type="index" label="序号" width="60" align="center" :index="indexMethod"></el-table-column>
         <el-table-column prop="name" label="教练名字" width="100" align="center"></el-table-column>
@@ -74,8 +77,9 @@
         <!-- 操作 -->
         <el-table-column label="操作" width="120">
           <template #default="scope">
-            <el-button :icon="Delete" type="danger" size="small" v-if="scope.row.quitDate">删除</el-button>
-            <el-button :icon="Mug" type="warning" size="small" v-else>复职</el-button>
+            <el-button :icon="Delete" type="danger" size="small" v-if="scope.row.quitDate"
+              @click="rejoinHandler(scope.row)">复职</el-button>
+            <el-button :icon="Mug" type="warning" size="small" v-else @click="quitHandler(scope.row)">离职</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -93,8 +97,9 @@
 
 
 <script lang="ts" setup>
-import { getByPage } from '@/mock/coach';
-import { Delete, Mug, Search } from '@element-plus/icons-vue';
+import { getByPage, quit, rejoin } from '@/mock/coach';
+import { Delete, Mug, Plus, Search } from '@element-plus/icons-vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
 import { reactive, ref, onMounted, shallowRef } from 'vue';
 
 const queryModel = reactive({
@@ -129,6 +134,27 @@ const indexMethod = (index: number) => {
   return (pageInfo.page - 1) * pageInfo.limit + index + 1;
 }
 
+// 离职
+const quitHandler = (coach: any) => {
+  ElMessageBox.confirm(`你确认要让教练 "${coach.name}" 离职吗?`, "警告", { type: "warning" })
+    .then(() => {
+      quit(coach.id)
+      ElMessage({ type: 'success', message: `教练 "${coach.name}" 离职成功!` })
+      query()
+    })
+    .catch(() => { })
+}
+
+// 复职
+const rejoinHandler = (coach: any) => {
+  ElMessageBox.confirm(`你确认要让教练 "${coach.name}" 复职吗?`, "警告", { type: "warning" })
+    .then(() => {
+      rejoin(coach.id)
+      ElMessage({ type: 'success', message: `教练 "${coach.name}" 复职成功!` })
+      query()
+    })
+    .catch(() => { })
+}
 </script>