请解读文档，根据提供代码，修改完善后提供给我完整的web前端项目（预约挂号系统）的VSCode代码。DoctorList界面每个医生都需要配图，请给我标识出来，我会自行添加。适当美化项目

好的，我将帮助你整理并完善这个预约挂号系统的代码。以下是整个项目的结构和各文件的具体内容：

### 项目结构

- src/
  - assets/
    - images/
      - AppointmentForm.vue
    - AppointmentList.vue
    - DoctorCard.vue
    - DoctorList.vue
    - Login.vue
    - Register.vue
  - router/
    - index.js
  - store/
    - index.js
  - App.vue
  - main.js
- public/
  - index.html
- package.json

### 文件内容

#### `src/assets/images/`
请在这个目录下放置每个医生的照片，例如 `doctor1.jpg`, `doctor2.jpg` 等。

#### `src/components/AppointmentForm.vue`

<template>
  <div class="appointment-form-container">
    <h2>预约挂号</h2>
    <el-form @submit.native.prevent="handleSubmit">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="form.gender" placeholder="请选择性别">
          <el-option label="男" value="male"></el-option>
          <el-option label="女" value="female"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model.number="form.age"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="预约时间">
        <el-date-picker v-model="form.date" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-button type="primary" native-type="submit">提交</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        gender: '',
        age: '',
        phone: '',
        date: ''
      }
    };
  },
  methods: {
    handleSubmit() {
      const appointment = { ...this.form, doctorId: this.$route.params.doctorId };
      this.$store.dispatch('createAppointment', appointment);
      this.$router.push('/appointments');
    }
  }
};
</script>

<style scoped>
.appointment-form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.box-card {
  width: 400px;
}
</style>

#### `src/components/AppointmentList.vue`

<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>

#### `src/components/DoctorCard.vue`

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>{{ doctor.name }}</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="viewDetails">查看详情</el-button>
    </div>
    <img :src="getDoctorImage(doctor.id)" alt="医生照片" style="width: 100%; max-height: 200px; object-fit: cover;">
    <p><strong>科室:</strong>{{ doctor.specialty }}</p>
    <p><strong>擅长:</strong>{{ doctor.expertise }}</p>
    <p><strong>排班:</strong>{{ doctor.schedule.join(', ') }}</p>
  </el-card>
</template>

<script>
export default {
  props: {
    doctor: Object
  },
  methods: {
    viewDetails() {
      this.$router.push(`/appointment/${this.doctor.id}`);
    },
    getDoctorImage(id) {
      return require(`@/assets/images/doctor${id}.jpg`);
    }
  }
};
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}
</style>

#### `src/components/DoctorList.vue`

<template>
  <div class="doctor-list-container">
    <h2>医生列表</h2>
    <el-row :gutter="20">
      <el-col :span="8" v-for="doctor in doctors" :key="doctor.id">
        <DoctorCard :doctor="doctor" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DoctorCard from './DoctorCard.vue';

export default {
  components: {
    DoctorCard
  },
  data() {
    return {
      doctors: [
        { id: 1001, name: '刘梓豪', specialty: '心血管科', expertise: '高血压', schedule: ['周一上午', '周三上午'] },
        { id: 1002, name: '杨人杰', specialty: '精神科', expertise: '儿童青少年心理', schedule: ['周二下午', '周四上午'] },
        { id: 1003, name: '杨晓逸', specialty: '营养科', expertise: '临床营养', schedule: ['周二上午', '周五下午'] },
        { id: 1004, name: '郑豪', specialty: '肝脏内科', expertise: '肾脏内科', schedule: ['周三下午', '周四下午'] },
        { id: 1005, name: '张洋', specialty: '呼吸内科', expertise: '戒烟', schedule: ['周一上午', '周二上午'] },
        { id: 1006, name: '左咏梅', specialty: '皮肤科', expertise: '皮肤管理', schedule: ['周三下午', '周五上午'] },
        { id: 1007, name: '刘帅', specialty: '神经外科', expertise: '脊椎病', schedule: ['周二下午', '周四上午'] },
        { id: 1008, name: '李斌', specialty: '耳鼻喉科', expertise: '耳鼻喉', schedule: ['周三上午', '周五上午'] }
      ]
    };
  }
};
</script>

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

#### `src/components/Login.vue`

<template>
  <div class="login-container">
    <el-card class="box-card">
      <h2>登录</h2>
      <el-form @submit.native.prevent="handleLogin">
        <el-form-item label="用户名">
          <el-input v-model="username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="password"></el-input>
        </el-form-item>
        <el-button type="primary" native-type="submit">登录</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleLogin() {
      const user = { username: this.username, password: this.password };
      this.$store.dispatch('login', user);
      this.$router.push('/doctors');
    }
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.box-card {
  width: 400px;
}
</style>

#### `src/components/Register.vue`

<template>
  <div class="register-container">
    <el-card class="box-card">
      <h2>注册</h2>
      <el-form @submit.native.prevent="handleRegister">
        <el-form-item label="用户名">
          <el-input v-model="username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="password"></el-input>
        </el-form-item>
        <el-button type="primary" native-type="submit">注册</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleRegister() {
      const user = { username: this.username, password: this.password };
      this.$store.dispatch('register', user);
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.box-card {
  width: 400px;
}
</style>

#### `src/router/index.js`

import Vue from 'vue';
import Router from 'vue-router';
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: '/login', component: Login },
    { path: '/register', component: Register },
    { path: '/doctors', component: DoctorList },
    { path: '/appointment/:doctorId', component: AppointmentForm },
    { path: '/appointments', component: AppointmentList }
  ]
});

#### `src/store/index.js`

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
    appointments: []
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    addAppointment(state, appointment) {
      state.appointments.push(appointment);
    }
  },
  actions: {
    login({ commit }, user) {
      commit('setUser', user);
    },
    register({ commit }, user) {
      commit('setUser', user);
    },
    createAppointment({ commit }, appointment) {
      commit('addAppointment', appointment);
    }
  }
});

#### `src/App.vue`

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

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

body {
  margin: 0;
  font-family: Arial, sans-serif;
}
</style>

#### `src/main.js`

import Vue from 'vue';
import App from './App';
import router from './router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false;
Vue.use(ElementUI);

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

#### `public/index.html`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>预约挂号系统</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

#### `package.json`

{
  "name": "last",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "ll",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "element-ui": "^2.15.14",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^10.1.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

以上是整个项目的完整代码。请将这些文件放在相应的目录中，并确保 `src/assets/images/` 目录中有每个医生的照片文件。你可以根据需要进一步美化项目，例如调整样式、增加动画效果等。希望这对你有帮助！