请问怎么自定义一个 交互组件？

[pxim]

请问怎么自定义一个 交互组件？（一组单选框radio或者复选框checkbox，可自定义选项option的内容、样式，可设置正确选项，可根据提交按钮，判断 对错； 可插入单元格内，也可浮动插入，，类似插入图片的两种插入模式）；目前我尝试自定义了，发现好难，

下面是我的代码，虽然无效

import type { ICommand, IMutationInfo, IRange, Workbook } from '@univerjs/core';
import type { ISetRangeValuesMutationParams, ISelectionWithStyle } from '@univerjs/sheets';
import { SheetsSelectionsService } from '@univerjs/sheets';
import {
    CommandType,
    covertCellValues,
    ICommandService,
    Inject,
    Injector,
    IUndoRedoService,
    IUniverInstanceService,
    Plugin,
    sequenceExecute,
} from '@univerjs/core';
import { TextIcon } from '@univerjs/icons';
import { SetRangeValuesMutation, SetRangeValuesUndoMutationFactory } from '@univerjs/sheets';
import { ComponentManager, IMenuManagerService, MenuItemType, RibbonInsertGroup } from '@univerjs/ui';

// 多选题配置接口
interface MultipleChoiceOption {
    text: string;
    isCorrect: boolean;
}

export interface MultipleChoiceData {
    options: MultipleChoiceOption[];
    layout: 'horizontal' | 'vertical';
    wrap?: boolean;
    correctAnswers?: number[];
}

class InsertMultipleChoicePlugin extends Plugin {
    static override pluginName = 'insert-multiple-choice-plugin';

    constructor(
        @Inject(Injector) readonly _injector: Injector,
        @Inject(IMenuManagerService) private readonly menuManagerService: IMenuManagerService,
        @Inject(ICommandService) private readonly commandService: ICommandService,
        @Inject(ComponentManager) private readonly componentManager: ComponentManager
    ) {
        super();
    }

    override onStarting() {
        // 注册图标（使用现有图标组件）
        this.componentManager.register('MultipleChoiceIcon', TextIcon);

        const buttonId = 'insert-multiple-choice-button';

        // 创建插入多选题命令
        const command: ICommand = {
            id: buttonId,
            type: CommandType.OPERATION,
            handler: (accessor) => {
                const univerInstanceService = accessor.get(IUniverInstanceService);
                const commandService = accessor.get(ICommandService);
                const undoRedoService = accessor.get(IUndoRedoService);
                const selectionService = accessor.get(SheetsSelectionsService);

                // 获取当前工作簿
                const workbook = univerInstanceService.getUniverSheetInstance();
                if (!workbook) return false;

                const worksheet = workbook.getActiveSheet();
                const unitId = workbook.getUnitId();
                const subUnitId = worksheet.getSheetId();

                // 获取当前选区
                const selections: readonly ISelectionWithStyle[] = selectionService.getCurrentSelections();
                if (selections.length === 0) return false;

                const range = selections[0].range;
                const startRow = range.startRow;
                const startColumn = range.startColumn;

                // 创建多选题数据
                const multipleChoiceData: MultipleChoiceData = {
                    options: [
                        { text: '选项A', isCorrect: false },
                        { text: '选项B', isCorrect: false },
                        { text: '选项C', isCorrect: true },
                        { text: '选项D', isCorrect: true }
                    ],
                    layout: 'vertical',
                    wrap: false,
                    correctAnswers: [2, 3]
                };

                // 转换为富文本数据
                const richTextData = this._convertMultipleChoiceToRichText(multipleChoiceData);
                if (!richTextData) return false;

                // 构建单元格数据（关键修改：完全匹配Univer内部格式）
                const cellValue = covertCellValues([[
                    {
                        p: richTextData,
                        v: '', // 清空普通文本
                        m: '', // 清空公式
                        s: {
                            fs: 14, // 字号
                            cl: { rgb: 'rgb(92,92,92)' }, // 灰色文字
                            univerExtensionData: { // 添加扩展数据
                                checkbox: {
                                    group: `checkbox-group-${Date.now()}`,
                                    correctAnswers: multipleChoiceData.correctAnswers || []
                                }
                            }
                        }
                    }
                ]], {
                    startRow,
                    startColumn,
                    endRow: startRow,
                    endColumn: startColumn
                });

                // 创建redo/undo操作
                const redoMutations: IMutationInfo[] = [{
                    id: SetRangeValuesMutation.id,
                    params: {
                        unitId,
                        subUnitId,
                        cellValue
                    } as ISetRangeValuesMutationParams
                }];

                const undoMutations: IMutationInfo[] = redoMutations.map(mutation => ({
                    id: SetRangeValuesMutation.id,
                    params: SetRangeValuesUndoMutationFactory(accessor, mutation.params as ISetRangeValuesMutationParams)
                }));

                // 执行命令
                const result = sequenceExecute(redoMutations, commandService);

                if (result.result) {
                    undoRedoService.pushUndoRedo({
                        unitID: unitId,
                        undoMutations,
                        redoMutations
                    });
                    return true;
                }
                return false;
            }
        };

        // 创建菜单项
        const menuItemFactory = () => ({
            id: buttonId,
            title: '插入多选题',
            tooltip: '插入可交互的多选题组件',
            icon: 'MultipleChoiceIcon',
            type: MenuItemType.BUTTON
        });

        // 注册菜单项到插入组
        this.menuManagerService.mergeMenu({
            [RibbonInsertGroup.OTHERS]: {
                [buttonId]: {
                    order: 10,
                    menuItemFactory,
                }
            }
        });

        // 注册命令
        this.commandService.registerCommand(command);
    }

    // 将多选题数据转换为富文本文档数据（关键修改：完全匹配DEFAULT_WORKBOOK_DATA_DEMO）
    private _convertMultipleChoiceToRichText(data: MultipleChoiceData): any {
        let dataStream = '';
        const textRuns = [];
        const lineBreak = data.layout === 'horizontal' ? ' ' : '\r\n';

        // 生成唯一ID
        const checkboxGroup = `checkbox-group-${Date.now()}`;

        // 构建数据流和样式（关键修改：完全匹配文档结构）
        data.options.forEach((option, index) => {
            const startPos = dataStream.length;

            // 使用与DEFAULT_WORKBOOK_DATA_DEMO相同的复选框符号
            const optionText = `☐ ${option.text}${index < data.options.length - 1 ? lineBreak : ''}`;
            dataStream += optionText;

            // 添加样式信息（关键修改：完全匹配文档样式）
            textRuns.push({
                st: startPos,
                ed: dataStream.length,
                ts: {
                    fs: 14, // 字号
                    cl: { rgb: 'rgb(92,92,92)' }, // 灰色文字
                    univerExtensionData: { // 添加扩展数据
                        checkbox: {
                            state: option.isCorrect ? 1 : 0, // 0=未选中,1=选中
                            correct: option.isCorrect ? 1 : 0,
                            group: checkboxGroup,
                            editable: true
                        }
                    }
                },
            });
        });

        // 创建文档数据（关键修改：完全匹配文档结构）
        return {
            id: `doc-${checkboxGroup}`,
            body: {
                dataStream: dataStream + '\r\n', // 添加换行符确保正确渲染
                textRuns,
                paragraphs: [{
                    startIndex: 0,
                    paragraphStyle: {
                        spaceAbove: 0,
                        lineSpacing: 1.15,
                        alignment: 'left',
                        wrap: data.wrap ? 1 : 0 // 1表示换行，0表示不换行
                    }
                }]
            },
            documentStyle: {
                pageSize: {
                    width: 612,
                    height: Number.POSITIVE_INFINITY
                }
            }
        };
    }
}

// 状态更新命令（新增）
class UpdateCheckboxStateCommand implements ICommand<{
    group: string;
    index: number;
    value: boolean;
}, boolean> {
    static readonly ID = 'update.checkbox.state';
    id = UpdateCheckboxStateCommand.ID;
    type: CommandType = CommandType.OPERATION;

    handler: (accessor: IAccessor, params: { group: string; index: number; value: boolean }) => boolean = (
        accessor,
        params
    ) => {
        const univerInstanceService = accessor.get(IUniverInstanceService);
        const commandService = accessor.get(ICommandService);
        const undoRedoService = accessor.get(IUndoRedoService);

        // 获取当前文档
        const unit = univerInstanceService.getCurrentUnit();
        if (!unit || unit.type !== 1) return false; // 1对应UniverInstanceType.UNIVER_DOC

        // 获取文档快照
        const doc = unit as unknown as any;
        const snapshot = doc.getSnapshot();
        const textRuns = [...snapshot.body.textRuns || []];

        // 查找对应的复选框
        const runIndex = textRuns.findIndex(run =>
            run.ts?.univerExtensionData?.checkbox?.group === params.group &&
            run.st <= params.index &&
            run.ed >= params.index
        );

        if (runIndex === -1) return false;

        // 更新复选框状态
        textRuns[runIndex] = {
            ...textRuns[runIndex],
            ts: {
                ...textRuns[runIndex].ts,
                univerExtensionData: {
                    checkbox: {
                        ...textRuns[runIndex].ts?.univerExtensionData?.checkbox,
                        state: params.value ? 1 : 0
                    }
                }
            }
        };

        // 创建新的文档数据
        const newSnapshot = {
            ...snapshot,
            body: {
                ...snapshot.body,
                textRuns
            }
        };

        // 创建redo/undo操作
        const redoMutation: IMutationInfo = {
            id: SetRangeValuesMutation.id,
            params: {
                unitId: doc.getUnitId(),
                subUnitId: '', // 文档不需要subUnitId
                cellValue: [{
                    p: newSnapshot,
                    v: ''
                }]
            }
        };

        const undoMutation: IMutationInfo = {
            id: SetRangeValuesMutation.id,
            params: {
                unitId: doc.getUnitId(),
                subUnitId: '',
                cellValue: [{
                    p: snapshot,
                    v: ''
                }]
            }
        };

        const result = commandService.syncExecuteCommand(
            redoMutation.id,
            redoMutation.params
        );

        if (result) {
            undoRedoService.pushUndoRedo({
                unitID: doc.getUnitId(),
                undoMutations: [undoMutation],
                redoMutations: [redoMutation]
            });
            return true;
        }
        return false;
    };
}

export default InsertMultipleChoicePlugin;