npm package: @quec/panel-component-customer-attrs
Description: 自定义物模型组件库
Author: ives.li@quectel.com
Latest version: 1.1.16

## 版本记录

| 版本号 | 功能                                                          | 时间       | 作者      | 备注 |
| ------ | ------------------------------------------------------------- | ---------- | --------- | ---- |
| 1.0.0  | 首次创建                                                      | 2022-09-05 | ives.li   | 无   |
| 1.0.4  | 样式修改                                                      | 2022-10-17 | ives.li   |      |
| 1.0.6  | 支持自定义 itemview                                           | 2024-01-05 | ives.li   |      |
| 1.0.7  | 去除 quec-app-basic-ui 库                                     | 2024-01-12 | ives.li   |      |
| 1.0.8  | 调整 ColorConfig 变量为组件内样式                             | 2024-01-17 | lucy.li   |      |
| 1.0.9  | 开关颜色的                                                    | 2024-06-16 | ives.li   |      |
| 1.1.0  |                                                               | 2024-06-16 | ives.li   |      |
| 1.1.1  | 开关-关的颜色 扩展枚举和数值型的选择样式 渐变色的背景样式扩展 | 2024-11-13 | newlyn.ma |      |
| 1.1.2  | enum 类型选中 icon 的颜色为 primaryColor                      | 2024-11-30 | newlyn.ma |      |
| 1.1.6  | 增加 Boolean 选择弹窗                                         | 2025-2-25  | lucy.li   |      |
| 1.1.7  | 重构 EnumAttrSimpleDialog                                     | 2025-2-25  | lucy.li   |      |
| 1.1.8  | dialog 组件适配暗黑模式                                       | 2025-2-25  | lucy.li   |      |

## 组件列表

### CustomerAttrsView

物模型列表展示

| 属性                   | 释义                                               | 类型                                                           | 默认值 | 备注                                                                                 |
| ---------------------- | -------------------------------------------------- | -------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------ |
| attrList               | 物模型列表                                         | any[]                                                          |        |                                                                                      |
| onBoolAttrChange       | bool 型值变化回调                                  | Function                                                       |        |                                                                                      |
| onEnumAttrChange       | enum 型点击回调                                    | Function                                                       |        |                                                                                      |
| onNumberAttrChange     | number 型点击回调                                  | Function                                                       |        |                                                                                      |
| onTextAttrChange       | text 型点击回调                                    | Function                                                       |        |                                                                                      |
| onStructAttrClick      | struct 型点击回调                                  | Function                                                       |        |                                                                                      |
| onArrayAttrClick       | array 型点击回调                                   | Function                                                       |        |                                                                                      |
| containerStyle         | 自定义界面物模型容器样式，如不设置，则采用默认样式 | ViewStyle                                                      |        |                                                                                      |
| itemTitleStyle         | item 标题样式，如不设置，则采用默认样式            | ViewStyle                                                      |        |                                                                                      |
| itemValueStyle         | item value 样式，如不设置，则采用默认样式          | ViewStyle                                                      |        |                                                                                      |
| itemMoreImg            | item 右侧按钮图片，如不设置，则采用默认样式        | any                                                            |        |                                                                                      |
| itemMoreImgStyle       | item 右侧更多图标样式，如不设置，则采用默认样式    | ViewStyle                                                      |        |                                                                                      |
| enableDivider          | 是否需要显示分割线                                 | boolean                                                        | true   |                                                                                      |
| dividerStyle           | item 分割线样式                                    | ViewStyle                                                      |        |                                                                                      |
| renderCustomerItemView | 自定义 item 样式                                   | (attr: any, showDivider: boolean) => React.ReactElement\| null |        | 自定义 attr 对应的 item 界面，如果返回 null 或者不定义该参数，则会按默认的界面渲染； |
| enumAttrDialogSimple   | 枚举型是否使用更为简单的样式                       | boolean                                                        |        |                                                                                      |
| numberUseSliderCode    | 数值型使用滑块的物模型的 Code 数组                 | string[]                                                       |        |                                                                                      |

### BaseReadStructAttrPage

只读结构体物模型界面

| 参数 | 释义                 | 类型   |
| ---- | -------------------- | ------ |
| attr | 对应结构体物模型数据 | Object |

| 方法                  | 返回值                 | 释义                                    |
| --------------------- | ---------------------- | --------------------------------------- |
| getContainerStyle     | ViewStyle or undefined | 整个物模型的容器                        |
| getItemContainerStyle | ViewStyle or undefined | 结构体物模型单一 item 容器样式          |
| getItemTitleStyle     | ViewStyle or undefined | 结构体物模型单独一个 item 的标题样式    |
| getItemValueStyle     | ViewStyle or undefined | 结构体物模型单独一个 item 的 value 样式 |
| enableDivider         | boolean                | 是否显示分割线                          |
| getDividerStyle       | ViewStyle or undefined | 分割线样式                              |

### BaseEditStructAttrPage

读写结构体物模型界面

| 参数 | 释义                 | 类型   |
| ---- | -------------------- | ------ |
| attr | 对应结构体物模型数据 | Object |

| 方法                                 | 返回值                  | 释义                                         |
| ------------------------------------ | ----------------------- | -------------------------------------------- |
| getContainerStyle                    | ViewStyle or undefined  | 整个物模型的容器                             |
| getItemGroupStyle                    | ViewStyle or undefined  | 单个 item 组样式                             |
| getItemGroupIconStyle                | ImageStyle or undefined | 单个 item 组里图片样式                       |
| getItemContainerStyle                | ViewStyle or undefined  | 结构体物模型单一 item 容器样式               |
| getItemTitleStyle                    | ViewStyle or undefined  | 结构体物模型单独一个 item 的标题样式         |
| getItemValueStyle                    | ViewStyle or undefined  | 结构体物模型单独一个 item 的 value 样式      |
| getItemMoreImg                       | any                     | 结构体物模型单独一个 item 的更多图片         |
| getItemMoreImgStyle                  | ImageStyle or undefined | 结构体物模型单独一个 item 的更多图片样式     |
| enableDivider                        | boolean                 | 是否显示分割线                               |
| getDividerStyle                      | ViewStyle or undefined  | 分割线样式                                   |
| sendCMD(attr: any, sendSpecs: any[]) |                         | 指令下发实现方法，sendSpecs 选中下发的物模型 |

### BaseReadArrayAttrPage

只读数组物模型界面

| 参数 | 释义               | 类型   |
| ---- | ------------------ | ------ |
| attr | 对应数组物模型数据 | Object |

| 方法                  | 返回值                 | 释义                                    |
| --------------------- | ---------------------- | --------------------------------------- |
| getContainerStyle     | ViewStyle or undefined | 整个物模型的容器                        |
| getItemContainerStyle | ViewStyle or undefined | 结构体物模型单一 item 容器样式          |
| getItemTitleStyle     | ViewStyle or undefined | 结构体物模型单独一个 item 的标题样式    |
| getItemValueStyle     | ViewStyle or undefined | 结构体物模型单独一个 item 的 value 样式 |
| enableDivider         | boolean                | 是否显示分割线                          |
| getDividerStyle       | ViewStyle or undefined | 分割线样式                              |

### BaseEditArrayAttrPage

只读数组物模型界面

| 参数 | 释义               | 类型   |
| ---- | ------------------ | ------ |
| attr | 对应数组物模型数据 | Object |

| 方法                             | 返回值                  | 释义                                         |
| -------------------------------- | ----------------------- | -------------------------------------------- |
| getContainerStyle                | ViewStyle or undefined  | 整个物模型的容器                             |
| getItemGroupStyle                | ViewStyle or undefined  | 单个 item 组样式                             |
| getItemGroupIconStyle            | ImageStyle or undefined | 单个 item 组里图片样式                       |
| getItemContainerStyle            | ViewStyle or undefined  | 结构体物模型单一 item 容器样式               |
| getItemTitleStyle                | ViewStyle or undefined  | 结构体物模型单独一个 item 的标题样式         |
| getItemValueStyle                | ViewStyle or undefined  | 结构体物模型单独一个 item 的 value 样式      |
| getItemMoreImg                   | any                     | 结构体物模型单独一个 item 的更多图片         |
| getItemMoreImgStyle              | ImageStyle or undefined | 结构体物模型单独一个 item 的更多图片样式     |
| enableDivider                    | boolean                 | 是否显示分割线                               |
| getDividerStyle                  | ViewStyle or undefined  | 分割线样式                                   |
| getStructItemGroupContainerStyle | ViewStyle or undefined  | 单个 struct item 里 容器样式                 |
| getStructItemContainerStyle      | ViewStyle or undefined  | 单个 struct item 里 struct 单个属性容器样式  |
| getStructItemDividerStyle        | ViewStyle or undefined  | 单个 struct item 里 struct 单个分割线样式    |
| sendCMD(attr: any, data: any[])  |                         | 指令下发实现方法，sendSpecs 选中下发的物模型 |

## 全局定义

全局定义文件

### ColorConfig

全局颜色定义

| 方法                                 | 释义                 | 备注                            |
| ------------------------------------ | -------------------- | ------------------------------- |
| getInstance()                        | 获取全局颜色配置对象 | 设置和获取全局颜色配置对象      |
| setColor(key: string, value: string) | 设置全局颜色         | key 的标识 参照 ImageConfigData |
| setColors(obj: ImageConfigData)      | 设置全局颜色         | 参照 ImageConfigData            |
| getColors()                          | 获取默认颜色         |                                 |

ImageConfigData

| 参数                 | 类型       | 默认值            | 释义                                                            |
| -------------------- | ---------- | ----------------- | --------------------------------------------------------------- |
| basePageBgColor      | ColorValue | '#f5f5f5'         | 默认的结构体、数组类型界面（例如 BaseEditStructAttrPage）背景色 |
| wrapperColor         | ColorValue | '#ffffff'         | 页面块题色                                                      |
| primaryColor         | ColorValue | '#3965FF'         | 主题色                                                          |
| btnFontColor         | ColorValue | '#FFFFFF'         | 主题色对应的按钮字体颜色                                        |
| dgBackground         | ColorValue | '#FFFFFF'         | 弹窗背景色                                                      |
| dgInputBackground    | ColorValue | '#EFF4F8'         | 弹窗输入框背景色                                                |
| dgInputHintColor     | ColorValue | '#A7B2BB'         | 弹窗输入框提示颜色                                              |
| textColor            | ColorValue | '#333333'         | 文字颜色                                                        |
| subTextColor         | ColorValue | '#666666'         | 次级文字颜色                                                    |
| hintTextColor        | ColorValue | '#999999'         | 提示文本颜色                                                    |
| dividerColor         | ColorValue | '#f5f5f5'         | 分割线颜色                                                      |
| errorColor           | ColorValue | '#FF4242'         | 错误提示颜色                                                    |
| switchActiveColor    | ColorValue | '#5BE860'         | 开关开颜色                                                      |
| switchNormalColor    | ColorValue | '#CCCCCC'         | 开关关颜色                                                      |
| LinearTopColor       | ColorValue | dgBackground      | 渐变顶色                                                        |
| LinearBottomColor    | ColorValue | dgBackground      | 渐变底部颜色                                                    |
| LinearTopSubColor    | ColorValue | dgInputBackground | 渐变顶色 Sub                                                    |
| LinearBottomSubColor | ColorValue | dgInputBackground | 渐变底部颜色 Sub                                                |

### LanguageConfig

全局语言定义

| 方法                                     | 释义                 | 备注                               |
| ---------------------------------------- | -------------------- | ---------------------------------- |
| getInstance()                            | 获取全局语言配置对象 | 设置和获取全局语言配置对象         |
| setLanguage(key: string, value: string)  | 设置全局语言         | key 的标识 参照 LanguageConfigData |
| setLanguages(object:LanguageConfigData ) | 设置全局语言         | 参照 LanguageConfigData            |
| getLanguage()                            | 获取默认语言         |                                    |

LanguageConfigData

| 参数                              | 类型   | 默认值                           | 释义                                       |
| --------------------------------- | ------ | -------------------------------- | ------------------------------------------ |
| cancel                            | string | '取消'                           |                                            |
| confirm                           | string | '确定'                           |                                            |
| plsEnterNumberGreaterThanMinValue | string | '请输入大于或等于%{min}的参数值' | 数值弹窗校验：输入大于等于最小值           |
| plsEnterNumberLessThanMaxValue    | string | '请输入小于或等于%{max}的参数值' | 数值弹窗校验：输入小于等于最大值           |
| plsEnterParamInfo                 | string | '请输入参数信息'                 | text 弹窗：请输入参数信息                  |
| allSelect                         | string | '全选'                           | 读写结构体界面全选按钮                     |
| cancelAllSelect                   | string | '取消全选'                       | 读写结构体界面取消全选按钮                 |
| sendCommand                       | string | '指令下发'                       | 读写结构体界面、读写物模型界面指令下发按钮 |
| selectDateYear                    | string | '年'                             | 时间选择器单位 年                          |
| selectDateMonth                   | string | '月'                             | 时间选择器单位 月                          |
| selectDateDay                     | string | '日'                             | 时间选择器单位 日                          |
| selectDateHour                    | string | '时'                             | 时间选择器单位 时                          |
| selectDateMinute                  | string | '分'                             | 时间选择器单位 分                          |
| noDataPlsAdd                      | string | '暂无数据，快去添加吧~'          | 数组结构体 空界面提示                      |
| plsToAdd                          | string | '去添加'                         | 数组结构体 添加数组                        |
| canNotMoreThanIt                  | string | '不能超过数量限制'               | 数组结构体，添加数量不能超出错误提示       |

### ImageConfigData

全局图片定义

| 方法                                 | 释义                 | 备注                            |
| ------------------------------------ | -------------------- | ------------------------------- |
| getInstance()                        | 获取全局图片配置对象 | 设置和获取全局图片配置对象      |
| setImage(key: string, value: string) | 设置全局图片         | key 的标识 参照 ImageConfigData |
| setImages(object: ImageConfigData)   | 设置全局图片         | 参照 ImageConfigData            |
| getImages()                          | 获取默认图片         |                                 |

ImageConfigData

| 参数             | 类型 | 默认值 | 释义                         |
| ---------------- | ---- | ------ | ---------------------------- |
| enumItemNormal   | any  |        | 枚举弹窗未选中 item 对应图标 |
| enumItemSelected | any  |        | 枚举弹窗选中 item 对应图标   |
| itemNormal       | any  |        | 结构体数组 item 选项         |
| itemSelected     | any  |        | 结构体数组选中选项           |
| moreImg          | any  |        | 可点击物模型 item 右箭头     |
| emptyIcon        | any  |        | 数组物模型界面空图片         |
| deleteImg        | any  |        | 数组物模型 删除图片          |
| addImg           | any  |        | 数组物模型 添加图片          |
| addIcon          | any  |        | 滑块增加步长的图标           |
| subIcon          | any  |        | 滑块减少步长的图标           |
| thumbImg         | any  |        | 滑块中心 thumb 的图片        |

## 组件依赖

```
"dependencies": {
    "moment": "^2.29.4",
    "react-native-localize": "^2.2.2",
    "react-fast-compare": "^3.2.0",
    "react-native-permissions": "^3.6.1",
    "react-native-elements": "^3.4.3",
    "@quec/panel-base-ui": "^2.0.9",
    "lodash": "^4.17.21",
    "react-native-localize": "^2.2.3",
  }
```