From bf53bd8bb975eaeaed8e056471d380cd28ab792f Mon Sep 17 00:00:00 2001 From: Guarp Date: Mon, 24 Feb 2025 15:52:56 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AD=98=E4=B8=AA=E6=A1=A3=EF=BC=8C=E8=A6=81?= =?UTF-8?q?=E6=94=B9=E5=B1=9E=E6=80=A7=E5=90=8D=E5=AD=97=E4=BA=86=20demos?= =?UTF-8?q?=20->=20demosLocal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Like_button.vue | 91 +++++++++++++++++++ src/pages/{test.vue => Editor.vue} | 14 ++- .../demoPages/messageBoard/Board_page.vue | 14 +++ src/pages/demoPages/messageBoard/Message.vue | 27 +----- src/plugins/vuexSessionStorage.js | 25 +++++ src/router/index.js | 2 +- src/store/index.js | 21 +++-- 7 files changed, 159 insertions(+), 35 deletions(-) create mode 100644 src/components/Like_button.vue rename src/pages/{test.vue => Editor.vue} (95%) create mode 100644 src/plugins/vuexSessionStorage.js diff --git a/src/components/Like_button.vue b/src/components/Like_button.vue new file mode 100644 index 0000000..592adb2 --- /dev/null +++ b/src/components/Like_button.vue @@ -0,0 +1,91 @@ + + + + + \ No newline at end of file diff --git a/src/pages/test.vue b/src/pages/Editor.vue similarity index 95% rename from src/pages/test.vue rename to src/pages/Editor.vue index e865bd2..d4cd13c 100644 --- a/src/pages/test.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(() => {
总字符数: {{ contentInput.length }}
自动保存: {{ store.state.editAutoSave.on ? '开' : '关' }}
-
上次保存 [{{ store.state.editStore.blogSaveTime }}]
+
{{ store.state.editStore.blogSaveTime ? `上次保存 [${store.state.editStore.blogSaveTime}` : ''}}]
@@ -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; diff --git a/src/pages/demoPages/messageBoard/Board_page.vue b/src/pages/demoPages/messageBoard/Board_page.vue index 6d2db3a..31f1bef 100644 --- 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}}); diff --git a/src/pages/demoPages/messageBoard/Message.vue b/src/pages/demoPages/messageBoard/Message.vue index 38ba360..733b2c3 100644 --- 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) {
{{ message.content }}
{{ message.date }}
- - - - - - - - - - - +
@@ -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; diff --git a/src/plugins/vuexSessionStorage.js b/src/plugins/vuexSessionStorage.js new file mode 100644 index 0000000..f11c3c2 --- /dev/null +++ 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)) + }) + } +} diff --git a/src/router/index.js b/src/router/index.js index d08b2b6..602726b 100644 --- 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 = [ { diff --git a/src/store/index.js b/src/store/index.js index 9ccd1d4..e449d10 100644 --- 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;