# useFormConfig Hook 使用文档

## 概述

`useFormConfig` 是一个响应式表单配置 Hook，根据当前语言自动调整表单样式，支持自定义配置。

## 基础用法

### 默认配置
```javascript
import { useFormConfig } from '@/hooks/useFormConfig';

const { formLabelWidth, formLayout } = useFormConfig();
```

**默认值：**
- 中文标签宽度：`120px`
- 英文标签宽度：`160px`

### 在模板中使用
```vue
<template>
  <!-- 简单使用 -->
  <el-form :label-width="formLabelWidth">
    <!-- 表单项 -->
  </el-form>

  <!-- 完整配置 -->
  <el-form v-bind="formLayout">
    <!-- 表单项 -->
  </el-form>
</template>
```

## 自定义配置

### 1. 自定义标签宽度
```javascript
// 方式1：分别设置中英文宽度
const { formLabelWidth } = useFormConfig({
  zhWidth: '100px',  // 中文宽度
  enWidth: '140px'   // 英文宽度
});

// 方式2：使用自定义宽度对象
const { formLabelWidth } = useFormConfig({
  customWidths: {
    zh: '100px',
    en: '140px'
  }
});
```

### 2. 自定义间距和字体
```javascript
const { formLabelWidth, formItemSpacing, inputPlaceholderStyle } = useFormConfig({
  zhWidth: '100px',
  enWidth: '140px',
  spacing: {
    zh: '16px',
    en: '20px'
  },
  fontSize: {
    zh: '13px',
    en: '12px'
  }
});
```

### 3. 自定义按钮尺寸
```javascript
const { buttonSize } = useFormConfig({
  defaultButtonSize: 'small'  // 'large' | 'default' | 'small'
});
```

## 完整配置选项

```javascript
const options = {
  // 标签宽度配置
  zhWidth: '120px',           // 中文标签宽度
  enWidth: '160px',           // 英文标签宽度
  customWidths: {             // 自定义宽度对象（优先级最高）
    zh: '100px',
    en: '140px'
  },
  
  // 间距配置
  spacing: {
    zh: '20px',               // 中文表单项间距
    en: '24px'                // 英文表单项间距
  },
  
  // 按钮配置
  defaultButtonSize: 'default', // 按钮尺寸
  
  // 字体配置
  fontSize: {
    zh: '14px',               // 中文字体大小
    en: '13px'                // 英文字体大小
  }
};

const formConfig = useFormConfig(options);
```

## 返回值

```javascript
const {
  // 基础配置
  formLabelWidth,           // 响应式标签宽度
  formItemSpacing,          // 响应式表单项间距
  buttonSize,               // 按钮尺寸
  inputPlaceholderStyle,    // 输入框占位符样式
  validationMessageStyle,   // 验证消息样式
  formLayout,               // 完整表单布局配置
  
  // 响应式配置
  responsiveFormConfig,     // 响应式宽度配置
  
  // 便捷方法
  getCurrentLanguage,       // 获取当前语言
} = useFormConfig();
```

## 使用场景

### 场景1：标准表单（使用默认配置）
```vue
<script setup>
import { useFormConfig } from '@/hooks/useFormConfig';

const { formLabelWidth } = useFormConfig();
</script>

<template>
  <el-form :label-width="formLabelWidth">
    <!-- 表单内容 -->
  </el-form>
</template>
```

### 场景2：紧凑表单（较小的标签宽度）
```vue
<script setup>
import { useFormConfig } from '@/hooks/useFormConfig';

const { formLabelWidth } = useFormConfig({
  zhWidth: '80px',
  enWidth: '120px'
});
</script>
```

### 场景3：宽松表单（较大的标签宽度）
```vue
<script setup>
import { useFormConfig } from '@/hooks/useFormConfig';

const { formLabelWidth } = useFormConfig({
  zhWidth: '150px',
  enWidth: '200px'
});
</script>
```

### 场景4：完整样式配置
```vue
<script setup>
import { useFormConfig } from '@/hooks/useFormConfig';

const { 
  formLayout, 
  buttonSize, 
  inputPlaceholderStyle,
  validationMessageStyle 
} = useFormConfig({
  zhWidth: '100px',
  enWidth: '140px',
  defaultButtonSize: 'small'
});
</script>

<template>
  <el-form v-bind="formLayout">
    <el-form-item label="名称" prop="name">
      <el-input 
        v-model="form.name" 
        :style="inputPlaceholderStyle"
      />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" :size="buttonSize">
        提交
      </el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>
/* 应用验证消息样式 */
:deep(.el-form-item__error) {
  font-size: v-bind('validationMessageStyle.fontSize');
  line-height: v-bind('validationMessageStyle.lineHeight');
}
</style>
```

## 注意事项

1. **优先级**：`customWidths` > `zhWidth/enWidth` > 默认值
2. **响应式**：所有配置都是响应式的，语言切换时自动更新
3. **单位**：宽度配置需要包含单位（如 `'120px'`）
4. **兼容性**：支持所有 Element Plus 表单组件