Storybook工具栏按钮问题：白屏与链接绑定失败

问题1：删除items属性后Storybook白屏 #

• 原因：Storybook的globalTypes中配置的toolbar默认基于下拉选择控件实现，必须依赖items数组渲染选项，缺失该属性会导致组件渲染报错，进而出现白屏。
• 解决思路：
  • 若仅需单个可点击入口，可保留items并配置为单个选项，也可通过自定义样式隐藏下拉箭头；
  • 彻底摆脱items依赖的方案是创建自定义Toolbar Addon，直接渲染独立按钮而非使用默认的下拉控件。

问题2：无法实现点击按钮打开外部链接 #

可行方案1：利用globalTypes的onChange事件触发跳转 #

修改配置，通过onChange回调在选项选中时打开链接，随后重置状态避免残留：

globalTypes: {
  feedback: {
    description: 'Answer our survey',
    defaultValue: false,
    toolbar: {
      title: 'Survey',
      icon: 'link',
      items: [{ value: 'open', title: 'Go to Survey' }],
      showName: true,
      onChange: (context) => {
        // 打开目标外部链接
        window.open('你的调研链接地址', '_blank');
        // 重置回默认值，防止按钮保持选中状态
        context.globals.feedback = false;
      },
    },
  },
},

可行方案2：创建自定义Toolbar按钮（推荐，无需items） #

完全脱离items配置，通过Storybook Addon API创建独立按钮：
在.storybook/preview.js中添加以下代码：

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

// 注册自定义工具栏按钮
addons.register('custom-survey-button', () => {
  addons.add('custom-survey-button', {
    title: 'Survey',
    type: 'tool',
    render: () => {
      const Button = () => {
        const handleClick = () => {
          window.open('你的调研链接地址', '_blank');
        };
        return (
          <button 
            onClick={handleClick}
            style={{ 
              padding: '4px 8px', 
              border: 'none', 
              borderRadius: '4px', 
              cursor: 'pointer',
              backgroundColor: '#6366f1',
              color: 'white'
            }}
          >
            <span className="icon link"></span> Survey
          </button>
        );
      };
      return <Button />;
    },
  });
});

此方案会在工具栏生成独立按钮，点击直接跳转，无items依赖也不会出现白屏。

此前尝试无效的原因 #

• items中的onClick并非Storybook官方支持属性，无法触发；
• 直接使用onChange时，若未触发值变化（如默认值与选中值一致），回调不会执行；
• Addons通道通信需在manager端正确注册监听，否则无法接收事件。

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