Implement login functionality and UI updates across the application. Added silent login process in App.vue, updated styles for various components, and integrated smoke record dialog. Enhanced onboarding and profile pages with improved layouts and user experience. Updated manifest and configuration files for deployment. Added easycom configuration for component auto-import.

2026-01-25 14:48:20 +08:00
parent c883ae7b17
commit 661f39dfd7
24 changed files with 4569 additions and 572 deletions
@@ -0,0 +1,165 @@
+# 组件错误修复说明
+
+## 问题描述
+
+微信小程序报错：
+```
+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. 查看控制台详细错误信息