a2bei4-utils 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/a2bei4.utils.cjs.js +221 -7
- package/dist/a2bei4.utils.cjs.js.map +1 -1
- package/dist/a2bei4.utils.cjs.min.js +1 -1
- package/dist/a2bei4.utils.cjs.min.js.map +1 -1
- package/dist/a2bei4.utils.esm.js +220 -8
- package/dist/a2bei4.utils.esm.js.map +1 -1
- package/dist/a2bei4.utils.esm.min.js +1 -1
- package/dist/a2bei4.utils.esm.min.js.map +1 -1
- package/dist/a2bei4.utils.umd.js +221 -7
- package/dist/a2bei4.utils.umd.js.map +1 -1
- package/dist/a2bei4.utils.umd.min.js +1 -1
- package/dist/a2bei4.utils.umd.min.js.map +1 -1
- package/dist/menu.cjs +202 -0
- package/dist/menu.cjs.map +1 -0
- package/dist/menu.js +200 -0
- package/dist/menu.js.map +1 -0
- package/dist/tree.cjs +22 -7
- package/dist/tree.cjs.map +1 -1
- package/dist/tree.js +22 -8
- package/dist/tree.js.map +1 -1
- package/package.json +12 -7
- package/types/index.d.ts +85 -2
- package/types/menu.d.ts +62 -0
- package/types/tree.d.ts +24 -2
package/dist/a2bei4.utils.cjs.js
CHANGED
|
@@ -1469,6 +1469,204 @@ class MyId {
|
|
|
1469
1469
|
}
|
|
1470
1470
|
}
|
|
1471
1471
|
|
|
1472
|
+
/**
|
|
1473
|
+
* 处理数据库菜单项,生成 UI 菜单树和路由配置。
|
|
1474
|
+
*
|
|
1475
|
+
* @param {Array<Object>} menuItems - 原始菜单项数组,树形结构
|
|
1476
|
+
* @param {Object} [options] - 配置选项
|
|
1477
|
+
* @param {string} [options.idKey='id'] - 数据源 ID 键名
|
|
1478
|
+
* @param {string} [options.codeKey='code'] - 数据源编码键名, 用于拼接路由名称和路由路径
|
|
1479
|
+
* @param {string} [options.labelKey='text'] - 数据源标签键名
|
|
1480
|
+
* @param {string} [options.childrenKey='children'] - 数据源子节点键名
|
|
1481
|
+
* @param {string} [options.extendKey='extend'] - 数据源扩展对象键名
|
|
1482
|
+
* @param {string} [options.menuIdKey='key'] - 输出菜单 ID 键名
|
|
1483
|
+
* @param {string} [options.menuLabelKey='label'] - 输出菜单标签键名
|
|
1484
|
+
* @param {string} [options.menuChildrenKey='children'] - 输出菜单子节点键名
|
|
1485
|
+
* @param {string} [options.menuExtendKey='extend'] - 输出菜单扩展对象键名
|
|
1486
|
+
* @param {string} [options.routeNameKey='name'] - 路由名称键名
|
|
1487
|
+
* @param {string} [options.routePathKey='path'] - 路由路径键名
|
|
1488
|
+
* @param {string} [options.routeMetaKey='meta'] - 路由元数据键名
|
|
1489
|
+
* @param {Function} [options.handleNodeItem] - 节点处理钩子,参数:(nodeSimple) => void
|
|
1490
|
+
* @param {Function} [options.handleMenuItem] - 菜单项处理钩子,参数:(uiMenuItem, nodeSimple) => void
|
|
1491
|
+
* @param {Function} [options.handleRouteItem] - 路由项处理钩子,参数:(routeItem, nodeSimple) => void
|
|
1492
|
+
*
|
|
1493
|
+
* @returns {Object} 处理结果
|
|
1494
|
+
* @returns {Array<Object>} returns.uiMenuItems - UI 菜单树形结构数组
|
|
1495
|
+
* @returns {Array<Object>} returns.routeItems - 扁平化路由配置数组
|
|
1496
|
+
* @returns {Map<string, Object>} returns.nodeMap - 节点 ID 到节点数据的映射表
|
|
1497
|
+
*
|
|
1498
|
+
* @example
|
|
1499
|
+
* const menuItems = [
|
|
1500
|
+
* { id: '1', code: 'system', text: '系统管理', children: [
|
|
1501
|
+
* { id: '1-1', code: 'user', text: '用户管理' }
|
|
1502
|
+
* ]}
|
|
1503
|
+
* ];
|
|
1504
|
+
*
|
|
1505
|
+
* const result = handleDbMenuItems(menuItems, {
|
|
1506
|
+
* handleRouteItem: (route, node) => {
|
|
1507
|
+
* route.component = () => import(`./views/${node.code}.vue`);
|
|
1508
|
+
* }
|
|
1509
|
+
* });
|
|
1510
|
+
*
|
|
1511
|
+
* // result.uiMenuItems: [{ key: '1', label: '系统管理', children: [...] }]
|
|
1512
|
+
* // result.routeItems: [{ name: 'system.user', path: '/system/user', meta: { id: '1-1' } }]
|
|
1513
|
+
* // result.nodeMap: Map { '1' => {...}, '1-1' => {...} }
|
|
1514
|
+
*/
|
|
1515
|
+
function handleDbMenuItems(menuItems, options = {}) {
|
|
1516
|
+
// 1. 统一配置项,简化调用
|
|
1517
|
+
const {
|
|
1518
|
+
// 数据源键名
|
|
1519
|
+
idKey = "id",
|
|
1520
|
+
codeKey = "code",
|
|
1521
|
+
labelKey = "text",
|
|
1522
|
+
childrenKey = "children",
|
|
1523
|
+
extendKey = "extend",
|
|
1524
|
+
|
|
1525
|
+
// 输出目标键名
|
|
1526
|
+
menuIdKey = "key",
|
|
1527
|
+
menuLabelKey = "label",
|
|
1528
|
+
menuChildrenKey = "children",
|
|
1529
|
+
menuExtendKey = "extend",
|
|
1530
|
+
|
|
1531
|
+
routeNameKey = "name",
|
|
1532
|
+
routePathKey = "path",
|
|
1533
|
+
routeMetaKey = "meta",
|
|
1534
|
+
|
|
1535
|
+
// 钩子函数
|
|
1536
|
+
handleNodeItem,
|
|
1537
|
+
handleMenuItem,
|
|
1538
|
+
handleRouteItem
|
|
1539
|
+
} = options;
|
|
1540
|
+
|
|
1541
|
+
const uiMenuItems = [];
|
|
1542
|
+
const routeItems = [];
|
|
1543
|
+
const nodeMap = new Map(); // id -> node (纯净的节点数据)
|
|
1544
|
+
const nodePathMap = new Map(); // id -> [{ code, id }] (仅存储路径计算所需的轻量数据)
|
|
1545
|
+
|
|
1546
|
+
/* ---------- 1. 建立索引:扁平化节点 & 构建路径索引 ---------- */
|
|
1547
|
+
// 使用栈进行深度优先遍历,记录路径
|
|
1548
|
+
const stack = [];
|
|
1549
|
+
if (Array.isArray(menuItems)) {
|
|
1550
|
+
menuItems.forEach((n) => stack.push({ node: n, parentPath: [] }));
|
|
1551
|
+
}
|
|
1552
|
+
|
|
1553
|
+
while (stack.length) {
|
|
1554
|
+
const { node, parentPath } = stack.pop();
|
|
1555
|
+
const idValue = node[idKey];
|
|
1556
|
+
|
|
1557
|
+
// 构建当前节点的路径片段
|
|
1558
|
+
const currentPathSegment = { [idKey]: idValue };
|
|
1559
|
+
const fullPath = [...parentPath, currentPathSegment];
|
|
1560
|
+
|
|
1561
|
+
// 存储路径信息用于后续路由生成
|
|
1562
|
+
nodePathMap.set(idValue, fullPath);
|
|
1563
|
+
|
|
1564
|
+
// 创建轻量级的节点对象存入 nodeMap
|
|
1565
|
+
// 注意:这里先创建基础结构,路由信息在第二步补充
|
|
1566
|
+
const nodeSimple = {
|
|
1567
|
+
...node,
|
|
1568
|
+
[extendKey]: {}, // 初始化扩展对象
|
|
1569
|
+
[childrenKey]: null // 去除原始 children,避免引用污染
|
|
1570
|
+
};
|
|
1571
|
+
nodeMap.set(idValue, nodeSimple);
|
|
1572
|
+
|
|
1573
|
+
// 处理子节点
|
|
1574
|
+
const childrenNodes = node[childrenKey];
|
|
1575
|
+
if (Array.isArray(childrenNodes)) {
|
|
1576
|
+
// 逆序压栈,保持原序
|
|
1577
|
+
for (let i = childrenNodes.length - 1; i >= 0; i--) {
|
|
1578
|
+
stack.push({ node: childrenNodes[i], parentPath: fullPath });
|
|
1579
|
+
}
|
|
1580
|
+
}
|
|
1581
|
+
}
|
|
1582
|
+
|
|
1583
|
+
/* ---------- 2. 构建树形结构 & 生成路由 ---------- */
|
|
1584
|
+
const buildStack = [];
|
|
1585
|
+
if (Array.isArray(menuItems)) {
|
|
1586
|
+
for (let i = menuItems.length - 1; i >= 0; i--) {
|
|
1587
|
+
buildStack.push({ node: menuItems[i], parentUi: undefined });
|
|
1588
|
+
}
|
|
1589
|
+
}
|
|
1590
|
+
|
|
1591
|
+
while (buildStack.length) {
|
|
1592
|
+
const { node, parentUi } = buildStack.pop();
|
|
1593
|
+
const idValue = node[idKey];
|
|
1594
|
+
|
|
1595
|
+
// 从 Map 中取出之前创建好的节点对象
|
|
1596
|
+
const nodeSimple = nodeMap.get(idValue);
|
|
1597
|
+
|
|
1598
|
+
// 2.1 构建 UI 菜单项
|
|
1599
|
+
const uiMenuItem = {
|
|
1600
|
+
[menuIdKey]: idValue,
|
|
1601
|
+
[menuLabelKey]: node[labelKey],
|
|
1602
|
+
[menuExtendKey]: {} // UI 菜单专用扩展
|
|
1603
|
+
};
|
|
1604
|
+
|
|
1605
|
+
// 处理子节点
|
|
1606
|
+
const childrenNodes = node[childrenKey];
|
|
1607
|
+
const hasChildren = Array.isArray(childrenNodes) && childrenNodes.length > 0;
|
|
1608
|
+
|
|
1609
|
+
if (hasChildren) {
|
|
1610
|
+
// 有子节点 -> 继续压栈,传递当前 uiMenuItem 作为父级
|
|
1611
|
+
for (let i = childrenNodes.length - 1; i >= 0; i--) {
|
|
1612
|
+
buildStack.push({ node: childrenNodes[i], parentUi: uiMenuItem });
|
|
1613
|
+
}
|
|
1614
|
+
} else {
|
|
1615
|
+
// 2.2 无子节点 -> 生成路由配置
|
|
1616
|
+
|
|
1617
|
+
// 提取 code 和 id 数组
|
|
1618
|
+
const codePaths = [],
|
|
1619
|
+
keyPaths = [];
|
|
1620
|
+
nodePathMap.get(idValue).forEach((item) => {
|
|
1621
|
+
const idValue = item[idKey];
|
|
1622
|
+
const nodeSimple = nodeMap.get(idValue);
|
|
1623
|
+
keyPaths.push(idValue);
|
|
1624
|
+
codePaths.push(nodeSimple[codeKey]);
|
|
1625
|
+
});
|
|
1626
|
+
|
|
1627
|
+
const routeName = codePaths.join(".");
|
|
1628
|
+
const routePath = "/" + codePaths.join("/");
|
|
1629
|
+
|
|
1630
|
+
const routeItem = {
|
|
1631
|
+
[routeNameKey]: routeName,
|
|
1632
|
+
[routePathKey]: routePath,
|
|
1633
|
+
[routeMetaKey]: { [idKey]: idValue }
|
|
1634
|
+
};
|
|
1635
|
+
|
|
1636
|
+
// 执行路由钩子
|
|
1637
|
+
if (typeof handleRouteItem === "function") {
|
|
1638
|
+
handleRouteItem(routeItem, nodeSimple);
|
|
1639
|
+
}
|
|
1640
|
+
routeItems.push(routeItem);
|
|
1641
|
+
|
|
1642
|
+
// 补充扩展信息
|
|
1643
|
+
uiMenuItem[menuExtendKey].routeName = routeName;
|
|
1644
|
+
uiMenuItem[menuExtendKey].keyPaths = keyPaths;
|
|
1645
|
+
|
|
1646
|
+
nodeSimple[extendKey].routeName = routeName;
|
|
1647
|
+
nodeSimple[extendKey].keyPaths = keyPaths;
|
|
1648
|
+
}
|
|
1649
|
+
|
|
1650
|
+
// 2.3 挂载到父级 UI 或根数组
|
|
1651
|
+
if (parentUi) {
|
|
1652
|
+
// 逻辑赋值,确保 children 数组存在
|
|
1653
|
+
(parentUi[menuChildrenKey] || (parentUi[menuChildrenKey] = [])).push(uiMenuItem);
|
|
1654
|
+
} else {
|
|
1655
|
+
if (typeof handleMenuItem === "function") {
|
|
1656
|
+
handleMenuItem(uiMenuItem, nodeSimple);
|
|
1657
|
+
}
|
|
1658
|
+
uiMenuItems.push(uiMenuItem);
|
|
1659
|
+
}
|
|
1660
|
+
|
|
1661
|
+
// 执行节点钩子
|
|
1662
|
+
if (typeof handleNodeItem === "function") {
|
|
1663
|
+
handleNodeItem(nodeSimple);
|
|
1664
|
+
}
|
|
1665
|
+
}
|
|
1666
|
+
|
|
1667
|
+
return { uiMenuItems, routeItems, nodeMap };
|
|
1668
|
+
}
|
|
1669
|
+
|
|
1472
1670
|
/**
|
|
1473
1671
|
* 基于 `setTimeout` 的“间隔循环”定时器。
|
|
1474
1672
|
* 每次任务执行完成后才计算下一次间隔,避免任务堆积。
|
|
@@ -1589,31 +1787,45 @@ function flatCompleteTree2NestedTree(nodes, parentId = 0, { idKey = "id", parent
|
|
|
1589
1787
|
}
|
|
1590
1788
|
|
|
1591
1789
|
/**
|
|
1592
|
-
* 在嵌套树中按 `id`
|
|
1790
|
+
* 在嵌套树中按 `id` 递归查找节点
|
|
1593
1791
|
*
|
|
1594
1792
|
* @template T extends Record<PropertyKey, any>
|
|
1595
1793
|
* @param {string | number} id - 要查找的 id
|
|
1596
1794
|
* @param {T[]} arr - 嵌套树森林
|
|
1597
|
-
* @param {string} [resultKey='name'] - 需要返回的字段
|
|
1598
1795
|
* @param {string} [idKey='id'] - 主键字段
|
|
1599
1796
|
* @param {string} [childrenKey='children'] - 子节点字段
|
|
1600
|
-
* @returns {
|
|
1797
|
+
* @returns {T | undefined} 找到的节点;未找到返回 `undefined`
|
|
1601
1798
|
*/
|
|
1602
|
-
|
|
1799
|
+
function findTreeNodeById(id, arr, idKey = "id", childrenKey = "children") {
|
|
1603
1800
|
if (Array.isArray(arr) && arr.length > 0) {
|
|
1604
1801
|
for (let i = 0; i < arr.length; i++) {
|
|
1605
1802
|
const item = arr[i];
|
|
1606
1803
|
if (item[idKey]?.toString() === id?.toString()) {
|
|
1607
|
-
return item
|
|
1804
|
+
return item;
|
|
1608
1805
|
} else if (Array.isArray(item[childrenKey]) && item[childrenKey].length > 0) {
|
|
1609
|
-
const result =
|
|
1806
|
+
const result = findTreeNodeById(id, item[childrenKey], idKey, childrenKey);
|
|
1610
1807
|
if (result) {
|
|
1611
1808
|
return result;
|
|
1612
1809
|
}
|
|
1613
1810
|
}
|
|
1614
1811
|
}
|
|
1615
1812
|
}
|
|
1616
|
-
}
|
|
1813
|
+
}
|
|
1814
|
+
|
|
1815
|
+
/**
|
|
1816
|
+
* 在嵌套树中按 `id` 递归查找节点,并返回其指定属性值。
|
|
1817
|
+
*
|
|
1818
|
+
* @template T extends Record<PropertyKey, any>
|
|
1819
|
+
* @param {string | number} id - 要查找的 id
|
|
1820
|
+
* @param {T[]} arr - 嵌套树森林
|
|
1821
|
+
* @param {string} [resultKey='name'] - 需要返回的字段
|
|
1822
|
+
* @param {string} [idKey='id'] - 主键字段
|
|
1823
|
+
* @param {string} [childrenKey='children'] - 子节点字段
|
|
1824
|
+
* @returns {any} 找到的值;未找到返回 `undefined`
|
|
1825
|
+
*/
|
|
1826
|
+
function findObjAttrValueById(id, arr, resultKey = "name", idKey = "id", childrenKey = "children") {
|
|
1827
|
+
return findTreeNodeById(id, arr, idKey, childrenKey)?.[resultKey];
|
|
1828
|
+
}
|
|
1617
1829
|
|
|
1618
1830
|
/**
|
|
1619
1831
|
* 从服务端返回的已选 id 数组里,提取出
|
|
@@ -2111,6 +2323,7 @@ exports.downloadJSON = downloadJSON;
|
|
|
2111
2323
|
exports.extractFullyCheckedKeys = extractFullyCheckedKeys;
|
|
2112
2324
|
exports.fetchOrDownloadByUrl = fetchOrDownloadByUrl;
|
|
2113
2325
|
exports.findObjAttrValueById = findObjAttrValueById;
|
|
2326
|
+
exports.findTreeNodeById = findTreeNodeById;
|
|
2114
2327
|
exports.flatCompleteTree2NestedTree = flatCompleteTree2NestedTree;
|
|
2115
2328
|
exports.formatTimeForLocale = formatTimeForLocale;
|
|
2116
2329
|
exports.getAllSearchParams = getAllSearchParams;
|
|
@@ -2120,6 +2333,7 @@ exports.getGUID = getGUID;
|
|
|
2120
2333
|
exports.getSearchParam = getSearchParam;
|
|
2121
2334
|
exports.getTimePeriodName = getTimePeriodName;
|
|
2122
2335
|
exports.getViewportSize = getViewportSize;
|
|
2336
|
+
exports.handleDbMenuItems = handleDbMenuItems;
|
|
2123
2337
|
exports.isBlob = isBlob;
|
|
2124
2338
|
exports.isDate = isDate;
|
|
2125
2339
|
exports.isFunction = isFunction;
|