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

apply theme to game creater app

Browse Source
This commit is contained in:
王德宇
2026-07-14 19:53:57 +08:00
committed by 王德宇
parent ee0b4b5d8a
commit f07717ee62
4 changed files with 669 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ai-game-creator-shell/src/App.tsx
+4 -1
View File
@@ -3092,7 +3092,10 @@ export function WorkspaceLauncher({
: ['GameAgent V1.0 首页改版', '项目工作区和 Agent 会话建设中', '美术生成将接入平台 API'];
return (
<main className="launcher-shell" aria-label="GameAgent 客户端">
<main
className="launcher-shell platform-theme platform-theme--light"
aria-label="GameAgent 客户端"
>
<aside className="launcher-sidebar">
<div className="launcher-brand" aria-label="陶泥儿">
<span className="launcher-logo">tn</span>
apps/ai-game-creator-shell/src/styles.css
+82
View File
@@ -1,4 +1,7 @@
@import 'tailwindcss';
@import "theme.css";
/*TODO use the shared one after merged with master*/
/*@import '../../../packages/shared/src/theme.css';*/
:root {
color: #18202f;
@@ -149,6 +152,85 @@ textarea {
color: #171717;
}
.launcher-shell.platform-theme {
background: var(--platform-body-fill);
color: var(--platform-text-strong);
}
.launcher-shell.platform-theme .launcher-sidebar {
border-color: var(--platform-surface-border);
background: var(--platform-nav-fill);
}
.launcher-shell.platform-theme .launcher-logo {
background: var(--platform-button-primary-fill);
color: var(--platform-button-primary-text);
box-shadow: var(--platform-profile-action-shadow);
}
.launcher-shell.platform-theme .launcher-sidebar nav button,
.launcher-shell.platform-theme .launcher-config-button {
color: var(--platform-nav-item-text);
}
.launcher-shell.platform-theme .launcher-sidebar .launcher-nav-active {
border: 1px solid var(--platform-nav-active-border);
background: var(--platform-nav-active-fill);
color: var(--platform-nav-item-text-active);
box-shadow: var(--platform-nav-active-shadow);
}
.launcher-shell.platform-theme .launcher-sidebar nav button:hover,
.launcher-shell.platform-theme .launcher-config-button:hover,
.launcher-shell.platform-theme .launcher-sidebar .launcher-help-menu button:hover,
.launcher-shell.platform-theme .launcher-sidebar .launcher-help-menu button:focus-visible,
.launcher-shell.platform-theme .launcher-sidebar .launcher-account-popover button:hover,
.launcher-shell.platform-theme .launcher-sidebar .launcher-account-popover button:focus-visible {
background: var(--platform-nav-item-hover-fill);
}
.launcher-shell.platform-theme .launcher-main {
background: var(--platform-body-fill);
}
.launcher-shell.platform-theme .launcher-promo {
background: var(--platform-warm-bg);
color: var(--platform-warm-text);
}
.launcher-shell.platform-theme .launcher-promo button {
color: var(--platform-warm-text);
}
.launcher-shell.platform-theme .launcher-countdown,
.launcher-shell.platform-theme .launcher-account-bar button,
.launcher-shell.platform-theme .launcher-wallet-group,
.launcher-shell.platform-theme .launcher-account-popover,
.launcher-shell.platform-theme .launcher-wallet-popover,
.launcher-shell.platform-theme .launcher-help-menu {
border-color: var(--platform-subpanel-border);
background: var(--platform-subpanel-fill);
color: var(--platform-text-strong);
}
.launcher-shell.platform-theme .launcher-account-bar button,
.launcher-shell.platform-theme .launcher-account-popover button,
.launcher-shell.platform-theme .launcher-wallet-popover button,
.launcher-shell.platform-theme .launcher-wallet-ledger div span {
color: var(--platform-text-strong);
}
.launcher-shell.platform-theme .launcher-wallet-group > button {
border-left-color: var(--platform-subpanel-border);
}
.launcher-shell.platform-theme .launcher-account-popover span,
.launcher-shell.platform-theme .launcher-wallet-popover span,
.launcher-shell.platform-theme .launcher-account-popover small,
.launcher-shell.platform-theme .launcher-wallet-popover small {
color: var(--platform-text-soft);
}
.launcher-sidebar {
position: sticky;
top: 0;
apps/ai-game-creator-shell/src/theme.css
+538
View File
File diff suppressed because it is too large Load Diff
apps/ai-game-creator-shell/src/view/home/index.tsx
+45 -37
View File
@@ -12,10 +12,9 @@ import type {
import { useRef, useState } from 'react';
import {
useLauncherHomeDraftStore,
type HomeAgentMode,
type HomeAttachmentDraft,
type HomeDraft,
useLauncherHomeDraftStore,
} from '../../stores/useHomeDraftStore';
import { useHomeShowcase } from './useHomeShowcase';
@@ -141,28 +140,28 @@ export default function HomeView({
}
return (
<>
<div className="platform-theme platform-theme--light">
<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] ${
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-8.5 max-[760px]:pt-21 ${
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">
<span className="grid size-7.5 shrink-0 place-items-center rounded-full bg-(image:--platform-button-primary-fill) text-[11px] font-bold text-(--platform-button-primary-text) shadow-(--platform-profile-action-shadow)">
<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]">
<p className="m-0 mt-3 text-[13px] text-(--platform-text-soft)">
{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))]"
className="flex w-[min(488px,calc(100vw-110px))] flex-wrap justify-center gap-2.25 max-[760px]:w-[min(100%,calc(100vw-76px))]"
aria-label="Agent 分类"
>
{homeAgentModeItems.map((item) => {
@@ -174,8 +173,8 @@ export default function HomeView({
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]'
? 'border-(--platform-nav-active-border) bg-(image:--platform-nav-active-fill) text-(--platform-warm-text) shadow-(--platform-nav-active-shadow)'
: 'border-(--platform-subpanel-border) bg-(image:--platform-subpanel-fill) text-(--platform-neutral-text)'
}`}
onClick={() => setHomeAgentMode(item.mode)}
>
@@ -186,26 +185,29 @@ export default function HomeView({
})}
</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))]"
className="grid min-h-20 w-[min(488px,calc(100vw-110px))] grid-rows-[minmax(42px,auto)_auto_auto] rounded-[18px] border border-(--platform-surface-border) bg-(--platform-input-fill) px-3 pb-2 pt-3.25 shadow-(--platform-panel-shadow) focus-within:bg-(--platform-input-fill-focus) focus-within:ring-4 focus-within:ring-(--platform-input-focus-ring) 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]"
className="min-h-9 w-full resize-none border-0 bg-transparent p-0 text-[13px] text-(--platform-text-strong) outline-0 placeholder:text-(--platform-text-muted)"
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="附件队列">
<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"
className="inline-flex min-h-6 max-w-full items-center gap-1 rounded-[7px] border border-(--platform-subpanel-border) bg-(--platform-neutral-bg) px-1.75 text-[11px] text-(--platform-neutral-text)"
key={attachment.id}
>
{attachment.file.name}
<button
className="size-[18px] cursor-pointer border-0 bg-transparent p-0 text-gray-500"
className="size-4.5 cursor-pointer border-0 bg-transparent p-0 text-(--platform-text-soft)"
type="button"
aria-label={`移除附件 ${attachment.file.name}`}
onClick={() => removeHomeAttachment(attachment.id)}
@@ -216,7 +218,7 @@ export default function HomeView({
))}
</div>
) : null}
<div className="grid grid-cols-[auto_1fr_auto] items-center gap-2.5 text-[12px] text-[#777]">
<div className="grid grid-cols-[auto_1fr_auto] items-center gap-2.5 text-[12px] text-(--platform-text-soft)">
<input
ref={homeAttachmentInputRef}
className="launcher-file-input pointer-events-none absolute size-px opacity-0"
@@ -225,7 +227,7 @@ export default function HomeView({
onChange={handleHomeAttachmentSelection}
/>
<button
className="grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-transparent p-0 text-[#666]"
className="grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-transparent p-0 text-(--platform-icon-text)"
type="button"
aria-label="上传素材"
onClick={() => homeAttachmentInputRef.current?.click()}
@@ -234,7 +236,7 @@ export default function HomeView({
</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"
className="grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-(image:--platform-button-primary-fill) p-0 text-(--platform-button-primary-text) shadow-(--platform-profile-action-shadow) disabled:cursor-not-allowed disabled:opacity-55"
type="submit"
aria-label="开启创作"
disabled={homeCreationBusy}
@@ -246,19 +248,21 @@ export default function HomeView({
</section>
<section
className="mx-auto grid w-[min(1054px,calc(100vw-122px))] gap-[14px] max-[760px]:w-[min(100%,calc(100vw-76px))]"
className="mx-auto grid w-[min(1054px,calc(100vw-122px))] gap-3.5 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]">
<h2 className="m-0 text-[15px] text-(--platform-text-strong)">
最近项目
</h2>
<p className="mb-0 mt-1 text-[12px] text-(--platform-text-soft)">
{status}
</p>
</div>
<div className="launcher-project-list-actions">
<button
className="cursor-pointer border-0 bg-transparent p-0 text-[12px] text-[#888]"
className="cursor-pointer border-0 bg-transparent p-0 text-[12px] text-(--platform-warm-text)"
type="button"
onClick={onProjectsOpen}
>
@@ -271,21 +275,21 @@ export default function HomeView({
{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]"
className="grid h-auto w-full cursor-pointer content-start justify-items-start gap-1.5 overflow-hidden rounded-lg border border-(--platform-surface-border) bg-(image:--platform-subpanel-fill) p-3 text-left shadow-(--platform-panel-shadow) transition hover:border-(--platform-surface-hover-border) disabled:cursor-not-allowed disabled:opacity-[0.58] max-[760px]:h-33"
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]">
<span className="grid size-10.5 place-items-center rounded-xl bg-(--platform-warm-bg) text-[16px] font-bold text-(--platform-warm-text)">
{project.name.slice(0, 2)}
</span>
<strong className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] font-medium text-[#111]">
<strong className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] font-medium text-(--platform-text-strong)">
{project.name}
</strong>
<small className="-mt-[5px] min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[11px] text-[#8b8b8b]">
<small className="-mt-1.25 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[11px] text-(--platform-text-soft)">
{project.path}
</small>
<small className="-mt-[5px] min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[11px] text-[#8b8b8b]">
<small className="-mt-1.25 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[11px] text-(--platform-text-soft)">
{project.status}
</small>
</button>
@@ -293,11 +297,11 @@ export default function HomeView({
))}
</div>
) : (
<div className="grid justify-items-center gap-2.5 px-0 pb-8 pt-[18px]">
<div className="grid justify-items-center gap-2.5 px-0 pb-8 pt-4.5">
<FolderKanban size={22} aria-hidden="true" />
<strong>暂无最近项目</strong>
<button
className="cursor-pointer border-0 bg-transparent p-0 text-[12px] text-[#888]"
className="cursor-pointer border-0 bg-transparent p-0 text-[12px] text-(--platform-warm-text)"
type="button"
onClick={onProjectsOpen}
>
@@ -308,34 +312,38 @@ export default function HomeView({
</section>
<section
className="mx-auto mt-[22px] grid w-[min(1054px,calc(100vw-122px))] gap-[14px] max-[760px]:w-[min(100%,calc(100vw-76px))]"
className="mx-auto mt-5.5 grid w-[min(1054px,calc(100vw-122px))] gap-3.5 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>
<h2 className="m-0 text-[15px] text-(--platform-text-strong)">
灵感推荐
</h2>
<Sparkles size={15} aria-hidden="true" />
</span>
<p className="mb-0 mt-1 text-[12px] text-[#8b8b8b]">{showcaseStatus}</p>
<p className="mb-0 mt-1 text-[12px] text-(--platform-text-soft)">
{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"
className="grid gap-1.75 overflow-hidden rounded-lg border border-(--platform-surface-border) bg-(image:--platform-subpanel-fill) pb-2.5 shadow-(--platform-panel-shadow)"
key={resource.showcaseId ?? resource.resourceId}
>
<img
className="aspect-square w-full object-cover bg-gray-100"
className="aspect-square w-full object-cover bg-(--platform-warm-bg)"
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">
<strong className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap px-2.25 text-[12px] text-(--platform-text-strong)">
{resource.label || '未命名素材'}
</strong>
<small className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap px-[9px] text-[11px] text-gray-500">
<small className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap px-2.25 text-[11px] text-(--platform-text-soft)">
{resource.authorDisplayName ||
resource.authorPublicUserCode ||
'陶泥儿精选'}
@@ -344,11 +352,11 @@ export default function HomeView({
))}
</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">
<div className="grid min-h-24 place-items-center overflow-hidden rounded-lg border border-(--platform-surface-border) bg-(image:--platform-subpanel-fill) text-[11px] text-(--platform-text-soft)">
{showcaseStatus}
</div>
)}
</section>
</>
</div>
);
}