biliup/app/ui/OverrideModal.tsx

import {
  Form,
  Modal,
  Notification,
  Collapse,
  Select,
  Avatar,
} from '@douyinfe/semi-ui'
import { FormApi } from '@douyinfe/semi-ui/lib/es/form'
import React, { useRef } from 'react'
import { useState } from 'react'
import { LiveStreamerEntity } from '../lib/api-streamer'
import { SupportedPlatforms } from '@/app/ui/plugins'
import { useBiliUsers } from '../lib/use-streamers'
import { FileSizeField } from './FileSizeInput'

type PluginProps = {
  entity?: LiveStreamerEntity
  list?: { value: number; label: React.ReactNode }[]
  initValues?: any
}

type TemplateModalProps = {
  visible?: boolean
  entity?: LiveStreamerEntity
  children?: React.ReactNode
  onOk: (e: any) => Promise<void>
}

const removeCircularReferences = (obj: any, seen = new WeakSet()): any => {
  // 处理 null 或非对象类型
  if (obj === null || typeof obj !== 'object') return obj

  // 检测循环引用
  if (seen.has(obj)) return '[Circular Reference]'
  seen.add(obj)

  if (Array.isArray(obj)) {
    return obj.map((item: any) => removeCircularReferences(item, seen))
  }

  const result: Record<string, any> = {}
  for (const [key, value] of Object.entries(obj)) {
    // 跳过 React 相关的属性
    if (key === '_context' || key === 'Provider' || key === 'Consumer') continue
    result[key] = removeCircularReferences(value, seen)
  }
  return result
}

type PlatformPattern = keyof typeof SupportedPlatforms

/** 按直播间地址找到对应平台插件在 SupportedPlatforms 里的键;没匹配到返回 undefined */
const matchPlatformPattern = (url?: string): PlatformPattern | undefined =>
  (Object.keys(SupportedPlatforms) as PlatformPattern[]).find(pattern => url?.match(new RegExp(pattern)))

const OverrideModal: React.FC<TemplateModalProps> = ({ children, entity, onOk }) => {
  const [isOpen, setOpen] = useState(false)

  const toggle = () => {
    setOpen(!isOpen)
  }

  // 平台插件组件从模块级常量表里按键取出,渲染间始终是同一个引用,不会因为重渲染而重置内部状态
  const platformPattern = matchPlatformPattern(entity?.url)
  const PlatformPlugin = platformPattern
    ? (SupportedPlatforms[platformPattern] as React.ComponentType<PluginProps>)
    : null

  const api = useRef<FormApi>(undefined)

  const { biliUsers } = useBiliUsers()
  const list = biliUsers?.map(item => {
    return {
      value: item.value,
      label: (
        <>
          <Avatar size="extra-small" src={item.face} />
          <span style={{ marginLeft: 8 }}>{item.name}</span>
        </>
      ),
    }
  })

  const [visible, setVisible] = useState(false)
  const showDialog = () => {
    setVisible(true)
  }
  const handleOk = async () => {
    let values = await api.current?.validate()
    // 从 LiveStreamerEntity 接口定义中获取所有字段
    const entityFields = new Set([
      'id',
      'url',
      'remark',
      'filename',
      'filename_prefix',
      'split_time',
      'split_size',
      'upload_id',
      'upload_streamers_id',
      'status',
      'format',
      'time_range',
      'excluded_keywords',
      'preprocessor',
      'segment_processor',
      'downloaded_processor',
      'postprocessor',
      'opt_args',
      'override',
    ])

    if (values) {
      // 处理 override_text
      if (values.override_text) {
        try {
          values.override = JSON.parse(values.override_text)
          delete values.override_text
        } catch (e) {
          Notification.error({
            title: '错误',
            content: '配置格式不正确，请检查 JSON 格式',
          })
          return
        }
      }

      const overrideConfig = { ...(values.override || {}) }
      Object.keys(values).forEach(key => {
        if (!entityFields.has(key)) {
          if (values[key] !== undefined) {
            overrideConfig[key] = values[key] === '' ? null : values[key]
          }
          delete values[key]
        }
      })
      values.override = overrideConfig

      // PUT /v1/streamers 会按整行覆盖。漏掉 upload_streamers_id 会被写成 NULL，
      // 之后录像走默认 rm 且不再投稿。以当前行打底，再叠表单字段。
      const payload = {
        ...entity,
        ...values,
        override: overrideConfig,
        upload_streamers_id:
          values.upload_streamers_id ?? entity?.upload_streamers_id ?? null,
      }

      // 处理循环引用
      const cleanValues = removeCircularReferences(payload)
      await onOk(cleanValues)
      setVisible(false)
      return
    }
    setVisible(false)
  }
  const handleCancel = () => {
    setVisible(false)
  }

  const childrenWithProps = React.Children.map(children, child => {
    if (React.isValidElement<{ onClick?: () => void }>(child)) {
      return React.cloneElement(child, {
        onClick: () => {
          showDialog()
          child.props.onClick?.()
        },
      })
    }
  })

  const downloadSettings = (
    <Collapse.Panel header="下载设置" itemKey="download">
      <div style={{ marginBottom: 12 }}>
        请到
        <a href="/dashboard" style={{ textDecoration: 'none', color: 'var(--semi-color-primary)' }}>
          空间配置
        </a>
        查看选项说明
      </div>
      <Form.Select
        label="下载插件（downloader）"
        field="downloader"
        placeholder="mesio（默认）"
        style={{ width: '100%' }}
        fieldStyle={{
          alignSelf: 'stretch',
          padding: 0,
        }}
        showClear={true}
      >
        <Select.Option value="streamlink">streamlink（hls多线程下载）</Select.Option>
        <Select.Option value="ffmpeg">ffmpeg</Select.Option>
        <Select.Option value="stream-gears">stream-gears</Select.Option>
        <Select.Option value="sync-downloader">sync-downloader（边录边传）</Select.Option>
        <Select.Option value="mesio">mesio（默认）</Select.Option>
      </Form.Select>

      <FileSizeField
        label="视频分段大小（file_size）"
        field="file_size"
        extraText="按 1024 进制：1 GB = 1024 MB。没填过的留空即跟随全局设置；把已有的值清空，则这个主播不按大小分段（边录边传仍约 2 GB 一段）。"
        fieldStyle={{
          alignSelf: 'stretch',
          padding: 0,
        }}
      />

      <Form.Input
        field="segment_time"
        label="视频分段时长（segment_time）"
        placeholder="01:00:00"
        style={{ width: '100%' }}
        fieldStyle={{
          alignSelf: 'stretch',
          padding: 0,
        }}
        showClear={true}
        rules={[
          {
            pattern: /^[^：]*$/,
            message: '请使用英文冒号',
          },
          {
            pattern: /^[0-9:]*$/,
            message: '只接受数字和英文冒号',
          },
          {
            pattern: /^$|^[0-9]{2,4}:[0-5][0-9]:[0-5][0-9]$/,
            message: '分或秒不符合规范',
          },
        ]}
        stopValidateWithError={true}
      />

      <Form.InputNumber
        field="filtering_threshold"
        label="碎片过滤（filtering_threshold）"
        suffix={'MB'}
        style={{ width: '100%' }}
        fieldStyle={{
          alignSelf: 'stretch',
          padding: 0,
        }}
        showClear={true}
      />
    </Collapse.Panel>
  )

  return (
    <>
      {childrenWithProps}
      <Modal
        title="配置覆写"
        visible={visible}
        onOk={handleOk}
        style={{ width: 'min(600px, 90vw)' }}
        onCancel={handleCancel}
        bodyStyle={{
          overflow: 'auto',
          maxHeight: 'calc(100vh - 320px)',
          paddingLeft: 10,
          paddingRight: 10,
        }}
      >
        <Form initValues={entity} getFormApi={formApi => (api.current = formApi)}>
          <Form.TextArea
            field="override_text"
            label="配置覆写"
            placeholder="请输入 JSON 格式的配置"
            style={{ marginBottom: 12 }}
            initValue={entity?.override ? JSON.stringify(entity.override, null, 2) : ''}
            rules={[
              { required: false },
              {
                validator: (rule, value) => {
                  if (!value) return true
                  try {
                    JSON.parse(value)
                    return true
                  } catch (e) {
                    return false
                  }
                },
                message: '请输入有效的 JSON 格式',
              },
            ]}
          />
          <Form.Section>
            <Collapse defaultActiveKey={['plugin']}>
              {downloadSettings}
              {PlatformPlugin ? (
                <PlatformPlugin entity={entity} list={list} initValues={entity?.override} />
              ) : null}
            </Collapse>
          </Form.Section>
        </Form>
      </Modal>
    </>
  )
}

export default OverrideModal