react+tailwind实现一个chatgpt人工智能聊天对话ui界面效果代码-html代码-BFW代码库

代码语言：html
代码描述：react+tailwind实现一个chatgpt人工智能聊天对话ui界面效果代码
代码标签： react tailwind chatgpt 人工智能聊天对话 ui 界面
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
.bg-input{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #111111 18.23%, #111111 100%)
}

body{
    background-color: #111111;
    color: white;
}
</style>

  
  
  
</head>

<body >
  <div id="root"></div>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.7.18.13.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss_3.3.3.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.18.2.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.18.2.0.js"></script>
      <script type="text/babel">
      const { useEffect, useRef, useState} = window.React;
  const { render } = window.ReactDOM;

tailwind.config = {
  theme: {
    extend: {
      colors:{
        body:'#111111',
        line:'#1e1e1e',
        item:'#181818',
        card:'#252527',
        brandGreen:'#e8fe4e',
        brandGray:'#737373',
        brandBlue:'#1a2cb8',
        brandOrange:'#cbbca6',
      }
    },
  }
}


const pinned = [
  {
    key: 1,
    title: "Benevolentia paciscor propinquus",
    desc: "Concilium munimentum curis competo sanctifico iaculator",
    date: "12 Jan",
    isSelected: false,
  },
  {
    key: 2,
    title: "Mollis furs sapiens",
    desc: "Andegavense infigo edoceo prohibeo vultuosus aer hactenus glorior informatio",
    date: "9 Mar",
    isSelected: true,
  },
];

const all = [
  {
    key: 1,
    title: "Transmitto pario dignitas",
    desc: "Promoveo lenocinor treverim etiam natio vespillo plaustrum eximius adicio iugis efficio ille",
    date: "21 Aug",
    isSelected: false,
  },
  {
    key: 2,
    title: "Gemblacensis intumesco adipiscor",
    desc: "Nitor articulus rhetor spolium insula hanc dedecus expedio spargo lasesco furor",
    date: "2 Dec",
    isSelected: false,
  },
  {
    key: 3,
    title:
      "Sustineo locupleto prohibeo testimonium epistula quaestio recito fugio defleo comedo pollicitus cedo",
    desc: "Commessatio intus paciscor redigo forte exspecto inflo mores, frux, ex",
    date: "15 Apr",
    isSelected: false,
  },
  {
    key: 4,
    title:
      "Macto parilis macero castellandum patria proinde demitto molestia ficus malum",
    desc: "Adulescentia nutus vestis pevela pertimesco procella berlinmonte quodammodo quartus nutrimens claro",
    date: "20 May",
    isSelected: false,
  },
];

const dataMain = [
  {
    key: 0,
    text: "Infirmus scaphium namucense vilis induco lacus. Piger distulo putus. Insula demo multus laboro cupressus.",
    isUser: true,
  },
  {
    key: 1,
    text: "Infirmus scaphium namucense vilis induco lacus. Piger distulo putus. Insula demo multus laboro cupressus.",
    isUser: false,
  },
  {
    key: 2,
    text: "Saeta prolatio impendeo sentio praevenio magnopere pertorqueo velociter aperte prolatio.",
    isUser: true,
  },
  {
    key: 3,
    text: "Plurimus laetor rogo. Maxime limen immortalis defaeco immerito decorus niveus puchre liberaliter huic. ",
    isUser: false,
    images: [
      { key: 0, url: "//repo.bfw.wiki/bfwrepo/image/64700adadc9a0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
      { key: 1, url: "//repo.bfw.wiki/bfwrepo/image/649d3cf9c3795.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
      { key: 2, url: "//repo.bfw.wiki/bfwrepo/image/64c4a32a55d4b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
      { key: 3, url: "//repo.bfw.wiki/bfwrepo/image/62ff45c2ce421.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
      { key: 4, url: "//repo.bfw.wiki/bfwrepo/image/62ad032c92ddd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
    ],
  },
  {
    key: 4,
    text: "Quilibet forte spero mundus contages quaestio praebeo onero.",
    isUser: true,
  },
  {
    key: 5,
    text: "Quilibet forte spero mundus contages quaestio praebeo onero.",
    isUser: false,
  },
  {
    key: 6,
    text: "Quilibet forte spero mundus contages quaestio praebeo onero.",
    isUser: true,
  },
  {
    key: 7,
    text: "Sure, here is an example of NFTs",
    isUser: false,
    images: [
      { key: 0, url: "//repo.bfw.wiki/bfwrepo/image/629fe9ae4c888.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
      { key: 1, url: "//repo.bfw.wiki/bfwrepo/image/629fea5a8b628.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
      { key: 2, url: "//repo.bfw.wiki/bfwrepo/image/6257e9f53b418.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
      { key: 3, url: "//repo.bfw.wiki/bfwrepo/image/61de6e39623c8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
      { key: 4, url: "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
    ],
  },
];

const trending = [
  {
    key: 1,
    text: "Web3 platform",
    isSelected: true,
  },
  {
    key: 2,
    text: "Crypto",
    isSelected: false,
  },
  {
    key: 3,
    text: "AI",
    isSelected: false,
  },
  {
    key: 4,
    text: "How to invest in crypto",
    isSelected: false,
  },
  {
    key: 5,
    text: "What NFTs are popular now",
    isSelected: false,
  },
];

function Options({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className={className}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
      />
    </svg>
  );
}

function Times({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className={className}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M6 18L18 6M6 6l12 12"
      />
    </svg>
  );
}

function PencilSquareIcon({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className={className}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
      />
    </svg>
  );
}

function SearchIcon({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className={className}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
      />
    </svg>
  );
}

function PinnedIcon({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      className={className}
    >
      <path
        d="M23.7114 6.8735L17.0193 0.181399C16.7777 -0.0604258 16.3854 -0.0604258 16.1438 0.181399L16.1155 0.209755C15.7051 0.619978 15.479 1.16566 15.479 1.7459C15.479 2.11972 15.574 2.47843 15.7505 2.79653L8.7483 8.806C8.2124 8.32706 7.5284 8.06492 6.80392 8.06492C6.02322 8.06492 5.28932 8.36891 4.73745 8.92091L4.69547 8.96288C4.45365 9.20459 4.45365 9.59661 4.69547 9.83831L8.70459 13.8474L4.79998 17.7519C4.72185 17.8323 2.87367 19.7368 1.6586 21.2524C0.501484 22.6953 0.27266 22.9596 0.260773 22.9733C0.0459413 23.2179 0.0578282 23.5869 0.287766 23.818C0.408246 23.939 0.56711 24.0001 0.726469 24.0001C0.871713 24.0001 1.01733 23.9494 1.13446 23.847C1.14474 23.838 1.40303 23.6136 2.85535 22.4491C4.37069 21.2341 6.2752 19.3858 6.36175 19.3014L10.2601 15.4031L14.0545 19.1975C14.1753 19.3185 14.3338 19.3789 14.4922 19.3789C14.6505 19.3789 14.8092 19.3185 14.9299 19.1975L14.9719 19.1556C15.5239 18.6037 15.8278 17.8697 15.8278 17.0891C15.8278 16.3646 15.5656 15.6806 15.0868 15.1447L21.0962 8.14256C21.4143 8.31901 21.7731 8.41398 22.1469 8.41398C22.7272 8.41398 23.2728 8.188 23.683 7.77753L23.7114 7.74918C23.9532 7.50723 23.9532 7.11521 23.7114 6.8735Z"
        fill="currentColor"
      />
    </svg>
  );
}

function ListAllIcon({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className={className}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
      />
    </svg>
  );
}
function TrendingIcon({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1}
      stroke="none"
      className={className}
    >
      <path
        d="M5.64171 19.7582L18.063 7.33689L18.0631 11.9911C18.0631 13.328 20.0683 13.3279 20.0683 11.9911L20.065 7.74905L20.0628 4.91725C20.0612 4.36722 19.6157 3.92174 19.0657 3.92011L11.9932 3.91598C11.7206 3.91227 11.458 4.01983 11.2668 4.21427C10.6303 4.85088 11.0932 5.93857 11.9933 5.92133L16.653 5.91583L4.18957 18.3793C3.25789 19.4082 4.74678 20.7507 5.64171 19.7582Z"
        fill="currentColor"
      />
    </svg>
  );
}

function StarIcon({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className={className}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
      />
    </svg>
  );
}

function WarningIcon({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className={className}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
      />
    </svg>
  );
}

function ChatHeader() {
  return (
    <div className="fixed top-0 inset-x-0 z-10">
      <div
        className="bg-body border-b border-b-line z-10 bg-opacity-30 backdrop-blur-md"
        style={{ marginLeft: "384px", marginRight: "320px" }}
      >
        <div className="max-w-3xl mx-auto px-4 flex items-center justify-between py-2">
          <div className="inline-flex items-center">
            <ChatIcon className="w-6 h-6" />
            <h1 className="ml-2 font-semibold text-xl">Explore NFT Industry</h1>
          </div>
          <div className="inline-flex items-center space-x-3">
            <button
              className="w-9 h-9 grid place-items-center bg-card rounded-md"
              onClick={() => {}}
            >
              <TrashIcon className="w-5 h-5" />
            </button>
            <button
              className="w-9 h-9 grid place-items-center bg-card rounded-md"
              onClick={() => {}}
            >
              <SaveIcon className="w-5 h-5" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function ChatIcon({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className={className}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"
      />
    </svg>
  );
}

function TrashIcon({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className={className}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
      />
    </svg>
  );
}

function SaveIcon({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className={className}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859M12 3v8.25m0 0l-3-3m3 3l3-3"
      />
    </svg>
  );
}

function Chat() {
  return (
    <div className=" " style={{ marginLeft: "384px", marginRight: "320px" }}>
      <div className="mx-auto max-w-3xl px-4 pt-16 pb-48">
        {dataMain.map((i) => (
          <ChatItem item={i} key={i.key} />
        ))}
      </div>
    </div>
  );
}

function ChatItem({ item }) {
  return (
    <div className="py-2" key={item.key}>
      <div className="bg-item rounded-md flex p-2">
        <div className="shrink-0 w-12">
          <div className="w-11 h-11 grid place-items-center">
            {item.isUser ? (
              <div
                className="w-10 h-10 rounded-full bg-center bg-cover"
                style={{
                  backgroundImage:
                    'url("//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90")',
                }}
              ></div>
            ) : (
              <div className="w-9 h-9 grid place-items-center bg-brandGreen rounded-full">
                <GPTLogo className="w-6 h-6 text-blue-900" />
              </div>
            )}
          </div>
        </div>
        <div className=" w-full">
          <div className="px-3 h-10 flex items-center justify-between grow text-brandGray ">
            <div className="text-sm"> 12 Mar </div>
            {item.isUser ? (
              <div className="inline-flex items-center">
                <button className="w-7 h-7 rounded-md grid place-items-center">
                  <Pencil className="w-5 h-5 " />
                </button>
              </div>
            ) : (
              <div className="inline-flex items-center space-x-2">
                <button className="w-7 h-7 rounded-md grid place-items-center">
                  <ThumbsUp className="w-5 h-5 " />
                </button>
                <button className="w-7 h-7 rounded-md grid place-items-center">
                  <ThumbsDown className="w-5 h-5 " />
                </button>
              </div>
            )}
          </div>
          <div
            className={`px-3 pb-3 ${
              item.isUser ? "text-white" : "text-brandGray"
            }`}
          >
            {item.text}
          </div>
          {item.images && <ImageSet images={item.images} />}
        </div>
      </div>
    </div>
  );
}

function GPTLogo({ className }) {
  return (
    <svg
      className={className}
      viewBox="0 0 512 512"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M468.698 210.996C472.892 198.408 475.031 185.229 475.033 171.963C475.032 150.012 469.177 128.457 458.072 109.513C435.757 70.718 394.361 46.766 349.561 46.766C340.735 46.7662 331.933 47.6972 323.303 49.5436C311.695 36.4812 297.446 26.0248 281.497 18.864C265.547 11.7031 248.259 8.00038 230.772 8H229.987L229.692 8.00173C175.43 8.00173 127.31 42.9721 110.629 94.5262C93.3625 98.0583 77.0506 105.234 62.7854 115.572C48.5201 125.91 36.6307 139.173 27.9129 154.472C16.8412 173.529 11.0068 195.169 11 217.202C11.0042 248.167 22.5126 278.028 43.2966 301.004C39.1011 313.591 36.9615 326.771 36.9597 340.037C36.9616 361.988 42.816 383.543 53.9211 402.487C67.127 425.451 87.2943 443.634 111.515 454.411C135.735 465.189 162.757 468.006 188.683 462.455C200.293 475.517 214.543 485.974 230.493 493.135C246.444 500.296 263.733 503.999 281.221 504H282.006L282.325 503.998C336.617 503.998 384.722 469.026 401.402 417.425C418.669 413.892 434.98 406.716 449.246 396.378C463.511 386.039 475.401 372.777 484.12 357.478C495.18 338.438 501.003 316.816 501 294.803C500.996 263.839 489.487 233.978 468.703 211.003L468.698 210.996ZM282.038 471.573H281.909C260.185 471.566 239.151 463.954 222.464 450.061C223.455 449.529 224.434 448.974 225.401 448.399L324.281 391.354C326.748 389.951 328.8 387.921 330.228 385.469C331.655 383.018 332.408 380.233 332.409 377.397V238.072L374.203 262.174C374.422 262.283 374.611 262.445 374.753 262.645C374.895 262.844 374.985 263.076 375.016 263.319V378.621C374.959 429.884 333.368 471.47 282.038 471.573ZM82.0843 386.278C73.9167 372.173 69.6136 356.168 69.6082 339.874C69.6082 334.56 70.0728 329.232 70.9779 323.995C71.713 324.435 72.9959 325.218 73.9166 325.746L172.797 382.791C175.262 384.228 178.065 384.986 180.92 384.985C183.774 384.984 186.577 384.226 189.042 382.788L309.764 313.167V361.374L309.766 361.457C309.766 361.689 309.712 361.918 309.608 362.126C309.504 362.334 309.353 362.514 309.168 362.654L209.209 420.296C195.066 428.427 179.034 432.708 162.715 432.712C146.379 432.71 130.33 428.418 116.179 420.268C102.027 412.117 90.2691 400.394 82.0843 386.273V386.278ZM56.0709 170.68C66.9311 151.84 84.0792 137.414 104.514 129.928C104.514 130.778 104.466 132.284 104.466 133.33V247.422L104.464 247.516C104.464 250.349 105.215 253.131 106.641 255.58C108.066 258.03 110.115 260.058 112.58 261.461L233.302 331.071L191.509 355.173C191.303 355.309 191.066 355.392 190.82 355.414C190.575 355.436 190.327 355.398 190.1 355.301L90.1307 297.61C75.9986 289.434 64.2665 277.691 56.1099 263.559C47.9534 249.427 43.659 233.401 43.6572 217.089C43.6635 200.803 47.9455 184.803 56.0761 170.685L56.0709 170.68ZM399.452 250.489L278.73 180.871L320.524 156.777C320.73 156.641 320.966 156.558 321.212 156.536C321.458 156.513 321.706 156.552 321.933 156.649L421.9 214.291C436.044 222.455 447.789 234.191 455.955 248.322C464.122 262.453 468.423 278.481 468.426 294.796C468.426 333.739 444.096 368.585 407.514 382.034V264.531C407.519 264.488 407.519 264.443 407.519 264.399C407.518 261.577 406.772 258.805 405.355 256.362C403.939 253.92 401.903 251.894 399.452 250.489ZM441.05 187.958C440.078 187.363 439.099 186.78 438.113 186.209L339.233 129.162C336.767 127.727 333.965 126.971 331.112 126.97C328.258 126.971 325.456 127.727 322.991 129.162L202.267 198.783V150.576L202.265 150.493C202.265 150.022 202.489 149.578 202.865 149.296L302.824 91.7019C316.963 83.5607 332.996 79.2748 349.316 79.274C400.712 79.274 442.392 120.902 442.392 172.235C442.389 177.503 441.94 182.761 441.05 187.953V187.958ZM179.544 273.878L137.742 249.776C137.522 249.666 137.333 249.505 137.191 249.305C137.05 249.105 136.959 248.874 136.929 248.631V133.327C136.951 82.0221 178.631 40.4283 230.004 40.4283C251.762 40.4328 272.832 48.0456 289.557 61.9455C288.805 62.3559 287.492 63.0797 286.62 63.6079L187.74 120.653C185.273 122.055 183.221 124.084 181.794 126.535C180.367 128.985 179.614 131.77 179.614 134.605V134.697L179.544 273.878ZM202.248 224.989L256.016 193.972L309.783 224.968V286.982L256.016 317.979L202.248 286.982V224.989Z"
        fill="currentColor"
      />
    </svg>
  );
}

function LogoutIcon({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className={className}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M15.75 9V5.25A2.25 2.2.........完整代码请登录后点击上方下载按钮下载查看