npm package: @miot-rn/car-component
Description: 汽车业务组件库，提供了一系列专为汽车插件开发设计的UI组件。
Latest version: 1.0.1

# @miot-rn/car-component

汽车业务组件库，提供了一系列专为汽车插件开发设计的UI组件。

## 背景

为了能够提供灵活支持插件开发者的业务组件功能，miot-react-native-plugins 项目提供了一系列丰富的业务UI组件包，其他开发者可以基于此业务UI组件包集合进行插件开发，减少开发工作量。

## 安装

```bash
yarn add @miot-rn/car-component
# 或者
npm install @miot-rn/car-component
```

## 组件文档

### 1. AirConditioningCard (空调卡片)

**描述**: 提供空调控制功能的卡片组件，支持开关、温度调节、风速控制等功能。

**导入方式**:
```typescript
import { AirConditioningCard } from '@miot-rn/car-component';
```

**Props**:

| 属性 | 类型 | 必填 | 说明 |
|------|------|------|------|
| hvacStatus | `boolean` | 是 | 空调开关状态 |
| hvacDefrosterStatus | `boolean` | 是 | 除霜开关状态 |
| targetTemperature | `number` | 是 | 目标温度 |
| onHvacStatusChange | `(value: boolean) => void` | 是 | 空调状态变化回调 |
| onHvacDefrosterChange | `(value: boolean) => void` | 是 | 除霜状态变化回调 |
| onHvacTemperatureChange | `(value: number) => void` | 是 | 温度变化回调 |
| hvacTitle | `string` | 否 | 空调标题 |
| hvacDefrosterTitle | `string` | 否 | 除霜标题 |
| hvacDefrosterSubtitle | `string` | 否 | 除霜副标题 |
| insideTip | `string` | 否 | 内部提示文本 |
| outsideTip | `string` | 否 | 外部提示文本 |
| temperatureStep | `number` | 否 | 温度调节步长 |
| desgreeUnit | `string` | 否 | 温度单位 |

**使用示例**:
```typescript
import React from 'react';
import { AirConditioningCard } from '@miot-rn/car-component';

const App = () => {
  const [hvacStatus, setHvacStatus] = React.useState(false);
  const [hvacDefrosterStatus, setHvacDefrosterStatus] = React.useState(false);
  const [targetTemperature, setTargetTemperature] = React.useState(22);

  return (
    <AirConditioningCard
      hvacStatus={hvacStatus}
      hvacDefrosterStatus={hvacDefrosterStatus}
      targetTemperature={targetTemperature}
      hvacTitle="空调"
      hvacDefrosterTitle="前除霜"
      hvacDefrosterSubtitle="自动关闭"
      insideTip="车内 22°C"
      outsideTip="车外 28°C"
      temperatureStep={1}
      desgreeUnit="°C"
      onHvacStatusChange={setHvacStatus}
      onHvacDefrosterChange={setHvacDefrosterStatus}
      onHvacTemperatureChange={setTargetTemperature}
    />
  );
};
```

### 2. GroupContainer (分组容器)

**描述**: 用于将多个组件组合在一起的容器组件，支持标题显示和分隔线。

**导入方式**:
```typescript
import { GroupContainer } from '@miot-rn/car-component';
```

**Props**:

| 属性 | 类型 | 必填 | 说明 |
|------|------|------|------|
| title | `string` | 是 | 分组标题 |
| children | `React.ReactNode` | 是 | 子组件 |

**使用示例**:
```typescript
import React from 'react';
import { GroupContainer } from '@miot-rn/car-component';
import { View, Text } from 'react-native';

const App = () => {
  return (
    <GroupContainer title="车辆设置">
      <View>
        <Text>设置项 1</Text>
      </View>
      <View>
        <Text>设置项 2</Text>
      </View>
    </GroupContainer>
  );
};
```

### 3. OtherSettingCard (其他设置卡片)

**描述**: 提供其他设置选项的卡片组件，支持多种设置项的展示和控制。

**导入方式**:
```typescript
import { OtherSettingCard } from '@miot-rn/car-component';
```

**Props**:

| 属性 | 类型 | 必填 | 说明 |
|------|------|------|------|
| usedInCarTip | `string` | 是 | 车内使用提示文本 |
| deviceManageTip | `string` | 是 | 设备管理提示文本 |

**使用示例**:
```typescript
import React from 'react';
import { OtherSettingCard } from '@miot-rn/car-component';

const App = () => {
  return (
    <OtherSettingCard
      usedInCarTip="车内使用"
      deviceManageTip="设备管理"
    />
  );
};
```

### 4. SteeringWheelHotCard (方向盘加热卡片)

**描述**: 提供方向盘加热控制功能的卡片组件，支持多档位调节。

**导入方式**:
```typescript
import { SteeringWheelHotCard } from '@miot-rn/car-component';
```

**Props**:

| 属性 | 类型 | 必填 | 说明 |
|------|------|------|------|
| value | `string` | 是 | 当前加热档位 |
| onChange | `(value: string) => void` | 是 | 档位变化回调 |
| options | `Array<HeatingOption>` | 否 | 加热选项配置 |

**HeatingOption 类型**:
```typescript
interface HeatingOption {
  value: string;
  label: string;
  description: string;
  colorType?: 'primary' | 'secondary';
}
```

**预设档位**:
- `OFF`: 关闭
- `Level1`: 一档
- `Level2`: 二档
- `Level3`: 三档

**使用示例**:
```typescript
import React from 'react';
import { SteeringWheelHotCard } from '@miot-rn/car-component';

const App = () => {
  const [heatingLevel, setHeatingLevel] = React.useState('OFF');

  const heatingOptions = [
    { value: 'OFF', label: '关闭', description: 'OFF' },
    { value: 'Level1', label: '一档', description: 'Level1' },
    { value: 'Level2', label: '二档', description: 'Level2' },
    { value: 'Level3', label: '三档', description: 'Level3' }
  ];

  return (
    <SteeringWheelHotCard
      value={heatingLevel}
      onChange={setHeatingLevel}
      options={heatingOptions}
    />
  );
};
```

## 组合使用示例

```typescript
import React from 'react';
import { View, ScrollView } from 'react-native';
import {
  AirConditioningCard,
  GroupContainer,
  OtherSettingCard,
  SteeringWheelHotCard
} from '@miot-rn/car-component';

const CarControlPanel = () => {
  const [hvacStatus, setHvacStatus] = React.useState(false);
  const [hvacDefrosterStatus, setHvacDefrosterStatus] = React.useState(false);
  const [targetTemperature, setTargetTemperature] = React.useState(22);
  const [heatingLevel, setHeatingLevel] = React.useState('OFF');

  return (
    <ScrollView>
      {/* 空调控制组 */}
      <GroupContainer title="空调控制">
        <AirConditioningCard
          hvacStatus={hvacStatus}
          hvacDefrosterStatus={hvacDefrosterStatus}
          targetTemperature={targetTemperature}
          hvacTitle="空调"
          onHvacStatusChange={setHvacStatus}
          onHvacDefrosterChange={setHvacDefrosterStatus}
          onHvacTemperatureChange={setTargetTemperature}
        />
      </GroupContainer>

      {/* 方向盘加热组 */}
      <GroupContainer title="方向盘加热">
        <SteeringWheelHotCard
          value={heatingLevel}
          onChange={setHeatingLevel}
        />
      </GroupContainer>

      {/* 其他设置组 */}
      <GroupContainer title="其他设置">
        <OtherSettingCard
          usedInCarTip="车内使用"
          deviceManageTip="设备管理"
        />
      </GroupContainer>
    </ScrollView>
  );
};

export default CarControlPanel;
```

## 主题定制

所有组件都支持通过 `ConfigContext` 进行主题定制：

```typescript
import { ConfigContext } from 'miot/ui/hyperOSUI';

const theme = {
  colorToken: {
    mjcard_color_miui_1: '#FF6900',
    mj_color_gray_card_1: '#F5F5F5',
    mj_color_gray_text_4: '#666666',
    mj_color_gray_icon_1: '#999999'
  }
};

// 在组件树中提供主题
<ConfigContext.Provider value={theme}>
  <YourComponents />
</ConfigContext.Provider>
```

## 开发指南

### 本地开发

```bash
cd packages/car-component
yarn install
yarn build
```

### 类型检查

```bash
yarn tsc --noEmit
```

### 代码规范

```bash
yarn lint
yarn lint-fix
```

### 格式化

```bash
yarn format
```

## 注意事项

1. **最低 SDK 版本**: 请确保在使用前检查 `package.json` 中的 `min_sdk_api_level` 字段
2. **依赖**: 本组件依赖 `miot/ui/hyperOSUI` 和 `miot/ui/icons`，请确保这些依赖已正确安装
3. **React Native 版本**: 本组件适用于 React Native 0.61.0 及以上版本
4. **TypeScript**: 本组件使用 TypeScript 编写，提供完整的类型支持

## 贡献指南

1. 新增组件需要在 `src` 目录下创建对应文件夹
2. 组件需要导出类型定义
3. 更新 `src/index.ts` 文件以导出新组件
4. 更新本 README 文档
5. 确保通过所有类型检查和代码规范检查

## License

MIT