账号页 UI 改造设计

背景

账号模块当前所有路由都复用 AccountContainer，但桌面端仍使用带外边距、圆角和阴影的通用 PageContainer，各路由又分别维护不一致的 padding、滚动容器和标题样式。新 Figma 设计统一了账号侧栏和主内容区域，但各页面 Header 的业务内容差异明显。

本次改造覆盖以下路由：

账单页没有对应的完整新设计稿，本次沿用原有业务布局，并补齐与其他账号页一致的页面 Header。

桌面端：

text

全局导航 64px
└── 账号区域
    ├── 账号侧栏 220px
    └── 主内容 flex: 1; min-width: 0

账号侧栏：

主内容区：

标题文字样式：

{
  color: 'myGray.900',
  fontSize: '16px',
  fontWeight: 500,
  lineHeight: '24px',
  letterSpacing: '0.15px'
}

该抽象只提供视觉属性。页面标题使用 h1，个人信息分组标题使用 h2，避免视觉复用破坏语义层级。

不创建通用 Header 组件。各路由分别维护 Header，因为其结构和职责不同：

个人信息页的字段行、快捷入口和用量展示只在该页面内部使用，局部 helper 保留在页面文件中，不提升为跨模块组件。

桌面端内容使用可用宽度，不设置 1080px 或 1180px 最大宽度：

text

主内容宽度
├── 左右 padding：24px
└── 内容
    ├── 左栏：330px
    ├── 间距：45px
    └── 右栏：flex: 1; min-width: 0

Figma 画布下测得的 1180px 内容宽度和 805px 右栏宽度只是 1512px 视口中的计算结果，不是布局约束。

其他调整：

页面 Header 在桌面端高度为 64px，左右 padding 为 24px，底部使用 myGray.200 边框；个人信息页除外。
Header 背景为白色，不显示旧版标题图标。
内容区默认从 Header 下方 24px 开始；具体间距由路由根据表格、Tab 或表单结构控制。
表格型页面使用页面内部滚动，避免整个账号侧栏跟随滚动。
表格滚动容器占满主内容区宽度，左右留白放在滚动容器内部，使桌面端纵向滚动条贴合主内容区最右侧。使用记录、账单与发票、自定义域名和模型提供商均以 API 密钥页的滚动结构为准。
团队管理的成员、群组、权限和审计 Tab 同样使用全宽滚动容器；部门 Tab 保留独立布局，因为它包含左右分栏和右侧固定内容。
审计日志使用手动分页，默认每页 50 条，可切换 20、50、100、200 条；表格不产生横向滚动，详情列使用剩余宽度并自动换行。
现有空状态、按钮和权限逻辑保持不变，设计稿中的示例数据不写入代码。

桌面端按 Figma 实现。
移动端继续使用 LightRowTabs。
语言与时区、使用记录、模型提供商、通知、第三方账号、账单与发票页面的 Header 只有标题文案，移动端隐藏整个 Header，不保留高度和底部分隔线。
团队管理、自定义域名和 API 密钥的 Header 包含选择器、操作按钮或教程入口，移动端继续显示。
个人信息页在移动端继续纵向排列，避免固定 330px 左栏造成横向滚动。
移动端只有 AccountContainer 中 navbar 下方的主内容区负责纵向滚动；页面 Header、筛选区、表格、分页和其他内容作为一个整体滚动。各页面内部的独立纵向滚动仅在桌面端启用，表格仍可按需横向滚动。