export const demoZh = {
  demoIcon: {
    description:
      "用于渲染已注册图标的组件。如果提供了 `onPress`，则包装在 <TouchableOpacity /> 中，否则是 <View />。",
    useCase: {
      icons: {
        name: "图标",
        description: "组件内注册的图标列表。",
      },
      size: {
        name: "尺寸",
        description: "有一个 size 属性。",
      },
      color: {
        name: "颜色",
        description: "有一个 color 属性。",
      },
      styling: {
        name: "样式",
        description: "组件可以轻松设置样式。",
      },
    },
  },
  demoTextField: {
    description: "TextField 组件允许输入和编辑文本。",
    useCase: {
      statuses: {
        name: "状态",
        description: "有一个 status 属性 - 与其他组件中的 `preset` 类似，但也会影响组件功能。",
        noStatus: {
          label: "无状态",
          helper: "这是默认状态",
          placeholder: "在此输入文字",
        },
        error: {
          label: "错误状态",
          helper: "出现错误时使用的状态",
          placeholder: "在此输入文字",
        },
        disabled: {
          label: "禁用状态",
          helper: "禁用编辑并使文字变淡",
          placeholder: "在此输入文字",
        },
      },
      passingContent: {
        name: "传递内容",
        description: "有几种不同的方式来传递内容。",
        viaLabel: {
          labelTx: "通过 `label` 属性",
          helper: "通过 `helper` 属性",
          placeholder: "通过 `placeholder` 属性",
        },
        rightAccessory: {
          label: "右侧附件",
          helper: "此属性接收一个返回 React 元素的函数。",
        },
        leftAccessory: {
          label: "左侧附件",
          helper: "此属性接收一个返回 React 元素的函数。",
        },
        supportsMultiline: {
          label: "支持多行",
          helper: "为多行文本启用更高的输入框。",
        },
      },
      styling: {
        name: "样式",
        description: "组件可以轻松设置样式。",
        styleInput: {
          label: "输入框样式",
          helper: "通过 `style` 属性",
        },
        styleInputWrapper: {
          label: "输入框包装样式",
          helper: "通过 `inputWrapperStyle` 属性",
        },
        styleContainer: {
          label: "容器样式",
          helper: "通过 `containerStyle` 属性",
        },
        styleLabel: {
          label: "标签和帮助文字样式",
          helper: "通过 `LabelTextProps` 和 `HelperTextProps` style 属性",
        },
        styleAccessories: {
          label: "附件样式",
          helper: "通过 `RightAccessory` 和 `LeftAccessory` style 属性",
        },
      },
    },
  },
  demoToggle: {
    description:
      "渲染一个布尔输入。这是一个受控组件，需要一个 onValueChange 回调来更新 value 属性，以便组件反映用户操作。",
    useCase: {
      variants: {
        name: "变体",
        description: "组件支持几种变体。",
        checkbox: {
          label: "复选框 - 用于多选的方形输入。",
          helper: "这个可以打开/关闭。",
        },
        radio: {
          label: "单选框 - 用于单选的圆形输入。",
          helper: "这个也可以打开/关闭。",
        },
        switch: {
          label: "开关 - 滑动切换输入。",
          helper: "这个同样可以打开/关闭。",
        },
      },
      statuses: {
        name: "状态",
        description: "有一个 status 属性。",
        noStatus: "无状态 - 这是默认状态",
        errorStatus: "错误状态 - 用于显示错误",
        disabledStatus: "禁用状态 - 切换按钮禁用时",
      },
      passingContent: {
        name: "传递内容",
        description: "有几种不同的方式来传递内容。",
        useCase: {
          checkBox: {
            label: "通过 `labelTx` 属性",
            helper: "通过 `helperTx` 属性。",
          },
          checkBoxMultiLine: {
            helper: "支持多行帮助文字。",
          },
          radioChangeSides: {
            helper: "你可以更改位置。",
          },
          customCheckBox: {
            label: "如果需要，将图标传递给 checkbox 属性。",
          },
          switch: {
            label: "开关也可以读取各种 TX 属性",
            helper: "通过 `helperTx` 属性",
          },
          switchAid: {
            label: "或者自定义组件",
          },
        },
      },
      styling: {
        name: "样式",
        description: "组件可以轻松设置样式。",
        outerWrapper: "1 - inputOuterWrapper",
        innerWrapper: "2 - inputInnerWrapper",
        inputDetail: "3 - inputDetail",
        labelTx: "您也可以设置 labelTx 的样式",
        styleContainer: "或者，设置整个容器的样式",
      },
    },
  },
  demoButton: {
    description: "允许用户执行操作并做出选择的组件。包装了内置的 Pressable 组件。",
    useCase: {
      presets: {
        name: "预设",
        description: "有几种预设样式。",
      },
      passingContent: {
        name: "传递内容",
        description: "有几种不同的方式来传递内容。",
        viaTextProps: "通过 `text` 属性 - 纯文本",
        children: "子元素 - 嵌套组件",
        rightAccessory: "右侧附件",
        leftAccessory: "左侧附件",
        nestedChildren: "嵌套子元素",
        nestedChildren2: "使用嵌套子元素时应使用 `preset='default'`",
        nestedChildren3: "支持多层嵌套子元素",
        multiLine: "多行文本 - 支持长文本内容自动换行显示",
      },
      styling: {
        name: "样式",
        description: "组件可以轻松设置样式。",
        styleContainer: "样式容器 - ViewStyle",
        styleText: "样式文字 - TextStyle",
        styleAccessories: "样式附件 - ViewStyle",
        pressedState: "按下状态的样式！",
        disabledState: "禁用状态的样式！",
      },
      disabling: {
        name: "禁用",
        description: "可以使用 `disabled` 属性禁用组件。",
        standard: "禁用 - 标准",
        filled: "禁用 - 填充",
        reversed: "禁用 - 反转",
        accessory: "禁用的附件样式",
        textStyle: "禁用的文字样式",
      },
    },
  },
  demoListItem: {
    description: "用于数据列表或菜单选择的样式化行组件。",
    useCase: {
      height: {
        name: "高度",
        description: "行可以有不同的高度。",
        defaultHeight: "默认高度 (56px)",
        customHeight: "自定义高度通过 `height` 属性",
        textHeight: "文字超过一行时也会改变高度 - 看我现在多高！",
        longText:
          "通过 `topSeparator` 属性，可以添加分隔线。这对于需要顶部分隔线的首个 ListItem 很有用。",
      },
      separators: {
        name: "分隔线",
        description: "可以在顶部或底部添加分隔线。",
        topSeparator: "只有顶部分隔线",
        topAndBottomSeparator: "顶部和底部分隔线",
        bottomSeparator: "只有底部分隔线",
      },
      icons: {
        name: "图标",
        description: "可以显示左侧或右侧的图标。",
        leftIcon: "左侧图标",
        rightIcon: "右侧图标",
        leftRightIcons: "左右图标",
      },
      customLeftRight: {
        name: "自定义左/右组件",
        description: "如果图标不够用，可以传递自定义组件。",
        customLeft: "自定义左侧组件",
        customRight: "自定义右侧组件",
      },
      passingContent: {
        name: "传递内容",
        description: "有几种不同的方式来传递内容。",
        text: "通过 `text` 属性 - 纯文本",
        children: "子元素 - 嵌套的 Text 组件",
        nestedChildren1: "第一行",
        nestedChildren2: "第二行",
      },
      listIntegration: {
        name: "与 FlatList 集成",
        description: "组件可以轻松与您喜欢的列表界面集成。",
      },
      styling: {
        name: "样式",
        description: "组件可以轻松设置样式。",
        styledText: "样式化的文字",
        styledContainer: "样式化的容器（红色边框）",
        tintedIcons: "着色的图标",
      },
    },
  },
  demoCard: {
    description: "卡片在表面上以相关的、可操作的信息分组来显示内容。",
    useCase: {
      presets: {
        name: "预设",
        description: "有几种预设卡片配置。",
        default: {
          heading: "默认预设",
          content: "这是默认预设的内容",
          footer: "这是页脚",
        },
        reversed: {
          heading: "反转预设",
          content: "这是反转预设的内容",
          footer: "这是页脚",
        },
      },
      verticalAlignment: {
        name: "垂直对齐",
        description: "卡片可以配置为不同的对齐方式。",
        top: {
          heading: "顶部（默认）",
          content: "所有卡片内容垂直对齐到顶部。",
          footer: "包括页脚",
        },
        center: {
          heading: "居中",
          content: "所有卡片内容垂直居中对齐。",
          footer: "包括页脚",
        },
        spaceBetween: {
          heading: "两端对齐",
          content: "所有卡片内容垂直两端对齐。",
          footer: "包括页脚",
        },
        reversed: {
          heading: "强制页脚底部",
          content: "这是通过将 footer 放在 View 内并使用 `auto` flex 实现的。",
          footer: "我在底部！",
        },
      },
      passingContent: {
        name: "传递内容",
        description: "有几种不同的方式来传递内容。",
        heading: "通过 `heading` 属性",
        content: "通过 `content` 属性",
        footer: "通过 `footer` 属性",
      },
      customComponent: {
        name: "自定义组件",
        description: "任何预配置的组件都可以替换为您自己的组件。您也可以添加其他组件。",
        rightComponent: "右侧组件",
        leftComponent: "左侧组件",
      },
      style: {
        name: "样式",
        description: "组件可以轻松设置样式。",
        heading: "样式化的标题",
        content: "样式化的内容",
        footer: "样式化的页脚",
      },
    },
  },
  demoAutoImage: {
    description: "根据源图像的宽高比自动调整大小的图像组件，同时可以指定最大宽度或高度约束。",
    useCase: {
      remoteUri: { name: "远程 URI" },
      base64Uri: { name: "Base64 URI" },
      scaledToFitDimensions: {
        name: "缩放适应尺寸",
        description:
          "提供 `maxWidth` 和/或 `maxHeight` 属性，图像将自动缩放并保持宽高比。这与 `resizeMode: 'contain'` 有何不同？首先，您可以只指定一边的尺寸（不必同时指定两边）。其次，图像将缩放以适应所需尺寸，而不仅仅是被包含在其图像容器内。",
        heightAuto: "宽度: 60 / 高度: 自动",
        widthAuto: "宽度: 自动 / 高度: 32",
        bothManual: "宽度: 60 / 高度: 60",
      },
    },
  },
  demoText: {
    description: "用于显示文本的组件。此组件是对内置 React Native 组件的高阶封装。",
    useCase: {
      presets: {
        name: "预设",
        description: "有一些预配置的预设。",
        default: "default 预设 - 适用于大多数情况的基本预设。",
        bold: "bold 预设 - 用于粗体文本显示。",
        subheading: "subheading 预设 - 用于副标题。",
        heading: "heading 预设 - 用于标题。",
      },
      sizes: {
        name: "尺寸",
        description: "有一个 size 属性。",
        xs: "xs - 超小尺寸。",
        sm: "sm - 小尺寸。",
        md: "md - 中等尺寸。",
        lg: "lg - 大尺寸。",
        xl: "xl - 超大尺寸。",
        xxl: "xxl - 特大尺寸。",
      },
      weights: {
        name: "字重",
        description: "有一个 weight 属性。",
        light: "light - 细体字重。",
        normal: "normal - 常规字重。",
        medium: "medium - 中等字重。",
        semibold: "semiBold - 半粗字重。",
        bold: "bold - 粗体字重。",
      },
      passingContent: {
        name: "传递内容",
        description: "有几种不同的方式来传递内容。",
        viaText: "通过 `text` 属性 - 传递纯文本内容。",
        viaTx: "通过 `tx` 属性 -",
        children: "子元素 - 可以传递子组件作为内容。",
        nestedChildren: "嵌套子元素 -",
        nestedChildren2: "支持多级嵌套。",
        nestedChildren3: "可以混合使用不同类型的子元素。",
        nestedChildren4: "非常灵活的内容传递方式。",
      },
      styling: {
        name: "样式",
        description: "组件可以轻松设置样式。",
        text: "可以通过样式属性自定义文本外观。",
        text2: "支持多种样式组合，如颜色、大小、字重等。",
        text3: "也可以通过覆盖样式来实现更复杂的效果。",
      },
    },
  },
  demoHeader: {
    description: "出现在许多屏幕顶部的组件。将包含导航按钮和屏幕标题。",
    useCase: {
      actionIcons: {
        name: "动作图标",
        description: "您可以通过 `leftIcon` 或 `rightIcon` 属性轻松传递动作。",
        leftIconTitle: "左侧图标",
        rightIconTitle: "右侧图标",
        bothIconsTitle: "两侧图标",
      },
      actionText: {
        name: "动作文字",
        description:
          "您可以通过 `leftText` 或 `rightText` 属性轻松传递动作。您也可以使用 `leftTx` 或 `rightTx` 传递 Tx 翻译。",
        leftTxTitle: "通过 `leftTx`",
        rightTextTitle: "通过 `rightText`",
      },
      customActionComponents: {
        name: "自定义动作组件",
        description:
          "如果图标或文字选项对您的用例不够灵活，您可以使用 `LeftActionComponent` 或 `RightActionComponent` 传递自己的自定义动作组件。",
        customLeftActionTitle: "自定义左侧动作",
      },
      titleModes: {
        name: "标题模式",
        description: "标题可以强制保持在中心（默认）或在左动作按钮右侧弹性调整。",
        centeredTitle: "居中",
        flexTitle: "弹性",
      },
      styling: {
        name: "样式",
        description: "组件可以轻松设置样式。",
        styledTitle: "样式化的标题",
        styledWrapperTitle: "包装器样式",
        tintedIconsTitle: "着色的图标",
      },
    },
  },
  demoEmptyState: {
    description: "用于在没有数据显示时使用的组件。可用于指导用户下一步该做什么。",
    useCase: {
      presets: {
        name: "预设",
        description: "您可以创建不同的预设。这是默认预设。",
      },
      passingContent: {
        name: "传递内容",
        description: "有几种不同的方式来传递内容。",
        customizeImageHeading: "自定义图像",
        customizeImageContent: "您可以传递任何 `ImageSource` 到 image 属性。",
        viaHeadingProp: "通过 `heading` 属性",
        viaContentProp: "通过 `content` 属性",
        viaButtonProp: "通过 `button` 属性",
      },
      styling: {
        name: "样式",
        description: "组件可以轻松设置样式。",
        styledHeading: "样式化的标题",
        styledContent: "样式化的内容",
        styledButton: "样式化的按钮",
      },
    },
  },
}

export default demoZh