style: 终端样式.

orion-ops-ui/src/views/dashboard/workplace/index.vue

@@ -69,7 +69,7 @@
 
   .right-side {
     width: 280px;
-    margin-left: 16px;
+    margin-top: 16px;
   }
 
   .panel {

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

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>

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: '新建连接',

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>

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">

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,
+}