@miot-rn/car-component 1.0.1

package/dist/modules/carInfoModule/README.md

@@ -0,0 +1,418 @@
+# CarInfoModule — 车辆信息模块
+
+## 概述
+
+车辆信息头部展示模块，集成电量/续航进度条和驻车状态显示。自动根据传入的 specs 判断单续航或双续航模式。
+
+## 引用方式
+
+本模块支持三种引用粒度，开发者可根据需要选择：
+
+| 引用方式 | 说明 | 适用场景 |
+|---------|------|---------|
+| **Module（推荐）** | 完整模块，内含数据层 + UI 层 | 标准业务场景，开箱即用 |
+| **Hooks** | 仅数据层 | 需要自定义 UI，复用数据逻辑 |
+| **Component** | 仅 UI 层（`CarInfoHeader`） | 已有数据源，仅需渲染 UI |
+
+**可用 Hooks：**
+
+| Hook | 说明 |
+|------|------|
+| `useSingleRangeData` | 单续航数据（电量百分比/预估里程/进度条颜色） |
+| `useDualRangeData` | 双续航数据（纯电续航 + 燃油续航） |
+| `useParkingStatusData` | 驻车状态（图标/文案/哨兵模式） |
+
+## 文件
+
+```
+carInfoModule/
+└── index.tsx
+```
+
+---
+
+## 1. Module 用法（完整模块）
+
+### Props
+
+```typescript
+interface CarInfoModuleProps {
+  specs: CarInfoSpecs;
+  connectStatus?: ConnectStatusValue;  // 默认 ConnectStatus.CONNECTING
+  containerStyle?: StyleProp<ViewStyle>;
+}
+```
+
+### Specs 定义
+
+#### 单续航相关
+
+| Spec | 用途 | 必填 |
+|------|------|------|
+| `specPowerBatteryPropertiesBatterySoCDisplay` | 电池 SOC 百分比显示 | 否 |
+| `specPowerBatteryPropertiesLowSocWarning` | 低电量警告等级（Level1/Level2） | 否 |
+| `specPowerBatteryPropertiesBatteryEstimatedMileage` | 电池预估里程 | 否 |
+| `specPowerBatteryPropertiesDCDRangeSOCTypeDisplay` | 续航显示类型（SOC/CLTCRange/MiRange） | 否 |
+| `specPowerBatteryPropertiesCLTCEstimatedRange` | CLTC 工况预估续航 | 否 |
+
+#### 双续航相关（存在任一则启用双续航模式）
+
+| Spec | 用途 | 必填 |
+|------|------|------|
+| `specPowerBatteryLifeEffectivenessPropertiesCltcEstimatedExtendEange` | CLTC 增程续航里程 | 否 |
+| `specPowerRangePropertiesCltcFuelEndurance` | CLTC 燃油续航里程 | 否 |
+| `specPowerRangePropertiesWltcPureEleCruisingEndurance` | WLTC 纯电续航里程 | 否 |
+| `specPowerRangePropertiesWltcFuelEndurance` | WLTC 燃油续航里程 | 否 |
+
+#### 驻车状态相关
+
+| Spec | 用途 | 必填 |
+|------|------|------|
+| `specBodyGearPropertiesGearStatus` | 档位状态（P/R/N/D） | 否 |
+| `specBodyPowerModePropertiesPowerModeState` | 电源模式（Off/Awake） | 否 |
+| `specDoorCentralLockPropertiesCentralLockState` | 中控锁状态（Locked/Unlocked） | 否 |
+| `specSentryInfoPropertiesSentryWorkMode` | 哨兵模式（ON/StandBy/Alert/Alarm） | 否 |
+
+### 核心逻辑
+
+```
+rangeType = 存在任一双续航 spec ? 'dual' : 'single'
+```
+
+### 示例
+
+```tsx
+import { CarInfoModule } from '@miot-rn/car-component/dist/modules';
+import { ConnectStatus } from '@miot-rn/car-component/dist/config';
+
+<CarInfoModule
+  specs={{
+    specPowerBatteryPropertiesBatterySoCDisplay: batterySocSpec,
+    specPowerBatteryPropertiesLowSocWarning: lowSocSpec,
+    specPowerBatteryPropertiesBatteryEstimatedMileage: mileageSpec,
+    specPowerBatteryPropertiesDCDRangeSOCTypeDisplay: dcdTypeSpec,
+    specBodyGearPropertiesGearStatus: gearSpec,
+    specBodyPowerModePropertiesPowerModeState: powerModeSpec,
+    specDoorCentralLockPropertiesCentralLockState: lockSpec,
+  }}
+  connectStatus={ConnectStatus.CONNECTED}
+/>
+```
+
+---
+
+## 2. Hooks 用法
+
+### 2.1 `useSingleRangeData` — 单续航数据
+
+#### 引入
+
+```typescript
+import { useSingleRangeData } from '@miot-rn/car-component/dist/hooks/useSingleRangeData';
+```
+
+#### 入参
+
+```typescript
+interface UseSingleRangeDataProps {
+  specPowerBatteryPropertiesBatterySoCDisplay: Spec;
+  specPowerBatteryPropertiesLowSocWarning: Spec;
+  specPowerBatteryPropertiesBatteryEstimatedMileage: Spec;
+  specPowerBatteryPropertiesDCDRangeSOCTypeDisplay: Spec;
+  specPowerBatteryPropertiesCLTCEstimatedRange: Spec;
+}
+```
+
+#### 返回值
+
+```typescript
+interface RangeDisplayData {
+  currentRange: number | string;  // 当前续航值
+  totalRange: number;             // 总续航量（进度条满值）
+  unit: string;                   // 单位：'%' 或 i18n 的 'km'
+  color: string;                  // 进度条颜色（绿/黄/红）
+}
+```
+
+#### 显示类型（由 `DCDRangeSOCTypeDisplay` 决定）
+
+| 类型 | 显示内容 | 单位 |
+|------|----------|------|
+| SOC | 电池电量百分比 | % |
+| CLTCRange | CLTC 预估续航 | km（i18n） |
+| MiRange | 电池预估里程 | km（i18n） |
+
+#### 进度条颜色（由 `LowSocWarning` 决定）
+
+| 警告等级 | 颜色 |
+|----------|------|
+| 正常 | `mjcard_color_green_2`（绿色） |
+| Level2 Warning | `mjcard_color_yellow_2`（黄色） |
+| Level1 Warning | `mjcard_color_red_2`（红色） |
+
+#### 示例
+
+```tsx
+import { useSingleRangeData } from '@miot-rn/car-component/dist/hooks/useSingleRangeData';
+
+const MyRangeDisplay = ({ specs }) => {
+  const rangeData = useSingleRangeData({
+    specPowerBatteryPropertiesBatterySoCDisplay: specs.batterySoc,
+    specPowerBatteryPropertiesLowSocWarning: specs.lowSoc,
+    specPowerBatteryPropertiesBatteryEstimatedMileage: specs.mileage,
+    specPowerBatteryPropertiesDCDRangeSOCTypeDisplay: specs.dcdType,
+    specPowerBatteryPropertiesCLTCEstimatedRange: specs.cltcRange,
+  });
+
+  return (
+    <View>
+      <Text style={{ color: rangeData.color }}>
+        {rangeData.currentRange} {rangeData.unit}
+      </Text>
+      <ProgressBar
+        progress={Number(rangeData.currentRange) / rangeData.totalRange}
+        color={rangeData.color}
+      />
+    </View>
+  );
+};
+```
+
+---
+
+### 2.2 `useDualRangeData` — 双续航数据
+
+#### 引入
+
+```typescript
+import { useDualRangeData } from '@miot-rn/car-component/dist/hooks/useDualRangeData';
+```
+
+#### 入参
+
+```typescript
+interface UseDualRangeDataProps {
+  specPowerBatteryPropertiesDCDRangeSOCTypeDisplay: Spec;
+  specPowerBatteryLifeEffectivenessPropertiesCltcEstimatedExtendEange: Spec;
+  specPowerRangePropertiesCltcFuelEndurance: Spec;
+  specPowerRangePropertiesWltcPureEleCruisingEndurance: Spec;
+  specPowerRangePropertiesWltcFuelEndurance: Spec;
+}
+```
+
+#### 返回值
+
+```typescript
+interface DualRangeDisplayData {
+  currentElectricRange: number | string;  // 当前纯电续航（'--' 表示无数据）
+  electricRange: number;                  // 纯电续航满值
+  unit: string;                           // 单位 km（i18n）
+  electricColor: string;                  // 纯电进度条颜色
+  currentFuelRange: number | string;      // 当前燃油续航（'--' 表示无数据）
+  fuelRange: number;                      // 燃油续航满值
+  fuelColor: string;                      // 燃油进度条颜色
+}
+```
+
+#### 数据源选择（由 `DCDRangeSOCTypeDisplay` 决定）
+
+| 类型 | 纯电数据源 | 燃油数据源 |
+|------|-----------|-----------|
+| WLTCRange | `WltcPureEleCruisingEndurance` | `WltcFuelEndurance` |
+| 默认(CLTC) | `CltcEstimatedExtendEange` | `CltcFuelEndurance` |
+
+#### 示例
+
+```tsx
+import { useDualRangeData } from '@miot-rn/car-component/dist/hooks/useDualRangeData';
+
+const MyDualRangeDisplay = ({ specs }) => {
+  const dualData = useDualRangeData({
+    specPowerBatteryPropertiesDCDRangeSOCTypeDisplay: specs.dcdType,
+    specPowerBatteryLifeEffectivenessPropertiesCltcEstimatedExtendEange: specs.cltcExtend,
+    specPowerRangePropertiesCltcFuelEndurance: specs.cltcFuel,
+    specPowerRangePropertiesWltcPureEleCruisingEndurance: specs.wltcElec,
+    specPowerRangePropertiesWltcFuelEndurance: specs.wltcFuel,
+  });
+
+  return (
+    <View style={{ flexDirection: 'row' }}>
+      <View>
+        <Text>纯电: {dualData.currentElectricRange} {dualData.unit}</Text>
+      </View>
+      <View>
+        <Text>燃油: {dualData.currentFuelRange} {dualData.unit}</Text>
+      </View>
+    </View>
+  );
+};
+```
+
+---
+
+### 2.3 `useParkingStatusData` — 驻车状态数据
+
+#### 引入
+
+```typescript
+import { useParkingStatusData } from '@miot-rn/car-component/dist/hooks/useParkingStatusData';
+```
+
+#### 入参
+
+```typescript
+interface UseParkingStatusDataProps {
+  specBodyGearPropertiesGearStatus: Spec;
+  specBodyPowerModePropertiesPowerModeState: Spec;
+  specDoorCentralLockPropertiesCentralLockState: Spec;
+  specSentryInfoPropertiesSentryWorkMode?: Spec;       // 可选
+  connectStatus?: ConnectStatusValue;                   // 默认 CONNECTING
+}
+```
+
+#### 返回值
+
+```typescript
+interface ParkingStatusInfo {
+  parkingIcon?: React.ReactElement;                     // 状态图标
+  parkingStatus: string | Record<string, string>;       // 状态文案（i18n）
+  showDivider: boolean;                                 // 是否显示分割线（哨兵模式时）
+  textStyle: StyleProp<TextStyle>;                      // 文案样式
+  isLoading?: boolean;                                  // 是否加载中
+}
+```
+
+#### 状态判断流程
+
+```
+连接中 → Loading 图标 + "连接中"
+电源 Off/Awake + 中控锁 Locked → "已锁车"（哨兵模式时显示哨兵图标 + 分割线）
+档位 R/N/D → "行驶中"
+其他 → "已驻车"
+```
+
+#### 示例
+
+```tsx
+import { useParkingStatusData } from '@miot-rn/car-component/dist/hooks/useParkingStatusData';
+import { ConnectStatus } from '@miot-rn/car-component/dist/config';
+
+const MyParkingStatus = ({ specs, connectStatus }) => {
+  const status = useParkingStatusData({
+    specBodyGearPropertiesGearStatus: specs.gear,
+    specBodyPowerModePropertiesPowerModeState: specs.powerMode,
+    specDoorCentralLockPropertiesCentralLockState: specs.lock,
+    specSentryInfoPropertiesSentryWorkMode: specs.sentry,
+    connectStatus,
+  });
+
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+      {status.isLoading && <ActivityIndicator />}
+      {status.parkingIcon}
+      {status.showDivider && <View style={styles.divider} />}
+      <Text style={status.textStyle}>{status.parkingStatus}</Text>
+    </View>
+  );
+};
+```
+
+---
+
+## 3. Component 用法（`CarInfoHeader`）
+
+适用于已有数据源，仅需渲染车辆信息头部 UI 的场景。
+
+### 引入
+
+```typescript
+import { CarInfoHeader } from '@miot-rn/car-component/dist/components/carInfoHeader';
+```
+
+### Props
+
+```typescript
+interface CarInfoHeaderProps {
+  singleRangeData?: SingleRangeData;    // 传入则显示单续航模式
+  dualRangeData?: DualRangeData;        // 传入则显示双续航模式（优先于单续航）
+  parkingStatus?: ParkingStatusData;    // 驻车状态
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+interface SingleRangeData {
+  currentRange: number | string;
+  totalRange: number;
+  unit: string;
+  color?: string;
+}
+
+interface DualRangeData {
+  currentElectricRange: number | string;
+  electricRange: number;
+  unit: string;
+  electricColor?: string;
+  currentFuelRange: number | string;
+  fuelRange: number;
+  fuelColor?: string;
+}
+
+interface ParkingStatusData {
+  status?: string;
+  icon?: React.ReactElement;
+  showDivider?: boolean;
+  textStyle?: StyleProp<TextStyle>;
+  isLoading?: boolean;
+}
+```
+
+### 渲染结构
+
+```
+Container (1:2:1 flex 垂直布局, 最大 336x336)
+  ├── 续航指示器区域 (flex 1)
+  │   ├── SingleRangeIndicator (单续航: 数值 + 进度条)
+  │   └── DualRangeIndicator (双续航: 纯电 + 燃油并排)
+  ├── 车辆图片区域 (flex 2)
+  │   └── CarImage (Device.iconURL 或 MijiaLogo 占位)
+  └── 驻车状态区域 (flex 1)
+      └── ParkingStatus (图标 + 分割线 + 状态文案)
+```
+
+### 示例
+
+```tsx
+import { CarInfoHeader } from '@miot-rn/car-component/dist/components/carInfoHeader';
+
+// 单续航
+<CarInfoHeader
+  singleRangeData={{
+    currentRange: 75,
+    totalRange: 100,
+    unit: '%',
+    color: '#4CAF50',
+  }}
+  parkingStatus={{
+    status: '已锁车',
+    isLoading: false,
+  }}
+/>
+
+// 双续航
+<CarInfoHeader
+  dualRangeData={{
+    currentElectricRange: 120,
+    electricRange: 200,
+    currentFuelRange: 450,
+    fuelRange: 800,
+    unit: 'km',
+  }}
+/>
+```
+
+### 子组件导出
+
+`CarInfoHeader` 同时导出以下子组件，支持更细粒度的 UI 复用：
+
+```typescript
+export { SingleRangeIndicator, DualRangeIndicator, CarImage, ParkingStatus };
+```

package/dist/modules/carInfoModule/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { Spec } from '../../types';
+import { ConnectStatusValue } from '../../config';
+export interface CarInfoSpecs {
+    specPowerBatteryPropertiesBatterySoCDisplay?: Spec;
+    specPowerBatteryPropertiesLowSocWarning?: Spec;
+    specPowerBatteryPropertiesBatteryEstimatedMileage?: Spec;
+    specPowerBatteryPropertiesDCDRangeSOCTypeDisplay?: Spec;
+    specPowerBatteryPropertiesCLTCEstimatedRange?: Spec;
+    specPowerBatteryLifeEffectivenessPropertiesCltcEstimatedExtendEange?: Spec;
+    specPowerRangePropertiesCltcFuelEndurance?: Spec;
+    specPowerRangePropertiesWltcPureEleCruisingEndurance?: Spec;
+    specPowerRangePropertiesWltcFuelEndurance?: Spec;
+    specBodyGearPropertiesGearStatus?: Spec;
+    specBodyPowerModePropertiesPowerModeState?: Spec;
+    specDoorCentralLockPropertiesCentralLockState?: Spec;
+    specSentryInfoPropertiesSentryWorkMode?: Spec;
+}
+export interface CarInfoModuleProps {
+    specs: CarInfoSpecs;
+    connectStatus?: ConnectStatusValue;
+    containerStyle?: StyleProp<ViewStyle>;
+}
+export declare const CarInfoModule: ({ specs, connectStatus, containerStyle }: CarInfoModuleProps) => React.JSX.Element;
+export default CarInfoModule;

package/dist/modules/carInfoModule/index.js

@@ -0,0 +1,67 @@
+/* eslint-disable no-console */
+import React, { useMemo } from 'react';
+import { CarInfoHeader } from "../../components/carInfoHeader";
+import { useSingleRangeData, useDualRangeData, useParkingStatusData, ConnectStatus } from "../../hooks";
+export const CarInfoModule = ({
+  specs,
+  connectStatus = ConnectStatus.CONNECTING,
+  containerStyle
+}) => {
+  // 判断 rangeType 类型
+  const rangeType = useMemo(() => {
+    return specs.specPowerBatteryLifeEffectivenessPropertiesCltcEstimatedExtendEange || specs.specPowerRangePropertiesWltcFuelEndurance || specs.specPowerRangePropertiesWltcPureEleCruisingEndurance || specs.specPowerRangePropertiesCltcFuelEndurance ? 'dual' : 'single';
+  }, [specs.specPowerBatteryLifeEffectivenessPropertiesCltcEstimatedExtendEange, specs.specPowerRangePropertiesWltcFuelEndurance, specs.specPowerRangePropertiesWltcPureEleCruisingEndurance, specs.specPowerRangePropertiesCltcFuelEndurance]);
+
+  // 单续航数据
+  const singleRangeData = useSingleRangeData({
+    specPowerBatteryPropertiesBatterySoCDisplay: specs.specPowerBatteryPropertiesBatterySoCDisplay,
+    specPowerBatteryPropertiesLowSocWarning: specs.specPowerBatteryPropertiesLowSocWarning,
+    specPowerBatteryPropertiesBatteryEstimatedMileage: specs.specPowerBatteryPropertiesBatteryEstimatedMileage,
+    specPowerBatteryPropertiesDCDRangeSOCTypeDisplay: specs.specPowerBatteryPropertiesDCDRangeSOCTypeDisplay,
+    specPowerBatteryPropertiesCLTCEstimatedRange: specs.specPowerBatteryPropertiesCLTCEstimatedRange
+  });
+
+  // 双续航数据
+  const dualRangeData = useDualRangeData({
+    specPowerBatteryPropertiesDCDRangeSOCTypeDisplay: specs.specPowerBatteryPropertiesDCDRangeSOCTypeDisplay,
+    specPowerBatteryLifeEffectivenessPropertiesCltcEstimatedExtendEange: specs.specPowerBatteryLifeEffectivenessPropertiesCltcEstimatedExtendEange,
+    specPowerRangePropertiesCltcFuelEndurance: specs.specPowerRangePropertiesCltcFuelEndurance,
+    specPowerRangePropertiesWltcPureEleCruisingEndurance: specs.specPowerRangePropertiesWltcPureEleCruisingEndurance,
+    specPowerRangePropertiesWltcFuelEndurance: specs.specPowerRangePropertiesWltcFuelEndurance
+  });
+
+  // 驻车状态数据
+  const parkingStatusInfo = useParkingStatusData({
+    specBodyGearPropertiesGearStatus: specs.specBodyGearPropertiesGearStatus,
+    specBodyPowerModePropertiesPowerModeState: specs.specBodyPowerModePropertiesPowerModeState,
+    specDoorCentralLockPropertiesCentralLockState: specs.specDoorCentralLockPropertiesCentralLockState,
+    specSentryInfoPropertiesSentryWorkMode: specs.specSentryInfoPropertiesSentryWorkMode,
+    connectStatus
+  });
+
+  // 构建传递给 CarInfoHeader 的 props
+  const getCarInfoHeaderProps = () => {
+    // 转换 parkingStatus，确保 status 为 string 类型
+    const parkingStatus = {
+      status: typeof parkingStatusInfo.parkingStatus === 'string' ? parkingStatusInfo.parkingStatus : undefined,
+      icon: parkingStatusInfo.parkingIcon,
+      showDivider: parkingStatusInfo.showDivider,
+      textStyle: parkingStatusInfo.textStyle,
+      isLoading: parkingStatusInfo?.isLoading
+    };
+    if (rangeType === 'single') {
+      return {
+        singleRangeData,
+        parkingStatus,
+        containerStyle
+      };
+    }
+    return {
+      dualRangeData,
+      parkingStatus,
+      containerStyle
+    };
+  };
+  return /*#__PURE__*/React.createElement(CarInfoHeader, getCarInfoHeaderProps());
+};
+export default CarInfoModule;

package/dist/modules/index.d.ts

@@ -0,0 +1,2 @@
+export { CarInfoModule } from './carInfoModule';
+export { SeatModule } from './seatModule';

package/dist/modules/index.js

@@ -0,0 +1,2 @@
+export { CarInfoModule } from "./carInfoModule";
+export { SeatModule } from "./seatModule";