termcap/src/components/edit.vue

<template>
  <div class="edit">
    <div class="edit-top">
      <span>Host Setting</span>
      <Icon name="close" :size="20" @click="callBack(false)" />
    </div>
    <div class="edit-content">
      <Icon name="form" :size="240" />

      <div>
        <n-form ref="formRef" :model="formData" :rules="rules">
          <div>
            <n-form-item label="Address" path="host" inline>
              <n-input v-model:value="formData.host" placeholder="请输入" clearable />
            </n-form-item>
            <n-form-item label="Port" path="port" inline>
              <n-input v-model:value="formData.port" placeholder="请输入" clearable />
            </n-form-item>
          </div>

          <n-form-item label="Label" path="label">
            <n-input v-model:value="formData.label" placeholder="请输入" clearable />
          </n-form-item>
          <n-form-item label="UserName" path="userName">
            <n-input v-model:value="formData.userName" placeholder="请输入" clearable />
          </n-form-item>
          <n-form-item label="Passord" path="password">
            <n-input v-model:value="formData.password" placeholder="请输入" clearable />
          </n-form-item>
        </n-form>
        <div>
          <n-button ghost type="tertiary" @click="callBack(false)">
            Cancel
          </n-button>
          <n-button type="info" ghost @click="callBack(true)">
            Save
          </n-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { FormItemRule } from 'naive-ui'
import { ref } from 'vue'

export interface FormData {
  host: string,
  port: string,
  label: string,
  userName: string,
  password: string,
  icon?: string,
  size?: number,
  sshCom?: any,
  sftpCom?: any
}
const props = withDefaults(defineProps<{
  data?: FormData
}>(), {
  data: () => ({
    host: '',
    port: '',
    label: '',
    userName: '',
    password: ''
  })
})
const emit = defineEmits<{ (evt: 'callBack', value: FormData | null): void }>()
const formRef = ref()
class FormOldData {
  host: string

  port: string

  label: string

  userName: string

  password: string

  constructor() {
    this.host = ''
    this.port = ''
    this.label = ''
    this.userName = ''
    this.password = ''
  }
}
const formData = ref(props.data || new FormOldData())
const rules = ref({
  host: {
    required: true, message: '请输入', validator: (_: FormItemRule, value: string) => !!value
  },
  port: {
    required: true, message: '请输入', validator: (_: FormItemRule, value: string) => !!(/^[0-9]*$/.test(value)) && !!value
  },
  label: {
    required: true, message: '请输入', validator: (_: FormItemRule, value: string) => !!value
  },
  userName: {
    required: true, message: '请输入', validator: (_: FormItemRule, value: string) => !!value
  },
  password: {
    required: true, message: '请输入', validator: (_: FormItemRule, value: string) => !!value
  }
})

async function callBack(type: boolean) {
  const data = type ? { ...formData.value } : null
  if (type) await formRef.value.validate()
  emit('callBack', data)
  formData.value = new FormOldData()
}
</script>

<style lang="scss" scoped>
.edit {
  width: 90vw;
  height: 60vh;
  background: var(--background-color);
  border-radius: 10px;
  font-size: 14px;
  overflow: hidden;

  &-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    padding: 10px 15px;

    &>svg {
      cursor: pointer;
    }
  }

  &-content {
    padding: 10px 15px 0 0;
    display: flex;
    align-items: center;

    &>svg {
      margin-right: 10px;
    }

    &>div {
      width: 100%;

      :deep(.n-form) {
        .n-input {
          --n-border-focus: rgba(0, 0, 0, 0);
          --n-border-hover: rgba(0, 0, 0, 0);
          --n-box-shadow-focus: 0 0 0 2px rgba(0, 0, 0, .2);
        }

        &>div:first-child {
          display: flex;

          &>div:first-child {
            width: 78%;
            margin-right: 2%;
          }
        }
      }

      &>div:last-child {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        &>button:last-child {
          margin-left: 15px;
        }

        :deep(.n-button) {
          --n-text-color-hover: none;
          --n-border-focus: 1px solid #0000;
          --n-border-hover: 1px solid #0000;
        }
      }
    }

  }
}
</style>