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:
lijiahang
2024-01-25 19:08:59 +08:00
parent 6ac99b692d
commit ac2376842a
12 changed files with 281 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/java/com/orion/ops/framework/mybatis/core/generator/CodeGenerators.java
View File

@@ -45,11 +45,12 @@ public class CodeGenerators {
// .color("blue", "gray", "red", "green", "white")
// .valueUseFields()
// .build(),
Template.create("command_snippet_group", "命令片段分组", "command")
Template.create("command_snippet", "命令片段", "command")
.disableUnitTest()
.cache("command:snippet:group:{}", "命令片段分组 ${userId}")
.cache("command:snippet:group:{}", "命令片段 ${userId}")
.expire(1, TimeUnit.DAYS)
.vue("host", "command-snippet-group")
.vue("asset", "command-snippet")
.enableDrawerForm()
.build(),
};
// jdbc 配置 - 使用配置文件

2
orion-ops-ui/src/components/view/editor/index.vue
View File

@@ -11,7 +11,7 @@
<script lang="ts">
export default {
name: 'index'
name: 'editor'
};
</script>

152
orion-ops-ui/src/views/host/command-snippet/components/command-snippet-form-drawer.vue Normal file
View File

@@ -0,0 +1,152 @@
<template>
<a-drawer v-model:visible="visible"
:title="title"
:width="488"
:mask-closable="false"
:unmount-on-close="true"
:ok-button-props="{ disabled: loading }"
:cancel-button-props="{ disabled: loading }"
:on-before-ok="handlerOk"
@cancel="handleClose">
<a-spin class="full form-container" :loading="loading">
<a-form :model="formModel"
ref="formRef"
label-align="right"
layout="vertical"
:label-col-props="{ span: 6 }"
:wrapper-col-props="{ span: 18 }"
:rules="formRules">
<!-- 分组 -->
<a-form-item field="groupId" label="命令分组">
<a-input-number v-model="formModel.groupId"
placeholder="请输入命令分组"
hide-button />
</a-form-item>
<!-- 名称 -->
<a-form-item field="name" label="名称">
<a-input v-model="formModel.name" placeholder="请输入名称" allow-clear />
</a-form-item>
<!-- 代码片段 -->
<a-form-item field="command" label="代码片段">
<editor v-model="formModel.command"
containerClass="command-editor"
language="shell"
:auto-focus="true"
:theme="preference.theme.dark ? 'vs-dark' : 'vs'" />
</a-form-item>
</a-form>
</a-spin>
</a-drawer>
</template>
<script lang="ts">
export default {
name: 'assetCommandSnippetFormDrawer'
};
</script>
<script lang="ts" setup>
import type { CommandSnippetUpdateRequest } from '@/api/asset/command-snippet';
import { ref } from 'vue';
import useLoading from '@/hooks/loading';
import useVisible from '@/hooks/visible';
import formRules from '../types/form.rules';
import { createCommandSnippet, updateCommandSnippet } from '@/api/asset/command-snippet';
import { Message } from '@arco-design/web-vue';
import { useTerminalStore } from '@/store';
const { preference } = useTerminalStore();
const { visible, setVisible } = useVisible();
const { loading, setLoading } = useLoading();
const title = ref<string>();
const isAddHandle = ref<boolean>(true);
const defaultForm = (): CommandSnippetUpdateRequest => {
return {
id: undefined,
groupId: undefined,
name: undefined,
command: undefined,
};
};
const formRef = ref<any>();
const formModel = ref<CommandSnippetUpdateRequest>({});
const emits = defineEmits(['added', 'updated']);
// 打开新增
const openAdd = () => {
title.value = '添加命令片段';
isAddHandle.value = true;
renderForm({ ...defaultForm() });
setVisible(true);
};
// 打开修改
const openUpdate = (record: any) => {
title.value = '修改命令片段';
isAddHandle.value = false;
renderForm({ ...defaultForm(), ...record });
setVisible(true);
};
// 渲染表单
const renderForm = (record: any) => {
formModel.value = Object.assign({}, record);
};
defineExpose({ openAdd, openUpdate });
// 确定
const handlerOk = async () => {
setLoading(true);
try {
// 验证参数
const error = await formRef.value.validate();
if (error) {
return false;
}
if (isAddHandle.value) {
// 新增
await createCommandSnippet(formModel.value);
Message.success('创建成功');
emits('added');
} else {
// 修改
await updateCommandSnippet(formModel.value);
Message.success('修改成功');
emits('updated');
}
// 清空
handlerClear();
} catch (e) {
return false;
} finally {
setLoading(false);
}
};
// 关闭
const handleClose = () => {
handlerClear();
};
// 清空
const handlerClear = () => {
setLoading(false);
};
</script>
<style lang="less" scoped>
.form-container {
padding: 12px;
}
.command-editor {
height: 340px;
}
</style>

6
orion-ops-ui/src/views/host/terminal/components/snippet/snippet-group.vue → orion-ops-ui/src/views/host/command-snippet/components/command-snippet-group.vue
View File

@@ -10,7 +10,7 @@
</template>
<!-- snippet -->
<template v-for="item in group.items">
<snippet-item v-if="item.visible"
<command-snippet-item v-if="item.visible"
:key="item.id"
:item="item" />
</template>
@@ -21,14 +21,14 @@
<script lang="ts">
export default {
name: 'snippetGroup'
name: 'commandSnippetGroup'
};
</script>
<script lang="ts" setup>
import type { CommandSnippetGroupQueryResponse } from '@/api/asset/command-snippet-group';
import type { CommandSnippetWrapperResponse } from '@/api/asset/command-snippet';
import SnippetItem from './snippet-item.vue';
import CommandSnippetItem from './command-snippet-item.vue';
defineProps<{
snippet: CommandSnippetWrapperResponse

18
orion-ops-ui/src/views/host/terminal/components/snippet/snippet-item.vue → orion-ops-ui/src/views/host/command-snippet/components/command-snippet-item.vue
View File

@@ -72,14 +72,14 @@
<div>执行</div>
</a-doption>
<!-- 修改 -->
<a-doption @click="exec">
<a-doption @click="openUpdateSnippet(item)">
<div class="terminal-context-menu-icon">
<icon-edit />
</div>
<div>修改</div>
</a-doption>
<!-- 删除 -->
<a-doption @click="exec">
<a-doption @click="removeSnippet(item.id)">
<div class="terminal-context-menu-icon">
<icon-delete />
</div>
@@ -107,7 +107,7 @@
<script lang="ts">
export default {
name: 'snippetItem'
name: 'commandSnippetItem'
};
</script>
@@ -116,6 +116,8 @@
import { useTerminalStore } from '@/store';
import { useDebounceFn } from '@vueuse/core';
import useCopy from '@/hooks/copy';
import { inject } from 'vue';
import { openUpdateSnippetKey, removeSnippetKey } from '../types/const';
const props = defineProps<{
item: CommandSnippetQueryResponse
@@ -124,10 +126,16 @@
const { copy } = useCopy();
const { getCurrentTerminalSession } = useTerminalStore();
// TODO 修改 删除 拼接有bug
// TODO 多行拼接有bug
let clickCount = 0;
// 修改
const openUpdateSnippet = inject<(item: CommandSnippetQueryResponse) => void>(openUpdateSnippetKey);
// 删除
const removeSnippet = inject<(id: number) => void>(removeSnippetKey);
// 点击命令
const clickItem = () => {
if (++clickCount == 2) {
@@ -161,7 +169,7 @@
// 执行
const exec = () => {
write(props.item.command + '\n');
write(props.item.command + '\r\n');
};
// 写入命令

76
orion-ops-ui/src/views/host/terminal/components/snippet/snippet-drawer.vue → orion-ops-ui/src/views/host/command-snippet/components/command-snippet-list-drawer.vue
View File

@@ -15,7 +15,9 @@
<!-- 命令头部 -->
<div class="snippet-header">
<!-- 创建命令 -->
<span class="click-icon-wrapper snippet-header-icon" title="创建命令">
<span class="click-icon-wrapper snippet-header-icon"
title="创建命令"
@click="openAdd">
<icon-plus />
</span>
<!-- 搜索框 -->
@@ -43,40 +45,45 @@
<!-- 命令片段 -->
<div v-else class="snippet-list-container">
<!-- 命令片段组 -->
<snippet-group :snippet="snippet" />
<command-snippet-group :snippet="snippet" />
<!-- 未分组命令片段 -->
<div class="ungrouped-snippet-container">
<template v-for="item in snippet.ungroupedItems">
<snippet-item v-if="item.visible"
:key="item.id"
:item="item" />
<command-snippet-item v-if="item.visible"
:key="item.id"
:item="item" />
</template>
</div>
</div>
</div>
<!-- 命令编辑抽屉 -->
<command-snippet-form-drawer ref="formDrawer" />
</a-drawer>
</template>
<script lang="ts">
export default {
name: 'snippetDrawer'
name: 'commandSnippetListDrawer'
};
</script>
<script lang="ts" setup>
import type { CommandSnippetWrapperResponse } from '@/api/asset/command-snippet';
import { onMounted, ref } from 'vue';
import type { CommandSnippetWrapperResponse, CommandSnippetQueryResponse } from '@/api/asset/command-snippet';
import { onMounted, ref, provide } from 'vue';
import useVisible from '@/hooks/visible';
import useLoading from '@/hooks/loading';
import { getCommandSnippetList } from '@/api/asset/command-snippet';
import SnippetItem from './snippet-item.vue';
import SnippetGroup from './snippet-group.vue';
import { deleteCommandSnippet, getCommandSnippetList } from '@/api/asset/command-snippet';
import { useTerminalStore } from '@/store';
import { openUpdateSnippetKey, removeSnippetKey } from '../types/const';
import CommandSnippetItem from './command-snippet-item.vue';
import CommandSnippetGroup from './command-snippet-group.vue';
import CommandSnippetFormDrawer from './command-snippet-form-drawer.vue';
const { loading, setLoading } = useLoading();
const { visible, setVisible } = useVisible();
const { getCurrentTerminalSession } = useTerminalStore();
const formDrawer = ref();
const filterValue = ref<string>();
const snippet = ref<CommandSnippetWrapperResponse>();
@@ -87,8 +94,6 @@
await fetchData();
};
// TODO 新增
defineExpose({ open });
// 加载数据
@@ -125,9 +130,51 @@
});
};
// 新建
const openAdd = () => {
formDrawer.value.openAdd();
};
// 打开修改
provide(openUpdateSnippetKey, (e: CommandSnippetQueryResponse) => {
formDrawer.value.openUpdate(e);
});
// 删除
provide(removeSnippetKey, async (id: number) => {
if (!snippet.value) {
return;
}
// 查找并且删除
function findAndSplice(items: Array<CommandSnippetQueryResponse>) {
if (items) {
const index = items.findIndex(s => s.id === id);
if (index !== -1) {
items.splice(index, 1);
return true;
}
return false;
}
}
// 删除
await deleteCommandSnippet(id);
// 查找并且删除未分组的数据
if (findAndSplice(snippet.value.ungroupedItems)) {
return;
}
// 查找并且删除分组内数据
for (let group of snippet.value.groups) {
if (findAndSplice(group.items)) {
return;
}
}
});
// 关闭
const onClose = () => {
setVisible(false);
// 聚焦终端
getCurrentTerminalSession(false)?.focus();
};
@@ -164,6 +211,7 @@
&-input {
width: 220px;
user-select: none;
}
}
}

5
orion-ops-ui/src/views/host/command-snippet/types/const.ts Normal file
View File

@@ -0,0 +1,5 @@
// 打开 updateSnippet key
export const openUpdateSnippetKey = Symbol();
// 删除 snippet key
export const removeSnippetKey = Symbol();

24
orion-ops-ui/src/views/host/command-snippet/types/form.rules.ts Normal file
View File

@@ -0,0 +1,24 @@
import type { FieldRule } from '@arco-design/web-vue';
export const groupId = [{
message: '请选择分组'
}] as FieldRule[];
export const name = [{
required: true,
message: '请输入名称'
}, {
maxLength: 64,
message: '名称长度不能大于64位'
}] as FieldRule[];
export const command = [{
required: true,
message: '请输入代码片段'
}] as FieldRule[];
export default {
groupId,
name,
command,
} as Record<string, FieldRule | FieldRule[]>;

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

@@ -8,8 +8,8 @@
<icon-actions class="bottom-actions"
:actions="bottomActions"
position="left" />
<!-- 命令片段 -->
<snippet-drawer ref="snippetRef" />
<!-- 命令片段列表抽屉 -->
<command-snippet-list-drawer ref="snippetRef" />
</div>
</template>
@@ -22,11 +22,9 @@
<script lang="ts" setup>
import type { SidebarAction } from '../../types/terminal.type';
import { useTerminalStore } from '@/store';
import { TerminalTabType } from '../../types/terminal.const';
import { Message } from '@arco-design/web-vue';
import { ref } from 'vue';
import IconActions from './icon-actions.vue';
import SnippetDrawer from '../snippet/snippet-drawer.vue';
import CommandSnippetListDrawer from '../../../command-snippet/components/command-snippet-list-drawer.vue';
const emits = defineEmits(['openSftp', 'openTransfer']);

4
orion-ops-ui/src/views/host/terminal/components/new-connection/host-list-view.vue
View File

@@ -218,8 +218,8 @@
}
};
// 打开配置
const openSetting = inject<(record: HostQueryResponse) => void>(openSshModalKey) as any;
// 打开配置 FIXME
const openSetting = inject<(record: HostQueryResponse) => void>(openSshModalKey);
// 设置收藏
const setFavorite = async (item: HostQueryResponse) => {

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

@@ -70,6 +70,7 @@ export default class TerminalSessionHandler implements ITerminalSessionHandler {
switch (option) {
case 'paste':
case 'pasteTrimEnd':
case 'pasteOrigin':
case 'interrupt':
case 'enter':
case 'commandEditor':
@@ -126,7 +127,7 @@ export default class TerminalSessionHandler implements ITerminalSessionHandler {
this.inst.focus();
}
// 粘贴
// 从剪切板粘贴并且去除尾部空格 (如果配置)
paste() {
readText().then(s => this.pasteTrimEnd(s));
}
@@ -142,6 +143,12 @@ export default class TerminalSessionHandler implements ITerminalSessionHandler {
this.inst.focus();
}
// 粘贴原文
pasteOrigin(value: string) {
this.inst.paste(value);
this.inst.focus();
}
// 选中全部
selectAll() {
this.inst.selectAll();
@@ -246,7 +253,7 @@ export default class TerminalSessionHandler implements ITerminalSessionHandler {
append = value;
}
// 追加
this.pasteTrimEnd(append);
this.pasteOrigin(append);
}
// 截图

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

@@ -214,10 +214,12 @@ export interface ITerminalSessionHandler {
// 复制选中
copy: () => void;
// 粘贴
// 从剪切板粘贴并且去除尾部空格 (如果配置)
paste: () => void;
// 粘贴并且去除尾部空格 (如果配置)
pasteTrimEnd: (value: string) => void;
// 粘贴原文
pasteOrigin: (value: string) => void;
// 选中全部
selectAll: () => void;
// 去顶部