7.0 设计 Alpha 版

Storybook 支持所有主流视图层，无数的工作流程，以及大量的前端开发者。尽管近年来功能上取得了巨大的飞跃，但核心用户体验自 5.0 版本以来一直没有改变。直到现在。

上个月，我分享了 Storybook 7.0 设计的预览，该设计简化了开发人员日常使用的核心 UI 模式。我很高兴地宣布，这些更新现在已发布 alpha 版本（说明 如下）。

• 📐 布局全屏
• 🛠 工具栏重新组织
• ✍️ 200 个重新绘制的图标
• 🔢 表单元素已优化
• ⚡️ 预捆绑应用，速度更快

嗯，为什么？

我们相信，小的人体工程学改进随着时间的推移会带来巨大的生产力提升。全球成千上万的团队使用 Storybook 来交付 UI。从 Shopify 和 Microsoft 等全球性公司到荷兰、英国和意大利的政府服务。

在过去的 3 年里，我们的功能得到了扩展，以满足不断增长的社区的需求。Storybook 现在用于 UI 开发，以及 测试 和 文档。7.0 改进了 Storybook 的人体工程学，将这些工作流程整合到一个无缝的体验中。

请放心，我们正在**并行**更新设计，并进行性能、稳定性和捆绑大小的优化，以适应主要版本的更新。注册邮件列表以提前获得这些功能的访问权限。

布局更新

7.0 alpha 版将 Canvas 尺寸扩展至全屏。这为您提供了更多空间来构建和记录您的 UI。每一个用于开发的像素都使 Storybook 更易于使用。

侧边栏也得到了更新。您会发现一个新颖、更微妙的菜单，以及间距的优化，以增加搜索栏的可点击区域。所有这些都在保留您对开发者工具期望的信息密度的情况下完成。

用于调试 CSS 和对齐的工具栏

Storybook 提供了一套工具，可帮助您调试 UI 外观和布局。7.0 重新组织了工具，以减少鼠标移动（或键盘用户的 Tab 键）的次数。

• 🔄 重新挂载：重新挂载当前选定的故事。
• 🔍 缩放：放大和缩小以检查每个像素。
• 🪟 视口：循环浏览预设视口尺寸（也可自定义）。
• 📏 测量：以像素为单位测量尺寸和间距。
• ⌧ 网格：在 Canvas iframe 中显示网格以进行对齐。
• ⤴ 轮廓：为对齐而轮廓化 DOM 元素。
• 🖼 背景：更改 Canvas iframe 的背景。

“文档”选项卡在哪里？
“文档”选项卡将移至侧边栏，以提高可发现性。如果您启用了 Docs 或 DocsPage，您会在组件故事旁边找到一个可自定义的“文档”项。

根据社区反馈，Docs 在 7.0 版本中进行了大修。这篇帖子空间有限，无法涵盖所有改进。注册邮件列表，以便在宣布时收到预览（MDX2、嵌入式等）。

200 多个新图标，更加锐利

Storybook 拥有一套自定义的 200 个图标，这些图标用于整个开源项目。我们从头开始重新绘制了每个图标路径，以提高视觉清晰度，然后对其进行了优化以减轻重量。这意味着图标对人眼更锐利，加载速度也更快。

预捆绑，以实现速度和无依赖冲突

在 7.0 版本中，我们重新评估了 Storybook 的基本架构。在早期版本中，运行 Storybook 涉及两个步骤：捆绑 Storybook 应用和构建您的组件代码。

Storybook 应用在每次在本地机器上运行时都会按需捆绑。这让用户对捆绑过程及其中的依赖项有了更多的控制和洞察。但是也有权衡：运行这两个步骤需要更多时间，特别是当您构建更多 UI 组件到 Storybook 中时。

Storybook 7.0 预捆绑了 Storybook 应用。它作为编译后的代码库发布，而不是您需要自己编译的指令集。

好处是巨大的：即时的应用启动时间。是的，您仍然需要像往常一样构建您的组件代码，但使用最新的 Vite 和 Webpack 5 集成（目前正在更新到 7.0）可以加快速度。

此外，通过消除在代码库中安装 Storybook 依赖项的需要，预捆绑可以完全避免依赖冲突。例如，Vue 和 Angular 应用不需要安装 React（Storybook 在底层使用）。

尝试 7.0 alpha 版

新设计现已在 7.0 alpha 版中提供。在项目的根目录运行以下命令

npx storybook@future upgrade --prerelease

注意： 7.0 是一个主要版本发布的alpha版本，这意味着可能存在破坏性更改。更复杂的集成，如 Vite-builder 尚不支持（很快就会支持！）。我建议您从一个演示项目开始尝试。

注册提前体验

7.0 设计正在积极开发中——alpha 版中包含的只是第一笔。我们计划大修核心 UI 模式，如选项卡、菜单、表单和颜色。在接下来的几个月里，我们将通过 alpha 版本提供更多设计改进。立即在下方注册 Storybook 邮件列表以获取更新。

想为 Storybook 的用户界面做出贡献吗？加入我们的 Storybook Discord 频道 #design。我们欢迎新老开发者的贡献。

Storybook 7.0 设计由 Michael Arestad 和 Dominic Nguyen（我！）与整个 Storybook 社区的反馈共同开发。