diff --git a/src/前端/walktofree/src/pages/Communication.vue b/src/前端/walktofree/src/pages/Communication.vue
index 5626e2c..03488e0 100644
--- a/src/前端/walktofree/src/pages/Communication.vue
+++ b/src/前端/walktofree/src/pages/Communication.vue
@@ -14,10 +14,12 @@
       </div>
     </div>
   </div>
+  <div><NavigationBar /></div>
 </template>
 
 <script>
 import axios from 'axios';
+import NavigationBar from '../components/NavigationBar.vue';
 
 export default {
   data() {
@@ -26,6 +28,9 @@ export default {
       newMessage: '',
     };
   },
+  components: {
+      NavigationBar
+  },
   methods: {
     async fetchMessages() {
       try {
diff --git a/src/前端/walktofree/src/pages/EvaluationEdit.vue b/src/前端/walktofree/src/pages/EvaluationEdit.vue
new file mode 100644
index 0000000..1b42ac9
--- /dev/null
+++ b/src/前端/walktofree/src/pages/EvaluationEdit.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="user-feedback">
+    <!-- 输入评价 -->
+    <div class="feedback-input">
+      <h2>修改你的评价</h2>
+      <form>
+        <textarea id="ebody" v-model.trim="evaluation.ebody" rows="4" cols="50"></textarea>
+        <button type="submit" @click="send">发布评价</button>
+      </form>
+    </div>
+    <el-space direction="vertical">
+      <el-row>
+        <el-text>星级评价</el-text>
+        <el-rate class="ml-1"
+                 v-model="evaluation.satisfaction"
+                 :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
+                 show-text
+                 @change="handleRateChange"
+                 clearable />
+      </el-row>
+    </el-space>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  data() {
+    return {
+      ebody: '',
+      satisfaction:'',
+      ct:'',
+      eid: 1, // 添加一个用于存储 eid 的变量
+      evaluation: {}, // 添加一个用于存储评价信息的变量
+    };
+  },
+  methods: {
+    send() {
+      axios.post('http://106.52.218.118:8081/evaluate/editEvaluation', {
+        eid: this.eid, // 将 eid 包含在请求中
+        satisfaction: this.evaluation.satisfaction,
+        ct:this.evaluation.ct,
+        ebody: this.evaluation.ebody,
+      }, {
+        withCredentials: true,
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }).then(response => {
+        // 处理成功发送评价的情况
+        console.log('评价发送成功');
+      }).catch(error => {
+        // 处理发送评价失败的情况
+        console.error('评价发送失败', error);
+      });
+    },
+    fetchEvaluation() {
+      axios.get(`http://106.52.218.118:8081/evaluate/getEvaluation?eid=${this.eid}`)
+          .then(response => {
+            this.evaluation = response.data;// 将获取到的评价信息存储到 evaluation 变量中
+          })
+          .catch(error => {
+            console.error('获取评价信息失败', error);
+          });
+    },
+    handleRateChange(satisfaction) {
+      this.evaluation.satisfaction = satisfaction; // 更新星级值
+    }
+  },
+  mounted() {
+    this.fetchEvaluation(); // 在组件挂载时调用 fetchEvaluation 方法获取评价信息
+  }
+};
+</script>
+
+<style scoped>
+.user-feedback {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.feedback-input {
+  margin-bottom: 20px;
+}
+
+textarea {
+  width: 100%;
+  padding: 8px;
+  font-size: 16px;
+  border: 1px solid #28a7a3;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+button {
+  padding: 8px 16px;
+  font-size: 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: #007bff;
+  color: #003f3f;
+  cursor: pointer;
+}
+
+.submitted-feedback {
+  border-top: 1px solid #a6cfee;
+  padding-top: 20px;
+}
+
+.feedback-item {
+  background-color: #abd4ee;
+  border: 1px solid #c2f1fb;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+.feedback-item p {
+  margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/前端/walktofree/src/pages/EvaluationHistory.vue b/src/前端/walktofree/src/pages/EvaluationHistory.vue
new file mode 100644
index 0000000..f79cdd8
--- /dev/null
+++ b/src/前端/walktofree/src/pages/EvaluationHistory.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/前端/walktofree/src/pages/EvaluationList.vue b/src/前端/walktofree/src/pages/EvaluationList.vue
new file mode 100644
index 0000000..f5d9a2e
--- /dev/null
+++ b/src/前端/walktofree/src/pages/EvaluationList.vue
@@ -0,0 +1,47 @@
+<template>
+  <el-button @click="add">Add Item</el-button>
+  <el-button @click="onDelete">Delete Item</el-button>
+  <el-scrollbar max-height="800px">
+    <p v-for="item in count" :key="item" class="scrollbar-demo-item">
+      {{ item }}
+    </p>
+    <p v-for="review in reviews" :key="review.id" class="scrollbar-demo-item">
+      {{ review.content }}
+    </p>
+  </el-scrollbar>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+
+const count = ref(3)
+const reviews = ref([
+  { id: 1, content: 'Great product!' },
+  { id: 2, content: 'Fast shipping!' },
+  { id: 3, content: 'Excellent customer service!' }
+])
+
+const add = () => {
+  count.value++
+}
+const onDelete = () => {
+  if (count.value > 0) {
+    count.value--
+  }
+}
+</script>
+
+<style scoped>
+.scrollbar-demo-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  margin: 10px;
+  text-align: center;
+  border-radius: 4px;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+}
+</style>
\ No newline at end of file