@miot-rn/car-component 1.0.1

package/dist/modules/seatModule/README.md

@@ -0,0 +1,345 @@
+# SeatModule — 座椅控制模块
+
+## 概述
+
+座椅加热/通风控制模块，支持前排 2 座 + 后排 3 座的加热和通风档位切换。根据传入的 specs 动态生成座椅布局，无座椅 spec 时自动隐藏。
+
+## 引用方式
+
+本模块支持三种引用粒度，开发者可根据需要选择：
+
+| 引用方式 | 说明 | 适用场景 |
+|---------|------|---------|
+| **Module（推荐）** | 完整模块，内含数据层 + UI 层 | 标准业务场景，开箱即用 |
+| **Hook** | 仅数据层（`useSeatControlData`） | 需要自定义 UI，复用座椅数据逻辑 |
+| **Component** | 仅 UI 层（`SeatControlGroup`） | 已有数据源，仅需渲染 UI |
+
+## 文件
+
+```
+seatModule/
+└── index.tsx
+```
+
+---
+
+## 1. Module 用法（完整模块）
+
+### Props
+
+```typescript
+interface SeatModuleProps {
+  specs: SeatSpecs;
+  disabled?: boolean;       // 默认 false，禁用所有座椅控制
+  onSeatChange?: (params: {
+    propType: string;        // 'heating' | 'ventilation'
+    previousValue: number;
+    currentValue: number;
+  }) => void;
+  style?: StyleProp<ViewStyle>;
+}
+```
+
+### Specs 定义
+
+#### 第一排座椅
+
+| Spec | 用途 | 必填 |
+|------|------|------|
+| `specSeatRow1LeftPropertiesHeating` | 主驾加热 | 否 |
+| `specSeatRow1LeftPropertiesSeatVentilation` | 主驾通风 | 否 |
+| `specSeatRow1RightPropertiesHeating` | 副驾加热 | 否 |
+| `specSeatRow1RightPropertiesSeatVentilation` | 副驾通风 | 否 |
+
+#### 第二排座椅
+
+| Spec | 用途 | 必填 |
+|------|------|------|
+| `specSeatRow2LeftPropertiesHeating` | 后排左座加热 | 否 |
+| `specSeatRow2LeftPropertiesSeatVentilation` | 后排左座通风 | 否 |
+| `specSeatRow2MiddlePropertiesHeating` | 后排中座加热 | 否 |
+| `specSeatRow2MiddlePropertiesSeatVentilation` | 后排中座通风 | 否 |
+| `specSeatRow2RightPropertiesHeating` | 后排右座加热 | 否 |
+| `specSeatRow2RightPropertiesSeatVentilation` | 后排右座通风 | 否 |
+
+### 核心逻辑
+
+- 每个座位根据是否传入 heating/ventilation spec 决定是否显示
+- 整行无座椅 spec 时该行不渲染
+- 所有座椅 spec 均未传入时 `hasSeats = false`，整个模块不渲染
+
+### 示例
+
+```tsx
+import { SeatModule } from '@miot-rn/car-component/dist/modules';
+
+<SeatModule
+  specs={{
+    specSeatRow1LeftPropertiesHeating: row1LeftHeatingSpec,
+    specSeatRow1LeftPropertiesSeatVentilation: row1LeftVentSpec,
+    specSeatRow1RightPropertiesHeating: row1RightHeatingSpec,
+  }}
+  disabled={!isConnected}
+  onSeatChange={({ propType, previousValue, currentValue }) => {
+    console.log(`${propType}: ${previousValue} → ${currentValue}`);
+  }}
+/>
+```
+
+---
+
+## 2. Hook 用法（`useSeatControlData`）
+
+适用于需要**自定义 UI** 但复用座椅数据逻辑的场景。
+
+### 引入
+
+```typescript
+import { useSeatControlData } from '@miot-rn/car-component/dist/hooks/useSeatControlData';
+```
+
+### 入参
+
+```typescript
+interface SeatControlDataProps {
+  specs: SeatSpecs;
+  disabled?: boolean;       // 默认 false
+  onSeatChange?: (params: {
+    propType: string;
+    previousValue: number;
+    currentValue: number;
+  }) => void;
+}
+```
+
+### 返回值
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `seatRows` | `SeatRowData[][]` | 二维座椅数据，按行列组织 |
+| `seatTitles` | `SeatTitles` | 各座椅位置 i18n 标题 |
+| `handleSeatChange` | `(params) => void` | 档位变更处理（内部调用 `setSpec` + 触发 `onSeatChange`） |
+| `hasSeats` | `boolean` | 是否有可用座椅（`false` 时应隐藏 UI） |
+
+**`seatRows` 结构：**
+
+```typescript
+// seatRows[rowIndex][seatIndex]
+{
+  serviceType: string;       // 座椅服务标识
+  title: string;             // 座椅位置标题（i18n）
+  disabled: boolean;         // 是否禁用
+  buttons: Array<{
+    spec: Spec;              // 原始 spec 引用
+    propType: 'heating' | 'ventilation';
+    states: Array<{
+      value: string;         // 档位值
+      backgroundColor: string;  // 背景色
+      icon: ReactElement;    // 档位图标
+    }>;
+    currentStateIndex: number;  // 当前档位索引
+    disabled: boolean;
+  }>;
+}
+```
+
+**`seatTitles` 结构：**
+
+```typescript
+{
+  groupTitle: string;    // 分组标题
+  frontLeft: string;     // 主驾
+  frontRight: string;    // 副驾
+  rearLeft: string;      // 后排左座
+  rearCenter: string;    // 后排中座
+  rearRight: string;     // 后排右座
+}
+```
+
+### 档位状态与图标
+
+**加热档位（橙色）：**
+
+| 档位 | 图标 | 背景色 |
+|------|------|--------|
+| Off | `SeatGearHeatingOff` | `mj_color_gray_fill_2` |
+| Level 1 | `SeatGearHeatingLevelOne` | `mjcard_color_orange_1` |
+| Level 2 | `SeatGearHeatingLevelTwo` | `mjcard_color_orange_1` |
+| Level 3 | `SeatGearHeatingLevelThree` | `mjcard_color_orange_1` |
+
+**通风档位（蓝色）：**
+
+| 档位 | 图标 | 背景色 |
+|------|------|--------|
+| Off | `SeatGearVentilationOff` | `mj_color_gray_fill_2` |
+| Level 1 | `SeatGearVentilationLevelOne` | `mjcard_color_blue_1` |
+| Level 2 | `SeatGearVentilationLevelTwo` | `mjcard_color_blue_1` |
+| Level 3 | `SeatGearVentilationLevelThree` | `mjcard_color_blue_1` |
+
+### 导出的工具函数
+
+Hook 文件同时导出以下工具，供高级自定义场景使用：
+
+```typescript
+// 生成档位图标映射
+export const LEVEL_ICONS: (colorToken: any) => LevelIcons;
+
+// 生成加热/通风状态配置（排序、颜色、图标）
+export const TYPE_CONFIG: (colorToken: any, levelIcons: LevelIcons) => Record<string, StateConfig>;
+
+// 座椅标题 i18n 集合
+export const SEAT_TITLES: { groupTitle, frontLeft, frontRight, rearLeft, rearCenter, rearRight };
+```
+
+### 示例
+
+```tsx
+import { useSeatControlData } from '@miot-rn/car-component/dist/hooks/useSeatControlData';
+
+const MyCustomSeatControl = ({ specs, disabled }) => {
+  const { seatRows, seatTitles, handleSeatChange, hasSeats } = useSeatControlData({
+    specs,
+    disabled,
+    onSeatChange: ({ propType, previousValue, currentValue }) => {
+      console.log(`${propType}: ${previousValue} → ${currentValue}`);
+    },
+  });
+
+  if (!hasSeats) return null;
+
+  return (
+    <View>
+      <Text>{seatTitles.groupTitle}</Text>
+      {seatRows.map((row, rowIdx) => (
+        <View key={rowIdx} style={{ flexDirection: 'row' }}>
+          {row.map((seat) => (
+            <View key={seat.serviceType}>
+              <Text>{seat.title}</Text>
+              {seat.buttons.map((btn) => (
+                <TouchableOpacity
+                  key={btn.propType}
+                  disabled={btn.disabled}
+                  onPress={() => {
+                    const nextIndex = (btn.currentStateIndex + 1) % btn.states.length;
+                    handleSeatChange({
+                      propType: btn.propType,
+                      spec: btn.spec,
+                      previousValue: btn.states[btn.currentStateIndex].value,
+                      currentValue: btn.states[nextIndex].value,
+                    });
+                  }}
+                  style={{ backgroundColor: btn.states[btn.currentStateIndex].backgroundColor }}
+                >
+                  {btn.states[btn.currentStateIndex].icon}
+                </TouchableOpacity>
+              ))}
+            </View>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+};
+```
+
+---
+
+## 3. Component 用法（`SeatControlGroup`）
+
+适用于已有数据源，仅需渲染座椅控制 UI 的场景。
+
+### 引入
+
+```typescript
+import { SeatControlGroup } from '@miot-rn/car-component/dist/components/seatControlGroup';
+```
+
+### Props
+
+```typescript
+interface SeatControlGroupProps {
+  seatRows: SeatConfig[][];             // 二维座椅配置
+  title?: string;                       // 分组标题
+  onSeatChange?: (params: OnButtonPressParams) => void;
+  disabled?: boolean;                   // 默认 false
+  style?: StyleProp<ViewStyle>;
+}
+
+type SeatConfig = {
+  serviceType: string;                  // 座椅标识
+  title: string;                        // 座椅标题
+  buttons: ControlButtonConfig[];       // 控制按钮列表
+  disabled?: boolean;                   // 单座椅禁用
+};
+
+type ControlButtonConfig = {
+  propType: string;                     // 'heating' | 'ventilation'
+  spec?: string;                        // spec 标识
+  title?: string;
+  states: ButtonStateConfig[];          // 档位状态列表
+  currentStateIndex: number;            // 当前档位索引
+  disabled?: boolean;
+};
+
+type ButtonStateConfig = {
+  value: string;                        // 档位值
+  backgroundColor: string;             // 背景色
+  disabledBackgroundColor: string;     // 禁用背景色
+  icon: React.ReactElement;            // 档位图标
+  iconColor: string;                   // 图标颜色
+};
+
+type OnButtonPressParams = {
+  propType: string;
+  spec?: string;
+  previousStateIndex: number;
+  currentStateIndex: number;
+  previousValue: string;
+  currentValue: string;
+  action: 'switch';
+};
+```
+
+### 渲染结构
+
+```
+GroupContainer (带标题)
+  └── ContainerWithGap (每行, horizontal, gap=8)
+      └── SeatCard (每个座椅)
+          └── CardContainer > SeatControl
+              ├── 座椅标题
+              └── 圆形档位切换按钮（点击循环切换）
+```
+
+### 示例
+
+```tsx
+import { SeatControlGroup } from '@miot-rn/car-component/dist/components/seatControlGroup';
+
+<SeatControlGroup
+  title="座椅"
+  disabled={false}
+  seatRows={[
+    [
+      {
+        serviceType: 'front-left',
+        title: '主驾',
+        buttons: [
+          {
+            propType: 'heating',
+            states: [
+              { value: '0', backgroundColor: '#gray', icon: <OffIcon /> },
+              { value: '1', backgroundColor: '#orange', icon: <Level1Icon /> },
+            ],
+            currentStateIndex: 0,
+            disabled: false,
+          },
+        ],
+      },
+    ],
+  ]}
+  onSeatChange={(params) => {
+    console.log('座椅操作:', params);
+  }}
+/>
+```

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import type { SeatSpecs } from '../../hooks/useSeatControlData';
+export interface SeatModuleProps {
+    specs: SeatSpecs;
+    disabled?: boolean;
+    onSeatChange?: (params: {
+        propType: string;
+        previousValue: number;
+        currentValue: number;
+    }) => void;
+    style?: StyleProp<ViewStyle>;
+}
+export declare const SeatModule: ({ specs, disabled, onSeatChange, style }: SeatModuleProps) => React.JSX.Element | null;
+export default SeatModule;

package/dist/modules/seatModule/index.js

@@ -0,0 +1,40 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { SeatControlGroup } from "../../components/seatControlGroup";
+import { useSeatControlData } from "../../hooks";
+export const SeatModule = ({
+  specs,
+  disabled = false,
+  onSeatChange,
+  style
+}) => {
+  const {
+    seatRows,
+    seatTitles,
+    handleSeatChange: handleSeatChangeFromHook,
+    hasSeats
+  } = useSeatControlData({
+    specs,
+    disabled,
+    onSeatChange
+  });
+  if (!hasSeats) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(SeatControlGroup, {
+    seatRows: seatRows,
+    title: seatTitles.groupTitle,
+    onSeatChange: params => {
+      // Convert from SeatControlGroup format to useSeatControlData format
+      handleSeatChangeFromHook({
+        propType: params.propType,
+        spec: params.spec,
+        previousValue: params.previousValue,
+        currentValue: params.currentValue
+      });
+    },
+    disabled: disabled,
+    style: style
+  });
+};
+export default SeatModule;

package/dist/modules/steeringWheelModule/README.md

@@ -0,0 +1,216 @@
+# SteeringWheelModule — 方向盘加热模块
+
+## 概述
+
+方向盘加热控制模块，提供 Off / Level1 / Level2 / Level3 四档加热选择。
+
+> ⚠️ 当前未从 `modules/index.ts` 导出，需直接引用子路径。
+
+## 引用方式
+
+本模块支持三种引用粒度，开发者可根据需要选择：
+
+| 引用方式 | 说明 | 适用场景 |
+|---------|------|---------|
+| **Module（推荐）** | 完整模块，内含数据层 + UI 层 | 标准业务场景，开箱即用 |
+| **Hook** | 仅数据层（`useSteeringWheelData`） | 需要自定义 UI，复用数据逻辑 |
+| **Component** | 仅 UI 层（`SteeringWheelHotCard`） | 已有数据源，仅需渲染 UI |
+
+## 文件
+
+```
+steeringWheelModule/
+└── index.tsx
+```
+
+---
+
+## 1. Module 用法（完整模块）
+
+### Props
+
+```typescript
+interface SteeringWheelModuleProps {
+  specs: SteeringWheelSpecs;
+  connectStatus?: ConnectStatusValue;   // 默认 ConnectStatus.CONNECTING
+  isCarRunning: boolean;                // 车辆是否行驶中
+}
+
+interface SteeringWheelSpecs {
+  specBodySteeringWheelPropertiesSteeringWheelHeating: Spec;
+}
+```
+
+### Specs 定义
+
+| Spec | 用途 | 必填 |
+|------|------|------|
+| `specBodySteeringWheelPropertiesSteeringWheelHeating` | 方向盘加热档位 | 是 |
+
+### 禁用条件
+
+```
+disabled = connectStatus !== ConnectStatus.CONNECTED || isCarRunning
+```
+
+### 示例
+
+```tsx
+import { SteeringWheelModule } from '@miot-rn/car-component/dist/modules/steeringWheelModule';
+import { ConnectStatus } from '@miot-rn/car-component/dist/config';
+
+<SteeringWheelModule
+  specs={{
+    specBodySteeringWheelPropertiesSteeringWheelHeating: steeringWheelSpec,
+  }}
+  connectStatus={ConnectStatus.CONNECTED}
+  isCarRunning={false}
+/>
+```
+
+---
+
+## 2. Hook 用法（`useSteeringWheelData`）
+
+适用于需要**自定义 UI** 但复用方向盘加热数据逻辑的场景。
+
+### 引入
+
+```typescript
+import { useSteeringWheelData } from '@miot-rn/car-component/dist/hooks/useSteeringWheelData';
+```
+
+### 入参
+
+```typescript
+interface UseSteeringWheelDataProps {
+  specBodySteeringWheelPropertiesSteeringWheelHeating: Spec;
+}
+```
+
+### 返回值
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `steeringWheelTitle` | `string` | 标题文案（i18n `car_steering_wheel_hot`） |
+| `steeringWheelHeatState` | `any` | 当前加热档位 spec 原始值（string 类型） |
+| `onSteeringWheelHotChange` | `(val: any) => void` | 档位切换回调，内部调用 `setSpec` 写入设备 |
+| `steeringWheelOptions` | `Array<OptionItem>` | 档位选项列表，从 spec `value-list` 动态生成 |
+
+**`steeringWheelOptions` 每项结构：**
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `value` | `string \| number` | spec value-list 中的 value |
+| `label` | `string` | 根据 description 映射的 i18n 文案 |
+| `colorType` | `'orange' \| undefined` | 非 OFF 档位为 `'orange'`，OFF 为 `undefined` |
+| `description` | `string` | spec 原始 description |
+
+### i18n 文案映射
+
+| 档位 Description | i18n Key | 含义 |
+|-----------------|----------|------|
+| OFF / Off | `car_steering_wheel_hot_close` | 关闭 |
+| Level1 / Level 1 | `car_steering_wheel_hot_first` | 一档 |
+| Level2 / Level 2 | `car_steering_wheel_hot_second` | 二档 |
+| Level3 / Level 3 | `car_steering_wheel_hot_third` | 三档 |
+
+### 示例
+
+```tsx
+import { useSteeringWheelData } from '@miot-rn/car-component/dist/hooks/useSteeringWheelData';
+
+const MyCustomSteeringWheel = ({ spec }: { spec: Spec }) => {
+  const {
+    steeringWheelTitle,
+    steeringWheelHeatState,
+    onSteeringWheelHotChange,
+    steeringWheelOptions,
+  } = useSteeringWheelData({
+    specBodySteeringWheelPropertiesSteeringWheelHeating: spec,
+  });
+
+  return (
+    <View>
+      <Text>{steeringWheelTitle}</Text>
+      {steeringWheelOptions.map(option => (
+        <TouchableOpacity
+          key={option.value}
+          onPress={() => onSteeringWheelHotChange(option.value)}
+          style={{
+            backgroundColor:
+              String(steeringWheelHeatState) === String(option.value)
+                ? 'orange' : 'gray',
+          }}
+        >
+          <Text>{option.label}</Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};
+```
+
+---
+
+## 3. Component 用法（`SteeringWheelHotCard`）
+
+适用于已有数据源（如自行管理 spec 状态），仅需渲染方向盘加热 UI 的场景。
+
+### 引入
+
+```typescript
+import { SteeringWheelHotCard } from '@miot-rn/car-component/dist/components/steeringWheelHotCard';
+```
+
+### Props
+
+```typescript
+interface SteeringWheelHotCardProps {
+  value: string | number;                       // 当前选中档位值
+  onChange: (value: string | number) => void;   // 档位变更回调
+  options?: OptionItem[];                       // 档位选项列表，默认 []
+  disabled?: boolean;                           // 禁用状态，默认 false
+  steeringWheelTitle: string;                   // 标题文案
+}
+
+interface OptionItem {
+  value: string | number;       // 档位值
+  colorType?: ColorType;        // 选中态颜色类型，非 OFF 用 'orange'
+  label?: string;               // 档位文案
+  description: string;          // 档位描述（用于匹配图标）
+}
+```
+
+### 渲染逻辑
+
+- `options` 为空数组时返回 `null`（不渲染）
+- 每个 option 根据 `description` 匹配方向盘加热图标（`SteeringWheelHot` / `FirstGear` / `SecondGear` / `ThirdGear`）
+- 内部使用 `GroupContainer` > `CardContainer` > `FlatSelect` > `FlatOption` 结构
+- 组件使用 `React.memo` 优化
+
+### 示例
+
+```tsx
+import { SteeringWheelHotCard } from '@miot-rn/car-component/dist/components/steeringWheelHotCard';
+
+<SteeringWheelHotCard
+  value={currentGear}
+  onChange={(val) => handleGearChange(val)}
+  steeringWheelTitle="方向盘加热"
+  disabled={false}
+  options={[
+    { value: 0, label: '关闭', description: 'OFF' },
+    { value: 1, label: '一档', description: 'Level1', colorType: 'orange' },
+    { value: 2, label: '二档', description: 'Level2', colorType: 'orange' },
+    { value: 3, label: '三档', description: 'Level3', colorType: 'orange' },
+  ]}
+/>
+```
+
+---
+
+## 已知问题
+
+- Module 中存在 `@ts-ignore`：`steeringWheelOptions` 的类型与 `SteeringWheelHotCard` 的 `options` prop 类型不完全匹配。
+- `steeringWheelHeatState` 为 string 类型，Module 中传入组件前需 `parseInt` 转换。

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type ConnectStatusValue } from '../../config/ConnectStatus';
+import { Spec } from '../../types';
+export interface SteeringWheelSpecs {
+    specBodySteeringWheelPropertiesSteeringWheelHeating?: Spec;
+}
+export interface SteeringWheelModuleProps {
+    specs: SteeringWheelSpecs;
+    connectStatus?: ConnectStatusValue;
+    isCarRunning: boolean;
+}
+export declare const SteeringWheelModule: ({ specs, connectStatus, isCarRunning }: SteeringWheelModuleProps) => React.JSX.Element;
+export default SteeringWheelModule;

package/dist/modules/steeringWheelModule/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { SteeringWheelHotCard } from "../../components/steeringWheelHotCard";
+import { useSteeringWheelData } from "../../hooks/useSteeringWheelData";
+import { ConnectStatus } from "../../hooks";
+export const SteeringWheelModule = ({
+  specs,
+  connectStatus,
+  isCarRunning
+}) => {
+  const {
+    specBodySteeringWheelPropertiesSteeringWheelHeating
+  } = specs;
+  const {
+    steeringWheelTitle,
+    steeringWheelHeatState,
+    onSteeringWheelHotChange,
+    steeringWheelOptions
+  } = useSteeringWheelData({
+    specBodySteeringWheelPropertiesSteeringWheelHeating: specBodySteeringWheelPropertiesSteeringWheelHeating
+  });
+  return /*#__PURE__*/React.createElement(SteeringWheelHotCard, {
+    steeringWheelTitle: steeringWheelTitle,
+    disabled: connectStatus !== ConnectStatus.CONNECTED || isCarRunning,
+    value: Number.parseInt(steeringWheelHeatState, 10)
+    // @ts-ignore
+    ,
+    options: steeringWheelOptions,
+    onChange: onSteeringWheelHotChange
+  });
+};
+export default SteeringWheelModule;