:art:合并编译打包

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

@@ -0,0 +1,159 @@
+<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";
+
+// 声明 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;
+  };
+}
+
+// 声明 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
+  })
+});
+
+// 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;
+}
+
+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" />
+    </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="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>