修改代码，使Aside区的预约挂号改名为挂号记录，并且跳转后为我的预约记录界面

为了将 `Aside` 区的 “预约挂号” 改名为 “挂号记录”，并使其跳转到 “我的预约记录” 界面，你需要对以下几个文件进行修改：

### 1. 修改 `Src/App.vue`

找到 `Aside` 区中的相关代码，并将其改为 “挂号记录”。

<template>
  <div id="app">
    <el-container>
      <el-header>预约挂号</el-header>
      <el-container>
        <el-aside width="200px" style="position: fixed;z-index: 1;">
          <el-menu>
            <el-menu-item index="1" @click="$router.push('/home')">首页</el-menu-item>
            <el-menu-item index="2" @click="$router.push('/login')">用户登录</el-menu-item>
            <el-menu-item index="3" @click="$router.push('/register')">用户注册</el-menu-item>
            <el-menu-item index="4" @click="$router.push('/appointments')">挂号记录</el-menu-item> <!-- 修改这里 -->
            <el-menu-item index="5" @click="$router.push('/doctors')">医生列表</el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
      <el-footer>
        <div style="display: flex; justify-content: space-between;">
          <span>地址：x市南泉路</span>
          <span>联系电话：123456780</span>
          <span id="dynamic-clock"></span>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    this.updateClock();
    setInterval(this.updateClock, 1000);
  },
  methods: {
    updateClock() {
      const now = new Date();
      const timeString = now.toLocaleTimeString();
      const dateString = now.toDateString();
      document.getElementById('dynamic-clock').innerText = `${dateString} ${timeString}`;
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  position:fixed;
  top:60px;
  bottom: 60px;
  left:0;
  width: 250px;
  height:100%;
  overflow-y:auto ;
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  z-index: 1;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  padding: 20px;
  margin-left: 200px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

### 2. 检查 `Src/router/index.js`

确保 `/appointments` 路由已经定义并且指向 `AppointmentList` 组件。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../components/Home.vue';
import Login from '../components/Login.vue';
import Register from '../components/Register.vue';
import DoctorList from '../components/DoctorList.vue';
import AppointmentForm from '../components/AppointmentForm.vue';
import AppointmentList from '../components/AppointmentList.vue';

Vue.use(Router);

export default new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/home', component: Home },
    { path: '/login', component: Login },
    { path: '/register', component: Register },
    { path: '/doctors', component: DoctorList },
    { path: '/appointment/:doctorId', component: AppointmentForm },
    { path: '/appointments', component: AppointmentList } // 确保这个路由存在
  ]
});

### 3. 检查 `Src/components/AppointmentList.vue`

确保 `AppointmentList` 组件已经正确实现。

<template>
  <div class="appointment-list-container">
    <h2>我的预约记录</h2>
    <el-table :data="appointments" stripe>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="phone" label="联系电话"></el-table-column>
      <el-table-column prop="date" label="预约时间"></el-table-column>
      <el-table-column prop="doctorid" label="医生证号"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  computed: {
    appointments() {
      return this.$store.state.appointments;
    }
  }
};
</script>

<style scoped>
.appointment-list-container {
  padding: 20px;
}
</style>

完成以上步骤后，点击侧边栏的 “挂号记录” 将会跳转到 “我的预约记录” 界面。