Add conversion method from TomlConfigLoader to NetworkConfig to enhance configuration experience (#990)

* add method to create NetworkConfig from TomlConfigLoader
* allow web export/import toml config file and gui edit toml config
* Extract the configuration file dialog into a separate component and allow direct editing of the configuration file on the web

easytier-gui/src/pages/index.vue

@@ -8,7 +8,7 @@ import { exit } from '@tauri-apps/plugin-process'
 import { open } from '@tauri-apps/plugin-shell'
 import TieredMenu from 'primevue/tieredmenu'
 import { useToast } from 'primevue/usetoast'
-import { NetworkTypes, Config, Status, Utils, I18nUtils } from 'easytier-frontend-lib'
+import { NetworkTypes, Config, Status, Utils, I18nUtils, ConfigEditDialog } from 'easytier-frontend-lib'
 
 import { isAutostart, setLoggingLevel } from '~/composables/network'
 import { useTray } from '~/composables/tray'
@@ -23,7 +23,7 @@ useTray(true)
 
 const items = ref([
   {
-    label: () => t('show_config'),
+    label: () => activeStep.value == "2" ? t('show_config') : t('edit_config'),
     icon: 'pi pi-file-edit',
     command: async () => {
       try {
@@ -262,6 +262,13 @@ onMounted(async () => {
 function isRunning(id: string) {
   return networkStore.networkInstanceIds.includes(id)
 }
+
+async function saveTomlConfig(tomlConfig: string) {
+  const config = await generateNetworkConfig(tomlConfig)
+  networkStore.replaceCurNetwork(config);
+  toast.add({ severity: 'success', detail: t('config_saved'), life: 3000 })
+  visible.value = false
+}
 </script>
 
 <script lang="ts">
@@ -269,17 +276,8 @@ function isRunning(id: string) {
 
 <template>
   <div id="root" class="flex flex-col">
-    <Dialog v-model:visible="visible" modal header="Config File" :style="{ width: '70%' }">
-      <Panel>
-        <ScrollPanel style="width: 100%; height: 300px">
-          <pre>{{ tomlConfig }}</pre>
-        </ScrollPanel>
-      </Panel>
-      <Divider />
-      <div class="flex gap-2 justify-end">
-        <Button type="button" :label="t('close')" @click="visible = false" />
-      </div>
-    </Dialog>
+    <ConfigEditDialog v-model:visible="visible" :cur-network="curNetworkConfig" :readonly="activeStep !== '1'"
+      :save-config="saveTomlConfig" :generate-config="parseNetworkConfig" />
 
     <Dialog v-model:visible="aboutVisible" modal :header="t('about.title')" :style="{ width: '70%' }">
       <About />