如何从Storybook当前打开的故事中打开工具栏并聚焦指定插件

下面是几种可行的实现方式，基于Storybook官方API完成：

方法1：在单个故事/文档中添加按钮（CSF/MDX通用） #

利用Storybook的useStorybookApi钩子直接控制面板状态：

import { useStorybookApi } from '@storybook/manager-api';

// 自定义按钮组件
const ShowCodeButton = () => {
  const api = useStorybookApi();

  const openCodePanel = () => {
    // 替换为你的代码展示插件的面板ID
    // 官方Docs插件的ID是"storybook/docs/panel"，第三方代码插件可能是"storybook/code/panel"
    const codePanelId = 'storybook/docs/panel';

    // 先检查面板是否隐藏，隐藏则切换显示
    if (!api.isPanelVisible(codePanelId)) {
      api.togglePanel(codePanelId);
    }
    // 强制聚焦到代码面板
    api.selectPanel(codePanelId);
  };

  return <button onClick={openCodePanel} style={{ padding: '8px 16px', cursor: 'pointer' }}>点击查看代码</button>;
};

在CSF故事里直接引入这个按钮，或者在MDX文档中嵌入使用即可。

方法2：全局添加工具栏按钮（所有故事通用） #

如果想让所有故事都显示这个按钮，可以自定义Storybook工具栏：

1. 在.storybook/manager.js中注册自定义工具栏项：

import { addons } from '@storybook/addons';

addons.register('custom/show-code-button', (api) => {
  addons.add('custom/show-code-button', {
    type: 'tool',
    title: '查看代码',
    match: ({ viewMode }) => viewMode === 'story',
    render: () => {
      const Button = () => {
        const handleClick = () => {
          const codePanelId = 'storybook/docs/panel';
          api.togglePanel(codePanelId);
          api.selectPanel(codePanelId);
        };
        return <button onClick={handleClick}>查看代码</button>;
      };
      return Button;
    },
  });
});

关键注意事项 #

• 确认代码插件的面板ID：在Storybook页面打开浏览器控制台，执行window.__STORYBOOK_API__.getPanels()，可以看到所有已注册面板的ID列表，替换成你使用的代码插件对应的ID即可。
• 版本兼容性：togglePanel、selectPanel、isPanelVisible这些API在Storybook 6.x及以上版本可用，如果你用的是旧版本，需要调整为对应版本的API。

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