# 组件错误修复说明

## 问题描述

微信小程序报错：
```
Error: components/SmokeRecordDialog.js 已被代码依赖分析忽略，无法被其他模块引用
```

## 解决方案

### 1. 调整组件目录结构

**之前：**
```
components/
└── SmokeRecordDialog.vue  ❌ 不符合 uni-app 规范
```

**之后：**
```
components/
└── smoke-record-dialog/
    ├── smoke-record-dialog.vue  ✅ 符合规范
    └── README.md
```

### 2. 更改组件实现方式

- 从 Vue 3 Composition API (`<script setup>`) 改为 **Vue 2 Options API**
- 确保更好的微信小程序兼容性

### 3. 配置 easycom 自动导入

在 `pages.json` 中添加配置：

```json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^smoke-record-dialog$": "@/components/smoke-record-dialog/smoke-record-dialog.vue"
    }
  }
}
```

### 4. 更新组件使用方式

**之前（需要手动导入）：**
```vue
<script setup>
import SmokeRecordDialog from '@/components/SmokeRecordDialog.vue'
</script>

<template>
  <SmokeRecordDialog />
</template>
```

**之后（自动导入）：**
```vue
<script setup>
// 无需 import，自动导入
</script>

<template>
  <smoke-record-dialog />
</template>
```

## 修改文件清单

### 新增文件
- ✅ `components/smoke-record-dialog/smoke-record-dialog.vue` - 新组件文件
- ✅ `components/smoke-record-dialog/README.md` - 组件文档

### 修改文件
- ✅ `pages.json` - 添加 easycom 配置
- ✅ `pages/index/index.vue` - 更新组件引用方式
- ✅ `components/README.md` - 更新使用文档

### 删除文件
- ✅ `components/SmokeRecordDialog.vue` - 旧组件文件（已迁移）

## 关键变更点

### 1. 命名规范
- ❌ `SmokeRecordDialog` (PascalCase)
- ✅ `smoke-record-dialog` (kebab-case)

### 2. 目录结构
- ❌ 单文件组件直接放在 components 下
- ✅ 组件放在同名文件夹内

### 3. API 风格
- ❌ Composition API (`<script setup>`)
- ✅ Options API (更好的兼容性)

### 4. 导入方式
- ❌ 手动 import
- ✅ easycom 自动导入

## 测试检查

使用前请确认：

1. ✅ 微信开发者工具中重新编译项目
2. ✅ 检查控制台是否还有依赖分析错误
3. ✅ 测试弹框打开/关闭功能
4. ✅ 测试表单提交功能
5. ✅ 测试两种模式（抽烟/忍住）

## 使用示例

```vue
<template>
  <view>
    <button @tap="showDialog = true">打开弹框</button>
    
    <!-- 组件自动导入，无需 import -->
    <smoke-record-dialog 
      v-model:show="showDialog"
      type="smoke"
      @submit="handleSubmit"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const showDialog = ref(false)

function handleSubmit(data) {
  console.log('提交数据:', data)
}
</script>
```

## 相关文档

- [uni-app 组件规范](https://uniapp.dcloud.net.cn/component/)
- [easycom 配置说明](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)
- [微信小程序组件开发](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)

## 注意事项

⚠️ **重要提示：**

1. 组件使用 Options API，与 Vue 2 兼容
2. 支持 `v-model:show` 双向绑定（uni-app 已支持）
3. 已配置 easycom，全局自动导入
4. 组件名必须使用小写加连字符（kebab-case）
5. 修改后需要重新编译微信小程序

## 问题排查

如果仍然出现问题，请尝试：

1. 清除微信开发者工具缓存
2. 重新编译项目
3. 检查 `pages.json` 中的 easycom 配置
4. 确认组件文件路径正确
5. 查看控制台详细错误信息