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

💄 优化表格样式.

Browse Source
This commit is contained in:
lijiahangmax
2024-03-04 22:27:39 +08:00
parent 462e77f936
commit f1ade4e182
30 changed files with 166 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
orion-ops-ui/src/components/meta/history/history-value-modal.vue
View File

@@ -29,7 +29,6 @@
</template>
<!-- table -->
<a-table row-key="id"
class="table-wrapper-8"
ref="tableRef"
:loading="loading"
:columns="columns"

1
orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
View File

@@ -72,7 +72,6 @@
</template>
<!-- table -->
<a-table row-key="id"
class="table-wrapper-8"
ref="tableRef"
:loading="loading"
:columns="columns"

1
orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue
View File

@@ -64,7 +64,6 @@
</template>
<!-- table -->
<a-table row-key="id"
class="table-wrapper-8"
ref="tableRef"
:loading="loading"
:columns="columns"

1
orion-ops-ui/src/views/asset/host-list/components/host-table.vue
View File

@@ -91,7 +91,6 @@
</template>
<!-- table -->
<a-table row-key="id"
class="table-wrapper-8"
ref="tableRef"
:loading="loading"
:columns="columns"

1
orion-ops-ui/src/views/host-audit/connect-log/components/connect-log-table.vue
View File

@@ -89,7 +89,6 @@
</template>
<!-- table -->
<a-table row-key="id"
class="table-wrapper-8"
ref="tableRef"
:loading="loading"
v-model:selected-keys="selectedKeys"

20
orion-ops-ui/src/views/host/terminal/components/sftp/sftp-table-header.vue
View File

@@ -44,8 +44,12 @@
</a-breadcrumb>
</div>
</div>
<!-- 已关闭-右侧操作 -->
<div v-if="isClose" class="sftp-table-header-right">
<span class="close-message">{{ closeMessage }}</span>
</div>
<!-- 路径编辑模式-右侧操作 -->
<a-space v-if="pathEditable" class="sftp-table-header-right">
<a-space v-else-if="pathEditable" class="sftp-table-header-right">
<!-- 进入 -->
<a-tooltip position="top"
:mini="true"
@@ -185,9 +189,11 @@
import { openSftpCreateModalKey, openSftpUploadModalKey } from '../../types/terminal.const';
const props = defineProps<{
isClose: boolean;
closeMessage: string | undefined;
currentPath: string;
session: ISftpSession | undefined,
selectedFiles: Array<string>
session: ISftpSession | undefined;
selectedFiles: Array<string>;
}>();
const emits = defineEmits(['update:selectedFiles', 'loadFile', 'download']);
@@ -322,6 +328,14 @@
}
}
.close-message {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-left: 16px;
color: rgb(var(--red-6));
}
.header-action-icon {
font-size: 16px;
padding: 4px;

13
orion-ops-ui/src/views/host/terminal/components/sftp/sftp-view.vue
View File

@@ -12,6 +12,8 @@
<!-- 表头 -->
<sftp-table-header class="sftp-table-header"
v-model:selected-files="selectFiles"
:is-close="closed"
:close-message="closeMessage"
:current-path="currentPath"
:session="session"
@load-file="loadFiles"
@@ -89,6 +91,8 @@
const fileList = ref<Array<SftpFile>>([]);
const selectFiles = ref<Array<string>>([]);
const splitSize = ref(1);
const closed = ref(false);
const closeMessage = ref('');
const editorView = ref(false);
const editorRef = ref();
const editorFileName = ref('');
@@ -184,6 +188,14 @@
return success;
};
// 关闭回调
const onClose = (forceClose: string, msg: string) => {
console.log(forceClose);
console.log(msg);
closed.value = true;
closeMessage.value = msg;
};
// 接收列表回调
const resolveList = (result: string, path: string, list: Array<SftpFile>) => {
setTableLoading(false);
@@ -240,6 +252,7 @@
session.value = await sessionManager.openSftp(props.tab, {
setLoading: setTableLoading,
connectCallback,
onClose,
resolveList,
resolveSftpMkdir: resolveFileAction,
resolveSftpTouch: resolveFileAction,

5
orion-ops-ui/src/views/host/terminal/handler/terminal-output-processor.ts
View File

@@ -81,9 +81,9 @@ export default class TerminalOutputProcessor implements ITerminalOutputProcessor
}
// 处理关闭消息
processClose({ sessionId, msg }: OutputPayload): void {
processClose({ sessionId, msg, forceClose }: OutputPayload): void {
const session = this.sessionManager.getSession(sessionId);
// 无需处理 (直接关闭 tab )
// 无需处理 (直接关闭 tab)
if (!session) {
return;
}
@@ -98,6 +98,7 @@ export default class TerminalOutputProcessor implements ITerminalOutputProcessor
} else if (session instanceof SftpSession) {
// sftp 设置状态
session.connected = false;
session.resolver?.onClose(forceClose, msg);
}
}

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

@@ -94,7 +94,7 @@ export const OutputProtocol = {
// 主机连接关闭
CLOSE: {
type: 'cl',
template: ['type', 'sessionId', 'msg'],
template: ['type', 'sessionId', 'forceClose', 'msg'],
processMethod: 'processClose'
},
// pong

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

@@ -347,6 +347,8 @@ export interface ISftpSessionResolver {
setLoading: (loading: boolean) => void;
// 连接后回调
connectCallback: () => void;
// 关闭回调
onClose: (forceClose: string, msg: string) => void;
// 接受文件列表响应
resolveList: (result: string, path: string, list: Array<SftpFile>) => void;
// 接收创建文件夹响应

1
orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
View File

@@ -57,7 +57,6 @@
</template>
<!-- table -->
<a-table row-key="id"
class="table-wrapper-8"
ref="tableRef"
:loading="loading"
:columns="columns"

1
orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue
View File

@@ -65,7 +65,6 @@
</template>
<!-- table -->
<a-table row-key="id"
class="table-wrapper-8"
ref="tableRef"
:loading="loading"
:columns="columns"

9
orion-ops-ui/src/views/user/operator-log/components/operator-log-clear-modal.vue
View File

@@ -33,7 +33,6 @@
:allow-search="true"
:filter-option="labelFilter"
placeholder="请选择操作模块"
@change="m => selectedModule(m as string)"
allow-clear />
</a-form-item>
<!-- 操作类型 -->
@@ -81,7 +80,7 @@
<script lang="ts" setup>
import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
import type { OperatorLogQueryRequest } from '@/api/user/operator-log';
import { ref } from 'vue';
import { ref, watch } from 'vue';
import useLoading from '@/hooks/loading';
import useVisible from '@/hooks/visible';
import { getOperatorLogCount, clearOperatorLog } from '@/api/user/operator-log';
@@ -123,8 +122,8 @@
defineExpose({ open });
// 选择类型
const selectedModule = (module: string) => {
// 监听类型变化
watch(() => formModel.value.module, (module: string | undefined) => {
if (!module) {
// 不选择则重置 options
typeOptions.value = toOptions(operatorLogTypeKey);
@@ -138,7 +137,7 @@
if (formModel.value.type && !formModel.value.type.startsWith(modulePrefix)) {
formModel.value.type = undefined;
}
};
});
// 确定
const handlerOk = async () => {

11
orion-ops-ui/src/views/user/operator-log/components/operator-log-query-header.vue
View File

@@ -21,7 +21,6 @@
:allow-search="true"
:filter-option="labelFilter"
placeholder="请选择操作模块"
@change="m => selectedModule(m as string)"
allow-clear />
</a-form-item>
<!-- 操作类型 -->
@@ -67,12 +66,12 @@
<script lang="ts" setup>
import type { OperatorLogQueryRequest } from '@/api/user/operator-log';
import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
import { reactive, ref } from 'vue';
import { reactive, ref, watch } from 'vue';
import useLoading from '@/hooks/loading';
import { useDictStore } from '@/store';
import UserSelector from '@/components/user/user/user-selector.vue';
import { operatorLogModuleKey, operatorLogTypeKey, operatorRiskLevelKey, operatorLogResultKey } from '../types/const';
import { labelFilter } from '@/types/form';
import UserSelector from '@/components/user/user/user-selector.vue';
const emits = defineEmits(['submit']);
const props = defineProps({
@@ -94,8 +93,8 @@
startTimeRange: undefined,
});
// 选择类型
const selectedModule = (module: string) => {
// 监听类型变化
watch(() => formModel.module, (module: string | undefined) => {
if (!module) {
// 不选择则重置 options
typeOptions.value = toOptions(operatorLogTypeKey);
@@ -109,7 +108,7 @@
if (formModel.type && !formModel.type.startsWith(modulePrefix)) {
formModel.type = undefined;
}
};
});
// 切换页码
const submit = () => {

25
orion-ops-ui/src/views/user/operator-log/components/operator-log-simple-table.vue
View File

@@ -1,7 +1,6 @@
<template>
<!-- 表格 -->
<a-table row-key="id"
class="table-wrapper-8"
ref="tableRef"
:loading="loading"
:columns="tableColumns"
@@ -33,6 +32,19 @@
<icon-copy class="copy-left" @click="copy(record.originLogInfo, '已复制')" />
<span v-html="replaceHtmlTag(record.logInfo)" />
</template>
<!-- 操作地址 -->
<template #address="{ record }">
<span class="operator-location" :title="record.location">
{{ record.location }}
</span>
<br>
<span class="copy-left" title="复制" @click="copy(record.address)">
<icon-copy />
</span>
<span class="operator-address" :title="record.address">
{{ record.address }}
</span>
</template>
<!-- 操作 -->
<template #handle="{ record }">
<div class="table-handle-wrapper">
@@ -144,7 +156,7 @@
// 初始化
onMounted(() => {
let cols = [...columns].map(s => {
let cols = columns.map(s => {
return { ...s };
}).filter(s => s.dataIndex !== 'username');
if (props.handleColumn) {
@@ -164,4 +176,13 @@
</script>
<style lang="less" scoped>
.operator-location {
color: var(--color-text-2);
}
.operator-address {
margin-top: 4px;
display: inline-block;
color: var(--color-text-3);
}
</style>

22
orion-ops-ui/src/views/user/operator-log/components/operator-log-table.vue
View File

@@ -46,7 +46,6 @@
</template>
<!-- 表格 -->
<a-table row-key="id"
class="table-wrapper-8"
ref="tableRef"
:loading="loading"
v-model:selected-keys="selectedKeys"
@@ -80,6 +79,19 @@
<icon-copy class="copy-left" @click="copy(record.originLogInfo, '已复制')" />
<span v-html="replaceHtmlTag(record.logInfo)" />
</template>
<!-- 操作地址 -->
<template #address="{ record }">
<span class="operator-location" :title="record.location">
{{ record.location }}
</span>
<br>
<span class="copy-left" title="复制" @click="copy(record.address)">
<icon-copy />
</span>
<span class="operator-address" :title="record.address">
{{ record.address }}
</span>
</template>
<!-- 操作 -->
<template #handle="{ record }">
<div class="table-handle-wrapper">
@@ -220,5 +232,13 @@
</script>
<style lang="less" scoped>
.operator-location {
color: var(--color-text-2);
}
.operator-address {
margin-top: 4px;
display: inline-block;
color: var(--color-text-3);
}
</style>

2
orion-ops-ui/src/views/user/operator-log/types/const.ts
View File

@@ -19,7 +19,7 @@ export const getLogDetail = (record: OperatorLogQueryResponse): Record<string, a
detail.duration = `${record.duration} ms`;
detail.startTime = dateFormat(new Date(record.startTime));
detail.endTime = dateFormat(new Date(record.endTime));
detail.extra = record?.extra;
detail.extra = JSON.parse(record?.extra);
detail.returnValue = JSON.parse(record?.returnValue);
return detail;
} catch (e) {

7
orion-ops-ui/src/views/user/operator-log/types/table.columns.ts
View File

@@ -32,6 +32,13 @@ const columns = [
slotName: 'originLogInfo',
ellipsis: true,
tooltip: true,
}, {
title: '操作地址',
dataIndex: 'address',
slotName: 'address',
width: 156,
align: 'left',
ellipsis: true,
}, {
title: '操作时间',
dataIndex: 'createTime',

1
orion-ops-ui/src/views/user/role/components/role-table.vue
View File

@@ -50,7 +50,6 @@
</template>
<!-- table -->
<a-table row-key="id"
class="table-wrapper-8"
ref="tableRef"
:loading="loading"
:columns="columns"

1
orion-ops-ui/src/views/user/user/components/user-table.vue
View File

@@ -65,7 +65,6 @@
</template>
<!-- table -->
<a-table row-key="id"
class="table-wrapper-8"
ref="tableRef"
:loading="loading"
:columns="columns"