arms-app 1.0.62 → 1.0.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arms-app",
-  "version": "1.0.62",
+  "version": "1.0.64",
   "description": "一个基于 Express 的 Web 应用1",
   "main": "index.js",
   "scripts": {

package/view/1.vue

@@ -50,12 +50,21 @@ export default {
     },
   },
   mounted() {
-    this.list = Array.from({ length: 15 }, (_, i) => `列表项 ${i + 1}`);
-    this.$nextTick(() => {
-      if (this.$refs.ss && this.$refs.ss.reset) this.$refs.ss.reset();
-    });
+    this.fetchData();
   },
   methods: {
+    async fetchData() {
+      // 模拟接口请求
+      console.log('开始获取数据...');
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      const data = Array.from({ length: 5000 }, (_, i) => `列表项 ${i + 1}`);
+      // 使用 Object.freeze 冻结数据，避免 Vue 深度监听，显著提升大数据量下的渲染性能
+      this.list = Object.freeze(data);
+      console.log('数据获取完成，共', this.list.length, '条');
+      this.$nextTick(() => {
+        if (this.$refs.ss && this.$refs.ss.reset) this.$refs.ss.reset();
+      });
+    },
     onWheel(e) {
       const ss = this.$refs.ss;
       if (!ss) return;

package/view/2.vue

@@ -0,0 +1,129 @@
+<template>
+  <el-dialog
+    :visible.sync="visibleInner"
+    title="列表"
+    width="800px"
+    :close-on-click-modal="false"
+    @open="onOpen"
+    @closed="onClosed"
+  >
+    <!-- 表格只渲染当前页 rows（10条） -->
+    <el-table
+      :data="rows"
+      height="400"
+      border
+      row-key="id"
+    >
+      <el-table-column prop="id" label="ID" width="120" />
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="status" label="状态" width="120" />
+    </el-table>
+
+    <div style="margin-top: 12px; text-align: right;">
+      <el-pagination
+        background
+        layout="total, prev, pager, next, sizes"
+        :total="total"
+        :current-page.sync="page"
+        :page-size.sync="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        @current-change="refreshPage"
+        @size-change="onSizeChange"
+      />
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="close">关闭</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "ChildDialog",
+  props: {
+    // 只控制显隐，不要用 props 传 5000 条
+    visible: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      // 内部 visible（避免直接改 props）
+      visibleInner: false,
+
+      // 只存 UI 需要的（轻量）
+      page: 1,
+      pageSize: 10,
+      total: 0,
+      rows: []
+    };
+  },
+
+  watch: {
+    // 父组件控制打开/关闭
+    visible: {
+      immediate: true,
+      handler(v) {
+        this.visibleInner = v;
+      }
+    },
+    // 同步回父组件（:visible.sync）
+    visibleInner(v) {
+      this.$emit("update:visible", v);
+    }
+  },
+
+  created() {
+    // 非响应式大数据容器（不要放 data 里）
+    this._rawList = [];
+    this._hasData = false;
+  },
+
+  methods: {
+    /** 父组件 open 后调用：this.$refs.dlg.setData(bigList) */
+    setData(list) {
+      // 关键：不放 data，不做深拷贝，不 deep watch
+      this._rawList = Array.isArray(list) ? list : [];
+      this._hasData = true;
+
+      // 初始化分页
+      this.page = 1;
+      this.total = this._rawList.length;
+
+      // 如果 dialog 已经打开，立刻刷新；否则等 onOpen 再刷
+      if (this.visibleInner) this.refreshPage();
+    },
+
+    onOpen() {
+      // dialog 打开后，如果数据已设置，刷新一次（渲染10条）
+      if (this._hasData) this.refreshPage();
+    },
+
+    onClosed() {
+      // 关闭时只清理轻量状态，避免销毁/重建造成卡顿
+      this.rows = [];
+      this.page = 1;
+      // 如果你希望下次打开仍复用数据，就别清 _rawList
+      // this._rawList = [];
+      // this._hasData = false;
+    },
+
+    refreshPage() {
+      const start = (this.page - 1) * this.pageSize;
+      const end = start + this.pageSize;
+
+      // 只 slice 当前页，rows 才是响应式的
+      this.rows = this._rawList.slice(start, end);
+      this.total = this._rawList.length;
+    },
+
+    onSizeChange() {
+      this.page = 1;
+      this.refreshPage();
+    },
+
+    close() {
+      this.visibleInner = false;
+    }
+  }
+};
+</script>

package/view/3.vue

@@ -0,0 +1,289 @@
+<template>
+  <section class="page">
+    <h3>虚拟滚动（DOM 池 + translateY）</h3>
+
+    <div
+      class="viewport"
+      :style="{ height: viewportHeight + 'px' }"
+      @wheel.prevent="onWheel"
+      @mouseenter="hover = true"
+      @mouseleave="hover = false"
+    >
+      <!-- 真实渲染的少量行（可视行 + buffer），DOM 数量不会随全量数据增长 -->
+      <div class="track" :style="{ transform: `translateY(${-offset}px)` }">
+        <div
+          v-for="row in pool"
+          :key="row.__k"
+          class="row"
+          :style="{ height: rowHeight + 'px', lineHeight: rowHeight + 'px' }"
+        >
+          <span class="cell">{{ row.name }}</span>
+          <span class="cell">{{ row.score }}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+// 虚拟滚动示例：通过「固定数量的 DOM 池 + translateY」实现高性能长列表展示
+export default {
+  // 组件名称，用于路由懒加载和调试
+  name: "VirtualPoolScrollView",
+  props: {
+    // 备用的全量数据（演示时可通过 props 直接传入），实际项目通常来自接口
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    // 单行高度（像素），用于计算视口高度和滚动归一化
+    rowHeight: { type: Number, default: 40 },
+    // 视口中一次性可见的行数
+    visible: { type: Number, default: 3 },
+    // 自动滚动速度：px / 秒
+    speed: { type: Number, default: 30 },
+    // DOM 池额外渲染几行，避免边缘抖动
+    buffer: { type: Number, default: 3 },
+    // 用户滚轮后暂停自动滚动多久（毫秒）
+    resumeDelay: { type: Number, default: 800 },
+  },
+
+  data() {
+    return {
+      // 当前偏移量（单位：px），始终保持在 [0, rowHeight) 区间内循环
+      offset: 0,
+      // DOM 池中的可见数据，仅维护少量行（可视行 + buffer）
+      pool: [],
+      // 当前池子第一条数据在全量列表中的索引
+      headIndex: 0,
+      // 当前 requestAnimationFrame 的 ID，用于停止动画
+      rafId: null,
+      // 上一次 requestAnimationFrame 回调的时间戳（毫秒），用于计算时间增量
+      lastTs: 0,
+      // 鼠标是否悬停在列表上，悬停时会暂停自动滚动
+      hover: false,
+      // 用户最近一次滚轮操作后，自动滚动暂停到的时间点（时间戳）
+      userPausedUntil: 0,
+      // 递增的 key 种子，用于确保 v-for 渲染的每一行有稳定的唯一 key
+      keySeed: 0,
+      // 从接口拉取到的全量数据列表，优先作为虚拟滚动的数据源
+      fetchedList: [],
+    };
+  },
+
+  computed: {
+    // 实际参与虚拟滚动的全量列表：优先使用接口返回的 fetchedList，其次使用 props.list
+    effectiveList() {
+      if (Array.isArray(this.fetchedList) && this.fetchedList.length) {
+        return this.fetchedList;
+      }
+      return Array.isArray(this.list) ? this.list : [];
+    },
+    // 视口高度 = 单行高度 * 可视行数
+    viewportHeight() {
+      return this.rowHeight * this.visible;
+    },
+    // DOM 池大小：可视行 + 预渲染 buffer，避免边缘抖动
+    poolSize() {
+      return this.visible + this.buffer;
+    },
+    // 是否可以启动自动滚动（数据量需要大于可视行数）
+    canRun() {
+      return Array.isArray(this.effectiveList) && this.effectiveList.length > this.visible;
+    },
+  },
+
+  watch: {
+    // 当外部通过 props.list 传入的新数据变更时，重置池子以适配新数据
+    list: {
+      immediate: true,
+      handler() {
+        this.resetPool();
+      },
+    },
+  },
+
+  mounted() {
+    // 组件挂载后先拉取接口数据，拉取结束后再启动自动滚动
+    this.loadListFromApi().finally(() => {
+      this.start();
+    });
+  },
+
+  beforeDestroy() {
+    this.stop();
+  },
+
+  methods: {
+    // 从接口响应中提取列表数据，统一兼容结构
+    extractListFromResponse(json) {
+      if (!json) return [];
+      if (Array.isArray(json.data)) return json.data;
+      if (Array.isArray(json.list)) return json.list;
+      if (Array.isArray(json)) return json;
+      return [];
+    },
+
+    // 将接口返回的单条记录映射为虚拟列表行数据
+    mapItemToRow(item, index) {
+      const name = item && item.name != null ? item.name : "用户 " + (index + 1);
+      const score = item && item.description != null ? item.description : "";
+      return { name, score };
+    },
+
+    // 一次性从接口拉取全量列表数据
+    async loadListFromApi() {
+      try {
+        // 通过 devServer 代理转发到后端 http://localhost:3000/api/list?page=1
+        const response = await fetch(`/api/list?page=1`);
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        // 解析 JSON 响应体
+        const json = await response.json();
+        // 统一提取出用于渲染的基础数组
+        const list = this.extractListFromResponse(json);
+        // 将后端结构映射为虚拟列表行结构
+        this.fetchedList = list.map((item, index) => this.mapItemToRow(item, index));
+        this.resetPool();
+      } catch (e) {
+        console.error("加载列表数据失败", e);
+        this.resetPool();
+      }
+    },
+    // 重置 DOM 池状态，并根据当前有效列表重新填充池子
+    resetPool() {
+      this.offset = 0;
+      this.lastTs = 0;
+      this.headIndex = 0;
+      this.keySeed = 0;
+
+      const source = this.effectiveList;
+      const n = Array.isArray(source) ? source.length : 0;
+      if (!n) {
+        this.pool = [];
+        return;
+      }
+
+      const size = Math.min(this.poolSize, n);
+      this.pool = Array.from({ length: size }, (_, i) => {
+        const item = source[(this.headIndex + i) % n];
+        return { ...item, __k: ++this.keySeed }; // __k 只用于 v-for key
+      });
+    },
+
+    // 启动基于 requestAnimationFrame 的自动滚动循环
+    start() {
+      const tick = (ts) => {
+        this.rafId = requestAnimationFrame(tick);
+        if (!this.canRun) return;
+
+        const now = Date.now();
+        if (now < this.userPausedUntil) return;
+        if (this.hover) return;
+
+        if (!this.lastTs) this.lastTs = ts;
+        const dt = (ts - this.lastTs) / 1000;
+        this.lastTs = ts;
+
+        // 自动滚动：offset 增加
+        this.offset += this.speed * dt;
+        this.normalizeForward();
+      };
+
+      this.rafId = requestAnimationFrame(tick);
+    },
+
+    // 停止自动滚动
+    stop() {
+      if (this.rafId) cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    },
+
+    // 向下滚动（内容向上移动）：offset 累积到一行高度后，将第一条移到末尾，实现 DOM 循环复用
+    normalizeForward() {
+      const source = this.effectiveList;
+      const n = Array.isArray(source) ? source.length : 0;
+      if (!n) return;
+
+      while (this.offset >= this.rowHeight) {
+        this.offset -= this.rowHeight;
+        // headIndex 前进一条
+        this.headIndex = (this.headIndex + 1) % n;
+
+        // pool 复用：shift 掉第一条，push 新的一条
+        this.pool.shift();
+        const tailIdx = (this.headIndex + this.pool.length) % n;
+        const newItem = source[tailIdx];
+        this.pool.push({ ...newItem, __k: ++this.keySeed });
+      }
+    },
+
+    // 向上滚动：offset 为负时，将最后一条移到头部，实现 DOM 循环复用
+    normalizeBackward() {
+      const source = this.effectiveList;
+      const n = Array.isArray(source) ? source.length : 0;
+      if (!n) return;
+
+      while (this.offset < 0) {
+        this.offset += this.rowHeight;
+        // headIndex 后退一条
+        this.headIndex = (this.headIndex - 1 + n) % n;
+
+        // pool 复用：pop 掉最后一条，unshift 新的一条
+        this.pool.pop();
+        const newHead = source[this.headIndex];
+        this.pool.unshift({ ...newHead, __k: ++this.keySeed });
+      }
+    },
+
+    // 处理用户滚轮交互：手动调整 offset，并在一段时间内暂停自动滚动
+    onWheel(e) {
+      const source = this.effectiveList;
+      const n = Array.isArray(source) ? source.length : 0;
+      if (!n) return;
+
+      // wheel：deltaY > 0 代表向下滚（内容向上走）
+      const delta = e.deltaY;
+
+      // 交互暂停自动滚动一会儿（否则会“抢滚动”）
+      this.userPausedUntil = Date.now() + this.resumeDelay;
+
+      this.offset += delta;
+      this.normalizeForward();
+      this.normalizeBackward();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.page {
+  padding: 20px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.viewport {
+  overflow: hidden;
+  position: relative;
+  border: 1px solid #eee;
+  user-select: none;
+  width: 340px;
+  background: #fff;
+}
+
+.track {
+  will-change: transform;
+}
+
+.row {
+  display: flex;
+  padding: 0 12px;
+  border-bottom: 1px solid #f3f3f3;
+  box-sizing: border-box;
+}
+
+.cell {
+  width: 140px;
+}
+</style>

package/view/4.vue

@@ -0,0 +1,74 @@
+<template>
+  <section class="person-table-page">
+    <h1>人员信息表</h1>
+    <el-table
+      :data="rows"
+      border
+      stripe
+      size="small"
+      style="width: 100%"
+    >
+      <el-table-column type="index" label="序号" width="60" align="center" />
+      <el-table-column prop="name" label="人员姓名" min-width="100" />
+      <el-table-column label="性别" width="80">
+        <template slot-scope="scope">
+          {{ formatSex(scope.row.sex) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="postName" label="岗位" min-width="80" />
+      <el-table-column prop="happenPerio" label="入行日期" min-width="110" />
+      <el-table-column prop="telNo" label="联系方式" min-width="130" />
+      <el-table-column prop="dtlAddr" label="现居住地" min-width="120" />
+      <el-table-column prop="emergContactPersonName" label="紧急联系人" min-width="100" />
+      <el-table-column prop="emergContactPhoneNo" label="紧急联系方式" min-width="130" />
+      <el-table-column prop="birthDt" label="出生日期" min-width="110" />
+      <el-table-column prop="highestEduDegreeDesc" label="最高学历" min-width="90" />
+      <el-table-column prop="createTm" label="创建日期" min-width="110" />
+      <el-table-column prop="rmk" label="备注" min-width="120" />
+    </el-table>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "PersonTableView",
+  data() {
+    return {
+      rows: [
+        {
+          id: 3286648151643648,
+          name: "李白",
+          sex: "1",
+          postName: "保洁",
+          happenPerio: "2002-02-02",
+          telNo: "18966541247",
+          dtlAddr: "北京",
+          emergContactPersonName: "王安石",
+          emergContactPhoneNo: "15466257489",
+          birthDt: "2000-02-02",
+          highestEduDegreeDesc: "硕士",
+          createTm: "2025-12-25",
+          rmk: "好人",
+          beloOrgNO: "000291",
+          creatorNo: "022171",
+          delFlag: "0",
+        },
+      ],
+    };
+  },
+  methods: {
+    formatSex(v) {
+      if (v === "1" || v === 1) return "男";
+      if (v === "2" || v === 2) return "女";
+      return "";
+    },
+  },
+};
+</script>
+
+<style scoped>
+.person-table-page {
+  padding: 24px;
+}
+</style>
+