jufubao-base 1.0.382 → 1.0.383-beta2

package/docs/modules/uni-attr.md

@@ -0,0 +1,778 @@
+# 自定义组件属性面板配置文档与规范
+
+本文档记录了自定义组件的属性面板配置规范和使用方式，包括常见 UI 组件类型与对应组件类型的映射关系、代码示例以及根据截图识别属性配置的方法，帮助快速识别和使用正确的属性配置。
+
+一、图示类型与组件类型映射
+
+
+| 图示类型 | 组件类型 | 用途 | 代码示例 |
+|---------|---------|------|---------|
+| 标题（Title） | `title` | 用于分隔不同的配置区域 | 见二、13 |
+| 开关（Toggle） | `xd-cus-switch` | 用于显示/隐藏选项的开关 | 见二、1 |
+| 单选按钮（Radio） | `xd-radio` | 用于从多个选项中选择一个 | 见二、2 |
+| 下拉选择（Dropdown） | `xd-site-select-list` | 用于从下拉列表中选择选项 | 见二、3 |
+| 文本输入（Text Input） | `el-input` | 用于输入文本内容 | 见二、2 |
+| 数字输入（Number Input） | `el-input` (type: 'number') | 用于输入数字 | 见二、4 |
+| 页面路径选择 | `xd-select-pages-path` | 用于选择页面跳转路径 | 见二、5 |
+| 业务线选择 | `xd-choose-namespace` | 用于选择业务线 | 见二、6 |
+| 图片上传 | `xd-upload` | 用于上传图片 | 见二、7 |
+| 颜色选择 | `xd-color` | 用于选择颜色 | 见二、8 |
+| 边距设置 | `xd-margin-padding` | 用于设置边距和内边距 | 见二、9 |
+| 边框设置 | `xd-border` | 用于设置边框样式 | 见二、10 |
+| 圆角设置 | `xd-radius` | 用于设置圆角效果 | 见二、15 |
+| 投影设置 | `xd-shadow` | 用于设置投影效果 | 见二、11 |
+| 背景设置 | `xd-background` | 用于设置背景样式 | 见二、16 |
+| 字体设置 | `xd-font` | 用于设置字体样式，如字号、颜色、粗细等 | 见二、17 |
+| 布局样式选择 | `xd-style-image` | 用于选择预设的样式 | 见二、12 |
+| 按钮（Button） | `el-button` | 用于执行操作，如预览 | 见二、14 |
+
+二、代码示例
+
+    1. 开关（xd-cus-switch）
+
+**用途**：用于显示/隐藏选项的开关，如商品名称、品牌、购物车、价格等。
+
+**代码示例**：
+
+```javascript
+{
+  label: '商品名称',
+  ele: 'xd-cus-switch',
+  valueKey: 'showProductName',
+  value: dataVal({ data, key: 'showProductName', dValue: 'Y', gValue }),
+  isRefresh: true,
+  className: 'input100',
+  groupKey:'content',
+  labelInline:true,
+  cusStyle:{marginBottom: '10px'},
+  setting: {
+    tips:['显示','不显示'],
+    isBackType: 'string'
+  },
+},
+```
+
+    2. 单选按钮（xd-radio）
+
+**用途**：用于从多个选项中选择一个，如组件标题显示/隐藏、商品列数、图片位置、展示效果等。
+
+**代码示例**：
+
+```javascript
+// 组件标题显示/隐藏
+{
+  label: '组件标题',
+  ele: 'xd-radio',
+  valueKey: 'v1_is_title',
+  value: dataVal({ data, key: 'v1_is_title', dValue: 'Y', gValue }),
+  groupKey: 'content',
+  multiple: false,
+  labelInline: true,
+  className: 'input80',
+  list: [
+    { label: '显示', value: 'Y' },
+    { label: '隐藏', value: 'N' },
+  ]
+},
+
+// 商品列数
+{
+  label: "商品列数",
+  ele: "xd-radio",
+  groupKey: "content",
+  valueKey: "v1_productColumns",
+  value: data.v1_productColumns || '2',
+  list: [
+    { label: "2列", value: '2' },
+    { label: "3列", value: '3' },
+    { label: "4列", value: '4' },
+  ],
+  labelInline: true,
+},
+```
+
+    3. 下拉选择（xd-site-select-list）
+
+**用途**：用于从下拉列表中选择选项，如商品分类、营销标签、平台标签等。
+
+**代码示例**：
+
+```javascript
+// 商品分类
+{
+  label: '商品分类:',
+  ele: 'xd-site-select-list',
+  valueKey: 'v1_category_ids',
+  value: data['v1_category_ids'] || '',
+  placeholder: '请选择商品分类',
+  setting:{
+    multiple: false,
+  },
+  refresh:data.v1_xnamespace,
+  className: 'input80',
+  groupKey:'content',
+  labelInline:true,
+  handleCustom({action, data}) {
+    XdBus.getParentApi('getProductCustomCategories')({xnamespace})
+      .then(res => {
+        data.cb(res.items)
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  },
+},
+```
+
+    4. 数字输入（el-input type: 'number'）
+
+**用途**：用于输入数字，如商品数量、差值等。
+
+**代码示例**：
+
+```javascript
+// 商品数量
+{
+  labelInline: true,
+  label: '',
+  ele: 'el-input',
+  type: 'number',
+  valueKey: 'v1_slideNumber',
+  groupKey:'content',
+  value: data.v1_slideNumber || '4',
+  cusStyle: { paddingLeft: '100px' },
+  placeholder: '请输入数量',
+  className: 'input60',
+  unit:'个',
+},
+
+// 差值
+{
+  label: '差值',
+  ele: 'el-input',
+  type: 'number',
+  valueKey: 'differ',
+  labelInline:true,
+  value: data['differ'] || '',
+  groupKey:'content',
+  placeholder: '价差，默认值：1',
+  className: 'input80',
+  notice: '取市场价-售价的差值，大于等于设置值时展示',
+  inline: false
+},
+```
+
+    5. 页面路径选择（xd-select-pages-path）
+
+**用途**：用于选择页面跳转路径，如更多链接、商品链接等。
+
+**代码示例**：
+
+```javascript
+// 更多链接地址选择
+{
+  label: "",
+  ele: 'xd-select-pages-path',
+  valueKey: 'v1_morePath',
+  placeholder: '请选择跳转地址',
+  value: data.v1_morePath || null,
+  inline: false,
+  className: 'input80',
+  cusStyle: { paddingLeft: '100px' },
+  groupKey:'content',
+  setting: {
+    router: XdBus.getParentApi('getPagesTree'),
+  }
+},
+```
+
+    6. 业务线选择（xd-choose-namespace）
+
+**用途**：用于选择业务线。
+
+**代码示例**：
+
+```javascript
+{
+  label: "业务线",
+  ele: "xd-choose-namespace",
+  valueKey: "v1_xnamespace",
+  value: dataVal({data, key:'v1_xnamespace', dValue:"", gValue}),
+  groupKey:'content',
+  className: 'input80',
+  labelInline:true,
+  placeholder: '业务线,默认继承上级配置',
+  inline: false,
+  handleCustom: (cb) => {
+    XdBus.getParentApi('getOptionsNamespaces')()
+      .then(res => {
+        cb(res.list)
+      })
+      .catch();
+  }
+},
+```
+
+    7. 图片上传（xd-upload）
+
+**用途**：用于上传图片，如标题图标、背景图等。
+
+**代码示例**：
+
+```javascript
+// 标题图标
+{
+  label: '图标',
+  ele: 'xd-upload',
+  valueKey: `${prefix}titleIcon`,
+  groupKey: 'style',
+  value: dataVal({data, key:`${prefix}titleIcon`, dValue:{}, gValue}),
+  defaultValue: dataVal({data, key:`${prefix}titleIcon`, dValue:{}, gValue}),
+  hidden: !statusShow({data, key: `${prefix}titleIconStatus`, fields:[`${prefix}titleIcon`], gValue}),
+  slot: true,
+  oneWidth: 80,
+  oneHeight: 80,
+  elinputClassName: 'input40',
+  labelInline: true,
+  tipsformet: '<span style="font-size: 12px;color: #999">上传文件格式：@imageType@，不超过@size@MB</span>',
+  type: ['jpg', 'png', 'jpeg', 'gif'],
+  styleType: 'one',
+  uploadType: 'aliyun',
+  size: 5,
+  action: 'action',
+  sort: true,
+},
+```
+
+    8. 颜色选择（xd-color）
+
+**用途**：用于选择颜色，如背景色、文字颜色等。
+
+**代码示例**：
+
+```javascript
+// 内容区背景色
+{
+  label: '背景色',
+  ele: 'xd-color',
+  valueKey: `${prefix}contentBgColor`,
+  labelInline: true,
+  value: dataVal({data, key:`${prefix}contentBgColor`, dValue:'#ffffff', gValue}),
+  hidden: !statusShow({data, key: `${prefix}contentBgStatus`, fields:[`${prefix}contentBgColor`], gValue}),
+  placeholder: '请选择背景颜色',
+  className: 'input80',
+  groupKey:'style',
+  setting: {
+    showAlpha: true
+  },
+},
+```
+
+    9. 边距设置（xd-margin-padding）
+
+**用途**：用于设置外边距和内边距，支持默认、自定义等选项。
+
+**代码示例**：
+
+```javascript
+// 外边距设置
+{
+  label: '外边距',
+  ele: 'xd-margin-padding',
+  groupKey: 'style',
+  valueKey: `${prefix}margin`,
+  value: dataVal({
+    data,
+    key: `${prefix}margin`,
+    dValue: { top: 0, left: 0, right: 0, bottom: 0 },
+    gValue,
+    isPM: true,
+    isCPM: true,
+  }),
+  labelInline: true,
+  className: 'input100',
+  setting: {
+    type: 'margin',
+  },
+},
+
+// 内边距设置
+{
+  label: '内边距',
+  ele: 'xd-margin-padding',
+  groupKey: 'style',
+  valueKey: `${prefix}padding`,
+  value: dataVal({
+    data,
+    key: `${prefix}padding`,
+    dValue: { top: 0, left: 0, right: 0, bottom: 0 },
+    gValue,
+    isPM: true,
+    isCPM: true,
+  }),
+  labelInline: true,
+  className: 'input100',
+  setting: {
+    type: 'padding',
+  },
+},
+```
+
+    10. 边框设置（xd-border）
+
+**用途**：用于设置边框样式，支持默认、隐藏、自定义等选项，可调整样式、大小等。
+
+**代码示例**：
+
+```javascript
+// 描边设置
+{
+  label: '描边',
+  ele: 'xd-border',
+  groupKey: 'style',
+  valueKey: `${prefix}border`,
+  value: dataVal({
+    data,
+    key: `${prefix}border`,
+    dValue: { type: 'default', style: 'solid', width: '1', color: '#e5e5e5' },
+    gValue
+  }),
+  labelInline: true,
+  className: 'input100',
+  setting: {
+    selected: 'default', // 设置默认选中项
+    isRadio: true, // 启用editx默认
+    isDef: true, // 启动默认选项
+    //==设置默认值==
+    color: '#e5e5e5',
+    width: '1',
+    style: 'solid'
+    //==设置默认值==
+  },
+},
+```
+
+    11. 投影设置（xd-shadow）
+
+**用途**：用于设置投影效果，支持默认、隐藏、自定义等选项，可调整大小等。
+
+**代码示例**：
+
+```javascript
+// 投影设置
+{
+  label: '投影',
+  ele: 'xd-shadow',
+  groupKey: 'style',
+  labelInline: true,
+  valueKey: `${prefix}shadow`,
+  value: dataVal({
+    data,
+    key: `${prefix}shadow`,
+    dValue: { type: 'default', size: 'small' },
+    gValue
+  }),
+  className: 'input100',
+  setting: {
+    selected: 'default',
+    isRadio: true,
+    isDef: true,
+  },
+  handleCustom({action, data}) {
+    XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_shadow'})
+      .then(res => {
+        data.cb(res.list)
+      })
+      .catch(error => {
+        console.error(error);
+        data.cb()
+      });
+  },
+},
+```
+
+    12. 布局样式选择（xd-style-image）
+
+**用途**：用于选择预设的样式，如购物车样式。
+
+**代码示例**：
+
+```javascript
+// 购物车样式
+{
+  label: "",
+  ele: "xd-style-image",
+  groupKey: 'content',
+  valueKey: "cartStyle",
+  value: dataVal({data, key:'cartStyle', dValue:'icongouwuche-01', gValue}),
+  labelInline: true,
+  className: 'input100',
+  handleCustom(cusRes) {
+    XdBus.getParentApi('getCompStylesOptions')({
+      layout_ids: 'ngwFA8G8RzLuFHyv5cMCl',
+      key: Date.now()
+    })
+      .then(res => {
+        cusRes.data.cb(res)
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  },
+},
+```
+
+    13. 标题（title）
+
+**用途**：用于分隔不同的配置区域，如内容配置、样式配置等。
+
+**代码示例**：
+
+```javascript
+// 内容配置标题
+{
+  label: "内容配置",
+  ele: "title",
+  groupKey: "content",
+  size: "small",
+},
+
+// 样式配置标题
+{
+  label: "样式配置",
+  ele: "title",
+  groupKey: "style",
+  size: "small",
+},
+```
+
+    14. 按钮（el-button）
+
+**用途**：用于执行操作，如预览、保存等。
+
+**代码示例**：
+
+```javascript
+// 预览按钮（通常在页面路径选择组件中使用）
+{
+  label: "",
+  ele: 'xd-select-pages-path',
+  valueKey: 'v1_morePath',
+  placeholder: '请选择跳转地址',
+  value: data.v1_morePath || null,
+  inline: false,
+  className: 'input80',
+  cusStyle: { paddingLeft: '100px' },
+  groupKey:'content',
+  setting: {
+    router: XdBus.getParentApi('getPagesTree'),
+  }
+},
+// 自定义按钮
+{
+  label: "",
+  ele: "el-button",
+  groupKey: 'content',
+  valueKey: "previewButton",
+  value: "预览",
+  labelInline: true,
+  className: 'input100',
+  setting: {
+    type: "primary",
+    size: "small"
+  },
+  handleCustom() {
+    // 预览逻辑
+    console.log('预览操作');
+  },
+},
+```
+
+    15. 圆角设置（xd-radius）
+
+**用途**：用于设置圆角效果，支持默认、无圆角、自定义等选项，可调整宽度等。
+
+**代码示例**：
+
+```javascript
+// 圆角设置
+{
+  label: '圆角',
+  ele: 'xd-radius',
+  groupKey: 'style',
+  valueKey: `${prefix}radius`,
+  value: dataVal({
+    data,
+    key: `${prefix}radius`,
+    dValue: { type: 'default', width: '0' },
+    gValue
+  }),
+  labelInline: true,
+  className: 'input100',
+  setting: {
+    selected: 'default',
+    isRadio: true,
+    isDef: true,
+  },
+  handleCustom({action, data}) {
+    XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
+      .then(res => {
+        data.cb(res.list)
+      })
+      .catch(error => {
+        console.error(error);
+        data.cb()
+      });
+  },
+},
+```
+
+    16. 背景设置（xd-background）
+
+**用途**：用于设置背景样式，支持默认、隐藏、自定义等选项，可调整背景色、背景图等。
+
+**代码示例**：
+
+```javascript
+// 背景设置
+{
+  label: '背景',
+  ele: 'xd-background',
+  groupKey: 'style',
+  valueKey: `${prefix}background`,
+  value: dataVal({
+    data,
+    key: `${prefix}background`,
+    dValue: { type: 'default', color: '#ffffff', image: '' },
+    gValue
+  }),
+  labelInline: true,
+  className: 'input100',
+  setting: {
+    selected: 'default',
+    isRadio: true,
+    isDef: true,
+  },
+  handleCustom({action, data}) {
+    XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_background'})
+      .then(res => {
+        data.cb(res.list)
+      })
+      .catch(error => {
+        console.error(error);
+        data.cb()
+      });
+  },
+}
+```
+
+    17. 字体设置（xd-font）
+
+**用途**：用于设置字体样式，如字号、颜色、粗细等，支持默认、自定义等选项。
+
+**代码示例**：
+
+```javascript
+// 标题文字设置
+{
+  label: '标题文字',
+  ele: 'xd-font',
+  groupKey: 'style',
+  valueKey: `${prefix}titleFont`,
+  value: dataVal({
+    data,
+    key: `${prefix}titleFont`,
+    dValue: { type: 'default', size: 'default', color: '#000000', weight: 'normal' },
+    gValue
+  }),
+  labelInline: true,
+  className: 'input100',
+  setting: {
+    selected: 'default',
+    isRadio: true,
+    isDef: true,
+  },
+  handleCustom({action, data}) {
+    XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_font'})
+      .then(res => {
+        data.cb(res.list)
+      })
+      .catch(error => {
+        console.error(error);
+        data.cb()
+      });
+  },
+},
+
+// 副标题文字设置
+{
+  label: '副标题文字',
+  ele: 'xd-font',
+  groupKey: 'style',
+  valueKey: `${prefix}subTitleFont`,
+  value: dataVal({
+    data,
+    key: `${prefix}subTitleFont`,
+    dValue: { type: 'default', size: 'default', color: '#666666', weight: 'normal' },
+    gValue
+  }),
+  labelInline: true,
+  className: 'input100',
+  setting: {
+    selected: 'default',
+    isRadio: true,
+    isDef: true,
+  },
+  handleCustom({action, data}) {
+    XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_font'})
+      .then(res => {
+        data.cb(res.list)
+      })
+      .catch(error => {
+        console.error(error);
+        data.cb()
+      });
+  },
+},
+```
+
+三、根据截图识别属性配置
+
+    1. 识别步骤
+
+        1.1 观察图示类型：识别截图中的UI元素类型，如开关、单选按钮、下拉选择等。
+        1.2 对应组件类型：根据图示类型找到对应的组件类型。
+        1.3 查找代码示例：在代码示例中找到对应的属性配置代码。
+        1.4 调整属性参数：根据具体需求调整属性参数，如valueKey、label、placeholder等。
+
+    2. 示例：识别商品名称开关
+
+        2.1 观察图示类型：截图中显示"商品名称"旁边有一个开关。
+        2.2 对应组件类型：开关对应 `xd-cus-switch` 组件。
+        2.3 查找代码示例：找到 `2.1 开关（xd-cus-switch）` 中的代码示例。
+        1.4 调整属性参数：确保valueKey设置为`showProductName`，label设置为"商品名称"。
+
+    3. 示例：识别内容配置区域
+
+        3.1 观察图示类型：截图中显示"内容配置"标题，下方有多个配置项。
+        3.2 对应组件类型：标题对应 `title` 组件，单选按钮对应 `xd-radio` 组件，文本输入对应 `el-input` 组件，页面路径选择对应 `xd-select-pages-path` 组件，业务线选择对应 `xd-choose-namespace` 组件，下拉选择对应 `xd-site-select-list` 组件。
+        3.3 查找代码示例：
+    - 标题：找到 `2.13 标题（title）` 中的代码示例
+    - 单选按钮：找到 `2.2 单选按钮（xd-radio）` 中的代码示例
+    - 文本输入：找到 `2.2 单选按钮（xd-radio）` 中的代码示例
+    - 页面路径选择：找到 `2.5 页面路径选择（xd-select-pages-path）` 中的代码示例
+    - 业务线选择：找到 `2.6 业务线选择（xd-choose-namespace）` 中的代码示例
+    - 下拉选择：找到 `2.3 下拉选择（xd-site-select-list）` 中的代码示例
+        3.4 调整属性参数：根据具体需求调整valueKey、label等参数。
+
+    4. 示例：识别样式配置区域
+
+        4.1 观察图示类型：截图中显示"样式配置"标题，下方有外边距、内边距、描边、圆角、投影、背景等配置项。
+        4.2 对应组件类型：根据图示类型找到对应的组件类型。
+    - 标题对应 `title` 组件
+    - 外边距和内边距对应 `xd-margin-padding` 组件
+    - 描边对应 `xd-border` 组件
+    - 圆角对应 `xd-radius` 组件
+    - 投影对应 `xd-shadow` 组件
+    - 背景对应 `xd-background` 组件
+        4.3 查找代码示例：
+    - 标题：找到 `2.13 标题（title）` 中的代码示例
+    - 外边距和内边距：找到 `2.9 边距设置（xd-margin-padding）` 中的代码示例
+    - 描边：找到 `2.10 边框设置（xd-border）` 中的代码示例
+    - 圆角：找到 `2.15 圆角设置（xd-radius）` 中的代码示例
+    - 投影：找到 `2.11 投影设置（xd-shadow）` 中的代码示例
+    - 背景：找到 `2.16 背景设置（xd-background）` 中的代码示例
+        4.4 调整属性参数：根据具体需求调整valueKey、label等参数。
+
+    5. 示例：识别标题栏配置区域
+
+        5.1 观察图示类型：截图中显示"标题栏"标题，下方有标题文字、副标题文字、标题背景、标题边距、标题描边、标题投影、标题圆角等配置项。
+        5.2 对应组件类型：根据图示类型找到对应的组件类型。
+    - 标题对应 `title` 组件
+    - 标题文字和副标题文字对应 `xd-font` 组件
+    - 标题背景对应 `xd-background` 组件
+    - 标题边距对应 `xd-margin-padding` 组件
+    - 标题描边对应 `xd-border` 组件
+    - 标题投影对应 `xd-shadow` 组件
+    - 标题圆角对应 `xd-radius` 组件
+        5.3 查找代码示例：
+    - 标题：找到 `2.13 标题（title）` 中的代码示例
+    - 标题文字和副标题文字：找到 `2.17 字体设置（xd-font）` 中的代码示例
+    - 标题背景：找到 `2.16 背景设置（xd-background）` 中的代码示例
+    - 标题边距：找到 `2.9 边距设置（xd-margin-padding）` 中的代码示例
+    - 标题描边：找到 `2.10 边框设置（xd-border）` 中的代码示例
+    - 标题投影：找到 `2.11 投影设置（xd-shadow）` 中的代码示例
+    - 标题圆角：找到 `2.15 圆角设置（xd-radius）` 中的代码示例
+        5.4 调整属性参数：根据具体需求调整valueKey、label等参数。
+
+    6. 示例：识别查看更多配置区域
+
+        6.1 观察图示类型：截图中显示"查看更多"标题，下方有基础风格选项、更多文字设置、更多描边设置、更多投影设置、更多圆角设置等配置项。
+        6.2 对应组件类型：根据图示类型找到对应的组件类型。
+    - 标题对应 `title` 组件
+    - 基础风格选项对应 `xd-radio` 组件
+    - 更多文字设置对应 `xd-font` 组件
+    - 更多描边设置对应 `xd-border` 组件
+    - 更多投影设置对应 `xd-shadow` 组件
+    - 更多圆角设置对应 `xd-radius` 组件
+        6.3 查找代码示例：
+    - 标题：找到 `2.13 标题（title）` 中的代码示例
+    - 基础风格选项：找到 `2.2 单选按钮（xd-radio）` 中的代码示例
+    - 更多文字设置：找到 `2.17 字体设置（xd-font）` 中的代码示例
+    - 更多描边设置：找到 `2.10 边框设置（xd-border）` 中的代码示例
+    - 更多投影设置：找到 `2.11 投影设置（xd-shadow）` 中的代码示例
+    - 更多圆角设置：找到 `2.15 圆角设置（xd-radius）` 中的代码示例
+        6.4 调整属性参数：根据具体需求调整valueKey、label等参数。
+
+    7. 示例：识别商品样式配置区域
+
+        7.1 观察图示类型：截图中显示"商品样式"标题，下方有商品名称、品牌样式、商品背景、商品描边、商品圆角、图片圆角、商品投影等配置项。
+        7.2 对应组件类型：根据图示类型找到对应的组件类型。
+    - 标题对应 `title` 组件
+    - 商品名称、品牌样式、商品背景、商品描边、商品圆角、图片圆角、商品投影的默认/自定义选项对应 `xd-radio` 组件
+    - 商品名称的字号、颜色、粗细设置对应 `xd-font` 组件
+    - 品牌样式的文字颜色设置对应 `xd-color` 组件
+    - 商品背景的背景色设置对应 `xd-color` 组件
+    - 商品描边的样式、大小设置对应 `xd-border` 组件
+    - 商品圆角和图片圆角的大小设置对应 `xd-radius` 组件
+    - 商品投影的大小设置对应 `xd-shadow` 组件
+        7.3 查找代码示例：
+    - 标题：找到 `2.13 标题（title）` 中的代码示例
+    - 单选按钮选项：找到 `2.2 单选按钮（xd-radio）` 中的代码示例
+    - 字体设置：找到 `2.17 字体设置（xd-font）` 中的代码示例
+    - 颜色选择：找到 `2.8 颜色选择（xd-color）` 中的代码示例
+    - 边框设置：找到 `2.10 边框设置（xd-border）` 中的代码示例
+    - 圆角设置：找到 `2.15 圆角设置（xd-radius）` 中的代码示例
+    - 投影设置：找到 `2.11 投影设置（xd-shadow）` 中的代码示例
+        7.4 调整属性参数：根据具体需求调整valueKey、label等参数。
+
+四、注意事项
+
+1. **属性命名规范**：根据布局类型使用不同的前缀，如布局1使用`v1_`前缀，布局5使用`v5_`前缀。
+2. **条件渲染**：使用 `&&` 运算符实现条件渲染，如 `data['v1_is_title'] === 'Y' && {...}`。
+3. **分组管理**：使用 `group_start` 和 `group_end` 包裹相关属性。
+4. **数据过滤**：使用 `filter(i=>i)` 过滤掉无效的配置项。
+5. **区域判断**：无区域组件直接使用属性配置，多区域组件需要为每个区域生成独立的属性配置。
+
+五、总结
+
+通过本文档，你可以：
+
+1. **快速识别**：根据截图中的图示类型快速识别对应的组件类型。
+2. **直接使用**：参考代码示例直接使用或修改属性配置。
+3. **规范配置**：遵循统一的属性配置规范，确保代码的一致性和可维护性。
+
+本文档将帮助你在开发过程中更加高效地实现属性表单配置，减少错误和重复工作。
+
+---
+
+六、更新日志
+
+| 日期 | 版本 | 更新内容 |
+|------|------|----------|
+| 2026-03-13 | 1.1.0 | 更新文档标题为"自定义组件属性面板配置文档与规范" |
+| 2026-03-13 | 1.0.1 | 清空文档内容，仅保留基础结构 |
+
+---
+
+> 文档持续更新中...