# ✅ 正确的修改方案 - 添加设备配置按钮

## 🎯 问题分析

你说得对！demo 项目是在**登录界面**添加了一个 **"连接 ESP32"** 按钮：

```java
// LoginActivity.java 第 106-113 行
if (btnEsp32Connect != null) {
    btnEsp32Connect.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            startActivity(new Intent(LoginActivity.this, DeviceDiscoveryMdnsActivity.class));
        }
    });
}
```

**你的 uni-app 也需要一个按钮来打开设备发现！**

## 🔧 正确的修改方案

### 方案 A: 在首页添加"设备配置"按钮（推荐）

在 `pages/index/index.vue` 的顶部添加一个设备配置按钮。

#### 1. 修改模板部分

找到 `<template>` 中的头部区域（约第 7-16 行），修改为：

```vue
<!-- 头部 -->
<view class="header">
	<view class="header-left">
		<text class="title">{{$t('appTitle')}}</text>
		<text class="subtitle">{{$t('appSubtitle')}}</text>
	</view>
	<view class="header-right">
		<!-- 新增：设备配置按钮 -->
		<text class="device-config-icon" @click="openDeviceConfig">⚙️</text>
		<text class="msg-icon">🔔</text>
		<view v-if="unreadCount > 0" class="badge">{{unreadCount}}</view>
	</view>
</view>
```

#### 2. 添加方法

在 `methods` 中添加（约第 235 行之后）：

```javascript
/**
 * 打开设备配置页面
 */
openDeviceConfig() {
	console.log('🔧 打开设备配置')
	
	// 检查是否在Android环境
	if (typeof window !== 'undefined' && window.Android && window.Android.openDeviceDiscovery) {
		// 使用Android原生设备发现
		console.log('🔍 打开Android原生设备发现')
		window.Android.openDeviceDiscovery()
	} else {
		// 使用Web版本或显示提示
		console.log('⚠️ Android原生设备发现不可用')
		uni.showToast({
			title: '请在Android应用中使用',
			icon: 'none',
			duration: 2000
		})
	}
},
```

#### 3. 添加样式

在 `<style>` 中添加（约第 1900 行之后）：

```css
/* 设备配置图标 */
.device-config-icon {
	font-size: 44rpx;
	margin-right: 24rpx;
	padding: 8rpx;
	cursor: pointer;
	transition: transform 0.2s;
}

.device-config-icon:active {
	transform: scale(0.9);
}
```

### 方案 B: 添加独立的设备配置页面（可选）

如果你想要一个专门的设备配置页面，可以创建 `pages/device-config/device-config.vue`：

```vue
<template>
	<view class="container">
		<view class="header">
			<text class="title">设备配置</text>
		</view>
		
		<view class="config-card">
			<view class="config-item" v-if="deviceConfigured">
				<text class="config-label">设备地址:</text>
				<text class="config-value">{{ deviceHost }}</text>
			</view>
			<view class="config-item" v-if="deviceConfigured">
				<text class="config-label">设备名称:</text>
				<text class="config-value">{{ deviceName }}</text>
			</view>
			<view class="config-status" v-if="!deviceConfigured">
				<text class="status-text">⚠️ 设备未配置</text>
			</view>
		</view>
		
		<view class="button-group">
			<button class="btn-primary" @click="openDeviceDiscovery">
				🔍 扫描设备
			</button>
			<button class="btn-secondary" @click="clearDeviceConfig" v-if="deviceConfigured">
				🗑️ 清除配置
			</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			deviceConfigured: false,
			deviceHost: '',
			deviceName: ''
		}
	},
	onLoad() {
		this.checkDeviceConfig()
	},
	methods: {
		checkDeviceConfig() {
			if (window.Android && window.Android.getDeviceConfig) {
				try {
					const configStr = window.Android.getDeviceConfig()
					const config = JSON.parse(configStr)
					
					if (config.configured) {
						this.deviceConfigured = true
						this.deviceHost = config.host
						this.deviceName = config.deviceName || '未知设备'
					}
				} catch (error) {
					console.error('获取设备配置失败:', error)
				}
			}
		},
		openDeviceDiscovery() {
			if (window.Android && window.Android.openDeviceDiscovery) {
				window.Android.openDeviceDiscovery()
			} else {
				uni.showToast({
					title: '请在Android应用中使用',
					icon: 'none'
				})
			}
		},
		clearDeviceConfig() {
			uni.showModal({
				title: '确认清除',
				content: '确定要清除设备配置吗？',
				success: (res) => {
					if (res.confirm && window.Android && window.Android.clearDeviceConfig) {
						window.Android.clearDeviceConfig()
						this.deviceConfigured = false
						this.deviceHost = ''
						this.deviceName = ''
					}
				}
			})
		}
	}
}
</script>

<style scoped>
.container {
	padding: 40rpx;
}
.header {
	margin-bottom: 40rpx;
}
.title {
	font-size: 48rpx;
	font-weight: bold;
}
.config-card {
	background: #fff;
	border-radius: 16rpx;
	padding: 40rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}
.config-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 24rpx;
}
.config-label {
	color: #666;
}
.config-value {
	font-weight: bold;
	color: #333;
}
.config-status {
	text-align: center;
	padding: 40rpx;
}
.status-text {
	font-size: 32rpx;
	color: #ff9800;
}
.button-group {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}
.btn-primary, .btn-secondary {
	padding: 28rpx;
	border-radius: 12rpx;
	font-size: 32rpx;
	border: none;
}
.btn-primary {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
}
.btn-secondary {
	background: #f0f0f0;
	color: #666;
}
</style>
```

## 🚀 推荐的简单方案

**最简单的方法：在首页添加一个设备配置图标**

### 完整修改步骤：

#### 1. 修改 `pages/index/index.vue` 模板

找到头部区域（约第 7-16 行）：

```vue
<!-- 头部 -->
<view class="header">
	<view class="header-left">
		<text class="title">{{$t('appTitle')}}</text>
		<text class="subtitle">{{$t('appSubtitle')}}</text>
	</view>
	<view class="header-right">
		<!-- 新增：设备配置按钮 -->
		<text class="device-config-icon" @click="openDeviceConfig">⚙️</text>
		<text class="msg-icon">🔔</text>
		<view v-if="unreadCount > 0" class="badge">{{unreadCount}}</view>
	</view>
</view>
```

#### 2. 添加方法

在 `methods` 中添加：

```javascript
/**
 * 打开设备配置页面
 */
openDeviceConfig() {
	console.log('🔧 打开设备配置')
	
	if (typeof window !== 'undefined' && window.Android && window.Android.openDeviceDiscovery) {
		window.Android.openDeviceDiscovery()
	} else {
		uni.showToast({
			title: '请在Android应用中使用',
			icon: 'none',
			duration: 2000
		})
	}
},
```

#### 3. 添加样式

在 `<style>` 中添加：

```css
.device-config-icon {
	font-size: 44rpx;
	margin-right: 24rpx;
	padding: 8rpx;
	cursor: pointer;
	transition: transform 0.2s;
}

.device-config-icon:active {
	transform: scale(0.9);
}
```

## 📋 修改完成后

1. **保存文件**
2. **打包 uni-app**
   ```
   发行 → H5-Web → 发行到H5
   ```
3. **替换 web 文件夹**
4. **重新 Build Android 应用**

## 🎯 使用方法

用户打开应用后：
1. 看到首页右上角有一个 **⚙️ 图标**
2. 点击图标
3. 打开 mDNS 设备发现界面
4. 扫描并选择 ESP32 设备
5. 配置保存
6. 返回首页，正常使用

---

**这个方案更简单、更符合 demo 项目的设计！** 🎉