+ {children}
+
+
+
+ )
+}
+
+export function CompactPreference() {
+ const [isCompacted, setIsCompacted] = useUiState("main-compacted")
+
+ return (
+ 主题模式
+{description}
+ +
+
+ )
+}
diff --git a/packages/blocks/src/blocks/appearance/state.test.ts b/packages/blocks/src/blocks/appearance/state.test.ts
new file mode 100644
index 0000000..79fa38a
--- /dev/null
+++ b/packages/blocks/src/blocks/appearance/state.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, it } from "vitest"
+import { defaultUiState, isUiStateUpdate, uiStateDefinitions } from "./state"
+
+describe("UI state", () => {
+ it("keeps the main content full width by default", () => {
+ expect(defaultUiState["main-compacted"]).toBe(false)
+ })
+
+ it("serializes and parses the compacted main state", () => {
+ const definition = uiStateDefinitions["main-compacted"]
+
+ expect(definition.serialize(true)).toBe("1")
+ expect(definition.serialize(false)).toBe("0")
+ expect(definition.parse("1")).toBe(true)
+ expect(definition.parse("0")).toBe(false)
+ expect(definition.parse(undefined)).toBe(false)
+ })
+
+ it("validates compacted main updates", () => {
+ expect(isUiStateUpdate({ key: "main-compacted", value: true })).toBe(true)
+ expect(isUiStateUpdate({ key: "main-compacted", value: "true" })).toBe(
+ false
+ )
+ })
+
+ it("keeps and persists the sidebar collapsed state", () => {
+ const definition = uiStateDefinitions["sidebar-collapsed"]
+
+ expect(defaultUiState["sidebar-collapsed"]).toBe(false)
+ expect(definition.serialize(true)).toBe("1")
+ expect(definition.parse("1")).toBe(true)
+ expect(definition.parse("true")).toBe(true)
+ expect(definition.parse(undefined)).toBe(false)
+ expect(isUiStateUpdate({ key: "sidebar-collapsed", value: true })).toBe(
+ true
+ )
+ })
+
+ it("serializes and parses theme color settings", () => {
+ const definition = uiStateDefinitions["theme-light"]
+ const value = {
+ baseColor: "zinc",
+ accentColor: "violet",
+ } as const
+
+ expect(definition.parse(definition.serialize(value))).toEqual(value)
+ expect(definition.parse("invalid json")).toEqual({
+ baseColor: "neutral",
+ accentColor: "blue",
+ })
+ })
+
+ it("validates light and dark theme updates", () => {
+ expect(
+ isUiStateUpdate({
+ key: "theme-dark",
+ value: { baseColor: "stone", accentColor: "amber" },
+ })
+ ).toBe(true)
+ expect(
+ isUiStateUpdate({
+ key: "theme-light",
+ value: { baseColor: "unknown", accentColor: "blue" },
+ })
+ ).toBe(false)
+ })
+})
diff --git a/packages/blocks/src/blocks/appearance/state.ts b/packages/blocks/src/blocks/appearance/state.ts
new file mode 100644
index 0000000..0a6772f
--- /dev/null
+++ b/packages/blocks/src/blocks/appearance/state.ts
@@ -0,0 +1,125 @@
+import { accentColors, baseColors, type ThemeColorConfig } from "./theme"
+
+export type ThemeMode = "light" | "dark" | "system"
+
+export type UiState = {
+ "main-compacted": boolean
+ "sidebar-collapsed": boolean
+ "theme-mode": ThemeMode
+ "theme-light": ThemeColorConfig
+ "theme-dark": ThemeColorConfig
+}
+
+export type UiStateKey = keyof UiState
+export type UiStateValue紧凑布局
++ 启用后，页面主内容将使用紧凑宽度 +
+
+
+ )
+}
+
+function ThemeColorButton({
+ swatch,
+ active,
+ onClick,
+}: {
+ swatch: ThemeColorSwatch
+ {title}
+
+
+ {swatches.map((swatch) => (
+ onChange(swatch.name)}
+ />
+ ))}
+
+
+
+ )
+}
diff --git a/packages/blocks/src/blocks/appearance/theme-preview.tsx b/packages/blocks/src/blocks/appearance/theme-preview.tsx
new file mode 100644
index 0000000..021ed04
--- /dev/null
+++ b/packages/blocks/src/blocks/appearance/theme-preview.tsx
@@ -0,0 +1,103 @@
+import type { CSSProperties } from "react"
+import {
+ getTheme,
+ getThemeCssVariables,
+ type ThemeColorConfig,
+ type ThemeScheme,
+} from "./theme"
+import { cn } from "@workspace/ui/lib/utils"
+import { useUiState } from "./ui-state"
+
+export function ThemePreview({
+ scheme,
+ config,
+ className,
+}: {
+ scheme: ThemeScheme
+ config: ThemeColorConfig
+ className?: string
+}) {
+ const [isCompacted] = useUiState("main-compacted")
+ const themeVariables = getThemeCssVariables(scheme, config)
+ const baseTheme = getTheme(config.baseColor) ?? getTheme("neutral")!
+ const style = {
+ ...Object.fromEntries(
+ Object.entries(themeVariables).map(([key, value]) => [`--${key}`, value])
+ ),
+ "--preview-base": baseTheme.cssVars[scheme].primary,
+ } as CSSProperties
+
+ return (
+
+ {scheme === "light" ? (
+ 使用中 }
+
+
+
+ setConfig((current) => ({ ...current, baseColor }))
+ }
+ />
+
+ setConfig((current) => ({ ...current, accentColor }))
+ }
+ />
+
+ {description}
+
+
+ )
+}
diff --git a/packages/blocks/src/blocks/appearance/theme.test.ts b/packages/blocks/src/blocks/appearance/theme.test.ts
new file mode 100644
index 0000000..c1c5223
--- /dev/null
+++ b/packages/blocks/src/blocks/appearance/theme.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest"
+import {
+ accentColors,
+ baseColors,
+ buildThemeStyleSheet,
+ getTheme,
+ getThemeCssVariables,
+ themes,
+} from "./theme"
+
+describe("appearance themes", () => {
+ it("defines every selectable base and accent color exactly once", () => {
+ const selectableColors = [...baseColors, ...accentColors]
+
+ expect(themes.map((theme) => theme.name)).toEqual(selectableColors)
+ expect(new Set(selectableColors).size).toBe(selectableColors.length)
+ expect(themes.every((theme) => theme.title.length > 0)).toBe(true)
+ })
+
+ it("combines the base palette with the selected accent palette", () => {
+ const variables = getThemeCssVariables("light", {
+ baseColor: "stone",
+ accentColor: "rose",
+ })
+
+ expect(variables.background).toBe(
+ getTheme("stone")?.cssVars.light.background
+ )
+ expect(variables.primary).toBe(getTheme("rose")?.cssVars.light.primary)
+ })
+
+ it("builds explicit and system color-scheme rules", () => {
+ const styleSheet = buildThemeStyleSheet(
+ { baseColor: "neutral", accentColor: "blue" },
+ { baseColor: "zinc", accentColor: "violet" }
+ )
+
+ expect(styleSheet).toContain(":root,.ui\\:light{")
+ expect(styleSheet).toContain(".ui\\:dark{")
+ expect(styleSheet).toContain("@media (prefers-color-scheme:dark)")
+ expect(styleSheet).toContain("--background:")
+ expect(styleSheet).toContain("--primary:")
+ })
+})
diff --git a/packages/blocks/src/blocks/appearance/theme.ts b/packages/blocks/src/blocks/appearance/theme.ts
new file mode 100644
index 0000000..25bf25d
--- /dev/null
+++ b/packages/blocks/src/blocks/appearance/theme.ts
@@ -0,0 +1,58 @@
+import {
+ themes,
+ type AccentColor,
+ type BaseColor,
+ type ThemeColorConfig,
+ type ThemeScheme,
+} from "./themes"
+
+export {
+ accentColors,
+ baseColors,
+ themes,
+ type AccentColor,
+ type BaseColor,
+ type Theme,
+ type ThemeColorConfig,
+ type ThemeScheme,
+} from "./themes"
+
+export const THEME_STYLE_ELEMENT_ID = "ui-theme-variables"
+
+export const getTheme = (name: BaseColor | AccentColor) =>
+ themes.find((theme) => theme.name === name)
+
+export function getThemeCssVariables(
+ scheme: ThemeScheme,
+ config: ThemeColorConfig
+) {
+ const base = getTheme(config.baseColor) ?? getTheme("neutral")!
+ const accent = getTheme(config.accentColor) ?? getTheme("blue")!
+
+ return {
+ ...base.cssVars[scheme],
+ ...accent.cssVars[scheme],
+ }
+}
+
+function serializeThemeVariables(theme: Record
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 当前页面数据 +
+
+
+ )
+}
+
+function UserMenuPopover() {
+ const { popover } = getOrCreateUserMenuHandles()
+
+ useOnScroll(() => {
+ popover.close()
+ })
+
+ return (
+
+
+
+
+ Jaydon Frankie
+demo@minimals.cc
+
+
+ -
+ {userMenuItems.map((item) => (
+
-
+ }
+ onClick={onItemSelect}
+ {...(item.action
+ ? getNavigationCommandProps(item.action)
+ : undefined)}
+ >
+
+ {item.label} + {item.shortcut && } + +
+ ))}
+
+
+
+
+
+
+
+ {items.map((group) => (
+
+ )
+}
diff --git a/packages/blocks/src/blocks/navigation/navigation-button.tsx b/packages/blocks/src/blocks/navigation/navigation-button.tsx
new file mode 100644
index 0000000..60eccb9
--- /dev/null
+++ b/packages/blocks/src/blocks/navigation/navigation-button.tsx
@@ -0,0 +1,224 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { Link } from "@tanstack/react-router"
+import * as React from "react"
+import { Badge } from "@workspace/ui/components/badge"
+import { useRippleRef } from "@workspace/ui/hooks/use-ripple"
+import { cn } from "@workspace/ui/lib/utils"
+import { ChevronRightIcon } from "lucide-react"
+
+import { Icon, type IconData } from "../../components/icon"
+
+export interface NavigationButtonProps extends Omit<
+ useRender.ComponentProps<"button", {}>,
+ "className" | "style"
+> {
+ icon?: IconData
+ isActive: boolean
+ isCurrent: boolean
+ label: string
+ layout?: "inline" | "stacked" | "responsive"
+ className?: string | (() => string | undefined) | undefined
+ style?:
+ React.CSSProperties | (() => React.CSSProperties | undefined) | undefined
+ trailing?: React.ReactNode | (() => React.ReactNode) | undefined
+}
+
+type NavigationLinkProps = Omit
+
+ ))}
+
+ {group.label}
+
+
+ {separate({
+ items: group.items,
+ iterator: (item) => {
+ const routeState = getRouteState(item.to)
+
+ return (
+
+
+
+ )
+
+ if (!hasNestedItems) {
+ return listElement
+ }
+
+ return (
+ -
+ {items.map((item) => {
+ const hasChildItems = !!item.items?.length
+ const routeState = getRouteState(item.to)
+ let itemElement = (
+
- + {itemElement} + + ) + })} +
+
+
+
+ ))}
+
+ {group.label}
+
+
+ {group.items.map((item) => (
+
+ + {title} + {unreadCount > 0 && ( + + ({unreadCount}) + + )} +
+ {description &&{description}
} +
+ 正在加载通知…
+
+ ) : status === "error" ? (
+ + {notification.description} +
+ )} +