存个档，要改属性名字了

demos -> demosLocal
2025-02-24 15:52:56 +08:00 · 2025-02-24 15:52:56 +08:00 · bf53bd8bb9
commit bf53bd8bb9
parent 7101c71b70
7 changed files with 159 additions and 35 deletions
--- a/src/components/Like_button.vue
+++ b/src/components/Like_button.vue
@ -0,0 +1,91 @@
+<script setup>
+import {onMounted, ref, watch} from "vue";
+
+const props = defineProps({
+  active: {
+    type: Boolean,
+    required: true
+  },
+  amount: {
+    type: Number,
+    required: true
+  },
+  toggleFunc: {
+    type: Function,
+    required: false
+  }
+});
+
+const alterActive = ref(props.active);
+const alterAmount = ref(props.amount);
+
+const clickFunc = async () => {
+  setTimeout(async () => {
+    if (alterActive.value === null) {
+      alterActive.value = !props.active;
+    } else {
+      alterActive.value = !alterActive.value;
+    }
+    if (alterActive.value) {
+      alterAmount.value = props.amount + 1;
+    } else {
+      alterAmount.value = props.amount - 1;
+    }
+    if (alterActive.value === props.active) {
+      alterAmount.value = props.amount;
+    }
+    if (props.toggleFunc) {
+      await props.toggleFunc();
+    }
+
+  })
+}
+
+watch(() => props.amount, () => {
+  alterActive.value = props.active;
+  alterAmount.value = props.amount;
+})
+</script>
+
+<template>
+  <label class="like">
+    <button @click="clickFunc">
+      <svg v-if="!(alterActive)" xmlns="http://www.w3.org/2000/svg"
+           xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"
+           width="16" height="16">
+        <path
+            d="M9.283433333333333 2.0303066666666663C9.095466666666667 2.0083933333333333 8.921333333333333 2.09014 8.828166666666666 2.1991199999999997C8.424633333333333 2.6711333333333336 8.332133333333333 3.3649466666666665 8.029333333333334 3.9012466666666663C7.630633333333333 4.607453333333333 7.258833333333333 5.034486666666666 6.800866666666666 5.436006666666666C6.42382 5.7665733333333336 6.042199999999999 5.987959999999999 5.666666666666666 6.09112L5.666666666666666 13.1497C6.19062 13.1611 6.751966666666666 13.168333333333333 7.333333333333333 13.168333333333333C8.831233333333333 13.168333333333333 10.1019 13.120766666666665 10.958166666666665 13.076699999999999C11.565133333333332 13.045433333333332 12.091966666666666 12.7451 12.366466666666668 12.256733333333333C12.7516 11.571599999999998 13.2264 10.5669 13.514166666666664 9.3835C13.7823 8.2808 13.904599999999999 7.374333333333333 13.959466666666666 6.734999999999999C13.984933333333332 6.438646666666667 13.750433333333334 6.166686666666667 13.386666666666665 6.166686666666667L10.065133333333332 6.166686666666667C9.898433333333333 6.166686666666667 9.742666666666667 6.08362 9.649833333333333 5.945166666666666C9.536066666666667 5.775493333333333 9.560033333333333 5.5828533333333334 9.6312 5.403346666666666C9.783966666666666 5.013846666666666 9.983933333333333 4.432846666666666 10.062766666666667 3.90454C10.1406 3.3830066666666667 10.121599999999999 2.9639466666666667 9.917133333333332 2.57626C9.697399999999998 2.1596933333333332 9.448266666666665 2.0495266666666665 9.283433333333333 2.0303066666666663zM10.773433333333333 5.166686666666666L13.386666666666665 5.166686666666666C14.269133333333333 5.166686666666666 15.036999999999999 5.875273333333333 14.9558 6.8206C14.897 7.505533333333333 14.767199999999999 8.462733333333333 14.485833333333334 9.6198C14.170333333333334 10.917200000000001 13.6532 12.008466666666665 13.238166666666666 12.746766666666666C12.7729 13.574433333333333 11.910266666666667 14.029 11.009566666666666 14.075366666666667C10.14 14.120166666666666 8.851766666666666 14.168333333333333 7.333333333333333 14.168333333333333C5.862206666666666 14.168333333333333 4.51776 14.1231 3.565173333333333 14.079633333333334C2.4932333333333334 14.030733333333332 1.5939999999999999 13.234466666666666 1.4786599999999999 12.143466666666665C1.4028 11.426066666666665 1.3333333333333333 10.4978 1.3333333333333333 9.501666666666665C1.3333333333333333 8.588966666666666 1.3916466666666667 7.761233333333333 1.4598999999999998 7.104466666666667C1.5791666666666666 5.95696 2.5641 5.166686666666666 3.671693333333333 5.166686666666666L5.166666666666666 5.166686666666666C5.3793066666666665 5.166686666666666 5.709213333333333 5.063186666666667 6.141613333333333 4.68408C6.516733333333333 4.355193333333333 6.816366666666667 4.015666666666666 7.158533333333333 3.409613333333333C7.5023 2.8007333333333335 7.6041 2.0920066666666663 8.068066666666667 1.54932C8.372133333333332 1.1936466666666665 8.8718 0.9755333333333334 9.399233333333333 1.03704C9.949866666666665 1.10124 10.457733333333334 1.4577866666666666 10.801633333333331 2.109713333333333C11.148866666666665 2.767993333333333 11.143799999999999 3.4356599999999995 11.051833333333335 4.0520933333333335C10.993899999999998 4.44022 10.875366666666666 4.852359999999999 10.773433333333333 5.166686666666666zM4.666666666666666 13.122166666666667L4.666666666666666 6.166686666666667L3.671693333333333 6.166686666666667C3.029613333333333 6.166686666666667 2.5161533333333335 6.615046666666666 2.4545466666666664 7.207833333333333C2.3890599999999997 7.837933333333333 2.333333333333333 8.630433333333333 2.333333333333333 9.501666666666665C2.333333333333333 10.453433333333333 2.399833333333333 11.345266666666667 2.473113333333333 12.038333333333334C2.533993333333333 12.614133333333331 3.0083466666666667 13.053199999999999 3.6107466666666665 13.0807C3.9228066666666668 13.094899999999999 4.278173333333333 13.109333333333334 4.666666666666666 13.122166666666667z"
+            fill="currentColor"></path>
+      </svg>
+      <svg v-else xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+           viewBox="0 0 16 16">
+        <path
+            d="M13.545733333333333 5.166653333333333L10.511766666666666 5.166653333333333C10.658033333333332 4.851813333333333 10.821733333333334 4.440706666666666 10.880833333333332 4.044453333333333C10.923233333333332 3.760413333333333 10.927266666666664 3.412493333333333 10.893133333333333 3.0813333333333333C10.859833333333334 2.7581999999999995 10.784866666666666 2.3969066666666663 10.6352 2.1132133333333334C10.318299999999999 1.5124266666666666 9.882166666666667 1.09052 9.357366666666666 0.9881599999999999C8.799166666666666 0.8792866666666665 8.318566666666666 1.1633 8.030966666666666 1.59852C7.7904333333333335 1.9625133333333333 7.6966 2.26618 7.611066666666667 2.5431266666666668L7.608366666666666 2.5519066666666665C7.526133333333332 2.817973333333333 7.4452333333333325 3.07934 7.237266666666667 3.4476933333333335C6.895133333333334 4.053713333333333 6.615993333333333 4.36802 6.240833333333333 4.69694C6.046326666666666 4.867473333333333 5.84366 4.974753333333333 5.666666666666666 5.03686L5.666666666666666 14.149866666666664C6.190953333333333 14.161133333333334 6.752166666666666 14.168266666666668 7.333333333333333 14.168266666666668C8.896066666666666 14.168266666666668 10.214966666666665 14.117266666666666 11.084633333333333 14.071433333333333C11.938133333333333 14.026433333333333 12.754100000000001 13.5962 13.1998 12.814466666666664C13.621066666666666 12.075666666666665 14.160633333333333 10.9572 14.485833333333334 9.619766666666667C14.7904 8.367233333333333 14.9174 7.348799999999999 14.968999999999998 6.656493333333334C15.032466666666666 5.8043733333333325 14.340166666666665 5.166653333333333 13.545733333333333 5.166653333333333zM4.666666666666666 14.122666666666667L4.666666666666666 5.166653333333333L3.5348733333333335 5.166653333333333C2.506193333333333 5.166653333333333 1.591813333333333 5.90056 1.4747533333333334 6.9655C1.4003066666666666 7.642799999999999 1.3333333333333333 8.523499999999999 1.3333333333333333 9.5016C1.3333333333333333 10.559333333333333 1.4116666666666666 11.540700000000001 1.4928399999999997 12.274533333333332C1.6048399999999998 13.287066666666664 2.43944 14.026599999999998 3.4350066666666668 14.073566666666666C3.78952 14.0903 4.205413333333333 14.107633333333332 4.666666666666666 14.122666666666667z"
+            fill="currentColor"></path>
+      </svg>
+    </button>
+    <span>{{ alterAmount }}</span>
+  </label>
+</template>
+
+<style scoped>
+label {
+  cursor: pointer;
+}
+
+.like {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  gap: 3px;
+  color: gray;
+}
+
+.like button {
+  color: gray;
+  padding: 4px 0 0;
+}
+
+</style>
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@ -5,7 +5,6 @@ import {onMounted, onUnmounted, ref, watch} from "vue";
 import store from "../store/index.js";
 import swal from "../utils/sweetalert.js";
 import getCurrentTime from "../utils/getCurrentTime.js";
-import mobileTest from "../utils/mobileTest.js";

 const contentInput = ref(store.state.editStore.blog || '');
 const titleInput = ref(store.state.editStore.blogTitle || '')
@ -93,6 +92,15 @@ watch(contentInput, () => {
  }
 })

+watch(titleInput, () => {
+  if (store.state.editAutoSave.on && store.state.editAutoSave.interval === 114514) {
+    store.commit('saveEdit', {
+      blog: contentInput.value,
+      blogTitle: titleInput.value,
+      blogSaveTime: getCurrentTime()
+    });
+  }
+})


 onMounted(() => {
@ -153,7 +161,7 @@ onUnmounted(() => {
    <div class="bottom">
      <div class="characters">总字符数: {{ contentInput.length }}</div>
      <div class="auto-save-switch" @click="store.commit('toggleAutoSave')">自动保存: {{ store.state.editAutoSave.on ? '开' : '关' }} </div>
-      <div class="save-time-display">上次保存 [{{ store.state.editStore.blogSaveTime }}]</div>
+      <div class="save-time-display">{{ store.state.editStore.blogSaveTime ? `上次保存 [${store.state.editStore.blogSaveTime}` : ''}}]</div>
    </div>
  </div>

@ -176,7 +184,6 @@ onUnmounted(() => {
 .header {
  flex: 0 0 60px;
  width: 100%;
-  background: white;
  display: flex;
  align-items: center;
 }
@ -302,6 +309,7 @@ onUnmounted(() => {
 }
 .middle {
  width: 100%;
+  height: 0;
  max-height: calc(100vh - 125px);
  flex: 1;
  display: flex;
--- a/src/pages/demoPages/messageBoard/Board_page.vue
+++ b/src/pages/demoPages/messageBoard/Board_page.vue
@ -28,6 +28,20 @@ async function refreshBoard(page, pageSize) {
      PAGE: page,
      PAGE_SIZE: pageSize
    }).then(res => {
+      res.data = res.data.map((msg)=>{
+        function stringToFloat(str) {
+          // 使用字符串的字符码生成一个基于字符串的唯一数值
+          let hash = 0;
+          for (let i = 0; i < str.length; i++) {
+            hash = (hash << 5) - hash + str.charCodeAt(i); // 位运算来生成哈希
+            hash = hash & hash; // 强制转换为32位整数
+          }
+
+          // 将哈希值映射到0~1之间
+          return Math.abs(hash) / (Math.pow(2, 32) - 1);
+        }
+        msg.likes = Math.round(stringToFloat('random'+ msg.content)*10000);
+        return msg;})
      messages.value = res.data;
      amount.value = Math.ceil(res.amount / pageSize);
      store.commit('setDemoValue', {demo: 'board', value: {messages: messages.value}});
--- a/src/pages/demoPages/messageBoard/Message.vue
+++ b/src/pages/demoPages/messageBoard/Message.vue
@ -6,6 +6,7 @@ import store from "../../../store/index.js";
 import api from "../../../utils/axios.js";
 import AuthService from "../../../../services/auth.js";
 import {getDomain} from "../../../utils/getDomain.js";
+import Like_button from "../../../components/Like_button.vue";

 defineProps({
  message: Object,
@ -43,17 +44,7 @@ async function deleteMessage(id, message) {
      <div class="content">{{ message.content }}</div>
      <div class="bottom">
        <div class="time">{{ message.date }}</div>
-<!--        <label class="like">-->
-<!--          <button>-->
-<!--            <svg v-if="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" width="16" height="16">-->
-<!--              <path d="M9.283433333333333 2.0303066666666663C9.095466666666667 2.0083933333333333 8.921333333333333 2.09014 8.828166666666666 2.1991199999999997C8.424633333333333 2.6711333333333336 8.332133333333333 3.3649466666666665 8.029333333333334 3.9012466666666663C7.630633333333333 4.607453333333333 7.258833333333333 5.034486666666666 6.800866666666666 5.436006666666666C6.42382 5.7665733333333336 6.042199999999999 5.987959999999999 5.666666666666666 6.09112L5.666666666666666 13.1497C6.19062 13.1611 6.751966666666666 13.168333333333333 7.333333333333333 13.168333333333333C8.831233333333333 13.168333333333333 10.1019 13.120766666666665 10.958166666666665 13.076699999999999C11.565133333333332 13.045433333333332 12.091966666666666 12.7451 12.366466666666668 12.256733333333333C12.7516 11.571599999999998 13.2264 10.5669 13.514166666666664 9.3835C13.7823 8.2808 13.904599999999999 7.374333333333333 13.959466666666666 6.734999999999999C13.984933333333332 6.438646666666667 13.750433333333334 6.166686666666667 13.386666666666665 6.166686666666667L10.065133333333332 6.166686666666667C9.898433333333333 6.166686666666667 9.742666666666667 6.08362 9.649833333333333 5.945166666666666C9.536066666666667 5.775493333333333 9.560033333333333 5.5828533333333334 9.6312 5.403346666666666C9.783966666666666 5.013846666666666 9.983933333333333 4.432846666666666 10.062766666666667 3.90454C10.1406 3.3830066666666667 10.121599999999999 2.9639466666666667 9.917133333333332 2.57626C9.697399999999998 2.1596933333333332 9.448266666666665 2.0495266666666665 9.283433333333333 2.0303066666666663zM10.773433333333333 5.166686666666666L13.386666666666665 5.166686666666666C14.269133333333333 5.166686666666666 15.036999999999999 5.875273333333333 14.9558 6.8206C14.897 7.505533333333333 14.767199999999999 8.462733333333333 14.485833333333334 9.6198C14.170333333333334 10.917200000000001 13.6532 12.008466666666665 13.238166666666666 12.746766666666666C12.7729 13.574433333333333 11.910266666666667 14.029 11.009566666666666 14.075366666666667C10.14 14.120166666666666 8.851766666666666 14.168333333333333 7.333333333333333 14.168333333333333C5.862206666666666 14.168333333333333 4.51776 14.1231 3.565173333333333 14.079633333333334C2.4932333333333334 14.030733333333332 1.5939999999999999 13.234466666666666 1.4786599999999999 12.143466666666665C1.4028 11.426066666666665 1.3333333333333333 10.4978 1.3333333333333333 9.501666666666665C1.3333333333333333 8.588966666666666 1.3916466666666667 7.761233333333333 1.4598999999999998 7.104466666666667C1.5791666666666666 5.95696 2.5641 5.166686666666666 3.671693333333333 5.166686666666666L5.166666666666666 5.166686666666666C5.3793066666666665 5.166686666666666 5.709213333333333 5.063186666666667 6.141613333333333 4.68408C6.516733333333333 4.355193333333333 6.816366666666667 4.015666666666666 7.158533333333333 3.409613333333333C7.5023 2.8007333333333335 7.6041 2.0920066666666663 8.068066666666667 1.54932C8.372133333333332 1.1936466666666665 8.8718 0.9755333333333334 9.399233333333333 1.03704C9.949866666666665 1.10124 10.457733333333334 1.4577866666666666 10.801633333333331 2.109713333333333C11.148866666666665 2.767993333333333 11.143799999999999 3.4356599999999995 11.051833333333335 4.0520933333333335C10.993899999999998 4.44022 10.875366666666666 4.852359999999999 10.773433333333333 5.166686666666666zM4.666666666666666 13.122166666666667L4.666666666666666 6.166686666666667L3.671693333333333 6.166686666666667C3.029613333333333 6.166686666666667 2.5161533333333335 6.615046666666666 2.4545466666666664 7.207833333333333C2.3890599999999997 7.837933333333333 2.333333333333333 8.630433333333333 2.333333333333333 9.501666666666665C2.333333333333333 10.453433333333333 2.399833333333333 11.345266666666667 2.473113333333333 12.038333333333334C2.533993333333333 12.614133333333331 3.0083466666666667 13.053199999999999 3.6107466666666665 13.0807C3.9228066666666668 13.094899999999999 4.278173333333333 13.109333333333334 4.666666666666666 13.122166666666667z" fill="currentColor"></path>-->
-<!--            </svg>-->
-<!--            <svg v-else xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">-->
-<!--              <path d="M13.545733333333333 5.166653333333333L10.511766666666666 5.166653333333333C10.658033333333332 4.851813333333333 10.821733333333334 4.440706666666666 10.880833333333332 4.044453333333333C10.923233333333332 3.760413333333333 10.927266666666664 3.412493333333333 10.893133333333333 3.0813333333333333C10.859833333333334 2.7581999999999995 10.784866666666666 2.3969066666666663 10.6352 2.1132133333333334C10.318299999999999 1.5124266666666666 9.882166666666667 1.09052 9.357366666666666 0.9881599999999999C8.799166666666666 0.8792866666666665 8.318566666666666 1.1633 8.030966666666666 1.59852C7.7904333333333335 1.9625133333333333 7.6966 2.26618 7.611066666666667 2.5431266666666668L7.608366666666666 2.5519066666666665C7.526133333333332 2.817973333333333 7.4452333333333325 3.07934 7.237266666666667 3.4476933333333335C6.895133333333334 4.053713333333333 6.615993333333333 4.36802 6.240833333333333 4.69694C6.046326666666666 4.867473333333333 5.84366 4.974753333333333 5.666666666666666 5.03686L5.666666666666666 14.149866666666664C6.190953333333333 14.161133333333334 6.752166666666666 14.168266666666668 7.333333333333333 14.168266666666668C8.896066666666666 14.168266666666668 10.214966666666665 14.117266666666666 11.084633333333333 14.071433333333333C11.938133333333333 14.026433333333333 12.754100000000001 13.5962 13.1998 12.814466666666664C13.621066666666666 12.075666666666665 14.160633333333333 10.9572 14.485833333333334 9.619766666666667C14.7904 8.367233333333333 14.9174 7.348799999999999 14.968999999999998 6.656493333333334C15.032466666666666 5.8043733333333325 14.340166666666665 5.166653333333333 13.545733333333333 5.166653333333333zM4.666666666666666 14.122666666666667L4.666666666666666 5.166653333333333L3.5348733333333335 5.166653333333333C2.506193333333333 5.166653333333333 1.591813333333333 5.90056 1.4747533333333334 6.9655C1.4003066666666666 7.642799999999999 1.3333333333333333 8.523499999999999 1.3333333333333333 9.5016C1.3333333333333333 10.559333333333333 1.4116666666666666 11.540700000000001 1.4928399999999997 12.274533333333332C1.6048399999999998 13.287066666666664 2.43944 14.026599999999998 3.4350066666666668 14.073566666666666C3.78952 14.0903 4.205413333333333 14.107633333333332 4.666666666666666 14.122666666666667z" fill="currentColor"></path>-->
-<!--            </svg>-->
-<!--          </button>-->
-<!--          <span>{{ message.like }}</span>-->
-<!--        </label>-->
+        <like_button :active="message.content.length%2===0" :amount="message.likes"/>
      </div>
    </div>
    <div class="right">
@ -136,21 +127,9 @@ async function deleteMessage(id, message) {
 }

 .bottom .time {
-
+  width: 120px;
 }

-.like {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  gap: 3px;
-  color: gray;
-}
-
-.like button {
-  color: gray;
-  padding: 2px 0 0;
-}

 .right {
  //display: flex;
--- a/src/plugins/vuexSessionStorage.js
+++ b/src/plugins/vuexSessionStorage.js
@ -0,0 +1,25 @@
+export default function createSessionStatePlugin(options = {}) {
+    const storageKey = options.key || 'vuex-partial-state'
+    const whitelist = options.whitelist || [] // 需要存储的 state key 列表
+
+    return store => {
+        // 1. 在 store 初始化时恢复数据
+        const savedState = JSON.parse(sessionStorage.getItem(storageKey) || '{}')
+        Object.keys(savedState).forEach(key => {
+            if (whitelist.includes(key)) {
+                store.state[key] = savedState[key]
+            }
+        })
+
+        // 2. 监听 mutation，每次变更后存入 sessionStorage
+        store.subscribe((mutation, state) => {
+            const partialState = {}
+            whitelist.forEach(key => {
+                if (state[key] !== undefined) {
+                    partialState[key] = state[key]
+                }
+            })
+            sessionStorage.setItem(storageKey, JSON.stringify(partialState))
+        })
+    }
+}
--- a/src/router/index.js
+++ b/src/router/index.js
@ -17,7 +17,7 @@ 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";
-import Test from "../pages/test.vue";
+import Test from "../pages/Editor.vue";

 const routes = [
    {
--- a/src/store/index.js
+++ b/src/store/index.js
@ -1,6 +1,7 @@
-import { createStore } from 'vuex';
+import {createStore} from 'vuex';
 import createPersistedStatePlugin from '../plugins/vuexLocalStorage';
 import {getDomain} from "../utils/getDomain.js";
+import createSessionStatePlugin from "../plugins/vuexSessionStorage.js";

 const store = createStore({
    state: {
@ -44,7 +45,7 @@ const store = createStore({
            state.log = arr;
        },
        toggleAutoSave(state) {
-            state.editAutoSave.on = ! state.editAutoSave.on;
+            state.editAutoSave.on = !state.editAutoSave.on;
        },
        setAutoSaveTime(state, ms) {
            state.editAutoSave.interval = Number(ms) || 30000;
@ -56,7 +57,7 @@ const store = createStore({
        profileImage: state => {
            if (state.userInfo.profile) {
                return `https://${getDomain()}/data/user/profile/` + state.userInfo.profile;
-            }else {
+            } else {
                return `https://${getDomain()}/data/user/profile/default.jpg`
            }
        },
@ -78,10 +79,16 @@ const store = createStore({
        },
        isAdmin: state => state.userInfo.role_id >= 2,
    },
-    plugins: [createPersistedStatePlugin({
-        key: 'cyberStorage',
-        whitelist: ['theme', 'userInfo', 'demos', 'editStore', 'editAutoSave'],
-    })]
+    plugins: [
+        createPersistedStatePlugin({
+            key: 'cyberStorage',
+            whitelist: ['theme', 'userInfo', 'demos', 'editStore', 'editAutoSave'],
+        }),
+        createSessionStatePlugin({
+            key: 'cyber',
+            whitelist: []
+        })
+    ]
 })

 export default store;