From 8567ec8c2ede74a0e8bc28c38b408b11cee9a5fd Mon Sep 17 00:00:00 2001
From: fhysy <1149505133@qq.com>
Date: Mon, 15 Jul 2024 17:41:47 +0800
Subject: [PATCH] =?UTF-8?q?=20feat(=E6=96=AD=E8=B7=AF=E5=99=A8):=20?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F=E3=80=81=E6=A0=BC=E5=BC=8F?=
 =?UTF-8?q?=E5=8C=96=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .prettierrc.yaml                        |  20 +++-
 src/renderer/src/views/switch/index.vue | 121 ++++++++++++++----------
 2 files changed, 86 insertions(+), 55 deletions(-)

diff --git a/.prettierrc.yaml b/.prettierrc.yaml
index 35893b3..24dd347 100644
--- a/.prettierrc.yaml
+++ b/.prettierrc.yaml
@@ -1,4 +1,18 @@
+#singleQuote: true
+#semi: false
+#printWidth: 100
+#trailingComma: none
+printWidth: 220
+tabWidth: 4
+useTabs: true
+semi: true
 singleQuote: true
-semi: false
-printWidth: 100
-trailingComma: none
+quoteProps: "as-needed"
+trailingComma: "none"
+bracketSpacing: true
+jsxBracketSameLine: false
+arrowParens: "avoid"
+endOfLine: "lf"
+jsxSingleQuote: false
+vueIndentScriptAndStyle: false
+Prettier:HTMLWhitespaceSensitivity: 'ignore'
diff --git a/src/renderer/src/views/switch/index.vue b/src/renderer/src/views/switch/index.vue
index 4486dba..bef4c52 100644
--- a/src/renderer/src/views/switch/index.vue
+++ b/src/renderer/src/views/switch/index.vue
@@ -2,98 +2,98 @@
   <div id="switch-box">
     <div class="switch-main">
       <el-collapse v-model="activeFold" @change="foldChange">
-        <el-collapse-item title="Mqtt设置" name="1">
+        <el-collapse-item name="1" title="Mqtt设置">
           <el-form
             ref="mqttFormRef"
             :model="mqttForm"
-            status-icon
-            label-width="auto"
-            class="demo-mqttForm"
             :rules="mqttRules"
+            class="demo-mqttForm"
+            label-width="auto"
+            status-icon
           >
             <el-form-item label="Client ID" prop="clientId" required>
               <el-input
                 v-model="mqttForm.clientId"
-                type="text"
-                autocomplete="off"
                 :disabled="connectionState"
+                autocomplete="off"
+                type="text"
               />
             </el-form-item>
             <el-form-item label="Host" prop="host" required>
               <el-input
                 v-model="mqttForm.host"
-                type="text"
-                autocomplete="off"
                 :disabled="connectionState"
+                autocomplete="off"
+                type="text"
               />
             </el-form-item>
             <el-form-item label="Port" prop="port" required>
               <el-input
                 v-model="mqttForm.port"
-                type="text"
-                autocomplete="off"
                 :disabled="connectionState"
+                autocomplete="off"
+                type="text"
               />
             </el-form-item>
             <el-form-item label="path" prop="path">
               <el-input
                 v-model="mqttForm.path"
-                type="text"
-                autocomplete="off"
                 :disabled="connectionState"
+                autocomplete="off"
+                type="text"
               />
             </el-form-item>
             <el-form-item label="Username" prop="userName" required>
               <el-input
                 v-model="mqttForm.userName"
-                type="text"
-                autocomplete="off"
                 :disabled="connectionState"
+                autocomplete="off"
+                type="text"
               />
             </el-form-item>
             <el-form-item label="Password" prop="passWord" required>
               <el-input
                 v-model="mqttForm.passWord"
-                type="passWord"
-                autocomplete="off"
                 :disabled="connectionState"
+                autocomplete="off"
+                type="passWord"
               />
             </el-form-item>
             <el-form-item class="btn-box">
               <el-button :disabled="!connectionState" type="danger" @click="disconnMqtt"
-                >断开</el-button
-              >
+                >断开
+              </el-button>
               <el-button :disabled="connectionState" @click="testMqtt(mqttFormRef)">测试</el-button>
               <el-button :disabled="connectionState" type="primary" @click="runMqtt(mqttFormRef)"
-                >连接</el-button
-              >
+                >连接
+              </el-button>
             </el-form-item>
           </el-form>
         </el-collapse-item>
-        <el-collapse-item title="设备信息" name="2">
+        <el-collapse-item name="2" title="设备信息">
           <el-form
             ref="gatewayFormRef"
             :model="gatewayForm"
-            status-icon
-            label-width="auto"
-            class="demo-gatewayForm"
             :rules="gatewayRules"
+            class="demo-gatewayForm"
+            label-width="auto"
+            status-icon
           >
             <el-form-item label="网关" prop="gateway" required>
-              <el-input v-model="gatewayForm.gateway" type="text" autocomplete="off" />
+              <el-input v-model="gatewayForm.gateway" autocomplete="off" type="text" />
             </el-form-item>
             <el-form-item label="上行主题" prop="subscribeTopic" required>
-              <el-input v-model="gatewayForm.subscribeTopic" type="text" autocomplete="off" />
+              <el-input v-model="gatewayForm.subscribeTopic" autocomplete="off" type="text" />
             </el-form-item>
             <el-form-item label="下行主题" prop="publishTopic" required>
-              <el-input v-model="gatewayForm.publishTopic" type="text" autocomplete="off" />
+              <el-input v-model="gatewayForm.publishTopic" autocomplete="off" type="text" />
             </el-form-item>
             <el-form-item class="btn-box">
               <el-button type="primary" @click="updateGateway(gatewayFormRef)">更新</el-button>
             </el-form-item>
           </el-form>
         </el-collapse-item>
-        <el-collapse-item title="属性操作" name="3">
+        <el-collapse-item name="3" title="属性操作">
           <el-tabs type="border-card">
             <el-tab-pane label="属性读取">
               <el-form :model="attrReadForm" label-width="auto">
@@ -222,7 +222,7 @@
             </el-tab-pane>
           </el-tabs>
         </el-collapse-item>
-        <el-collapse-item title="功能操作" name="4">
+        <el-collapse-item name="4" title="功能操作">
           <el-form :model="functionForm" label-width="auto">
             <el-row>
               <el-col :span="12">
@@ -290,46 +290,58 @@
         <div class="log-box-operate">
           <view class="log-box-operate-item">
             <div>mqtt状态：</div>
-            <div v-if="connectionState" style="color: #00ff78; display: flex; alignitems: center">
+            <div v-if="connectionState" style="color: #00ff78; display: flex; align-items: center">
               连接
             </div>
             <div
               v-else
-              style="color: red; display: flex; alignitems: center"
+              style="color: red; display: flex; align-items: center"
               @click="runMqtt(mqttFormRef)"
             >
-              断连<el-icon><Refresh /></el-icon>
+              断连
+              <el-icon>
+                <Refresh />
+              </el-icon>
             </div>
           </view>
           <view class="log-box-operate-item">
             <div>日志状态：</div>
-            <div v-if="socketStatus" style="color: #00ff78; display: flex; alignitems: center">
+            <div v-if="socketStatus" style="color: #00ff78; display: flex; align-items: center">
               连接
             </div>
             <div
               v-else
-              style="color: #ff0000; display: flex; alignitems: center"
+              style="color: #ff0000; display: flex; align-items: center"
               @click="initSocket"
             >
-              断连<el-icon><Refresh /></el-icon>
+              断连
+              <el-icon>
+                <Refresh />
+              </el-icon>
             </div>
           </view>
           <view class="log-box-operate-item" @click="toggleIsScroll">
             <el-tooltip
               v-if="isScroll"
               class="box-item"
-              effect="dark"
               content="关闭滚动"
+              effect="dark"
               placement="bottom"
             >
-              <el-icon><Unlock /></el-icon>
+              <el-icon>
+                <Unlock />
+              </el-icon>
             </el-tooltip>
-            <el-tooltip v-else class="box-item" effect="dark" content="开启滚动" placement="bottom">
-              <el-icon><Lock /></el-icon>
+            <el-tooltip v-else class="box-item" content="开启滚动" effect="dark" placement="bottom">
+              <el-icon>
+                <Lock />
+              </el-icon>
             </el-tooltip>
           </view>
           <view class="log-box-operate-item" @click="clearLog">
-            <el-icon><DeleteFilled /></el-icon>
+            <el-icon>
+              <DeleteFilled />
+            </el-icon>
           </view>
         </div>
       </div>
@@ -340,21 +352,23 @@
             <el-icon
               v-if="item.type == 'subscribe'"
               style="color: #00ff78; font-weight: bold; margin-right: 8px"
-              ><Top
-            /></el-icon>
+            >
+              <Top />
+            </el-icon>
             <el-icon
               v-else-if="item.type == 'publish'"
               style="color: red; font-weight: bold; margin-right: 8px"
-              ><Bottom
-            /></el-icon>
-            <el-icon v-else-if="item.type == 'system'" style="font-weight: bold; margin-right: 8px"
-              ><Message
-            /></el-icon>
+            >
+              <Bottom />
+            </el-icon>
+            <el-icon v-else-if="item.type == 'system'" style="font-weight: bold; margin-right: 8px">
+              <Message />
+            </el-icon>
             <p>{{ item.msg }}</p>
-            <el-tooltip class="box-item" effect="dark" content="复制" placement="bottom">
-              <el-icon style="font-weight: bold; cursor: pointer" @click="copyMsg(item.msg)"
-                ><DocumentCopy
-              /></el-icon>
+            <el-tooltip class="box-item" content="复制" effect="dark" placement="bottom">
+              <el-icon style="font-weight: bold; cursor: pointer" @click="copyMsg(item.msg)">
+                <DocumentCopy />
+              </el-icon>
             </el-tooltip>
           </div>
         </div>
@@ -1030,11 +1044,12 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style lang="less" scoped>
 /* 样式可以在这里定义 */
 #switch-box {
   height: 100%;
   position: relative;
+
   .switch-main {
     height: calc(100% - 200px - 60px);
     overflow-y: auto;
@@ -1070,6 +1085,7 @@ onUnmounted(() => {
         }
       }
     }
+
     .log-box-main {
       padding: 10px;
       height: 169px;
@@ -1092,6 +1108,7 @@ onUnmounted(() => {
   :deep(.el-form) {
     padding: 20px 20px 0;
   }
+
   :deep(.el-tabs--border-card > .el-tabs__content) {
     padding: 0;
   }