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-13 02:22:03 +08:00
parent c16a461e5c
commit c0475dc7de
10 changed files with 314 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
orion-ops-module-asset/orion-ops-module-asset-service/src/main/resources/theme/terminal.theme.json
View File

@@ -1,29 +1,4 @@
[
{
"name": "catppuccin-macchiato",
"dark": true,
"headerBackgroundColor": "#181B2E",
"schema": {
"background": "#24273A",
"foreground": "#CAD3F5",
"cursor": "#F4DBD6",
"selectionBackground": "#5B6078",
"black": "#494D64",
"red": "#ED8796",
"green": "#A6DA95",
"yellow": "#EED49F",
"blue": "#8AADF4",
"cyan": "#8BD5CA",
"white": "#B8C0E0",
"brightBlack": "#5B6078",
"brightRed": "#ED8796",
"brightGreen": "#A6DA95",
"brightYellow": "#EED49F",
"brightBlue": "#8AADF4",
"brightCyan": "#8BD5CA",
"brightWhite": "#A5ADCB"
}
},
{
"name": "catppuccin-mocha",
"dark": true,
@@ -49,31 +24,6 @@
"brightWhite": "#A6ADC8"
}
},
{
"name": "OneHalfDark",
"dark": true,
"headerBackgroundColor": "#1C2028",
"schema": {
"background": "#282C34",
"foreground": "#DCDFE4",
"cursor": "#A3B3CC",
"selectionBackground": "#474E5D",
"black": "#282C34",
"red": "#E06C75",
"green": "#98C379",
"yellow": "#E5C07B",
"blue": "#61AFEF",
"cyan": "#56B6C2",
"white": "#DCDFE4",
"brightBlack": "#282C34",
"brightRed": "#E06C75",
"brightGreen": "#98C379",
"brightYellow": "#E5C07B",
"brightBlue": "#61AFEF",
"brightCyan": "#56B6C2",
"brightWhite": "#DCDFE4"
}
},
{
"name": "MaterialDesignColors",
"dark": true,
@@ -99,6 +49,56 @@
"brightWhite": "#FFFFFF"
}
},
{
"name": "catppuccin-macchiato",
"dark": true,
"headerBackgroundColor": "#181B2E",
"schema": {
"background": "#24273A",
"foreground": "#CAD3F5",
"cursor": "#F4DBD6",
"selectionBackground": "#5B6078",
"black": "#494D64",
"red": "#ED8796",
"green": "#A6DA95",
"yellow": "#EED49F",
"blue": "#8AADF4",
"cyan": "#8BD5CA",
"white": "#B8C0E0",
"brightBlack": "#5B6078",
"brightRed": "#ED8796",
"brightGreen": "#A6DA95",
"brightYellow": "#EED49F",
"brightBlue": "#8AADF4",
"brightCyan": "#8BD5CA",
"brightWhite": "#A5ADCB"
}
},
{
"name": "OneHalfDark",
"dark": true,
"headerBackgroundColor": "#1C2028",
"schema": {
"background": "#282C34",
"foreground": "#DCDFE4",
"cursor": "#A3B3CC",
"selectionBackground": "#474E5D",
"black": "#282C34",
"red": "#E06C75",
"green": "#98C379",
"yellow": "#E5C07B",
"blue": "#61AFEF",
"cyan": "#56B6C2",
"white": "#DCDFE4",
"brightBlack": "#282C34",
"brightRed": "#E06C75",
"brightGreen": "#98C379",
"brightYellow": "#E5C07B",
"brightBlue": "#61AFEF",
"brightCyan": "#56B6C2",
"brightWhite": "#DCDFE4"
}
},
{
"name": "Dracula",
"dark": true,
@@ -349,4 +349,4 @@
"brightWhite": "#FFFFFF"
}
}
]
]

4
orion-ops-module-asset/orion-ops-module-asset-service/src/test/java/com/orion/ops/module/asset/meta/TerminalThemeGenerator.java
View File

@@ -29,8 +29,8 @@ public class TerminalThemeGenerator {
List<File> files = Files1.listFiles("D:\\idea-project\\iTerm2-Color-Schemes\\vhs");
// 过滤的 theme
List<String> schemaFilter = Lists.of(
"catppuccin-macchiato", "catppuccin-mocha",
"OneHalfDark", "MaterialDesignColors",
"catppuccin-mocha", "MaterialDesignColors",
"catppuccin-macchiato", "OneHalfDark",
"Dracula", "Atom",
"Apple System Colors", "Builtin Tango Light",
"Duotone Dark", "BlulocoLight",

6
orion-ops-ui/components.d.ts vendored
View File

@@ -5,11 +5,11 @@
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core';
export {}
export {};
declare module '@vue/runtime-core' {
export interface GlobalComponents {
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
RouterLink: typeof import('vue-router')['RouterLink'];
RouterView: typeof import('vue-router')['RouterView'];
}
}

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

@@ -10,6 +10,14 @@ body {
--color-content-text-1: rgba(0, 0, 0, .8);
--color-content-text-2: rgba(0, 0, 0, .85);
--color-content-text-3: rgba(0, 0, 0, .95);
--search-bg-focus: rgba(234, 234, 234, .75);
--search-bg: rgba(234, 234, 234, .95);
--search-color-text: #0E0E0E;
--search-color-text-focus: #0F0F0F;
--search-bg-icon-hover: rgba(12, 12, 12, .04);
--search-bg-icon-hover-focus: rgba(12, 12, 12, .08);
--search-bg-icon-selected: rgba(12, 12, 12, .06);
--search-bg-icon-selected-focus: rgba(12, 12, 12, .10);
}
// 暗色主题配色常量
@@ -24,6 +32,14 @@ body[terminal-theme='dark'] {
--color-content-text-1: rgba(255, 255, 255, .8);
--color-content-text-2: rgba(255, 255, 255, .85);
--color-content-text-3: rgba(255, 255, 255, .95);
--search-bg: rgba(12, 12, 12, .75);
--search-bg-focus: rgba(12, 12, 12, .95);
--search-color-text: #E0E0E0;
--search-color-text-focus: #F0F0F0;
--search-bg-icon-hover: rgba(255, 255, 255, .07);
--search-bg-icon-hover-focus: rgba(255, 255, 255, .12);
--search-bg-icon-selected: rgba(255, 255, 255, .12);
--search-bg-icon-selected-focus: rgba(255, 255, 255, .16);
}
// 布局常量

6
orion-ops-ui/src/views/host/terminal/components/layout/empty-recommend.vue
View File

@@ -35,7 +35,7 @@
import { InnerTabs, TerminalTabType } from '../../types/terminal.const';
import { get } from 'lodash';
const totalCount = 8;
const totalCount = 7;
const { tabManager, hosts, openTerminal } = useTerminalStore();
const combinedHandlers = ref<Array<CombinedHandlerItem>>([{
@@ -104,7 +104,7 @@
.combined-container {
padding: 12px;
margin: 64px auto;
width: 424px;
width: 398px;
height: 448px;
display: flex;
flex-direction: column;
@@ -145,7 +145,7 @@
width: calc(100% - @handler-height - 12px);
display: flex;
align-items: center;
font-size: 14px;
font-size: 12px;
&-wrapper {
display: block;

201
orion-ops-ui/src/views/host/terminal/components/xterm/terminal-search-modal.vue Normal file
View File

@@ -0,0 +1,201 @@
<template>
<div class="search-modal" v-show="visible">
<!-- 输入框-->
<input class="search-input"
ref="inputRef"
v-model="inputValue"
placeholder="搜索关键字"
@keyup.enter="find(true)" />
<div class="options-wrapper">
<!-- 上一个-->
<div class="icon-wrapper"
title="上一个"
@click="find(false)">
<icon-up />
</div>
<!-- 下一个 -->
<div class="icon-wrapper"
title="下一个"
@click="find(true)">
<icon-down />
</div>
<!-- 区分大小写 -->
<div class="icon-wrapper"
:class="{ selected: searchOptions.caseSensitive }"
title="区分大小写"
@click="toggleOption('caseSensitive')">
<icon-font-colors />
</div>
<!-- 单词匹配 -->
<div class="icon-wrapper word-option"
:class="{ selected: searchOptions.wholeWord }"
title="单词匹配"
@click="toggleOption('wholeWord')">
<icon-formula />
</div>
<!-- 正则匹配 -->
<div class="icon-wrapper"
:class="{ selected: searchOptions.regex }"
title="正则匹配"
@click="toggleOption('regex')">
<icon-italic />
</div>
<!-- 关闭 -->
<div class="icon-wrapper"
title="关闭"
@click="close">
<icon-close />
</div>
</div>
</div>
</template>
<script lang="ts">
export default {
name: 'terminalSearchModal'
};
</script>
<script lang="ts" setup>
import type { ISearchOptions } from 'xterm-addon-search';
import useVisible from '@/hooks/visible';
import { nextTick, ref } from 'vue';
const emits = defineEmits(['find', 'close']);
const { visible, setVisible } = useVisible();
const inputRef = ref();
const inputValue = ref();
const searchOptions = ref<ISearchOptions>({
caseSensitive: false,
wholeWord: false,
regex: false
});
// 打开
const open = () => {
setVisible(true);
nextTick(() => {
inputRef.value.focus();
});
};
// 关闭
const close = () => {
setVisible(false);
inputValue.value = undefined;
emits('close');
};
// 切换状态
const toggle = () => {
if (visible.value) {
close();
} else {
open();
}
};
// 查找
const find = (next: boolean) => {
inputRef.value.focus();
if (inputValue.value) {
emits('find', inputValue.value, next, searchOptions.value);
}
};
// 切换选项
const toggleOption = (key: string) => {
searchOptions.value[key as keyof ISearchOptions] =
!searchOptions.value[key as keyof ISearchOptions] as any;
inputRef.value.focus();
};
defineExpose({ open, close, toggle });
</script>
<style lang="less" scoped>
.search-modal {
position: absolute;
top: 6px;
right: 6px;
width: 272px;
height: 32px;
padding: 4px;
z-index: 9999;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--search-bg);
transition: background-color .2s;
&:focus-within, &:hover {
background: var(--search-bg-focus);
.search-input {
color: var(--search-color-text-focus);
}
.icon-wrapper {
color: var(--search-color-text-focus);
transition: background-color .2s;
&:hover {
background: var(--search-bg-icon-hover-focus);
}
&.selected {
background: var(--search-bg-icon-selected-focus);
}
}
}
}
.search-input {
border: none;
background: red;
background: none;
width: 130px;
outline: none;
height: 18px;
font-size: 12px;
color: var(--search-color-text);
}
.word-option {
transform: rotate(-90deg)
}
.options-wrapper {
display: flex;
align-items: center;
.icon-wrapper {
font-size: 12px;
cursor: pointer;
border-radius: 4px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--search-color-text);
&:not(:first-child) {
margin-left: 2px;
}
&:hover {
background: var(--search-bg-icon-hover);
}
&.selected {
background: var(--search-bg-icon-selected);
}
}
}
</style>

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

@@ -42,14 +42,18 @@
background: preference.theme.schema.background
}">
<div class="terminal-inst" ref="terminalRef" />
<!-- 搜索模态框 -->
<terminal-search-modal ref="searchModal"
@find="findWords"
@close="focus" />
</div>
<!-- 命令编辑器 -->
<shell-editor-modal ref="modal"
<shell-editor-modal ref="editorModal"
:closable="false"
:body-style="{ padding: '16px' }"
:dark="preference.theme.dark"
cancel-text="关闭"
@ok="writeCommand(modal.getValue())"
@ok="writeCommand(editorModal.getValue())"
@cancel="focus" />
</div>
</template>
@@ -68,6 +72,7 @@
import { ActionBarItems, connectStatusKey } from '../../types/terminal.const';
import IconActions from '../layout/icon-actions.vue';
import ShellEditorModal from '@/components/view/shell-editor/shell-editor-modal.vue';
import TerminalSearchModal from './terminal-search-modal.vue';
const props = defineProps<{
tab: TerminalTabItem
@@ -77,18 +82,18 @@
const { getDictValue } = useDictStore();
const { preference, tabManager, sessionManager } = useTerminalStore();
const modal = ref();
const editorModal = ref();
const searchModal = ref();
const commandInput = ref();
const terminalRef = ref();
const session = ref<ITerminalSession>();
// TODO
// index 页面
// 搜索 search color 配置
// 右键菜单补充 启用右键菜单 enableRightClickMenu 粘贴逻辑
// 快捷键补充 粘贴逻辑
// 设置快捷键 粘贴逻辑
// 读取快捷键并且禁用快捷键
// 截屏
// 主机获取逻辑 最近连接逻辑
// sftp
// 发送命令
const writeCommandInput = async (e: KeyboardEvent) => {
@@ -111,6 +116,11 @@
session.value?.focus();
};
// 查询关键字
const findWords = (word: string, next: boolean, options: any) => {
session.value?.find(word, next, options);
};
// 操作禁用状态
const actionsDisableStatus = computed<Record<string, boolean | undefined>>(() => {
return {
@@ -132,6 +142,8 @@
checkAll: () => session.value?.selectAll(),
// 复制选中部分
copy: () => session.value?.copySelection(),
// 搜索
search: () => searchModal.value.toggle(),
// 粘贴
paste: async () => session.value?.pasteTrimEnd(await readText()),
// ctrl + c
@@ -139,10 +151,7 @@
// 回车
enter: () => session.value?.paste(String.fromCharCode(13)),
// 命令编辑器
commandEditor: () => modal.value.open('', ''),
// 搜索
search: () => {
},
commandEditor: () => editorModal.value.open('', ''),
// 增大字号
fontSizePlus: () => {
if (session.value) {

11
orion-ops-ui/src/views/host/terminal/handler/terminal-session.ts
View File

@@ -7,7 +7,7 @@ import { InputProtocol } from '../types/terminal.protocol';
import { ITerminalOptions, Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import { WebLinksAddon } from 'xterm-addon-web-links';
import { SearchAddon } from 'xterm-addon-search';
import { ISearchOptions, SearchAddon } from 'xterm-addon-search';
import { ImageAddon } from 'xterm-addon-image';
import { CanvasAddon } from 'xterm-addon-canvas';
import { WebglAddon } from 'xterm-addon-webgl';
@@ -235,6 +235,15 @@ export default class TerminalSession implements ITerminalSession {
return selection;
}
// 查找
find(word: string, next: boolean, options: ISearchOptions): void {
if (next) {
this.addons.search.findNext(word, options);
} else {
this.addons.search.findPrevious(word, options);
}
}
// 去顶部
toTop(): void {
this.inst.scrollToTop();

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

@@ -21,7 +21,7 @@ export const InnerTabs = {
DISPLAY_SETTING: {
key: 'displaySetting',
title: '显示设置',
icon: 'icon-dice',
icon: 'icon-stamp',
type: TerminalTabType.SETTING
},
THEME_SETTING: {
@@ -88,6 +88,10 @@ export const ActionBarItems = [
item: 'paste',
icon: 'icon-paste',
content: '粘贴',
}, {
item: 'search',
icon: 'icon-find-replace',
content: '搜索',
}, {
item: 'interrupt',
icon: 'icon-formula',
@@ -100,10 +104,6 @@ export const ActionBarItems = [
item: 'commandEditor',
icon: 'icon-code-square',
content: '命令编辑器',
}, {
item: 'search',
icon: 'icon-search',
content: '搜索',
}, {
item: 'fontSizePlus',
icon: 'icon-zoom-in',

4
orion-ops-ui/src/views/host/terminal/types/terminal.type.ts
View File

@@ -3,7 +3,7 @@ import type { FitAddon } from 'xterm-addon-fit';
import type { CanvasAddon } from 'xterm-addon-canvas';
import type { WebglAddon } from 'xterm-addon-webgl';
import type { WebLinksAddon } from 'xterm-addon-web-links';
import type { SearchAddon } from 'xterm-addon-search';
import type { ISearchOptions, SearchAddon } from 'xterm-addon-search';
import type { ImageAddon } from 'xterm-addon-image';
import type { CSSProperties } from 'vue';
import type { HostQueryResponse } from '@/api/asset/host';
@@ -169,6 +169,8 @@ export interface ITerminalSession {
selectAll: () => void;
// 复制选中
copySelection: () => string;
// 查找
find: (word: string, next: boolean, options: ISearchOptions) => void;
// 去顶部
toTop: () => void;
// 去底部