control/src/components/login.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue'

const name = ref('')
const roomID = ref('')
const props = defineProps<{ modelValue: string }>()
const err = computed(() => props.modelValue)
const emit = defineEmits<{(evt: 'update:modelValue', value: string): void
  (evt: 'loginBack', value: { name: string, roomID: string }): void
}>()

function login() {
  if (name.value && roomID.value) emit('loginBack', { name: name.value, roomID: roomID.value })
}

function titleEvent(type: string) {
  window.$electron?.send(type)
}

watch([ name, roomID ], () => {
  if (name.value && roomID.value) emit('update:modelValue', '')
})
</script>
<template>
  <div class="login">
    <div class="login-title">
      <Icon
        name="close"
        :size="15"
        color="#fff"
        @click="titleEvent('closeWin')"
      />
    </div>
    <div class="login-content">
      <div class="login-content-left" />
      <div
        class="login-content-right"
        @keydown.enter="login"
      >
        <p>Hello, 欢迎登录</p>
        <div>
          <Icon
            name="username"
            :size="25"
          />
          <input
            v-model="roomID"
            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>
          <button
            :disabled="!name && !roomID"
            :class="{ resetStyle: name && roomID }"
            @click="login"
          >
            加入
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  font-size: 0.15rem;
  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;

  &-title {
    position: absolute;
    right: 0.15rem;
    top: 0.12rem;
    cursor: pointer;
    -webkit-app-region: no-drag;
  }

  &-content {
    width: 8rem;
    height: 4rem;
    background: white;
    border-radius: 0.2rem;
    display: flex;
    overflow: hidden;

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

    &-right {
      width: 3rem;
      padding: 0 0.3rem;
      -webkit-app-region: no-drag;
      overflow: hidden;

      &>p {
        font-size: 0.3rem;
        color: #5970C6;
        text-align: left;
        font-weight: 400;
        text-align: center;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
      }

      &>div {
        padding: 0.1rem 0;
        display: flex;
        align-items: center;
        margin: 0.1rem 0;

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

        input {
          border: none;
          margin-left: 0.05rem;
          outline: none;
          width: 100%;
          font-size: 0.15rem;
          color: #333;

          &::placeholder {
            color: #9DA1A8;
            font-size: 0.15rem;
          }
        }

        button {
          background: #79b8fa;
          border: none;
          outline: none;
          color: white;
          font-size: 0.16rem;
          font-weight: 500;
          border-radius: 1rem;
          margin-top: 0.4rem;
          margin-left: auto;
          line-height: 0.35rem;
          padding: 0 0.35rem;
          cursor: not-allowed;
        }
      }

      &>span {
        height: 0.17rem;
        color: red;
        font-size: 0.12rem;
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
      }

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