@zmzai/theme 0.6.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zmzai/theme",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "private": false,
   "type": "module",
   "description": "zmzai 全品牌设计系统 — Radix UI + framer-motion + Tailwind v4 + MiSans",

package/src/components/app-shell/AppShell.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import type { ComponentType, ReactNode } from "react";
+
+import { Badge } from "../badge/Badge";
+import { Icon, type IconName } from "../icon/Icon";
+import { CommandPalette, type AppPaletteItem } from "./CommandPalette";
+
+export type AppNavItem = { label: string; href: string; icon: IconName; keywords?: string };
+export type AppNavSection = { label: string; items: AppNavItem[] };
+export type { AppPaletteItem } from "./CommandPalette";
+
+/** 消费端注入的链接组件（Next.js 传 next/link 以保持 SPA 导航；缺省用 <a>）。 */
+export type AppShellLink = ComponentType<{
+  href: string;
+  className?: string;
+  children?: ReactNode;
+  onClick?: () => void;
+  "aria-current"?: "page" | undefined;
+}>;
+
+export function appShellIsActive(pathname: string, href: string): boolean {
+  return pathname === href || pathname.startsWith(`${href}/`);
+}
+
+/** 无 SPA 需求时的缺省链接：普通 <a>。 */
+function DefaultAnchor({ href, className, children, onClick, "aria-current": ariaCurrent }: { href: string; className?: string; children?: ReactNode; onClick?: () => void; "aria-current"?: "page" }) {
+  return (
+    <a href={href} className={className} onClick={onClick} aria-current={ariaCurrent}>
+      {children}
+    </a>
+  );
+}
+
+function SidebarSections({
+  sections,
+  pathname,
+  link: Link,
+  onNavigate,
+}: {
+  sections: AppNavSection[];
+  pathname: string;
+  link: AppShellLink;
+  onNavigate?: () => void;
+}) {
+  return (
+    <>
+      {sections.map((section) => (
+        <div key={section.label} className="flex flex-col gap-0.5">
+          <p className="px-2 pb-1 font-mono text-[10px] uppercase tracking-wider text-ink-3">{section.label}</p>
+          {section.items.map((item) => {
+            const active = appShellIsActive(pathname, item.href);
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={onNavigate}
+                aria-current={active ? "page" : undefined}
+                className={`flex items-center gap-2 rounded-md px-2 py-1.5 text-[13px] transition-colors ${
+                  active ? "bg-surface font-medium text-accent-readable" : "text-muted hover:bg-surface hover:text-accent"
+                }`}
+              >
+                <Icon name={item.icon} size={13} />
+                {item.label}
+              </Link>
+            );
+          })}
+        </div>
+      ))}
+    </>
+  );
+}
+
+/**
+ * 全站统一应用外壳（OpenRouter 式交互内核）：
+ * 全高左侧 sidebar（分组导航）+ 轻顶栏（标题 + ⌘K）+ 侧栏底部账户块。
+ * 站点无关：导航分组、品牌区、账户块、链接组件均由调用方注入；
+ * relay 的 RelayShell / sandbox 的 SandboxShell 是它的薄封装。
+ */
+export function AppShell({
+  brand,
+  sections,
+  pathname,
+  link,
+  account = null,
+  headerExtras = null,
+  paletteItems,
+  children,
+}: {
+  /** 品牌区：侧栏顶部与顶栏兜底标题 */
+  brand: { label: string; suffix?: string; href?: string };
+  /** 侧栏分组导航 */
+  sections: AppNavSection[];
+  /** 当前路径（消费端传 usePathname() ?? "/"；theme 不依赖 next） */
+  pathname: string;
+  /** 链接组件（Next.js 站传 next/link） */
+  link?: AppShellLink;
+  /** 侧栏底部账户块（登录按钮 / 用户信息） */
+  account?: ReactNode;
+  /** 顶栏右侧扩展（余额、状态等） */
+  headerExtras?: ReactNode;
+  /** ⌘K 命令面板条目；为空时顶栏不显示搜索按钮 */
+  paletteItems?: AppPaletteItem[];
+  children: ReactNode;
+}) {
+  const Link = (link ?? DefaultAnchor) as AppShellLink;
+  const hasPalette = Boolean(paletteItems?.length);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [paletteOpen, setPaletteOpen] = useState(false);
+
+  // 顶栏标题：当前激活项的 label（取最长匹配，/admin/models 优先于 /admin）
+  const currentLabel = useMemo(() => {
+    const matches = sections.flatMap((s) => s.items).filter((item) => appShellIsActive(pathname, item.href));
+    if (!matches.length) return brand.label;
+    return matches.sort((a, b) => b.href.length - a.href.length)[0].label;
+  }, [pathname, sections, brand.label]);
+
+  // ⌘K / Ctrl+K 全局快捷键
+  useEffect(() => {
+    if (!hasPalette) return;
+    const onKey = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        setPaletteOpen((open) => !open);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [hasPalette]);
+
+  const brandBlock = (
+    <Link href={brand.href ?? "/"} className="flex items-baseline gap-1.5 px-2">
+      <span className="text-sm font-semibold tracking-tight">{brand.label}</span>
+      {brand.suffix ? <span className="font-mono text-[11px] text-ink-3">{brand.suffix}</span> : null}
+    </Link>
+  );
+
+  return (
+    <div className="min-h-dvh bg-bg">
+      {hasPalette ? <CommandPalette open={paletteOpen} onClose={() => setPaletteOpen(false)} items={paletteItems!} /> : null}
+
+      {/* 移动端抽屉 */}
+      {drawerOpen ? (
+        <div className="fixed inset-0 z-40 lg:hidden" role="presentation">
+          <div className="absolute inset-0 bg-black/30" onClick={() => setDrawerOpen(false)} />
+          <nav className="absolute inset-y-0 left-0 flex w-64 flex-col gap-5 overflow-y-auto border-r border-line bg-bg px-3 py-4">
+            {brandBlock}
+            <SidebarSections sections={sections} pathname={pathname} link={Link} onNavigate={() => setDrawerOpen(false)} />
+            {account}
+          </nav>
+        </div>
+      ) : null}
+
+      <div className="lg:grid lg:grid-cols-[13.5rem_minmax(0,1fr)]">
+        {/* 桌面固定侧栏 */}
+        <aside className="sticky top-0 hidden h-dvh flex-col gap-5 overflow-y-auto border-r border-line px-3 py-4 lg:flex">
+          {brandBlock}
+          <SidebarSections sections={sections} pathname={pathname} link={Link} />
+          {account}
+        </aside>
+
+        <div className="flex min-h-dvh min-w-0 flex-col">
+          {/* 轻顶栏 */}
+          <header className="sticky top-0 z-30 flex items-center gap-3 border-b border-line bg-bg/95 px-4 py-2.5 backdrop-blur lg:px-8">
+            <button
+              type="button"
+              aria-label="打开导航"
+              onClick={() => setDrawerOpen(true)}
+              className="rounded-md p-1 text-muted hover:bg-surface hover:text-accent lg:hidden"
+            >
+              <Icon name="menu" size={16} />
+            </button>
+            <span className="text-sm font-medium text-ink-2">{currentLabel}</span>
+            <div className="ml-auto flex items-center gap-3">
+              {headerExtras}
+              {hasPalette ? (
+                <button
+                  type="button"
+                  onClick={() => setPaletteOpen(true)}
+                  className="flex items-center gap-2 rounded-md border border-line px-2.5 py-1 font-mono text-[11px] text-muted transition-colors hover:border-accent hover:text-accent"
+                  aria-label="打开命令面板"
+                >
+                  <Icon name="search" size={12} />
+                  <span className="hidden sm:inline">搜索</span>
+                  <kbd className="hidden sm:inline">⌘K</kbd>
+                </button>
+              ) : null}
+            </div>
+          </header>
+
+          {/* 内容区 */}
+          <main className="page-shell flex-1 py-8">{children}</main>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** 侧栏账户块通用样式辅助：登录后的用户信息行。 */
+export function AppShellAccountRow({ name, badge, children }: { name: string; badge?: string; children?: ReactNode }) {
+  return (
+    <div className="mt-auto flex flex-col gap-2 border-t border-line px-2 pt-3">
+      <div className="flex items-center justify-between gap-2">
+        <span className="truncate font-mono text-xs text-ink-2">{name}</span>
+        {badge ? <Badge variant="outline" size="sm">{badge}</Badge> : null}
+      </div>
+      {children ? <div className="flex items-center justify-between gap-2 font-mono text-[11px]">{children}</div> : null}
+    </div>
+  );
+}

package/src/components/app-shell/CommandPalette.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { Icon, type IconName } from "../icon/Icon";
+
+export type AppPaletteItem = {
+  label: string;
+  hint?: string;
+  group: string;
+  icon?: IconName;
+  keywords?: string;
+  run: () => void;
+};
+
+/**
+ * ⌘K / Ctrl+K 命令面板：纯手写 overlay（无新依赖）。
+ * 键盘：↑↓ 选择、Enter 确认、Esc 关闭；输入即时过滤（label/hint/keywords 子串匹配）。
+ */
+export function CommandPalette({ open, onClose, items, placeholder = "搜索页面或执行动作…" }: { open: boolean; onClose: () => void; items: AppPaletteItem[]; placeholder?: string }) {
+  const [query, setQuery] = useState("");
+  const [cursor, setCursor] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter((item) => `${item.label} ${item.hint ?? ""} ${item.keywords ?? ""}`.toLowerCase().includes(q));
+  }, [items, query]);
+
+  useEffect(() => {
+    if (open) {
+      setQuery("");
+      setCursor(0);
+      // 等一帧让 overlay 挂载后再聚焦，避免被浏览器焦点还原打断
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [open]);
+
+  useEffect(() => setCursor(0), [query]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setCursor((c) => Math.min(c + 1, filtered.length - 1));
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setCursor((c) => Math.max(c - 1, 0));
+      } else if (event.key === "Enter") {
+        event.preventDefault();
+        const item = filtered[cursor];
+        if (item) {
+          onClose();
+          item.run();
+        }
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, filtered, cursor, onClose]);
+
+  useEffect(() => {
+    listRef.current?.querySelector<HTMLElement>(`[data-index="${cursor}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [cursor]);
+
+  if (!open) return null;
+
+  const execute = (index: number) => {
+    const item = filtered[index];
+    if (!item) return;
+    onClose();
+    item.run();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/30 px-4 pt-[12vh]" onClick={onClose} role="presentation">
+      <div
+        className="w-full max-w-xl overflow-hidden rounded-xl border border-line bg-bg shadow-lg"
+        onClick={(event) => event.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-label="命令面板"
+      >
+        <div className="flex items-center gap-2 border-b border-line px-4 py-3">
+          <Icon name="search" size={14} className="text-muted" />
+          <input
+            ref={inputRef}
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder={placeholder}
+            className="w-full bg-transparent text-sm outline-none placeholder:text-ink-3"
+          />
+          <kbd className="rounded border border-line px-1.5 py-0.5 font-mono text-[10px] text-ink-3">esc</kbd>
+        </div>
+        <div ref={listRef} className="max-h-[50vh] overflow-y-auto py-1.5">
+          {filtered.length === 0 ? (
+            <p className="px-4 py-6 text-center font-mono text-xs text-ink-3">没有匹配结果</p>
+          ) : (
+            filtered.map((item, index) => (
+              <button
+                key={`${item.group}-${item.label}`}
+                type="button"
+                data-index={index}
+                onClick={() => execute(index)}
+                onMouseEnter={() => setCursor(index)}
+                className={`flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm transition-colors ${
+                  index === cursor ? "bg-surface text-accent-readable" : "text-ink-2"
+                }`}
+              >
+                {item.icon ? <Icon name={item.icon} size={13} className="shrink-0 text-muted" /> : null}
+                <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                {item.hint ? <span className="shrink-0 font-mono text-[11px] text-ink-3">{item.hint}</span> : null}
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/app-shell/index.ts

@@ -0,0 +1,4 @@
+export { AppShell, AppShellAccountRow, appShellIsActive } from "./AppShell";
+export type { AppNavItem, AppNavSection, AppShellLink } from "./AppShell";
+export { CommandPalette } from "./CommandPalette";
+export type { AppPaletteItem } from "./CommandPalette";

package/src/components/badge/Badge.tsx

@@ -9,7 +9,7 @@ export const badgeVariants = cva(
   {
     variants: {
       variant: {
-        solid: "bg-ink text-white",
+        solid: "bg-ink text-bg",
         outline: "border border-line text-ink-2",
         success: "border border-success/30 bg-success/10 text-success",
         warning: "border border-warning/30 bg-warning/10 text-warning",

package/src/components/button/button.styles.ts

@@ -26,7 +26,8 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          "bg-ink text-white hover:shadow-md active:scale-[0.98]",
+          // 反色按钮：bg-ink 上用 bg 色作文字（浅色=白、深色=黑），硬编码 text-white 在深色主题下不可读
+          "bg-ink text-bg hover:shadow-md active:scale-[0.98]",
         secondary:
           "border border-line text-ink hover:border-ink hover:bg-surface-2 active:scale-[0.98]",
         ghost:

package/src/components/index.ts

@@ -1,6 +1,7 @@
 // @zmzai/theme — Components barrel (54 components)
 
 // === Basic ===
+export * from "./app-shell";
 export * from "./button";
 export * from "./input";
 export * from "./textarea";

package/src/components/navbar/Navbar.tsx

@@ -9,7 +9,7 @@ import { Icon } from "../icon/Icon";
 /**
  * navItemClass — 导航项统一样式（全域导航一致）。
  *
- * active 时深墨 pill 高亮（bg-ink text-white），其余 hover 浮现。
+ * active 时深墨 pill 高亮（bg-ink text-bg，深浅主题自适应），其余 hover 浮现。
  * 链接本身由调用方渲染（Next.js 用 next/link，保持 SPA 导航），
  * 只要都套这个 className，任何站点的导航观感就完全一致。
  */
@@ -17,7 +17,7 @@ export function navItemClass(active: boolean): string {
   return cn(
     "inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
     active
-      ? "bg-ink text-white"
+      ? "bg-ink text-bg"
       : "text-ink-2 hover:bg-surface-2 hover:text-ink"
   );
 }

package/src/components/sticky-banner/StickyBanner.tsx

@@ -16,7 +16,7 @@ export interface StickyBannerProps extends HTMLAttributes<HTMLDivElement> {
 
 const variantStyles: Record<BannerVariant, string> = {
   info: "bg-surface text-ink border-line",
-  warning: "bg-ink text-white border-ink",
+  warning: "bg-ink text-bg border-ink",
   danger: "bg-bg text-ink border-ink border-2",
 };
 

package/src/components/vanish-input/VanishInput.tsx

@@ -145,7 +145,7 @@ export function VanishInput({
       <button
         type="submit"
         aria-label="提交"
-        className="ml-2 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-ink text-white transition-transform hover:scale-105 active:scale-95"
+        className="ml-2 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-ink text-bg transition-transform hover:scale-105 active:scale-95"
       >
         <svg
           className="h-3.5 w-3.5"