page-assist/src/components/Common/Playground/Scene.tsx

import React, { useState } from "react"
import { DataNavigation } from "@/components/Common/DataNavigation.tsx"
import { Card, Drawer, List } from "antd"

export const PlaygroundScene = () => {
  // 模拟数据
  const data = [
    {
      title: "绿色化工工艺项目",
      description:
        "基于生物基原料，采用repeal2.0可降解材料技术，开发新型环保材料。",
      demander: "奥赛康药业 供方：美国Propella公司"
    },
    {
      title: "智能农业解决方案",
      description: "利用物联网技术，实现精准农业管理，提高农作物产量。",
      demander: "奥赛康药业 供方：美国Propella公司"
    },
    {
      title: "新能源汽车电池技术",
      description: "研发高能量密度、长寿命的新型电池材料，推动电动汽车发展。",
      demander: "奥赛康药业 供方：美国Propella公司"
    },
    {
      title: "碳捕集与封存技术",
      description: "开发高效的碳捕集技术，减少工业排放，助力碳中和目标。",
      demander: "奥赛康药业 供方：美国Propella公司"
    }
  ]

  for (let i = 0; i < 10; i++) {
    data.push({
      title: "开发新型电池材料",
      description: "研发高能量密度、长寿命的新型电池材料，推动电动汽车发展。",
      demander: "奥赛康药业 供方：美国Propella公司"
    })
  }

  const [open, setOpen] = useState(false)

  const showDrawer = () => {
    setOpen(true)
  }

  const onClose = () => {
    setOpen(false)
  }

  return (
    <Card
      className="h-full [&_.ant-card-body]:h-full [&_.ant-card-body]:!p-[20px] overflow-y-hidden"
      hoverable>
      <div className="h-full flex flex-col relative">
        {/* 数据导航 */}
        <DataNavigation
          Header={
            <div className="flex items-center text-[#52c41a] gap-1">
              <svg
                className="icon"
                viewBox="0 0 1025 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6235"
                width="18"
                height="18">
                <path
                  d="M980.34571 1.143792c-4.850903 0-9.824354 0.888481-14.797806 2.930966L229.773215 299.724504H20.428686c-11.233669 0-20.424853 9.446494-20.424853 21.180572V702.584302c0 11.74429 9.191184 21.180572 20.424853 21.180573h129.820365c-4.728353 14.808018-7.271248 30.51473-7.271248 46.46654 0 84.119757 68.678568 152.543014 153.176184 152.543014 70.721053 0 130.330986-47.998404 147.93721-112.847312l521.569043 209.59984c4.983664 1.919936 9.957116 2.930966 14.808019 2.930967 21.568645 0 40.839493-18.127057 40.839493-42.371358V43.525362C1021.195415 19.270849 1002.047116 1.143792 980.34571 1.143792zM296.153987 831.250663c-33.833769 0-61.274559-27.308028-61.274558-61.009035 0-14.297397 4.983664-27.951411 14.042086-38.807221l108.374269 43.525362c-2.553107 31.403211-28.972654 56.290895-61.141797 56.290894z m633.12959 74.550713L263.984844 638.501326l-16.462431-6.638077H91.915671V391.626129h155.606742l16.462431-6.638077 665.298733-267.30005v788.113374z m0 0"
                  fill="#52c41a"
                  p-id="6236"></path>
              </svg>
              相关场景
            </div>
          }
          onClick={showDrawer}
        />

        {/* 场景列表 */}
        <div className="space-y-1.5 flex-1 overflow-y-auto">
          {data.slice(0, 3).map((item, index) => (
            <Card
              key={index}
              className="[&_.ant-card-body]:!p-2 !bg-[gb(248, 248, 248)] border !border-[#e9e9e9]">
              <div className="flex flex-col gap-0.5">
                <h3 className="text-base font-medium  mb-1 text-[#222222] line-clamp-2">
                  {item.title}
                </h3>
                <span className="text-sm text-[#383838] line-clamp-2">
                  {item.description}
                </span>
                <p className="text-[#828282] text-xs truncate">
                  {item.demander}
                </p>
                <p className="flex items-center gap-1.5">
                  <span className="inline-block text-[#003AD4] bg-[#003ad430] h-5 leading-5 mt-1 text-xs rounded-full px-2.5">
                    技术应用
                  </span>
                  <span className="inline-block text-[#00BF68] bg-[#00bf6830] h-5 leading-5 mt-1 text-xs rounded-full px-2.5">
                    制造业
                  </span>
                </p>
              </div>
            </Card>
          ))}
        </div>
      </div>

      {/* 抽屉 */}
      <Drawer
        title="相关场景"
        closable={{ "aria-label": "Close Button" }}
        onClose={onClose}
        open={open}
        width="33.33%">
        <div className="grid grid-cols-1 gap-3 overflow-y-auto">
          {data.slice(0, 3).map((item, index) => (
            <Card
              key={index}
              hoverable
              className="[&_.ant-card-body]:!p-2 !bg-[gb(248, 248, 248)] border !border-[#e9e9e9]">
              <div className="flex flex-col gap-0.5">
                <h3 className="text-base font-medium  mb-1 text-[#222222]">
                  {item.title}
                </h3>
                <span className="text-sm text-[#383838]">
                  {item.description}
                </span>
                <p className="text-[#828282] text-xs">{item.demander}</p>
                <p className="flex items-center gap-1.5">
                  <span className="inline-block text-[#003AD4] bg-[#003ad430] h-5 leading-5 mt-1 text-xs rounded-full px-2.5">
                    技术应用
                  </span>
                  <span className="inline-block text-[#00BF68] bg-[#00bf6830] h-5 leading-5 mt-1 text-xs rounded-full px-2.5">
                    制造业
                  </span>
                </p>
              </div>
            </Card>
          ))}
        </div>
      </Drawer>
    </Card>
  )
}