From 44dd5a9079da7a649f01c25a67a08673c9f9966e Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Thu, 29 Feb 2024 19:15:08 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E6=B7=BB=E5=8A=A0=20tab=20?=
 =?UTF-8?q?=E9=85=8D=E8=89=B2.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 orion-ops-ui/src/api/asset/host.ts            |  8 +++++++-
 .../src/store/modules/terminal/index.ts       |  1 +
 .../components/layout/terminal-panel.vue      |  8 +++++---
 .../host/terminal/types/terminal.type.ts      | 20 +++++++++++++++++++
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/orion-ops-ui/src/api/asset/host.ts b/orion-ops-ui/src/api/asset/host.ts
index 45219e4c..736eba6a 100644
--- a/orion-ops-ui/src/api/asset/host.ts
+++ b/orion-ops-ui/src/api/asset/host.ts
@@ -36,7 +36,7 @@ export interface HostQueryRequest extends Pagination {
 /**
  * 主机查询响应
  */
-export interface HostQueryResponse extends TableData {
+export interface HostQueryResponse extends TableData, HostQueryResponseExtra {
   id: number;
   name: string;
   code: string;
@@ -47,9 +47,15 @@ export interface HostQueryResponse extends TableData {
   updater: string;
   favorite: boolean;
   alias: string;
+  color: string;
   tags: Array<{ id: number, name: string }>;
   groupIdList: Array<number>;
+}
 
+/**
+ * 主机操作拓展
+ */
+export interface HostQueryResponseExtra {
   editable: boolean;
   loading: boolean;
   modCount: number;
diff --git a/orion-ops-ui/src/store/modules/terminal/index.ts b/orion-ops-ui/src/store/modules/terminal/index.ts
index 57bd15b8..d6221858 100644
--- a/orion-ops-ui/src/store/modules/terminal/index.ts
+++ b/orion-ops-ui/src/store/modules/terminal/index.ts
@@ -157,6 +157,7 @@ export default defineStore('terminal', {
         title: `(${nextSeq})  ${record.alias || record.name}`,
         hostId: record.id,
         address: record.address,
+        color: record.color,
         icon: session.icon,
         type: session.type
       });
diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panel.vue b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panel.vue
index 6dc47f28..16251b51 100644
--- a/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panel.vue
+++ b/orion-ops-ui/src/views/host/terminal/components/layout/terminal-panel.vue
@@ -21,7 +21,8 @@
                   :key="tab.key">
         <!-- 标题 -->
         <template #title>
-          <span class="tab-title-wrapper">
+          <span class="tab-title-wrapper"
+                :style="{ 'border-bottom': `4px ${tab.color || 'transparent'} solid` }">
             <span class="tab-title-icon">
               <component :is="tab.icon" />
             </span>
@@ -101,8 +102,11 @@
   }
 
   .tab-title-wrapper {
+    width: 100%;
+    height: 100%;
     display: flex;
     align-items: center;
+    padding: 11px 18px 7px 14px;
 
     .tab-title-icon {
       font-size: 16px;
@@ -214,13 +218,11 @@
     }
 
     .arco-tabs-tab-title {
-      padding: 11px 18px 7px 14px;
       background: var(--color-bg-panel-tabs);
       font-size: 14px;
       height: var(--panel-nav-height);
       display: flex;
       align-items: center;
-      border-bottom: 4px transparent solid;
 
       &::before {
         display: none;
diff --git a/orion-ops-ui/src/views/host/terminal/types/terminal.type.ts b/orion-ops-ui/src/views/host/terminal/types/terminal.type.ts
index e38d1dc6..4ca308b6 100644
--- a/orion-ops-ui/src/views/host/terminal/types/terminal.type.ts
+++ b/orion-ops-ui/src/views/host/terminal/types/terminal.type.ts
@@ -23,6 +23,7 @@ export interface TerminalPanelTabItem extends TerminalTabItem {
   hostId: number;
   address: string;
   type: string;
+  color?: string;
 }
 
 // sidebar 操作类型
@@ -96,6 +97,25 @@ export interface OutputPayload {
   [key: string]: string;
 }
 
+/*
+TODO
+--red-6: 245, 63, 63;
+--orangered-6: 247, 114, 52;
+--orange-6: 255, 125, 0;
+--gold-6: 247, 186, 30;
+--yellow-6: 250, 220, 25;
+--lime-6: 159, 219, 29;
+--green-6: 0, 180, 42;
+--cyan-6: 20, 201, 201;
+--blue-6: 52, 145, 250;
+--arcoblue-6: 22, 93, 255;
+--purple-6: 114, 46, 209;
+--pinkpurple-6: 217, 26, 217;
+--magenta-6: 245, 49, 157;
+--gray-6: 134, 144, 156;
+
+ */
+
 // 终端 tab 管理器定义
 export interface ITerminalTabManager<T extends TerminalTabItem = TerminalTabItem> {
   // 当前 tab