修改分组与组件顺序
在设计器中，左侧“组件面板”的展示顺序通常由两部分共同决定：
- 分组（菜单）顺序：由菜单配置文件控制（分组在数组中的先后顺序，就是最终显示顺序）
- 组件（DragRule）顺序：由 DragRule 汇总文件中的数组顺序控制（组件在数组中的先后顺序，就是分组内组件的展示顺序）
本文讲清楚如何在源码层二开实现：
- 调整左侧面板 分组的排列顺序
- 调整每个分组下 组件的排列顺序
你要改哪些地方？
本主题只涉及两处配置文件，属于低风险 UI 排序调整：
- 分组配置（菜单）：
/src/config/menu.js - 组件汇总（DragRule 列表）：
/src/config/index.js
核心原则：数组顺序 = 展示顺序。通常不需要改组件实现、渲染器注册、或数据结构。
参考样例
可以先对照你项目里“当前显示顺序”和“配置文件数组顺序”是否一致：
- 左侧面板看到的分组顺序，是否等同于
menu.js里配置的顺序 - 某个分组下组件的顺序，是否等同于
index.js里 DragRule 数组的顺序（结合每个 DragRule 的menu字段归类）
修改分组顺序
1. 定位分组配置文件
打开：
/src/config/menu.js
你通常会看到一个“分组数组”的导出结构。
2. 调整数组顺序
把你希望“更靠前展示”的分组对象移动到数组更前面即可。
示例（仅示意：把“布局组件”移动到“基础组件”之前）：
// before
export default [
{ name: 'main', title: '基础组件', /* ... */ },
{ name: 'layout', title: '布局组件', /* ... */ },
{ name: 'advanced', title: '高级组件', /* ... */ },
];
// after
export default [
{ name: 'layout', title: '布局组件', /* ... */ },
{ name: 'main', title: '基础组件', /* ... */ },
{ name: 'advanced', title: '高级组件', /* ... */ },
];3. 新增一个分组
如果你想新增一个“业务组件”分组，本质就是在 menu.js 里追加一个分组对象（并按你希望的展示顺序放到数组对应位置）。
示例（仅示意：新增 biz 分组，并放到 main 后面）：
export default [
{ name: 'main', title: '基础组件', /* ... */ },
// 新增：业务组件分组
{
name: 'biz', // 分组 key：需要与 DragRule.menu 对应
title: '业务组件', // 左侧分组标题
// icon: 'icon-app', // 如果你的项目支持分组图标，可按既有字段补充
// show: true, // 若项目有显隐字段，可按既有字段补充
},
{ name: 'layout', title: '布局组件', /* ... */ },
{ name: 'advanced', title: '高级组件', /* ... */ },
];修改组件顺序
1. 定位 DragRule 汇总文件
打开：
/src/config/index.js
该文件通常会：
import一批 DragRule（每个组件一个规则文件）- 把它们按数组顺序放入一个列表导出
2. 明确“组件归属哪个分组”
组件属于哪个分组，一般看 DragRule 自身的字段（常见是 menu: 'main' 这类 key）。
因此你在调整顺序时要注意：只需要调整该分组对应的 DragRule 在数组中的相对顺序
3. 调整数组顺序
示例 1：通过“调整数组中 push/排列顺序”改变展示顺序（最常见）
// before（main 分组内：input 在 select 前）
export const ruleList = [
input,
select,
radio,
// ...
];
// after（main 分组内：select 提前）
export const ruleList = [
select,
input,
radio,
// ...
];示例 2：如果你的汇总方式是“先定义数组，再 push”，也同理
// before
const ruleList = [];
ruleList.push(input);
ruleList.push(select);
// after
const ruleList = [];
ruleList.push(select);
ruleList.push(input);4. 在分组中添加组件
“在某个分组中添加组件”通常分两步：
- 让组件归属到目标分组：在该组件的 DragRule 中设置
menu: '<分组 key>'（例如menu: 'biz'） - 控制它在分组内的位置：在
index.js的 DragRule 数组里，把它放到你希望的相对顺序位置
示例（仅示意：把一个新 DragRule userSelect 加到 biz 分组，并排在 customerSelect 前面）：
// /src/config/index.js
import userSelect from './rule/userSelect';
import customerSelect from './rule/customerSelect';
export const ruleList = [
// ...其他分组/其他组件
// biz 分组内：userSelect 在 customerSelect 前面
userSelect,
customerSelect,
// ...其他组件
];并确保对应 DragRule 里写了 menu: 'biz'：
// /src/config/rule/userSelect.js（仅示意）
export default {
menu: 'biz',
name: 'userSelect',
label: '用户选择',
// ...
};常见问题排查
1. 改了 menu.js 或 index.js，界面顺序没变化
最可能原因 1：改错了项目/改错了文件
一些团队同时维护多份设计器源码（不同版本/不同端/不同 UI），请确认你运行的项目引用的确实是：designer3.0/src/config/menu.js与designer3.0/src/config/index.js最可能原因 2：有二次排序逻辑覆盖了数组顺序
例如渲染时对分组/组件做了sort()，或按sort字段重新排序。需要找到最终渲染处，确认是否存在强制排序。最可能原因 3：缓存未刷新
尝试重启 dev、清理构建缓存、或强制刷新页面。
2. 顺序变化了，但某些组件“跑到了别的分组”
- 原因：组件归属分组通常由 DragRule 的
menu决定。
如果你只改数组顺序，不应发生跨分组变化；若发生了，说明项目里存在“分组白名单/分组映射”逻辑或 DragRule 配置被同时改动。
附录：相关文件路径速查
- 分组配置：
/src/config/menu.js - DragRule 汇总：
/src/config/index.js