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

<template>
  <div class="configurator">
    <!-- 页面设置 -->
    <Tabs v-if="projectStore.selectedElementKeys.length === 0" centered>
      <TabPane key="1" tab="页面">
        <div class="config-content">
          <PageConfig />
        </div>
      </TabPane>
    </Tabs>

    <!-- 组件设置 -->
    <Tabs centered v-else>
      <TabPane key="1" tab="内容">
        <div class="config-content">
          <component
            :is="configComponent"
            @change="handleContentConfigChange"
            v-bind="currentElementProps"
          />
        </div>
      </TabPane>
      <TabPane key="2" tab="事件">
        <div class="config-content">事件处理</div>
      </TabPane>
      <TabPane key="3" tab="动画">
        <div class="config-content">动画处理</div>
      </TabPane>
      <TabPane key="4" tab="组件">
        <div class="config-content">
          <CusForm :columns="formItems" @change="handleComponentConfigChange" />
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>

<script setup lang="ts">
import { shallowRef, watch } from "vue";
import { Tabs, TabPane } from "ant-design-vue";
import { useProjectStore } from "@/store/modules/project";
import PageConfig from "./PageConfig.vue";
import { asyncComponentAll, CusForm } from "shalu-dashboard-ui";
import { set, defaultsDeep, cloneDeep } from "lodash";
import { useComponentConfig } from "./useComponentConfig";

const projectStore = useProjectStore();
const configComponent = shallowRef<null | string>(null);
const currentElementProps = shallowRef<any>({});
const { formItems } = useComponentConfig();

watch(
  () => projectStore.currentSelectedElements,
  async (val) => {
    if (val.length === 1) {
      const { Config } = await asyncComponentAll[
        val[0].componentType as keyof typeof asyncComponentAll
      ]?.();
      configComponent.value = Config;
      currentElementProps.value = val[0].props;
    } else {
      configComponent.value = null;
      currentElementProps.value = {};
    }
  },
  { immediate: true, deep: true }
);

// 组件内容配置
const handleContentConfigChange = (config: any) => {
  const key = projectStore.selectedElementKeys[0];
  projectStore.updateElement(key, "props", config);
};

// 组件配置
const handleComponentConfigChange = (config: Record<string, any>) => {
  const container: Record<string, any> = {};
  const currentContainer = cloneDeep(
    projectStore.currentSelectedElements[0].container
  );
  Object.entries(config).forEach(([key, value]) => {
    set(container, key, value);
  });
  defaultsDeep(container, currentContainer);
  const key = projectStore.selectedElementKeys[0];
  console.log(container);
  projectStore.updateElement(key, "container", container);
  projectStore.updateElement(key, "name", container?.name);
};
</script>

<style lang="less" scoped>
.configurator {
  width: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
  :deep(.ant-tabs) {
    flex: 1;
    overflow-y: scroll;
  }
  :deep(.ant-tabs-nav) {
    margin-bottom: 0;
  }
  :deep(.ant-tabs-content-holder) {
    background-color: @bg-color;
    padding-top: 12px;
  }
  :deep(.ant-tabs-content) {
    background-color: @bg-color;
  }
  .config-content {
    padding: 12px;
    padding-top: 0;
  }
}
</style>