完成留言板

2025-02-18 15:31:25 +08:00 · 2025-02-18 15:31:25 +08:00 · 380740b1f2
commit 380740b1f2
parent 4590b3b787
13 changed files with 283 additions and 64 deletions
--- a/public/fonts/huangkaihuaLawyerfont-2.ttf
+++ b/public/fonts/huangkaihuaLawyerfont-2.ttf
--- 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] 测试效果
 - 优化布局
 - 优化双端切换逻辑
--- 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;
+}
--- a/src/components/Projects_projectBox.vue
+++ b/src/components/Projects_projectBox.vue
--- 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%;
--- 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: ['功能']
  },
 ]);

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

--- 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('')
--- 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>
--- 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);
 }
--- 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">
--- a/src/pages/toolPages/gpaCalculator/gpaCalculator_page.vue
+++ 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>
--- 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',