@miot-rn/car-component 1.0.1

package/dist/components/carInfoHeader/singleRangeIndicator.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { Fonts, defaultColorToken } from 'miot/ui/hyperOSUI';
+import { RangeProgressBar } from "./rangeProgressBar";
+import { dynamicStyleSheet } from 'miot/ui/Style/DynamicStyleSheet';
+export const SingleRangeIndicator = ({
+  currentRange = 0,
+  totalRange = 100,
+  unit = 'km',
+  color,
+  style
+}) => {
+  const numericRange = typeof currentRange === 'number' ? currentRange : 0;
+  const displayValue = typeof currentRange === 'number' ? Math.round(currentRange) : currentRange;
+  const progress = typeof currentRange === 'number' && totalRange > 0 ? Math.min(numericRange / totalRange, 1) : 0;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, style]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.rangeContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.rangeValue
+  }, displayValue), /*#__PURE__*/React.createElement(Text, {
+    style: styles.unit
+  }, unit)), /*#__PURE__*/React.createElement(RangeProgressBar, {
+    progress: progress,
+    color: color
+  }));
+};
+const styles = dynamicStyleSheet({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    height: 60,
+    width: '100%'
+  },
+  rangeContainer: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    justifyContent: 'center'
+  },
+  rangeValue: {
+    color: defaultColorToken.mj_color_gray_text_1,
+    includeFontPadding: false,
+    ...Fonts.mj_text_custom_26_M,
+    height: 34,
+    lineHeight: 34
+  },
+  unit: {
+    marginLeft: 2,
+    color: defaultColorToken.mj_color_gray_text_1,
+    includeFontPadding: false,
+    ...Fonts.mj_text_custom_14_M,
+    height: 25,
+    lineHeight: 25
+  }
+});

package/dist/components/cardContainer/index.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface CardContainerProps {
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+}
+export declare const CardContainer: React.MemoExoticComponent<({ style, children }: CardContainerProps) => React.JSX.Element>;
+export {};

package/dist/components/cardContainer/index.js

@@ -0,0 +1,22 @@
+import React, { memo, useContext } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { ConfigContext } from 'miot/ui/hyperOSUI';
+export const CardContainer = /*#__PURE__*/memo(({
+  style = undefined,
+  children = null
+}) => {
+  const {
+    colorToken
+  } = useContext(ConfigContext);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor: colorToken.mj_color_gray_card_3
+    }, style]
+  }, children);
+});
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 20,
+    overflow: 'hidden'
+  }
+});

package/dist/components/containerWithGap/gapWrap.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+interface GapWrapProps {
+    gap: number;
+    horizontal?: boolean;
+    children?: ReactNode;
+}
+export declare const GapWrap: React.MemoExoticComponent<({ gap, horizontal, children }: GapWrapProps) => React.JSX.Element | null>;
+export {};

package/dist/components/containerWithGap/gapWrap.js

@@ -0,0 +1,31 @@
+import React, { useState, memo } from 'react';
+import { StyleSheet, View } from 'react-native';
+export const GapWrap = /*#__PURE__*/memo(({
+  gap,
+  horizontal = false,
+  children = null
+}) => {
+  const [shown, setShown] = useState(true);
+  const onLayout = e => {
+    setShown(e.nativeEvent.layout.height > 0);
+  };
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: horizontal ? styles.flex1 : null,
+    onLayout: onLayout
+  }, children), /*#__PURE__*/React.createElement(View, {
+    style: [styles.gap, {
+      [horizontal ? 'width' : 'height']: shown ? gap : 0
+    }]
+  }));
+});
+const styles = StyleSheet.create({
+  gap: {
+    alignSelf: 'stretch'
+  },
+  flex1: {
+    flex: 1
+  }
+});

package/dist/components/containerWithGap/index.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface ContainerWithGapProps {
+    containerStyle?: StyleProp<ViewStyle>;
+    horizontal?: boolean;
+    gap?: number;
+    outerGap?: number;
+    useChildGap?: boolean;
+    children?: ReactNode;
+}
+declare const ContainerWithGap: React.MemoExoticComponent<({ containerStyle, horizontal, gap, outerGap, useChildGap, children, }: ContainerWithGapProps) => React.JSX.Element | null>;
+export default ContainerWithGap;

package/dist/components/containerWithGap/index.js

@@ -0,0 +1,43 @@
+import React, { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { GapWrap } from "./gapWrap";
+const ContainerWithGap = /*#__PURE__*/memo(({
+  containerStyle = {},
+  horizontal = false,
+  gap = 8,
+  outerGap = 0,
+  useChildGap = false,
+  children = null
+}) => {
+  const getContents = () => {
+    if (!children) {
+      return null;
+    }
+    if (!Array.isArray(children)) {
+      return children;
+    }
+    const count = React.Children.count(children);
+    const lengtEdge = count - 1;
+    return React.Children.map(children, (child, index) => {
+      return /*#__PURE__*/React.createElement(GapWrap, {
+        gap: index < lengtEdge ? gap : 0,
+        horizontal: horizontal
+      }, child);
+    });
+  };
+  const contents = useChildGap ? children : getContents();
+  if (!contents) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: [{
+      [horizontal ? 'marginVertical' : 'marginHorizontal']: outerGap
+    }, horizontal ? styles.row : null, containerStyle]
+  }, contents);
+});
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row'
+  }
+});
+export default ContainerWithGap;

package/dist/components/flatSelect/FlatOption.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { SvgProps } from 'react-native-svg';
+import { AccessibilityPropsType } from 'miot/utils/accessibility-helper';
+import { type ColorType } from 'miot/hooks/hyperOS';
+export interface FlatOptionProps extends AccessibilityPropsType {
+    value: string | number;
+    label: string;
+    selected?: boolean;
+    onSelect?: (value: string | number) => void;
+    disabled?: boolean;
+    icon?: React.ReactElement<SvgProps>;
+    colorType?: ColorType;
+    itemWidth?: string | number;
+    style?: ViewStyle;
+}
+declare function FlatOption({ value, label, selected, onSelect, disabled, style, colorType, icon, itemWidth, accessible, accessibilityLabel, accessibilityHint, }: FlatOptionProps): React.JSX.Element;
+export default FlatOption;

package/dist/components/flatSelect/FlatOption.js

@@ -0,0 +1,117 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { ConfigContext, Fonts } from 'miot/ui/hyperOSUI';
+import React, { cloneElement, isValidElement, useCallback, useContext, useMemo } from 'react';
+import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
+import { getAccessibilityConfig } from 'miot/utils/accessibility-helper';
+import { useColorTypeState } from 'miot/hooks/hyperOS';
+/**
+ * @export public
+ * @doc_name 常用UI组件
+ * @doc_index 1
+ * @doc_directory ui
+ * @author gaoruixiang
+ * @since 10114
+ * @module FlatOption
+ * @description FlatSelect 的子项选项，必须与 FlatSelect 配合使用
+ * @property {string|number} value - 选项值
+ * @property {string} label - 选项显示文本
+ * @property {boolean} selected - 是否选中，默认 false
+ * @property {function} onSelect - 选中回调
+ * @property {boolean} disabled - 禁用状态，默认 false
+ * @property {React.ReactElement} icon - 图标
+ * @property {string} colorType - 颜色色系
+ * @property {number} itemWidth - 子项宽度
+ * @property {object} style - 自定义选项样式
+ */
+
+function FlatOption({
+  value,
+  label,
+  selected = false,
+  onSelect,
+  disabled = false,
+  style,
+  colorType = 'white',
+  icon,
+  itemWidth,
+  accessible,
+  accessibilityLabel,
+  accessibilityHint
+}) {
+  const {
+    colorToken
+  } = useContext(ConfigContext);
+  const primaryColor = useColorTypeState({
+    colorType,
+    disabled
+  });
+  const handlePress = useCallback(() => {
+    if (!disabled && typeof onSelect === 'function') {
+      onSelect(value);
+    }
+  }, [onSelect, value, disabled]);
+  const [activeColor, activeTextColor] = useMemo(() => {
+    switch (colorType) {
+      case 'orange':
+      case 'green':
+      case 'blue':
+      case 'purple':
+      case 'red':
+      case 'yellow':
+      case 'wathet':
+        return [primaryColor, disabled ? colorToken.mj_color_gray_text_8 : colorToken.mj_color_norm_white];
+      default:
+        return [colorToken.mj_color_gray_card_4, disabled ? colorToken.mj_color_gray_text_6 : colorToken.mj_color_gray_text_2];
+    }
+  }, [colorType, colorToken, disabled, primaryColor]);
+  const generateIcon = useMemo(() => {
+    if (/*#__PURE__*/isValidElement(icon) && colorType !== 'white' && selected) {
+      return /*#__PURE__*/cloneElement(icon, {
+        fill: disabled ? colorToken.mj_color_gray_text_8 : colorToken.mj_color_norm_white
+      });
+    }
+    return icon;
+  }, [icon, colorType, selected, disabled, colorToken]);
+  const containerStyle = useMemo(() => ({
+    backgroundColor: selected ? activeColor : 'transparent',
+    width: itemWidth !== 'auto' ? itemWidth : undefined
+  }), [selected, activeColor, itemWidth]);
+  return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, _extends({
+    onPress: handlePress,
+    disabled: disabled
+  }, getAccessibilityConfig({
+    accessible,
+    accessibilityLabel,
+    accessibilityHint
+  })), /*#__PURE__*/React.createElement(View, {
+    style: [styles.option, containerStyle, style]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.icon]
+  }, generateIcon), /*#__PURE__*/React.createElement(Text, {
+    style: [styles.label, {
+      color: selected ? activeTextColor : disabled ? colorToken.mj_color_gray_text_6 : colorToken.mj_color_gray_text_2
+    }],
+    allowFontScaling: false,
+    numberOfLines: 2,
+    ellipsizeMode: "tail"
+  }, label)));
+}
+const styles = StyleSheet.create({
+  option: {
+    paddingTop: 12,
+    paddingBottom: 8,
+    paddingHorizontal: 8,
+    alignItems: 'center',
+    borderRadius: 16
+  },
+  icon: {
+    width: 20,
+    height: 20
+  },
+  label: {
+    ...Fonts.mj_text_custom_13_M,
+    marginTop: 8,
+    textAlign: 'center'
+  }
+});
+export default FlatOption;

package/dist/components/flatSelect/FlatSelect.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+export interface FlatSelectProps {
+    style?: ViewStyle;
+    value: string | number | undefined;
+    onChange?: (value: string | number) => void;
+    children: ReactNode;
+    disabled?: boolean;
+}
+declare function FlatSelect({ style, value, onChange, disabled, children }: FlatSelectProps): React.JSX.Element;
+declare namespace FlatSelect {
+    var FlatOption: typeof import("./FlatOption").default;
+}
+export default FlatSelect;

package/dist/components/flatSelect/FlatSelect.js

@@ -0,0 +1,112 @@
+import React, { cloneElement, isValidElement, useCallback, useMemo, useState } from 'react';
+import { PixelRatio, StyleSheet, View } from 'react-native';
+import FlatOption from "./FlatOption";
+const Padding = 4;
+
+/**
+ * @export public
+ * @doc_name 常用UI组件
+ * @doc_index 1
+ * @doc_directory ui
+ * @author gaoruixiang
+ * @since 10114
+ * @module FlatSelect
+ * @description 平铺式选择器组件，需要与 FlatOption 配合使用
+ * @property {object} style - 自定义样式
+ * @property {string|number} value - 选中值
+ * @property {function} onChange - 选中值变化回调
+ * @property {boolean} disabled - 禁用状态，默认 false
+ * @property {string} size - 禁用状态，默认 false
+ */
+
+function FlatSelect({
+  style = undefined,
+  value,
+  onChange = undefined,
+  disabled = false,
+  children
+}) {
+  // const { width: windowWidth } = useWindowDimensions();
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  // 缓存验证（类型检查）
+  const {
+    validatedChildren,
+    childrenCount
+  } = useMemo(() => {
+    const childrenArray = [];
+    React.Children.forEach(children, child => {
+      if (/*#__PURE__*/isValidElement(child)) {
+        // 检查是否是 FlatOption 组件
+        const childDisplayName = child.type.displayName || child.type.name;
+        if (child.type === FlatOption || childDisplayName === 'FlatOption') {
+          childrenArray.push(child);
+        } else {
+          // eslint-disable-next-line no-console
+          console.warn(`[FlatSelect] 子组件必须是 FlatOption 组件，当前组件类型: ${child.type}`, '已跳过该子组件');
+        }
+      }
+    });
+    return {
+      validatedChildren: childrenArray,
+      childrenCount: childrenArray.length
+    };
+  }, [children]);
+
+  // 计算每个子项的宽度
+  const itemWidth = useMemo(() => {
+    if (containerWidth === 0) {
+      return 'auto'; // 全在一排或容器宽度未知时，使用自动宽度
+    }
+
+    // 计算每个子项的宽度, 总宽度减去间距，再除以每行数量
+    const gap = Padding * 2; // 间距总和
+    const rawWidth = (containerWidth - gap) / childrenCount;
+    // 在物理像素层面向下取整，避免 Yoga 布局引擎 pixel snapping 导致累计溢出换行
+    const px = rawWidth * PixelRatio.get();
+    return Math.floor(px) / PixelRatio.get();
+  }, [containerWidth, childrenCount]);
+
+  // 处理选项选择
+  const handleSelect = useCallback(optionValue => {
+    if (!disabled && typeof onChange === 'function') {
+      onChange(optionValue);
+    }
+  }, [disabled, onChange]);
+
+  // 生成选项的辅助函数
+  const generateOptions = (children, selectedValue, onSelect, isDisabled) => children.map(child => {
+    if (/*#__PURE__*/isValidElement(child)) {
+      return /*#__PURE__*/cloneElement(child, {
+        selected: child.props.value === selectedValue,
+        onSelect,
+        disabled: isDisabled || child.props.disabled,
+        itemWidth
+      });
+    }
+    return child;
+  });
+  const options = generateOptions(validatedChildren, value, handleSelect, disabled);
+  const handleLayout = useCallback(event => {
+    const {
+      width
+    } = event.nativeEvent.layout;
+    setContainerWidth(width);
+  }, []);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, style],
+    pointerEvents: disabled ? 'none' : 'auto',
+    onLayout: handleLayout
+  }, options);
+}
+const styles = StyleSheet.create({
+  container: {
+    padding: Padding,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start'
+  }
+});
+FlatSelect.FlatOption = FlatOption;
+export default FlatSelect;

package/dist/components/flatSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FlatSelect } from './FlatSelect';
+export { default as FlatOption } from './FlatOption';

package/dist/components/flatSelect/index.js

@@ -0,0 +1,2 @@
+export { default as FlatSelect } from "./FlatSelect";
+export { default as FlatOption } from "./FlatOption";

package/dist/components/flatSelect/index.zh-CN.md

@@ -0,0 +1,89 @@
+# FlatSelect - 平铺式选择器组件
+
+## 概述
+基于 `FlatSelectProps` 和 `FlatOptionProps` 接口定义，集成自 `FlatSelect.tsx` 和 `FlatOption.tsx` 中的类型定义。
+
+`FlatSelect` 是一个平铺式的选择器组件，将多个选项以平铺的方式展示，用户可以直观地看到所有选项并进行选择。支持四种档位尺寸（L/M/S/XL），根据子项数量智能排列布局。
+
+## 预览
+
+![](http://cdn.cnbj0.fds.api.mi-img.com/miio.files/commonfile_png_9a70b4bc22847b4a6492ec09dcb0ce3b.png)
+
+## 基本信息
+
+| 信息项 | 内容 |
+|--------|------|
+| 中文名称 | 平铺式选择器 |
+| 描述 | 将多个选项以平铺方式展示的选择器，支持智能布局 |
+| 位置 | `miot/ui/FlatSelect` |
+| 引入版本 | `10114` |
+| 更新时间 | 2025-12-17 |
+
+## 组件关系
+
+**FlatSelect 必须搭配 FlatOption 使用**，FlatOption 作为 FlatSelect 的子组件提供具体的选项。
+
+## FlatSelect 入参（Props）
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| **value** | `string \| number \| undefined` | 是 | - | 当前选中的值 |
+| **onChange** | `(value: string \| number) => void` | 否 | - | 选中值变化回调 |
+| **children** | `ReactNode` | 是 | - | 子组件（必须是 FlatOption） |
+| **disabled** | `boolean` | 否 | `false` | 是否禁用所有选项 |
+| **size** | `'XL' \| 'L' \| 'M' \| 'S'` | 否 | `'XL'` | 档位大小（决定布局规则） |
+| **style** | `ViewStyle` | 否 | `{}` | 自定义容器样式 |
+
+## FlatOption 入参（Props）
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| **value** | `string \| number` | 是 | - | 选项值 |
+| **label** | `string` | 是 | - | 选项显示文本 |
+| **selected** | `boolean` | 否 | `false` | 是否选中（通常由 FlatSelect 控制） |
+| **onSelect** | `(value: string \| number) => void` | 否 | - | 选中回调（通常由 FlatSelect 控制） |
+| **disabled** | `boolean` | 否 | `false` | 是否禁用该选项 |
+| **icon** | `React.ReactElement<SvgProps>` | 否 | - | 选项图标 |
+| **colorType** | `ColorType` | 否 | `ColorType.White` | 选中时的颜色色系 |
+| **itemWidth** | `string \| number` | 否 | - | 子项宽度（通常自动计算） |
+| **style** | `ViewStyle` | 否 | - | 自定义选项样式 |
+| **accessible** | `boolean` | 否 | - | 无障碍访问设置 |
+| **accessibilityLabel** | `string` | 否 | - | 无障碍标签 |
+| **accessibilityHint** | `string` | 否 | - | 无障碍提示 |
+
+## 使用示例
+
+```tsx
+import { FlatSelect, FlatOption } from '@src/hyperOS/IotComponents/flatSelect';
+import { ColorType } from '@src/styles/Styles';
+
+// 基本用法
+<FlatSelect
+  value={selectedValue}
+  onChange={(val) => setSelectedValue(val)}
+>
+  <FlatOption value={1} label="选项一" />
+  <FlatOption value={2} label="选项二" />
+  <FlatOption value={3} label="选项三" />
+</FlatSelect>
+
+// 带图标和颜色
+<FlatSelect
+  value={mode}
+  onChange={setMode}
+  size="L"
+>
+  <FlatOption 
+    value="auto" 
+    label="自动" 
+    icon={<AutoIcon />} 
+    colorType={ColorType.Blue} 
+  />
+  <FlatOption 
+    value="manual" 
+    label="手动" 
+    icon={<ManualIcon />} 
+    colorType={ColorType.Green} 
+  />
+</FlatSelect>
+```

package/dist/components/groupContainer/index.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface GroupContainerProps {
+    title: string;
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function GroupContainer(props: GroupContainerProps): React.JSX.Element;
+export {};

package/dist/components/groupContainer/index.js

@@ -0,0 +1,48 @@
+import React, { useMemo, isValidElement, Children, useContext } from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import { ConfigContext, Fonts } from 'miot/ui/hyperOSUI';
+export function GroupContainer(props) {
+  const {
+    title,
+    children,
+    style
+  } = props;
+  const {
+    colorToken
+  } = useContext(ConfigContext);
+  const validatedChildrenOriginal = useMemo(() => {
+    const childrenArray = [];
+    const len = Children.count(children);
+    Children.forEach(children, (child, index) => {
+      if (/*#__PURE__*/isValidElement(child)) {
+        childrenArray.push(child);
+      }
+      childrenArray.push(/*#__PURE__*/React.createElement(View, {
+        key: `space-${len + index}`,
+        style: styles.space
+      }));
+    });
+    childrenArray.pop();
+    return childrenArray;
+  }, [children]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: style
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.title, {
+      color: colorToken.mjcard_color_miui_1
+    }]
+  }, title), /*#__PURE__*/React.createElement(View, null, validatedChildrenOriginal));
+}
+const styles = StyleSheet.create({
+  title: {
+    paddingTop: 18,
+    paddingBottom: 6,
+    paddingLeft: 20,
+    paddingRight: 16,
+    lineHeight: 22,
+    ...Fonts.mj_text_custom_14_R
+  },
+  space: {
+    height: 8
+  }
+});

package/dist/components/otherSettingCard/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface OtherSettingCardProps {
+    usedInCarTip: string;
+    deviceManageTip: string;
+    othersTip: string;
+}
+export declare const OtherSettingCard: React.MemoExoticComponent<(props: OtherSettingCardProps) => React.JSX.Element>;
+export {};

package/dist/components/otherSettingCard/index.js

@@ -0,0 +1,40 @@
+import React, { useContext, useCallback, memo } from 'react';
+import { LargeEntrance, ConfigContext } from 'miot/ui/hyperOSUI';
+import { Host, Device } from 'miot';
+import { CarInUsed, DeviceManage } from "../../icons";
+import { CardContainer } from "../cardContainer";
+import { GroupContainer } from "../groupContainer";
+export const OtherSettingCard = /*#__PURE__*/memo(props => {
+  const {
+    usedInCarTip,
+    deviceManageTip,
+    othersTip
+  } = props;
+  const {
+    colorToken
+  } = useContext(ConfigContext);
+  const toUsedInCar = useCallback(() => {
+    Host.ui.openCarMiHomeManager(Device.deviceID);
+  }, []);
+  const toDeviceManage = useCallback(() => {
+    Host.ui.openDeviceRoamingManager(Device.deviceID);
+  }, []);
+
+  // 判断是不是米系车
+  const isMiCar = !!Device.model.startsWith('micar.car.');
+  return /*#__PURE__*/React.createElement(GroupContainer, {
+    title: othersTip
+  }, /*#__PURE__*/React.createElement(CardContainer, null, /*#__PURE__*/React.createElement(LargeEntrance, {
+    leftIconSource: /*#__PURE__*/React.createElement(CarInUsed, {
+      fill: colorToken.mj_color_gray_icon_1
+    }),
+    title: usedInCarTip,
+    onPress: toUsedInCar
+  }), isMiCar && /*#__PURE__*/React.createElement(LargeEntrance, {
+    leftIconSource: /*#__PURE__*/React.createElement(DeviceManage, {
+      fill: colorToken.mj_color_gray_icon_1
+    }),
+    title: deviceManageTip,
+    onPress: toDeviceManage
+  })));
+});

package/dist/components/pageBackground/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface PageBackgroundProps {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare const PageBackground: ({ children, style }: PageBackgroundProps) => React.JSX.Element;