【架构师（第二十四篇）】编辑器开发之添加模版到画布

// 通用的默认属性类型
export interface CommonComponentProps {
  // actions
  actionType: string;
  url: string;
  // size
  height: string;
  width: string;
  paddingLeft: string;
  paddingRight: string;
  paddingTop: string;
  paddingBottom: string;
  // border type
  borderStyle: string;
  borderColor: string;
  borderWidth: string;
  borderRadius: string;
  // shadow and opacity
  boxShadow: string;
  opacity: string;
  // position and x,y
  position: string;
  top: string;
  left: string;
  right: string;
  bottom: string;
}

// l-text 组件特有默认属性类型
export interface TextComponentProps extends CommonComponentProps {
  // basic props - font styles
  text: string;
  fontSize: string;
  fontFamily: string;
  fontWeight: string;
  fontStyle: string;
  textDecoration: string;
  lineHeight: string;
  textAlign: string;
  color: string;
  backgroundColor: string;
}

// 把属性改为可选
export type PartialTextComponentProps = Partial<TextComponentProps>;

export const defaultTemplates = [
  {
    text: '大标题',
    fontSize: '30px',
    fontWeight: 'bold',
    tag: 'h2',
  },
  {
    text: '小标题',
    fontSize: '24px',
    fontWeight: 'bold',
    tag: 'h3',
  },
  {
    text: '正文内容',
    fontSize: '14px',
    tag: 'p',
  },
  {
    text: '链接内容',
    tag: 'p',
    color: '#1890ff',
  },
];

// template
  <!-- 左侧组件列表 -->
  <a-layout-sider width="300"
                  style="background:#fff">
    <div class="sidebar-container">
      组件列表
      <components-list @on-item-click="addItem"
                       :list="defaultTemplates"></components-list>
    </div>
  </a-layout-sider>
  
// script
import { PartialTextComponentProps } from '../defaultProps'
// 从组件列表添加组件到画布区域
const addItem = (props: PartialTextComponentProps) => {
  store.commit("addComponent", props)
}

// template
  <div class="create-component-list">
    <div v-for="(item, index) in list"
         @click="onItemClick(item)"
         class="component-item"
         :key="index">
      <l-text v-bind="item"></l-text>
    </div>

  </div>

// script
import LText from '../components/LText.vue'
import { defineProps, withDefaults, defineEmits } from 'vue';
import { PartialTextComponentProps } from '../defaultProps'
interface MyProps {
  list: Array<PartialTextComponentProps>;
}
// 接收 TemplatesData 数据
const props = withDefaults(defineProps<MyProps>(), {
  list: () => [],
})
console.log('🚀🚀 ~ props', props);


const emit = defineEmits<{
  (e: 'on-item-click', data: PartialTextComponentProps): void;
}>()

// 点击发射事件
const onItemClick = (data: PartialTextComponentProps) => {
  emit('on-item-click', data)
}

 mutations: {
    addComponent(state, props: PartialTextComponentProps) {
      const newComponent: ComponentData = {
        id: uuidv4(),
        name: 'l-text',
        props,
      };
      state.components.push(newComponent);
    },
  },