修改主页，添加访问次数显示

2025-03-16 14:24:53 +08:00 · 2025-03-16 14:24:53 +08:00 · 9e882a9151
commit 9e882a9151
parent 4140680fbd
8 changed files with 189 additions and 136 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -9,6 +9,7 @@
      "version": "0.0.0",
      "dependencies": {
        "@element-plus/icons-vue": "^2.3.1",
+        "@vueuse/core": "^13.0.0",
        "@wangeditor/editor": "^5.1.23",
        "@wangeditor/editor-for-vue": "^5.1.12",
        "axios": "^1.7.9",
@ -1429,9 +1430,9 @@
      "optional": true
    },
    "node_modules/@types/web-bluetooth": {
-      "version": "0.0.16",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
-      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="
    },
    "node_modules/@uppy/companion-client": {
      "version": "2.2.2",
@ -1593,86 +1594,38 @@
      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ=="
    },
    "node_modules/@vueuse/core": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
-      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.0.0.tgz",
+      "integrity": "sha512-rkgb4a8/0b234lMGCT29WkCjPfsX0oxrIRR7FDndRoW3FsaC9NBzefXg/9TLhAgwM11f49XnutshM4LzJBrQ5g==",
      "dependencies": {
-        "@types/web-bluetooth": "^0.0.16",
-        "@vueuse/metadata": "9.13.0",
-        "@vueuse/shared": "9.13.0",
-        "vue-demi": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.0.0",
+        "@vueuse/shared": "13.0.0"
      },
      "funding": {
        "url": "https://github.com/sponsors/antfu"
      },
      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
+        "vue": "^3.5.0"
      }
    },
    "node_modules/@vueuse/metadata": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
-      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.0.0.tgz",
+      "integrity": "sha512-TRNksqmvtvqsuHf7bbgH9OSXEV2b6+M3BSN4LR5oxWKykOFT9gV78+C2/0++Pq9KCp9KQ1OQDPvGlWNQpOb2Mw==",
      "funding": {
        "url": "https://github.com/sponsors/antfu"
      }
    },
    "node_modules/@vueuse/shared": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
-      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
-      "dependencies": {
-        "vue-demi": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.0.0.tgz",
+      "integrity": "sha512-9MiHhAPw+sqCF/RLo8V6HsjRqEdNEWVpDLm2WBRW2G/kSQjb8X901sozXpSCaeLG0f7TEfMrT4XNaA5m1ez7Dg==",
      "funding": {
        "url": "https://github.com/sponsors/antfu"
      },
      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
+        "vue": "^3.5.0"
      }
    },
    "node_modules/@wangeditor/basic-modules": {
@ -2580,6 +2533,94 @@
        "vue": "^3.2.0"
      }
    },
+    "node_modules/element-plus/node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
+    "node_modules/element-plus/node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/entities": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
--- a/package.json
+++ b/package.json
@ -10,6 +10,7 @@
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
+    "@vueuse/core": "^13.0.0",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",
    "axios": "^1.7.9",
--- a/src/components/DefaultCover.vue
+++ b/src/components/DefaultCover.vue
@ -12,21 +12,22 @@ defineProps({
    required: true
  },
  size: {
-    type: Number,
+    type: String,
    required: false,
-    default: 200
+    default: '200px'
  }
 });

 const imageLoaded = ref(false);
+
 </script>
 <template>
-  <div class="image-container" :style="{background: setRandomBGCL(text), height: size + 'px'}">
+  <div class="image-container" :style="{background: setRandomBGCL(text), height: size}">
    <img :src="imageSrc" alt="image" class="image"
-         :style="{height: size + 'px', display: imageLoaded ? 'block' : 'none'}"
+         :style="{height: size, display: imageLoaded ? 'block' : 'none'}"
         @load="imageLoaded = true"
         @error="imageLoaded = false" />
-    <div v-if="!imageLoaded" class="cover-character" :style="{fontSize: size + 'px'}">
+    <div v-if="!imageLoaded" class="cover-character" :style="{fontSize: size}">
      {{ text[0] }}
    </div>
  </div>
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@ -1,81 +1,80 @@
 <script setup>
+import {ref, onMounted} from 'vue'
+import {TransitionPresets, useTransition} from '@vueuse/core';
+import api from "../utils/axios.js";
+
+const source = ref(0);
+const viewCountDisplay = ref(true);
+const outputValue = useTransition(source, {
+  duration: 3000,
+  transition: TransitionPresets.easeOutExpo,
+})
+
+
+onMounted(async () => {
+  const response = await api.get('/view');
+  if (response.code === 0) {
+    source.value = response.views;
+  } else {
+    viewCountDisplay.value = false;
+  }
+
+})

 </script>

 <template>
  <div class="container">
-    <div class="container-home">
-      <header class="header">Header</header>
-      <aside class="sidebar">Sidebar</aside>
-      <main class="main-content">Main Content</main>
-    </div>
+    <el-container>
+      <div style="font-size: 50px; font-weight: inherit; padding: 20px">欢迎来到 MVA-CYBER !</div>
+<!--      <el-main>-->
+
+<!--      </el-main>-->
+<!--      <el-footer>-->
+<!--        <div class="text-bg"></div>-->
+        <el-col v-if="viewCountDisplay">
+          <el-statistic title="网站累计访问次数" :value="outputValue"/>
+        </el-col>
+
+<!--      </el-footer>-->
+    </el-container>
  </div>

 </template>

 <style scoped>
-.container {
-  display: flex;
+img {
+  position: absolute;
  width: 100%;
  height: 100%;
+}
+.el-container {
+  display: flex;
+  align-items: center;
  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+
+}
+.el-main {
+  overflow: hidden;
+  padding: 0;
+  width: 100%;
+}
+.el-footer {
+  position: relative;
+}
+.el-col {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
  justify-content: center;
-  justify-items: center;
 }
-/* 设置grid布局 */
-.container-home {
-  display: grid;
-  grid-template-columns: 1fr 3fr; /* 默认2列，侧边栏占1份，内容区占3份 */
-  grid-template-rows: auto 1fr; /* 头部行高度自适应，内容行占满剩余空间 */
-  grid-template-areas:
-    "header header"
-    "sidebar main-content";
-  gap: 20px; /* 设置行列间距 */
-  align-content: center;
-  width: 50rem;
-  height: 65vh; /* 使容器高度为视口高度 */
-  margin-bottom: 80px;
+.el-statistic {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
 }
-
-/* 设置头部 */
-.header {
-  grid-area: header;
-  background-color: #4CAF50;
-  color: white;
-  padding: 20px;
-  text-align: center;
-}
-
-/* 设置侧边栏 */
-.sidebar {
-  grid-area: sidebar;
-  background-color: #f4f4f4;
-  padding: 20px;
-  border-right: 2px solid #ccc;
-}
-
-/* 设置内容区域 */
-.main-content {
-  grid-area: main-content;
-  background-color: #ffffff;
-  padding: 20px;
-  border-left: 2px solid #ccc;
-}
-
-/* 响应式设计：小屏幕时，侧边栏会变为顶部 */
-@media (max-width: 768px) {
-  .container {
-    grid-template-columns: 1fr; /* 变成单列布局 */
-    grid-template-areas:
-      "header"
-      "sidebar"
-      "main-content"; /* 侧边栏在头部下面 */
-  }
-
-  .sidebar {
-    border-right: none; /* 去掉侧边栏的右边框 */
-    border-bottom: 2px solid #ccc; /* 小屏幕时侧边栏的底部有个边框 */
-  }
-}
-
 </style>
--- a/src/pages/blogPages/blogEditor.vue
+++ b/src/pages/blogPages/blogEditor.vue
@ -3,7 +3,7 @@
    <el-container>
      <el-aside width="auto">
        <div class="side-bar" v-if="blogStatus !== null">
-          <el-button type="primary" @click="submitBlog">{{ (blogStatus === 0 ? '发布' : '更改') + (mobileTest() ? '' : (blogStatus===0?'博客':'设置')) }}</el-button>
+          <el-button type="primary" @click="submitBlog">{{ (blogStatus === 1 ? '设置' : '发布') + (mobileTest() ? '' : (blogStatus === 1 ? '信息' : '博客')) }}</el-button>
          <el-button type="success" @click="saveBtn">{{ blogStatus === 1 ? '更新' : '保存' }}{{ mobileTest() ? '' : (blogStatus === 0 ? '草稿' : '博客') }}</el-button>

          <el-button v-if="!viewing" type="warning" @click="viewing = true">{{
--- a/src/router/index.js
+++ b/src/router/index.js
@ -35,6 +35,7 @@ import SingleBlog_page from "../pages/blogPages/SingleBlog_page.vue";
 import SubmitBlog_page from "../pages/blogPages/submitBlogPages/SubmitBlog_page.vue";
 import swal from "../utils/sweetalert.js";
 import GunGame_page from "../pages/demoPages/gunGame/gunGame_page.vue";
+import api from "../utils/axios.js";

 const routes = [
    {path: '/404',
@ -148,6 +149,12 @@ const router = createRouter({
 let previousRoute = null
 router.beforeEach(async (to, from, next) => {
    previousRoute = from;
+
+    if (!store.state.isViewCounted) {
+        api.post('/view');
+        store.state.isViewCounted = true;
+    }
+
    if (!store.state.userInfo.uid && store.state.token) {
        AuthService.setSelfInfo();
    }
--- a/src/store/index.js
+++ b/src/store/index.js
@ -19,7 +19,8 @@ const store = createStore({
        sessionStore: {
            account: {}
        },
-        userPreference: {}
+        userPreference: {},
+        isViewCounted: false
    },
    mutations: {
        toggleTheme(state) {
@ -125,7 +126,7 @@ const store = createStore({
        }),
        createSessionStatePlugin({
            key: 'cyberStorage',
-            whitelist: []
+            whitelist: ['isViewCounted']
        })
    ]
 })
--- a/src/utils/randomIMG.js
+++ b/src/utils/randomIMG.js
@ -1,4 +1,7 @@
 export function getRandomIMG(seed, category) {
+    if (typeof seed !== 'number') {
+        seed = Math.random();
+    }
    let url;
    const urls = [
        // `https://www.loliapi.com/acg`,