# 组件和工具函数库

这是从 `clue_info.vue` 页面重构提取出来的可复用组件和工具函数集合。

## 🧩 组件列表

### 1. ClientInfoCard - 客户信息卡片
显示客户基本信息的卡片组件，包含客户头像、姓名、电话等信息。

**位置**: `components/client-info-card/client-info-card.vue`

**Props**:
- `clientInfo`: Object - 客户信息对象

**Events**:
- `call`: 拨打电话事件，参数: phoneNumber

**使用示例**:
```vue
<ClientInfoCard 
  :client-info="clientInfo" 
  @call="handleCall" 
/>
```

### 2. StudentInfoCard - 学生信息卡片
显示学生信息的卡片组件，支持展开/收起操作按钮。

**位置**: `components/student-info-card/student-info-card.vue`

**Props**:
- `student`: Object - 学生信息对象
- `actions`: Array - 操作按钮配置（可选）
- `showDetails`: Boolean - 是否显示详细信息（默认true）

**Events**:
- `toggle-actions`: 切换操作面板事件
- `action`: 操作按钮点击事件，参数: { action, student }

**使用示例**:
```vue
<StudentInfoCard 
  :student="student" 
  :actions="[
    { key: 'edit', text: '编辑学生' },
    { key: 'order', text: '查看订单' }
  ]"
  @toggle-actions="toggleActions"
  @action="handleAction"
/>
```

### 3. TabSwitcher - 标签切换组件
通用的标签页切换组件。

**位置**: `components/tab-switcher/tab-switcher.vue`

**Props**:
- `tabs`: Array - 标签配置数组 [{ id, name }]
- `activeTabId`: String|Number - 当前激活标签ID

**Events**:
- `tab-change`: 标签切换事件，参数: { tabId, index, tab }

**使用示例**:
```vue
<TabSwitcher 
  :tabs="[
    { id: 1, name: '基本资料' },
    { id: 2, name: '课程信息' },
    { id: 3, name: '通话记录' }
  ]" 
  :active-tab-id="activeTabId"
  @tab-change="handleTabChange"
/>
```

### 4. FitnessRecordCard - 体测记录卡片
显示体测记录数据和相关PDF报告的卡片组件。

**位置**: `components/fitness-record-card/fitness-record-card.vue`

**Props**:
- `record`: Object - 体测记录对象

**Events**:
- `file-click`: 文件点击事件，参数: { file, record }

**使用示例**:
```vue
<FitnessRecordCard 
  :record="fitnessRecord" 
  @file-click="handleFileClick"
/>
```

### 5. CallRecordCard - 通话记录卡片
显示通话记录详情的卡片组件。

**位置**: `components/call-record-card/call-record-card.vue`

**Props**:
- `record`: Object - 通话记录对象

**使用示例**:
```vue
<CallRecordCard :record="callRecord" />
```

## 🛠️ 工具函数库

### 核心工具函数

以下函数已添加到 `common/util.js` 中：

#### 1. safeGet(obj, path, defaultValue)
安全访问对象属性，避免undefined错误。

```javascript
const name = this.$util.safeGet(clientInfo, 'customerResource.name', '未知客户')
```

#### 2. formatFileSize(bytes)
格式化文件大小为可读格式。

```javascript
this.$util.formatFileSize(1024000) // "1 MB"
```

#### 3. formatAge(age)
格式化年龄显示（小数转年龄+月份）。

```javascript
this.$util.formatAge(9.05) // "9岁5个月"
```

#### 4. formatGender(gender)
格式化性别显示。

```javascript
this.$util.formatGender(1) // "男"
this.$util.formatGender(2) // "女"
```

#### 5. makePhoneCall(phoneNumber, successCallback, failCallback)
拨打电话的通用方法。

```javascript
this.$util.makePhoneCall('13800138000')
```

#### 6. navigateToPage(url, params)
页面跳转的通用方法，自动处理参数拼接。

```javascript
this.$util.navigateToPage('/pages/detail/index', {
  id: 123,
  name: '测试'
})
// 结果: /pages/detail/index?id=123&name=测试
```

#### 7. getCurrentDate()
获取当前日期 YYYY-MM-DD 格式。

```javascript
const today = this.$util.getCurrentDate() // "2024-01-15"
```

## 📁 文件结构

```
components/
├── client-info-card/
│   └── client-info-card.vue
├── student-info-card/
│   └── student-info-card.vue
├── tab-switcher/
│   └── tab-switcher.vue
├── fitness-record-card/
│   └── fitness-record-card.vue
├── call-record-card/
│   └── call-record-card.vue
├── index.js                    # 组件导出索引
└── README.md                   # 本文档

common/
├── util.js                     # 扩展后的工具函数库
└── utils-index.js              # 工具函数导出索引
```

## 🚀 使用方式

### 在页面中使用组件

1. **直接导入使用**:
```vue
<template>
  <ClientInfoCard :client-info="clientInfo" @call="handleCall" />
</template>

<script>
import ClientInfoCard from '@/components/client-info-card/client-info-card.vue'

export default {
  components: {
    ClientInfoCard
  }
}
</script>
```

2. **批量导入**:
```javascript
// 从索引文件导入
import { ClientInfoCard, StudentInfoCard } from '@/components/index.js'
```

### 使用工具函数

工具函数已集成到全局 `$util` 对象中，可直接使用：

```vue
<template>
  <view>{{ $util.safeGet(data, 'user.name', '未知') }}</view>
</template>

<script>
export default {
  methods: {
    handleCall() {
      const phone = this.$util.safeGet(this.clientInfo, 'phone', '')
      this.$util.makePhoneCall(phone)
    }
  }
}
</script>
```

## 💡 重构优势

1. **代码复用**: 组件和工具函数可在多个页面中复用
2. **维护性**: 集中管理，修改一处影响全局
3. **可测试性**: 独立组件易于单元测试
4. **性能优化**: 减少重复代码，提升应用性能
5. **开发效率**: 标准化组件提升开发速度

## 📋 迁移指南

原 `clue_info.vue` 中的代码可按以下方式迁移：

1. 替换工具函数调用：
   - `this.safeGet()` → `this.$util.safeGet()`
   - `this.formatAge()` → `this.$util.formatAge()`
   - `this.makeCall()` → `this.$util.makePhoneCall()`

2. 替换组件代码：
   - 客户信息展示区域 → `<ClientInfoCard>`
   - 学生信息展示区域 → `<StudentInfoCard>` 
   - 标签切换区域 → `<TabSwitcher>`
   - 体测记录展示 → `<FitnessRecordCard>`
   - 通话记录展示 → `<CallRecordCard>`

3. 事件处理：
   - 保持原有事件处理逻辑
   - 通过组件events获取用户操作