vue2server 1.0.8 → 1.0.10

package/frontEnd/src/api/mock.js

@@ -1,5 +1,14 @@
-import { post } from '../utils/request'
+import { post, get } from '../utils/request'
 
 export function getTrend(year) {
   return post('/mock/trend', { year })
 }
+
+// 获取名字列表（分页）
+// 后端接口：GET /api/mock/names
+// 参数：
+// - size：每页数量（最大200）
+// - page：页码（从1开始）
+export function getNames(params = {}) {
+  return get('/mock/names', params)
+}

package/frontEnd/src/pages/MeetingListPage.vue

@@ -278,7 +278,7 @@ export default {
   },
   computed: {},
   methods: {
-    async fetchData(allowRetry = true) {
+    async fetchData() {
       const params = {};
       const { belOrgNo, meetSubj, meetTypeCd, createDateRange } = this.filters;
       if (belOrgNo) params.belOrgNo = belOrgNo;
@@ -296,21 +296,8 @@ export default {
       }
       try {
         const res = await get("/meeting/list", params);
-        if (res && res.list) {
-          this.rows = Array.isArray(res.list) ? res.list : [];
-          this.totalCount = Number.isFinite(res.total) ? res.total : this.rows.length;
-        } else if (Array.isArray(res)) {
-          this.rows = res;
-          this.totalCount = res.length;
-        } else {
-          this.rows = [];
-          this.totalCount = 0;
-        }
-        const maxPage = Math.max(1, Math.ceil(this.totalCount / this.pageSize));
-        if (allowRetry && this.page > maxPage) {
-          this.page = maxPage;
-          await this.fetchData(false);
-        }
+        this.rows = Array.isArray(res.list) ? res.list : [];
+        this.totalCount = Number.isFinite(res.total) ? res.total : this.rows.length;
       } catch (e) {
         this.$message.error("获取会议列表失败");
       }

package/frontEnd/src/pages/NameScrollPage.vue

@@ -0,0 +1,291 @@
+<template>
+  <!--
+    名字无缝滚动页面
+    需求：
+    - 从后端获取名字列表
+    - 自动无缝向下滚动；鼠标移入暂停并允许滚轮上下滚动；移出恢复自动滚动
+  -->
+  <section class="page name-scroll-page">
+    <h1 class="page-title">名字滚动</h1>
+
+    <!-- 滚动容器：固定高度，溢出隐藏 -->
+    <div
+      class="scroll-wrapper"
+      ref="scrollWrapper"
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave"
+      @wheel.prevent="onWheel"
+    >
+      <!-- 内容容器：放置两份列表以实现无缝循环 -->
+      <div class="scroll-content" ref="scrollContent">
+        <ul class="name-list">
+          <li v-for="(n, idx) in names" :key="'a-' + idx" class="name-item">{{ n }}</li>
+        </ul>
+        <!-- 第二份同样的列表，用于衔接形成无缝滚动 -->
+        <ul class="name-list">
+          <li v-for="(n, idx) in names" :key="'b-' + idx" class="name-item">{{ n }}</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="toolbar">
+      <el-button size="small" @click="reload">重新加载</el-button>
+      <span class="tip">鼠标移入暂停自动滚动，滚轮可上下滚动；移出恢复</span>
+    </div>
+    <div class="last-visible">当前最后条显示的数据：<strong>{{ lastVisibleText || '-' }}</strong></div>
+  </section>
+</template>
+
+<script>
+// 引入后端接口：获取名字列表
+import { getNames } from '../api/mock'
+
+export default {
+  name: 'NameScrollPage',
+  data() {
+    return {
+      // 名字列表数据（从后端获取）
+      names: [],
+      // 分页状态
+      page: 1,
+      pageSize: 50,
+      total: 0,
+      loadingNext: false,
+      // 是否正在自动滚动（true 表示开启）
+      autoRunning: false,
+      // 自动滚动速度：每帧增加的像素（可根据需要调整）
+      speed: 0.4,
+      // requestAnimationFrame 的任务 ID，用于取消动画
+      rafId: 0,
+      // 单份列表的高度（用于实现无缝循环）
+      listHeight: 0,
+      // 单条目高度（用于计算当前视口内的最后一条）
+      itemHeight: 0,
+      // 是否处于鼠标悬停状态（悬停时暂停自动滚动）
+      isHovering: false,
+      // 当前视口内最后一条数据的文案
+      lastVisibleText: '',
+      // 当前视口内最后一条数据的索引
+      lastVisibleIndex: 0
+    }
+  },
+  mounted() {
+    // 页面挂载后初始化：获取数据并启动自动滚动
+    this.init()
+  },
+  beforeDestroy() {
+    // 组件销毁前停止自动滚动，避免动画泄漏
+    this.stopAuto()
+  },
+  methods: {
+    /**
+     * 初始化页面：拉取名字并开始滚动
+     */
+    async init() {
+      await this.fetchNames()
+      this.$nextTick(() => {
+        this.measure()
+        this.startAuto()
+      })
+    },
+    /**
+     * 从后端获取名字列表
+     * 参数：size 每页数量（最大200），page 页码（从1开始）
+     * 返回：数组形式的名字列表
+     */
+    async fetchNames() {
+      const res = await getNames({ size: this.pageSize, page: this.page })
+      // 后端响应可能是 { list, total, page, pageSize } 或直接数组，做兼容处理
+      const list = (res && res.list) || res || []
+      this.names = Array.isArray(list) ? list : []
+      if (res && typeof res.total === 'number') this.total = res.total
+      if (res && typeof res.pageSize === 'number') this.pageSize = res.pageSize
+      if (res && typeof res.page === 'number') this.page = res.page
+    },
+    /**
+     * 重新测量单份列表高度
+     * 用于判断何时将 scrollTop 回跳，实现无缝循环
+     */
+    measure() {
+      const content = this.$refs.scrollContent
+      if (!content) return
+      const lists = content.getElementsByClassName('name-list')
+      if (lists && lists[0]) {
+        this.listHeight = lists[0].offsetHeight
+      }
+      const item = content.getElementsByClassName('name-item')[0]
+      if (item) {
+        this.itemHeight = item.offsetHeight
+      }
+      this.updateLastVisible()
+    },
+    /**
+     * 启动自动滚动（基于 requestAnimationFrame）
+     * 行为：每帧将容器 scrollTop 增加 speed，超出单份高度时回跳
+     */
+    startAuto() {
+      if (this.autoRunning) return
+      this.autoRunning = true
+      const step = () => {
+        if (!this.autoRunning) return
+        const wrapper = this.$refs.scrollWrapper
+        if (wrapper) {
+          wrapper.scrollTop += this.speed
+          // 超过单份列表高度则回跳，形成无缝循环
+          if (wrapper.scrollTop >= this.listHeight) {
+            wrapper.scrollTop -= this.listHeight
+          }
+          this.maybeLoadMore()
+        }
+        this.updateLastVisible()
+        this.rafId = window.requestAnimationFrame(step)
+      }
+      this.rafId = window.requestAnimationFrame(step)
+    },
+    /**
+     * 停止自动滚动：取消动画并置位
+     */
+    stopAuto() {
+      this.autoRunning = false
+      if (this.rafId) {
+        window.cancelAnimationFrame(this.rafId)
+        this.rafId = 0
+      }
+    },
+    /**
+     * 鼠标移入：暂停自动滚动，进入手动滚动模式
+     */
+    onMouseEnter() {
+      this.isHovering = true
+      this.stopAuto()
+    },
+    /**
+     * 鼠标移出：退出手动模式，恢复自动滚动
+     */
+    onMouseLeave() {
+      this.isHovering = false
+      this.startAuto()
+    },
+    /**
+     * 鼠标滚轮事件：根据滚轮方向上下滚动
+     * 同时保持无缝循环的边界处理
+     */
+    onWheel(e) {
+      const wrapper = this.$refs.scrollWrapper
+      if (!wrapper) return
+      const delta = e.deltaY || 0
+      wrapper.scrollTop += delta
+      // 下滚超过单份高度时回跳；上滚小于0时向上回跳
+      if (wrapper.scrollTop >= this.listHeight) {
+        wrapper.scrollTop -= this.listHeight
+      } else if (wrapper.scrollTop < 0) {
+        wrapper.scrollTop += this.listHeight
+      }
+      this.maybeLoadMore()
+      this.updateLastVisible()
+    },
+    /**
+     * 重新加载数据：重置滚动位置并恢复自动滚动
+     */
+    async reload() {
+      await this.fetchNames()
+      this.$nextTick(() => {
+        const wrapper = this.$refs.scrollWrapper
+        if (wrapper) wrapper.scrollTop = 0
+        this.measure()
+        if (!this.isHovering) this.startAuto()
+      })
+    },
+    hasMore() {
+      return this.page * this.pageSize < this.total
+    },
+    async loadNextPage() {
+      if (this.loadingNext || !this.hasMore()) return
+      this.loadingNext = true
+      const nextPage = this.page + 1
+      try {
+        const res = await getNames({ size: this.pageSize, page: nextPage })
+        const list = (res && res.list) || []
+        if (Array.isArray(list) && list.length) {
+          this.names = [...this.names, ...list]
+          if (res && typeof res.total === 'number') this.total = res.total
+          this.page = nextPage
+          this.$nextTick(() => {
+            this.measure()
+          })
+        }
+      } finally {
+        this.loadingNext = false
+      }
+    },
+    maybeLoadMore() {
+      if (!this.hasMore()) return
+      if (this.loadingNext) return
+      const thresholdIndex = Math.floor((this.names.length || 0) * 2 / 3)
+      if (this.lastVisibleIndex >= thresholdIndex) this.loadNextPage()
+    },
+    /**
+     * 计算并更新当前视口内最后一条可见数据
+     */
+    updateLastVisible() {
+      const wrapper = this.$refs.scrollWrapper
+      if (!wrapper || !Array.isArray(this.names) || this.names.length === 0) {
+        this.lastVisibleText = ''
+        return
+      }
+      const h = this.itemHeight || 1
+      const offset = wrapper.scrollTop || 0
+      const viewH = wrapper.clientHeight || 0
+      const endPos = offset + viewH
+      const relative = this.listHeight > 0 ? (endPos % this.listHeight) : endPos
+      let idx = Math.floor(relative / h) - 1
+      if (idx < 0) idx = 0
+      if (idx >= this.names.length) idx = this.names.length - 1
+      this.lastVisibleText = this.names[idx] || ''
+      this.lastVisibleIndex = idx
+    }
+  }
+}
+</script>
+
+<style scoped>
+.page.name-scroll-page {
+  padding: 16px;
+}
+.page-title {
+  font-size: 18px;
+  margin-bottom: 12px;
+}
+.scroll-wrapper {
+  height: 320px;
+  overflow: hidden;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background: #fff;
+}
+.scroll-content {
+  /* 内容容器用于放置两份列表，实现无缝循环 */
+}
+.name-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.name-item {
+  padding: 8px 12px;
+  border-bottom: 1px dashed #f0f0f0;
+}
+.toolbar {
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #606266;
+}
+.tip {
+  font-size: 12px;
+}
+.last-visible {
+  margin-top: 8px;
+}
+</style>

package/frontEnd/src/router/routes.js

@@ -6,6 +6,7 @@
 import LineChartPage from '../pages/LineChartPage.vue'
 import MedalSetting from '../pages/MedalSetting.vue'
 import MeetingListPage from '../pages/MeetingListPage.vue'
+import NameScrollPage from '../pages/NameScrollPage.vue'
 
 // routes 将在 router/index 中被 VueRouter 使用
 export const routes = [
@@ -49,5 +50,15 @@ export const routes = [
       icon: 'el-icon-date',
       showInMenu: true
     }
+  },
+  {
+    path: '/name-scroll',
+    name: 'NameScroll',
+    component: NameScrollPage,
+    meta: {
+      title: '名字滚动',
+      icon: 'el-icon-user',
+      showInMenu: true
+    }
   }
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2server",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "",
   "scripts": {
     "dev": "nodemon --watch src --ext ts --exec \"ts-node src/app.ts\"",

package/src/controllers/mock.controller.ts

@@ -1,12 +1,37 @@
 import { Request, Response } from "express";
 
-import { buildMockUser, buildYearTrend } from "../services/mock.service";
+import { buildMockUser, buildYearTrend, buildNameList } from "../services/mock.service";
+
+function toInt(value: unknown, fallback: number): number {
+  if (typeof value === "number" && Number.isFinite(value)) return Math.floor(value);
+  if (typeof value === "string" && value.trim() !== "") {
+    const parsed = Number.parseInt(value, 10);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+
 class MockController {
   getMockUser = (_req: Request, res: Response): void => {
     res.json({
       data: buildMockUser()
     });
   };
+  getNames = (req: Request, res: Response): void => {
+    const pageSize = Math.max(1, Math.min(200, toInt(req.query.size, 10)));
+    const page = Math.max(1, toInt(req.query.page, 1));
+    const start = (page - 1) * pageSize;
+    const list = buildNameList(pageSize, start);
+    const total = 100000;
+    res.json({
+      data: {
+        list,
+        total,
+        page,
+        pageSize
+      }
+    });
+  };
   getTrend = (req: Request, res: Response): void => {
     const rawYear = (req.body as { year?: unknown })?.year;
     const year = typeof rawYear === "string" ? Number.parseInt(rawYear, 10) : typeof rawYear === "number" ? rawYear : NaN;

package/src/routes/modules/mock.route.ts

@@ -5,5 +5,6 @@ const router = Router();
 
 router.get("/user", mockController.getMockUser);
 router.post("/trend", mockController.getTrend);
+router.get("/names", mockController.getNames);
 
 export default router;

package/src/services/mock.service.ts

@@ -2,6 +2,7 @@ import { randomUUID } from "node:crypto";
 
 const FIRST_NAMES = ["Alex", "Sam", "Taylor", "Jordan", "Morgan", "Casey", "Riley", "Avery"];
 const LAST_NAMES = ["Li", "Wang", "Zhang", "Chen", "Liu", "Yang", "Zhao", "Huang"];
+const DISPLAY_NAMES = ["张三", "李四", "王五", "赵六", "孙七", "周八", "吴九", "郑十"];
 
 export function buildMockUser(): { id: string; name: string; email: string; age: number; createdAt: string } {
   const firstName = pick(FIRST_NAMES);
@@ -20,6 +21,18 @@ export function buildMockUser(): { id: string; name: string; email: string; age:
   };
 }
 
+export function buildNameList(count: number, offset = 0): string[] {
+  const list: string[] = [];
+  const base = DISPLAY_NAMES;
+  const baseLen = base.length || 1;
+  for (let i = 0; i < count; i += 1) {
+    const index = offset + i;
+    const name = base[index % baseLen];
+    list.push(`${name}${index + 1}`);
+  }
+  return list;
+}
+
 export function buildYearTrend(year: number): Array<{ label: string; value: number | string }> {
   const result: Array<{ label: string; value: number | string }> = [];
   let current = new Date(Date.UTC(year, 0, 1));