NapCatQQ/napcat.webui/src/components/onebot/api/display_struct.tsx

import { Chip } from '@heroui/chip';
import { Tooltip } from '@heroui/tooltip';
import { motion } from 'motion/react';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { TbSquareRoundedChevronRightFilled } from 'react-icons/tb';

import type { LiteralValue, ParsedSchema } from '@/utils/zod';

interface DisplayStructProps {
  schema: ParsedSchema | ParsedSchema[]
}

const SchemaType = ({
  type,
  value,
}: {
  type: string
  value?: LiteralValue
}) => {
  let name = type;
  switch (type) {
    case 'union':
      name = '联合类型';
      break;
    case 'value':
      name = '固定值';
      break;
  }
  let chipColor: 'primary' | 'success' | 'primary' | 'warning' | 'secondary' =
    'primary';
  switch (type) {
    case 'enum':
      chipColor = 'warning';
      break;
    case 'union':
      chipColor = 'secondary';
      break;
    case 'array':
      chipColor = 'primary';
      break;
    case 'object':
      chipColor = 'success';
      break;
  }

  return (
    <Chip size='sm' color={chipColor} variant='flat'>
      {name}
      {type === 'value' && (
        <span className='px-1 rounded-full bg-primary-400 text-white ml-1'>
          {value}
        </span>
      )}
    </Chip>
  );
};

const SchemaLabel: React.FC<{
  schema: ParsedSchema
}> = ({ schema }) => (
  <>
    {Array.isArray(schema.type)
      ? (
        schema.type.map((type) => (
          <SchemaType key={type} type={type} value={schema?.value} />
        ))
      )
      : (
        <SchemaType type={schema.type} value={schema?.value} />
      )}
    {schema.optional && (
      <Chip size='sm' color='default' variant='flat'>
        可选
      </Chip>
    )}
    {schema.description && (
      <span className='text-xs text-default-400'>{schema.description}</span>
    )}
  </>
);

const SchemaContainer: React.FC<{
  schema: ParsedSchema
  children: React.ReactNode
}> = ({ schema, children }) => {
  const [expanded, setExpanded] = useState(false);

  const toggleExpand = () => setExpanded(!expanded);

  return (
    <div className='mb-2'>
      <div
        onClick={toggleExpand}
        className='md:cursor-pointer flex items-center gap-1'
      >
        <motion.div
          initial={{ rotate: 0 }}
          animate={{ rotate: expanded ? 90 : 0 }}
        >
          <TbSquareRoundedChevronRightFilled />
        </motion.div>
        <Tooltip content='点击复制' placement='top' showArrow>
          <span
            className='border-b border-transparent border-dashed hover:border-primary-400'
            onClick={(e) => {
              e.stopPropagation();
              navigator.clipboard.writeText(schema.name || '');
              toast.success('已复制');
            }}
          >
            {schema.name}
          </span>
        </Tooltip>
        <SchemaLabel schema={schema} />
      </div>
      <motion.div
        className='ml-5 overflow-hidden'
        initial={{ opacity: 0, height: 0 }}
        animate={{ opacity: expanded ? 1 : 0, height: expanded ? 'auto' : 0 }}
      >
        <div className='h-2' />
        {children}
      </motion.div>
    </div>
  );
};

const RenderSchema: React.FC<{ schema: ParsedSchema }> = ({ schema }) => {
  if (schema.type === 'object') {
    return (
      <SchemaContainer schema={schema}>
        {schema.children && schema.children.length > 0
          ? (
            schema.children.map((child, i) => (
              <RenderSchema key={child.name || i} schema={child} />
            ))
          )
          : (
            <div>{'{}'}</div>
          )}
      </SchemaContainer>
    );
  }

  if (schema.type === 'array' || schema.type === 'union') {
    return (
      <SchemaContainer schema={schema}>
        {schema.children?.map((child, i) => (
          <RenderSchema key={child.name || i} schema={child} />
        ))}
      </SchemaContainer>
    );
  }

  if (schema.type === 'enum' && Array.isArray(schema.enum)) {
    return (
      <SchemaContainer schema={schema}>
        <div className='flex gap-1 items-center'>
          {schema.enum?.map((value, i) => (
            <Chip
              key={value?.toString() || i}
              size='sm'
              variant='flat'
              color='success'
            >
              {value?.toString()}
            </Chip>
          ))}
        </div>
      </SchemaContainer>
    );
  }

  return (
    <div className='mb-2 flex items-center gap-1 pl-5'>
      <Tooltip content='点击复制' placement='top' showArrow>
        <span
          className='border-b border-transparent border-dashed hover:border-primary-400 md:cursor-pointer'
          onClick={(e) => {
            e.stopPropagation();
            navigator.clipboard.writeText(schema.name || '');
            toast.success('已复制');
          }}
        >
          {schema.name}
        </span>
      </Tooltip>
      <SchemaLabel schema={schema} />
    </div>
  );
};

const DisplayStruct: React.FC<DisplayStructProps> = ({ schema }) => {
  return (
    <div className='p-4 bg-content2 rounded-lg bg-opacity-50'>
      {Array.isArray(schema)
        ? (
          schema.map((s, i) => <RenderSchema key={s.name || i} schema={s} />)
        )
        : (
          <RenderSchema schema={schema} />
        )}
    </div>
  );
};

export default DisplayStruct;