diff --git a/DESIGN.md b/DESIGN.md index b15464e..97de97d 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -9,8 +9,8 @@ Every WinLab app is framed by four fixed corners, 24px in from the viewport. `ap | Corner | Default job | Default content | |--------|-----|---------| | Top left | Where you are | Breadcrumb: the lab (portal home), then the app (its home) | -| Top right | Where you can go | The app's pages; the current one in `foreground` | -| Bottom left | Who you are, which build | The signed-in member (to their profile), then the short commit of this build, linking to its CD run, with the build time (Asia/Taipei) as its tip | +| Top right | Where you can go | The app's pages, the current one in `foreground`; last, the account: "登入" when signed out, the member's name when signed in | +| Bottom left | Which build | The short commit of this build, linking to its CD run, with the build time (Asia/Taipei) as its tip | | Bottom right | Whose it is | © year; its tip says NYCU WinLab | - Actions are not navigation: a "新增訂單" button goes in the page header next to the content it changes, never in a corner. diff --git a/app/_docs/demos/app-shell.tsx b/app/_docs/demos/app-shell.tsx index 8c4f63b..6434723 100644 --- a/app/_docs/demos/app-shell.tsx +++ b/app/_docs/demos/app-shell.tsx @@ -1,9 +1,7 @@ export function Demo() { return ( -

- 這個頁面的四個角就是 - app-shell:左上是麵包屑,右上是導覽,左下是這次建置的版本(點了開 CD - 紀錄),右下是版權年份。把滑鼠移到角落的項目上可以看到提示。 +

+ 左上麵包屑、右上導覽與帳號、左下版本、右下版權。

) } diff --git a/registry.json b/registry.json index 7032aae..967d144 100644 --- a/registry.json +++ b/registry.json @@ -680,13 +680,12 @@ "name": "app-shell", "type": "registry:block", "title": "App Shell", - "description": "The four corners of a WinLab app: breadcrumb, page nav, member and build version, copyright year.", + "description": "The four corners of a WinLab app: breadcrumb, page nav and account, build version, copyright year.", "dependencies": [ "cn" ], "registryDependencies": [ "https://ui.winlab.tw/r/utils.json", - "https://ui.winlab.tw/r/avatar.json", "https://ui.winlab.tw/r/tooltip.json" ], "files": [ diff --git a/registry/winlab/blocks/app-shell/app-shell.tsx b/registry/winlab/blocks/app-shell/app-shell.tsx index 3aff6f3..a297b18 100644 --- a/registry/winlab/blocks/app-shell/app-shell.tsx +++ b/registry/winlab/blocks/app-shell/app-shell.tsx @@ -5,11 +5,6 @@ import Link from "next/link" import { usePathname } from "next/navigation" import { cn } from "@/registry/winlab/lib/utils" -import { - Avatar, - AvatarFallback, - AvatarImage, -} from "@/registry/winlab/ui/avatar" import { Tooltip, TooltipContent, @@ -21,16 +16,15 @@ import { // holds); it never repeats the label. type Crumb = { label: string; href: string; tip?: string } type NavItem = { label: string; href: string; tip?: string } -type User = { name: string; href: string; image?: string; tip?: string } // The chrome of every WinLab app is its four corners. By default each corner // has one job, filled from the props below; an app that needs something else // in a corner passes it in `corners`, built from CornerLink and CornerTip so // it keeps the corner's look. // top left where you are: breadcrumb back to the lab and the app -// top right where you can go: this app's pages -// bottom left who you are and which build: the signed-in member, then the -// commit this build came from (the theme follows the system) +// top right where you can go: this app's pages, then the account (登入 +// when signed out, the member's name when signed in) +// bottom left which build: the commit this build came from // bottom right the copyright year; the tip names the owner // Every item can carry a tip, opening toward the page and lined up with the // corner's outer edge so it never leaves the viewport. @@ -43,14 +37,16 @@ type User = { name: string; href: string; image?: string; tip?: string } function AppShell({ breadcrumb = [], nav = [], - user, + account, layout = "column", corners, children, }: { breadcrumb?: Crumb[] nav?: NavItem[] - user?: User + /** Last in the top right: { label: "登入", href: "/sign-in" } signed out, + * the member's name linking to their page signed in. */ + account?: NavItem corners?: Partial< Record< "topLeft" | "topRight" | "bottomLeft" | "bottomRight", @@ -106,9 +102,9 @@ function AppShell({
{corners?.topRight ?? - (nav.length > 0 && ( + ((nav.length > 0 || account) && (