Add Screen Component

MfXxx/
├── index.vue            # 组件展示逻辑
├── MfXxxConfig.vue      # 样式/配置面板（可选）
├── MfXxxDataConfig.vue  # 数据配置面板（可选）
└── mfXxx.data.ts        # 组件数据定义（必须）

MfXxx = "MfXxx",

<!--
 @description: [组件描述]
 @author: mfish
 @date: [日期]
-->
<template>
  <div :style="containerStyle" v-on="commonEvents">
    <!-- 组件内容 -->
  </div>
</template>
<script setup lang="ts">
  import { PropType } from "vue";
  import { Chart, ChartContain } from "../../../common/Constants.ts";
  import { useChartEventHandle } from "../../../common/ChartEventUtils.ts";

  defineOptions({ name: "MfXxx" });
  const props = defineProps({
    chart: { type: Object as PropType<Chart>, required: true },
    chartContain: { type: Object as PropType<ChartContain>, required: true }
  });
  const { commonEvents } = useChartEventHandle(props.chart);
</script>
<style scoped lang="less"></style>

<!--
 @description: [组件]配置
 @author: mfish
 @date: [日期]
-->
<template>
  <StyleConfig :class="prefixCls">
    <slot></slot>
    <!-- 配置项 -->
  </StyleConfig>
</template>
<script setup lang="ts">
  import { useDesign } from "@mfish/core/hooks";
  import { useScreenEditStore } from "@nocode/stores";
  import StyleConfig from "../../../frame/FrameConfig/BaseConfig/StyleConfig.vue";

  const screenEditStore = useScreenEditStore();
  const { prefixCls } = useDesign("xxx-config");
</script>
<style scoped lang="less">
  @prefix-cls: ~"@{namespace}-xxx-config";
  @import "../../../common/index";
</style>

import { MfishColorPicker } from "../../../../common";

<!-- 仅单色 -->
<MfishColorPicker
  placeholder="设置背景色，格式#FFFFFF"
  :type="1"
  :value="bgColor"
  @confirm-change="bgColorChange"
  @input-change="bgColorChange"
/>

<!-- 支持单色和渐变色 -->
<MfishColorPicker
  placeholder="设置颜色，格式#FFFFFF"
  :value="color"
  @confirm-change="colorChange"
  @input-change="colorChange"
/>

function bgColorChange(val: string) {
  bgColor.value = val;
  updateOption("bgColor", val);
}

<template>
  <StyleConfig :class="prefixCls">
    <div class="title">
      背景色
      <div>
        <MfishColorPicker
          placeholder="设置背景色，格式#FFFFFF"
          :type="1"
          :value="bgColor"
          @confirm-change="bgColorChange"
          @input-change="bgColorChange"
        />
      </div>
    </div>
  </StyleConfig>
</template>
<script setup lang="ts">
  import { ref, watch } from "vue";
  import { useDesign } from "@mfish/core/hooks";
  import { useScreenEditStore } from "@nocode/stores";
  import StyleConfig from "../../../frame/FrameConfig/BaseConfig/StyleConfig.vue";
  import { MfishColorPicker } from "../../../../common";

  const screenEditStore = useScreenEditStore();
  const { prefixCls } = useDesign("xxx-config");
  const bgColor = ref("");

  watch(
    () => screenEditStore.getCurConfigComponent,
    (val) => {
      if (!val) return;
      const options = val.chart.options || {};
      bgColor.value = options.bgColor || "";
    },
    { immediate: true }
  );

  function updateOption(key: string, value: any) {
    screenEditStore.getCurConfigComponent.chart.options[key] = value;
  }

  function bgColorChange(val: string) {
    bgColor.value = val;
    updateOption("bgColor", val);
  }
</script>

defaultData: [
  { key: "", title: "", link: "" }
]

{
  key: { colName: "key", dataType: "string", rename: "Image key/url" },
  title: { colName: "title", dataType: "string", rename: "Image title" },
  link: { colName: "link", dataType: "string", rename: "Link" }
}

import { createAsyncComponent } from "@mfish/core/utils/factory/CreateAsyncComponent";
import { cloneDeep } from "lodash-es";
import { Chart, MfComponent } from "../../../common/Constants.ts";
import { comConfigDisplay, ComponentData, ComType, DisplayConfig } from "../ComUtils.ts";
import { shallowRef } from "vue";

/**
 * @description: [组件描述]
 * @author: mfish
 * @date: [日期]
 */
function mfXxxCreate(chart: MfComponent) {
  chart.chart.data.dataSet = cloneDeep(mfXxxData.defaultData);
  chart.chart.data.headers = mfXxxData.defaultHeaders && mfXxxData.defaultHeaders();
  chart.chart.data.limit = 1;
  chart.chart.data.maxLimit = 1;
  chart.chartContain.dropInfo.width = 200;   // 初始宽度（像素）
  chart.chartContain.dropInfo.height = 100;  // 初始高度（像素）
  return chart;
}

const getConfig = () => {
  const config = cloneDeep(comConfigDisplay) as DisplayConfig;
  // 不需要数据配置时：config.data.show = false;
  config.style.payload.component = shallowRef(
    createAsyncComponent(() => import("./MfXxxConfig.vue"), {
      loading: true,
      size: "large"
    })
  );
  // 有数据配置时：
  // config.data.payload.component = shallowRef(
  //   createAsyncComponent(() => import("./MfXxxDataConfig.vue"), { loading: true, size: "large" })
  // );
  return config;
};

const mfXxxData: ComponentData = {
  type: ComType.MfXxx,
  component: createAsyncComponent(() => import("./index.vue"), { loading: true }),
  create: mfXxxCreate,
  config: getConfig(),
  defaultData: { /* 静态默认数据 */ },
  defaultHeaders: () => {
    return cloneDeep({
      fieldName: { colName: "fieldName", dataType: "string", rename: "字段名" }
    });
  },
  initData: (chart: Chart, data?: any) => {
    // 处理动态数据加载逻辑，静态组件直接留空 () => {}
  },
  // 可选：自定义事件
  customEvents: [{ name: "事件名", value: "eventKey" }]
};

export default mfXxxData;

const { commonEvents, emitEvent } = useChartEventHandle(props.chart, undefined, ["eventKey"]);

const { commonEvents, emitEvent } = useChartEventHandle(props.chart, undefined, ["cardChange", "cardClick"]);

function eventHandler(payload: any) {
  emitEvent("eventKey", payload);
}

import { getChartData } from "../../../common/ScreenUtils.ts";

function getItemData(index: number) {
  const data = getChartData(props.chart);
  return data?.length > index ? data[index] : props.chart.data?.dataSet?.[index];
}

function itemClick(index: number) {
  emitEvent("itemClick", getItemData(index));
}

customEvents: [
  { name: "事件显示名称", value: "eventKey" }
]

export { default as MfXxx } from "../../charts/coms/MfXxx/index.vue";

- [ ] Step 1: ComUtils.ts 枚举中添加 MfXxx = "MfXxx"
- [ ] Step 2: 创建 MfXxx/index.vue
- [ ] Step 3: 创建 MfXxx/MfXxxConfig.vue（如有样式配置）
- [ ] Step 4: 创建 MfXxx/MfXxxDataConfig.vue（如有数据配置）
- [ ] Step 5: 创建 MfXxx/mfXxx.data.ts
- [ ] Step 6: index.ts 添加导出（如需全局引用）
- [ ] 验证：ComType.MfXxx 枚举值与 mfXxx.data.ts 中 type 一致
- [ ] 验证：组件 defineOptions.name 与目录名一致
- [ ] 验证：如果只是普通组件，是否已避免无意义修改 `charts/coms/index.ts`
- [ ] 验证：动态组件的 `initData` 是否真的按 `result.list` 做了字段映射
- [ ] 验证：图片类组件是否兼容 fileKey 和外部 URL
- [ ] 验证：新增文件是否为 UTF-8 without BOM