ant design pro 如何去保存颜色

上图

就是实现这样的效果

后端是这样的，这个颜色肯定是存到字符串里的

这是第一步

import mongoose, { Schema, Document } from 'mongoose';

interface IDiscountCard extends Document {
  title: string;
  subtitle: string;
  image: string;
  shopUrl: string;
  bgColor: string;
}

const DiscountCardSchema: Schema = new Schema({
  title: { type: String, required: true },
  subtitle: { type: String, required: true },
  image: { type: String, required: true },
  shopUrl: { type: String, required: true },
  bgColor: { type: String, required: true },
}, { timestamps: true });

const DiscountCard = mongoose.model<IDiscountCard>('DiscountCard', DiscountCardSchema);

export default DiscountCard;

 <ProFormColorPicker
          name="bgColor"
          initialValue={bgColor}
          label={intl.formatMessage({ id: 'background.color' })}
          rules={[
            { required: true, message: intl.formatMessage({ id: 'background.color.required' }) },
          ]}
          fieldProps={{
            onChange: (color: any) => {
              console.log('Color changed:', color.toHexString());
              setBgColor(color.toHexString());
            },
          }}
        />

import { useIntl } from '@umijs/max';
import { ModalForm } from '@ant-design/pro-components';
import BasicForm from './BasicForm';
import { useState } from 'react';
import extractPathFromUrl from '@/utils/extractPathFromUrl';
import { message } from 'antd';

interface Props {
  open: boolean;
  onOpenChange: (visible: boolean) => void;
  onFinish: (formData: any) => Promise<void>;
}

const Create: React.FC<Props> = (props) => {
  const intl = useIntl();
  const { open, onOpenChange, onFinish } = props;
  const [imageUrl, setImageUrl] = useState<string | undefined>('');
  const [bgColor, setBgColor] = useState<string>('#ffffff');
  return (
    <ModalForm
      title={intl.formatMessage({ id: 'pages.searchTable.new' })}
      width="50%"
      open={open}
      onOpenChange={onOpenChange}
      modalProps={{
        destroyOnClose: true,
        maskClosable: false,
      }}
      onFinish={async (values) => {
        // 确保在提交前已经上传了图片和资源
        if (!imageUrl) {
          message.error(intl.formatMessage({ id: 'message.error.imageUpload' }));
          return;
        }
        // 将图片和资源URL添加到表单数据中
        await onFinish({
          ...values,
          image: extractPathFromUrl(imageUrl),
          bgColor,
        });
      }}
    >
      <BasicForm setImageUrl={setImageUrl} setBgColor={setBgColor} newRecord />
    </ModalForm>
  );
};

export default Create;

import { useIntl } from '@umijs/max';
import React, { useEffect, useState } from 'react';
import BasicForm from './BasicForm';
import { ModalForm } from '@ant-design/pro-components';
import { Form, Input } from 'antd';
import extractPathFromUrl from '@/utils/extractPathFromUrl';

export type FormValueType = Partial<API.ItemData>;

export type UpdateFormProps = {
  onCancel: (visible: boolean) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalOpen: boolean;
  values: {
    image?: string;
    bgColor?: string;
  } & Partial<API.ItemData>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
const intl = useIntl();
  const { updateModalOpen, onCancel, onSubmit, values } = props;
  const [imageUrl, setImageUrl] = useState<string | undefined>('');
  const [bgColor, setBgColor] = useState<string>(values.bgColor!);
  useEffect(() => {
    setImageUrl(values.image);
  }, [values]);
  return (
    <ModalForm
      title={intl.formatMessage({ id: 'pages.searchTable.change' })}
      width="50%"
      modalProps={{
        destroyOnClose: true,
        maskClosable: false,
      }}
      open={updateModalOpen}
      onOpenChange={onCancel}
      onFinish={async (values: any) => {
        onSubmit({
          ...values,
          image: extractPathFromUrl(imageUrl!),
          bgColor
        });
      }}
      initialValues={{ ...values }}
    >
      <BasicForm
        bgColor={bgColor}
        setBgColor={setBgColor}
        setImageUrl={setImageUrl}
        imageUrl={imageUrl} // 传递图片URL以显示已上传的图片
        values={values}
      />
      <Form.Item name="_id" label={false}>
        <Input type="hidden" />
      </Form.Item>
    </ModalForm>
  );
};

export default UpdateForm;