From 8c62e25c123025e8175f2bc00b4d2ebaafcfd07e Mon Sep 17 00:00:00 2001
From: NanamiAdmin <yzt114@yeah.net>
Date: Wed, 18 Mar 2026 23:36:07 +0800
Subject: [PATCH] feat(InstanceDetail): add configuration edit form with modal
 dialog

- Move form styles from Instances.vue to common.css for reusability
- Add edit configuration modal with form handling
- Rename back-btn to common-btn for consistent styling
- Implement configuration update logic with API calls
---
 src/styles/common.css        |  47 +++++-
 src/views/InstanceDetail.vue | 287 ++++++++++++++++++++++++++++++++++-
 src/views/Instances.vue      |  38 -----
 3 files changed, 326 insertions(+), 46 deletions(-)

diff --git a/src/styles/common.css b/src/styles/common.css
index e3be3dd..79def9a 100644
--- a/src/styles/common.css
+++ b/src/styles/common.css
@@ -42,6 +42,45 @@
     gap: 8px;
 }
 
+.form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.form-group label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-color);
+}
+
+.form-group input,
+.form-group select {
+    padding: 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 14px;
+    background: var(--bg-color);
+    color: var(--text-color);
+}
+
+.form-group.checkbox-group {
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+}
+
+.form-group.checkbox-group input {
+    width: auto;
+}
+
+
 .empty-state {
     text-align: center;
     padding: 60px 20px;
@@ -192,12 +231,12 @@
     background: #2a2a2a;
 }
 
-.dark .back-btn {
+.dark .common-btn {
     background: #3d3d3d;
     color: var(--text-color);
 }
 
-.dark .back-btn:hover {
+.dark .common-btn:hover {
     background: #4d4d4d;
 }
 
@@ -446,7 +485,7 @@
     font-size: 18px;
 }
 
-.back-btn {
+.common-btn {
     padding: 8px 16px;
     background: #f0f0f0;
     border: none;
@@ -456,7 +495,7 @@
     transition: all 0.3s;
 }
 
-.back-btn:hover {
+.common-btn:hover {
     background: #e0e0e0;
 }
 
diff --git a/src/views/InstanceDetail.vue b/src/views/InstanceDetail.vue
index e3dd295..ddce4b8 100644
--- a/src/views/InstanceDetail.vue
+++ b/src/views/InstanceDetail.vue
@@ -1,15 +1,19 @@
 <template>
     <div class="instance-detail-page">
         <div class="page-header">
-            <button class="back-btn" @click="goBack">
-                ← Back
+            <button class="common-btn" @click="goBack">
+                <i class="fas fa-arrow-left"></i> Back
             </button>
             <h2>{{ instanceName }} - Details</h2>
         </div>
 
         <div class="detail-content">
             <div class="section">
-                <h3>Configuration</h3>
+                <h3>Configuration
+                    <button class="common-btn" @click="editConfig">
+                        <i class="fas fa-edit"></i> Edit
+                    </button>
+                </h3>
                 <div class="config-list">
                     <div class="config-item" v-for="(value, key) in instanceConfig" :key="key">
                         <span class="config-key">{{ key }}:</span>
@@ -18,6 +22,109 @@
                 </div>
             </div>
 
+            <div v-if="showEditConfigModal" class="modal-overlay" @click="closeEditConfigModal">
+                <div class="modal" @click.stop>
+                    <h3>Edit Configuration</h3>
+                    <form @submit.prevent="handleEditConfiguration" class="form">
+                        <div class="form-group">
+                            <label>Instance Name</label>
+                            <input 
+                                type="text" 
+                                v-model="formData.name" 
+                                required
+                            >
+                        </div>
+                        <div class="form-group">
+                            <label>Authentication Method</label>
+                            <select v-model="formData.auth_method" required>
+                                <option value="token">Token</option>
+                                <option value="oidc">OIDC</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label>Server Address</label>
+                            <input 
+                                type="text" 
+                                v-model="formData.serverAddr" 
+                                required
+                            >
+                        </div>
+                        <div class="form-group">
+                            <label>Server Port</label>
+                            <input 
+                                type="text" 
+                                v-model="formData.serverPort" 
+                                required
+                            >
+                        </div>
+                        <div class="form-group" v-if="formData.auth_method === 'token'">
+                            <label>Token</label>
+                            <input 
+                                type="text" 
+                                v-model="formData.token"
+                                required
+                            >
+                        </div>
+                        <div v-if="formData.auth_method === 'oidc'">
+                            <div class="form-group">
+                                <label>Client ID</label>
+                                <input 
+                                    type="text" 
+                                    v-model="formData.clientId"
+                                    required
+                                >
+                            </div>
+                            <div class="form-group">
+                                <label>Client Secret</label>
+                                <input 
+                                    type="text" 
+                                    v-model="formData.clientSecret"
+                                    required
+                                >
+                            </div>
+                            <div class="form-group">
+                                <label>Audience</label>
+                                <input 
+                                    type="text" 
+                                    v-model="formData.audience"
+                                    required
+                                >
+                            </div>
+                            <div class="form-group">
+                                <label>Token Endpoint URL</label>
+                                <input 
+                                    type="url" 
+                                    v-model="formData.tokenEndpoint"
+                                    required
+                                >
+                            </div>
+                        </div>
+                        <div class="form-group checkbox-group">
+                            <input 
+                                type="checkbox" 
+                                id="bootAtStart" 
+                                v-model="formData.bootAtStart"
+                            >
+                            <label for="bootAtStart">Boot at Start</label>
+                        </div>
+                        <div class="form-group">
+                            <label>Run User</label>
+                            <input 
+                                type="text" 
+                                v-model="formData.runUser"
+                                placeholder="Default: root"
+                            >
+                        </div>
+                        <div class="form-actions">
+                            <button type="button" class="cancel-btn" @click="closeEditConfigModal">Cancel</button>
+                            <button type="submit" class="submit-btn" :disabled="loading">
+                                {{ loading ? 'Processing...' : 'Save' }}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
             <div class="section">
                 <h3>Proxy List</h3>
                 <div v-if="proxies.length > 0" class="proxy-list">
@@ -72,15 +179,32 @@ export default {
         const route = useRoute();
         const router = useRouter();
         const instanceName = ref(route.params.name);
+        const instanceID = ref('');
         const instanceConfig = ref({});
         const proxies = ref([]);
         const logs = ref([]);
+        const showEditConfigModal = ref(false);
+        const loading = ref(false);
+        const formData = ref({
+            name: '',
+            auth_method: 'token',
+            serverAddr: '',
+            serverPort: '',
+            token: '',
+            clientId: '',
+            clientSecret: '',
+            audience: '',
+            tokenEndpoint: '',
+            bootAtStart: false,
+            runUser: ''
+        });
 
         const loadInstanceConfig = async () => {
             try {
                 const result = await instanceApi.listInstances();
                 const instance = result.data.find(i => i.name === instanceName.value);
                 if (instance) {
+                    instanceID.value = String(instance.instanceID);
                     instanceConfig.value = {
                         'Server Address': instance.serverAddr,
                         'Server Port': instance.serverPort,
@@ -126,6 +250,87 @@ export default {
             router.push('/instances');
         };
 
+        const editConfig = async () => {
+            try {
+                const result = await instanceApi.listInstances();
+                const instance = result.data.find(i => i.name === instanceName.value);
+                if (instance) {
+                    instanceID.value = String(instance.instanceID);
+                    formData.value = {
+                        name: instance.name,
+                        auth_method: instance.auth_method || 'token',
+                        serverAddr: instance.serverAddr || '',
+                        serverPort: instance.serverPort || '',
+                        token: '',
+                        clientId: '',
+                        clientSecret: '',
+                        audience: '',
+                        tokenEndpoint: '',
+                        bootAtStart: instance.bootAtStart || false,
+                        runUser: instance.runUser || 'root'
+                    };
+                }
+            } catch (error) {
+                showNotification('Load instance data failed', 'error');
+                return;
+            }
+            showEditConfigModal.value = true;
+        };
+
+        const closeEditConfigModal = () => {
+            showEditConfigModal.value = false;
+        };
+
+        const handleEditConfiguration = async () => {
+            loading.value = true;
+            try {
+                const systemConfigData = { // Update system config
+                    name: formData.value.name,
+                    bootAtStart: formData.value.bootAtStart,
+                    runUser: formData.value.runUser || 'root'
+                };
+                
+                await instanceApi.modifyInstance(
+                    instanceName.value,
+                    instanceID.value,
+                    'systemConfig',
+                    systemConfigData
+                );
+                
+                const configFileData = { // Update config file
+                    server_addr: formData.value.serverAddr,
+                    server_port: formData.value.serverPort,
+                    auth_method: formData.value.auth_method
+                };
+                
+                if (formData.value.auth_method === 'token') {
+                    configFileData.auth_token = formData.value.token;
+                } else if (formData.value.auth_method === 'oidc') {
+                    configFileData.oidc_client_id = formData.value.clientId;
+                    configFileData.oidc_client_secret = formData.value.clientSecret;
+                    configFileData.oidc_audience = formData.value.audience;
+                    configFileData.oidc_token_endpoint = formData.value.tokenEndpoint;
+                }
+                
+                await instanceApi.modifyInstance(
+                    instanceName.value,
+                    instanceID.value,
+                    'configFile',
+                    configFileData
+                );
+                
+                showNotification('Configuration saved successfully', 'success');
+                closeEditConfigModal();
+                // 重新加载配置
+                instanceName.value = formData.value.name;
+                await loadInstanceConfig();
+            } catch (error) {
+                showNotification(error.message || 'Save configuration failed', 'error');
+            } finally {
+                loading.value = false;
+            }
+        };
+
         onMounted(() => {
             loadInstanceConfig();
             loadProxies();
@@ -137,7 +342,13 @@ export default {
             instanceConfig,
             proxies,
             logs,
-            goBack
+            showEditConfigModal,
+            loading,
+            formData,
+            goBack,
+            editConfig,
+            closeEditConfigModal,
+            handleEditConfiguration
         };
     }
 };
@@ -204,4 +415,72 @@ export default {
     padding: 40px 20px;
     font-size: 14px;
 }
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.modal {
+    background: var(--card-bg);
+    border-radius: 8px;
+    padding: 24px;
+    width: 90%;
+    max-width: 500px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.modal h3 {
+    margin-top: 0;
+    margin-bottom: 20px;
+    color: var(--text-color);
+}
+
+.form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    margin-top: 8px;
+}
+
+.cancel-btn {
+    padding: 10px 20px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: transparent;
+    color: var(--text-color);
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.cancel-btn:hover {
+    background: var(--hover-bg);
+}
+
+.submit-btn {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    background: var(--primary-color);
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.submit-btn:hover {
+    background: var(--primary-hover);
+}
+
+.submit-btn:disabled {
+    background: var(--disabled-bg);
+    cursor: not-allowed;
+}
 </style>
diff --git a/src/views/Instances.vue b/src/views/Instances.vue
index b74995b..32133cf 100644
--- a/src/views/Instances.vue
+++ b/src/views/Instances.vue
@@ -386,44 +386,6 @@ export default {
     color: var(--text-color);
 }
 
-.form {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.form-group label {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--text-color);
-}
-
-.form-group input,
-.form-group select {
-    padding: 10px;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    font-size: 14px;
-    background: var(--bg-color);
-    color: var(--text-color);
-}
-
-.form-group.checkbox-group {
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-}
-
-.form-group.checkbox-group input {
-    width: auto;
-}
-
 .form-actions {
     display: flex;
     justify-content: flex-end;