antshop/backend/web/src/custom-menu/Editor.js

import React, { createContext, useContext } from 'react'
import { Form, Input, Radio, Select } from "antd";
import styled from "styled-components";
import { produce } from "immer";

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;

const { customPageList } = window;

const MenuContext = createContext();
const MenuContextProvider = MenuContext.Provider;

function InputItem({ label, name }) {
  const { activeMenu, formItemLayout, onChange } = useContext(MenuContext);
  const rawValue = activeMenu.content.value;
  const value = name ? (rawValue ? rawValue[name] : '') : rawValue;

  function handleChange(e) {
    const newValue = e.target.value;
    onChange(name ? {
      ...rawValue,
      [name]: newValue
    } : newValue);
  }

  return (
    <FormItem label={label}  {...formItemLayout}>
      <Input
        value={value}
        placeholder={'请输入' + label}
        onChange={handleChange}
      />
    </FormItem>
  )
}

export default function Editor({ activeMenu, onChange }) {
  function changeType(e) {
    onChange('content', produce(activeMenu.content, draft => {
      draft.type = e.target.value;
      draft.value = null;
    }))
  }

  function changeValue(newValue) {
    onChange('content', {
      type: activeMenu.content.type,
      value: newValue
    })
  }

  const formItemLayout = {
    labelCol: {span: 10},
    wrapperCol: {span: 14},
  };

  const typeTable = {
    view: {
      label: '跳转网页',
      content: <InputItem label='网页链接' />
    },
    customPage: {
      label: '自定义页面',
      content: (
        <FormItem label='自定义页面' {...formItemLayout}>
          <Select defaultValue={activeMenu.content.value} onChange={changeValue}>
            {customPageList.map(({id, title}) => <Option key={id} value={id.toString()}>{title}</Option>)}
          </Select>
        </FormItem>
      )
    },
    miniprogram: {
      label: '跳转小程序',
      content: (
        <>
          <InputItem label='小程序 AppId' name='appId' />
          <InputItem label='小程序页面链接' name='url' />
          <InputItem label='备用网页链接' name='spareWebUrl' />
        </>
      )
    }
  };

  return (
    <Root>
      <Form>
        <FormItem label='菜单名称' {...formItemLayout}>
          <Input
            value={activeMenu.title}
            onInput={e => onChange('title', e.target.value)}
          />
        </FormItem>
        {(!activeMenu.children || activeMenu.children.length === 0) && (
          <ContentValue>
            <FormItem label='菜单内容' {...formItemLayout}>
              <RadioGroup value={activeMenu.content.type} onChange={changeType}>
                {Object.keys(typeTable).map(name => (
                  <Radio key={name} value={name}>{typeTable[name].label}</Radio>
                ))}
              </RadioGroup>
            </FormItem>
            {activeMenu.content.type && (
              <MenuContextProvider value={{ activeMenu, onChange: changeValue, formItemLayout }}>
                {typeTable[activeMenu.content.type].content}
              </MenuContextProvider>
            )}
          </ContentValue>
        )}
      </Form>
    </Root>
  )
}

const Root = styled.div`
  margin-left: 20px;
  padding: 20px;
  background: #fff;
`;

const ContentValue = styled.div`
  
`;