From 429f19c119f3932a92502ada36a08aa83eb8624a Mon Sep 17 00:00:00 2001
From: lijiahangmax <ljh1553488six@139.com>
Date: Wed, 6 Dec 2023 00:55:44 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=BB=88=E7=AB=AF=E6=A0=B7=E5=BC=8F.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/dashboard/workplace/index.vue   |   2 +-
 .../terminal/assets/styles/layout.less        |  18 ++-
 .../components/layout/terminal-header.vue     | 125 +++++++++++++++++-
 .../layout/terminal-left-sidebar.vue          |   9 +-
 .../layout/terminal-right-sidebar.vue         |  28 +++-
 .../src/views/host-ops/terminal/index.vue     |   9 +-
 .../host-ops/terminal/types/terminal.type.ts  |   9 ++
 7 files changed, 187 insertions(+), 13 deletions(-)
 create mode 100644 orion-ops-ui/src/views/host-ops/terminal/types/terminal.type.ts

diff --git a/orion-ops-ui/src/views/dashboard/workplace/index.vue b/orion-ops-ui/src/views/dashboard/workplace/index.vue
index 65136170..817f27a9 100644
--- a/orion-ops-ui/src/views/dashboard/workplace/index.vue
+++ b/orion-ops-ui/src/views/dashboard/workplace/index.vue
@@ -69,7 +69,7 @@
 
   .right-side {
     width: 280px;
-    margin-left: 16px;
+    margin-top: 16px;
   }
 
   .panel {
diff --git a/orion-ops-ui/src/views/host-ops/terminal/assets/styles/layout.less b/orion-ops-ui/src/views/host-ops/terminal/assets/styles/layout.less
index 33f8af83..1be69d0d 100644
--- a/orion-ops-ui/src/views/host-ops/terminal/assets/styles/layout.less
+++ b/orion-ops-ui/src/views/host-ops/terminal/assets/styles/layout.less
@@ -14,8 +14,15 @@ body[terminal-theme='light'] {
   --color-bg-content: #FEFEFE;
   --color-sidebar-icon: #737070;
   --color-sidebar-icon-bg: #D7D8DB;
-  --color-sidebar-tooltip-text: rgba(255, 255, 255, .9);
+  --color-text-white: rgba(255, 255, 255, .9);
+  --color-text-black: rgba(0, 0, 0, .9);
+  --color-sidebar-tooltip-text: var(--color-text-white);
   --color-sidebar-tooltip-bg: rgb(var(--gray-10));
+  --color-host-tabs-bg: var(--color-bg-header);
+  --color-host-tabs-active-bg: var(--color-bg-content);
+  --color-host-tabs-text: rgba(255, 255, 255, .6);
+  --color-host-tabs-hover-text: rgba(255, 255, 255, .8);
+  --color-host-tabs-active-text: var(--color-text-black);
 }
 
 // 暗色主题配色常量
@@ -25,8 +32,15 @@ body[terminal-theme='dark'] {
   --color-bg-content: #1A1B1F;
   --color-sidebar-icon: #C3C8CE;
   --color-sidebar-icon-bg: #43444C;
-  --color-sidebar-tooltip-text: rgba(255, 255, 255, .9);
+  --color-text-white: rgba(255, 255, 255, .9);
+  --color-text-black: rgba(0, 0, 0, .9);
+  --color-sidebar-tooltip-text: var(--color-text-white);
   --color-sidebar-tooltip-bg: var(--color-sidebar-icon-bg);
+  --color-host-tabs-bg: var(--color-bg-header);
+  --color-host-tabs-active-bg: var(--color-bg-content);
+  --color-host-tabs-text: rgba(255, 255, 255, .6);
+  --color-host-tabs-hover-text: rgba(255, 255, 255, .8);
+  --color-host-tabs-active-text: rgba(255, 255, 255, .9);
 }
 
 // 侧栏图标 wrapper
diff --git a/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-header.vue b/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-header.vue
index 016159a7..35ccd7b5 100644
--- a/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-header.vue
+++ b/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-header.vue
@@ -1,6 +1,29 @@
 <template>
   <div class="terminal-header">
-    tabs > > > 全屏 > > > 传输列表
+    <!-- 左侧 logo -->
+    <div class="terminal-header-left">
+      <h5 class="terminal-header-logo-text">Orion Ops Pro</h5>
+    </div>
+    <!-- 左侧 tabs -->
+    <div class="terminal-header-tabs">
+      <slot />
+    </div>
+    <!-- 右侧操作 -->
+    <div class="terminal-header-right-actions">
+      <!-- 操作按钮 -->
+      <a-tooltip position="left"
+                 :mini="true"
+                 content-class="terminal-sidebar-tooltip-content"
+                 arrow-class="terminal-sidebar-tooltip-arrow"
+                 :content="isFullscreen ? '点击退出全屏模式' : '点击切换全屏模式'">
+        <div class="terminal-sidebar-icon-wrapper">
+          <div class="terminal-sidebar-icon" @click="toggleFullScreen">
+            <icon-fullscreen-exit v-if="isFullscreen" />
+            <icon-fullscreen v-else />
+          </div>
+        </div>
+      </a-tooltip>
+    </div>
   </div>
 </template>
 
@@ -11,11 +34,111 @@
 </script>
 
 <script lang="ts" setup>
+  import { useFullscreen } from '@vueuse/core';
+
+  const { isFullscreen, toggle: toggleFullScreen } = useFullscreen();
 
 </script>
 
 <style lang="less" scoped>
   .terminal-header {
+    --logo-width: 150px;
+    --right-action-width: calc(var(--header-height) * 2);
+  }
+
+  .terminal-header {
+    height: 100%;
+    color: var(--color-text-white);
+    display: flex;
+    user-select: none;
+
+    &-left {
+      width: var(--logo-width);
+    }
+
+    &-logo-text {
+      height: var(--header-height);
+      margin: 0;
+      display: flex;
+      align-items: center;
+      padding-left: 16px;
+      font-size: 16px;
+    }
+
+    &-tabs {
+      width: calc(100% - var(--logo-width) - var(--right-action-width));
+      display: flex;
+    }
+
+    &-right-actions {
+      width: var(--right-action-width);
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+  :deep(.arco-tabs-nav) {
+    height: 100%;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  :deep(.arco-tabs-nav-tab) {
     height: 100%;
   }
+
+  :deep(.arco-tabs-nav-ink) {
+    display: none;
+  }
+
+  :deep(.arco-tabs-tab-close-btn) {
+    margin-left: -12px;
+
+    &:hover {
+      color: var(--color-text-black);
+    }
+  }
+
+  :deep(.arco-tabs-nav-button .arco-icon-hover:hover) {
+    color: var(--color-text-black);
+  }
+
+  :deep(.arco-tabs-nav-type-line .arco-tabs-tab:hover .arco-tabs-tab-title::before) {
+    background: transparent;
+  }
+
+  :deep(.arco-tabs-tab) {
+    height: 100%;
+    margin: 0;
+    padding: 8px 12px;
+    color: var(--color-host-tabs-text);
+    background: var(--color-host-tabs-bg);
+
+    &:hover {
+      color: var(--color-host-tabs-hover-text);
+    }
+
+    .arco-tabs-tab-title {
+      padding: 0 16px 0 0;
+      background: var(--color-host-tabs-bg);
+      z-index: 100;
+
+      &:hover {
+        z-index: 0;
+      }
+    }
+  }
+
+  :deep(.arco-tabs-tab-active) {
+    background: var(--color-host-tabs-active-bg);
+    color: var(--color-host-tabs-active-text) !important;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+
+    .arco-tabs-tab-title {
+      background: var(--color-host-tabs-active-bg);
+    }
+  }
+
 </style>
diff --git a/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-left-sidebar.vue b/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-left-sidebar.vue
index d5227d83..dcbdc790 100644
--- a/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-left-sidebar.vue
+++ b/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-left-sidebar.vue
@@ -8,14 +8,11 @@
                content-class="terminal-sidebar-tooltip-content"
                arrow-class="terminal-sidebar-tooltip-arrow"
                :content="action.content">
-      <div class="terminal-sidebar-icon-wrapper">
+      <div class="terminal-sidebar-icon-wrapper" :style="action?.style">
         <div class="terminal-sidebar-icon" @click="action.event">
           <component :is="action.icon" />
         </div>
       </div>
-      外观
-      主题
-      快捷键
     </a-tooltip>
   </div>
 </template>
@@ -27,10 +24,12 @@
 </script>
 
 <script lang="ts" setup>
+  import { SidebarAction } from '../../types/terminal.type';
+
   const emits = defineEmits(['openAdd', 'openSetting']);
 
   // 操作
-  const actions = [
+  const actions: Array<SidebarAction> = [
     {
       icon: 'icon-plus',
       content: '新建连接',
diff --git a/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-right-sidebar.vue b/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-right-sidebar.vue
index 736b841a..10abb4b6 100644
--- a/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-right-sidebar.vue
+++ b/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-right-sidebar.vue
@@ -8,7 +8,7 @@
                content-class="terminal-sidebar-tooltip-content"
                arrow-class="terminal-sidebar-tooltip-arrow"
                :content="action.content">
-      <div class="terminal-sidebar-icon-wrapper">
+      <div class="terminal-sidebar-icon-wrapper" :style="action?.style">
         <div class="terminal-sidebar-icon" @click="action.event">
           <component :is="action.icon" />
         </div>
@@ -24,15 +24,37 @@
 </script>
 
 <script lang="ts" setup>
-  const emits = defineEmits(['openSnippet']);
+  import { SidebarAction } from '../../types/terminal.type';
+
+  const emits = defineEmits(['openSnippet', 'openSftp', 'openTransfer', 'openHistory']);
 
   // 操作
-  const actions = [
+  const actions: Array<SidebarAction> = [
     {
       icon: 'icon-code-block',
       content: '打开命令片段',
+      style: {},
       event: () => emits('openSnippet')
     },
+    {
+      icon: 'icon-folder',
+      content: '打开 SFTP',
+      style: {},
+      event: () => emits('openSftp')
+    },
+    {
+      icon: 'icon-swap',
+      content: '文件传输列表',
+      style: {
+        transform: 'rotate(90deg)'
+      },
+      event: () => emits('openTransfer')
+    },
+    {
+      icon: 'icon-history',
+      content: '历史命令',
+      event: () => emits('openHistory')
+    },
   ];
 
 </script>
diff --git a/orion-ops-ui/src/views/host-ops/terminal/index.vue b/orion-ops-ui/src/views/host-ops/terminal/index.vue
index b4d63e3e..1d09eb2a 100644
--- a/orion-ops-ui/src/views/host-ops/terminal/index.vue
+++ b/orion-ops-ui/src/views/host-ops/terminal/index.vue
@@ -2,7 +2,14 @@
   <div class="host-layout">
     <!-- 头部区域 -->
     <header class="host-layout-header">
-      <terminal-header />
+      <terminal-header>
+        <!-- 主机 tabs -->
+        <a-tabs :editable="true" :hide-content="true">
+          <a-tab-pane v-for="i in 30"
+                      :key="i"
+                      :title="'主机主机主机'+i+''" />
+        </a-tabs>
+      </terminal-header>
     </header>
     <!-- 主体区域 -->
     <main class="host-layout-main">
diff --git a/orion-ops-ui/src/views/host-ops/terminal/types/terminal.type.ts b/orion-ops-ui/src/views/host-ops/terminal/types/terminal.type.ts
new file mode 100644
index 00000000..e41dae09
--- /dev/null
+++ b/orion-ops-ui/src/views/host-ops/terminal/types/terminal.type.ts
@@ -0,0 +1,9 @@
+import type { CSSProperties } from 'vue';
+
+// Sidebar 操作类型
+export interface SidebarAction {
+  icon: string,
+  content: string,
+  style?: CSSProperties
+  event: () => void,
+}