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

feat: 命令片段.

Browse Source
This commit is contained in:
lijiahangmax
2024-01-18 23:03:12 +08:00
parent ea8a18013d
commit cc013da1c6
4 changed files with 142 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,7 @@
<icon-actions class="bottom-actions"
:actions="bottomActions"
position="left" />
<!-- 代码片段 -->
<!-- 命令片段 -->
<snippet-drawer ref="snippetRef" />
</div>
</template>

156
orion-ops-ui/src/views/host/terminal/components/snippet/snippet-drawer.vue
View File

@@ -6,7 +6,7 @@
<template #title>
<span class="snippet-drawer-title">
<icon-code />
代码片段
命令片段
</span>
</template>
<!-- 命令容器 -->
@@ -15,8 +15,7 @@
<div class="snippet-header-container">
<!-- 头部操作 -->
<div class="snippet-header">
<a-button>新建分组</a-button>
<a-button>新建命令</a-button>
<a-button>新建</a-button>
<a-button>搜索</a-button>
</div>
<!-- 提示 -->
@@ -24,22 +23,38 @@
class="snippet-tips"
:closable="true"
@on-close="closeTips">
双击命令直接粘贴
双击命令直接运行
</a-alert>
</div>
<!-- 命令片段 -->
<div class="snippet-list-container">
<a-collapse :default-active-key="['1']" :bordered="false">
<a-collapse-item header="group 1" key="1" style="border: none;">
</a-collapse-item>
<a-collapse-item header="group 2" key="2" style="border: none;">
</a-collapse-item>
<a-collapse-item header="group 3" key="3" style="border: none;">
<a-collapse v-if="snippet.groups.length"
:bordered="false">
<a-collapse-item v-for="group in snippet.groups"
:key="group.id"
:header="group.name">
<!-- 总量 -->
<template #extra>
{{ group.idList.length }} 条
</template>
{{ group }}
</a-collapse-item>
</a-collapse>
123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>
123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>
123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>123123 <br>
<div>
<div v-for="item in snippet.snippets"
:key="item.id"
class="snippet-item-wrapper">
<div class="snippet-item">
<span class="snippet-item-title">
{{ item.name }}
</span>
<span class="snippet-item-command">
{{ item.command }}
</span>
</div>
</div>
</div>
</div>
</div>
</a-drawer>
@@ -52,12 +67,67 @@
</script>
<script lang="ts" setup>
import { ref } from 'vue';
export interface SnippetGroupResponse {
groups: Array<SnippetGroup>;
snippets: Array<Snippet>;
}
export interface SnippetGroup {
id: number;
name: string;
idList: Array<number>;
}
export interface Snippet {
id: number;
name: string;
command: string;
}
import { useTipsStore } from '@/store';
import useVisible from '@/hooks/visible';
import { snippetTipsKey } from '../../types/terminal.const';
const { isNotTipped, setTipped } = useTipsStore();
const { visible, setVisible } = useVisible(true);
const snippet = ref<SnippetGroupResponse>({
groups: [{
id: 1,
name: 'group1',
idList: [1, 2]
}, {
id: 2,
name: 'group2',
idList: [3, 4]
}],
snippets: [{
id: 1,
name: 'command1command1command1command1command1command1command1command1command1command1command1command1command1command1command1',
command: 'echo 123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123'
}, {
id: 2,
name: 'command2',
command: 'echo 123123123123123123123123123123123123123123'
}, {
id: 3,
name: 'command3',
command: 'echo 123123123123123123123123123123123123123123'
}, {
id: 4,
name: 'command4',
command: 'echo 123123123123123123123123123123123123123123'
}, {
id: 5,
name: 'command5',
command: 'echo 123123123123123123123123123123123123123123'
}, {
id: 6,
name: 'command6',
command: 'echo 123123123123123123123123123123123123123123'
}]
});
// 打开
const open = () => {
@@ -90,7 +160,7 @@
.snippet-header {
}
.snippet-tips{
.snippet-tips {
margin-top: 8px;
}
}
@@ -100,11 +170,65 @@
position: relative;
//height: calc(100% - 104px);
overflow: auto;
padding: 0 12px 12px 12px;
}
:deep(.arco-collapse-item-header) {
.snippet-item-wrapper {
padding: 4px 12px;
.snippet-item {
display: flex;
flex-direction: column;
padding: 8px;
background: var(--color-fill-1);
border-radius: 4px;
cursor: pointer;
transition: transform 0.3s ease;
will-change: transform;
&:hover {
transform: scale(1.02);
background: var(--color-fill-2);
}
&-title {
color: var(--color-text-1);
margin-bottom: 8px;
overflow: hidden;
text-overflow: ellipsis;
}
&-command {
color: var(--color-text-2);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre;
word-break: break-all;
}
}
}
:deep(.arco-collapse-item) {
border: none;
.arco-collapse-item-header-title {
user-select: none;
}
.arco-collapse-item-header {
border: none;
}
.arco-collapse-item-content {
background-color: unset;
padding: 0;
}
.arco-collapse-item-content-box {
padding: 0;
}
}
</style>

1
orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue
View File

@@ -93,7 +93,6 @@
const session = ref<ITerminalSession>();
// TODO
// 代码片段
// sftp
// 发送命令

2
orion-ops-ui/src/views/host/terminal/types/terminal.const.ts
View File

@@ -208,7 +208,7 @@ export const TerminalShortcutItems: Array<ShortcutKeyItem> = [
},
];
// 代码片段操作提示
// 命令片段操作提示
export const snippetTipsKey = 'snippet:opt';
// 打开 sshModal key