feat(web): 优化 IP 列表模态框功能

-移除版权年份
- 添加继续添加功能
- 优化表单初始化和重置逻辑
- 调整表单验证和提交流程

web/src/config/default-setting.js

@@ -26,7 +26,7 @@ export default {
   leftCollapsed: true,
   compactAlgorithm: false,
   headerHeight: 48,
-  copyright: 'Go-NuNu Team 2025',
+  copyright: '',
   animationName: 'slide-fadein-right',
 }
 export const animationNameList = [

web/src/pages/menu/components/ip-list-modal.vue

@@ -1,23 +1,29 @@
 <script setup>
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive, computed, nextTick } from 'vue'
 import { Form, Modal } from 'ant-design-vue'
+import { cloneDeep } from 'lodash-es'
 import { createApi, updateApi } from '~@/api/list/gateway-group-ip-list.js'
 
 const emit = defineEmits(['ok'])
 const useForm = Form.useForm
 
+const formRef = ref()
 const visible = ref(false)
-const isEdit = computed(() => !!formState.id)
-const title = computed(() => isEdit.value ? '编辑IP' : '新增IP')
+const isEdit = ref(false)
+const continueToAdd = ref(false)
+const title = computed(() => (isEdit.value ? '编辑IP' : '新增IP'))
 
-const formState = reactive({
+const defaultFormState = {
   id: undefined,
   gatewayGroupId: undefined,
   ip: '',
   tag: '',
   originPlace: '',
   comment: '',
-})
+}
+
+const formState = reactive(cloneDeep(defaultFormState))
+let originalRecord = null
 
 const { resetFields, validate, validateInfos } = useForm(formState, {
   ip: [{ required: true, message: '请输入IP地址' }],
@@ -25,29 +31,59 @@ const { resetFields, validate, validateInfos } = useForm(formState, {
 
 function open(record) {
   visible.value = true
-  if (record) {
-    Object.assign(formState, record)
-    if (!record.id) {
-      formState.gatewayGroupId = record.gatewayGroupId
-    }
+  isEdit.value = !!record?.id
+
+  if (isEdit.value) {
+    Object.assign(formState, cloneDeep(record))
+    originalRecord = cloneDeep(record)
+  } else {
+    const gatewayGroupId = record?.gatewayGroupId
+    resetFields()
+    formState.gatewayGroupId = gatewayGroupId
   }
+
+  continueToAdd.value = false
+  nextTick(() => {
+    formRef.value?.clearValidate()
+  })
+}
+
+function handleReset() {
+  let newFormState
+  if (isEdit.value) {
+    newFormState = cloneDeep(originalRecord)
+  } else {
+    newFormState = { ...cloneDeep(defaultFormState), gatewayGroupId: formState.gatewayGroupId }
+  }
+  Object.assign(formState, newFormState)
+
+  nextTick(() => {
+    formRef.value?.clearValidate()
+  })
 }
 
 function close() {
   visible.value = false
-  resetFields()
+  nextTick(() => {
+    formRef.value?.clearValidate()
+  })
 }
 
 async function handleOk() {
   try {
     await validate()
-    const res = isEdit.value ? await updateApi(formState) : await createApi(formState)
+    const api = isEdit.value ? updateApi : createApi
+    const res = await api(formState)
     if (res.code === 0) {
       Modal.success({
         title: '操作成功',
         onOk: () => {
           emit('ok')
-          close()
+          if (!isEdit.value && continueToAdd.value) {
+            handleReset()
+          } else {
+            close()
+          }
         },
       })
     }
@@ -60,8 +96,8 @@ defineExpose({ open })
 </script>
 
 <template>
-  <a-modal :visible="visible" :title="title" @ok="handleOk" @cancel="close">
-    <a-form :label-col="{ span: 4 }">
+  <a-modal :visible="visible" :title="title" @cancel="close">
+    <a-form ref="formRef" :label-col="{ span: 4 }" :model="formState">
       <a-form-item label="IP地址" v-bind="validateInfos.ip">
         <a-input v-model:value="formState.ip" placeholder="请输入IP地址" />
       </a-form-item>
@@ -75,5 +111,13 @@ defineExpose({ open })
         <a-input v-model:value="formState.comment" placeholder="请输入备注" />
       </a-form-item>
     </a-form>
+    <template #footer>
+      <a-checkbox v-if="!isEdit" v-model:checked="continueToAdd" style="float: left; line-height: 32px;">
+        继续添加
+      </a-checkbox>
+      <a-button @click="close">取消</a-button>
+      <a-button @click="handleReset">重置</a-button>
+      <a-button type="primary" @click="handleOk">确定</a-button>
+    </template>
   </a-modal>
 </template>