【实战】从零开始打造一个低代码平台——9、组件编辑（中）

前言

此前我们已经支持了拖放组件，但它们仍然无法被更改。通过全局状态管理，现在我们可以实现组件的编辑功能。在本章中，我们将在右侧面板中显示组件的属性，并允许用户更改组件的位置、外观等。

1. 更新组件

在上一章中，我们实现了一个接口addWidget，用于向WidgetStore中添加一个组件。下一步，我们将实现另一个用于更新组件的接口。

复制
import {
   
    create } from 'zustand';
import {
   
    immer } from 'zustand/middleware/immer';
import {
   
    Scr } from '../types/widget';
import {
   
    createScr } from '../utils/widget';
import {
   
    Widget } from '../types/widget';

export interface WidgetState {
   
   
    scrs: Scr[];
    currScrId?: string;
    currWidgetId?: string;
}

export interface WidgetActions {
   
   
    init: () => void;
    addScr: (scr: Scr) => void;
    removeScr: (scrId: string) => void;
    setCurrScrId: (scrId: string) => void;
    setCurrWidgetId: (wId: string) => void;
    addWidget: (widget: Widget) => void;
    updateWidget: (data: Partial<Widget>) => void;
}

export const useWidgetStore = create(
    immer<WidgetState & WidgetActions>((set) => ({
   
   
        scrs: [],
        init: () => {
   
   
            set((state) => {
   
   
                state.scrs = [createScr()];
                state.currScrId = state.scrs[0].id;
            });
        },
        addScr: (scr: Scr) => {
   
   
            set((state) => {
   
   
                state.scrs = [...state.scrs, scr];
            });
        },
        removeScr: