# DataSourceWrapper 数据源容器组件

数据源容器组件，用于为子组件提供数据源上下文，实现数据的统一管理和分发。

## 功能特点

- 为子组件提供数据源上下文
- 支持数据的自动加载和刷新
- 支持数据覆盖和自定义操作
- 支持列表数据和详情数据的管理
- 支持自动运行配置
- 自动在变量上挂载数据源操作方法

## 组件属性

| 属性名       | 类型                                                                                                                                            | 默认值                      | 说明                  |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------- |
| dataSource   | DataSourceType                                                                                                                                  | -                           | 数据源配置            |
| overrideData | { list?: any, get?: any }                                                                                                                       | -                           | 覆盖数据配置          |
| autoRun      | { list?: boolean, get?: boolean }                                                                                                               | { list: false, get: false } | 自动运行配置          |
| actions      | { list?: () => Promise<any>, get?: () => Promise<any>, update?: () => Promise<any>, create?: () => Promise<any>, destroy?: () => Promise<any> } | -                           | 自定义操作方法        |
| currentValue | string                                                                                                                                          | -                           | 当前值获取方式        |
| \_\_id       | string                                                                                                                                          | -                           | 组件 ID，用于变量挂载 |

## 使用示例

### 基础用法

```tsx
import { DataSourceWrapper } from '@pisell/materials';

const Demo = () => {
  return (
    <DataSourceWrapper
      dataSource={{
        fields: [
          // 数据源字段配置
        ],
      }}
      __id="myDataWrapper"
    >
      <YourComponent />
    </DataSourceWrapper>
  );
};
```

### 数据覆盖

```tsx
<DataSourceWrapper
  dataSource={dataSource}
  overrideData={{
    list: customListData,
    get: customDetailData,
  }}
>
  <YourComponent />
</DataSourceWrapper>
```

### 自动运行

```tsx
<DataSourceWrapper
  dataSource={dataSource}
  autoRun={{
    list: true, // 自动加载列表数据
    get: true, // 自动加载详情数据
  }}
>
  <YourComponent />
</DataSourceWrapper>
```

### 自定义操作

```tsx
<DataSourceWrapper
  dataSource={dataSource}
  actions={{
    list: async () => {
      // 自定义列表数据获取逻辑
      return customListData;
    },
    get: async () => {
      // 自定义详情数据获取逻辑
      return customDetailData;
    },
  }}
>
  <YourComponent />
</DataSourceWrapper>
```

## 数据获取方式

### 子组件中获取

在子组件中可以通过 `useVariables` hook 获取变量上下文：

```tsx
const ChildComponent = () => {
  const { parseVariable, subscribeVariables } = useVariables();

  // 使用数据源操作方法
  const value = parseVariable('{{myDataWrapper.value.get.data.test}}');

  return (
    <div></div>
    // 组件内容
  );
};
```

## 注意事项

1. 组件会自动为子组件注入数据源上下文
2. 数据覆盖配置优先级高于数据源配置
3. 自动运行配置可以控制数据的自动加载行为
4. 子组件可以通过 useDataSource hook 获取数据源操作方法
5. 支持自定义 actions 来覆盖默认的数据操作方法
6. 需要提供 `__id` 属性才能在变量上挂载数据源操作方法
7. 变量上挂载的 get list 方法，可以获取到数据源的 list 和 get 方法及数据
