GenarrativeAI/Genarrative
11
0
Fork 0
Code Issues 21 Pull Requests 4 Actions Packages Projects 3 Releases Wiki Activity

Game creator extract home view #80

Merged
kdletters merged 6 commits from game-creator-extract-home-view into codex/ai-game-creator-app 2026-07-16 14:33:58 +08:00
Conversation 2 Commits 6 Files Changed 10
+717 -776
10 changed files with 717 additions and 776 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ai-game-creator-shell/package.json
+4 -1
View File
@@ -18,12 +18,15 @@
"lucide-react": "^0.546.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"vite": "^6.2.0"
"vite": "^6.2.0",
"zustand": "^5.0.14"
},
"devDependencies": {
"@tailwindcss/vite": "^4.1.14",
"@tauri-apps/cli": "^2.11.2",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"tailwindcss": "^4.1.14",
"typescript": "~5.8.2"
}
}
apps/ai-game-creator-shell/src/App.tsx
+99 -361
View File
File diff suppressed because it is too large Load Diff
apps/ai-game-creator-shell/src/services/clientApi.ts
+152
View File
@@ -0,0 +1,152 @@
import {
API_RESPONSE_ENVELOPE_HEADER,
API_RESPONSE_ENVELOPE_VERSION,
ProfileDashboardSummary,
ProfileWalletLedgerResponse,
unwrapApiResponse,
} from '../../../../packages/shared/src';
const ACCESS_TOKEN_STORAGE_KEY = 'genarrative.auth.access-token.v1';
const DEFAULT_CLIENT_AUTH_API_BASE_URL = 'http://127.0.0.1:8082';
export type EditorShowcaseResource = {
resourceId: string;
showcaseId?: string | null;
label?: string | null;
imageSrc: string;
width?: number;
height?: number;
prompt?: string | null;
actualPrompt?: string | null;
assetKind?: string | null;
authorDisplayName?: string | null;
authorPublicUserCode?: string | null;
likeCount?: number | null;
};
type EditorShowcaseResourceListResponse = {
resources: EditorShowcaseResource[];
nextCursor?: string | null;
};
export class ClientAuthRequestError extends Error {
readonly status: number | null;
readonly networkError: boolean;
constructor(
message: string,
options: { status?: number | null; networkError?: boolean } = {},
) {
super(message);
this.status = options.status ?? null;
this.networkError = options.networkError ?? false;
}
}
export function getStoredAuthAccessToken() {
return window.localStorage.getItem(ACCESS_TOKEN_STORAGE_KEY)?.trim() || '';
}
export function setStoredAuthAccessToken(token: string) {
const nextToken = token.trim();
if (nextToken) {
window.localStorage.setItem(ACCESS_TOKEN_STORAGE_KEY, nextToken);
return;
}
window.localStorage.removeItem(ACCESS_TOKEN_STORAGE_KEY);
}
export function clearStoredAuthAccessToken() {
window.localStorage.removeItem(ACCESS_TOKEN_STORAGE_KEY);
}
function resolveClientApiUrl(url: string) {
if (/^https?:\/\//iu.test(url)) {
return url;
}
if (import.meta.env.DEV) {
return url;
}
const isHttpPage =
window.location.protocol === 'http:' ||
window.location.protocol === 'https:';
if (!window.__TAURI__ && isHttpPage) {
return url;
}
return `${DEFAULT_CLIENT_AUTH_API_BASE_URL}${url}`;
}
async function readApiErrorMessage(response: Response, fallback: string) {
const text = await response.text();
if (!text.trim()) {
return fallback;
}
try {
unwrapApiResponse(JSON.parse(text) as unknown);
} catch (error) {
return error instanceof Error ? error.message : fallback;
}
return fallback;
}
export async function requestClientApi<T>(
url: string,
init: RequestInit,
fallbackMessage: string,
options: { skipAuth?: boolean } = {},
) {
const headers = new Headers(init.headers);
headers.set(API_RESPONSE_ENVELOPE_HEADER, API_RESPONSE_ENVELOPE_VERSION);
if (!options.skipAuth) {
const token = getStoredAuthAccessToken();
if (token) {
headers.set('Authorization', `Bearer ${token}`);
}
}
let response: Response;
try {
response = await fetch(resolveClientApiUrl(url), {
...init,
credentials: 'same-origin',
headers,
});
} catch {
throw new ClientAuthRequestError(
'无法连接登录服务，请确认配套后端或 API 代理已启动后重试',
{ networkError: true },
);
}
if (!response.ok) {
throw new ClientAuthRequestError(
await readApiErrorMessage(response, fallbackMessage),
{ status: response.status },
);
}
const text = await response.text();
return text ? unwrapApiResponse<T>(JSON.parse(text) as T) : (null as T);
}
export function getClientProfileDashboard() {
return requestClientApi<ProfileDashboardSummary>(
'/api/profile/dashboard',
{ method: 'GET' },
'读取泥点余额失败',
);
}
export function getClientProfileWalletLedger() {
return requestClientApi<ProfileWalletLedgerResponse>(
'/api/profile/wallet-ledger',
{ method: 'GET' },
'读取泥点明细失败',
);
}
export function listClientShowcaseResources() {
return requestClientApi<EditorShowcaseResourceListResponse>(
'/api/editor/showcase/resources',
{ method: 'GET' },
'读取灵感推荐失败',
{ skipAuth: true },
);
}
apps/ai-game-creator-shell/src/stores/useHomeDraftStore.ts
+44
View File
@@ -0,0 +1,44 @@
import { create } from 'zustand';
export type HomeAgentMode = 'game' | 'art' | 'doc';
export type HomeAttachmentDraft = {
id: string;
file: File;
};
export type HomeDraft = {
mode: HomeAgentMode;
prompt: string;
attachments: HomeAttachmentDraft[];
};
type UseHomeDraftStore = HomeDraft & {
setMode: (mode: HomeAgentMode) => void;
setPrompt: (prompt: string) => void;
addAttachments: (attachments: HomeAttachmentDraft[]) => void;
removeAttachment: (attachmentId: string) => void;
reset: () => void;
};
const initialHomeDraft: HomeDraft = {
mode: 'game',
prompt: '',
attachments: [],
};
// Keep non-serializable File objects available while the Home view is unmounted.
export const useLauncherHomeDraftStore = create<UseHomeDraftStore>((set) => ({
...initialHomeDraft,
setMode: (mode) => set({ mode }),
setPrompt: (prompt) => set({ prompt }),
addAttachments: (attachments) =>
set((state) => ({ attachments: [...state.attachments, ...attachments] })),
removeAttachment: (attachmentId) =>
set((state) => ({
attachments: state.attachments.filter(
(attachment) => attachment.id !== attachmentId,
),
})),
reset: () => set(initialHomeDraft),
}));
apps/ai-game-creator-shell/src/styles.css
+9 -413
View File
@@ -1,3 +1,5 @@
@import 'tailwindcss';
:root {
color: #18202f;
background: #f5f7fb;
@@ -196,11 +198,8 @@ textarea {
}
.launcher-sidebar button,
.launcher-project-list button,
.launcher-promo button,
.launcher-account-bar button,
.launcher-prompt-card button,
.launcher-model-pills button {
.launcher-account-bar button {
border: 0;
cursor: pointer;
}
@@ -466,281 +465,12 @@ textarea {
font-weight: 700;
}
.launcher-hero {
display: grid;
align-content: start;
justify-items: center;
gap: 13px;
min-height: 374px;
padding: 103px 24px 18px;
}
.launcher-main-with-promo .launcher-hero {
padding-top: 135px;
}
.launcher-hero-title {
display: flex;
align-items: center;
gap: 12px;
text-align: center;
}
.launcher-hero-logo {
display: grid;
width: 30px;
height: 30px;
flex: 0 0 auto;
border-radius: 50%;
background: #060606;
color: #fff;
font-size: 11px;
font-weight: 700;
place-items: center;
}
.launcher-hero-title h1 {
margin: 0;
font-size: 27px;
font-weight: 750;
letter-spacing: 0;
}
.launcher-hero-title p {
margin-top: 12px;
color: #a0a0a0;
font-size: 13px;
}
.launcher-prompt-card {
display: grid;
grid-template-rows: minmax(42px, auto) auto auto;
width: min(488px, calc(100vw - 110px));
min-height: 80px;
padding: 13px 12px 8px;
border: 1px solid #e1e4e8;
border-radius: 18px;
background: #fff;
box-shadow: 0 8px 24px rgb(15 23 42 / 8%);
}
.launcher-prompt-card textarea {
width: 100%;
min-height: 36px;
padding: 0;
resize: none;
border: 0;
outline: 0;
background: transparent;
color: #171717;
font-size: 13px;
}
.launcher-attachment-queue {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 0 4px;
}
.launcher-attachment-queue span {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 100%;
min-height: 24px;
padding: 0 7px;
border: 1px solid #e5e7eb;
border-radius: 7px;
background: #f8fafc;
color: #374151;
font-size: 11px;
}
.launcher-attachment-queue button {
width: 18px;
height: 18px;
color: #6b7280;
}
.launcher-file-input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.launcher-prompt-card textarea::placeholder {
color: #bababa;
}
.launcher-prompt-actions {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
color: #777;
font-size: 12px;
}
.launcher-prompt-actions button {
display: grid;
width: 24px;
height: 24px;
padding: 0;
border-radius: 50%;
background: transparent;
color: #666;
place-items: center;
}
.launcher-prompt-actions button:last-child {
background: #f1f1f1;
color: #9a9a9a;
}
.launcher-prompt-actions button:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.launcher-model-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 9px;
width: min(488px, calc(100vw - 110px));
}
.launcher-model-pills button {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 27px;
padding: 0 12px;
border: 1px solid #d6d6d6;
border-radius: 999px;
background: #fff;
color: #333;
font-size: 12px;
}
.launcher-model-pills .launcher-pill-active {
border-color: #8b5cf6;
background: #f8f2ff;
color: #7c3aed;
}
.launcher-project-list {
display: grid;
gap: 14px;
width: min(1054px, calc(100vw - 122px));
margin: 0 auto;
}
.launcher-project-list header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.launcher-project-list h2 {
margin: 0;
color: #111827;
font-size: 15px;
}
.launcher-project-status {
margin: 4px 0 0;
color: #8b8b8b;
font-size: 12px;
}
.launcher-project-list header button,
.launcher-project-list-empty > button {
padding: 0;
background: transparent;
color: #888;
font-size: 12px;
}
.launcher-project-list-actions {
display: flex;
align-items: center;
gap: 10px;
}
.launcher-project-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
overflow: hidden;
}
.launcher-project-card {
display: grid;
min-width: 0;
}
.launcher-project-card > div,
.launcher-project-card > button {
position: relative;
height: 116px;
width: 100%;
overflow: hidden;
border: 1px solid #e1e4e8;
border-radius: 8px;
background: #f7f7f7;
cursor: pointer;
}
.launcher-project-card-main {
display: grid;
align-content: start;
justify-items: start;
gap: 6px;
padding: 12px;
text-align: left;
}
.launcher-project-card-main:disabled {
cursor: not-allowed;
opacity: 0.58;
}
.launcher-project-card-main > span {
display: grid;
width: 42px;
height: 42px;
border-radius: 12px;
background: #fff;
color: #f26d2d;
font-size: 16px;
font-weight: 700;
place-items: center;
}
.launcher-project-card strong {
min-width: 0;
color: #111;
font-size: 12px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.launcher-project-card small {
margin-top: -5px;
color: #8b8b8b;
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.launcher-project-create > button {
display: grid;
border-style: dashed;
@@ -766,96 +496,6 @@ textarea {
box-shadow: 0 8px 22px rgb(242 109 45 / 16%);
}
.launcher-showcase {
display: grid;
gap: 14px;
width: min(1054px, calc(100vw - 122px));
margin: 22px auto 0;
}
.launcher-showcase header {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
}
.launcher-section-title {
display: grid;
gap: 4px;
}
.launcher-section-title span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.launcher-showcase h2 {
margin: 0;
color: #111827;
font-size: 15px;
}
.launcher-showcase p {
margin: 4px 0 0;
color: #8b8b8b;
font-size: 12px;
}
.launcher-showcase-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
}
.launcher-showcase-grid article,
.launcher-showcase-empty {
overflow: hidden;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #fff;
}
.launcher-showcase-grid article {
display: grid;
gap: 7px;
padding-bottom: 10px;
}
.launcher-showcase-grid img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
background: #f3f4f6;
}
.launcher-showcase-grid strong,
.launcher-showcase-grid small {
min-width: 0;
padding: 0 9px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.launcher-showcase-grid strong {
color: #111827;
font-size: 12px;
}
.launcher-showcase-grid small,
.launcher-showcase-empty {
color: #6b7280;
font-size: 11px;
}
.launcher-showcase-empty {
display: grid;
min-height: 96px;
place-items: center;
}
.launcher-page {
display: grid;
gap: 22px;
@@ -910,18 +550,6 @@ textarea {
font-size: 12px;
}
.launcher-project-list-empty {
display: grid;
justify-items: center;
gap: 10px;
padding: 18px 0 32px;
}
.launcher-project-list-empty h2 {
color: #111827;
font-size: 16px;
}
.launcher-project-form input {
min-width: 0;
height: 34px;
@@ -933,6 +561,7 @@ textarea {
}
.launcher-page-actions button,
.launcher-page .launcher-project-list-actions button,
.launcher-project-table article > button,
.launcher-empty-projects button {
height: 32px;
@@ -944,6 +573,11 @@ textarea {
font-size: 12px;
}
.launcher-page .launcher-project-list-actions button:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.launcher-page-actions button:last-child {
border-color: #111827;
background: #111827;
@@ -1467,52 +1101,14 @@ textarea {
white-space: nowrap;
}
.launcher-hero {
align-content: start;
gap: 16px;
min-height: auto;
padding: 84px 14px 34px;
}
.launcher-main-with-promo .launcher-hero {
padding-top: 84px;
}
.launcher-hero-title {
flex-direction: column;
gap: 10px;
}
.launcher-hero-title h1 {
font-size: 22px;
}
.launcher-prompt-card,
.launcher-model-pills,
.launcher-project-list {
width: min(100%, calc(100vw - 76px));
}
.launcher-project-grid {
grid-template-columns: 1fr;
overflow: visible;
}
.launcher-project-form {
grid-template-columns: 1fr;
}
.launcher-project-card > div,
.launcher-project-card > button {
height: 132px;
}
.launcher-showcase,
.launcher-page {
width: min(100%, calc(100vw - 76px));
}
.launcher-showcase-grid,
.launcher-development-grid {
grid-template-columns: 1fr;
}
apps/ai-game-creator-shell/src/view/home/index.tsx
+354
View File
@@ -0,0 +1,354 @@
import {
FolderKanban,
type LucideIcon,
Plus,
Sparkles,
Upload,
X,
} from 'lucide-react';
import type {
FormEvent,
} from 'react';
import { useRef, useState } from 'react';
import {
useLauncherHomeDraftStore,
type HomeAgentMode,
type HomeAttachmentDraft,
type HomeDraft,
} from '../../stores/useHomeDraftStore';
import { useHomeShowcase } from './useHomeShowcase';
export type {
HomeAgentMode,
HomeAttachmentDraft,
HomeDraft,
} from '../../stores/useHomeDraftStore';
export type HomeAgentModeItem = {
mode: HomeAgentMode;
label: string;
placeholder: string;
emptyPrompt: string;
icon: LucideIcon;
};
export type HomeProjectRow = {
path: string;
name: string;
status: string;
canOpen: boolean;
};
export type HomeShowcaseResource = {
resourceId: string;
showcaseId?: string | null;
label?: string | null;
imageSrc: string;
prompt?: string | null;
authorDisplayName?: string | null;
authorPublicUserCode?: string | null;
};
type HomeViewProps = {
hasPromo: boolean;
status: string;
onStatusChange: (status: string) => void;
homeAgentModeItems: readonly HomeAgentModeItem[];
recentProjectRows: readonly HomeProjectRow[];
onCreateDraft: (draft: HomeDraft) => Promise<string>;
onProjectsOpen: () => void;
onProjectOpen: (path: string) => void;
};
export default function HomeView({
hasPromo,
status,
onStatusChange,
homeAgentModeItems,
recentProjectRows,
onCreateDraft,
onProjectsOpen,
onProjectOpen,
}: HomeViewProps) {
const homeAgentMode = useLauncherHomeDraftStore((state) => state.mode);
const homePrompt = useLauncherHomeDraftStore((state) => state.prompt);
const homeAttachments = useLauncherHomeDraftStore(
(state) => state.attachments,
);
const setHomeAgentMode = useLauncherHomeDraftStore((state) => state.setMode);
const setHomePrompt = useLauncherHomeDraftStore((state) => state.setPrompt);
const addHomeAttachments = useLauncherHomeDraftStore(
(state) => state.addAttachments,
);
const removeHomeAttachment = useLauncherHomeDraftStore(
(state) => state.removeAttachment,
);
const [homeCreationBusy, setHomeCreationBusy] = useState(false);
const { resources: showcaseResources, status: showcaseStatus } =
useHomeShowcase();
const homeAttachmentInputRef = useRef<HTMLInputElement | null>(null);
const activeHomeMode =
homeAgentModeItems.find((item) => item.mode === homeAgentMode) ??
homeAgentModeItems[0];
if (!activeHomeMode) {
return null;
}
const ActiveHomeModeIcon = activeHomeMode.icon;
function handleHomeAttachmentSelection(
event: React.ChangeEvent<HTMLInputElement>,
) {
const files = Array.from(event.currentTarget.files ?? []);
event.currentTarget.value = '';
if (files.length === 0) {
return;
}
addHomeAttachments(
files.map((file, index) => ({
id: `${file.name}:${file.size}:${file.lastModified}:${index}:${Date.now()}`,
file,
})),
);
}
async function handleHomeSubmit(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
if (!homePrompt.trim() && homeAttachments.length === 0) {
onStatusChange(
homeAgentModeItems.find((item) => item.mode === homeAgentMode)
?.emptyPrompt ?? '请输入需求或上传附件',
);
return;
}
setHomeCreationBusy(true);
onStatusChange('请选择项目目录');
try {
onStatusChange(
await onCreateDraft({
mode: homeAgentMode,
prompt: homePrompt,
attachments: homeAttachments,
}),
);
} catch (error) {
onStatusChange(error instanceof Error ? error.message : String(error));
} finally {
setHomeCreationBusy(false);
}
}
return (
<>
<section
className={`grid min-h-93.5 content-start justify-items-center gap-3.25 px-6 pb-4.5 pt-25.75 max-[760px]:min-h-0 max-[760px]:gap-4 max-[760px]:px-3.5 max-[760px]:pb-[34px] max-[760px]:pt-[84px] ${
hasPromo ? 'pt-33.75 max-[760px]:pt-21' : ''
}`}
aria-label="首页输入"
>
<div className="flex items-center gap-3 text-center max-[760px]:flex-col max-[760px]:gap-2.5">
<span className="grid size-7.5 shrink-0 place-items-center rounded-full bg-[#060606] text-[11px] font-bold text-white">
<ActiveHomeModeIcon size={18} aria-hidden="true" />
</span>
<div>
<h1 className="m-0 text-[27px] font-[750] tracking-normal max-[760px]:text-[22px]">
陶泥儿 GameAgent
</h1>
<p className="m-0 mt-3 text-[13px] text-[#a0a0a0]">
{activeHomeMode.placeholder}
</p>
</div>
</div>
<div
className="flex w-[min(488px,calc(100vw-110px))] flex-wrap justify-center gap-[9px] max-[760px]:w-[min(100%,calc(100vw-76px))]"
aria-label="Agent 分类"
>
{homeAgentModeItems.map((item) => {
const ModeIcon = item.icon;
const isActive = item.mode === homeAgentMode;
return (
<button
type="button"
key={item.mode}
className={`inline-flex min-h-6.75 items-center gap-1.25 rounded-full border px-3 text-[12px] ${
isActive
? 'border-violet-500 bg-[#f8f2ff] text-violet-600'
: 'border-[#d6d6d6] bg-white text-[#333]'
}`}
onClick={() => setHomeAgentMode(item.mode)}
>
<ModeIcon size={14} aria-hidden="true" />
{item.label}
</button>
);
})}
</div>
<form
className="grid min-h-20 w-[min(488px,calc(100vw-110px))] grid-rows-[minmax(42px,auto)_auto_auto] rounded-[18px] border border-[#e1e4e8] bg-white px-3 pb-2 pt-[13px] shadow-[0_8px_24px_rgb(15_23_42_/_8%)] max-[760px]:w-[min(100%,calc(100vw-76px))]"
onSubmit={handleHomeSubmit}
>
<textarea
className="min-h-9 w-full resize-none border-0 bg-transparent p-0 text-[13px] text-[#171717] outline-0 placeholder:text-[#bababa]"
aria-label="创作想法"
placeholder={activeHomeMode.placeholder}
value={homePrompt}
onChange={(event) => setHomePrompt(event.currentTarget.value)}
/>
{homeAttachments.length > 0 ? (
<div className="flex flex-wrap gap-1.5 py-2 pb-1" aria-label="附件队列">
{homeAttachments.map((attachment) => (
<span
className="inline-flex min-h-6 max-w-full items-center gap-1 rounded-[7px] border border-gray-200 bg-slate-50 px-[7px] text-[11px] text-gray-700"
key={attachment.id}
>
{attachment.file.name}
<button
className="size-[18px] cursor-pointer border-0 bg-transparent p-0 text-gray-500"
type="button"
aria-label={`移除附件 ${attachment.file.name}`}
onClick={() => removeHomeAttachment(attachment.id)}
>
<X size={12} aria-hidden="true" />
</button>
</span>
))}
</div>
) : null}
<div className="grid grid-cols-[auto_1fr_auto] items-center gap-2.5 text-[12px] text-[#777]">
<input
ref={homeAttachmentInputRef}
className="launcher-file-input pointer-events-none absolute size-px opacity-0"
type="file"
multiple
onChange={handleHomeAttachmentSelection}
/>
<button
className="grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-transparent p-0 text-[#666]"
type="button"
aria-label="上传素材"
onClick={() => homeAttachmentInputRef.current?.click()}
>
<Upload size={15} aria-hidden="true" />
</button>
<span>{status}</span>
<button
className="grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-[#f1f1f1] p-0 text-[#9a9a9a] disabled:cursor-not-allowed disabled:opacity-55"
type="submit"
aria-label="开启创作"
disabled={homeCreationBusy}
>
<Plus size={16} aria-hidden="true" />
</button>
</div>
</form>
</section>
<section
className="mx-auto grid w-[min(1054px,calc(100vw-122px))] gap-[14px] max-[760px]:w-[min(100%,calc(100vw-76px))]"
aria-label="最近项目"
>
<header className="flex items-center justify-between gap-3">
<div>
<h2 className="m-0 text-[15px] text-gray-900">最近项目</h2>
<p className="mb-0 mt-1 text-[12px] text-[#8b8b8b]">
{status}
</p>
</div>
<div className="launcher-project-list-actions">
<button
className="cursor-pointer border-0 bg-transparent p-0 text-[12px] text-[#888]"
type="button"
onClick={onProjectsOpen}
>
查看全部 〉
</button>
</div>
</header>
{recentProjectRows.length > 0 ? (
<div className="grid grid-cols-5 gap-3 overflow-hidden max-[760px]:grid-cols-1 max-[760px]:overflow-visible">
{recentProjectRows.map((project) => (
<article className="grid min-w-0" key={project.path}>
<button
className="grid h-auto w-full cursor-pointer content-start justify-items-start gap-1.5 overflow-hidden rounded-lg border border-[#e1e4e8] bg-[#f7f7f7] p-3 text-left disabled:cursor-not-allowed disabled:opacity-[0.58] max-[760px]:h-[132px]"
type="button"
disabled={!project.canOpen}
onClick={() => onProjectOpen(project.path)}
>
<span className="grid size-[42px] place-items-center rounded-xl bg-white text-[16px] font-bold text-[#f26d2d]">
{project.name.slice(0, 2)}
</span>
<strong className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] font-medium text-[#111]">
{project.name}
</strong>
<small className="-mt-[5px] min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[11px] text-[#8b8b8b]">
{project.path}
</small>
<small className="-mt-[5px] min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[11px] text-[#8b8b8b]">
{project.status}
</small>
</button>
</article>
))}
</div>
) : (
<div className="grid justify-items-center gap-2.5 px-0 pb-8 pt-[18px]">
<FolderKanban size={22} aria-hidden="true" />
<strong>暂无最近项目</strong>
<button
className="cursor-pointer border-0 bg-transparent p-0 text-[12px] text-[#888]"
type="button"
onClick={onProjectsOpen}
>
去项目组
</button>
</div>
)}
</section>
<section
className="mx-auto mt-[22px] grid w-[min(1054px,calc(100vw-122px))] gap-[14px] max-[760px]:w-[min(100%,calc(100vw-76px))]"
aria-label="灵感推荐"
>
<header className="flex items-center justify-start gap-3">
<div className="grid gap-1">
<span className="inline-flex items-center gap-1.5">
<h2 className="m-0 text-[15px] text-gray-900">灵感推荐</h2>
<Sparkles size={15} aria-hidden="true" />
</span>
<p className="mb-0 mt-1 text-[12px] text-[#8b8b8b]">{showcaseStatus}</p>
</div>
</header>
{showcaseResources.length > 0 ? (
<div className="grid grid-cols-6 gap-3 max-[760px]:grid-cols-1">
{showcaseResources.map((resource) => (
<article
className="grid gap-[7px] overflow-hidden rounded-lg border border-gray-200 bg-white pb-2.5"
key={resource.showcaseId ?? resource.resourceId}
>
<img
className="aspect-square w-full object-cover bg-gray-100"
src={resource.imageSrc}
alt={resource.label || resource.prompt || '灵感素材'}
/>
<strong className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap px-[9px] text-[12px] text-gray-900">
{resource.label || '未命名素材'}
</strong>
<small className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap px-[9px] text-[11px] text-gray-500">
{resource.authorDisplayName ||
resource.authorPublicUserCode ||
'陶泥儿精选'}
</small>
</article>
))}
</div>
) : (
<div className="grid min-h-24 place-items-center overflow-hidden rounded-lg border border-gray-200 bg-white text-[11px] text-gray-500">
{showcaseStatus}
</div>
)}
</section>
</>
);
}
apps/ai-game-creator-shell/src/view/home/useHomeShowcase.ts
+35
View File
@@ -0,0 +1,35 @@
import { useEffect, useState } from 'react';
import {
listClientShowcaseResources,
type EditorShowcaseResource,
} from '../../services/clientApi';
export function useHomeShowcase() {
const [resources, setResources] = useState<EditorShowcaseResource[]>([]);
const [status, setStatus] = useState('正在读取灵感');
useEffect(() => {
let disposed = false;
void listClientShowcaseResources()
.then((response) => {
if (disposed) {
return;
}
setResources(response.resources.slice(0, 6));
setStatus(response.resources.length > 0 ? '已读取灵感' : '暂无灵感');
})
.catch((error) => {
if (disposed) {
return;
}
setResources([]);
setStatus(error instanceof Error ? error.message : '灵感读取失败');
});
return () => {
disposed = true;
};
}, []);
return { resources, status };
}
apps/ai-game-creator-shell/tests/appSurface.test.ts
+17
View File
@@ -13642,6 +13642,23 @@ describe('AI 游戏创作 App 界面边界', () => {
expect(styles).toMatch(/\.message\s*\{[^}]*overflow-wrap:\s*anywhere/s);
});
it('keeps launcher page header actions styled after Tailwind preflight', () => {
const styles = readFileSync(
resolve(process.cwd(), 'apps/ai-game-creator-shell/src/styles.css'),
'utf8',
);
const headerActionRule = styles.match(
/\.launcher-page \.launcher-project-list-actions button,[^{]*\{([^}]*)\}/s,
);
expect(headerActionRule?.[1]).toContain('padding: 0 12px;');
expect(headerActionRule?.[1]).toContain('border: 1px solid #d8dde5;');
expect(headerActionRule?.[1]).toContain('background: #fff;');
expect(styles).toMatch(
/\.launcher-page \.launcher-project-list-actions button:disabled\s*\{[^}]*cursor:\s*not-allowed;[^}]*opacity:\s*0\.55;/s,
);
});
it('shows developer panels only in dev mode', () => {
renderAppAt('/?dev');
apps/ai-game-creator-shell/vite.config.ts
+2
View File
@@ -2,6 +2,7 @@ import { existsSync, readFileSync } from 'node:fs';
import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
@@ -41,6 +42,7 @@ const apiTarget = resolveDevApiTarget();
export default defineConfig({
root: appRoot,
plugins: [
tailwindcss(),
react(),
{
name: 'genarrative-ai-game-creator-dev-marker',
docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md
+1 -1
View File
@@ -159,7 +159,7 @@ game-project/
- 短期记忆、长期记忆、项目黑板和角色私有记忆按授权本地项目路径读写；普通用户仍只通过聊天命令访问短期 / 长期 / 黑板记忆，角色私有记忆只在单 agent 对话和生成 loop 中按目标 agent 读取。
- 结构化对话记录按授权本地项目路径追加 JSONL；普通聊天、`/history`、工作区历史和单 agent 对话都读取 `.agent/conversations/`，最近 project / agent 对话可进入生成 prompt 上下文，但 v1 不提供 fork、archive 或云端同步。
- Agent 状态列表从 `.agent/manifest.json` 的任务 / 角色清单和 `.agent/run.latest.json` / `.agent/runs/<runId>.json` 的 step、taskGraph、passPlans、lifecycleStatus 派生；v1 不新增独立状态数据库，也不承诺完整后台 runner。
- App 启动先检查平台登录态；登录后进入同一个客户端首页，不再有面向用户的启动器 / 主窗口切换概念。首页按 `做游戏` / `做素材` / `做方案` 保存 `game` / `art` / `doc` 初始意图，发送时弹出原生目录选择，目标目录存在且非空时必须二次确认；确认后只调用 `init_local_game_project` 初始化本地项目、`upload_local_asset` 导入附件、`append_local_conversation_message` 记录首条需求和接收回执，再写入最近项目并切到项目开发占位页。本流程不调用 `generate_local_game_draft`、`generate_platform_art_asset` 或 LLM 聊天。
- App 启动先检查平台登录态；登录后进入同一个客户端首页，不再有面向用户的启动器 / 主窗口切换概念。首页按 `做游戏` / `做素材` / `做方案` 保存 `game` / `art` / `doc` 初始意图，发送时弹出原生目录选择，目标目录存在且非空时必须二次确认；确认后只调用 `init_local_game_project` 初始化本地项目、`upload_local_asset` 导入附件、`append_local_conversation_message` 记录首条需求和接收回执，再写入最近项目并切到项目开发占位页，成功后清空首页草稿。取消和创建失败的状态必须回显到首页；首页响应式断点与应用外壳统一为 `760px`。本流程不调用 `generate_local_game_draft`、`generate_platform_art_asset` 或 LLM 聊天。
- debug 构建启动后在用户 `client` 窗口之外额外打开 `developer` 窗口；该窗口用于开发者单独选择 Agent、切换时自动读取该 Agent 历史，并把用户消息和真实 Agent 回复持久化到 `.agent/conversations/agents/<agentId>.jsonl`，普通用户窗口不得出现 `Agent 聊天` 导航或入口。
- 首页最近项目只展示最近 3 个有效项目；项目组页在同一窗口管理最近项目、打开项目、新建项目和显示目录。打开项目只读取已初始化项目并切到项目开发占位页，不打开第二窗口；新建项目仍沿用非空目录确认，不自动重建无效历史路径。
- 项目开发占位页保留左侧栏和顶部栏，展示项目名、路径、创建模式、首条需求、附件导入结果、最近 run 状态和后续“项目开发画布”占位；本轮不落地真正画板 + Agent 双栏。