From 57f29f855b708717e7ef8e6adb0ea526b5dc698c Mon Sep 17 00:00:00 2001
From: selcarpa <selcarpa@gmail.com>
Date: Fri, 26 Dec 2025 17:27:36 +0800
Subject: [PATCH] feat(nodeEdit): Add node configurator and schema field
 components

- Introduced the NodeConfigurator component for node configuration
- Added the SchemaField component for schema field rendering
- Changed node parameters to an object configuration model
- Added error handling and notification mechanisms
- Modified the CoreTypes definition method to avoid Proxy issues
---
 src/components.d.ts                          |   2 +
 src/components/nodeEdit/SchemaField.vue      | 132 +++++++++++++++++++
 src/components/nodeEdit/addNode.vue          |  49 ++++---
 src/components/nodeEdit/nodeConfigurator.vue |  52 +++++++-
 src/locales/en.json                          |   6 +-
 src/locales/zh.json                          |   4 +-
 src/utils/core/CoreDef.ts                    |   6 +-
 src/utils/core/configurator/schema/schema.ts |  16 ++-
 8 files changed, 236 insertions(+), 31 deletions(-)
 create mode 100644 src/components/nodeEdit/SchemaField.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index 02102df..7b5fc82 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -13,11 +13,13 @@ declare module 'vue' {
     LanguageSwitcher: typeof import('./components/LanguageSwitcher.vue')['default']
     MainConsole: typeof import('./components/index/mainConsole.vue')['default']
     MainDrawer: typeof import('./components/index/mainDrawer.vue')['default']
+    NodeConfigurator: typeof import('./components/nodeEdit/nodeConfigurator.vue')['default']
     NodeList: typeof import('./components/nodeEdit/nodeList.vue')['default']
     NodesFloatButton: typeof import('./components/nodeEdit/nodesFloatButton.vue')['default']
     NotificationProvider: typeof import('./components/notify/notificationProvider.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SchemaField: typeof import('./components/nodeEdit/SchemaField.vue')['default']
     Spary: typeof import('./components/index/spary.vue')['default']
   }
 }
diff --git a/src/components/nodeEdit/SchemaField.vue b/src/components/nodeEdit/SchemaField.vue
new file mode 100644
index 0000000..5cc30a1
--- /dev/null
+++ b/src/components/nodeEdit/SchemaField.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import {computed, toRaw} from 'vue';
+import { z, ZodObject, ZodString, ZodNumber, ZodBoolean, ZodEnum, ZodOptional } from 'zod';
+
+defineOptions({
+  name: 'SchemaField'
+})
+
+const props = defineProps<{
+  schema: z.ZodTypeAny;
+  modelValue: any;
+  label: string;
+}>();
+
+// 使用toRaw获取原始schema对象，避免Proxy问题
+const rawSchema = toRaw(props.schema);
+
+const emit = defineEmits(['update:modelValue']);
+const isOptional = computed(() => rawSchema.optional());
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const typeName = computed(() => {
+  if (rawSchema instanceof ZodObject) return 'ZodObject';
+  if (rawSchema instanceof ZodString) return 'ZodString';
+  if (rawSchema instanceof ZodNumber) return 'ZodNumber';
+  if (rawSchema instanceof ZodBoolean) return 'ZodBoolean';
+  if (rawSchema instanceof ZodEnum) return 'ZodEnum';
+  if (rawSchema instanceof ZodOptional) return 'ZodOptional';
+  // Fallback for unknown types or types not handled explicitly
+  return 'Unknown';
+});
+
+const objectValue = computed(() => value.value as Record<string, any> | null);
+
+const objectSchema = computed(() => {
+  const schema = rawSchema;
+  if (schema instanceof ZodOptional) {
+    const unwrapped = schema.unwrap();
+    if (unwrapped instanceof ZodObject) {
+      return unwrapped;
+    }
+  }
+  if (schema instanceof ZodObject) {
+    return schema;
+  }
+  return null;
+});
+
+</script>
+
+<template>
+  <div class="schema-field">
+    <template v-if="typeName === 'ZodString'">
+      <v-text-field
+          v-model="value"
+          :label="label"
+          :hint="isOptional ? 'Optional' : ''"
+          persistent-hint
+      ></v-text-field>
+    </template>
+
+    <template v-else-if="typeName === 'ZodNumber'">
+      <v-text-field
+          v-model.number="value"
+          type="number"
+          :label="label"
+          :hint="isOptional ? 'Optional' : ''"
+          persistent-hint
+      ></v-text-field>
+    </template>
+
+    <template v-else-if="typeName === 'ZodBoolean'">
+      <v-switch
+          v-model="value"
+          :label="label"
+          color="primary"
+          :hint="isOptional ? 'Optional' : ''"
+          persistent-hint
+      ></v-switch>
+    </template>
+
+    <template v-else-if="typeName === 'ZodEnum'">
+      <v-select
+          v-model="value"
+          :items="(rawSchema as ZodEnum<any>).options"
+          :label="label"
+          :hint="isOptional ? 'Optional' : ''"
+          persistent-hint
+      ></v-select>
+    </template>
+
+    <template v-else-if="objectSchema">
+      <v-card variant="outlined" class="pa-4 mb-4">
+        <div class="text-subtitle-1 font-weight-medium">{{ label }}</div>
+        <div v-for="(field, key) in objectSchema.shape" :key="key">
+          <SchemaField
+              :schema="field"
+              :label="key.toString()"
+              :model-value="objectValue ? objectValue[key] : undefined"
+              @update:modelValue="newValue => {
+                const newObjectValue = { ...value.value };
+                newObjectValue[key] = newValue;
+                value.value = newObjectValue;
+              }"
+          />
+        </div>
+      </v-card>
+    </template>
+
+    <template v-else-if="typeName === 'ZodOptional'">
+      <SchemaField
+          :schema="(rawSchema as ZodOptional<any>).unwrap()"
+          v-model="value"
+          :label="label"
+      />
+    </template>
+
+    <template v-else>
+      <p class="text-caption">Unsupported type: {{ typeName }} for {{label}}</p>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.schema-field {
+  margin-bottom: 1rem;
+}
+</style>
diff --git a/src/components/nodeEdit/addNode.vue b/src/components/nodeEdit/addNode.vue
index 9912fb5..f774e36 100644
--- a/src/components/nodeEdit/addNode.vue
+++ b/src/components/nodeEdit/addNode.vue
@@ -6,6 +6,7 @@ import {nodeRepository} from "@/entities/node.ts";
 import {notify} from "@/components/notify/notifyStore.ts";
 import {ConfigurationSchema} from "@/utils/core/configurator/schema/schema.ts";
 import {CoreTypes} from "@/utils/core/CoreDef.ts";
+import NodeConfigurator from "@/components/nodeEdit/nodeConfigurator.vue";
 
 const { t } = useI18n()
 
@@ -14,6 +15,7 @@ const props = defineProps<{ groupId: string }>()
 const allGroups = ref<Group[]>([])
 const selectedGroupId = ref<number | null>(null)
 const configurationSchema= ref<ConfigurationSchema | null>(null)
+const nodeConfig = ref<object | null>(null)
 
 const loadGroups = async () => {
   allGroups.value = await groupRepository.findAll()
@@ -24,33 +26,47 @@ const loadGroups = async () => {
 onMounted(loadGroups)
 
 const nodeAlias = ref('')
-const nodeArguments = ref<string | null>(null)
 const isAdding = ref(false)
 
 const isAddDisabled = computed(() => {
   return !nodeAlias.value || nodeAlias.value.length < 3 || nodeAlias.value.length > 15 || isAdding.value
 })
 
+function onConfigurationSchemaChange(value: any) {
+  console.log('Configuration schema changed:', value);
+  // 确保设置的值是正确的对象结构
+  configurationSchema.value = value;
+}
+
 async function addNode() {
   if (!isAddDisabled.value && selectedGroupId.value !== null) {
     isAdding.value = true
-    await nodeRepository.insert({
-      created_at: null,
-      id: null,
-      updated_at: null,
-      alias: nodeAlias.value,
-      arguments: nodeArguments.value,
-      group_id: selectedGroupId.value
-    })
-    notify(t('addNode.nodeAddedSuccess'))
-    isAdding.value = false
+    try {
+      await nodeRepository.insert({
+        created_at: null,
+        id: null,
+        updated_at: null,
+        alias: nodeAlias.value,
+        arguments: nodeConfig.value || {},
+        group_id: selectedGroupId.value
+      })
+      notify(t('addNode.nodeAddedSuccess'))
+      // Reset form after successful submission
+      nodeAlias.value = ''
+      nodeConfig.value = null
+    } catch (error) {
+      console.error('Error adding node:', error)
+      notify(t('addNode.nodeAddedError'))
+    } finally {
+      isAdding.value = false
+    }
   }
 }
 </script>
 <template>
   <v-container>
     <v-sheet class="mx-auto" width="80vw">
-      <v-form fast-fail @submit.prevent>
+      <v-form fast-fail @submit.prevent="addNode">
         <v-select
             v-model="selectedGroupId"
             :label="$t('addNode.group')"
@@ -70,16 +86,19 @@ async function addNode() {
             :label="$t('addNode.nodeType')"
             :items="CoreTypes"
             item-title="name"
-            variant="solo">
+            return-object
+            variant="solo"
+            @update:modelValue="onConfigurationSchemaChange">
         </v-select>
 
+        <node-configurator v-if="configurationSchema" :configuration-schema="configurationSchema" v-model="nodeConfig"/>
+
         <v-btn
             class="mt-2"
             type="submit"
             block
             :disabled="isAddDisabled"
-            :loading="isAdding"
-            @click="addNode">
+            :loading="isAdding">
           {{ $t('addNode.addNodeButton') }}
         </v-btn>
       </v-form>
diff --git a/src/components/nodeEdit/nodeConfigurator.vue b/src/components/nodeEdit/nodeConfigurator.vue
index 83be746..1c28b91 100644
--- a/src/components/nodeEdit/nodeConfigurator.vue
+++ b/src/components/nodeEdit/nodeConfigurator.vue
@@ -1,14 +1,58 @@
 <script setup lang="ts">
-import {ConfigurationSchema} from "@/utils/core/configurator/schema/schema.ts";
+import { watch, ref, computed, toRaw} from 'vue';
+import { ConfigurationSchema } from "@/utils/core/configurator/schema/schema.ts";
+import SchemaField from './SchemaField.vue';
 
-const props = defineProps<{ configurationSchema: ConfigurationSchema }>()
+const props = defineProps<{
+  configurationSchema: ConfigurationSchema,
+  modelValue: object | null, // Allow null for initial state
+}>();
 
+const emit = defineEmits(['update:modelValue']);
+
+// Use a ref instead of a computed property with setter to avoid proxy issues
+const localConfig = ref<Record<string, any>>(props.modelValue || {});
+
+// Watch for changes in the configurationSchema prop to reset internalConfig
+watch(() => props.configurationSchema, () => {
+  // Reset localConfig to an empty object when schema changes
+  localConfig.value = {};
+  emit('update:modelValue', {});
+}, { immediate: true });
+
+// Watch for changes in modelValue prop to update localConfig
+watch(() => props.modelValue, (newVal) => {
+  localConfig.value = newVal || {};
+});
+
+// Watch for changes in localConfig to emit updates
+watch(localConfig, (newVal) => {
+  emit('update:modelValue', newVal);
+}, { deep: true });
+
+// 使用toRaw来避免响应式代理问题
+const mainSchema = computed(() => {
+    const rawSchema = toRaw(props.configurationSchema);
+    return rawSchema.schema;
+});
 </script>
 
 <template>
-
+  <v-card class="pa-4" variant="tonal">
+    <div v-for="(field, key) in mainSchema.shape" :key="key.toString()">
+      <SchemaField
+          :schema="field"
+          :label="key.toString()"
+          :model-value="localConfig[key.toString()]"
+          @update:modelValue="newValue => {
+            const newConfig = { ...localConfig.value };
+            newConfig[key.toString()] = newValue;
+            localConfig.value = newConfig;
+          }"
+      />
+    </div>
+  </v-card>
 </template>
 
 <style scoped>
-
 </style>
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index f4c11c0..ecfa420 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -32,7 +32,8 @@
     "arguments": "Arguments",
     "addGroupButton": "Add",
     "groupExists": "Group already exists.",
-    "groupAdded": "Group added."
+    "groupAdded": "Group added.",
+    "nodeType": "Node Type"
   },
   "addNode": {
     "title": "Add Node",
@@ -40,7 +41,8 @@
     "nodeAlias": "Node alias",
     "arguments": "Arguments",
     "addNodeButton": "Add",
-    "nodeAddedSuccess": "Node added successfully"
+    "nodeAddedSuccess": "Node added successfully",
+    "nodeAddedError": "Error adding node"
   },
   "common": {
     "save": "Save",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index e28695b..2b1a057 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -41,7 +41,9 @@
     "nodeAlias": "节点别名",
     "arguments": "参数",
     "addNodeButton": "添加",
-    "nodeAddedSuccess": "节点添加成功"
+    "nodeAddedSuccess": "节点添加成功",
+    "nodeAddedError": "添加节点时出错",
+    "nodeType": "节点类型"
   },
   "common": {
     "save": "保存",
diff --git a/src/utils/core/CoreDef.ts b/src/utils/core/CoreDef.ts
index 9bd7a07..fab8647 100644
--- a/src/utils/core/CoreDef.ts
+++ b/src/utils/core/CoreDef.ts
@@ -1,8 +1,8 @@
 import {XraySchema} from "@/utils/core/configurator/schema/xray.schema.ts";
-import {ConfigurationSchema} from "@/utils/core/configurator/schema/schema.ts";
+import {createConfigurationSchema} from "@/utils/core/configurator/schema/schema.ts";
 import {V2flySchema} from "@/utils/core/configurator/schema/v2fly.schema.ts";
 
 export const CoreTypes = [
-     new ConfigurationSchema("xray", XraySchema),
-     new ConfigurationSchema("v2fly", V2flySchema),
+     createConfigurationSchema("xray", XraySchema),
+     createConfigurationSchema("v2fly", V2flySchema),
 ]
\ No newline at end of file
diff --git a/src/utils/core/configurator/schema/schema.ts b/src/utils/core/configurator/schema/schema.ts
index 6f978a3..7b0bf4f 100644
--- a/src/utils/core/configurator/schema/schema.ts
+++ b/src/utils/core/configurator/schema/schema.ts
@@ -1,9 +1,13 @@
 import {ZodObject} from "zod";
+import { markRaw } from 'vue';
 
-export class ConfigurationSchema {
-    constructor(
-        public readonly name: string,
-        public readonly schema: ZodObject<any>
-    ) {
-    }
+// Use a simple plain object type to avoid Proxy issues
+export type ConfigurationSchema = {
+    name: string;
+    schema: ZodObject<any>;
+};
+
+export function createConfigurationSchema(name: string, schema: ZodObject<any>): ConfigurationSchema {
+    // Use markRaw to mark the schema object to prevent Vue from converting it to reactive, thus avoiding Proxy issues
+    return { name, schema: markRaw(schema) };
 }
\ No newline at end of file