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.

This commit is contained in:
nepiedg
2026-01-25 14:48:20 +08:00
parent c883ae7b17
commit 661f39dfd7
24 changed files with 4569 additions and 572 deletions
+134
View File
@@ -0,0 +1,134 @@
# 组件使用说明
## smoke-record-dialog - 抽烟记录弹框组件
这是一个可复用的底部弹框组件,用于记录抽烟或抵抗记录。
### 特性
- ✨ 从底部弹出,半屏展示
- 🎨 明亮主题设计
- 📱 支持日期时间选择
- 🔢 支持数量调整和烟瘾等级选择
- 📝 支持备注输入
- 🔄 全局可复用(已配置 easycom 自动导入)
### 使用方法
#### 方式一:easycom 自动导入(推荐)
无需手动导入,直接在模板中使用即可:
```vue
<template>
<view>
<!-- 触发按钮 -->
<button @tap="openDialog">记录抽烟</button>
<!-- 弹框组件 - 自动导入无需 import -->
<smoke-record-dialog
v-model:show="showDialog"
:type="dialogType"
@submit="handleSubmit"
/>
</view>
</template>
<script setup>
import { ref } from 'vue'
import * as api from '@/api'
const showDialog = ref(false)
const dialogType = ref('smoke') // 'smoke' 或 'resisted'
function openDialog() {
dialogType.value = 'smoke' // 或 'resisted'
showDialog.value = true
}
async function handleSubmit(data) {
try {
await api.createLog(data)
uni.showToast({ title: '记录成功', icon: 'success' })
// 更新数据...
} catch (e) {
console.error('提交失败:', e)
}
}
</script>
```
#### 方式二:手动导入(可选)
```vue
<script setup>
import smokeRecordDialog from '@/components/smoke-record-dialog/smoke-record-dialog.vue'
// 其他代码...
</script>
```
### Props
| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| show | Boolean | false | 控制弹框显示/隐藏 |
| type | String | 'smoke' | 记录类型:'smoke'(抽烟) 或 'resisted'(忍住) |
### Events
| 事件名 | 参数 | 说明 |
|--------|------|------|
| update:show | Boolean | 弹框显示状态变化时触发 |
| submit | Object | 提交表单时触发,返回表单数据 |
### 提交数据格式
```javascript
{
smoke_time: "2025-12-31", // 日期
smoke_at: "2025-12-31 08:30:00", // 完整时间
remark: "压力大", // 备注
level: 2, // 烟瘾等级(1-5
num: 3 // 数量(忍住时为0
}
```
### 示例场景
#### 场景1:记录抽烟
```vue
<button @tap="recordSmoke">记录抽烟</button>
<smoke-record-dialog
v-model:show="showDialog"
type="smoke"
@submit="handleSmokeSubmit"
/>
```
#### 场景2:记录忍住
```vue
<button @tap="recordResisted">想抽忍住了</button>
<smoke-record-dialog
v-model:show="showDialog"
type="resisted"
@submit="handleResistedSubmit"
/>
```
### 样式定制
组件内部样式已设置为 `scoped`,如需自定义样式,可以通过以下方式:
1. 修改组件内部样式文件
2. 使用深度选择器覆盖样式(不推荐)
### 注意事项
1. 组件使用 v-model:show 双向绑定显示状态
2. type 为 'resisted' 时,num 自动设置为 0
3. 表单数据会在打开弹框时自动初始化为当前时间
4. 提交后弹框会自动关闭