control/src/pages/login/index.vue

<template>
  <div class="login">
    <topBar />
    <div class="login-content">
      <div class="login-content-left" />
      <div class="login-content-right">
        <p>Hello, 欢迎登录</p>
        <div>
          <Icon
            name="server"
            :size="25"
          />
          <input
            v-model="url"
            type="text"
            placeholder="mqtts://*******"
            maxlength="50"
          >
        </div>
        <div>
          <Icon
            name="username"
            :size="25"
          />
          <input
            v-model="room"
            type="text"
            placeholder="请输入房间"
            maxlength="20"
          >
        </div>
        <div>
          <Icon
            name="password"
            :size="25"
          />
          <input
            v-model="name"
            type="text"
            placeholder="请输入名称"
            maxlength="20"
          >
        </div>
        <span>{{ err }}</span>
        <div>
          <n-button
            type="info"
            block
            :disabled="disabled"
            @click="login"
          >
            加入
          </n-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  computed, onUnmounted, ref, watch
} from 'vue'
import topBar from '@/components/topBar.vue'
import useStore from '@/store/index'
import MqttService from '@/services/mqtt.service'

const err = ref('')
const name = ref('test123')
const room = ref('test')
const url = ref('mqtts://caner.top:49659')
const disabled = computed(() => !name.value || !room.value || !url.value || !url.value.startsWith('mqtts:'))
const store = useStore()
const mqtt = new MqttService()

async function login() {
  if (disabled.value) return
  await mqtt.connect(url.value, room.value, name.value)
}

watch(() => store.mqtt_message, (val) => {
  console.log('监听', val)
})
</script>
<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(@/assets/img/bg.png) center center no-repeat;
  background-size: 100% 100%;
  -webkit-app-region: drag;
  position: relative;

  &-content {
    width: 800px;
    height: 400px;
    background: white;
    border-radius: 20px;
    display: flex;
    overflow: hidden;

    &-left {
      width: 500px;
      background: url(@/assets/img/login-left.png) center center no-repeat;
      background-size: 100% 100%;
      -webkit-app-region: drag;
    }

    &-right {
      width: 300px;
      padding: 0 30px;
      -webkit-app-region: no-drag;
      overflow: hidden;

      &>p {
        font-size: 30px;
        color: #5970C6;
        text-align: left;
        font-weight: 400;
        text-align: center;
        margin-top: 50px;
        margin-bottom: 50px;
      }

      &>div {
        padding: 10px 0;
        display: flex;
        align-items: center;

        &:not(:last-child) {
          border-bottom: solid 1px #D2D6E7;
        }

        input {
          border: none;
          margin-left: 5px;
          outline: none;
          width: 100%;
          font-size: 15px;
          color: #333;

          &::placeholder {
            color: #9DA1A8;
            font-size: 15px;
          }
        }

        // button {
        //   background: #79b8fa;
        //   border: none;
        //   outline: none;
        //   color: white;
        //   font-size: 16px;
        //   font-weight: 500;
        //   border-radius: 10px;
        //   margin-top: 40px;
        //   margin-left: auto;
        //   line-height: 35px;
        //   padding: 0 35px;
        //   cursor: not-allowed;
        // }
      }

      &>span {
        height: 17px;
        color: red;
        font-size: 12px;
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
      }

      .resetStyle {
        background: #2d8cf0;
        cursor: pointer;
      }
    }
  }
}
</style>