feat: update Makelore modules and conversations
This commit is contained in:
inman committed
1 parent
b8ca3f8eea
commit
80e8386fa6
175 files changed
+8036
-10581
No files matched your search
@@ -79,12 +79,12 @@ const initialMessages: Message[] = [
|
||||
|
||||
const previewHtml = `<!doctype html>
|
||||
<html>
|
||||
<body style="margin:0;font-family:system-ui;background:#ffe7d1;color:#213547;">
|
||||
<body style="margin:0;font-family:system-ui;background:#ffffff;color:#1f2937;">
|
||||
<main style="min-height:100vh;display:grid;place-items:center;padding:20px;">
|
||||
<section style="width:min(420px,100%);border:3px solid #1f2937;background:#fff9e8;border-radius:12px;padding:20px;box-shadow:8px 8px 0 #1f2937;">
|
||||
<section style="width:min(420px,100%);border:1px solid #dfe3e8;background:#ffffff;border-radius:16px;padding:20px;box-shadow:0 16px 40px rgba(35,43,56,.08);">
|
||||
<h1 style="margin:0 0 8px;font-size:24px;">我的第一个伙伴作品</h1>
|
||||
<p style="line-height:1.6;">点击按钮，帮助小伙伴收集星星。</p>
|
||||
<button onclick="document.querySelector('#score').textContent=Number(document.querySelector('#score').textContent)+1" style="border:2px solid #1f2937;background:#DCE6EF;border-radius:8px;padding:10px 14px;font-weight:700;">收集星星</button>
|
||||
<button onclick="document.querySelector('#score').textContent=Number(document.querySelector('#score').textContent)+1" style="border:1px solid #D14415;background:#FDEDE7;color:#D14415;border-radius:10px;padding:10px 14px;font-weight:600;">收集星星</button>
|
||||
<p>星星：<strong id="score">0</strong></p>
|
||||
</section>
|
||||
</main>
|
||||
@@ -94,12 +94,12 @@ const previewHtml = `<!doctype html>
|
||||
function PixelPartner({ active }: { active: boolean }) {
|
||||
return (
|
||||
<div className="relative flex aspect-square w-full max-w-[260px] items-center justify-center">
|
||||
<div className="absolute inset-6 rounded-[18px] border-4 border-[#26384D] bg-[#f4b35f] shadow-[10px_10px_0_#26384D]" />
|
||||
<div className="absolute left-[28%] top-[24%] h-[18%] w-[16%] rounded-sm bg-[#26384D]" />
|
||||
<div className="absolute right-[28%] top-[24%] h-[18%] w-[16%] rounded-sm bg-[#26384D]" />
|
||||
<div className="absolute bottom-[28%] h-[10%] w-[36%] rounded-sm bg-[#26384D]" />
|
||||
<div className="absolute inset-6 rounded-[18px] border border-foreground/15 bg-accent shadow-soft" />
|
||||
<div className="absolute left-[28%] top-[24%] h-[18%] w-[16%] rounded-sm bg-brand" />
|
||||
<div className="absolute right-[28%] top-[24%] h-[18%] w-[16%] rounded-sm bg-brand" />
|
||||
<div className="absolute bottom-[28%] h-[10%] w-[36%] rounded-sm bg-brand" />
|
||||
<div className={cn(
|
||||
'absolute -right-2 top-8 rounded-md border-4 border-[#26384D] bg-[#DCE6EF] px-3 py-2 text-xs font-black text-[#26384D] shadow-[5px_5px_0_#26384D]',
|
||||
'absolute -right-2 top-8 rounded-md border border-foreground/15 bg-brand-soft px-3 py-2 text-xs font-semibold text-foreground shadow-soft',
|
||||
active && 'animate-pulse',
|
||||
)}>
|
||||
{active ? '活过来啦' : '待激活'}
|
||||
@@ -116,12 +116,12 @@ function StageRow({ stage, selected, onClick }: { stage: Stage; selected: boolea
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
'flex w-full items-center gap-3 rounded-lg border px-3 py-3 text-left transition-colors',
|
||||
selected ? 'border-[#26384D] bg-[#E9EFF5] text-[#26384D] shadow-[4px_4px_0_#26384D]' : 'border-border bg-card hover:bg-muted/60',
|
||||
selected ? 'border-foreground/15 bg-surface-tertiary text-foreground shadow-soft' : 'border-border bg-card hover:bg-muted/60',
|
||||
)}
|
||||
>
|
||||
<div className={cn(
|
||||
'flex h-9 w-9 shrink-0 items-center justify-center rounded-md',
|
||||
stage.status === 'locked' ? 'bg-muted text-muted-foreground' : 'bg-[#DCE6EF] text-[#26384D]',
|
||||
stage.status === 'locked' ? 'bg-muted text-muted-foreground' : 'bg-brand-soft text-foreground',
|
||||
)}>
|
||||
{stage.status === 'locked' ? <Lock className="h-4 w-4" /> : <Icon className="h-4 w-4" />}
|
||||
</div>
|
||||
@@ -162,17 +162,17 @@ export function KangarooPartner() {
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="-m-6 flex h-full min-h-0 flex-col overflow-hidden bg-[#F6F8FA] text-[#26384D]">
|
||||
<div className="shrink-0 border-b-4 border-[#26384D] bg-[#F26A3D] px-6 py-4">
|
||||
<main className="-m-6 flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground">
|
||||
<div className="glass-surface shrink-0 border-b border-border/70 bg-background/85 px-6 py-4">
|
||||
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 text-sm font-black">
|
||||
<div className="flex items-center gap-2 text-sm font-semibold">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
袋鼠伙伴 · MVP 原型
|
||||
</div>
|
||||
<h1 className="mt-1 text-2xl font-black tracking-normal">养成一个会陪你创作的 AI 伙伴</h1>
|
||||
<h1 className="mt-1 text-2xl font-semibold tracking-normal">养成一个会陪你创作的 AI 伙伴</h1>
|
||||
</div>
|
||||
<Button className="border-2 border-[#26384D] bg-[#DCE6EF] text-[#26384D] hover:bg-[#7fe0d7]">
|
||||
<Button className="border border-foreground/15 bg-brand-soft text-foreground hover:bg-brand-soft/70">
|
||||
<Play className="mr-2 h-4 w-4" />
|
||||
播放开场故事
|
||||
</Button>
|
||||
@@ -181,10 +181,10 @@ export function KangarooPartner() {
|
||||
|
||||
<div className="grid min-h-0 flex-1 grid-cols-1 gap-4 overflow-auto p-4 xl:grid-cols-[300px_minmax(420px,1fr)_380px]">
|
||||
<section className="min-h-0 space-y-3">
|
||||
<div className="rounded-lg border-4 border-[#26384D] bg-white p-4 shadow-[6px_6px_0_#26384D]">
|
||||
<div className="surface-card rounded-2xl border border-border/70 bg-background p-4 shadow-none">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-base font-black">成长路径</h2>
|
||||
<span className="text-xs font-bold">{progress}%</span>
|
||||
<h2 className="text-base font-semibold">成长路径</h2>
|
||||
<span className="text-xs font-medium">{progress}%</span>
|
||||
</div>
|
||||
<Progress value={progress} className="mt-3" />
|
||||
</div>
|
||||
@@ -207,28 +207,28 @@ export function KangarooPartner() {
|
||||
|
||||
<section className="grid min-h-0 gap-4 lg:grid-rows-[auto_minmax(260px,1fr)]">
|
||||
<div className="grid gap-4 lg:grid-cols-[minmax(240px,320px)_1fr]">
|
||||
<div className="rounded-lg border-4 border-[#26384D] bg-[#E9EFF5] p-4 shadow-[6px_6px_0_#26384D]">
|
||||
<div className="surface-card rounded-2xl border border-border/70 bg-background p-4 shadow-none">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-base font-black">角色区</h2>
|
||||
<Badge className="bg-[#DCE6EF] text-[#26384D]">像素风</Badge>
|
||||
<h2 className="text-base font-semibold">角色区</h2>
|
||||
<Badge className="bg-brand-soft text-foreground">像素风</Badge>
|
||||
</div>
|
||||
<PixelPartner active={selectedStage >= 2} />
|
||||
<div className="mt-3 grid grid-cols-2 gap-2">
|
||||
<Button variant="outline" className="border-2 border-[#26384D]">
|
||||
<Button variant="outline" className="border border-foreground/15">
|
||||
<ImagePlus className="mr-2 h-4 w-4" />
|
||||
上传参考
|
||||
</Button>
|
||||
<Button className="border-2 border-[#26384D] bg-[#F26A3D] text-[#26384D] hover:bg-[#ffa47d]">
|
||||
<Button className="border border-foreground/15 bg-accent text-primary-foreground hover:bg-accent-strong">
|
||||
<WandSparkles className="mr-2 h-4 w-4" />
|
||||
生成形象
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border-4 border-[#26384D] bg-white p-4 shadow-[6px_6px_0_#26384D]">
|
||||
<div className="surface-card rounded-2xl border border-border/70 bg-background p-4 shadow-none">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h2 className="text-base font-black">电子心脏展柜</h2>
|
||||
<h2 className="text-base font-semibold">电子心脏展柜</h2>
|
||||
<p className="mt-1 text-sm text-muted-foreground">申请后，把模型心脏拖给伙伴，它就能说话。</p>
|
||||
</div>
|
||||
<Badge variant="secondary">少量可用</Badge>
|
||||
@@ -238,12 +238,12 @@ export function KangarooPartner() {
|
||||
<div
|
||||
key={model}
|
||||
className={cn(
|
||||
'rounded-lg border-2 border-[#26384D] p-3',
|
||||
index === 0 ? 'bg-[#DCE6EF]' : 'bg-muted opacity-70',
|
||||
'rounded-lg border border-foreground/15 p-3',
|
||||
index === 0 ? 'bg-brand-soft' : 'bg-muted opacity-70',
|
||||
)}
|
||||
>
|
||||
<HeartPulse className="h-6 w-6" />
|
||||
<p className="mt-2 text-sm font-bold">{model}</p>
|
||||
<p className="mt-2 text-sm font-medium">{model}</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">{index === 0 ? '已获批' : '申请后解锁'}</p>
|
||||
</div>
|
||||
))}
|
||||
@@ -252,9 +252,9 @@ export function KangarooPartner() {
|
||||
</div>
|
||||
|
||||
<div className="grid min-h-0 gap-4 lg:grid-cols-[minmax(340px,1fr)_minmax(320px,1fr)]">
|
||||
<div className="flex min-h-[360px] flex-col rounded-lg border-4 border-[#26384D] bg-white shadow-[6px_6px_0_#26384D]">
|
||||
<div className="border-b-4 border-[#26384D] px-4 py-3">
|
||||
<h2 className="text-base font-black">对话区</h2>
|
||||
<div className="surface-card flex min-h-[360px] flex-col rounded-2xl border border-border/70 bg-background shadow-none">
|
||||
<div className="border-b border-border/70 px-4 py-3">
|
||||
<h2 className="text-base font-semibold">对话区</h2>
|
||||
<p className="text-sm text-muted-foreground">当前阶段：{selected.name} · {selected.action}</p>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1 space-y-3 overflow-auto p-4">
|
||||
@@ -264,35 +264,35 @@ export function KangarooPartner() {
|
||||
className={cn('flex', message.role === 'kid' ? 'justify-end' : 'justify-start')}
|
||||
>
|
||||
<div className={cn(
|
||||
'max-w-[78%] rounded-lg border-2 border-[#26384D] px-3 py-2 text-sm shadow-[3px_3px_0_#26384D]',
|
||||
message.role === 'kid' ? 'bg-[#DCE6EF]' : 'bg-[#fff0bd]',
|
||||
'max-w-[78%] rounded-lg border border-foreground/15 px-3 py-2 text-sm shadow-soft',
|
||||
message.role === 'kid' ? 'bg-brand-soft' : 'bg-accent-soft',
|
||||
)}>
|
||||
{message.text}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-t-4 border-[#26384D] p-3">
|
||||
<div className="border-t border-border/70 p-3">
|
||||
<div className="flex gap-2">
|
||||
<Textarea
|
||||
value={input}
|
||||
onChange={(event) => setInput(event.target.value)}
|
||||
placeholder="告诉伙伴：你想做什么？给谁用？希望它长什么样？"
|
||||
className="min-h-11 resize-none border-2 border-[#26384D]"
|
||||
className="min-h-11 resize-none border border-foreground/15"
|
||||
/>
|
||||
<Button type="button" size="icon" variant="outline" className="h-11 w-11 border-2 border-[#26384D]">
|
||||
<Button type="button" size="icon" variant="outline" className="h-11 w-11 border border-foreground/15">
|
||||
<Mic className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button type="button" size="icon" className="h-11 w-11 border-2 border-[#26384D] bg-[#F26A3D] text-[#26384D]" onClick={sendMessage}>
|
||||
<Button type="button" size="icon" className="h-11 w-11 border border-foreground/15 bg-accent text-foreground" onClick={sendMessage}>
|
||||
<Send className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-[360px] flex-col rounded-lg border-4 border-[#26384D] bg-white shadow-[6px_6px_0_#26384D]">
|
||||
<div className="border-b-4 border-[#26384D] px-4 py-3">
|
||||
<h2 className="text-base font-black">第一个 HTML 作品</h2>
|
||||
<div className="surface-card flex min-h-[360px] flex-col rounded-2xl border border-border/70 bg-background shadow-none">
|
||||
<div className="border-b border-border/70 px-4 py-3">
|
||||
<h2 className="text-base font-semibold">第一个 HTML 作品</h2>
|
||||
<p className="text-sm text-muted-foreground">伙伴生成代码后，孩子在这里直接看效果。</p>
|
||||
</div>
|
||||
<iframe
|
||||
@@ -306,28 +306,28 @@ export function KangarooPartner() {
|
||||
</section>
|
||||
|
||||
<section className="min-h-0 space-y-4">
|
||||
<div className="rounded-lg border-4 border-[#26384D] bg-white p-4 shadow-[6px_6px_0_#26384D]">
|
||||
<div className="surface-card rounded-2xl border border-border/70 bg-background p-4 shadow-none">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-base font-black">记忆区</h2>
|
||||
<Badge className="bg-[#E9EFF5] text-[#26384D]">
|
||||
<h2 className="text-base font-semibold">记忆区</h2>
|
||||
<Badge className="bg-surface-tertiary text-foreground">
|
||||
<CheckCircle2 className="mr-1 h-3 w-3" />
|
||||
记忆已更新
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="mt-4 space-y-3">
|
||||
<div className="rounded-lg border-2 border-[#26384D] bg-[#F6F8FA] p-3">
|
||||
<p className="text-sm font-bold">情感记忆</p>
|
||||
<div className="rounded-lg border border-foreground/15 bg-surface-subtle p-3">
|
||||
<p className="text-sm font-medium">情感记忆</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">喜欢小游戏，正在学习用 AI 做创作。</p>
|
||||
</div>
|
||||
<div className="rounded-lg border-2 border-[#26384D] bg-[#F6F8FA] p-3">
|
||||
<p className="text-sm font-bold">项目记忆</p>
|
||||
<div className="rounded-lg border border-foreground/15 bg-surface-subtle p-3">
|
||||
<p className="text-sm font-medium">项目记忆</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">想做一个收集星星的 HTML 小应用。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border-4 border-[#26384D] bg-[#EEF3F7] p-4 shadow-[6px_6px_0_#26384D]">
|
||||
<h2 className="text-base font-black">锁定能力</h2>
|
||||
<div className="rounded-lg border border-foreground/15 bg-surface-subtle p-4 shadow-soft">
|
||||
<h2 className="text-base font-semibold">锁定能力</h2>
|
||||
<div className="mt-3 grid gap-2">
|
||||
{lockedCards.map((card) => {
|
||||
const Icon = card.Icon;
|
||||
@@ -336,13 +336,13 @@ export function KangarooPartner() {
|
||||
key={card.title}
|
||||
type="button"
|
||||
onClick={() => showLocked(card.title, card.desc)}
|
||||
className="flex items-center gap-3 rounded-lg border-2 border-[#26384D] bg-white p-3 text-left transition-colors hover:bg-[#F6F8FA]"
|
||||
className="flex items-center gap-3 rounded-lg border border-foreground/15 bg-white p-3 text-left transition-colors hover:bg-surface-subtle"
|
||||
>
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted text-muted-foreground">
|
||||
<Icon className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-bold">{card.title} 🔒</p>
|
||||
<p className="text-sm font-medium">{card.title} 🔒</p>
|
||||
<p className="truncate text-xs text-muted-foreground">{card.desc}</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
Reference in new issue
Block a user