⚡ 修改 websocket 连接逻辑.

orion-ops-ui/src/views/exec/exec-command/components/exec-panel-editor.vue

@@ -3,7 +3,11 @@
     <!-- 表头 -->
     <div class="panel-header">
       <h3>执行命令</h3>
-      <span class="span-blue usn pointer" @click="openTemplate">从模板中选择</span>
+      <span v-permission="['asset:exec-template:query']"
+            class="span-blue usn pointer"
+            @click="openTemplate">
+        从模板中选择
+      </span>
     </div>
     <!-- 命令编辑器 -->
     <div class="editor-wrapper">

orion-ops-ui/src/views/host/terminal/handler/sftp-transfer-manager.ts

@@ -98,11 +98,12 @@ export default class SftpTransferManager implements ISftpTransferManager {
     // 获取 access
     const { data: accessToken } = await getTerminalAccessToken();
     // 打开会话
-    this.client = await createWebSocket(`${webSocketBaseUrl}/host/transfer/${accessToken}`);
-    this.client.onerror = event => {
+    try {
+      this.client = await createWebSocket(`${webSocketBaseUrl}/host/transfer/${accessToken}`);
+    } catch (e) {
       // 打开失败将传输列表置为失效
       Message.error('会话打开失败');
-      console.error('transfer error', event);
+      console.error('transfer error', e);
       // 将等待中和传输中任务修改为失败状态
       this.transferList.filter(s => {
         return s.status === TransferStatus.WAITING
@@ -110,17 +111,18 @@ export default class SftpTransferManager implements ISftpTransferManager {
       }).forEach(s => {
         s.status = TransferStatus.ERROR;
       });
-    };
+      // 关闭会话重置 run
+      this.run = false;
+      return;
+    }
     this.client.onclose = event => {
       // 关闭会话重置 run
       this.run = false;
       console.warn('transfer close', event);
     };
-    this.client.onopen = () => {
-      // 打开后自动传输下一个任务
-      this.transferNextItem();
-    };
     this.client.onmessage = this.resolveMessage.bind(this);
+    // 打开后自动传输下一个任务
+    this.transferNextItem();
   }
 
   // 传输下一条任务

orion-ops-ui/src/views/host/terminal/handler/terminal-channel.ts

@@ -22,11 +22,13 @@ export default class TerminalChannel implements ITerminalChannel {
     // 获取 access
     const { data: accessToken } = await getTerminalAccessToken();
     // 打开会话
-    this.client = await createWebSocket(`${webSocketBaseUrl}/host/terminal/${accessToken}`);
-    this.client.onerror = event => {
+    try {
+      this.client = await createWebSocket(`${webSocketBaseUrl}/host/terminal/${accessToken}`);
+    } catch (e) {
       Message.error('无法连接至服务器');
-      console.error('terminal error', event);
-    };
+      console.error('terminal error', e);
+      throw e;
+    }
     this.client.onclose = event => {
       console.warn('terminal close', event);
     };

orion-ops-ui/src/views/system/dict-value/components/dict-value-form-modal.vue

@@ -65,12 +65,15 @@
           <!-- 颜色 -->
           <template v-else-if="ValueType.COLOR === type">
             <a-input v-model="extraValue[name]"
+                     class="item-color-input"
                      :placeholder="`请输入 ${name}`"
                      allow-clear
                      hide-button />
-            <span class="item-extra-block" :style="{
-              background: extraValue[name] === '#' ? undefined : (extraValue[name] || undefined)
-            }" />
+            <div class="item-color-block-wrapper">
+              <span class="item-color-block" :style="{
+                background: extraValue[name] === '#' ? undefined : (extraValue[name] || undefined)
+              }" />
+            </div>
           </template>
         </a-form-item>
       </a-form>
@@ -223,12 +226,22 @@
 </script>
 
 <style lang="less" scoped>
-  .item-extra-block {
-    width: 38px;
+  .item-color-input {
+    width: calc(100% - 40px);
+  }
+
+  .item-color-block-wrapper {
+    width: 32px;
     height: 32px;
+    padding: 4px;
     margin-left: 8px;
     border-radius: 4px;
     background: var(--color-fill-2);
+  }
+
+  .item-color-block {
+    width: 100%;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;