# useComponentSetting 组件默认配置

为 **ProTable、ProForm** 等组件提供统一的默认 props 配置能力：在应用入口通过 `setSetting` 设置一次，所有未显式传入的 props 将使用这些默认值。组件内部合并顺序为：**默认配置 ← 组件 props ← setProps**。

---

## API

```ts
import { useComponentSetting } from 'element-component-pro'
import type { UseComponentSettingReturn } from 'element-component-pro'

const { getSetting, setSetting } = useComponentSetting()
// 返回类型为 UseComponentSettingReturn
```

| 方法 | 类型 | 说明 |
|------|------|------|
| `getSetting` | `(componentName?: string) => Record<string, unknown>` | 获取默认配置。不传参返回全部组件的配置；传组件名（如 `'ProTable'`、`'ProForm'`）返回该组件的默认配置。 |
| `setSetting` | `(componentName: string, config: Record<string, unknown>) => void` | 设置指定组件的默认配置，与已有配置**浅合并**（不会覆盖未在 `config` 中传入的已有字段）。 |

---

## 基本用法

### 设置默认配置

通常在应用入口（如 `main.ts` 或根组件 `setup`）调用一次：

```ts
import { useComponentSetting } from 'element-component-pro'

const { setSetting } = useComponentSetting()

// ProTable 全局默认：小尺寸、带边框、显示序号列
setSetting('ProTable', {
  size: 'small',
  bordered: true,
  showIndexColumn: true,
})

// ProForm 全局默认
setSetting('ProForm', {
  labelWidth: '140px',
  size: 'small',
})
```

之后所有 `<ProTable>`、`<ProForm>` 若未传 `size`、`bordered`、`labelWidth` 等，将使用上述默认值。组件上显式传入的 props 会覆盖默认配置。

### 获取当前默认配置

```ts
const { getSetting } = useComponentSetting()

// 获取 ProTable 的默认配置
const tableDefaults = getSetting('ProTable')
// => { size: 'small', bordered: true, showIndexColumn: true }

// 获取全部组件的默认配置
const all = getSetting()
// => { ProTable: { ... }, ProForm: { ... } }
```

---

## 组件名约定

| 组件名 | 说明 |
|--------|------|
| `'ProTable'` | ProTable 表格组件 |
| `'ProForm'` | ProForm 表单组件 |

其他组件若在内部接入了 `getSetting(组件名)`，也可使用相同方式设置默认配置。

---

## 与 props / setProps 的优先级

对单个组件实例而言，最终生效的 props 按以下顺序合并（后者覆盖前者）：

1. **getSetting(组件名)** 得到的默认配置  
2. 组件上直接传入的 **props**（如 `<ProTable size="medium" />`）  
3. 通过 **tableAction.setProps()** / **formAction.setProps()** 动态设置的值  

因此：默认配置 < 显式 props < 编程式 setProps。

---

## 示例

```vue
<template>
  <ProTable title="表格" :columns="columns" :data-source="data" row-key="id" />
</template>

<script setup lang="ts">
import { ProTable } from 'element-component-pro'
import type { ProColumn } from 'element-component-pro'

// 未传 size、bordered，将使用 useComponentSetting 中 setSetting('ProTable', { size, bordered }) 的默认值
const columns: ProColumn[] = [
  { title: 'ID', dataIndex: 'id', width: 80 },
  { title: '姓名', dataIndex: 'name', width: 120 },
]
const data = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
]
</script>
```

在项目示例中可打开 **「componentSettings 测试」** 页面查看完整演示。