Signed-off-by: Caner <5658514@qq.com>

README.md

@@ -8,4 +8,5 @@
 3. '/edit' 富文本编辑
 4. '/fly' 二维动态导向
 5. '/move' 移动组件
+6. '/news' 实时新闻
 ```

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@wangeditor/editor": "^5.1.18",
     "@wangeditor/editor-for-vue": "^5.1.12",
-    "axios": "^1.1.3",
+    "axios": "^1.2.2",
     "echarts": "^5.4.1",
     "pinia": "^2.0.18",
     "socket.io-client": "^4.5.4",

src/pages/views/news/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="box">
+    <p class="head">
+      <span>Hot List</span>
+    </p>
+    <ul class="content">
+      <li
+        v-for="(item, index) in msg"
+        :key="index"
+      >
+        <a
+          :href="item.url"
+          target="_blank"
+        >
+          <img
+            :src="item.imgSrc"
+            alt="图片"
+          >
+          <span>{{ item.name }}</span>
+          <span :style="`color:${color(index)}`">{{ item.strnum }}</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import axios from '@/utils/axios'
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+const msg: any = ref([])
+const uvList = ref()
+const getDB = async () => {
+  const data = await axios.get('/static/test.json')
+  msg.value = data || []
+  await sleep(10 * 1000)
+  getDB()
+}
+const getInfo = async () => {
+  const data = await axios.get('/static/info.json')
+  uvList.value = data || []
+  await sleep(10 * 1000)
+  getInfo()
+}
+const color = (num: number) => {
+  if (num < 10) {
+    return `rgba(255,152,18,${Math.abs(num - 10) / 20 + 0.5})`
+  }
+  return `rgba(145,149,163,${Math.abs(msg.value.length - num) / msg.value.length + 0.3})`
+}
+getDB()
+getInfo()
+</script>
+<style lang="less" scoped>
+.box {
+    ul,
+    li {
+        list-style: none;
+        text-align: center;
+        padding: 0;
+        margin: 0;
+    }
+
+    a {
+        display: inline-flex;
+        width: 350px;
+        color: #2c3e50;
+        text-decoration: none;
+        margin: 5px auto;
+        text-align: left;
+        letter-spacing: 1px;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    img {
+        width: 64px;
+        height: 42px;
+        border-radius: 6px;
+    }
+
+    a:hover {
+        color: rgba(160, 179, 232, 0.9);
+    }
+
+    .head {
+        margin: 0;
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+    }
+
+    .head span:first-child {
+        font-weight: 600;
+        font-size: 25px;
+        margin: 5px 0;
+        cursor: pointer;
+        background-image: -webkit-linear-gradient(bottom, red, #ff5f60, #f0c41b);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    a>span:nth-child(2) {
+        width: 230px;
+        margin-left: 10px;
+    }
+
+    a>span:last-child {
+        font-size: 13px;
+    }
+
+    .content {
+        height: 99vh;
+        overflow-y: auto;
+    }
+}
+
+/* 设置滚动条的样式 */
+::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+    position: fixed;
+    background: transparent;
+}
+
+/* 滚动槽 */
+::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 5px;
+    width: 5px;
+    position: fixed;
+}
+
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: #ccc;
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+    position: fixed;
+    right: 0;
+}
+
+::-webkit-scrollbar-thumb:window-inactive {
+    background: #ccc;
+}
+</style>

src/pages/views/news/route.ts

@@ -0,0 +1,9 @@
+import { RouteRecordRaw } from 'vue-router'
+
+export default {
+  path: '/news',
+  meta: {
+    authorize: true
+  },
+  component: () => import('./index.vue')
+} as RouteRecordRaw

src/utils/axios.js

@@ -0,0 +1,20 @@
+import axios from 'axios'
+// http request 拦截
+axios.interceptors.request.use(
+  config => {
+    return config
+  },
+  err => {
+    return Promise.reject(err)
+  }
+)
+// http response 拦截
+axios.interceptors.response.use(
+  response => {
+    return response.data
+  },
+  error => {
+    return Promise.reject(error)
+  }
+)
+export default axios

yarn.lock

@@ -508,9 +508,9 @@ asynckit@^0.4.0:
   resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
-axios@^1.1.3:
+axios@^1.2.2:
   version "1.2.2"
-  resolved "https://registry.npmjs.org/axios/-/axios-1.2.2.tgz"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.2.tgz#72681724c6e6a43a9fea860fc558127dbe32f9f1"
   integrity sha512-bz/J4gS2S3I7mpN/YZfGFTqhXTYzRho8Ay38w2otuuDR322KzFIWm/4W2K6gIwvWaws5n+mnb7D1lN9uD+QH6Q==
   dependencies:
     follow-redirects "^1.15.0"