选择器

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export function SelectBasicStyles() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <Select defaultValue="current">
        <SelectTrigger variant="outlined" className="w-full">
          <SelectValue placeholder="状态" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="current">现行</SelectItem>
          <SelectItem value="deprecated">作废</SelectItem>
        </SelectContent>
      </Select>
      <Select defaultValue="current">
        <SelectTrigger variant="filled" className="w-full">
          <SelectValue placeholder="状态" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="current">现行</SelectItem>
        </SelectContent>
      </Select>
      <Select defaultValue="current">
        <SelectTrigger variant="underlined" className="w-full">
          <SelectValue placeholder="状态" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="current">现行</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export function SelectSizeVariants() {
  return (
    <div className="grid gap-4">
      <Select defaultValue="current">
        <SelectTrigger variant="outlined" size="sm" className="w-full">
          <SelectValue placeholder="状态" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="current">现行</SelectItem>
        </SelectContent>
      </Select>
      <Select defaultValue="current">
        <SelectTrigger variant="filled" size="default" className="w-full">
          <SelectValue placeholder="状态" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="current">现行</SelectItem>
        </SelectContent>
      </Select>
      <Select defaultValue="current">
        <SelectTrigger variant="underlined" size="lg" className="w-full">
          <SelectValue placeholder="状态" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="current">现行</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export function SelectStateVariants() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <Select defaultValue="current">
        <SelectTrigger className="w-full">
          <SelectValue placeholder="状态" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="current">现行</SelectItem>
        </SelectContent>
      </Select>
      <Select defaultValue="current" disabled>
        <SelectTrigger className="w-full">
          <SelectValue placeholder="状态" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="current">现行</SelectItem>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger className="w-full" aria-invalid>
          <SelectValue placeholder="选择优先级" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="p0">P0 紧急</SelectItem>
        </SelectContent>
      </Select>
      <p>现行</p>
      <Select defaultValue="current">
        <SelectTrigger className="w-full">
          <SelectValue placeholder="状态" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="current">现行</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}

import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Icon } from "@/daren-design/icons/Icon"

export function SelectSceneExample() {
  return (
    <div className="grid grid-cols-2 gap-6">
      <Select defaultValue="agent">
        <SelectTrigger className="w-full">
          <SelectValue placeholder="选择来源" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="agent" textValue="Agent 生成">
            <span className="flex items-center gap-2">
              <Icon name="spark" />
              Agent 生成
            </span>
          </SelectItem>
        </SelectContent>
      </Select>
      <Select defaultValue="agent">
        <SelectTrigger className="w-full">
          <SelectValue placeholder="选择资产" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>知识资产</SelectLabel>
            <SelectItem value="vault">Vault 文档</SelectItem>
          </SelectGroup>
          <SelectSeparator />
          <SelectGroup>
            <SelectLabel>Agent 资产</SelectLabel>
            <SelectItem value="agent">Agent Memory</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
      <Select defaultValue="Asia/Shanghai">
        <SelectTrigger className="w-full">
          <SelectValue placeholder="选择时区" />
        </SelectTrigger>
        <SelectContent optionCount={10} searchValue="" onSearchChange={() => undefined} searchPlaceholder="搜索时区">
          <SelectItem value="Asia/Shanghai">Asia/Shanghai</SelectItem>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger className="w-full">
          <SelectValue placeholder="加载选项" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="loading" disabled>正在加载...</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}