✨ 添加 tab 配色.

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;

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
       });

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;

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