Skip to Content
首页（创作中心）

首页（创作中心）

配图占位：本节用于在后续视觉评审中插入首页整体视觉截图（玻璃暗色主题、Hero 区、KPI 4 卡、最近项目 / 推荐模板 / 活动动态 / 快捷入口 4 个面板）。

用途

登录后用户看到的第一个页面，承担三类任务：

  • 快速创作 —— 顶部故事输入区直接生成新项目，或用 AI 帮我写扩写故事创意。
  • 状态回顾 —— 4 项 KPI + 最近项目 + 动态，让你一眼看到当前进度。
  • 快捷入口 —— 跳转资产中心、画布、模板、计费等常用功能。

页面布局遵循玻璃拟态（Glassmorphism）暗色主题，与设计稿 .design/dramagon-redesign/pages/home.html 对齐。

使用前准备

  • 账号已登录且默认分析模型已配置。未配置时”创建项目”按钮不可用，会引导前往设置中心。
  • 模型未配置时”AI 帮我写”会保留已输入内容并提示前往模型设置。

页面分区

页面从上到下分为 4 个区。

顶部导航栏

<Navbar /> 提供全局导航：项目 / 资产 / 设置 / 文档 / 用户菜单。本部分保留项目既有行为，未做 UIUX 改动。

故事输入卡

<StoryInputCard /> 保留项目既有的 TypewriterHero + StoryInputComposer：

  • 输入故事创意 → 选择比例（默认 9:16）→ 选择画风 → 点击创建项目
  • 也可点击”AI 帮我写”让模型扩写故事
  • 主操作按钮在屏幕底部；快捷操作跟随到首页 Hero 区（见下）

首页主内容（UIUX 对齐后的新区）

<HomeDashboard /> 容器，4 个子区域：

区域组件数据源
个性化问候横幅HomeHerouseHomeKpiOverview（active projects + credits）+ session.user.name
KPI 横条（4 卡）HomeKpiStripuseHomeKpiOverview —— active projects / credits / running tasks / assets
最近项目（左栏上半）HomeRecentProjectsPanel/api/projects
推荐模板（左栏下半）HomeRecentTemplatesPanel占位（后端能力待补，详见 .learnning//FEATURE_REQUESTS.md §BG-002）
活动动态（右栏上半）HomeActivityPanel/api/user/notifications?pageSize=4
快捷入口（右栏下半）HomeQuickAccessPanel静态路由（资产中心 / 画布 / 模板 / 计费）

AI 帮我写弹窗

<AiWriteModal /> 保留项目既有行为，与故事输入卡联动。

KPI 横条详解

4 张卡片按 UIUX 设计稿顺序排列：

  1. 进行中项目（Active Projects）—— 来自 /api/projects 的活跃项目数；加载中显示 ”—”
  2. 积分余额（Credits）—— 来自 /api/user/points?view=summary 的 balance.available（bigint → number）
  3. 运行中任务（Running Tasks）—— 来自 /api/tasks?status=processing&status=pending&limit=200 的活跃任务数
  4. 资产总数（Assets）—— 来自（计划中）/api/asset-hub/stats；当前显示 ”—“（详见 backlogs §BG-003）

当积分低于 100 时，第二张卡片显示 warn 趋势标签，鼓励充值。

推荐模板区（占位 + 待补）

设计稿”推荐模板”面板（左栏下半）当前以占位组件呈现：显示”暂无推荐模板”提示 + 3 张骨架卡片。后端 /api/templates 与 Template 模型尚未实现。详见 .learnning//FEATURE_REQUESTS.md §BG-002（🟡 P2）。

快捷入口

4 个静态路由入口：

入口路由状态
资产中心/workspace/asset-hub✅ 可用
无限画布/canvas✅ 可用
模板市场/templates⚠️ 禁用（待 /api/templates 落地）
计费/billing✅ 可用

模板入口在模板 API 落地前保持 disabled 状态，避免点击进入空白页。

数据获取策略

  • useHomeKpiOverview（src/hooks/useHomeKpiOverview.ts）—— 4 项 KPI 并行 fetch，bigint 自动转 number
  • useHomeRecentProjects（src/hooks/useHomeRecentProjects.ts）—— 最近项目列表
  • useHomeRecentNotifications（src/hooks/useHomeRecentNotifications.ts）—— 通知动态

所有 hook 统一处理 loading / error / null 三态，UI 层只需判断 value ?? '—'。

操作步骤

  1. 登录账号并配置默认分析模型；未配置时「创建项目」按钮不可用，会引导前往设置中心。
  2. 在顶部故事输入区输入创意或选择「AI 帮我写」扩写故事。
  3. 选择比例（默认 9:16）与画风，点击「创建项目」。
  4. 返回首页查看 KPI 横条、最近项目、动态与推荐模板。
  5. 通过快捷入口跳转资产中心、画布、模板、计费等常用功能。

结果与状态

  • 快速创作：顶部故事输入区直接生成新项目，或用 AI 帮我写扩写故事创意。
  • 状态回顾：4 项 KPI + 最近项目 + 动态，让你一眼看到当前进度。
  • 快捷入口：跳转资产中心、画布、模板、计费等常用功能。
  • KPI 横条：进行中项目 / 积分余额 / 运行中任务 / 资产总数，加载失败显示 —。
  • 推荐模板：当前为占位（3 张骨架卡片），后端 /api/templates 落地后启用。
  • 快捷入口状态：模板入口在 /api/templates 落地前保持 disabled，避免点击进入空白页。

权限和边界

  • 必须登录后才能访问 /home；未登录时跳转 /auth/login
  • KPI 卡片不暴露 PII，只展示统计值
  • 快捷入口的 disabled 状态由数据可用性决定，不由权限决定

常见问题

为什么 KPI 卡片显示 ”—”？ 对应数据源失败、正在加载、或尚未实现（如资产总数）。设计稿与生产代码均接受 ”—” 作为统一占位符。

为什么模板入口是灰色的？ 后端 /api/templates 尚未实现（详见 backlogs §BG-002）。模板 API 落地后会自动启用。

为什么中文/英文切换后画风名称没变？ 后端 ArtStyle 模型只有 name String 字段（单语），详见 backlogs §BG-001（🔴 P1）。前端无法独立修复，需后端升级。

相关文档

  • 页面：src/app/[locale]/home/page.tsx
  • 编排：src/app/[locale]/home/_components/HomeDashboard.tsx
  • 通用组件：src/components/home/parts/
  • 数据 hooks：src/hooks/useHomeKpiOverview.ts / useHomeRecentProjects.ts / useHomeRecentNotifications.ts
  • i18n：messages/{zh,en}/home.json
  • 验证：scripts/verify-home-uiux.sh + scripts/verify-home-uiux.ps1
  • 设计稿：.design/dramagon-redesign/pages/home.html
  • 后端草案：.learnning//FEATURE_REQUESTS.md

更新记录

  • 2026-09-01 —— 首次落地 UIUX 对齐版（commit ae0e2ca），新增 Hero + KPI + RecentProjects + RecentTemplates（占位）+ Activity + QuickAccess；后端能力升级草案见 .learnning//FEATURE_REQUESTS.md（BG-001 ~ BG-004）
Last updated on
文档首页快速开始