npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@quec/panel-component-customer-attrs

v1.1.16

Published

自定义物模型组件库

Readme

版本记录

| 版本号 | 功能 | 时间 | 作者 | 备注 | | ------ | ------------------------------------------------------------- | ---------- | --------- | ---- | | 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",
  }