npm package: @ray-js/audit-rating-web-component
Description: 基于 React 的审计评分 Web 组件，用于展示应用程序的审计评分和性能指标。该组件可以通过 npm 或 CDN 轻松集成到任何 Web 应用程序中。
Latest version: 1.7.2

# Audit Rating Web Component

基于 React 的审计评分 Web 组件，用于展示应用程序的审计评分和性能指标。该组件可以通过 npm 或 CDN 轻松集成到任何 Web 应用程序中。

[English](./README.md) | 简体中文

## 功能特点

- 全面展示性能、体验和最佳实践指标
- 显示失败项目的详细资源信息
- 响应式设计，适配所有设备
- 支持国际化（中文和英文）
- 通过数据属性自定义配置
- 易于集成的 Web Component

## 安装

### 使用 npm/yarn/pnpm

```bash
npm install @ray-js/audit-rating-web-component
# 或
yarn add @ray-js/audit-rating-web-component
# 或
pnpm add @ray-js/audit-rating-web-component
```

### 使用 CDN

可以直接通过 CDN 引入组件：

```html
<!-- 引入 React 和 ReactDOM（生产版本） -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

<!-- 引入审计评分组件 -->
<script src="https://unpkg.com/@ray-js/audit-rating-web-component/dist/audit-rating-component.umd.cjs"></script>
<link rel="stylesheet" href="https://unpkg.com/@ray-js/audit-rating-web-component/dist/audit-rating-component.css">
```

## 使用方法

### 基本用法

引入脚本后，可以在 HTML 中使用自定义元素：

```html
<!-- 方法一：直接使用自定义元素 -->
<audit-rating-box data-language="zh"></audit-rating-box>

<!-- 方法二：使用 ID 为 audit-rating-box 的 div -->
<div id="audit-rating-box" data-language="zh"></div>
```

### 提供数据

有两种方式提供数据：

#### 1. 使用 script 标签提供 JSON 数据

```html
<!-- 在 HTML head 中添加 -->
<script type="application/json" id="miniprogram-audit-rating-data">
  {
    "basicInfo": {
      "brand": "iPhone",
      "model": "iPhone 7 Plus",
      "jssdkVersion": "2.27.0",
      "network": "wifi",
      "miniprogramId": "your-miniprogram-id",
      "miniprogramName": "你的应用名称",
      "versionCode": "1.0.0"
    },
    "source": [
      {
        "id": "performance",
        "score": 85,
        "level": "good",
        "tasks": [...]
      },
      // 更多数据项...
    ]
  }
</script>

<!-- 然后使用组件 -->
<audit-rating-box data-language="zh"></audit-rating-box>
```

#### 2. 使用数据属性

```html
<audit-rating-box 
  data-language="zh"
  data-source='[{"id":"performance","score":85,"level":"good","tasks":[...]}]'
  data-basic-info='{"brand":"iPhone","model":"iPhone 7 Plus","jssdkVersion":"2.27.0","network":"wifi","miniprogramId":"your-id","miniprogramName":"你的应用","versionCode":"1.0.0"}'>
</audit-rating-box>
```

#### 3. 动态创建元素

```html
<div id="container"></div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('container');
    if (container) {
      const customElement = document.createElement('audit-rating-box');
      customElement.setAttribute('data-language', 'zh');
      container.appendChild(customElement);
    }
  });
</script>
```

## 配置选项

组件接受以下数据属性：

- `data-language`：使用的语言（"en" 或 "zh"，默认为 "en"）
- `data-source`：包含审计源数据的 JSON 字符串
- `data-basic-info`：包含被审计应用基本信息的 JSON 字符串

## 数据格式

### 基本信息

`basicInfo` 对象应包含以下属性：

```json
{
  "brand": "iPhone",
  "model": "iPhone 7 Plus",
  "jssdkVersion": "2.27.0",
  "network": "wifi",
  "miniprogramId": "your-miniprogram-id",
  "miniprogramName": "你的应用名称",
  "versionCode": "1.0.0"
}
```

### 源数据

`source` 数组包含性能指标和其他审计数据：

```json
[
  {
    "id": "performance",
    "score": 85,
    "level": "good",
    "tasks": [...]
  },
  // 更多指标...
]
```

## 开发

```bash
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build
```

## 许可证

MIT