diff --git a/public/fonts/huangkaihuaLawyerfont-2.ttf b/public/fonts/huangkaihuaLawyerfont-2.ttf
new file mode 100644
index 0000000..298e682
Binary files /dev/null and b/public/fonts/huangkaihuaLawyerfont-2.ttf differ
diff --git a/public/log.md b/public/log.md
index 6ea9d2e..536bdd8 100644
--- a/public/log.md
+++ b/public/log.md
@@ -2,6 +2,9 @@
 ## 网站更新日志
 
 ---
+### 2025/2/17 22:30 - [v0.0.3] 测试效果
+- 新增留言板 - 基本完成
+
 ### 2025/2/13 16:30 - [v0.0.2] 测试效果
 - 优化布局
 - 优化双端切换逻辑
diff --git a/src/assets/styles/fonts.css b/src/assets/styles/fonts.css
index 2a7166e..6f9f238 100644
--- a/src/assets/styles/fonts.css
+++ b/src/assets/styles/fonts.css
@@ -4,3 +4,9 @@
     font-weight: normal;
     font-style: normal;
 }
+@font-face {
+    font-family: 'huangkaihua';
+    src: url('/fonts/huangkaihuaLawyerfont-2.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
\ No newline at end of file
diff --git a/src/components/Projects_projectBox.vue b/src/components/Projects_box.vue
similarity index 100%
rename from src/components/Projects_projectBox.vue
rename to src/components/Projects_box.vue
diff --git a/src/components/Tools_box.vue b/src/components/Tools_box.vue
index 11b5ba0..ce8ac16 100644
--- a/src/components/Tools_box.vue
+++ b/src/components/Tools_box.vue
@@ -6,30 +6,27 @@ const props = defineProps({
   tool: Object
 });
 
-const imageURL = (r1, r2) => {
-  return `https://picsum.photos/${220 + Math.floor(r1 * 500)}/${220 + Math.floor(r2 * 500)}`;
-};
-
-
-
 const hover = ref(false);
 </script>
 
 <template>
-  <div
-      class="tool-box"
-      @mouseover="hover = true"
-      @mouseleave="hover = false"
-  >
-    <div class="image-container" :style="{background: setRandomBGCL(tool.title)}">
-      <img v-if="tool.image" :src="tool.image" :alt="tool.title"/>
-    </div>
-    <div class="text"><h3>{{ tool.title }}</h3>
-      <p>{{ tool.description }}</p></div>
-    <div class="text-background">
+  <router-link :to="'/tools/'+tool.id">
+    <div
+        class="tool-box"
+        @mouseover="hover = true"
+        @mouseleave="hover = false"
+    >
+      <div class="image-container" :style="{background: setRandomBGCL(tool.title)}">
+        <div class="cover-character">{{ tool.title[0] }}</div>
+        <img v-if="tool.image" :src="tool.image" :alt="tool.title"/>
+      </div>
+      <div class="text"><h3>{{ tool.title }}</h3>
+        <p>{{ tool.description }}</p></div>
+      <div class="text-background">
 
+      </div>
     </div>
-  </div>
+  </router-link>
 </template>
 
 <style scoped>
@@ -59,6 +56,15 @@ const hover = ref(false);
   height: 100%;
 }
 
+.image-container .cover-character {
+  width: 100%;
+  height: 100%;
+  font-size: 200px;;
+  font-family: 'huangkaihua', Tahoma, Geneva, Verdana, sans-serif;
+  color: gray;
+  mix-blend-mode: difference;
+}
+
 .image-container img {
   width: 100%;
   height: 100%;
diff --git a/src/pages/Demos_home.vue b/src/pages/Demos_home.vue
index 9a32a5f..02d2190 100644
--- a/src/pages/Demos_home.vue
+++ b/src/pages/Demos_home.vue
@@ -10,9 +10,8 @@ const demos = ref([
   {
     id: 1,
     name: '留言板',
-    author: ["张三", "李四"],
-    image: getRandomIMG(Math.random(), 0),
-    tags: ['智能养殖', '数据分析', '物联网']
+    author: ["麦克荣", "路易斯周"],
+    tags: ['功能']
   },
 ]);
 
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index e875035..d075bef 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -27,8 +27,9 @@
 }
 .container-pig h1 {
   z-index: 19;
+  font-family: 'huangkaihua', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 80px;
-  font-weight: bold;
+  //font-weight: bold;
   animation: flashColors 0.5s infinite;
 }
 
diff --git a/src/pages/Projects_home.vue b/src/pages/Projects_home.vue
index a7731d3..1381b67 100644
--- a/src/pages/Projects_home.vue
+++ b/src/pages/Projects_home.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import Projects_projectBox from '../components/Projects_projectBox.vue'
+import Projects_projectBox from '../components/Projects_box.vue'
 
 // 搜索输入
 const searchQuery = ref('')
diff --git a/src/pages/Tools_home.vue b/src/pages/Tools_home.vue
index b9a6e1e..790931c 100644
--- a/src/pages/Tools_home.vue
+++ b/src/pages/Tools_home.vue
@@ -1,18 +1,9 @@
 <script setup>
 import { ref } from 'vue';
 import ToolsBox from "../components/Tools_box.vue";
-import {getRandomIMG} from "../utils/randomIMG.js";
 
 const categories = ref([
-  { name: '家猪饲养', active: false },
-  { name: '猪舍管理', active: false },
-  { name: '猪种选择', active: false },
-  { name: '健康管理', active: false },
-  { name: '市场分析', active: false },
-  { name: '饲料管理', active: false },
-  { name: '生产管理', active: false },
-  { name: '智能农业', active: false },
-  { name: '繁殖管理', active: false }
+  { name: '计算', active: false },
 ]);
 
 
@@ -20,26 +11,7 @@ const searchQuery = ref('');
 
 
 const tools = ref([
-  { title: '猪饲料配方推荐', description: '根据不同阶段推荐饲料配方', image: getRandomIMG(Math.random()), category: '家猪饲养' },
-  { title: '猪舍监测工具', description: '帮助管理猪舍环境参数的工具', image: getRandomIMG(Math.random()), category: '猪舍管理' },
-  { title: '优质猪种推荐', description: '提供猪种选择与建议', image: getRandomIMG(Math.random()), category: '猪种选择' },
-  { title: '猪群健康监测', description: '实时监控猪群健康状态', image: getRandomIMG(Math.random()), category: '健康管理' },
-  { title: '猪肉价格分析', description: '提供最新猪肉市场价格数据', image: getRandomIMG(Math.random()), category: '市场分析' },
-  { title: '饲料成本优化', description: '根据不同饲料成本进行优化建议', image: getRandomIMG(Math.random()), category: '饲料管理' },
-  { title: '猪舍通风系统', description: '推荐最佳猪舍通风方案', image: getRandomIMG(Math.random()), category: '猪舍管理' },
-  { title: '疾病预防与疫苗', description: '帮助制定猪群疫苗接种计划', image: getRandomIMG(Math.random()), category: '健康管理' },
-  { title: '生猪生长监控', description: '追踪生猪的生长情况与速度', image: getRandomIMG(Math.random()), category: '生产管理' },
-  { title: '猪只体重跟踪', description: '监控猪只体重的变化情况', image: getRandomIMG(Math.random()), category: '生产管理' },
-  { title: '清洁与消毒工具', description: '提供猪舍清洁和消毒方法建议', image: getRandomIMG(Math.random()), category: '猪舍管理' },
-  { title: '温湿度调控系统', description: '帮助调控猪舍内温湿度的系统', image: getRandomIMG(Math.random()), category: '猪舍管理' },
-  { title: '猪只运动量跟踪', description: '监控猪只的运动量与活动情况', image: getRandomIMG(Math.random()), category: '健康管理' },
-  { title: '猪舍智能喂养', description: '智能化猪舍喂养系统，减少人工干预', image: getRandomIMG(Math.random()), category: '智能农业' },
-  { title: '生猪屠宰信息', description: '实时追踪生猪屠宰信息和数据', image: getRandomIMG(Math.random()), category: '生产管理' },
-  { title: '饲料成分分析', description: '分析饲料中的各种营养成分', image: getRandomIMG(Math.random()), category: '饲料管理' },
-  { title: '猪只健康评估', description: '帮助评估猪只健康状况的工具', image: getRandomIMG(Math.random()), category: '健康管理' },
-  { title: '猪舍自动清理', description: '自动清理猪舍的工具', image: getRandomIMG(Math.random()), category: '猪舍管理' },
-  { title: '猪群繁殖优化', description: '优化猪群繁殖效率的工具', image: getRandomIMG(Math.random()), category: '繁殖管理' },
-  { title: '空气质量监测', description: '监测猪舍空气质量，提供改善建议', image: getRandomIMG(Math.random()), category: '猪舍管理' },
+  { id: 1, title: 'GPA在线计算器', description: '手动输入在线算', image: null, category: ['计算'] },
 ]);
 
 
@@ -55,7 +27,7 @@ const toggleCategory = (category) => {
 
 const filterTools = () => {
   return tools.value.filter(tool => {
-    const matchesCategory = categories.value.some(cat => cat.active && cat.name === tool.category);
+    const matchesCategory = categories.value.some(cat => cat.active && tool.category.includes(cat.name));
     const matchesSearch = tool.title.toLowerCase().includes(searchQuery.value.toLowerCase());
     return (!categories.value.some(cat => cat.active) || matchesCategory) && matchesSearch;
   });
@@ -63,7 +35,7 @@ const filterTools = () => {
 </script>
 
 <template>
-  <div class="container">
+  <div class="container" v-if="$route.path === '/tools'">
     <div class="filters">
       <div class="categories">
         <span
@@ -83,9 +55,11 @@ const filterTools = () => {
           v-for="tool in filterTools()"
           :key="tool.title"
           :tool="tool"
+
       />
     </div>
   </div>
+  <router-view v-else />
 </template>
 
 <style scoped>
diff --git a/src/pages/demoPages/messageBoard/Board_page.vue b/src/pages/demoPages/messageBoard/Board_page.vue
index ee69de8..307bd02 100644
--- a/src/pages/demoPages/messageBoard/Board_page.vue
+++ b/src/pages/demoPages/messageBoard/Board_page.vue
@@ -12,7 +12,7 @@ const amount = ref(store.state.demos.board?.amount || 0);
 const currentPage = ref(store.state.demos.board?.currentPage || 1);
 
 const pageLoading = ref(false);
-const sendCD = ref(store.state.demos.board?.sendCD || 0);
+const sendCD = ref(0);
 
 const userInput = ref('');
 
@@ -54,6 +54,13 @@ async function goPage(page) {
 }
 
 async function sendMessage() {
+  if (sendCD.value !== 0) {
+    return;
+  }
+  if (userInput.value.trim().length === 0) {
+    swal.tip('info', '不得为空')
+    return;
+  }
   sendCD.value = 'wait';
   try {
     const response = await api.post('/postmessage', {
@@ -66,6 +73,7 @@ async function sendMessage() {
     }
     userInput.value = '';
     sendCD.value = 5;
+    store.commit('setDemoValue', {demo: 'board', value: { sendCD: sendCD.value }});
     await refreshBoard();
     return;
   } catch {
@@ -74,6 +82,14 @@ async function sendMessage() {
   sendCD.value = 0;
 }
 
+async function clickRefresh() {
+  pageLoading.value = true;
+  if (await refreshBoard() !== 0) {
+    swal.tip('error', '刷新失败');
+  }
+  pageLoading.value = false;
+}
+
 let interval = null; // 定时器引用
 function startCountdown() {
   if (interval) clearInterval(interval); // 避免重复创建定时器
@@ -81,6 +97,7 @@ function startCountdown() {
   interval = setInterval(() => {
     if (sendCD.value > 0) {
       sendCD.value--;
+      store.commit('setDemoValue', {demo: 'board', value: { sendCD: sendCD.value }});
     } else {
       clearInterval(interval);
       interval = null;
@@ -96,6 +113,7 @@ watch(sendCD, (newValue) => {
 });
 
 onMounted(async () => {
+  sendCD.value = store.state.demos.board?.sendCD;
   await refreshBoard();
 })
 
@@ -112,7 +130,7 @@ onMounted(async () => {
         <div class="page-btn" :class="{active: currentPage === 1}" @click="goPage(1)">1</div>
         <span v-if="currentPage > 5">...</span>
         <div class="page-btn" v-for="index in ((a, b) => Array.from({ length: b - a + 1 }, (_, i) => a + i))
-             (currentPage>4?(currentPage - 3):2, currentPage<amount-4?(currentPage + 3):amount-1)"
+             (currentPage>4?(currentPage - 3):2, currentPage<amount-4?(currentPage + 4):amount-1)"
              @click="goPage(index)" :class="{active: currentPage === index}">{{ index }}
         </div>
         <span v-if="currentPage < amount - 5">...</span>
@@ -127,12 +145,14 @@ onMounted(async () => {
           <div><{{ store.state.userInfo.role_id === 1 ? '管理员' : '普通用户' }}></div>
         </div>
         <div class="refresh-btn">
-          <button @click="refreshBoard()">刷新</button>
+          <button @click="clickRefresh">刷新</button>
         </div>
       </div>
       <div class="sender-input">
-        <input class="message-input" v-model="userInput">
-        <button class="send-button" @click="sendMessage" :disabled="sendCD !== 0">{{ sendCD === 0 ? '发送' : sendCD === 'wait' ? '稍等' : `${sendCD} 秒` }}</button>
+        <input class="message-input" v-model="userInput" @keydown.enter="sendMessage">
+        <button class="send-button" @click="sendMessage" :disabled="sendCD !== 0">
+          {{ sendCD === 0 ? '发送' : sendCD === 'wait' ? '稍等' : `${sendCD} 秒` }}
+        </button>
       </div>
 
     </div>
@@ -199,11 +219,21 @@ onMounted(async () => {
   border: cyan solid 1px;
 }
 
+.theme-light .page-btn {
+  background-color: white;
+  border: #b2b2b2 solid 1px;
+}
+
 .page-btn.active {
   background: cyan;
   color: black;
 }
 
+.theme-light .page-btn.active {
+  background: #2a2a2a;
+  color: white;
+}
+
 .sender-container {
   margin: 20px;
   background-color: #212121;
@@ -220,6 +250,11 @@ onMounted(async () => {
   overflow: hidden;
 }
 
+.theme-light .sender-container {
+  background-color: white;
+  border: #b2b2b2 solid 1px;
+}
+
 .sender-tips {
   display: flex;
   flex-direction: row;
@@ -236,6 +271,7 @@ onMounted(async () => {
 
 .sender-tips .text {
   display: flex;
+
   flex-direction: column;
 }
 
@@ -249,8 +285,16 @@ onMounted(async () => {
 .refresh-btn button {
   background-color: #4f4f4f;
   color: cyan;
-  padding: 5px;
-  border-radius: 5px;
+  width: 50px;
+  height: 50px;
+  margin: 15px 0 0 15px;
+  border-radius: 50%;
+}
+
+.theme-light .refresh-btn button {
+  background-color: white;
+  color: #1a1a1a;
+  border: #1a1a1a solid 1px;
 }
 
 .sender-input {
@@ -283,11 +327,21 @@ onMounted(async () => {
   cursor: pointer;
   transition: all 0.3s ease;
 }
+
+.theme-light .send-button {
+  color: #1a1a1a;
+  background-color: #ffb74d;
+}
+
 /* 鼠标悬停时的按钮样式 */
 .send-button:hover {
   background-color: #0056b3;
 }
 
+.theme-light .send-button:hover {
+  background-color: #ffb74d;
+}
+
 .send-button:active {
   transform: scale(0.95);
 }
diff --git a/src/pages/demoPages/messageBoard/Message.vue b/src/pages/demoPages/messageBoard/Message.vue
index 012baf7..2c97d06 100644
--- a/src/pages/demoPages/messageBoard/Message.vue
+++ b/src/pages/demoPages/messageBoard/Message.vue
@@ -5,6 +5,7 @@ import swal from "../../../utils/sweetalert.js";
 import store from "../../../store/index.js";
 import api from "../../../utils/axios.js";
 import AuthService from "../../../../services/auth.js";
+import {getDomain} from "../../../utils/getDomain.js";
 
 defineProps({
   message: Object,
@@ -32,7 +33,7 @@ async function deleteMessage(id, message) {
 <template>
   <div class="message">
     <div class="avatar" :style="{ background: setRandomBGCL }">
-      <img alt="Profile">
+      <img :src=" `https://${getDomain()}/data/user/profile/` + message.profile" alt="Profile">
     </div>
     <div class="details">
       <div class="userinfo">
diff --git a/src/pages/toolPages/gpaCalculator/gpaCalculator_page.vue b/src/pages/toolPages/gpaCalculator/gpaCalculator_page.vue
new file mode 100644
index 0000000..aade52a
--- /dev/null
+++ b/src/pages/toolPages/gpaCalculator/gpaCalculator_page.vue
@@ -0,0 +1,170 @@
+<script setup>
+import {onMounted, ref} from "vue";
+import swal from "../../../utils/sweetalert.js";
+import store from "../../../store/index.js";
+
+const grade = ["A+", "A", "A-", "B+", "B", "B-", "C+", "C", "C-", "D+", "D", "D-", "F"];
+const c = [
+  [4, 4, 3.7, 3.3, 3, 2.7, 2.3, 2, 1.7, 1.3, 1, 0.7, 0],
+  [4.5, 4.5, 4.2, 3.8, 3.5, 3.2, 2.8, 2.5, 2.2, 1.8, 1.5, 1.2, 0],
+  [4.8, 4.8, 4.5, 4.1, 3.8, 3.5, 3.1, 2.8, 2.5, 1.8, 1.8, 1.8, 0]
+];
+
+const lessons = ref([]);
+
+const addGroup = () => {
+  lessons.value.push({selectIndex:0, choiceValue:0});
+  console.log(lessons.value)
+};
+
+const removeGroup = (index) => {
+  lessons.value.splice(index, 1);
+};
+
+const generateResult = () => {
+  return lessons.value.map(group => [group.selectIndex, group.choiceValue]);
+};
+
+const saveResultToLocalStorage = () => {
+  const result = generateResult();
+  store.commit('setDemoValue', {demo: 'gpa', value: {groups: result}})
+  start(result);
+};
+
+const start = (l) => {
+  let gpa = 0;
+  for (let i = 0; i < l.length; i++) {
+    gpa += c[l[i][1]][l[i][0]];
+  }
+  gpa /= l.length;
+  gpa = gpa.toString().length > 4 ? gpa.toFixed(2) : gpa;
+  swal.window('info', '计算结果', `GPA: ${gpa}`, 'ok', '好的')
+};
+
+
+onMounted(() => {
+  const groupsData = store.state.demos.gpa?.groups;
+  if (groupsData?.length > 0) {
+    lessons.value = groupsData.map(data => ({selectIndex: data[0], choiceValue: data[1]}));
+  } else {
+    addGroup();
+  }
+})
+</script>
+
+<template>
+  <div class="container">
+    <div class="title">GPA计算器</div>
+    <div class="calculator-container">
+      <button class="btn" @click="addGroup">+</button>
+      <div v-for="(lesson, index) in lessons" :key="index" class="group">
+        <select v-model="lesson.selectIndex">
+          <option v-for="(item, idx) in grade" :key="idx" :value="idx">{{ item }}</option>
+        </select>
+
+        <label>
+          <input type="radio" v-model="lesson.choiceValue" value="0"/> Regular
+        </label>
+        <label>
+          <input type="radio" v-model="lesson.choiceValue" value="1"/> Honor
+        </label>
+        <label>
+          <input type="radio" v-model="lesson.choiceValue" value="2"/> AP
+        </label>
+
+
+        <button v-if="lessons.length > 1" class="btn" @click="removeGroup(index)">-</button>
+      </div>
+
+      <button class="generate" @click="saveResultToLocalStorage">计算</button>
+    </div>
+    <div class="bottom-text">
+      计算结果仅供参考, 请以实际分数为准
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.calculator-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 80%;
+  margin-top: 20px;
+}
+
+.group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+
+.title {
+  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+  font-size: 75px;
+  color: rgb(255, 255, 255);
+  text-align: center;
+  padding: 10px;
+  margin-top: 20px;
+}
+
+.theme-light .title {
+  color: #252525;
+}
+
+.generate {
+  background-color: forestgreen;
+  color: aliceblue;
+  width: 60px;
+  height: 30px;
+  border-radius: 5px;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s;
+}
+
+.generate:hover {
+  background-color: rgb(27, 169, 27);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.bottom-text {
+  margin-bottom: 5px;
+  font-weight: bold;
+  color: whitesmoke;
+  position: absolute;
+  bottom: 0;
+}
+
+.theme-light .bottom-text {
+  color: #484848;
+}
+
+.btn {
+  border: cyan solid 1px;
+  color: cyan;
+  width: 30px;
+  height: 30px;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  margin-left: 10px;
+}
+.theme-light .btn {
+  background-color: #ffffff;
+  border: black solid 1px;
+  color: black;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index ba125ab..ed6ae40 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,6 +15,7 @@ import Projects from "../pages/Projects_home.vue";
 import Demos_home from "../pages/Demos_home.vue";
 import Board_page from "../pages/demoPages/messageBoard/Board_page.vue";
 import Tools_home from "../pages/Tools_home.vue";
+import GpaCalculator_page from "../pages/toolPages/gpaCalculator/gpaCalculator_page.vue";
 import About from "../pages/About.vue";
 
 const routes = [
@@ -45,7 +46,11 @@ const routes = [
     }, {
         path: '/tools',
         name: 'Tools',
-        component: Tools_home
+        component: Tools_home,
+        children: [
+            {path: "1", component: GpaCalculator_page},
+            {path: "gpa", component: GpaCalculator_page},
+        ]
     }, {
         path: '/about',
         name: 'About',