@dckj-npm/dc-material 0.1.375 → 0.1.377

package/lowcode/teletext-list/meta.ts

@@ -3,13 +3,6 @@ import {
   IPublicTypeSnippet,
 } from '@alilc/lowcode-types'
 
-const IMAGE_KEY = 'image'
-
-const normalizeNodeKey = (rawKey: any): string => {
-  if (rawKey === undefined || rawKey === null) return ''
-  return String(rawKey).replace(/^\.?\$?/, '')
-}
-
 const parsePxNumber = (value: any): number | undefined => {
   if (typeof value === 'number' && Number.isFinite(value)) {
     return value
@@ -27,46 +20,6 @@ const parsePxNumber = (value: any): number | undefined => {
   return undefined
 }
 
-const findImageChildNode = (target: any): any | undefined => {
-  const children = target?.node?.children
-  if (!children) return undefined
-  if (typeof children.find === 'function') {
-    return children.find((child: any) => {
-      return normalizeNodeKey(child?.getPropValue?.('key')) === IMAGE_KEY
-    })
-  }
-  return undefined
-}
-
-const getImageStyleNumber = (target: any, styleKey: 'width' | 'height'): number | undefined => {
-  const imageChildNode = findImageChildNode(target)
-  if (imageChildNode) {
-    return parsePxNumber(imageChildNode.getPropValue?.('style')?.[styleKey])
-  }
-  return undefined
-}
-
-/**
- * 同步 Image 子节点的 style.width / style.height。
- * 使用 Promise.resolve().then() 异步执行，避免在父节点 setPropValue
- * 的 MobX 同步响应链中触发子节点变更（可能导致 SettingField 重建）。
- */
-const syncImageStyleValue = (target: any, styleKey: 'width' | 'height', value: number): void => {
-  Promise.resolve().then(() => {
-    const imageChildNode = findImageChildNode(target)
-    if (!imageChildNode) return
-    const currentStyle = imageChildNode.getPropValue?.('style') || {}
-    const updatedStyle: Record<string, any> = { ...currentStyle, [styleKey]: `${value}px` }
-    const otherKey = styleKey === 'width' ? 'height' : 'width'
-    if (!updatedStyle[otherKey]) {
-      const otherPropKey = otherKey === 'width' ? 'imgWidth' : 'imgHeight'
-      const otherPropValue = parsePxNumber(target?.getProps?.()?.getPropValue?.(otherPropKey))
-      updatedStyle[otherKey] = `${otherPropValue ?? 100}px`
-    }
-    imageChildNode.setPropValue?.('style', updatedStyle)
-  })
-}
-
 const TeletextListMeta: IPublicTypeComponentMetadata = {
   group: '低代码组件',
   componentName: 'TeletextList',
@@ -85,434 +38,484 @@ const TeletextListMeta: IPublicTypeComponentMetadata = {
   },
   configure: {
     props: [
+      // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+      // 分组一：数据与内容
+      // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       {
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'type',
-            'zh-CN': '类型',
-          },
-        },
-        name: 'type',
-        description: '类型',
-        setter: {
-          componentName: 'RadioGroupSetter',
-          props: {
-            dataSource: [
-              {
-                label: '图文',
-                value: 'textAndImg',
+        type: 'group',
+        title: '数据与内容',
+        display: 'accordion',
+        items: [
+          {
+            title: '标题',
+            name: 'title',
+            description: '列表头部标题文本',
+            setter: { componentName: 'StringSetter', isRequired: false, initialValue: '' },
+          },
+          {
+            title: '更多文字',
+            name: 'moreText',
+            description: '更多按钮文字，为空时不显示',
+            setter: { componentName: 'StringSetter', isRequired: false, initialValue: '' },
+          },
+          {
+            title: '文本槽位数',
+            name: 'textLines',
+            description: '每项渲染几个文本字段：2=标题+说明，3=加text3，4=加text3+text4。这是"显示几格"，不是"每格显示几行"——行数截断请到"标题/说明文字样式"分组修改"最大行数"。',
+            setter: {
+              componentName: 'NumberSetter',
+              isRequired: false,
+              initialValue: 2,
+              defaultValue: 2,
+              props: { min: 2, max: 4 },
+            },
+            extraProps: {
+              setValue(target, value) {
+                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,
+                  ]
+                }
               },
-              {
-                label: '仅有图片',
-                value: 'imgOnly',
+            },
+          },
+          {
+            title: '数据源绑定',
+            name: 'dataListBind',
+            setter: {
+              componentName: 'SetterFormVariable',
+              props: {
+                attributes: [
+                  {
+                    label: '图文数据',
+                    value: 'dataList',
+                    children: [
+                      { label: '图片链接', value: 'image' },
+                      { label: '行类型（值为"开关"时该行显示开关控件）', value: 'itemType' },
+                      { label: '标题', value: 'title' },
+                      { label: '说明', value: 'description' },
+                    ],
+                  },
+                ],
               },
-              {
-                label: '仅有文字',
-                value: 'textOnly',
+            },
+            extraProps: {},
+          },
+          {
+            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',
+                          setter: { componentName: 'StringSetter', isRequired: false, initialValue: '' },
+                        },
+                        {
+                          title: { label: { type: 'i18n', 'en-US': 'image', 'zh-CN': '图片地址' } },
+                          name: 'image',
+                          setter: { componentName: 'CustomImageSetter', isRequired: false, initialValue: '' },
+                        },
+                        {
+                          title: { label: { type: 'i18n', 'en-US': 'description', 'zh-CN': '描述' } },
+                          name: 'description',
+                          setter: { componentName: 'StringSetter', isRequired: false, initialValue: '' },
+                        },
+                        {
+                          title: { label: { type: 'i18n', 'en-US': 'text3', 'zh-CN': '文本3' } },
+                          name: 'text3',
+                          description: '文本槽位数 ≥ 3 时显示',
+                          setter: { componentName: 'StringSetter', isRequired: false, initialValue: '' },
+                        },
+                        {
+                          title: { label: { type: 'i18n', 'en-US': 'text4', 'zh-CN': '文本4' } },
+                          name: 'text4',
+                          description: '文本槽位数 = 4 时显示',
+                          setter: { componentName: 'StringSetter', isRequired: false, initialValue: '' },
+                        },
+                        {
+                          title: { label: { type: 'i18n', 'en-US': 'itemType', 'zh-CN': '行类型' } },
+                          name: 'itemType',
+                          description: '值为"开关"时该行显示开关控件，留空为默认文字行',
+                          setter: {
+                            componentName: 'SelectSetter',
+                            props: {
+                              options: [
+                                { label: '默认（文字行）', value: '' },
+                                { label: '开关', value: '开关' },
+                              ],
+                            },
+                            initialValue: '',
+                          },
+                        },
+                      ],
+                      extraSetter: { componentName: 'MixedSetter', isRequired: false, props: {} },
+                    },
+                  },
+                },
               },
-            ],
-            options: [
-              {
-                label: '图文',
-                value: 'textAndImg',
+              initialValue: (target) => {
+                const existing = target?.node?.schema?.props?.dataList
+                  ?? target?.getProps?.()?.getPropValue?.('dataList')
+                if (existing !== undefined) return existing
+                return DEFAULT_DATA_LIST
               },
-              {
-                label: '仅有图片',
-                value: 'imgOnly',
+            },
+            extraProps: {
+              ignoreDefaultValue: () => true,
+              getValue: (target: any, currentValue: any) => {
+                if (currentValue !== undefined) return currentValue
+                const fromSchema = target?.node?.schema?.props?.dataList
+                if (fromSchema !== undefined) return fromSchema
+                return undefined
               },
-              {
-                label: '仅有文字',
-                value: 'textOnly',
+            },
+          },
+          {
+            title: '类型',
+            name: 'type',
+            description: '列表类型',
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { label: '图文', value: 'textAndImg' },
+                  { label: '仅图片', value: 'imgOnly' },
+                  { label: '仅文字', value: 'textOnly' },
+                ],
               },
-            ],
+              initialValue: 'textAndImg',
+            },
           },
-          initialValue: 'textAndImg',
-        },
+          {
+            title: '是否购物车列表',
+            name: 'isShoppingCart',
+            setter: { componentName: 'BoolSetter', isRequired: true, initialValue: false },
+          },
+          {
+            title: '是否愿望单列表',
+            name: 'isWishList',
+            setter: { componentName: 'BoolSetter', isRequired: true, initialValue: false },
+          },
+          {
+            title: '是否用户菜单列表',
+            name: 'isUserMenu',
+            setter: { componentName: 'BoolSetter', isRequired: true, initialValue: false },
+          },
+        ],
       },
+      // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+      // 分组二：列表布局
+      // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       {
-        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',
+        type: 'group',
+        title: '列表布局',
+        display: 'accordion',
+        items: [
+          {
+            title: '子项分布',
+            name: 'itemRowAlign',
+            description: '列方向或横向一行滚动',
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { label: '纵向列表', value: 'column' },
+                  { label: '横向滚动', value: 'row' },
+                ],
               },
-              {
-                label: '下',
-                value: 'bottom',
+              initialValue: 'column',
+            },
+          },
+          {
+            title: '子项列数',
+            name: 'itemColumns',
+            description: '纵向模式时的列数（1-4）',
+            setter: {
+              componentName: 'NumberSetter',
+              isRequired: false,
+              initialValue: (target) => {
+                const p = target.getProps().getPropValue('imagePlacement')
+                return p === 'top' || p === 'bottom' ? 2 : 1
               },
-              {
-                label: '无',
-                value: 'none',
+              defaultValue: (target) => {
+                const p = target.getProps().getPropValue('imagePlacement')
+                return p === 'top' || p === 'bottom' ? 2 : 1
               },
-            ],
+              props: { min: 1, max: 4 },
+            },
           },
-          initialValue: 'left',
-        },
-        extraProps: {
-          // 引擎已自动 setPropValue('imagePlacement', value)，无需再做任何额外写入
-          // 之前的快照-还原逻辑反而触发多余的 MobX 响应链，导致 dataList 被覆盖
-        },
-      },
-      {
-        title: '图片宽度',
-        name: 'imgWidth',
-        description: '图片宽度',
-        setter: {
-          componentName: 'NumberSetter',
-          isRequired: false,
-          initialValue: 100,
-        },
-        extraProps: {
-          getValue: (target, value) => {
-            if (value !== undefined) return parsePxNumber(value) ?? 100
-            const styleWidth = getImageStyleNumber(target, 'width')
-            if (styleWidth !== undefined) return styleWidth
-            return 100
-          },
-          setValue: (target, value) => {
-            // 引擎已自动 setPropValue('imgWidth', value)
-            // 只需同步到 Image 子节点的 style
-            const parsedValue = parsePxNumber(value)
-            if (parsedValue !== undefined) {
-              syncImageStyleValue(target, 'width', parsedValue)
-            }
+          {
+            title: '子项间距',
+            name: 'itemGap',
+            description: '子项之间的间距（px）',
+            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 10, defaultValue: 10, props: { min: 0 } },
           },
-        },
+        ],
       },
+      // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+      // 分组三：列表项样式
+      // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       {
-        title: '图片高度',
-        name: 'imgHeight',
-        description: '图片高度',
-        setter: {
-          componentName: 'NumberSetter',
-          isRequired: false,
-          initialValue: 100,
-        },
-        extraProps: {
-          getValue: (target, value) => {
-            if (value !== undefined) return parsePxNumber(value) ?? 100
-            const styleHeight = getImageStyleNumber(target, 'height')
-            if (styleHeight !== undefined) return styleHeight
-            return 100
-          },
-          setValue: (target, value) => {
-            // 引擎已自动 setPropValue('imgHeight', value)
-            // 只需同步到 Image 子节点的 style
-            const parsedValue = parsePxNumber(value)
-            if (parsedValue !== undefined) {
-              syncImageStyleValue(target, 'height', parsedValue)
-            }
-          },
-        },
+        type: 'group',
+        title: '子项样式',
+        display: 'accordion',
+        items: [
+          {
+            title: '内边距',
+            name: 'itemPadding',
+            description: '列表项内边距（px）',
+            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 0, defaultValue: 0, props: { min: 0 } },
+          },
+          {
+            title: '背景颜色',
+            name: 'itemBgColor',
+            description: '列表项背景颜色',
+            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: '#ffffff' },
+          },
+          {
+            title: '圆角',
+            name: 'itemBorderRadius',
+            description: '列表项圆角（px）',
+            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 0, defaultValue: 0, props: { min: 0 } },
+          },
+          {
+            title: '边框颜色',
+            name: 'itemBorderColor',
+            description: '列表项边框颜色',
+            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: '' },
+          },
+          {
+            title: '边框宽度',
+            name: 'itemBorderWidth',
+            description: '列表项边框宽度（px），设置边框颜色后生效',
+            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 0, defaultValue: 0, props: { min: 0, max: 10 } },
+          },
+        ],
       },
+      // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+      // 分组四：图片样式
+      // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       {
-        title: '数据源绑定',
-        name: 'dataListBind',
-        setter: {
-          componentName: 'SetterFormVariable',
-          props: {
-            attributes: [
-              {
-                label: '图文数据',
-                value: 'dataList',
-                children: [
-                  { label: '图片链接', value: 'image' },
-                  { label: '类型', value: 'itemType' },
-                  { label: '标题', value: 'title' },
-                  { label: '说明', value: 'description' },
+        type: 'group',
+        title: '图片样式',
+        display: 'accordion',
+        items: [
+          {
+            title: '图片位置',
+            name: 'imagePlacement',
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { label: '左', value: 'left' },
+                  { label: '右', value: 'right' },
+                  { label: '上', value: 'top' },
+                  { label: '下', value: 'bottom' },
+                  { label: '无', value: 'none' },
                 ],
               },
-            ],
-          },
-        },
-        extraProps: {
-          setValue: (target, value) => {
-            target.getProps().setPropValue('dataListBind', value)
+              initialValue: 'left',
+            },
+            extraProps: {},
+          },
+          {
+            title: '图文对齐',
+            name: 'textAlign',
+            description: '图片与文字的交叉轴对齐方式',
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { label: '顶对齐', value: 'flex-start' },
+                  { label: '居中', value: 'center' },
+                  { label: '底对齐', value: 'flex-end' },
+                ],
+              },
+              initialValue: 'flex-start',
+            },
           },
-        },
-      },
-      {
-        title: '标题',
-        name: 'title',
-        description: '标题',
-        setter: {
-          componentName: 'StringSetter',
-          isRequired: false,
-          initialValue: '',
-        },
-      },
-      {
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'moreText',
-            'zh-CN': '更多文字',
+          {
+            title: '图文间距',
+            name: 'textImgGap',
+            description: '图片与文字区域之间的间距（px）',
+            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 16, defaultValue: 16, props: { min: 0 } },
+          },
+          {
+            title: '宽度',
+            name: 'imgWidth',
+            description: '图片宽度（px）',
+            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 100, props: { min: 10 } },
+            extraProps: {
+              ignoreDefaultValue: () => true,
+              getValue: (target: any, value: any) => {
+                const parsed = parsePxNumber(value)
+                if (parsed !== undefined) return parsed
+                const fromSchema = parsePxNumber(target?.node?.schema?.props?.imgWidth)
+                if (fromSchema !== undefined) return fromSchema
+                return 100
+              },
+            },
           },
-          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,
+          {
+            title: '高度',
+            name: 'imgHeight',
+            description: '图片高度（px）',
+            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 100, props: { min: 10 } },
+            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
+              },
+            },
           },
-        },
-        extraProps: {
-          setValue(target, value) {
-            target.getProps().setPropValue('textLines', value)
-            const schema: any = target?.node?.schema
-            const node: any = target?.node
-            const schemaChildren: any[] = Array.isArray(schema?.children) ? schema.children : []
-
-            // 获取当前文本组件数量
-            const currentLength =
-              schemaChildren.filter(
-                (child) =>
-                  child.componentName === 'NextText' && child?.props?.key?.startsWith('text-'),
-              )?.length || 0
-
-            if (value > currentLength) {
-              // 需要添加新的文本组件
-              for (let i = currentLength + 1; i <= value; i++) {
-                const newChild = {
-                  componentName: 'NextText',
-                  props: {
-                    type: 'inherit',
-                    children: '基于 Ali-Lowcode-Engine 快速打造高生产力的低代码研发平台',
-                    key: `text-${i}`,
-                  },
-                }
-                node?.children?.push(newChild)
-              }
-            } else if (value < currentLength) {
-              // 收集需要移除的节点，再调用 child.remove() 通过引擎 API 逐个删除
-              // 避免 node.children = [...] 直接赋值（IPublicModelNodeChildren 不支持重新赋值）
-              const nodesToRemove: any[] = []
-              node?.children?.forEach?.((child: any) => {
-                const key = child?.schema?.props?.key
-                if (
-                  child?.componentName === 'NextText' &&
-                  typeof key === 'string' &&
-                  key.startsWith('text-')
-                ) {
-                  const order = Number(key.split('-')[1])
-                  if (!Number.isNaN(order) && order > value) {
-                    nodesToRemove.push(child)
-                  }
-                }
-              })
-              nodesToRemove.forEach((child) => child?.remove?.())
-            }
-
-            // 更新数据源绑定的配置
-            const dataListBindProp = (target?.parent as any)?.items?.find(
-              (item) => item.name === 'dataListBind',
-            )
-            if (dataListBindProp && dataListBindProp.setter) {
-              const baseChildren = [
-                { label: '图片链接', value: 'image' },
-                { label: '类型', value: 'itemType' },
-                { label: '标题', value: 'title' },
-                { label: '说明', value: 'description' },
-              ]
-
-              // 只有当value大于2时才添加额外的文本字段
-              const textChildren =
-                value > 2
-                  ? Array.from({ length: value - 2 }).map((_, index) => ({
-                      label: `文本${index + 3}`,
-                      value: `text${index + 3}`,
-                    }))
-                  : []
-
-              // 更新setter的attributes
-              dataListBindProp.setter.props.attributes[0].children = [
-                ...baseChildren,
-                ...textChildren,
-              ]
-            }
+          {
+            title: '圆角',
+            name: 'imgBorderRadius',
+            description: '图片圆角（px），设为 999 可得到圆形',
+            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 0, defaultValue: 0, props: { min: 0 } },
+          },
+          {
+            title: '填充方式',
+            name: 'imgObjectFit',
+            description: '图片在容器内的填充方式',
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { label: '覆盖', value: 'cover' },
+                  { label: '适应', value: 'contain' },
+                  { label: '拉伸', value: 'fill' },
+                  { label: '原始', value: 'none' },
+                ],
+              },
+              initialValue: 'cover',
+            },
           },
-        },
+        ],
       },
+      // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+      // 分组五：标题文字样式
+      // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       {
-        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
+        type: 'group',
+        title: '标题文字样式',
+        display: 'accordion',
+        items: [
+          {
+            title: '颜色',
+            name: 'titleColor',
+            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: 'titleFontWeight',
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { label: '常规', value: 'normal' },
+                  { label: '中等', value: '500' },
+                  { label: '半粗', value: '600' },
+                  { label: '粗体', value: 'bold' },
+                ],
+              },
+              initialValue: '600',
+            },
           },
-          props: {
-            min: 1,
-            max: 2,
+          {
+            title: '最大行数',
+            name: 'titleLineClamp',
+            description: '超出后显示省略号，0 表示不限制',
+            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 1, defaultValue: 1, props: { min: 0, max: 10 } },
           },
-        },
-      },
-      {
-        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',
+        type: 'group',
+        title: '说明文字样式',
+        display: 'accordion',
+        items: [
+          {
+            title: '颜色',
+            name: 'descriptionColor',
+            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: '' },
+          },
+          {
+            title: '字体大小',
+            name: 'descriptionFontSize',
+            description: '说明字体大小（px）',
+            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 13, defaultValue: 13, props: { min: 10, max: 60 } },
+          },
+          {
+            title: '字重',
+            name: 'descriptionFontWeight',
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { label: '常规', value: 'normal' },
+                  { label: '中等', value: '500' },
+                  { label: '半粗', value: '600' },
+                  { label: '粗体', value: 'bold' },
+                ],
               },
-            ],
+              initialValue: 'normal',
+            },
           },
-          initialValue: 'column',
-        },
-      },
-      {
-        title: '图文对齐方式',
-        name: 'textAlign',
-        description: '图文对齐方式',
-        setter: {
-          componentName: 'SelectSetter',
-          props: {
-            options: [
-              {
-                label: '左对齐',
-                value: 'flex-start',
-              },
-              {
-                label: '右对齐',
-                value: 'flex-end',
-              },
-              {
-                label: '居中对齐',
-                value: 'center',
-              },
-            ],
+          {
+            title: '最大行数',
+            name: 'descriptionLineClamp',
+            description: '超出后显示省略号，0 表示不限制',
+            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 1, defaultValue: 1, props: { min: 0, max: 10 } },
           },
-          initialValue: 'flex-start',
-        },
-      },
-      {
-        title: '图文间距',
-        name: 'textImgGap',
-        description: '图文间距',
-        setter: {
-          componentName: 'NumberSetter',
-          isRequired: false,
-          initialValue: 0,
-          defaultValue: 0,
-        },
+        ],
       },
+      // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+      // 浮层图标
+      // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       {
-        title: '图标配置',
+        title: '浮层图标',
         name: 'iconList',
-        extraProps: {
-          display: 'accordion',
-          defaultCollapsed: false,
-        },
+        description: '在每个列表项上叠加绝对定位图标（如角标、标签等）',
+        extraProps: { display: 'accordion', defaultCollapsed: true },
         setter: {
           componentName: 'ArraySetter',
           props: {
@@ -526,9 +529,7 @@ const TeletextListMeta: IPublicTypeComponentMetadata = {
                       title: '图标',
                       setter: 'IconSetter',
                       isRequired: true,
-                      props: {
-                        hasClear: false,
-                      },
+                      props: { hasClear: false },
                     },
                     {
                       name: 'size',
@@ -537,42 +538,15 @@ const TeletextListMeta: IPublicTypeComponentMetadata = {
                         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',
-                            },
+                            { 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' },
                           ],
                         },
                       },
@@ -587,26 +561,11 @@ const TeletextListMeta: IPublicTypeComponentMetadata = {
                         componentName: 'SelectSetter',
                         props: {
                           options: [
-                            {
-                              label: '左上角',
-                              value: 'leftTop',
-                            },
-                            {
-                              label: '左下角',
-                              value: 'leftBottom',
-                            },
-                            {
-                              label: '右上角',
-                              value: 'rightTop',
-                            },
-                            {
-                              label: '右下角',
-                              value: 'rightBottom',
-                            },
-                            {
-                              label: '自定义',
-                              value: 'customize',
-                            },
+                            { label: '左上角', value: 'leftTop' },
+                            { label: '左下角', value: 'leftBottom' },
+                            { label: '右上角', value: 'rightTop' },
+                            { label: '右下角', value: 'rightBottom' },
+                            { label: '自定义', value: 'customize' },
                           ],
                         },
                       },
@@ -621,167 +580,21 @@ const TeletextListMeta: IPublicTypeComponentMetadata = {
                       title: '右偏移',
                       setter: 'NumberSetter',
                       defaultValue: 0,
-                      condition: (target) => {
-                        return target.getProps().getPropValue('position') === 'customize'
-                      },
+                      condition: (target) => 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: '',
-                      },
+                      condition: (target) => target.getProps().getPropValue('position') === 'customize',
                     },
                   ],
-                  extraSetter: {
-                    componentName: 'MixedSetter',
-                    isRequired: false,
-                    props: {},
-                  },
                 },
               },
+              initialValue: { size: 'medium', position: 'rightTop', rightOffset: 0, topOffset: 0 },
             },
           },
-          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
-          },
         },
       },
     ],
@@ -831,121 +644,8 @@ const getSnippets = (textLines = 2): IPublicTypeSnippet[] => [
         // SettingFieldView remount 时覆盖已绑定的 JSExpression，
         // 所以 initDefaultValue 永远不会运行，首次拖入的初始数据必须由 snippet 提供。
         dataList: DEFAULT_DATA_LIST,
+        title: '列表标题',
       },
-      children: [
-        {
-          componentName: 'NextText',
-          props: {
-            type: 'h5',
-            children: '列表标题',
-            key: 'box-title',
-            style: {
-              fontSize: '16px',
-              fontWeight: 'bold',
-            },
-          },
-        },
-        {
-          componentName: 'Image',
-          props: {
-            imgSrc: 'https://img.alicdn.com/tps/TB16TQvOXXXXXbiaFXXXXXXXXXX-120-120.svg',
-            key: 'image',
-          },
-        },
-        // 动态生成文本组件
-        // ...Array.from({ length: textLines }).map((_, index) => ({
-        //   componentName: 'NextText',
-        //   props: {
-        //     type: index === 0 ? 'h5' : 'inherit',
-        //     children:
-        //       index === 0
-        //         ? '标题标题'
-        //         : '基于1 Ali-Lowcode-Engine 快速打造高生产力的低代码研发平台, 基于自然布局体系快速搭建页面',
-        //     key: `text-${index + 1}`,
-        //   },
-        // })),
-        {
-          componentName: 'NextText',
-          props: {
-            type: 'h5',
-            children: '标题标题',
-            key: `text-1`,
-          },
-        },
-        {
-          componentName: 'NextText',
-          props: {
-            type: 'inherit',
-            children:
-              '基于1 Ali-Lowcode-Engine 快速打造高生产力的低代码研发平台, 基于自然布局体系快速搭建页面',
-            key: `text-2`,
-          },
-        },
-        {
-          componentName: 'NextText',
-          props: {
-            type: 'inherit',
-            children:
-              '基于1 Ali-Lowcode-Engine 快速打造高生产力的低代码研发平台, 基于自然布局体系快速搭建页面',
-            key: `text-3`,
-          },
-        },
-        {
-          componentName: 'NextText',
-          props: {
-            type: 'inherit',
-            children:
-              '基于1 Ali-Lowcode-Engine 快速打造高生产力的低代码研发平台, 基于自然布局体系快速搭建页面',
-            key: `text-4`,
-          },
-        },
-        {
-          componentName: 'Select',
-          props: {
-            popType: 'dialog',
-            selectType: 'number',
-            value: 1,
-            prefix: '数量: ',
-            dialogTitle: '选择数量',
-            btnText: '确定',
-            key: 'select-box-1',
-          },
-        },
-        {
-          componentName: 'Select',
-          props: {
-            popType: 'dialog',
-            selectType: 'string',
-            dataList: [
-              {
-                label: 'M',
-                value: 'M',
-              },
-              {
-                label: 'X',
-                value: 'X',
-              },
-              {
-                label: 'XL',
-                value: 'XL',
-              },
-            ],
-            value: 'X',
-            prefix: '尺码: ',
-            dialogTitle: '选择尺码',
-            btnText: '确定',
-            key: 'select-box-2',
-          },
-        },
-        {
-          componentName: 'Switch',
-          props: {
-            size: 'small',
-            disabled: false,
-            key: 'switch-1',
-          },
-        },
-      ],
     },
   },
 ]