feat：绑定设备和设备详情

src/pages/device/components/room-location-dialog/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <view v-if="visible" class="room-location-dialog">
+    <view class="room-location-dialog__mask" @tap="onCancel" />
+    <view class="room-location-dialog__panel" @tap.stop>
+      <text class="room-location-dialog__title">设置房间位置</text>
+      <view class="room-location-dialog__input-wrap">
+        <input
+          v-model="roomName"
+          class="room-location-dialog__input"
+          type="text"
+          maxlength="20"
+          placeholder="请输入位置名称"
+          placeholder-class="room-location-dialog__placeholder"
+          :focus="visible"
+        />
+      </view>
+      <view class="room-location-dialog__footer">
+        <view class="room-location-dialog__btn" @tap="onCancel">
+          <text class="room-location-dialog__btn-text">取消</text>
+        </view>
+        <view class="room-location-dialog__divider-v" />
+        <view class="room-location-dialog__btn" @tap="onConfirm">
+          <text class="room-location-dialog__btn-text room-location-dialog__btn-text--primary">
+            确定
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps<{
+  visible: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  confirm: [name: string]
+}>()
+
+const roomName = ref('')
+
+watch(
+  () => props.visible,
+  (show) => {
+    if (show) roomName.value = ''
+  },
+)
+
+function onCancel() {
+  emit('update:visible', false)
+}
+
+function onConfirm() {
+  const name = roomName.value.trim()
+  if (!name) {
+    uni.showToast({ title: '请输入位置名称', icon: 'none' })
+    return
+  }
+  emit('confirm', name)
+  emit('update:visible', false)
+}
+</script>
+
+<style lang="scss" scoped>
+.room-location-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.room-location-dialog__mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+}
+
+.room-location-dialog__panel {
+  position: relative;
+  width: 560rpx;
+  background: #fff;
+  border-radius: 24rpx;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.room-location-dialog__title {
+  display: block;
+  padding: 48rpx 40rpx 32rpx;
+  font-size: 34rpx;
+  font-weight: 600;
+  color: $color-text;
+  text-align: center;
+  line-height: 1.3;
+}
+
+.room-location-dialog__input-wrap {
+  margin: 0 40rpx 40rpx;
+  padding: 0 28rpx;
+  height: 88rpx;
+  background: #f5f5f5;
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+}
+
+.room-location-dialog__input {
+  flex: 1;
+  height: 88rpx;
+  font-size: 28rpx;
+  color: $color-text;
+}
+
+.room-location-dialog__placeholder {
+  color: #c0c4cc;
+  font-size: 28rpx;
+}
+
+.room-location-dialog__footer {
+  display: flex;
+  align-items: stretch;
+  border-top: 1rpx solid #ebedf0;
+}
+
+.room-location-dialog__btn {
+  flex: 1;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.room-location-dialog__divider-v {
+  width: 1rpx;
+  background: #ebedf0;
+}
+
+.room-location-dialog__btn-text {
+  font-size: 32rpx;
+  color: $color-text;
+  line-height: 1;
+}
+
+.room-location-dialog__btn-text--primary {
+  color: #21c25e;
+  font-weight: 500;
+}
+</style>