web/apps/web-baicai/src/views/form/design/index.vue

<script lang="ts" setup>
import type { Ref } from 'vue';

import type { IFormConfig, IFormDesignMethods, IVFormComponent } from './types';

import { onMounted, provide, ref } from 'vue';

import { Card, Tabs } from 'ant-design-vue';

import ControlConfig from './components/control-config.vue';
import FormConfig from './components/form-config.vue';
import FormEdit from './components/form/index.vue';
import Widget from './components/widget/index.vue';

defineOptions({
  name: 'FormDesign',
});

const formConfig = ref<IFormConfig>({
  config: {
    wrapperClass: 'grid-cols-1',
    showDefaultActions: false,
    commonConfig: {
      labelWidth: 100,
    },
  },
  schemas: [],
  selectSchema: { component: '' } as IVFormComponent,
});

const setSelectSchema = (schema: IVFormComponent) => {
  formConfig.value.selectSchema = schema as any;
};

provide<Ref<IFormConfig>>('formConfig', formConfig as any);

provide<IFormDesignMethods>('formDesignMethods', {
  setSelectSchema,
});

onMounted(async () => {});
</script>
<template>
  <div class="flex h-full w-full">
    <div class="w-[300px]">
      <Widget />
    </div>
    <div class="h-full flex-1 pl-2 pr-2">
      <Card title="设计区域" class="h-full w-full">
        <FormEdit />
      </Card>
    </div>
    <div class="w-[300px]">
      <Tabs>
        <Tabs.TabPane key="1" tab="组件属性">
          <ControlConfig />
        </Tabs.TabPane>
        <Tabs.TabPane key="2" tab="表单属性">
          <FormConfig v-model:config="formConfig.config" />
        </Tabs.TabPane>
      </Tabs>
    </div>
  </div>
</template>