From f7b97d344e40164381bea519c3043dd982890027 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 11 Feb 2025 09:54:18 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84=E5=AE=A1?=
 =?UTF-8?q?=E3=80=91IoT=EF=BC=9A=E8=AE=BE=E5=A4=87=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E7=9A=84=E8=AF=84=E5=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device/detail/DeviceDetailConfig.vue      | 57 +++++++++----------
 1 file changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/views/iot/device/device/detail/DeviceDetailConfig.vue b/src/views/iot/device/device/detail/DeviceDetailConfig.vue
index f27d338c..4980c69f 100644
--- a/src/views/iot/device/device/detail/DeviceDetailConfig.vue
+++ b/src/views/iot/device/device/detail/DeviceDetailConfig.vue
@@ -1,13 +1,15 @@
+<!-- 设备配置 -->
 <template>
   <div>
     <el-alert
-      title="IoT平台支持远程更新设备的配置文件(SON格式)，您可以在下方编辑配置模板，对设备的系统参数、网络参数等进行远程配置，通过批量更新对设备进行批量远程维护和管理。"
+      title="支持远程更新设备的配置文件(JSON 格式)，可以在下方编辑配置模板，对设备的系统参数、网络参数等进行远程配置。配置完成后，需点击「下发」按钮，设备即可进行远程配置。"
       type="info"
       show-icon
       class="my-4"
       description="如需编辑文件，请点击下方编辑按钮"
     />
-    
+
+    <!-- JSON 编辑器：读模式 -->
     <Vue3Jsoneditor
       ref="editor"
       v-if="isEditing"
@@ -17,6 +19,7 @@
       currentMode="code"
       @error="onError"
     />
+    <!-- JSON 编辑器：写模式 -->
     <Vue3Jsoneditor
       ref="editor"
       v-else
@@ -35,53 +38,49 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
-import Vue3Jsoneditor from 'v3-jsoneditor/src/Vue3Jsoneditor.vue';
+import { ref, computed } from 'vue'
+import Vue3Jsoneditor from 'v3-jsoneditor/src/Vue3Jsoneditor.vue'
 
-// 定义设备配置的状态
 const deviceConfig = ref({
-  "name": "dyla1n"
-});
-
-// 编辑状态
-const isEditing = ref(false);
-
-// JSON 编辑器的选项
+  name: 'dyla1n'
+}) // 定义设备配置 TODO @dylan：从后端读取
+const isEditing = ref(false) // 编辑状态
 const editorOptions = computed(() => ({
   mainMenuBar: false,
   navigationBar: false,
-  statusBar: false,
-}));
+  statusBar: false
+})) // JSON 编辑器的选项
 
-// 启用编辑模式的函数
+/** 启用编辑模式的函数 */
 const enableEdit = () => {
-  isEditing.value = true;
-};
+  isEditing.value = true
+}
 
-// 取消编辑的函数
+/** 取消编辑的函数 */
 const cancelEdit = () => {
-  isEditing.value = false;
+  isEditing.value = false
   // 逻辑代码
-  console.log('取消编辑');
-};
+  console.log('取消编辑')
+}
 
-// 保存配置的函数
+/** 保存配置的函数 */
 const saveConfig = () => {
-  isEditing.value = false;
+  isEditing.value = false
   // 逻辑代码
-  console.log('保存配置');
-};
+  console.log('保存配置')
+}
 
-// 处理 JSON 编辑器错误的函数
+/** 处理 JSON 编辑器错误的函数 */
 const onError = (e: any) => {
-  console.log('onError', e);
-};
+  console.log('onError', e)
+}
 </script>
 
+<!-- TODO dylan：建议使用 unocss 替代哈，AI 模型友好 -->
 <style scoped>
 .button-group {
   display: flex;
   justify-content: center;
   margin-top: 20px;
 }
-</style>
\ No newline at end of file
+</style>