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 @@ @@ -11,11 +34,111 @@ 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"> -
+
- 外观 - 主题 - 快捷键
@@ -27,10 +24,12 @@ 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 @@
- + + + + + +
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, +}