🔖 项目重命名.

This commit is contained in:
lijiahangmax
2024-05-16 00:03:30 +08:00
parent f7189e34cb
commit d3a045ec20
1511 changed files with 4199 additions and 4128 deletions

View File

@@ -0,0 +1,52 @@
<template>
<div class="container">
<!-- 表头 -->
<div class="panel-header">
<h3>执行命令</h3>
<span v-permission="['asset:exec-template:query']"
class="span-blue usn pointer"
@click="emits('openTemplate')">
从模板中选择
</span>
</div>
<!-- 命令编辑器 -->
<div class="editor-wrapper">
<slot />
</div>
<!-- 命名提示信息 -->
<div v-pre class="editor-help">
使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量
</div>
</div>
</template>
<script lang="ts">
export default {
name: 'execCommandPanelEditor'
};
</script>
<script lang="ts" setup>
const emits = defineEmits(['openTemplate']);
</script>
<style lang="less" scoped>
.editor-wrapper {
width: 100%;
height: calc(100% - 56px);
position: relative;
}
.editor-help {
user-select: none;
display: flex;
margin-top: 8px;
height: 18px;
color: var(--color-text-3);
overflow: hidden;
white-space: nowrap;
}
</style>

View File

@@ -0,0 +1,41 @@
<template>
<div class="container">
<!-- 表头 -->
<div class="panel-header">
<h3>执行参数</h3>
<!-- 操作 -->
<a-button-group size="mini">
<a-button @click="emits('reset')">重置</a-button>
<a-button type="primary" @click="emits('exec')">执行</a-button>
</a-button-group>
</div>
<!-- 命令表单 -->
<slot name="form" />
<a-divider v-if="schemaCount"
orientation="center"
style="margin: 12px 0 26px 0;">
命令参数
</a-divider>
<!-- 参数表单 -->
<slot v-if="schemaCount" name="params" />
</div>
</template>
<script lang="ts">
export default {
name: 'execCommandPanelForm'
};
</script>
<script lang="ts" setup>
const emits = defineEmits(['reset', 'exec']);
defineProps<{
schemaCount: number
}>();
</script>
<style lang="less" scoped>
</style>

View File

@@ -0,0 +1,158 @@
<template>
<div class="container">
<!-- 表头 -->
<div class="panel-header">
<h3>执行历史</h3>
<span class="history-help">
展示最近 {{ historyCount }} 条执行记录
</span>
</div>
<!-- 加载中 -->
<a-skeleton v-if="loading" :animation="true">
<a-skeleton-line :rows="4"
:line-height="40"
:line-spacing="8" />
</a-skeleton>
<!-- 无数据 -->
<div v-else-if="!historyLogs.length" class="flex-center mt16">
<a-empty description="无执行记录" />
</div>
<!-- 批量执行日志 -->
<div v-else class="exec-history-rows">
<div v-for="record in historyLogs"
:key="record.id"
class="exec-history"
@click="emits('selected', record)">
<!-- 机器数量 -->
<span class="exec-history-count">
{{ record.hostIdList?.length || 0 }}
</span>
<!-- 执行描述 -->
<span class="exec-history-desc">
{{ record.description }}
</span>
</div>
</div>
</div>
</template>
<script lang="ts">
export default {
name: 'execCommandPanelHistory'
};
</script>
<script lang="ts" setup>
import type { ExecLogQueryResponse } from '@/api/exec/exec-log';
import type { ExecCommandRequest } from '@/api/exec/exec-command';
import { onMounted, ref } from 'vue';
import { getExecCommandLogHistory } from '@/api/exec/exec-command-log';
import { historyCount } from '../types/const';
import useLoading from '@/hooks/loading';
const emits = defineEmits(['selected']);
const { loading, setLoading } = useLoading(true);
const historyLogs = ref<Array<ExecLogQueryResponse>>([]);
// 添加
const add = (record: ExecCommandRequest) => {
const index = historyLogs.value.findIndex(s => s.description === record.description);
if (index === -1) {
// 不存在
historyLogs.value.unshift({
description: record.description,
command: record.command,
parameterSchema: record.parameterSchema,
timeout: record.timeout,
hostIdList: record.hostIdList
} as ExecLogQueryResponse);
} else {
// 存在
const his = historyLogs.value[index];
historyLogs.value.splice(index, 1);
historyLogs.value.unshift({
...his,
command: record.command,
parameterSchema: record.parameterSchema,
timeout: record.timeout,
hostIdList: record.hostIdList
} as ExecLogQueryResponse);
}
};
defineExpose({ add });
// 加载批量执行日志
const fetchExecHistory = async () => {
setLoading(true);
try {
const { data } = await getExecCommandLogHistory(historyCount);
historyLogs.value = data;
} catch (e) {
} finally {
setLoading(false);
}
};
// 加载批量执行日志
onMounted(fetchExecHistory);
</script>
<style lang="less" scoped>
.exec-history-rows {
position: absolute;
width: calc(100% - 32px);
height: calc(100% - 64px);
overflow: auto;
&::-webkit-scrollbar-track {
display: none;
}
}
.exec-history {
padding: 8px;
border-radius: 2px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
background: var(--color-fill-2);
transition: all .2s;
user-select: none;
cursor: pointer;
&:hover {
background: var(--color-fill-3);
}
&-count {
width: 24px;
height: 24px;
border-radius: 2px;
margin-right: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
background: rgb(var(--arcoblue-6));
}
&-desc {
color: var(--color-text-2);
width: calc(100% - 36px);
overflow: hidden;
white-space: nowrap;
text-align: end;
text-overflow: ellipsis;
}
}
.history-help {
color: var(--color-text-3);
}
</style>

View File

@@ -0,0 +1,354 @@
<template>
<!-- 命令执行 -->
<a-spin class="exec-container" :loading="loading">
<!-- 执行参数 -->
<exec-command-panel-form class="exec-form-container"
:schema-count="parameterSchema.length"
@exec="execCommand"
@reset="resetForm">
<!-- 命令表单 -->
<template #form>
<a-form :model="formModel"
ref="formRef"
class="form-wrapper"
label-align="right"
:auto-label-width="true"
:rules="formRules">
<a-row :gutter="16">
<!-- 执行主机 -->
<a-col :span="24">
<a-form-item field="hostIdList" label="执行主机">
<div class="selected-host">
<!-- 已选择数量 -->
<span class="usn" v-if="formModel.hostIdList?.length">
已选择<span class="selected-host-count span-blue">{{ formModel.hostIdList?.length }}</span>台主机
</span>
<span class="usn pointer span-blue" @click="openSelectHost">
{{ formModel.hostIdList?.length ? '重新选择' : '选择主机' }}
</span>
</div>
</a-form-item>
</a-col>
<!-- 执行描述 -->
<a-col :span="24">
<a-form-item field="description" label="执行描述">
<a-input v-model="formModel.description"
placeholder="请输入执行描述"
allow-clear />
</a-form-item>
</a-col>
<!-- 超时时间 -->
<a-col :span="14">
<a-form-item field="timeout"
label="超时时间"
:hide-asterisk="true">
<a-input-number v-model="formModel.timeout"
placeholder="为0则不超时"
:min="0"
:max="100000"
hide-button>
<template #suffix>
</template>
</a-input-number>
</a-form-item>
</a-col>
<!-- 脚本执行 -->
<a-col :span="10">
<a-form-item field="scriptExec"
label="脚本执行"
:hide-asterisk="true">
<div class="flex-center">
<a-switch v-model="formModel.scriptExec"
type="round"
:checked-value="EnabledStatus.ENABLED"
:unchecked-value="EnabledStatus.DISABLED" />
<div class="question-right ml8">
<a-tooltip content="启用后会将命令写入脚本文件 传输到主机后执行">
<icon-question-circle />
</a-tooltip>
</div>
</div>
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
<!-- 参数表单 -->
<template #params>
<a-form :model="parameterFormModel"
ref="parameterFormRef"
label-align="right">
<a-form-item v-for="item in parameterSchema"
:key="item.name"
:field="item.name as string"
:label="item.name"
required>
<a-input v-model="parameterFormModel[item.name as string]"
:placeholder="item.desc"
allow-clear />
</a-form-item>
</a-form>
</template>
</exec-command-panel-form>
<!-- 执行命令 -->
<exec-command-panel-editor class="exec-command-container"
@open-template="() => templateModal.open()">
<exec-editor v-model="formModel.command"
theme="vs-dark"
:parameter="parameterSchema" />
</exec-command-panel-editor>
<!-- 执行历史 -->
<exec-command-panel-history class="exec-history-container"
ref="historyRef"
@selected="setWithExecLog" />
<!-- 命令模板模态框 -->
<exec-template-modal ref="templateModal"
@selected="setWithTemplate" />
<!-- 主机模态框 -->
<authorized-host-modal ref="hostModal"
@selected="setSelectedHost" />
</a-spin>
</template>
<script lang="ts">
export default {
name: 'execPanel'
};
</script>
<script lang="ts" setup>
import type { ExecTemplateQueryResponse } from '@/api/exec/exec-template';
import type { ExecLogQueryResponse } from '@/api/exec/exec-log';
import type { ExecCommandRequest } from '@/api/exec/exec-command';
import type { TemplateParam } from '@/components/view/exec-editor/const';
import { ref } from 'vue';
import formRules from '../types/form.rules';
import useLoading from '@/hooks/loading';
import { batchExecCommand } from '@/api/exec/exec-command';
import { getExecTemplateWithAuthorized } from '@/api/exec/exec-template';
import { EnabledStatus } from '@/types/const';
import { Message } from '@arco-design/web-vue';
import ExecEditor from '@/components/view/exec-editor/index.vue';
import AuthorizedHostModal from '@/components/asset/host/authorized-host-modal/index.vue';
import ExecCommandPanelForm from './exec-command-panel-form.vue';
import ExecCommandPanelHistory from './exec-command-panel-history.vue';
import ExecCommandPanelEditor from './exec-command-panel-editor.vue';
import ExecTemplateModal from '@/components/exec/template/modal/index.vue';
const emits = defineEmits(['submit']);
const defaultForm = (): ExecCommandRequest => {
return {
description: '',
command: '',
timeout: 0,
scriptExec: EnabledStatus.DISABLED,
parameterSchema: '[]',
hostIdList: [],
};
};
const { loading, setLoading } = useLoading();
const hostModal = ref<any>();
const historyRef = ref<any>();
const formRef = ref<any>();
const templateModal = ref<any>();
const parameterFormRef = ref<any>();
const formModel = ref<ExecCommandRequest>({ ...defaultForm() });
const parameterFormModel = ref<Record<string, any>>({});
const parameterSchema = ref<Array<TemplateParam>>([]);
// 打开选择主机
const openSelectHost = () => {
hostModal.value.open(formModel.value.hostIdList);
};
// 设置选中主机
const setSelectedHost = (hosts: Array<number>) => {
formModel.value.hostIdList = hosts;
};
// 从执行模板设置
const setWithTemplate = async ({ id }: ExecTemplateQueryResponse) => {
setLoading(true);
try {
// 查询模板信息
const { data } = await getExecTemplateWithAuthorized(id);
formModel.value = {
...formModel.value,
description: data.name,
command: data.command,
timeout: data.timeout,
scriptExec: data.scriptExec,
hostIdList: data.hostIdList,
};
parameterSchema.value = data.parameterSchema ? JSON.parse(data.parameterSchema) : [];
if (parameterSchema.value.length) {
parameterFormModel.value = parameterSchema.value.reduce((acc, cur) => ({
...acc,
[cur.name as string]: cur.value
}), {});
} else {
parameterFormModel.value = {};
}
} catch (e) {
} finally {
setLoading(false);
}
};
// 从执行日志设置
const setWithExecLog = (record: ExecLogQueryResponse) => {
formModel.value = {
...formModel.value,
command: record.command,
description: record.description,
timeout: record.timeout,
scriptExec: record.scriptExec,
hostIdList: record.hostIdList
};
parameterSchema.value = record.parameterSchema ? JSON.parse(record.parameterSchema) : [];
if (parameterSchema.value.length) {
parameterFormModel.value = parameterSchema.value.reduce((acc, cur) => ({
...acc,
[cur.name as string]: cur.value
}), {});
} else {
parameterFormModel.value = {};
}
};
// 执行
const execCommand = async () => {
setLoading(true);
try {
// 验证参数
let error = await formRef.value.validate();
if (error) {
return false;
}
error = await parameterFormRef.value?.validate();
if (error) {
return false;
}
if (!formModel.value.command) {
Message.error('请输入命令');
return false;
}
// 设置 schema
for (let ps of parameterSchema.value) {
ps.value = parameterFormModel.value[ps.name as string];
}
// 执行命令
const request = {
...formModel.value,
parameterSchema: JSON.stringify(parameterSchema.value),
};
const { data } = await batchExecCommand(request);
// 设置历史命令
historyRef.value.add(request);
Message.success('已开始执行');
emits('submit', data);
} catch (e) {
return false;
} finally {
setLoading(false);
}
};
// 重置
const resetForm = () => {
formModel.value = Object.assign({}, { ...defaultForm() });
parameterFormModel.value = {};
parameterSchema.value = [];
};
</script>
<style lang="less" scoped>
@form-width: 420px;
@history-width: 320px;
@command-gap: @form-width + @history-width + 32px;
.exec-container {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
position: absolute;
.exec-form-container {
width: @form-width;
}
.exec-command-container {
width: calc(100% - @command-gap);
margin: 0 16px;
}
.exec-history-container {
width: @history-width;
}
.exec-form-container, .exec-command-container, .exec-history-container {
background: var(--color-bg-2);
border-radius: 4px;
height: 100%;
padding: 16px;
position: relative;
}
}
.exec-form-container {
.form-wrapper {
margin-top: 8px;
}
.selected-host {
width: 100%;
height: 32px;
padding: 0 8px;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--color-text-2);
background: var(--color-fill-2);
transition: all 0.3s;
&-count {
font-size: 16px;
font-weight: 600;
display: inline-block;
margin: 0 6px;
}
&:hover {
background: var(--color-fill-3);
}
}
}
:deep(.panel-header) {
width: 100%;
height: 28px;
margin-bottom: 4px;
display: flex;
justify-content: space-between;
align-items: flex-start;
h3, > span {
margin: 0;
overflow: hidden;
white-space: nowrap;
}
h3 {
color: var(--color-text-1);
}
}
</style>

View File

@@ -0,0 +1,81 @@
<template>
<div class="layout-container full">
<!-- 执行面板 -->
<div v-show="!logVisible" class="panel-wrapper">
<exec-command-panel @submit="openLog" />
</div>
<!-- 执行日志 -->
<div v-if="logVisible" class="panel-wrapper">
<exec-log-panel ref="log"
type="BATCH"
:visibleBack="true"
@back="setLogVisible(false)" />
</div>
</div>
</template>
<script lang="ts">
export default {
name: 'execCommand'
};
</script>
<script lang="ts" setup>
import type { ExecLogQueryResponse } from '@/api/exec/exec-log';
import { nextTick, onMounted, ref } from 'vue';
import useVisible from '@/hooks/visible';
import { useDictStore } from '@/store';
import { dictKeys } from '@/components/exec/log/const';
import { useRoute } from 'vue-router';
import { getExecCommandLog } from '@/api/exec/exec-command-log';
import ExecCommandPanel from './components/exec-command-panel.vue';
import ExecLogPanel from '@/components/exec/log/panel/index.vue';
const { visible: logVisible, setVisible: setLogVisible } = useVisible();
const route = useRoute();
const log = ref();
// 打开日志
const openLog = (record: ExecLogQueryResponse) => {
setLogVisible(true);
nextTick(() => {
log.value.open(record);
});
};
// 打开日志
const openLogWithId = async (id: number) => {
setLogVisible(true);
// 查询日志
const { data } = await getExecCommandLog(id);
openLog(data);
};
// 加载字典值
onMounted(async () => {
const dictStore = useDictStore();
await dictStore.loadKeys(dictKeys);
});
// 跳转日志
onMounted(async () => {
const idParam = route.query.id;
const keyParam = route.query.key;
if (idParam) {
await openLogWithId(Number.parseInt(idParam as string));
} else if (keyParam) {
await openLogWithId(Number.parseInt(keyParam as string));
}
});
</script>
<style lang="less" scoped>
.panel-wrapper {
width: 100%;
height: 100%;
position: relative;
}
</style>

View File

@@ -0,0 +1,2 @@
// 执行
export const historyCount = 20;

View File

@@ -0,0 +1,39 @@
import type { FieldRule } from '@arco-design/web-vue';
export const description = [{
maxLength: 128,
message: '执行描述长度不能大于128位'
}] as FieldRule[];
export const hostIdList = [{
required: true,
message: '请选择执行主机'
}] as FieldRule[];
export const command = [{
required: true,
message: '请输入执行命令'
}] as FieldRule[];
export const timeout = [{
required: true,
message: '请输入超时时间'
}, {
type: 'number',
min: 0,
max: 100000,
message: '超时时间需要在 0 - 100000 之间'
}] as FieldRule[];
export const scriptExec = [{
required: true,
message: '请选择是否使用脚本执行'
}] as FieldRule[];
export default {
description,
hostIdList,
command,
timeout,
scriptExec,
} as Record<string, FieldRule | FieldRule[]>;