FLASHback1/bingo

1'use client'2 3import { useEffect, useState } from 'react'4import Image from 'next/image'5import { toast } from 'react-hot-toast'6import { Button } from '@/components/ui/button'7import pkg from '../../package.json'8import {9  DropdownMenu,10  DropdownMenuContent,11  DropdownMenuItem,12  DropdownMenuSeparator,13  DropdownMenuTrigger14} from '@/components/ui/dropdown-menu'15import { IconCopy, IconExternalLink, IconGitHub } from '@/components/ui/icons'16import SettingIcon from '@/assets/images/settings.svg'17import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-clipboard'18 19export function UserMenu() {20  const [host, setHost] = useState('')21  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 })22  useEffect(() => {23    setHost(location.host)24  }, [])25 26  useEffect(() => {27    if (isCopied) {28      toast.success('复制成功')29    }30  }, [isCopied])31  return (32    <div className="flex items-center justify-between">33      <DropdownMenu>34        <DropdownMenuTrigger asChild>35          <Button className="pl-0">36            <div className="flex items-center justify-center text-xs font-medium uppercase rounded-full select-none h-7 w-7 shrink-0 bg-muted/50 text-muted-foreground">37              <Image alt="settings" src={SettingIcon} width={20} />38            </div>39            <span className="ml-2">设置</span>40          </Button>41        </DropdownMenuTrigger>42        <DropdownMenuContent sideOffset={8} align="start" className="w-[180px] bg-background">43          <DropdownMenuItem44            onClick={() =>45              location.href='#dialog="settings"'46            }47            className="cursor-pointer"48          >49            设置用户50          </DropdownMenuItem>51          <DropdownMenuSeparator />52          <DropdownMenuItem53            onClick={() =>54              location.href='#dialog="voice"'55            }56            className="cursor-pointer"57          >58            语音设置59          </DropdownMenuItem>60          <DropdownMenuSeparator />61          <DropdownMenuItem asChild>62            <a63              href="https://github.com/weaigc/bingo/"64              target="_blank"65              rel="noopener noreferrer"66              className="inline-flex items-center justify-between w-full gap-2 cursor-pointer"67            >68              开源地址69              <IconGitHub />70              <IconExternalLink className="w-3 h-3 ml-auto" />71            </a>72          </DropdownMenuItem>73          <DropdownMenuSeparator />74          <DropdownMenuItem asChild>75            <a76              href="https://huggingface.co/spaces/hf4all/bingo"77              target="_blank"78              rel="noopener noreferrer"79              className="inline-flex items-center justify-between w-full gap-2 cursor-pointer"80            >81              托管地址82              🤗83              <IconExternalLink className="w-3 h-3 ml-auto" />84            </a>85          </DropdownMenuItem>86          <DropdownMenuSeparator />87          <DropdownMenuItem asChild>88            <a89              href="https://huggingface.co/login?next=%2Fspaces%2Fhf4all%2Fbingo%3Fduplicate%3Dtrue%26visibility%3Dpublic"90              target="_blank"91              rel="noopener noreferrer"92              className="inline-flex items-center justify-between w-full gap-2 cursor-pointer"93            >94              复制站点95              <IconExternalLink className="w-3 h-3 ml-auto" />96            </a>97          </DropdownMenuItem>98          <DropdownMenuSeparator />99          <DropdownMenuItem className="flex-col items-start">100            <div className="font-medium">版本信息 {pkg.version}</div>101          </DropdownMenuItem>102          <DropdownMenuSeparator />103          <DropdownMenuItem className="flex-col items-start">104            <div className="font-medium">站点域名</div>105            <div onClick={() => copyToClipboard(host)} className="flex gap-1 text-xs text-zinc-500 cursor-pointer">106              {host} <IconCopy />107            </div>108          </DropdownMenuItem>109        </DropdownMenuContent>110      </DropdownMenu>111    </div>112  )113}114