chore: 全量推送 · 累积页面改动 + Next.js 工程骨架 + v1/ 归档 + 文档
页面 (电商AI平台/) - account / team / settings / index / products / projects: 累积迭代 - restraint.css: 设计 token 补充 - login.html / register.html: 新增登录注册页 - _ARCHIVE.md: 归档说明 Next.js 工程骨架 - app/ + components/: 新一代 SPA 雏形 (page / layout / sidebar / topbar / GridBg / Icon) - package.json / package-lock.json / next.config.mjs / tsconfig.json / postcss.config.mjs / next-env.d.ts 历史归档 / 文档 - v1/: 原 V1 静态稿镜像 (含 mockup-A/B/C) - PRD.md / deployment-guide.md / _check.html - ui参考/ / screenshots/ 杂项 - .gitignore 调整 - 删除根 README.md Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
iye
@@ -0,0 +1,38 @@
|
||||
export default function GridBg() {
|
||||
return (
|
||||
<>
|
||||
<div className="grid-bg" aria-hidden />
|
||||
<pre className="scatter" style={{ top: 96, left: 280 }} aria-hidden>
|
||||
{` · · +
|
||||
· +XX+
|
||||
+XXXX·
|
||||
+X· `}
|
||||
</pre>
|
||||
<pre className="scatter" style={{ top: 340, right: 96 }} aria-hidden>
|
||||
{`+ · ·
|
||||
XX· ·
|
||||
·XXXX·+
|
||||
·++· `}
|
||||
</pre>
|
||||
<pre className="scatter" style={{ bottom: 160, left: "42%" }} aria-hidden>
|
||||
{` · +
|
||||
+·XX·
|
||||
·X+ ·
|
||||
· `}
|
||||
</pre>
|
||||
<pre className="scatter" style={{ top: 580, left: 60 }} aria-hidden>
|
||||
{` +X·
|
||||
·XX·
|
||||
+·X·+`}
|
||||
</pre>
|
||||
<span className="sq" style={{ top: 238, left: 478 }} aria-hidden />
|
||||
<span className="sq" style={{ top: 478, left: 1198 }} aria-hidden />
|
||||
<span className="sq" style={{ bottom: 300, left: 238 }} aria-hidden />
|
||||
<span className="sq" style={{ top: 718, right: 240 }} aria-hidden />
|
||||
<span className="corner-tag" style={{ top: 158, left: 34 }} aria-hidden>[ 200 OK ]</span>
|
||||
<span className="corner-tag" style={{ top: 158, right: 34 }} aria-hidden>[ /v2 ]</span>
|
||||
<span className="corner-tag" style={{ bottom: 36, left: 34 }} aria-hidden>[ .MP4 · 9:16 ]</span>
|
||||
<span className="corner-tag" style={{ bottom: 36, right: 34 }} aria-hidden>[ STUDIO ]</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
import type { SVGProps } from "react";
|
||||
|
||||
type IconName =
|
||||
| "home"
|
||||
| "play"
|
||||
| "folder"
|
||||
| "tile"
|
||||
| "bars"
|
||||
| "bars2"
|
||||
| "key"
|
||||
| "cog"
|
||||
| "chev-down"
|
||||
| "chev-right"
|
||||
| "search"
|
||||
| "bell"
|
||||
| "help"
|
||||
| "doc"
|
||||
| "up"
|
||||
| "plus"
|
||||
| "flame"
|
||||
| "check"
|
||||
| "x"
|
||||
| "play-tri"
|
||||
| "rotate"
|
||||
| "more"
|
||||
| "wallet"
|
||||
| "coin"
|
||||
| "download"
|
||||
| "team"
|
||||
| "lightbulb"
|
||||
| "sparkles"
|
||||
| "info"
|
||||
| "arrow-right";
|
||||
|
||||
const PATHS: Record<IconName, React.ReactNode> = {
|
||||
home: (
|
||||
<>
|
||||
<path d="M3 12 12 3l9 9" />
|
||||
<path d="M5 10v10h14V10" />
|
||||
</>
|
||||
),
|
||||
play: <polygon points="6 4 20 12 6 20" fill="currentColor" stroke="none" />,
|
||||
folder: (
|
||||
<>
|
||||
<rect x="3" y="4" width="18" height="16" rx="2" />
|
||||
<path d="M3 10h18" />
|
||||
</>
|
||||
),
|
||||
tile: <path d="M3 6h18M3 12h18M3 18h18" />,
|
||||
bars: (
|
||||
<>
|
||||
<rect x="3" y="4" width="6" height="16" />
|
||||
<rect x="11" y="4" width="4" height="16" />
|
||||
<rect x="17" y="6" width="4" height="14" />
|
||||
</>
|
||||
),
|
||||
bars2: <path d="M3 21V9M9 21V5M15 21v-8M21 21V11" />,
|
||||
key: (
|
||||
<>
|
||||
<circle cx="9" cy="12" r="6" />
|
||||
<path d="m15 12 6 0M19 9v6" />
|
||||
</>
|
||||
),
|
||||
cog: (
|
||||
<>
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8 2 2 0 0 1-2.8 2.8 1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5 2 2 0 0 1-4 0 1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3 2 2 0 0 1-2.8-2.8 1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1 2 2 0 0 1 0-4 1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8 2 2 0 0 1 2.8-2.8 1.7 1.7 0 0 0 1.8.3 1.7 1.7 0 0 0 1-1.5 2 2 0 0 1 4 0 1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3 2 2 0 0 1 2.8 2.8 1.7 1.7 0 0 0-.3 1.8 1.7 1.7 0 0 0 1.5 1 2 2 0 0 1 0 4 1.7 1.7 0 0 0-1.5 1.1Z" />
|
||||
</>
|
||||
),
|
||||
"chev-down": <path d="m6 9 6 6 6-6" />,
|
||||
"chev-right": <path d="m9 6 6 6-6 6" />,
|
||||
search: (
|
||||
<>
|
||||
<circle cx="11" cy="11" r="7" />
|
||||
<path d="m21 21-4.3-4.3" />
|
||||
</>
|
||||
),
|
||||
bell: <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21a2 2 0 0 0 4 0" />,
|
||||
help: (
|
||||
<>
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M9.5 9a2.5 2.5 0 1 1 4 2.2c-.7.5-1.5 1-1.5 2v.3M12 17h.01" />
|
||||
</>
|
||||
),
|
||||
doc: (
|
||||
<>
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
||||
<path d="M14 2v6h6M9 13h6M9 17h6" />
|
||||
</>
|
||||
),
|
||||
up: <path d="M12 19V5M5 12l7-7 7 7" />,
|
||||
plus: <path d="M12 5v14M5 12h14" />,
|
||||
flame: <path fill="currentColor" stroke="none" d="M12 2c1 3 4 5 4 9a4 4 0 0 1-4 4 4 4 0 0 1-4-4 5 5 0 0 1 1.5-3.5C10.5 6 11.5 4 12 2zm-1 13c0 2 1 3 1 5 1-1 3-2 3-5 0-1.5-1-2-2-3-1 1-2 2-2 3z" />,
|
||||
check: <path d="M4 12l5 5L20 6" />,
|
||||
x: <path d="M5 5l14 14M19 5L5 19" />,
|
||||
"play-tri": <path fill="currentColor" stroke="none" d="M5 4l14 8-14 8z" />,
|
||||
rotate: (
|
||||
<>
|
||||
<path d="M4 12a8 8 0 0 1 14-5.5L21 9" />
|
||||
<path d="M21 4v5h-5" />
|
||||
<path d="M20 12a8 8 0 0 1-14 5.5L3 15" />
|
||||
<path d="M3 20v-5h5" />
|
||||
</>
|
||||
),
|
||||
more: (
|
||||
<>
|
||||
<circle cx="5" cy="12" r="1.5" fill="currentColor" />
|
||||
<circle cx="12" cy="12" r="1.5" fill="currentColor" />
|
||||
<circle cx="19" cy="12" r="1.5" fill="currentColor" />
|
||||
</>
|
||||
),
|
||||
wallet: (
|
||||
<>
|
||||
<rect x="3" y="6" width="18" height="13" rx="2" />
|
||||
<path d="M3 10h18M16 14h2" />
|
||||
</>
|
||||
),
|
||||
coin: (
|
||||
<>
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M12 7v10M9 10h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4" />
|
||||
</>
|
||||
),
|
||||
download: <path d="M12 4v12m0 0l-5-5m5 5l5-5M4 20h16" />,
|
||||
team: (
|
||||
<>
|
||||
<circle cx="9" cy="9" r="3" />
|
||||
<path d="M3 20c0-3 3-5 6-5s6 2 6 5" />
|
||||
<circle cx="17" cy="10" r="2.4" />
|
||||
<path d="M21 19c0-2-1.6-4-4-4-.6 0-1.2.2-1.7.4" />
|
||||
</>
|
||||
),
|
||||
lightbulb: (
|
||||
<>
|
||||
<path d="M9 18h6" />
|
||||
<path d="M10 22h4" />
|
||||
<path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14" />
|
||||
</>
|
||||
),
|
||||
sparkles: (
|
||||
<>
|
||||
<path d="M12 3l1.7 4.6L18 9l-4.3 1.4L12 15l-1.7-4.6L6 9l4.3-1.4L12 3z" />
|
||||
<path d="M19 16l.85 2.3L22 19l-2.15.7L19 22l-.85-2.3L16 19l2.15-.7L19 16z" />
|
||||
</>
|
||||
),
|
||||
info: (
|
||||
<>
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M12 16v-4M12 8h.01" />
|
||||
</>
|
||||
),
|
||||
"arrow-right": <path d="M5 12h14M13 6l6 6-6 6" />,
|
||||
};
|
||||
|
||||
interface Props extends Omit<SVGProps<SVGSVGElement>, "name"> {
|
||||
name: IconName;
|
||||
size?: number;
|
||||
strokeWidth?: number;
|
||||
}
|
||||
|
||||
export default function Icon({ name, size = 16, strokeWidth = 1.5, ...rest }: Props) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
height={size}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={strokeWidth}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...rest}
|
||||
>
|
||||
{PATHS[name]}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import Icon from "./Icon";
|
||||
|
||||
const NAV = [
|
||||
{ id: "workspace", label: "工作台", icon: "home" as const, href: "/" },
|
||||
{ id: "play", label: "试拍台", icon: "play" as const, href: "/play" },
|
||||
{
|
||||
id: "projects",
|
||||
label: "项目",
|
||||
icon: "folder" as const,
|
||||
href: "/projects",
|
||||
chev: true,
|
||||
},
|
||||
{ id: "products", label: "商品库", icon: "tile" as const, href: "/products" },
|
||||
{ id: "library", label: "资产库", icon: "bars" as const, href: "/library" },
|
||||
{ id: "usage", label: "用量", icon: "bars2" as const, href: "/usage" },
|
||||
{ id: "api", label: "API Keys", icon: "key" as const, href: "/api-keys" },
|
||||
{ id: "settings", label: "设置", icon: "cog" as const, href: "/settings" },
|
||||
];
|
||||
|
||||
function isActive(pathname: string, href: string): boolean {
|
||||
if (href === "/") return pathname === "/";
|
||||
return pathname === href || pathname.startsWith(href + "/");
|
||||
}
|
||||
|
||||
export default function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
// /account is reached via the user pill in the topbar — not in nav.
|
||||
return (
|
||||
<aside className="sidebar">
|
||||
<div className="brand">
|
||||
<div className="flame">
|
||||
<Icon name="flame" size={22} />
|
||||
</div>
|
||||
<div className="brand-name">流·Studio</div>
|
||||
<div className="brand-ver">v1</div>
|
||||
</div>
|
||||
|
||||
<div className="search-box">
|
||||
<Icon name="search" />
|
||||
<span>搜索</span>
|
||||
<span className="kbd">⌘K</span>
|
||||
</div>
|
||||
|
||||
<nav className="sidebar-nav">
|
||||
{NAV.map((n) => {
|
||||
const active = isActive(pathname, n.href);
|
||||
return (
|
||||
<Link key={n.id} href={n.href} className={active ? "active" : ""}>
|
||||
<Icon name={n.icon} />
|
||||
<span className="label">{n.label}</span>
|
||||
{n.chev && <Icon name="chev-down" className="chev" />}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
<div className="nav-section">协作</div>
|
||||
<div className="nav-item disabled" title="V1.5 上线 · 敬请期待">
|
||||
<Icon name="team" />
|
||||
<span className="label">团队</span>
|
||||
<span className="badge-mini">V1.5</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="aside-foot">
|
||||
<Link href="/account" className="aside-user">
|
||||
<div className="av">李</div>
|
||||
<div className="em">li.dao@studio.cn</div>
|
||||
</Link>
|
||||
<div className="aside-collapse">
|
||||
<Icon name="chev-right" size={12} style={{ transform: "rotate(180deg)" }} />
|
||||
收起
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import Link from "next/link";
|
||||
import Icon from "./Icon";
|
||||
|
||||
export interface Crumb {
|
||||
label: string;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
/** Pass crumbs to show breadcrumbs (e.g. inner pages). Omit to show the team switcher (workspace). */
|
||||
crumbs?: Crumb[];
|
||||
balance?: string;
|
||||
}
|
||||
|
||||
export default function Topbar({ crumbs, balance = "¥327.40" }: Props) {
|
||||
return (
|
||||
<header className="topbar">
|
||||
{crumbs && crumbs.length > 0 ? (
|
||||
<nav className="crumbs">
|
||||
{crumbs.map((c, i) => {
|
||||
const last = i === crumbs.length - 1;
|
||||
const sep = i > 0 ? <span key={`s-${i}`} className="sep">/</span> : null;
|
||||
return last ? (
|
||||
<span key={c.label}>{sep}<span className="here">{c.label}</span></span>
|
||||
) : (
|
||||
<span key={c.label}>
|
||||
{sep}
|
||||
{c.href ? <Link href={c.href}>{c.label}</Link> : <span>{c.label}</span>}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
) : (
|
||||
<div className="team-switcher" role="button">
|
||||
<div className="p">个</div>
|
||||
个人工作室
|
||||
<Icon name="chev-down" size={12} className="chev" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="top-r">
|
||||
<span className="balance-chip">
|
||||
<Icon name="coin" size={13} />
|
||||
余额 <strong>{balance}</strong>
|
||||
</span>
|
||||
<button className="icon-btn" aria-label="通知">
|
||||
<Icon name="bell" />
|
||||
<span className="dot" />
|
||||
</button>
|
||||
<button className="pill-btn">
|
||||
<Icon name="help" />
|
||||
帮助
|
||||
</button>
|
||||
<button className="pill-btn">
|
||||
<Icon name="doc" />
|
||||
文档
|
||||
</button>
|
||||
<button className="pill-btn upgrade">
|
||||
<Icon name="up" />
|
||||
升级
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user