如何在Storybook中调整refs顺序，使refs故事优先显示

要让远程Refs的故事优先显示在本地故事之前，你需要在preview.js中自定义storySort逻辑——默认的排序规则不会区分远程和本地故事，所以直接用基础的storySort参数不会生效。

解决方案代码 #

在你的preview.js文件中添加以下配置：

export const parameters = {
  options: {
    storySort: (a, b) => {
      // 定义refs的优先级顺序，按你想要的排列
      const refPriority = ['react', 'angular'];
      
      // 判断当前故事是否属于某个ref
      const getRefName = (id) => {
        const parts = id.split('--');
        return refPriority.includes(parts[0]) ? parts[0] : null;
      };

      const aRef = getRefName(a.id);
      const bRef = getRefName(b.id);

      // 两个都是ref故事，按refPriority的顺序排序
      if (aRef && bRef) {
        return refPriority.indexOf(aRef) - refPriority.indexOf(bRef);
      }

      // a是ref，b是本地，a排前面
      if (aRef && !bRef) {
        return -1;
      }

      // b是ref，a是本地，b排前面
      if (!aRef && bRef) {
        return 1;
      }

      // 都是本地故事，保持默认标题排序
      return a.title.localeCompare(b.title);
    },
  },
};

说明 #

• 这个逻辑通过故事ID的前缀（比如react--button-story中的react）识别远程Ref故事，按照你定义的refPriority数组顺序排列所有远程内容。
• 所有远程Ref故事都会排在本地故事之前，本地故事则保持原有的标题排序逻辑。
• 后续新增其他Ref时，只需在refPriority数组中添加对应名称即可同步调整顺序。

为什么之前的storySort不生效？ #

Storybook默认的storySort规则仅处理本地加载的故事，远程Ref的故事属于异步加载的外部内容，需要手动通过ID前缀区分并自定义排序逻辑。

内容的提问来源于stack exchange，提问作者user12551649