1. 首页（短链生成）

布局要点：

• 顶部导航栏

  • 左侧：LOGO / 产品名
  • 右侧：按钮 → 登录 / 注册 / Dashboard

• 主体区域

  • [TextBox] 输入长链
  • [TextBox] 自定义短码（可选）
  • [Dropdown] 有效期（7天/30天/永久）
  • [Button, Primary] 生成短链

• 结果展示区域（生成后显示）

  • [Label] 短链 + [Button, Icon] 复制
  • [Image Placeholder] 二维码 + [Button] 下载
  • [Label] 到期时间提示
  • [Notice] 登录引导文案

• 页脚

  • [Link] API文档 | [Link] 帮助 | [Text] Copyright

2. 登录 / 注册页

登录页组件：

• [Logo] 产品 LOGO
• [TextBox] 邮箱
• [TextBox, Password] 密码
• [Checkbox] 记住我
• [Button, Primary] 登录
• [Link] 忘记密码
• [Divider]
• [Label] “还没有账号？” + [Link] 去注册

注册页额外组件：

• [TextBox, Password] 确认密码
• [Checkbox] 同意服务协议

3. Dashboard

3.1 短链管理列表

• 顶部：

  • [TextBox] 搜索短码/长链
  • [Button] 搜索

• 表格（Table）列：

  • 短链
  • 原始链接
  • 点击量
  • 到期时间
  • 操作（[IconButton] 复制 / 二维码 / 修改 / 删除）

• 底部分页：

  • [Pagination] « 1 2 3 … »

3.2 数据统计页

• 顶部过滤：

  • [DatePicker] 时间区间选择器（近7天/近30天/自定义）

• 图表区域：

  • [LineChart] 访问趋势图
  • [PieChart] 来源分布
  • [PieChart] 设备分布
  • [MapChart] 地域分布

3.3 用户设置页

• 用户信息区：

  • [Label] 邮箱
  • [Button] 修改密码

• API Key 管理：

  • [Table] Key(打码) | 创建时间 | 有效期 | 操作（删除）
  • [Button] 新建 Key

• 自定义域名：

  • [TextBox] 输入域名
  • [Button] 校验

4. API 文档页

• [TextBlock] 说明文字（如何获取 API Key）
• [CodeBlock] 示例调用（curl 示例）
• [CodeBlock] 响应 JSON 示例
• [Accordion] 错误码对照表（展开/折叠）

5. 错误/异常页面

• [Icon: Error] 错误状态图标

• [Label] 提示文案

  • 短链不存在 → 「短链不存在或已被删除」
  • 短链过期 → 「短链已过期，请重新生成」
  • 系统错误 → 「系统开小差了，请稍后再试」

• [Button] 返回首页

移动端适配要点

• 输入框/按钮宽度 → 100%

• 表格在移动端 → 卡片式展示：

  短链: s.io/abc123
  原始链接: example.com/...
  点击量: 1203
  到期时间: 2025-10-01
  操作: [复制] [二维码] [修改] [删除]
  

• 图表 → 垂直排列，不做横向排布。

总结：
这份清单已经拆到 UI 组件级别（TextBox、Button、Table、Chart…），交互/UI 同事可以直接在 Balsamiq/Figma 中搭框，快速输出低保真原型。

👌 好的，那我接着帮你整理一份 页面跳转关系图（Site Map / Navigation Flow），方便和交互/UI 同事沟通整体信息架构（IA，Information Architecture），明确页面之间的入口和流转路径。

短网址服务页面跳转关系图

flowchart TD

%% 顶层
Home[首页: 短链生成] -->|生成成功| Result[结果展示区 (短链+二维码)]

Home --> Login[登录页]
Home --> Register[注册页]
Home --> API[API 文档页]

Result --> Dashboard[Dashboard首页]

%% 登录/注册流程
Login --> Dashboard
Register --> Dashboard

%% Dashboard 模块
Dashboard --> URLMgmt[短链管理列表]
Dashboard --> Stats[数据统计页]
Dashboard --> Settings[用户设置]

%% 短链管理
URLMgmt --> URLModify[短链修改弹窗]
URLMgmt --> QRModal[二维码查看弹窗]
URLMgmt --> ConfirmDelete[删除确认弹窗]

%% 用户设置
Settings --> APIKeyMgmt[API Key 管理]
Settings --> DomainBind[自定义域名绑定]
Settings --> Profile[账号信息/修改密码]

%% 异常路径
Home --> NotFound[错误页: 短链不存在/过期]
Dashboard --> NotFound

页面流转说明

1. 首页（Home）

• 功能：输入长链 → 点击生成 → 结果展示区

• 跳转路径：

  • 登录按钮 → 登录页
  • 注册按钮 → 注册页
  • API 文档 → API 文档页
  • 结果展示区 → 登录提示（跳转 Dashboard）

2. 登录 / 注册

• 登录成功 → Dashboard
• 注册成功 → 自动登录 → Dashboard

3. Dashboard（核心入口）

包含三个核心模块：

1. 短链管理（URLMgmt）

   • 修改 → 弹窗（URLModify）
   • 查看二维码 → 弹窗（QRModal）
   • 删除 → 弹窗确认（ConfirmDelete）

2. 数据统计（Stats）

   • 通过左侧导航切换
   • 可选择时间区间，图表实时刷新

3. 用户设置（Settings）

   • API Key 管理（APIKeyMgmt）
   • 自定义域名绑定（DomainBind）
   • 修改密码 / 账号信息（Profile）

4. 错误/异常页面

• 短链不存在 / 已过期时 → 跳转到 NotFound 页面
• 系统错误 → 错误页

导航设计要点

• 顶部导航栏（全局可见）

  • 首页 | API 文档 | 登录/注册（未登录） | Dashboard（已登录）

• Dashboard 内部导航（侧边栏）

  • 短链管理
  • 数据统计
  • 用户设置

• 返回入口

  • 所有异常页面提供「返回首页」按钮
  • 弹窗关闭 → 回到来源页面

📌 这样一张 页面跳转关系图 + 说明，就能清晰表达：

• 用户完整路径（首页 → 登录 → Dashboard）
• Dashboard 内部的模块划分
• 异常情况的流转

短网址服务交互细节清单

1. 首页（短链生成页）

• 输入框

  • 自动聚焦，粘贴时去掉前后空格。
  • 长度超限时实时提示「链接过长」。
  • 输入非 http/https 时阻止提交，提示「请输入有效链接」。

• 生成按钮

  • 点击后 → Loading 状态（文字变为「生成中…」，按钮禁用）。
  • 成功 → 展示短链 & 二维码。
  • 失败 → 弹出错误提示（toast/提示条）。

• 结果展示

  • 短链区域：一键复制，复制成功后显示「已复制」提示，2 秒后自动消失。
  • 二维码：hover/点击可放大，提供「下载」按钮（默认 PNG）。
  • 登录引导提示：游客用户生成结果后显示「登录以保存记录」。

2. 登录 / 注册页

• 表单输入

  • 邮箱输入框 → 失焦校验格式（错误时红色提示）。
  • 密码输入框 → 输入时不展示纯文本。
  • 注册页：密码与确认密码不一致时实时提示。

• 按钮状态

  • 登录/注册按钮点击后进入 Loading。
  • 成功 → 跳转 Dashboard。
  • 失败 → 表单下方红色错误提示。

• 切换交互

  • 登录页底部「没有账号？去注册」 → 跳转注册页。
  • 注册页底部「已有账号？去登录」 → 跳转登录页。

3. Dashboard

3.1 短链管理列表

• 表格交互

  • hover 行高亮。
  • 点击短链字段 → 打开原始长链（新窗口）。
  • 已过期短链 → 灰色字体 + 操作按钮禁用。

• 操作按钮

  • [复制] → 点击复制短链，成功提示「已复制」。
  • [二维码] → 弹窗展示大号二维码，带下载按钮。
  • [修改] → 弹窗编辑原始链接/有效期，提交后刷新表格。
  • [删除] → 二次确认弹窗「确认删除？此操作不可恢复」。

• 分页

  • 默认 10 条/页，可切换 20/50 条。
  • 页码切换时显示 Loading 状态。

3.2 数据统计页

• 时间区间选择

  • 默认展示「近7天」。
  • 下拉可选「近30天、自定义」。
  • 自定义 → 弹窗选择开始-结束日期。

• 图表交互

  • hover 折线图 → 显示当日 PV/UV 数值。
  • hover 饼图 → 显示百分比 + 数值。
  • hover 地图 → 显示国家/省份名称 + 点击数。

• 异常处理

  • 无数据 → 显示「暂无统计数据」灰色占位。

3.3 用户设置页

• API Key 管理

  • Key 只展示前4位+后4位，中间打码。
  • 新建 Key → 弹窗输入有效期，点击生成后展示 Key 并提示「请复制保存」。
  • 删除 Key → 二次确认。

• 自定义域名

  • 输入框校验域名格式。
  • 点击「校验」 → Loading → 返回「绑定成功/失败」。
  • 失败时提示「请检查 DNS 配置」。

• 账号信息

  • 修改密码 → 表单（旧密码+新密码+确认密码），提交后提示「修改成功」。

4. API 文档页

• 代码块

  • 支持一键复制。
  • JSON 响应高亮。

• 错误码表

  • 折叠面板展示，默认折叠。
  • 点击展开 → 显示完整表格。

5. 错误/异常页面

• 提示文案

  • 短链不存在 → 「短链不存在或已被删除」。
  • 短链过期 → 「短链已过期，请重新生成」。
  • 系统错误 → 「系统开小差了，请稍后再试」。

• 操作按钮

  • [返回首页] → 点击跳转到首页输入区。

6. 全局交互规范

• 反馈方式

  • 成功 → 绿色 toast（自动消失 2s）。
  • 失败 → 红色 toast 或表单下方错误提示。

• 加载状态

  • 表格、图表加载时显示 Loading 动画。
  • API 请求未完成时禁用相关按钮。

• 移动端适配

  • 表格转卡片式展示。
  • 图表纵向排列。

• 国际化

  • 错误提示 message 从错误码表映射到多语言文案。