arms-app 1.0.68 → 1.0.70

package/view/3.js

@@ -1,289 +0,0 @@
-/**
- * 在树形结构中通过ID查找对象
- * @param {Array} treeData - 树形结构数组
- * @param {string|number} targetId - 要查找的目标ID
- * @returns {Object|null} 找到的对象或null
- */
-function findNodeById(treeData, targetId) {
-    for (let node of treeData) {
-        // 检查当前节点是否匹配目标ID
-        if (node.id === targetId) {
-            return node;
-        }
-
-        // 只有当children存在且为非空数组时才递归查找
-        if (node.children && Array.isArray(node.children) && node.children.length > 0) {
-            const found = findNodeById(node.children, targetId);
-            if (found) {
-                return found;
-            }
-        }
-    }
-    return null;
-}
-// 复杂的电商系统权限树 - 模拟真实业务场景
-const complexBusinessData = [
-    {
-        id: 1,
-        name: "系统总览",
-        code: "dashboard",
-        type: "menu",
-        icon: "dashboard",
-        children: []
-    },
-
-    {
-        id: 2,
-        name: "商品管理",
-        code: "product",
-        type: "module",
-        icon: "shopping-bag",
-        children: [
-            {
-                id: 3,
-                name: "商品基础信息",
-                code: "product_base",
-                type: "menu",
-                children: [
-                    {
-                        id: 4,
-                        name: "商品列表",
-                        code: "product_list",
-                        type: "page",
-                        children: [
-                            { id: 5, name: "查看商品", code: "view_product", type: "permission", action: ["read"] },
-                            { id: 6, name: "添加商品", code: "add_product", type: "permission", action: ["create"] },
-                            { id: 7, name: "编辑商品", code: "edit_product", type: "permission", action: ["update"] },
-                            { id: 8, name: "删除商品", code: "delete_product", type: "permission", action: ["delete"] }
-                        ]
-                    },
-                    {
-                        id: 9,
-                        name: "商品分类",
-                        code: "product_category",
-                        type: "page",
-                        children: [
-                            { id: 10, name: "查看分类", code: "view_category", type: "permission", action: ["read"] },
-                            { id: 11, name: "管理分类", code: "manage_category", type: "permission", action: ["create", "update", "delete"] }
-                        ]
-                    },
-                    {
-                        id: 12,
-                        name: "品牌管理",
-                        code: "brand_management",
-                        type: "page",
-                        children: [
-                            { id: 13, name: "查看品牌", code: "view_brand", type: "permission" },
-                            { id: 14, name: "品牌审核", code: "audit_brand", type: "permission" }
-                        ]
-                    }
-                ]
-            },
-
-            {
-                id: 15,
-                name: "库存管理",
-                code: "inventory",
-                type: "menu",
-                children: [
-                    {
-                        id: 16,
-                        name: "仓库管理",
-                        code: "warehouse",
-                        type: "page",
-                        children: [
-                            { id: 17, name: "查看仓库", code: "view_warehouse", type: "permission" },
-                            { id: 18, name: "管理仓库", code: "manage_warehouse", type: "permission" }
-                        ]
-                    },
-                    {
-                        id: 19,
-                        name: "库存调拨",
-                        code: "stock_transfer",
-                        type: "page",
-                        children: [
-                            { id: 20, name: "发起调拨", code: "initiate_transfer", type: "permission" },
-                            { id: 21, name: "审批调拨", code: "approve_transfer", type: "permission" },
-                            { id: 22, name: "执行调拨", code: "execute_transfer", type: "permission" }
-                        ]
-                    },
-                    {
-                        id: 23,
-                        name: "盘点管理",
-                        code: "inventory_count",
-                        type: "page",
-                        children: [
-                            { id: 24, name: "创建盘点", code: "create_count", type: "permission" },
-                            { id: 25, name: "盘点审核", code: "audit_count", type: "permission" },
-                            { id: 26, name: "盘点报表", code: "count_report", type: "permission" }
-                        ]
-                    }
-                ]
-            },
-
-            {
-                id: 27,
-                name: "价格策略",
-                code: "pricing",
-                type: "menu",
-                children: [
-                    {
-                        id: 28,
-                        name: "促销活动",
-                        code: "promotion",
-                        type: "page",
-                        children: [
-                            { id: 29, name: "限时折扣", code: "flash_sale", type: "permission" },
-                            { id: 30, name: "满减活动", code: "full_reduction", type: "permission" },
-                            { id: 31, name: "优惠券", code: "coupon", type: "permission" }
-                        ]
-                    }
-                ]
-            }
-        ]
-    },
-
-    {
-        id: 32,
-        name: "订单管理",
-        code: "order",
-        type: "module",
-        children: [
-            {
-                id: 33,
-                name: "订单处理",
-                code: "order_processing",
-                type: "menu",
-                children: [
-                    {
-                        id: 34,
-                        name: "订单查询",
-                        code: "order_query",
-                        type: "page",
-                        children: [
-                            { id: 35, name: "今日订单", code: "today_order", type: "permission" },
-                            { id: 36, name: "历史订单", code: "history_order", type: "permission" },
-                            { id: 37, name: "异常订单", code: "abnormal_order", type: "permission" }
-                        ]
-                    },
-                    {
-                        id: 38,
-                        name: "订单操作",
-                        code: "order_operation",
-                        type: "page",
-                        children: [
-                            { id: 39, name: "确认订单", code: "confirm_order", type: "permission" },
-                            { id: 40, name: "取消订单", code: "cancel_order", type: "permission" },
-                            { id: 41, name: "退款处理", code: "refund_order", type: "permission" }
-                        ]
-                    }
-                ]
-            },
-
-            {
-                id: 42,
-                name: "物流配送",
-                code: "logistics",
-                type: "menu",
-                children: [
-                    {
-                        id: 43,
-                        name: "配送管理",
-                        code: "delivery",
-                        type: "page",
-                        children: [
-                            { id: 44, name: "发货管理", code: "shipping", type: "permission" },
-                            { id: 45, name: "快递跟踪", code: "tracking", type: "permission" },
-                            { id: 46, name: "签收确认", code: "sign_confirm", type: "permission" }
-                        ]
-                    }
-                ]
-            }
-        ]
-    },
-
-    {
-        id: 47,
-        name: "用户中心",
-        code: "user",
-        type: "module",
-        children: [
-            {
-                id: 48,
-                name: "会员管理",
-                code: "member",
-                type: "menu",
-                children: [
-                    {
-                        id: 49,
-                        name: "会员信息",
-                        code: "member_info",
-                        type: "page",
-                        children: [
-                            { id: 50, name: "会员列表", code: "member_list", type: "permission" },
-                            { id: 51, name: "会员等级", code: "member_level", type: "permission" },
-                            { id: 52, name: "积分管理", code: "points_manage", type: "permission" }
-                        ]
-                    },
-                    {
-                        id: 53,
-                        name: "用户行为",
-                        code: "user_behavior",
-                        type: "page",
-                        children: [
-                            { id: 54, name: "浏览记录", code: "browse_history", type: "permission" },
-                            { id: 55, name: "购买偏好", code: "purchase_preference", type: "permission" }
-                        ]
-                    }
-                ]
-            }
-        ]
-    },
-
-    {
-        id: 56,
-        name: "数据中心",
-        code: "analytics",
-        type: "module",
-        children: [
-            {
-                id: 57,
-                name: "报表统计",
-                code: "reports",
-                type: "menu",
-                children: [
-                    {
-                        id: 58,
-                        name: "销售报表",
-                        code: "sales_report",
-                        type: "page",
-                        children: [
-                            { id: 59, name: "日销售报表", code: "daily_sales", type: "permission" },
-                            { id: 60, name: "月销售报表", code: "monthly_sales", type: "permission" },
-                            { id: 61, name: "年销售报表", code: "yearly_sales", type: "permission" }
-                        ]
-                    },
-                    {
-                        id: 62,
-                        name: "运营报表",
-                        code: "operation_report",
-                        type: "page",
-                        children: [
-                            { id: 63, name: "流量分析", code: "traffic_analysis", type: "permission" },
-                            { id: 64, name: "转化分析", code: "conversion_analysis", type: "permission" },
-                            { id: 63, name: "用户留存", code: "user_retention", type: "permission" }  // 故意重复的ID用于测试
-                        ]
-                    }
-                ]
-            }
-        ]
-    }
-];
-
-console.log(findNodeById(complexBusinessData, 32));
-console.log('================')
-console.log(findNodeById(complexBusinessData, 33));
-console.log('================')
-console.log(findNodeById(complexBusinessData, 34));
-console.log('================')
-console.log(findNodeById(complexBusinessData, 35));

package/view/3.vue

@@ -1,289 +0,0 @@
-<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>