shalu-bigscreen-desiner/src/views/designer/component/PageConfig.vue

<template>
  <CusForm :columns="formItems" @change="handleChange"/>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { CusForm } from 'shalu-dashboard-ui';
import { useProjectStore } from '@/store/modules/project';
import { isEqual, omit } from 'lodash';

const projectStore = useProjectStore();
const formItems = computed(() => [
  {
    label: '项目名称',
    prop: 'name',
    type: 'input',
    defaultValue: projectStore.projectInfo.name
  },
  {
    label: '宽度',
    prop: 'width',
    type: 'inputNumber',
    fieldProps: {
      addonAfter: 'px',
      min: 100
    },
    defaultValue: projectStore.projectInfo.width
  },
  {
    label: '高度',
    prop: 'height',
    type: 'inputNumber',
    fieldProps: {
      addonAfter: 'px',
      min: 100
    },
    defaultValue: projectStore.projectInfo.height
  },
  {
    label: '页面背景',
    prop: 'background',
    type: 'backgroundSelect',
    defaultValue: projectStore.currentPage.background
  }
]);

const handleChange = (value: Record<string, any>) => {
  if(!isEqual(value.background, projectStore.currentPage.background)) {
    projectStore.setCurrentPageBackground(value.background);
  };
  projectStore.updateProjectInfo(omit(value, ['background']));
};

</script>

<style scoped>

</style>