manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 终端样式.

Browse Source
This commit is contained in:
lijiahangmax
2023-12-06 00:55:44 +08:00
parent 36cd105bc8
commit 429f19c119
7 changed files with 187 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

18
orion-ops-ui/src/views/host-ops/terminal/assets/styles/layout.less
View File

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

125
orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-header.vue
View File

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

9
orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-left-sidebar.vue
View File

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

28
orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-right-sidebar.vue
View File

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

9
orion-ops-ui/src/views/host-ops/terminal/index.vue
View File

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

9
orion-ops-ui/src/views/host-ops/terminal/types/terminal.type.ts Normal file
View File

@@ -0,0 +1,9 @@
import type { CSSProperties } from 'vue';
// Sidebar 操作类型
export interface SidebarAction {
icon: string,
content: string,
style?: CSSProperties
event: () => void,
}