Storyra V1 交互规范

状态：待验收｜2026-10-14 左侧步骤、中间创作、右侧 AI 制作总监；移动端响应式。八个步骤：概览、剧本、选角、美术、声音、分镜、制作包、成果。支持编辑保存、选角、声音选择、分镜编辑、提示词复制、JSON 导出、回填状态模拟。V1 静态原型使用 localStorage，不提供真实 AI、图片视频生成、上传、ZIP 或后端。

V3 Web 优先交互（待验收）

PC 端三栏工作台（步骤导航、主编辑区、AI 导演）；窄屏折叠。V3 增加视觉化选角和美术卡片、剧本输入、声音策划、分镜编辑、平台提示词复制、JSON 制作包导入导出、视频文件本地临时预览与采用状态。演示卡片并非真实角色参考图。未来以响应式 Web 为主，原生 App 非首期目标。

V5 平台级信息架构（待验收）

平台导航：个人首页、我的作品、素材库、角色库、创作任务、账户设置；进入作品后切换到沉浸式创作工作台，并支持返回平台。新建作品、资产记录、角色记录、账户资料采用 localStorage 模拟；实际项目绑定、登录注册、素材上传尚未实现。公开官网、登录/注册和作品详情属于完整产品流程设计范围，后续版本进一步展示。未来 Nuxt 采用 Public / Dashboard / Studio 三套布局，但静态原型仍遵循 site/<slug>/versions/vN 规范。

V6 平台布局与视觉基准（待验收，2026-10-14）

采用 SDBase 截图所体现的轻盈创意风作为参考：浅薰衣草底色、紫色主操作、克制的内容宽度与左右分栏登录。以布局优先，不将近似取色视为已确认品牌色。 Public：产品首页与功能说明 → 登录/注册模拟 → Dashboard：个人首页、作品、素材库、角色库、任务、账户设置 → Studio：剧本、选角、美术、声音、分镜、制作包、成果。Public/Dashboard/Studio 保留独立布局语义，原型以单 HTML 模拟路由。新版本继续保留旧版只读。 V6 目前重点是三套布局与基本跳转；多作品数据隔离、完整作品详情、真实参考图与素材联动、AI 提案确认仍是待补充交互。

V8 视觉规范候选（2026-10-14，待验收）

根据用户反馈，SDBase 仅作为布局参考，不强制沿用其色彩。新的 Storyra 视觉采用暖白 #FBF8F3、深墨蓝 #1D2335、靛紫 #6258D7、珊瑚橙 #FF9B7E；官网强调大标题、故事氛围、内容主视觉，工作台强调编辑效率。正式网站 Header 不显示 Vx、待验收或原型标识，版本状态仅在版本中心和说明文档保留。卡片、作品封面、角色形象、分镜必须逐步采用具有内容表达的视觉素材；V8 目前仅使用 CSS 抽象占位，尚非最终设计验收。

V9 首页布局修订（待验收，2026-10-14）

公开首页仅承担品牌定位、功能介绍、引导注册与 Footer，不展示“欢迎回来”、最近作品、个人创作进度等登录态内容。个人创作首页仅在 Dashboard 中出现。Footer 在公开官网显示，包含产品、使用入口和版权信息；登录页和沉浸式创作工作台不显示该 Footer。视觉候选由大面积紫色改为暖白、墨蓝、灰绿和少量陶土橙；以布局和视觉层次优先，尚未定稿。V9 修复首页与个人空间同时展示的问题；真实登录状态仍为模拟。

V10 对齐和导航规范（待验收，2026-10-14）

Header 品牌区与导航、官网 Hero、内容区和 Footer 使用统一的 1160px 内容容器与相同左右安全边距；导航按钮统一高度、间距及登录状态，不得独立漂浮在页面右侧。公开官网不出现登录后首页；Dashboard 使用独立导航和内容宽度，Studio 使用左侧步骤/中间编辑/右侧 AI 助手的独立布局。移动端折叠，不允许固定宽度造成溢出。V10 为布局修复候选，业务规则不变。

V11 个人创作空间与 Studio 布局规范（待验收，2026-10-14）

平台主导航与个人空间内容使用统一 1220px 宽度和左右安全边距；个人空间导航与作品/素材/角色画廊使用独立布局，不与官网内容叠放。作品和素材卡片采用响应式网格，列表操作清晰区分。Studio 采用左侧约 210px 步骤导航、中间弹性编辑区、右侧约 300px AI 制作总监；平板将 AI 面板下移，手机端纵向折叠。色彩候选调整为暖白、灰绿、墨绿和少量暖橙；最终视觉仍待验收。V11 仅完善布局与视觉，没有新增真实业务能力。

V12 创作空间左侧导航与独立 Studio 布局（待验收，2026-10-14）

Dashboard 采用左侧约 224px 主导航与右侧自适应内容区，平台功能包括首页、我的作品、素材库、角色库、创作任务、账户设置；不再与官网 Header 下方的横向二级菜单混用。Studio 是独立的沉浸式页面壳层：专属顶部工具栏（返回作品、作品名称、保存状态、制作包）、左侧约 210px 创作步骤、中间主编辑区、右侧约 290px AI 制作总监；不同时显示平台主菜单。移动端平台侧栏变横向可滚动导航，Studio 右侧 AI 面板折叠至内容下方。原型仍是模拟交互，后续 Nuxt 可映射到 DashboardLayout 与 StudioLayout。V12 为布局候选，非已确认的视觉规范。

V13 作品详情与跨模块交互（待验收，2026-10-14）

Dashboard 的作品卡片可进入详情，详情提供剧本、选角、分镜的直接入口；Studio 保持独立三栏壳层。素材库增加类型筛选和记录编辑；角色库增加档案编辑；Studio 选角与美术从公共资产中引用；分镜支持逐镜头编辑、复制提示词、采用状态。演示状态按作品 ID 隔离并保存在 v13 独立 localStorage，不能视为正式后端已实现。作品封面、角色图仍为视觉占位，真实文件上传与版本管理未实现。

V14 全宽 Header 对齐规范（已确认方向，2026-10-14）

官网与个人空间使用全宽 Header，品牌 Logo 左靠安全边距，主导航/用户操作右靠安全边距；不再使用固定最大宽度把 Header 挤在屏幕中央。桌面左右安全边距使用 20–48px 响应式范围，移动端约 14px。Header 内 Logo 和导航垂直居中，按钮统一高度和基线。官网正文继续保留适当最大宽度；Dashboard 维持左侧菜单和自适应内容区；Studio 使用独立顶部工具栏，不叠加官网 Header。V14 为交互原型实现，具体像素值可继续验收调整。

V15 原型跨目录导航规范（2026-10-14，待验收）

Storyra 静态原型包含项目根、Latest、版本中心与 versions/vN/ 深层路径。跨目录链接必须使用以 /storyra/ 开头的站点根绝对路径，禁止将 storyra/latest/ 或 storyra/overview/ 直接拼接在当前版本 URL 后。Header/版本中心链接须使用真实 href，导航到创作空间内部的状态切换与跳转到独立静态页面应明确区分。Nuxt 正式开发时由路由系统管理站内页面，静态原型保持路径稳定。V15 为链接修复，不改变已确认业务规则。

V16 宽屏弹性布局（待验收，2026-10-14）

用户确认需要充分利用桌面宽屏。官网 Header、Hero、功能区采用视口宽度和响应式安全边距，不再受 1160/1220px 统一居中上限束缚；文字段落仍控制可读长度。个人创作空间保持约 240px 左侧菜单，右侧内容区占满剩余宽度并采用自适应多列作品/素材/角色画廊。Studio 继续独立顶栏、约 215px 步骤栏、弹性编辑区、约 300px AI 助手；窄屏折叠。V16 为布局实现候选，具体尺寸待浏览器验收。

V17 平台与 Studio 顶栏结构（2026-10-14，待验收）

个人创作空间采用 240px 左侧导航栏，其顶部 Logo 区与右侧应用 Header 并列构成第一行；第二行左侧为菜单，右侧为内容。右侧 Header 只保留当前模块与账户操作，不重复展示 Logo 和全站官网导航。Studio 使用独立 215px 左侧返回区和右侧作品标题/保存/导出工具栏，与下方步骤菜单的边界严格对齐。普通产品 UI 不展示 Latest 或版本中心入口；版本机制仅在 ui.sdkit.cn 项目展示站保留，不删除 latest/ 和 overview/ 文件。窄屏收敛导航，避免重叠。V17 为布局验收候选，真实登录与保存状态仍为模拟。

V18 清爽易用主题与布局（2026-10-14，待验收）

统一采用低饱和中性配色：页面 #F8F9F8、内容 #FFFFFF、导航 #F3F5F3、主文字 #30363A、次文字 #79838A、强调 #668C83、边框 #E9ECEA。官网 Header 保持全宽，而 Hero 与功能介绍正文居中，最大约 1200px，避免宽屏下内容拉得过散；Dashboard 保留左侧菜单与弹性内容区，顶部使用继续创作快捷入口及用户头像下拉（个人资料、创作偏好、帮助、退出）。Studio 使用独立布局，AI 助手默认收起、可按需展开，剧本编辑注重舒适行高和内容宽度，画面预览可局部使用深色。降低卡片阴影和高饱和色面积。V18 为视觉候选，未完成所有 Studio 专属模块的重设计；不改变业务规则。

V19 蓝灰视觉与镜头规划（待验收，2026-10-14）

视觉候选调整为中性蓝灰：背景 #F7F8FA、文字 #252B37、品牌强调 #4775D1、浅蓝辅助 #EEF3FC、边框 #E5E9F0。字体以 PingFang SC 与 Inter / 系统字体回退为主，减少标题过重与多种强调色。官网 Header 全宽，正文居中。Studio 分镜模块采用镜头规划卡片和单镜头详情，可编辑画面动作、复制豆包制作提示词、标记采用，不引入逐帧编辑、多轨时间轴或专业剪辑功能。V19 是视觉与分镜交互候选，其他 Studio 专属页面仍需逐步完善。

V20 Studio 专属编辑页（待验收，2026-10-15）

基于 V19 蓝灰主题与分镜卡片，完善剧本正文及检查清单、角色候选与固定外貌描述、场景描述及画风、旁白和声音设定、豆包逐镜头提示词复制与 JSON 制作包、成果采用状态。模块采用内容导向的不同布局，而非每页重复通用大表单。AI 建议只作模拟提示，不覆盖原剧本；分镜仅表示镜头规划，明确不做逐帧编辑或剪辑时间轴。用户继续手动在外部平台生成视频。V20 为静态模拟，真实图片上传、结果视频回填、跨作品隔离与生成 API 均待后续实现。

V21 手动生成视频回填页（2026-10-15，待验收）

Studio 成果页以镜头为主线，左侧展示镜头状态，右侧展示所选镜头的候选视频卡片与预览；支持添加本地视频、多个候选、采用/移除候选、复制制作提示词，并显示总镜头/待审核/已采用数量。候选采用更新分镜状态；视频通过浏览器 Object URL 当前会话临时预览，元数据通过 v21 localStorage 演示，刷新后需重新选择视频文件才能播放。此为演示能力，不能声称已实现上传、云端存储或正式版本管理。

V22 角色定妆与镜头连续性（2026-10-15，待验收）

Studio 角色页使用角色卡片和详情表单，支持新建、编辑、删除、确认定妆。场景页支持参考记录。分镜页左侧展示镜头列表，右侧可勾选角色和场景，保存后生成带固定角色特征、服装与场景描述的豆包提示词。未确认定妆的角色给出提醒；删除角色或参考时清理引用。原型数据在 V22 localStorage 内按演示作品名称分组，尚非正式数据模型；真实图像与云端存储未实现。

V23 本地图片参考与镜头引用（2026-10-15，待验收）

Studio 美术页增加本地图片选择、角色/场景归属、主参考图选择、图片记录删除。分镜页可逐镜头勾选图片引用，复制包含文件名的豆包提示词，导出 JSON 参考素材清单。图片仅通过浏览器 Object URL 在当前会话预览，刷新后需重新选择；localStorage 仅存元数据和引用。未实现真实云端上传、ZIP 或原始图片导出。角色与场景的文本档案延续 V22，视频候选回填延续 V21。

V24 离线制作包交互（待验收，2026-10-15）

制作包页逐镜头显示提示词与图片添加入口，支持复制提示词、导出内嵌当前会话图片的离线 HTML；每张图片限 3MB。与 V23 素材库尚未自动联动，刷新后图片需重新选择。后续需统一素材引用与打包逻辑，当前仅为可操作原型。

V25 个人创作空间统一设计（2026-10-15，待验收）

创作空间首页改为创作引导、作品/角色/已采用镜头指标、最近作品和新手路线；我的作品采用统一卡片、制作进度、状态筛选、名称搜索；素材库支持分类筛选和名称搜索；角色库以角色档案卡片与定妆提示为主；创作任务按作品镜头状态聚合并提供返回分镜入口；个人资料与偏好使用统一表单。统一中性蓝灰配色、标题层级、按钮、留白、卡片与响应式网格，Studio 继续独立。所有指标来自原型本地演示数据，个人资料和偏好仅模拟，不代表正式账号系统。

V26 移动端响应式与可访问性（2026-10-15，待验收）

个人创作空间窄屏下采用横向可滚动业务导航、全宽搜索输入、可换行任务行与自适应卡片网格；手机顶部简化面包屑与用户入口。统一按钮最小触控高度和键盘焦点样式，账户下拉支持 Esc 关闭，尊重减少动画偏好。V26 不修改产品流程与数据模型；移动真机与线上视觉仍需验收。

V27 交互修复（待验收）

个人空间创建作品、编辑素材和角色后恢复新版布局，避免退回旧卡片页面。账户下拉支持 Esc 关闭。仅涉及原型交互，不修改业务规则。

V28 原型结构重整（2026-10-15，待验收）

为消除 V1–V27 多层样式与事件叠加，V28 采用独立 HTML/CSS/JS、单一页面状态与事件分发、独立 localStorage 演示数据。统一官网、个人空间和 Studio 导航及主要交互。当前只恢复素材元数据与 JSON 制作包，尚未恢复 V23 图片引用、V24 离线 HTML 图片打包和完整多候选审核 UI；后续按统一模型补回，不修改已确认产品范围。

V29 素材引用与制作交互（待验收）

素材库统一管理图片元数据，分镜勾选引用，制作包导出当前会话已加载图片的离线 HTML。成果页管理多个候选记录与采用状态。图片视频本体仅在当前浏览器会话有效，刷新后需要重新加载。仍为静态模拟。