npm package: @quec/panel-universalsetting-component
Description: 通用设置组件
Latest version: 2.4.1

## 版本记录

| 版本号 | 功能                                      | 时间       | 作者     | 备注                                             |
| ------ | ----------------------------------------- | ---------- | -------- | ------------------------------------------------ |
| 2.3.1  | fix: 解绑弹框宽度不对，不能靠近底部等问题 | 2025-12-5  | king.pan |                                                  |
| 2.0.0  | 改版                                      | 2025-9-9   | newlyn   | 大改版                                           |
| 1.6.1  | 新增功能                                  | 2025-7-17  | tim.peng | 新增解绑和重置设备成功回调接口                   |
| 1.6.0  | 新增功能                                  | 2025-6-27  | king.pan | 新增AI 记忆体配置，支持清除记忆体数据功能        |
| 1.4.3  | 优化                                      | 2025-6-11  | leo_xue  | 重命名成功后不会自动退出返回                     |
| 1.3.3  | 新增功能                                  | 2025-3-10  | newlyn   |                                                  |
| 1.0.17 | 扩展部分样式                              | 2024-12-11 | newlyn   | 纯蓝牙无法分享直接解绑 \| 共享设备解绑使用单弹框 |
| 1.0.16 | 扩展部分样式                              | 2024-12-11 | newlyn   |                                                  |
| 1.0.15 | 扩展部分样式                              | 2024-11-30 | newlyn   |                                                  |
| 1.0.0  | 首次创建                                  | 2024-08-20 | ives     | 无                                               |

## 配置项（v2.0）
### settingColorImgManager 设置组件颜色管理
### setStateManager 设置组件配置管理


## 组件列表 （v2.0）

### DeviceLogoComp 设备图

### DeviceMoreInfoComp & DeviceMoreInfoCompBox 更多信息

### DeviceNameComp  设备名称

### DeviceOfflineReminderComp  离线提醒

### DeviceProductDesComp 产品说明书

### DeviceShareComp & DeviceShareCompBox  设备共享

### DeviceUnbindComp  解绑按钮

### DeviceUpdateComp & DeviceUpdateCompBox  设备升级

### DeviceVerifyComp & DeviceVerifyCompBox   设备配网网络

### SignalStrengthComp  信号强度

## 组件类型（v2.0）

## 组件依赖

```
"dependencies": {
    "@react-native-community/netinfo": "9.3.6",
    "@quec/rn-device-module": "2.5.6",
    "@quec/rn-language-module": "0.1.9",
    "@quec/rn-router-module": "1.3.0",
    "@quec/rn-log-module": "1.0.6",
    "@quec/panel-base-ui": "^2.0.9",
    "react": "17.0.2",
    "react-native": "0.64.3",
    "react-native-modal": "^13.0.1",
    "@react-native-community/clipboard": "1.5.1",
    "react-native-modalbox": "2.0.2",
    "react-native-pdf": "6.6.2",
    "react-native-blob-util": "0.16.2",
    "zustand": "4.4.3",
    "react-native-webview": "11.23.1",
    "react-native-safe-area-context": "3.4.1"
  }
```
## 🚀 快速开始

### 1. 初始化设置配置管理

```ts
// App.tsx
import {
  setStateManager,settingColorImgManager 
} from '@quec/panel-universalsetting-component'
const App: FC<Props> = props => {
    setStateManager.registerCallbacks({
      area,
      loadingCallback: global.loading,
      loadingDismissCallback: global.loadingDismiss,
      tipCallback: global.toast,
    })
    settingColorImgManager.setColors({
        navigationBackground: colors.bgColor,
        ...
    })

  return <AppContainer />
}
```

### 2. 初始化设置页的路由

```ts
// router/index.tsx
import {
    ProductDescriptionPage,
  SettingMoreInfoPage,
  SettingPageConfig,
} from '@quec/panel-universalsetting-component'

... 

  const PageRoutes = useMemo(
    () => ({
      SettingPage: new PageRouterImp(PAGES.PAGE_BASE_SETTING, SettingPage, {
        headerShown: false,
      }),
      SettingMoreInfoPage: new PageRouterImp(
        SettingPageConfig.RN_PAGE_SETTING_MORE_INFO,
        SettingMoreInfoPage,
        {
          headerShown: false,
        },
      ),
      ProductDescriptionPage: new PageRouterImp(SettingPageConfig.RN_PAGE_NAME_PRODUCT_DESCRIPTION_PAGE, ProductDescriptionPage, {
        headerShown: false,
      }),
    }))
    


// router/router.d.ts
import { SettingPageConfig } from '@quec/panel-universalsetting-component'

export type RootStackParamList = {
    [PAGES.PAGE_BASE_SETTING]: undefined

    [SettingPageConfig.RN_PAGE_NAME_PRODUCT_DESCRIPTION_PAGE]: undefined
    [SettingPageConfig.RN_PAGE_SETTING_MORE_INFO]: undefined
    [SettingPageConfig.RN_PAGE_NAME_PRODUCT_DESCRIPTION_PAGE]: undefined
}
```



### 2. 初始化设置页的路由

```ts
// page/setting/index.tsx
import {
  DeviceMoreInfoComp,
  DeviceNameProductComp,
  DeviceOfflineReminderComp,
  DeviceProductDesComp,
  DeviceShareComp,
  DeviceUnbindComp,
  DeviceUpdateComp,
} from '@quec/panel-universalsetting-component'
const SettingPage: FC<SettingProps> = () => {
  return (
    <View>
        <SectionTitle title={i18n('quec_setting_basic_info')} ></SectionTitle>
        <DeviceNameProductComp ></DeviceNameProductComp>
        {!isShared && (
          <DeviceOfflineReminderComp
            arrowSource={arrowRightImg}
            showDivider={false}
          ></DeviceOfflineReminderComp>
        )}

        <DeviceProductDesComp arrowSource={arrowRightImg} showDivider={false} />
        <DeviceUnbindComp />
        <View style={{ height: 100 }} />
    </View>)
}
```