wireguard-dashboard/web/src/components/page/ClientListHeaderPage.vue

<template>
  <AppPage :show-footer="showFooter">
    <header v-if="showHeader" mt-10 mb-20 min-h-45 flex items-center justify-between px-15>
      <slot v-if="$slots.header" name="header" />
      <template v-else>
        <n-card style="margin-left: 1.65%; width: 97.25%">
          <n-space justify="end">
            <n-button size="small" style="float: right" type="info" @click="addClient">添加</n-button>
            <n-button size="small" style="float: right" type="primary" @click="refreshList">刷新</n-button>
          </n-space>
        </n-card>
        <slot name="action" />
      </template>
    </header>

    <div>
      <slot />
    </div>
  </AppPage>
  <n-modal
    style="width: 25%"
    v-model:show="addModalShow"
    preset="card"
    title="添加"
    header-style="margin-left: 40%"
  >
    <n-form
      ref="addModalFormRef"
      :rules="addModalFormRules"
      :model="addModalForm"
      label-placement="left"
      label-width="auto"
      label-align="left"
      require-mark-placement="right"
    >
      <n-form-item label="名称" path="name">
        <n-input v-model:value="addModalForm.name"/>
      </n-form-item>
      <n-form-item label="邮箱" path="email">
        <n-input v-model:value="addModalForm.email"/>
      </n-form-item>
      <n-form-item label="IP" path="addModalForm.ipAllocation">
        <n-select
          v-model:value="addModalForm.ipAllocation"
          filterable
          multiple
          tag
          placeholder="输入，按回车确认"
          :show-arrow="false"
          :show="false"
        />
      </n-form-item>
      <n-form-item label="可访问IP" path="allowedIps">
        <n-select
          v-model:value="addModalForm.allowedIps"
          filterable
          multiple
          tag
          placeholder="输入，按回车确认"
          :show-arrow="false"
          :show="false"
        />
      </n-form-item>
      <n-form-item label="可访问IP（扩展）" path="extraAllowedIps">
        <n-select
          v-model:value="addModalForm.extraAllowedIps"
          filterable
          multiple
          tag
          placeholder="输入，按回车确认"
          :show-arrow="false"
          :show="false"
        />
      </n-form-item>
      <n-form-item label="服务端DNS" path="useServerDns">
        <n-radio value="1" :checked="addModalForm.useServerDns === 1" @change="addModalForm.useServerDns = 1">是</n-radio>
        <n-radio value="0" :checked="addModalForm.useServerDns === 0" @change="addModalForm.useServerDns = 0">否</n-radio>
      </n-form-item>
      <n-form-item label="公钥" path="keys.publicKey">
        <n-input v-model:value="addModalForm.keys.publicKey"></n-input>
      </n-form-item>
      <n-form-item label="私钥" path="keys.privateKey">
        <n-input v-model:value="addModalForm.keys.privateKey"></n-input>
      </n-form-item>
      <n-form-item label="共享密钥" path="keys.presharedKey">
        <n-input v-model:value="addModalForm.keys.presharedKey"></n-input>
      </n-form-item>
      <n-form-item>
        <n-button style="margin-left: 28%" size="small" type="info" @click="generateKeys">生成密钥对</n-button>
      </n-form-item>
      <n-form-item label="状态" path="editModalForm.enabled">
        <n-radio-group :value="addModalForm.enabled">
          <n-radio :value="1" :checked="addModalForm.enabled === 1" @change="addModalForm.enabled = 1">启用</n-radio>
          <n-radio :value="0" :checked="addModalForm.enabled === 0" @change="addModalForm.enabled = 0">禁用</n-radio>
        </n-radio-group>
      </n-form-item>
      <n-form-item label="离线监听" path="offlineMonitoring">
        <n-radio-group :value="addModalForm.offlineMonitoring">
          <n-radio :value="1" :checked="addModalForm.offlineMonitoring === 1" @change="addModalForm.offlineMonitoring = 1">启用</n-radio>
          <n-radio :value="0" :checked="addModalForm.offlineMonitoring === 0" @change="addModalForm.offlineMonitoring = 0">禁用</n-radio>
        </n-radio-group>
      </n-form-item>
      <n-button type="info" style="margin-left: 40%" @click="confirmAddClient()">确认</n-button>
    </n-form>
  </n-modal>
</template>

<script setup>
import clientApi from '@/views/client/api'
import { NButton } from 'naive-ui'
import { debounce } from '@/utils'
defineProps({
  showFooter: {
    type: Boolean,
    default: false,
  },
  showHeader: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: undefined,
  },
})
const route = useRoute()

const addModalShow = ref(false)


// 添加模态框的form ref
const addModalFormRef = ref()

// 添加模态框的form rules
const addModalFormRules = {
  name: [
    { required: true, message: '名称不能为空', trigger: 'blur' }
  ],
  ipAllocation: [
    { required: true, message: '客户端IP不能为空', trigger: 'change' }
  ],
  keys: {
    privateKey: [
      { required: true, message: '密钥不能为空', trigger: 'blur' }
    ],
    publicKey: [
      { required: true, message: '公钥不能为空', trigger: 'blur' }
    ],
    presharedKey: [
      { required: true, message: '共享密钥不能为空', trigger: 'blur' }
    ],
  },
  enabled: [
    { required: true, message: '状态不能为空', trigger: 'change' }
  ]
}

// 添加模态框的数据集
const addModalForm = ref({
  id: '',
  name: '',
  email: '',
  ipAllocation: [],
  allowedIps: [],
  extraAllowedIps: [],
  useServerDns: 0,
  keys: {
    privateKey: '',
    publicKey: '',
    presharedKey: ''
  },
  enabled: 1,
  offlineMonitoring: 1
})

// 点击确认按钮
async function confirmAddClient() {
  addModalFormRef.value.validate(async (valid) => {
    if (valid) {
      return valid
    }

    clientApi.saveClient(addModalForm.value).then((response) => {
      if (response.data.code === 200) {
        refreshList()
        addModalShow.value = false
      }
    })
  })
}

// 添加客户端
const addClient = debounce(() => {
    generateClientIPS()
    addModalShow.value = true
},300)

// 生成密钥对
function generateKeys() {
  clientApi.generateClientKeys().then(res => {
    if (res.data.code === 200) {
      addModalForm.value.keys.privateKey = res.data.data.privateKey
      addModalForm.value.keys.publicKey = res.data.data.publicKey
      addModalForm.value.keys.presharedKey = res.data.data.presharedKey
    }
  })
}

// 生成客户端IP
function generateClientIPS() {
  clientApi.generateClientIP().then(res => {
    if (res.data.code === 200) {
      addModalForm.value.ipAllocation = res.data.data.clientIPS
      addModalForm.value.allowedIps = res.data.data.serverIPS
      generateKeys()
    }
  })
}

// 刷新列表
function refreshList() {
  clientApi.clientList({
    current: 1,
    size: 8
  })
}


</script>