AIGameCreator App
72a6d635da
新增独立 Tauri 壳 apps/ai-game-creator-shell，只保留聊天入口，正式用户窗口不承载游戏预览画面，开发模式通过独立窗口展示任务、文件、记忆、预览和日志 新增游戏创作专业组与种子任务图契约，覆盖策划/美术/程序/数值/音乐/运营 6 组下 15 个组内角色 新增共享契约本地项目 manifest、内置命令权限枚举、run trace schema 和 ready-task 选择器 扩展平台 LLM 支持流式请求，增加 GENARRATIVE_GAME_CREATOR_LLM_STREAM 开关 新增 AI 游戏创作 App 的聊天命令集：/help /capabilities /audit /project /llm-status /status /files /assets /read /tasks /trace /smoke /run /preview /preview-status /preview-open /preview-stop /memory /remember /forget-memory /canvas /sync-canvas-project /import-canvas-asset /import-canvas-export 新增本地项目初始化、权限 gate（pending/confirm/cancel）、文件上传、受限命令白名单 game.static_smoke 和本地 HTTP 预览 新增 Planner / 6 组角色 agent / Generator / Evaluator / ArtifactWriter / Playtest 文件驱动 loop，最多 3 轮返工，结构化 repairRoutes 新增实时 run trace 写入 .agent/run.latest.json 与 .agent/runs/，包含 taskGraph、passPlans 和步级 toolCalls 新增短期/长期记忆 memory/session.md 和 memory/project.md，支持聊天读取/追加/覆盖/删除 新增画板对接：canvas.project_open、canvas.project_sync、canvas.asset_import、canvas.export_import 新增 npm run ai-game-creator-shell:check 开发验收入口，覆盖 typecheck、单元测试、端到端 smoke 新增 check:native-shells 静态守门：release 只登记 main 聊天窗口，CSP 禁止内嵌预览，开发窗口只在 debug 下打开，用户侧预览命令必须调用 open_local_game_preview
464 lines
6.7 KiB
CSS
464 lines
6.7 KiB
CSS
:root {
|
|
color: #18202f;
|
|
background: #f5f7fb;
|
|
font-family: Inter, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
.app-shell {
|
|
min-height: 100vh;
|
|
background: #f5f7fb;
|
|
}
|
|
|
|
.app-shell--user {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
}
|
|
|
|
.app-shell--dev {
|
|
display: grid;
|
|
grid-template-columns: minmax(360px, 0.85fr) minmax(520px, 1.15fr);
|
|
gap: 1px;
|
|
background: #d9dee8;
|
|
}
|
|
|
|
.chat-pane {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
min-width: 0;
|
|
padding: 18px;
|
|
background: #fff;
|
|
}
|
|
|
|
.app-shell--user .chat-pane {
|
|
width: min(900px, 100%);
|
|
min-height: calc(100vh - 48px);
|
|
border: 1px solid #d9dee8;
|
|
}
|
|
|
|
.app-shell--dev .chat-pane {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.chat-header,
|
|
.panel-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.panel-header {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.panel-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.panel-header button,
|
|
.local-project-form button,
|
|
.panel-actions select {
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.panel-header button,
|
|
.local-project-form button {
|
|
color: #fff;
|
|
background: #1f6feb;
|
|
}
|
|
|
|
.panel-actions select {
|
|
background: #fff;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 14px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.chat-header span,
|
|
.task-pane span,
|
|
.log-pane p {
|
|
color: #647084;
|
|
}
|
|
|
|
.message-list {
|
|
flex: 1;
|
|
border: 1px solid #dde3ee;
|
|
padding: 14px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.message + .message {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.message {
|
|
overflow-wrap: anywhere;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.message--user {
|
|
color: #1f6feb;
|
|
}
|
|
|
|
.pending-command {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
border: 1px solid #dde3ee;
|
|
background: #f8fafd;
|
|
}
|
|
|
|
.pending-command span {
|
|
display: grid;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
margin-right: auto;
|
|
color: #647084;
|
|
}
|
|
|
|
.pending-command small {
|
|
overflow-wrap: anywhere;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.pending-command button {
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
background: #1f6feb;
|
|
}
|
|
|
|
.composer {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
gap: 10px;
|
|
}
|
|
|
|
.composer input,
|
|
.composer button,
|
|
.composer-upload-button {
|
|
height: 40px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.composer input {
|
|
min-width: 0;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.composer button,
|
|
.composer-upload-button {
|
|
display: inline-grid;
|
|
padding: 0 18px;
|
|
place-items: center;
|
|
color: #fff;
|
|
background: #1f6feb;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.composer-upload-button input {
|
|
display: none;
|
|
}
|
|
|
|
.developer-pane {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
align-content: start;
|
|
gap: 1px;
|
|
min-width: 0;
|
|
background: #d9dee8;
|
|
}
|
|
|
|
.developer-panel {
|
|
min-width: 0;
|
|
padding: 18px;
|
|
background: #fff;
|
|
}
|
|
|
|
.developer-panel--wide {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.task-pane article {
|
|
display: grid;
|
|
grid-template-columns: 84px 1fr;
|
|
gap: 12px;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #edf1f7;
|
|
}
|
|
|
|
.capability-pane article {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 12px;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #edf1f7;
|
|
}
|
|
|
|
.capability-pane span {
|
|
color: #647084;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.trace-pane article {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #edf1f7;
|
|
}
|
|
|
|
.trace-pane span,
|
|
.trace-pane small {
|
|
color: #647084;
|
|
}
|
|
|
|
.trace-pane small {
|
|
overflow-wrap: anywhere;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.trace-error {
|
|
margin-bottom: 10px;
|
|
padding: 8px;
|
|
border: 1px solid #efb3b3;
|
|
border-radius: 6px;
|
|
color: #8a1f1f;
|
|
background: #fff5f5;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.trace-artifacts {
|
|
display: grid;
|
|
gap: 4px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.trace-task-graph {
|
|
display: grid;
|
|
gap: 4px;
|
|
margin-bottom: 10px;
|
|
padding: 8px;
|
|
border: 1px solid #dce3ee;
|
|
border-radius: 6px;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.trace-history {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.trace-history button {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
padding: 5px 8px;
|
|
overflow-wrap: anywhere;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
color: #18202f;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
.asset-pane code {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
padding: 9px 10px;
|
|
border: 1px solid #e1e7f0;
|
|
background: #f8fafd;
|
|
}
|
|
|
|
.local-project-form {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.local-project-form input,
|
|
.local-project-form button {
|
|
min-width: 0;
|
|
height: 36px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.local-project-form input {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.asset-register-form {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.asset-register-form input,
|
|
.asset-register-form select,
|
|
.asset-register-form button {
|
|
min-width: 0;
|
|
height: 34px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.asset-register-form input,
|
|
.asset-register-form select {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.asset-register-form button {
|
|
color: #fff;
|
|
background: #1f6feb;
|
|
}
|
|
|
|
.status-line,
|
|
.manifest-path {
|
|
margin-bottom: 10px;
|
|
color: #647084;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.manifest-path {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.file-pane input,
|
|
.file-pane textarea,
|
|
.memory-pane textarea {
|
|
display: block;
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.file-pane input {
|
|
height: 36px;
|
|
}
|
|
|
|
.file-pane textarea,
|
|
.memory-pane textarea {
|
|
min-height: 150px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.file-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.file-list button {
|
|
padding: 6px 10px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
}
|
|
|
|
.limited-command-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.limited-command-list button {
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
background: #1f6feb;
|
|
}
|
|
|
|
.preview-frame {
|
|
display: grid;
|
|
width: 100%;
|
|
min-height: 180px;
|
|
place-items: center;
|
|
border: 1px solid #cfd7e6;
|
|
background: #101827;
|
|
color: #d9e7ff;
|
|
}
|
|
|
|
iframe.preview-frame {
|
|
display: block;
|
|
height: 180px;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.app-shell--user {
|
|
padding: 0;
|
|
}
|
|
|
|
.app-shell--user .chat-pane {
|
|
min-height: 100vh;
|
|
border: 0;
|
|
}
|
|
|
|
.app-shell--dev {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.developer-pane {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.developer-panel--wide {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.composer {
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
|
|
.composer-upload-button {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|