wireguard-dashboard/web-src/src/views/server/component/detail.vue

<script setup lang="ts">
import { ref } from "vue";
import { FormInstance } from "element-plus";
import { storageLocal } from "@pureadmin/utils";
import { userKey } from "@/utils/auth";
import { clientFormRules } from "@/views/server/component/rules";
import { generateClientKeys } from "@/api/clients";

// 声明 props 类型
export interface DetailFormProps {
  formInline: {
    id: string;
    serverId: string;
    name: string;
    email: string;
    subnetRange: string;
    ipAllocation: [];
    allowedIPS: [];
    extraAllowedIPS: [];
    endpoint: string;
    useServerDNS: number;
    enableAfterCreation: number;
    keys: {
      privateKey: string;
      publicKey: string;
      presharedKey: string;
    };
    enabled: number;
    offlineMonitoring: number;
  };
}

// 声明 props 默认值
// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
const props = withDefaults(defineProps<DetailFormProps>(), {
  formInline: () => ({
    id: "",
    serverId: "",
    name: "",
    email: "",
    subnetRange: "",
    ipAllocation: [],
    allowedIPS: [],
    extraAllowedIPS: [],
    endpoint: "",
    useServerDNS: 0,
    enableAfterCreation: 0,
    keys: {
      privateKey: "",
      publicKey: "",
      presharedKey: ""
    },
    enabled: 1,
    offlineMonitoring: 0
  })
});

// vue 规定所有的 prop 都遵循着单向绑定原则，直接修改 prop 时，Vue 会抛出警告。此处的写法仅仅是为了消除警告。
// 因为对一个 reactive 对象执行 ref，返回 Ref 对象的 value 值仍为传入的 reactive 对象，
// 即 newFormInline === props.formInline 为 true，所以此处代码的实际效果，仍是直接修改 props.formInline。
// 但该写法仅适用于 props.formInline 是一个对象类型的情况，原始类型需抛出事件
// 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
const detailForm = ref(props.formInline);
const detailFormRef = ref<FormInstance>();

function getDetailFormRef() {
  return detailFormRef.value;
}

function generateClientKeysApi() {
  generateClientKeys().then(res => {
    if (res.code === 200) {
      detailForm.value.keys = res.data;
    }
  });
}

defineExpose({ getDetailFormRef });
</script>

<template>
  <el-form
    ref="detailFormRef"
    :model="detailForm"
    :rules="clientFormRules"
    label-width="20%"
    label-position="right"
  >
    <el-form-item prop="name" label="名称">
      <el-input v-model="detailForm.name" />
    </el-form-item>
    <el-form-item prop="email" label="邮箱">
      <el-input
        v-model="detailForm.email"
        placeholder="可用于离线监听通知或接收客户端配置文件"
      />
    </el-form-item>
    <el-form-item prop="subnetRange" label="子网范围">
      <el-input v-model="detailForm.subnetRange" />
    </el-form-item>
    <el-form-item prop="ipAllocation" label="客户端IP">
      <el-select
        v-model="detailForm.ipAllocation"
        :clearable="true"
        :reserve-keyword="false"
        suffix-icon=""
        tag-type="warning"
        popper-class="options-class"
        placeholder=""
        multiple
        filterable
        allow-create
        default-first-option
      />
    </el-form-item>
    <el-form-item prop="allowedIPS" label="允许访问的IP段">
      <el-select
        v-model="detailForm.allowedIPS"
        :clearable="true"
        :reserve-keyword="false"
        suffix-icon=""
        tag-type="warning"
        popper-class="options-class"
        placeholder=""
        multiple
        filterable
        allow-create
        default-first-option
      />
    </el-form-item>
    <el-form-item prop="extraAllowedIPS" label="其他允许访问的IP段">
      <el-select
        v-model="detailForm.extraAllowedIPS"
        :clearable="true"
        :reserve-keyword="false"
        suffix-icon=""
        tag-type="warning"
        popper-class="options-class"
        placeholder=""
        multiple
        filterable
        allow-create
        default-first-option
      />
    </el-form-item>
    <el-form-item prop="endpoint" label="链接端点">
      <el-input v-model="detailForm.endpoint" />
    </el-form-item>
    <el-form-item prop="privateKey" label="私钥">
      <el-input
        v-if="detailForm.id === ''"
        v-model="detailForm.keys.privateKey"
      />
      <el-input v-else v-model="detailForm.keys.privateKey" disabled />
    </el-form-item>
    <el-form-item prop="publicKey" label="公钥">
      <el-input
        v-if="detailForm.id === ''"
        v-model="detailForm.keys.publicKey"
      />
      <el-input v-else v-model="detailForm.keys.publicKey" disabled />
    </el-form-item>
    <el-form-item prop="presharedKey" label="共享密钥">
      <el-input
        v-if="detailForm.id === ''"
        v-model="detailForm.keys.presharedKey"
      />
      <el-input v-else v-model="detailForm.keys.presharedKey" disabled />
    </el-form-item>
    <el-form-item v-if="detailForm.id === ''">
      <el-button type="primary" size="small" @click="generateClientKeysApi()"
        >生成密钥对</el-button
      >
    </el-form-item>
    <el-form-item prop="OfflineMonitoring" label="是否启用离线监听">
      <el-radio-group v-model="detailForm.offlineMonitoring">
        <el-radio :value="1">是</el-radio>
        <el-radio :value="0">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item prop="useServerDNS" label="是否使用服务端DNS">
      <el-radio-group v-model="detailForm.useServerDNS">
        <el-radio :value="1">是</el-radio>
        <el-radio :value="0">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item prop="enableAfterCreation" label="确认后创建">
      <el-radio-group v-model="detailForm.enableAfterCreation">
        <el-radio :value="1">是</el-radio>
        <el-radio :value="0">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item prop="enabled" label="状态">
      <el-radio-group v-model="detailForm.enabled">
        <el-radio :value="1">启用</el-radio>
        <el-radio :value="0">禁用</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>
<style lang="scss">
.options-class {
  display: none;
}
</style>