@dckj-npm/dc-material 0.1.376 → 0.1.377

package/lowcode_es/teletext-list/meta.ts.bak

@@ -0,0 +1,821 @@
+import {
+  IPublicTypeComponentMetadata,
+  IPublicTypeSnippet,
+} from '@alilc/lowcode-types'
+
+const parsePxNumber = (value: any): number | undefined => {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value
+  }
+  if (typeof value === 'string') {
+    const numberLike = Number(value.trim())
+    if (Number.isFinite(numberLike)) {
+      return numberLike
+    }
+    const matched = value.match(/^\s*(\d+(?:\.\d+)?)\s*px\s*$/i)
+    if (!matched) return undefined
+    const parsed = Number(matched[1])
+    return Number.isFinite(parsed) ? parsed : undefined
+  }
+  return undefined
+}
+
+const TeletextListMeta: IPublicTypeComponentMetadata = {
+  group: '低代码组件',
+  componentName: 'TeletextList',
+  title: '图文列表',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  category: '信息展示',
+  npm: {
+    package: '@dckj-npm/dc-material',
+    version: '0.1.8',
+    exportName: 'TeletextList',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  configure: {
+    props: [
+      // ══════════════════════════════════════════════════════════
+      // 1. 内容与数据
+      // ══════════════════════════════════════════════════════════
+      {
+        title: '内容与数据',
+        type: 'group',
+        display: 'block',
+        items: [
+          {
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'type',
+                'zh-CN': '类型',
+              },
+            },
+            name: 'type',
+        description: '类型',
+        setter: {
+          componentName: 'RadioGroupSetter',
+          props: {
+            dataSource: [
+              {
+                label: '图文',
+                value: 'textAndImg',
+              },
+              {
+                label: '仅有图片',
+                value: 'imgOnly',
+              },
+              {
+                label: '仅有文字',
+                value: 'textOnly',
+              },
+            ],
+            options: [
+              {
+                label: '图文',
+                value: 'textAndImg',
+              },
+              {
+                label: '仅有图片',
+                value: 'imgOnly',
+              },
+              {
+                label: '仅有文字',
+                value: 'textOnly',
+              },
+            ],
+          },
+          initialValue: 'textAndImg',
+        },
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'imagePlacement',
+            'zh-CN': '图片位置',
+          },
+        },
+        name: 'imagePlacement',
+        description: '图片位置',
+        setter: {
+          componentName: 'RadioGroupSetter',
+          props: {
+            dataSource: [
+              {
+                label: '左',
+                value: 'left',
+              },
+              {
+                label: '右',
+                value: 'right',
+              },
+              {
+                label: '上',
+                value: 'top',
+              },
+              {
+                label: '下',
+                value: 'bottom',
+              },
+              {
+                label: '无',
+                value: 'none',
+              },
+            ],
+            options: [
+              {
+                label: '左',
+                value: 'left',
+              },
+              {
+                label: '右',
+                value: 'right',
+              },
+              {
+                label: '上',
+                value: 'top',
+              },
+              {
+                label: '下',
+                value: 'bottom',
+              },
+              {
+                label: '无',
+                value: 'none',
+              },
+            ],
+          },
+          initialValue: 'left',
+        },
+        extraProps: {
+          // 引擎已自动 setPropValue('imagePlacement', value)，无需再做任何额外写入
+          // 之前的快照-还原逻辑反而触发多余的 MobX 响应链，导致 dataList 被覆盖
+        },
+      },
+      {
+        title: '图片宽度',
+        name: 'imgWidth',
+        description: '图片宽度',
+        setter: {
+          componentName: 'NumberSetter',
+          isRequired: false,
+          initialValue: 100,
+        },
+        extraProps: {
+          /**
+           * ignoreDefaultValue: 防止布局面板修改 Image 子节点 style 后，
+           * 引擎 remount SettingFieldView 时 initDefaultValue 把 imgWidth 重置为 100。
+           * 与 dataList 同理：只要 prop 有值就永远不应被 initialValue 覆盖。
+           */
+          ignoreDefaultValue: () => true,
+          getValue: (target: any, value: any) => {
+            // 优先使用引擎传入的当前 prop 值
+            const parsed = parsePxNumber(value)
+            if (parsed !== undefined) return parsed
+            // 二级兜底：从 schema 快照读取（防止引擎传入 undefined 时丢失已保存的值）
+            const fromSchema = parsePxNumber(target?.node?.schema?.props?.imgWidth)
+            if (fromSchema !== undefined) return fromSchema
+            return 100
+          },
+        },
+      },
+      {
+        title: '图片高度',
+        name: 'imgHeight',
+        description: '图片高度',
+        setter: {
+          componentName: 'NumberSetter',
+          isRequired: false,
+          initialValue: 100,
+        },
+        extraProps: {
+          ignoreDefaultValue: () => true,
+          getValue: (target: any, value: any) => {
+            const parsed = parsePxNumber(value)
+            if (parsed !== undefined) return parsed
+            const fromSchema = parsePxNumber(target?.node?.schema?.props?.imgHeight)
+            if (fromSchema !== undefined) return fromSchema
+            return 100
+          },
+        },
+      },
+      {
+        title: '图片圆角',
+        name: 'imgBorderRadius',
+        description: '图片圆角（px）',
+        setter: {
+          componentName: 'NumberSetter',
+          isRequired: false,
+          initialValue: 0,
+          defaultValue: 0,
+          props: { min: 0 },
+        },
+      },
+      {
+        title: '标题颜色',
+        name: 'titleColor',
+        description: '标题文字颜色',
+        setter: {
+          componentName: 'ColorSetter',
+          isRequired: false,
+          initialValue: '',
+        },
+      },
+      {
+        title: '标题字体大小',
+        name: 'titleFontSize',
+        description: '标题字体大小（px）',
+        setter: {
+          componentName: 'NumberSetter',
+          isRequired: false,
+          initialValue: 14,
+          defaultValue: 14,
+          props: { min: 10, max: 60 },
+        },
+      },
+      {
+        title: '说明颜色',
+        name: 'descriptionColor',
+        description: '说明文字颜色',
+        setter: {
+          componentName: 'ColorSetter',
+          isRequired: false,
+          initialValue: '',
+        },
+      },
+      {
+        title: '说明字体大小',
+        name: 'descriptionFontSize',
+        description: '说明字体大小（px）',
+        setter: {
+          componentName: 'NumberSetter',
+          isRequired: false,
+          initialValue: 12,
+          defaultValue: 12,
+          props: { min: 10, max: 60 },
+        },
+      },
+      {
+        title: '数据源绑定',
+        name: 'dataListBind',
+        setter: {
+          componentName: 'SetterFormVariable',
+          props: {
+            attributes: [
+              {
+                label: '图文数据',
+                value: 'dataList',
+                children: [
+                  { label: '图片链接', value: 'image' },
+                  { label: '类型', value: 'itemType' },
+                  { label: '标题', value: 'title' },
+                  { label: '说明', value: 'description' },
+                ],
+              },
+            ],
+          },
+        },
+        extraProps: {
+          // 引擎已自动 node.setPropValue('dataListBind', value)，无需重复写入
+        },
+      },
+      {
+        title: '标题',
+        name: 'title',
+        description: '标题',
+        setter: {
+          componentName: 'StringSetter',
+          isRequired: false,
+          initialValue: '',
+        },
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'moreText',
+            'zh-CN': '更多文字',
+          },
+          tip: 'moreText | 更多文字',
+        },
+        name: 'moreText',
+        description: '更多文字',
+        setter: {
+          componentName: 'StringSetter',
+          isRequired: false,
+          initialValue: '',
+        },
+      },
+      {
+        title: '文字行数',
+        name: 'textLines',
+        description: '文字行数',
+        setter: {
+          componentName: 'NumberSetter',
+          isRequired: false,
+          initialValue: 2,
+          defaultValue: 2,
+          props: {
+            min: 2,
+            max: 4,
+          },
+        },
+        extraProps: {
+          setValue(target, value) {
+            // 直接写入 textLines prop；组件已改为纯 prop 驱动，无需操作子节点
+            target.getProps().setPropValue('textLines', value)
+
+            // 同步更新数据源绑定配置中的字段列表
+            const dataListBindProp = (target?.parent as any)?.items?.find(
+              (item: any) => item.name === 'dataListBind',
+            )
+            if (dataListBindProp?.setter) {
+              const baseChildren = [
+                { label: '图片链接', value: 'image' },
+                { label: '类型', value: 'itemType' },
+                { label: '标题', value: 'title' },
+                { label: '说明', value: 'description' },
+              ]
+              const textChildren = value > 2
+                ? Array.from({ length: value - 2 }).map((_, i) => ({
+                    label: `文本${i + 3}`,
+                    value: `text${i + 3}`,
+                  }))
+                : []
+              dataListBindProp.setter.props.attributes[0].children = [
+                ...baseChildren,
+                ...textChildren,
+              ]
+            }
+          },
+        },
+      },
+      {
+        title: '子项列数',
+        name: 'itemColumns',
+        description: '子项列数',
+        setter: {
+          componentName: 'NumberSetter',
+          isRequired: false,
+          initialValue: (target) => {
+            const isTwoColumns =
+              target.getProps().getPropValue('imagePlacement') === 'top' ||
+              target.getProps().getPropValue('imagePlacement') === 'bottom'
+            return isTwoColumns ? 2 : 1
+          },
+          defaultValue: (target) => {
+            const isTwoColumns =
+              target.getProps().getPropValue('imagePlacement') === 'top' ||
+              target.getProps().getPropValue('imagePlacement') === 'bottom'
+            return isTwoColumns ? 2 : 1
+          },
+          props: {
+            min: 1,
+            max: 2,
+          },
+        },
+      },
+      {
+        title: '子项间距',
+        name: 'itemGap',
+        description: '子项间距',
+        setter: {
+          componentName: 'NumberSetter',
+          isRequired: false,
+          initialValue: 10,
+          defaultValue: 10,
+        },
+      },
+      {
+        title: '子项内边距',
+        name: 'itemPadding',
+        description: '子项内边距',
+        setter: {
+          componentName: 'NumberSetter',
+          isRequired: false,
+          initialValue: 0,
+          defaultValue: 0,
+        },
+      },
+      {
+        title: '子项背景颜色',
+        name: 'itemBgColor',
+        description: '子项背景颜色',
+        setter: {
+          componentName: 'ColorSetter',
+          isRequired: false,
+          initialValue: '#fff',
+          defaultValue: '#fff',
+        },
+      },
+      {
+        title: '子项分布',
+        name: 'itemRowAlign',
+        description: '子项分布',
+        setter: {
+          componentName: 'SelectSetter',
+          props: {
+            options: [
+              {
+                label: '列分布',
+                value: 'column',
+              },
+              {
+                label: '一行显示',
+                value: 'row',
+              },
+            ],
+          },
+          initialValue: 'column',
+        },
+      },
+      {
+        title: '图文对齐方式',
+        name: 'textAlign',
+        description: '图文对齐方式',
+        setter: {
+          componentName: 'SelectSetter',
+          props: {
+            options: [
+              {
+                label: '左对齐',
+                value: 'flex-start',
+              },
+              {
+                label: '右对齐',
+                value: 'flex-end',
+              },
+              {
+                label: '居中对齐',
+                value: 'center',
+              },
+            ],
+          },
+          initialValue: 'flex-start',
+        },
+      },
+      {
+        title: '图文间距',
+        name: 'textImgGap',
+        description: '图文间距',
+        setter: {
+          componentName: 'NumberSetter',
+          isRequired: false,
+          initialValue: 0,
+          defaultValue: 0,
+        },
+      },
+      {
+        title: '图标配置',
+        name: 'iconList',
+        extraProps: {
+          display: 'accordion',
+          defaultCollapsed: false,
+        },
+        setter: {
+          componentName: 'ArraySetter',
+          props: {
+            itemSetter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      name: 'icon',
+                      title: '图标',
+                      setter: 'IconSetter',
+                      isRequired: true,
+                      props: {
+                        hasClear: false,
+                      },
+                    },
+                    {
+                      name: 'size',
+                      title: '图标尺寸',
+                      setter: {
+                        componentName: 'SelectSetter',
+                        props: {
+                          options: [
+                            {
+                              label: 'xxs',
+                              value: 'xxs',
+                            },
+                            {
+                              label: 'xs',
+                              value: 'xs',
+                            },
+                            {
+                              label: 'small',
+                              value: 'small',
+                            },
+                            {
+                              label: 'medium',
+                              value: 'medium',
+                            },
+                            {
+                              label: 'large',
+                              value: 'large',
+                            },
+                            {
+                              label: 'xl',
+                              value: 'xl',
+                            },
+                            {
+                              label: 'xxl',
+                              value: 'xxl',
+                            },
+                            {
+                              label: 'xxxl',
+                              value: 'xxxl',
+                            },
+                            {
+                              label: 'inherit',
+                              value: 'inherit',
+                            },
+                          ],
+                        },
+                      },
+                      defaultValue: 'medium',
+                    },
+                    {
+                      name: 'position',
+                      title: '图标位置',
+                      defaultValue: 'rightTop',
+                      isRequired: true,
+                      setter: {
+                        componentName: 'SelectSetter',
+                        props: {
+                          options: [
+                            {
+                              label: '左上角',
+                              value: 'leftTop',
+                            },
+                            {
+                              label: '左下角',
+                              value: 'leftBottom',
+                            },
+                            {
+                              label: '右上角',
+                              value: 'rightTop',
+                            },
+                            {
+                              label: '右下角',
+                              value: 'rightBottom',
+                            },
+                            {
+                              label: '自定义',
+                              value: 'customize',
+                            },
+                          ],
+                        },
+                      },
+                      extraProps: {
+                        setValue: (target, value) => {
+                          target.getProps().setPropValue('position', value)
+                        },
+                      },
+                    },
+                    {
+                      name: 'rightOffset',
+                      title: '右偏移',
+                      setter: 'NumberSetter',
+                      defaultValue: 0,
+                      condition: (target) => {
+                        return target.getProps().getPropValue('position') === 'customize'
+                      },
+                    },
+                    {
+                      name: 'topOffset',
+                      title: '上偏移',
+                      setter: 'NumberSetter',
+                      defaultValue: 0,
+                      condition: (target) => {
+                        return target.getProps().getPropValue('position') === 'customize'
+                      },
+                    },
+                  ],
+                },
+              },
+              initialValue: {
+                size: 'medium',
+                position: 'rightTop',
+                rightOffset: 0,
+                topOffset: 0,
+              },
+            },
+          },
+        },
+      },
+      {
+        title: '是否为购物车列表',
+        name: 'isShoppingCart',
+        description: '是否为购物车列表',
+        setter: {
+          componentName: 'BoolSetter',
+          isRequired: true,
+          initialValue: false,
+        },
+      },
+      {
+        title: '是否为愿望单列表',
+        name: 'isWishList',
+        description: '是否为愿望单列表',
+        setter: {
+          componentName: 'BoolSetter',
+          isRequired: true,
+          initialValue: false,
+        },
+      },
+      {
+        title: '是否为用户菜单列表',
+        name: 'isUserMenu',
+        description: '是否为用户菜单列表',
+        setter: {
+          componentName: 'BoolSetter',
+          isRequired: true,
+          initialValue: false,
+        },
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'dataList',
+            'zh-CN': '数据',
+          },
+          tip: 'dataList | 数据',
+        },
+        name: 'dataList',
+        description: '数据',
+        setter: {
+          componentName: 'ArraySetter',
+          props: {
+            itemSetter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'title',
+                          'zh-CN': '标题',
+                        },
+                      },
+                      name: 'title',
+                      description: '标题',
+                      setter: {
+                        componentName: 'StringSetter',
+                        isRequired: false,
+                        initialValue: '',
+                      },
+                    },
+                    {
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'image',
+                          'zh-CN': '图片地址',
+                        },
+                      },
+                      name: 'image',
+                      description: '图片地址',
+                      setter: {
+                        componentName: 'CustomImageSetter',
+                        isRequired: false,
+                        initialValue: '',
+                      },
+                    },
+                    {
+                      title: {
+                        label: {
+                          type: 'i18n',
+                          'en-US': 'description',
+                          'zh-CN': '描述',
+                        },
+                      },
+                      name: 'description',
+                      description: '描述',
+                      setter: {
+                        componentName: 'StringSetter',
+                        isRequired: false,
+                        initialValue: '',
+                      },
+                    },
+                  ],
+                  extraSetter: {
+                    componentName: 'MixedSetter',
+                    isRequired: false,
+                    props: {},
+                  },
+                },
+              },
+            },
+          },
+          initialValue: (target) => {
+            // ignoreDefaultValue: () => true 保证此函数在 SettingFieldView remount 时
+            // 永远不会被 initDefaultValue 调用，仅作为安全兜底保留。
+            // 正常的首次创建数据由 snippet.props.dataList 提供。
+            const existing = target?.node?.schema?.props?.dataList
+              ?? target?.getProps?.()?.getPropValue?.('dataList')
+            if (existing !== undefined) return existing
+            return DEFAULT_DATA_LIST
+          },
+        },
+        extraProps: {
+          /**
+           * ignoreDefaultValue: 彻底阻止引擎在 SettingFieldView remount 时
+           * 调用 initDefaultValue → 把 initialValue（默认数据数组）通过 field.setValue
+           * 写入 dataList prop，覆盖已绑定的 JSExpression。
+           *
+           * 这是根本性解决方案：在引擎层面阻断 initDefaultValue 的执行，
+           * 而不是试图在 initialValue/getValue/setValue 中做缓存和还原来补救。
+           */
+          ignoreDefaultValue: () => true,
+          getValue: (target: any, currentValue: any) => {
+            // currentValue 已有值时直接返回
+            if (currentValue !== undefined) return currentValue
+            // 从 schema 快照兜底读取（最可靠的源头数据，始终反映持久化状态）
+            const fromSchema = target?.node?.schema?.props?.dataList
+            if (fromSchema !== undefined) return fromSchema
+            return undefined
+          },
+        },
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onClick',
+          template: "onClick(key,${extParams}){\n// 点击项目的事件\nconsole.log('onClick', key);}",
+        },
+        {
+          name: 'handleMoreClick',
+          template: "handleMoreClick(){\n// 查看更多\nconsole.log('handleMoreClick');}",
+        },
+      ],
+    },
+    component: {
+      disableBehaviors: ['copy'],
+    },
+  },
+}
+
+const DEFAULT_DATA_LIST = [
+  {
+    image: 'https://img.alicdn.com/tps/TB16TQvOXXXXXbiaFXXXXXXXXXX-120-120.svg',
+    title: '标题名称',
+    description:
+      '说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字',
+  },
+  {
+    image: 'https://img.alicdn.com/tps/TB16TQvOXXXXXbiaFXXXXXXXXXX-120-120.svg',
+    title: '标题名称',
+    description:
+      '说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字',
+  },
+]
+
+const getSnippets = (textLines = 2): IPublicTypeSnippet[] => [
+  {
+    title: '图文列表',
+    screenshot: '',
+    schema: {
+      componentName: 'TeletextList',
+      props: {
+        // 将默认数据放到 snippet props 中，而非依赖 setter.initialValue。
+        // 因为 dataList 使用了 ignoreDefaultValue:()=>true 来阻止引擎在
+        // SettingFieldView remount 时覆盖已绑定的 JSExpression，
+        // 所以 initDefaultValue 永远不会运行，首次拖入的初始数据必须由 snippet 提供。
+        dataList: DEFAULT_DATA_LIST,
+      },
+      // 重构后图文列表仅保留头部标题槽位子节点。
+      // 图片、文本行均由 TeletextListItem 纯 prop 驱动原生渲染，不再依赖 cloneElement/convertChildren。
+      children: [
+        {
+          componentName: 'NextText',
+          props: {
+            type: 'h5',
+            children: '列表标题',
+            key: 'box-title',
+            style: {
+              fontSize: '16px',
+              fontWeight: 'bold',
+            },
+          },
+        },
+      ],
+    },
+  },
+]
+
+export default {
+  ...TeletextListMeta,
+  snippets: getSnippets(2),
+}