@zmzai/theme 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zmzai/theme",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": false,
   "type": "module",
   "description": "zmzai 全品牌设计系统 — Radix UI + framer-motion + Tailwind v4 + MiSans",
@@ -76,9 +76,9 @@
     "@radix-ui/react-select": "^2.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.0",
+    "@tailwindcss/vite": "^4.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "@tailwindcss/vite": "^4.0.0",
     "@vitejs/plugin-react": "^4.3.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
@@ -91,17 +91,18 @@
     "vite": "^5.4.0"
   },
   "dependencies": {
-    "clsx": "^2.1.0",
-    "tailwind-merge": "^2.5.0",
     "@radix-ui/react-dialog": "^1.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.23",
     "@radix-ui/react-select": "^2.1.0",
     "@radix-ui/react-tooltip": "^1.1.0",
     "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "framer-motion": "^11.0.0",
+    "highlight.js": "^11.11.1",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "highlight.js": "^11.11.1"
+    "tailwind-merge": "^2.5.0"
   },
   "packageManager": "pnpm@10.34.5+sha512.a4ee05f2f73658255bd6a89859c065a45c28a57daefae2c893a168ee2b73168c37b91e83e57ea67654ad03f03031746430e8bce38e362e042605fb8abc80192e"
 }

package/src/components/index.ts

@@ -85,3 +85,4 @@ export * from "./loader";
 export * from "./skeleton";
 export * from "./empty-state";
 export * from "./carousel";
+export * from "./model-selector";

package/src/components/model-selector/ModelSelector.tsx

@@ -0,0 +1,282 @@
+"use client";
+
+import { useState, useRef, useEffect, type ReactNode } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { cn } from "../../utils/cn";
+import type {
+  ModelSelectorData,
+  ModelSelectorValue,
+  ModelSelectorModel,
+  ModelSelectorChannel,
+} from "./types";
+import "./model-selector.css";
+
+export interface ModelSelectorProps {
+  /** 完整数据（featured + channels） */
+  data: ModelSelectorData;
+  /** 当前选中值 */
+  value: ModelSelectorValue;
+  /** 选中回调 */
+  onChange: (value: ModelSelectorValue) => void;
+  /** 触发器占位文案 */
+  placeholder?: string;
+  /** 是否显示搜索框 */
+  searchable?: boolean;
+  /** 自定义类名（作用于触发器） */
+  className?: string;
+}
+
+/** 在全部模型中查找当前选中模型，返回 {channel, model} 用于触发器显示。 */
+function findSelectedModel(
+  data: ModelSelectorData,
+  value: ModelSelectorValue,
+): { model: ModelSelectorModel | null; channel: ModelSelectorChannel | null } {
+  // 先在 featured 中找
+  const featured = data.featured.find((m) => m.id === value.model);
+  if (featured) return { model: featured, channel: null };
+  // 再在 channels 中找
+  for (const channel of data.channels) {
+    const model = channel.models.find((m) => m.id === value.model);
+    if (model) return { model, channel };
+  }
+  return { model: null, channel: null };
+}
+
+/** 过滤数据（按关键词）。 */
+function filterData(
+  data: ModelSelectorData,
+  query: string,
+): ModelSelectorData {
+  const q = query.trim().toLowerCase();
+  if (!q) return data;
+  const matchModel = (m: ModelSelectorModel) =>
+    m.name.toLowerCase().includes(q) ||
+    (m.description?.toLowerCase().includes(q) ?? false) ||
+    (m.channel?.toLowerCase().includes(q) ?? false);
+
+  const featured = data.featured.filter(matchModel);
+  const channels = data.channels
+    .map((ch) => ({ ...ch, models: ch.models.filter(matchModel) }))
+    .filter((ch) => ch.models.length > 0);
+  return { featured, channels };
+}
+
+export function ModelSelector({
+  data,
+  value,
+  onChange,
+  placeholder = "选择模型",
+  searchable = false,
+  className,
+}: ModelSelectorProps) {
+  const [open, setOpen] = useState(false);
+  const [expandedChannels, setExpandedChannels] = useState<Set<string>>(new Set());
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  // 打开时聚焦搜索框
+  useEffect(() => {
+    if (open && searchable) {
+      // 等 Popover 渲染完再聚焦
+      const timer = setTimeout(() => searchRef.current?.focus(), 50);
+      return () => clearTimeout(timer);
+    }
+  }, [open, searchable]);
+
+  // 关闭时清理搜索
+  useEffect(() => {
+    if (!open) {
+      setSearch("");
+    }
+  }, [open]);
+
+  const { model: selectedModel, channel: selectedChannel } = findSelectedModel(data, value);
+  const filtered = filterData(data, search);
+
+  const hasResults = filtered.featured.length > 0 || filtered.channels.length > 0;
+
+  function toggleChannel(channelId: string) {
+    setExpandedChannels((prev) => {
+      const next = new Set(prev);
+      if (next.has(channelId)) next.delete(channelId);
+      else next.add(channelId);
+      return next;
+    });
+  }
+
+  function selectModel(model: ModelSelectorModel, channel?: ModelSelectorChannel) {
+    onChange({ channel: channel?.id ?? model.channel, model: model.id });
+    setOpen(false);
+  }
+
+  function isSelected(modelId: string): boolean {
+    return value.model === modelId;
+  }
+
+  const triggerLabel = selectedModel?.name ?? placeholder;
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <button
+          type="button"
+          className={cn("ms-trigger", className)}
+          aria-label="选择模型"
+        >
+          <span className={cn(!selectedModel && "ms-trigger-placeholder")}>
+            {triggerLabel}
+          </span>
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            className={cn("ms-trigger-chevron", open && "ms-open")}
+          >
+            <path
+              d="M3 4.5L6 7.5L9 4.5"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      </Popover.Trigger>
+
+      <Popover.Portal>
+        <Popover.Content
+          className="ms-popover"
+          sideOffset={4}
+          align="start"
+          onCloseAutoFocus={(e) => e.preventDefault()}
+        >
+          {searchable && (
+            <div className="ms-search">
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-ink-3" aria-hidden>
+                <circle cx="7" cy="7" r="4.5" />
+                <path d="M10.5 10.5L13.5 13.5" />
+              </svg>
+              <input
+                ref={searchRef}
+                className="ms-search-input"
+                placeholder="搜索模型…"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Escape") {
+                    setSearch("");
+                    setOpen(false);
+                  }
+                }}
+              />
+            </div>
+          )}
+
+          {!hasResults ? (
+            <div className="ms-empty">没有找到匹配的模型</div>
+          ) : (
+            <div>
+              {/* Featured 区 */}
+              {filtered.featured.length > 0 && (
+                <div className="ms-featured">
+                  {filtered.featured.map((model) => (
+                    <button
+                      key={model.id}
+                      type="button"
+                      className={cn("ms-featured-item", isSelected(model.id) && "ms-selected")}
+                      onClick={() => selectModel(model)}
+                    >
+                      {model.icon && (
+                        <span className="ms-featured-icon">{model.icon}</span>
+                      )}
+                      <span className="ms-featured-body">
+                        <span className="ms-featured-name">{model.name}</span>
+                        {model.description && (
+                          <span className="ms-featured-desc">{model.description}</span>
+                        )}
+                      </span>
+                      {isSelected(model.id) && (
+                        <svg className="ms-featured-check" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                          <path d="M3 7L6 10L11 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                        </svg>
+                      )}
+                    </button>
+                  ))}
+                </div>
+              )}
+
+              {/* 分隔线 */}
+              {filtered.featured.length > 0 && filtered.channels.length > 0 && (
+                <div className="ms-separator" />
+              )}
+
+              {/* 渠道分组区 */}
+              {filtered.channels.map((channel) => {
+                const isOpen = expandedChannels.has(channel.id);
+                return (
+                  <div key={channel.id} className="ms-channel">
+                    <button
+                      type="button"
+                      className="ms-channel-trigger"
+                      onClick={() => toggleChannel(channel.id)}
+                      aria-expanded={isOpen}
+                    >
+                      {channel.icon && (
+                        <span className="ms-channel-icon">{channel.icon}</span>
+                      )}
+                      <span>{channel.name}</span>
+                      <span className="ms-channel-count">({channel.models.length})</span>
+                      <svg
+                        width="12"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        fill="none"
+                        className={cn("ms-channel-chevron", isOpen && "ms-open")}
+                      >
+                        <path
+                          d="M4.5 3L7.5 6L4.5 9"
+                          stroke="currentColor"
+                          strokeWidth="1.5"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    {isOpen && (
+                      <div className="ms-channel-models">
+                        {channel.models.map((model) => (
+                          <button
+                            key={model.id}
+                            type="button"
+                            className={cn("ms-model-item", isSelected(model.id) && "ms-selected")}
+                            onClick={() => selectModel(model, channel)}
+                          >
+                            {model.icon && (
+                              <span className="ms-model-icon">{model.icon}</span>
+                            )}
+                            <span className="ms-model-name">{model.name}</span>
+                            {model.meta && Object.values(model.meta).length > 0 && (
+                              <span className="ms-model-meta">
+                                {Object.values(model.meta).join(" · ")}
+                              </span>
+                            )}
+                            {isSelected(model.id) && (
+                              <svg className="ms-model-check" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                                <path d="M3 7L6 10L11 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                              </svg>
+                            )}
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

package/src/components/model-selector/index.ts

@@ -0,0 +1,8 @@
+export { ModelSelector } from "./ModelSelector";
+export type { ModelSelectorProps } from "./ModelSelector";
+export type {
+  ModelSelectorData,
+  ModelSelectorValue,
+  ModelSelectorModel,
+  ModelSelectorChannel,
+} from "./types";

package/src/components/model-selector/model-selector.css

@@ -0,0 +1,276 @@
+/* ModelSelector — 二级模型选择器样式 */
+
+.ms-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  height: 2.25rem;
+  padding: 0 0.75rem;
+  border-radius: var(--radius-sm, 2px);
+  border: 1px solid var(--color-line, oklch(0.85 0.02 80));
+  background: var(--color-bg, oklch(0.97 0.01 80));
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-ink, oklch(0.2 0.02 80));
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s ease;
+  min-width: 10rem;
+}
+
+.ms-trigger:hover {
+  border-color: oklch(0.4 0.02 80 / 0.4);
+}
+
+.ms-trigger:focus-visible {
+  border-color: var(--color-ink, oklch(0.2 0.02 80));
+}
+
+.ms-trigger-placeholder {
+  color: var(--color-ink-3, oklch(0.6 0.02 80));
+}
+
+.ms-trigger-chevron {
+  transition: transform 0.2s ease;
+}
+
+.ms-trigger-chevron.ms-open {
+  transform: rotate(180deg);
+}
+
+/* Popover content */
+.ms-popover {
+  z-index: 50;
+  min-width: 18rem;
+  max-height: 28rem;
+  overflow-y: auto;
+  border-radius: var(--radius-sm, 2px);
+  border: 1px solid var(--color-line, oklch(0.85 0.02 80));
+  background: var(--color-bg, oklch(0.97 0.01 80));
+  box-shadow: 0 10px 38px -10px oklch(0.2 0.02 80 / 0.25), 0 10px 20px -15px oklch(0.2 0.02 80 / 0.15);
+  padding: 0.25rem;
+}
+
+.ms-popover:focus {
+  outline: none;
+}
+
+/* Search */
+.ms-search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.5rem 0.25rem;
+  border-bottom: 1px solid var(--color-line, oklch(0.85 0.02 80));
+  margin-bottom: 0.25rem;
+}
+
+.ms-search-input {
+  flex: 1;
+  height: 1.75rem;
+  padding: 0 0.5rem;
+  border: 1px solid var(--color-line, oklch(0.85 0.02 80));
+  border-radius: var(--radius-sm, 2px);
+  background: var(--color-bg, oklch(0.97 0.01 80));
+  font-size: 0.8125rem;
+  color: var(--color-ink, oklch(0.2 0.02 80));
+  outline: none;
+}
+
+.ms-search-input::placeholder {
+  color: var(--color-ink-3, oklch(0.6 0.02 80));
+}
+
+.ms-search-input:focus {
+  border-color: var(--color-ink, oklch(0.2 0.02 80));
+}
+
+/* Featured section */
+.ms-featured {
+  padding: 0.25rem 0;
+}
+
+.ms-featured-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  padding: 0.5rem 0.625rem;
+  border-radius: var(--radius-sm, 2px);
+  cursor: pointer;
+  transition: background 0.1s ease;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+}
+
+.ms-featured-item:hover,
+.ms-featured-item:focus-visible {
+  background: var(--color-surface-2, oklch(0.93 0.01 80));
+  outline: none;
+}
+
+.ms-featured-item.ms-selected {
+  background: var(--color-surface-2, oklch(0.93 0.01 80));
+}
+
+.ms-featured-icon {
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  display: flex;
+  align-items: center;
+}
+
+.ms-featured-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.ms-featured-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-ink, oklch(0.2 0.02 80));
+  line-height: 1.3;
+}
+
+.ms-featured-desc {
+  margin-top: 0.125rem;
+  font-size: 0.75rem;
+  color: var(--color-ink-2, oklch(0.5 0.02 80));
+  line-height: 1.3;
+}
+
+.ms-featured-check {
+  flex-shrink: 0;
+  margin-top: 0.25rem;
+  color: var(--color-accent, oklch(0.45 0.18 25));
+}
+
+/* Separator */
+.ms-separator {
+  margin: 0.375rem 0.5rem;
+  height: 1px;
+  background: var(--color-line, oklch(0.85 0.02 80));
+}
+
+/* Channel group */
+.ms-channel {
+  padding: 0.125rem 0;
+}
+
+.ms-channel-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.4375rem 0.625rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-ink-2, oklch(0.5 0.02 80));
+  border-radius: var(--radius-sm, 2px);
+  transition: background 0.1s ease, color 0.1s ease;
+}
+
+.ms-channel-trigger:hover,
+.ms-channel-trigger:focus-visible {
+  background: var(--color-surface-2, oklch(0.93 0.01 80));
+  color: var(--color-ink, oklch(0.2 0.02 80));
+  outline: none;
+}
+
+.ms-channel-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.ms-channel-chevron {
+  margin-left: auto;
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.ms-channel-chevron.ms-open {
+  transform: rotate(90deg);
+}
+
+.ms-channel-count {
+  font-size: 0.6875rem;
+  color: var(--color-ink-3, oklch(0.6 0.02 80));
+  font-weight: 400;
+}
+
+/* Channel models list */
+.ms-channel-models {
+  padding: 0.125rem 0 0.25rem 0;
+}
+
+.ms-model-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.625rem 0.375rem 1.75rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.8125rem;
+  color: var(--color-ink-2, oklch(0.5 0.02 80));
+  border-radius: var(--radius-sm, 2px);
+  transition: background 0.1s ease;
+  width: 100%;
+  text-align: left;
+}
+
+.ms-model-item:hover,
+.ms-model-item:focus-visible {
+  background: var(--color-surface-2, oklch(0.93 0.01 80));
+  color: var(--color-ink, oklch(0.2 0.02 80));
+  outline: none;
+}
+
+.ms-model-item.ms-selected {
+  color: var(--color-ink, oklch(0.2 0.02 80));
+  font-weight: 500;
+}
+
+.ms-model-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.ms-model-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ms-model-check {
+  flex-shrink: 0;
+  color: var(--color-accent, oklch(0.45 0.18 25));
+}
+
+.ms-model-meta {
+  font-size: 0.6875rem;
+  color: var(--color-ink-3, oklch(0.6 0.02 80));
+  font-weight: 400;
+  flex-shrink: 0;
+}
+
+/* Empty state */
+.ms-empty {
+  padding: 1.5rem 1rem;
+  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--color-ink-3, oklch(0.6 0.02 80));
+}

package/src/components/model-selector/types.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+
+/** 单个模型条目。 */
+export interface ModelSelectorModel {
+  /** 唯一标识，如 "gpt-5.6-terra" */
+  id: string;
+  /** 显示名 */
+  name: string;
+  /** 一句话描述（用于 featured 区） */
+  description?: string;
+  /** 供应商图标（消费方传入） */
+  icon?: ReactNode;
+  /** 所属渠道名（用于分组显示） */
+  channel?: string;
+  /** 附加信息，如价格、上下文等 */
+  meta?: Record<string, string>;
+}
+
+/** 渠道分组。 */
+export interface ModelSelectorChannel {
+  /** 渠道 ID */
+  id: string;
+  /** 渠道名，如 "Azure OpenAI" */
+  name: string;
+  /** 渠道图标（消费方传入） */
+  icon?: ReactNode;
+  /** 该渠道下的模型 */
+  models: ModelSelectorModel[];
+}
+
+/** ModelSelector 完整数据。 */
+export interface ModelSelectorData {
+  /** 顶部推荐模型（带描述，直接展示不折叠） */
+  featured: ModelSelectorModel[];
+  /** 渠道分组列表 */
+  channels: ModelSelectorChannel[];
+}
+
+/** 选中值。 */
+export interface ModelSelectorValue {
+  channel?: string;
+  model: string;
+}