使用Clerk组织结构和TTS功能构建类似Sonara的仪表板

上一部分介绍了认证与持久化机制——那些没人会关注的基础设施。本章则介绍用户登录后首先看到的界面：控制面板。其目的是让这个入口看起来更像是一款产品，而非临时搭建的框架。

侧边栏

导航功能位于可折叠的侧边栏中。在空间有限时，它会缩小为图标形式；同时列出主要功能入口（控制面板、探索语音、文本转语音、语音克隆），并将Clerk的组织切换器置于顶部。

这个切换器起着核心作用。每个账户都属于某个组织——不存在独立的个人工作空间——因此在不同团队之间切换是通过侧边栏中的控件实现的，而非藏在深处的设置页面。它理应属于主要导航部分。

侧边栏的页脚区域包含用户菜单，其上方有一个小的“其他”板块，用于设置和帮助功能。点击设置并不会打开专用页面，而是启动Clerk的组织资料面板。既然服务提供商已经提供了功能完善的界面，再重新设计意义不大。

展开状态与折叠状态会通过Cookie保存，因此刷新页面时不会先显示宽大的侧边栏然后再立即收起。这类精细的持久化设计细节才能让界面显得精心打造，而非仅仅由零散组件拼凑而成。

背景

在主要内容背后，有柔和的动画波浪缓缓移动。该效果是通过简单噪声算法绘制在画布上而非循环使用的位图，因此图案不会明显重复出现。色彩选择以低透明度的淡绿和蓝色为主。桌面端会保留这一效果，而在移动端则会被隐藏，因为在移动设备上像素质量比视觉氛围更为重要。

<WavyBackground
  colors={["#2DD4BF", "#22D3EE", "#38BDF8", "#818CF8"]}
  blur={3}
  speed="slow"
  waveOpacity={0.1}
/>

这种克制是经过刻意设计的。该动画以较低的透明度及缓慢的速度隐藏在用户界面背后——人们更多感受到的是其精致感，而非刻意去观察的装饰效果。

文本输入框

控制面板以一个用于复制、随后将转换为语音的文本字段为核心。该字段位于带有柔和渐变边框（从粉色过渡到青色）的卡片中。为使边框看起来像一条连续的线条，需要叠加多层元素；最终效果应呈现为单一边缘，而非扁平的方框。

在文本字段下方，会根据用户输入实时显示字符数及费用估算，费用按固定单价计算。价格会直接展示在界面中，而不会只在后续的确认页面上出现。

${(text.length * COST_PER_UNIT).toFixed(4)} estimated

那些打算合成数千字符内容的人，会在点击生成之前就能看到大致费用，而非之后。

在当前阶段，生成控制模块尚未调用模型。它会将带有草稿文本的查询参数转发到文本转语音页面。真正的合成操作要等到有对应的语音和模型存在之后才会进行。控制面板的作用仅限于内容捕获与传递。

快速操作

在该输入框下方，有一排示例卡片，涵盖了讲故事、录制广告、指导电影场景、为游戏角色配音、介绍播客以及引导冥想等用途。每张卡片都包含一段针对该特定场景的简短示例文本。点击任意一张卡片，即可直接使用该示例进行文本转语音操作。

{
  title: "Voice a Game Character",
  description: "Build immersive worlds with dynamic character voices",
  href: "/text-to-speech?text=Listen up, adventurer. The realm of Ashenvale is crumbling...",
}

现成的示例比空框加教程弹窗更为实用。好奇的用户无需先编写提示语，只需点击一下就能听到游戏角色配音的示例。

整合应用

页眉、背景、输入框以及快速操作共同构成了控制面板页面。移动端采用简洁的页眉设计（包含菜单触发按钮和标题），而桌面端则显示带有用户姓名的问候语以及几条反馈链接。

这些元素都很常见：侧边栏、背景、文本框以及示例卡片。它们共同决定了用户登录后的第一印象，进而影响用户是否会停留足够长的时间来生成音频。

接下来的章节将介绍文本转语音页面本身。本章的工作成果会以一个功能提交的形式整合到控制面板的侧边栏、布局以及首页中。