TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-03 07:50:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: fix

Browse Source
This commit is contained in:
meilin.huang
2025-04-20 21:01:01 +08:00
parent abd2b4bac0
commit 798ab7d18b
15 changed files with 179 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@@ -22,7 +22,7 @@
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",
"dayjs": "^1.11.13", "dayjs": "^1.11.13",
"echarts": "^5.6.0", "echarts": "^5.6.0",
"element-plus": "^2.9.7", "element-plus": "^2.9.8",
"js-base64": "^3.7.7", "js-base64": "^3.7.7",
"jsencrypt": "^3.3.2", "jsencrypt": "^3.3.2",
"mitt": "^3.0.1", "mitt": "^3.0.1",

4
frontend/src/components/monaco/MonacoEditor.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="monaco-editor" style="border: 1px solid var(--el-border-color-light, #ebeef5); height: 100%"> <div class="monaco-editor-custom h-full" style="border: 1px solid var(--el-border-color-light, #ebeef5)">
<div class="monaco-editor-content" ref="monacoTextareaRef" :style="{ height: height }"></div> <div class="monaco-editor-content" ref="monacoTextareaRef" :style="{ height: height }"></div>
<el-select v-if="canChangeMode" class="code-mode-select" v-model="languageMode" @change="changeLanguage" filterable> <el-select v-if="canChangeMode" class="code-mode-select" v-model="languageMode" @change="changeLanguage" filterable>
<el-option v-for="mode in languageArr" :key="mode.value" :label="mode.label" :value="mode.value"> </el-option> <el-option v-for="mode in languageArr" :key="mode.value" :label="mode.label" :value="mode.value"> </el-option>
@@ -309,7 +309,7 @@ defineExpose({ getEditor, format, focus });
</script> </script>
<style lang="scss"> <style lang="scss">
.monaco-editor { .monaco-editor-custom {
.code-mode-select { .code-mode-select {
position: absolute; position: absolute;
z-index: 2; z-index: 2;

374
frontend/src/components/pagetable/PageTable.vue
View File

@@ -11,165 +11,143 @@
</transition> </transition>
<el-card class="h-full" body-class="h-full"> <el-card class="h-full" body-class="h-full">
<div class="table-main"> <!-- 表格头部 操作按钮 -->
<!-- 表格头部 操作按钮 --> <div class="flex justify-between">
<div class="table-header"> <div>
<div class="header-button-lf"> <slot name="tableHeader" />
<slot name="tableHeader" /> </div>
</div>
<div v-if="toolButton" class="header-button-ri"> <slot v-if="toolButton" name="toolButton">
<slot name="toolButton"> <div class="flex">
<div class="tool-button"> <!-- 简易单个搜索项 -->
<!-- 简易单个搜索项 --> <div v-if="nowSearchItem" class="flex">
<div v-if="nowSearchItem" class="simple-search-form"> <el-dropdown v-if="searchItems?.length > 1">
<el-dropdown v-if="searchItems?.length > 1"> <SvgIcon :size="16" name="CaretBottom" class="!mr-1 !mt-1.5 simple-search-form-btn" />
<SvgIcon :size="16" name="CaretBottom" class="!mr-1 !mt-1.5 simple-search-form-btn" /> <template #dropdown>
<template #dropdown> <el-dropdown-menu>
<el-dropdown-menu> <el-dropdown-item v-for="searchItem in searchItems" :key="searchItem.prop" @click="changeSimpleFormItem(searchItem)">
<el-dropdown-item {{ $t(searchItem.label) }}
v-for="searchItem in searchItems" </el-dropdown-item>
:key="searchItem.prop" </el-dropdown-menu>
@click="changeSimpleFormItem(searchItem)" </template>
> </el-dropdown>
{{ $t(searchItem.label) }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<div class="simple-search-form-label mt-1"> <div class="text-right mr-1.5 mt-1">
<el-text truncated tag="b">{{ `${$t(nowSearchItem?.label)} : ` }}</el-text> <el-text truncated tag="b">{{ `${$t(nowSearchItem?.label)} : ` }}</el-text>
</div>
<el-form-item style="width: 200px" :key="nowSearchItem.prop">
<SearchFormItem
@keyup.enter.native="searchFormItemKeyUpEnter"
v-if="!nowSearchItem.slot"
:item="nowSearchItem"
v-model="queryForm[nowSearchItem.prop]"
/>
<slot @keyup.enter.native="searchFormItemKeyUpEnter" v-else :name="nowSearchItem.slot"> </slot>
</el-form-item>
</div>
<div>
<el-button v-if="showToolButton('search') && searchItems?.length" icon="Search" circle @click="search" />
<!-- <el-button v-if="showToolButton('refresh')" icon="Refresh" circle @click="execQuery()" /> -->
<el-button
v-if="showToolButton('search') && searchItems?.length > 1"
:icon="isShowSearch ? 'ArrowDown' : 'ArrowUp'"
circle
@click="isShowSearch = !isShowSearch"
/>
<el-popover
placement="bottom"
title="表格配置"
popper-style="max-height: 550px; overflow: auto; max-width: 450px"
width="auto"
trigger="click"
>
<div v-for="(item, index) in tableColumns" :key="index">
<el-checkbox v-model="item.show" :label="$t(item.label)" :true-value="true" :false-value="false" />
</div>
<template #reference>
<el-button icon="Operation" circle :size="props.size"></el-button>
</template>
</el-popover>
</div>
</div> </div>
</slot>
</div>
</div>
<div class="h-[calc(100%-100px)]"> <el-form-item class="w-[200px]" :key="nowSearchItem.prop">
<el-table <SearchFormItem
ref="tableRef" @keyup.enter.native="searchFormItemKeyUpEnter"
v-bind="$attrs" v-if="!nowSearchItem.slot"
height="100%" :item="nowSearchItem"
@selection-change="handleSelectionChange" v-model="queryForm[nowSearchItem.prop]"
:data="tableData" />
highlight-current-row
v-loading="loading"
:size="props.size as any"
:border="border"
>
<el-table-column v-if="props.showSelection" :selectable="selectable" type="selection" width="40" />
<template v-for="(item, index) in tableColumns"> <slot @keyup.enter.native="searchFormItemKeyUpEnter" v-else :name="nowSearchItem.slot"> </slot>
<el-table-column </el-form-item>
:key="index" </div>
v-if="item.show"
:prop="item.prop" <div class="ml-2">
:label="$t(item.label)" <el-button v-if="showToolButton('search') && searchItems?.length" icon="Search" circle @click="search" />
:fixed="item.fixed"
:align="item.align" <!-- <el-button v-if="showToolButton('refresh')" icon="Refresh" circle @click="execQuery()" /> -->
:show-overflow-tooltip="item.showOverflowTooltip"
:min-width="item.minWidth" <el-button
:sortable="item.sortable || false" v-if="showToolButton('search') && searchItems?.length > 1"
:type="item.type" :icon="isShowSearch ? 'ArrowDown' : 'ArrowUp'"
:width="item.width" circle
@click="isShowSearch = !isShowSearch"
/>
<el-popover
placement="bottom"
title="表格配置"
popper-style="max-height: 550px; overflow: auto; max-width: 450px"
width="auto"
trigger="click"
> >
<!-- 插槽：预留功能 --> <div v-for="(item, index) in tableColumns" :key="index">
<template #default="scope" v-if="item.slot"> <el-checkbox v-model="item.show" :label="$t(item.label)" :true-value="true" :false-value="false" />
<slot :name="item.slotName ? item.slotName : item.prop" :data="scope.row"></slot> </div>
<template #reference>
<el-button icon="Operation" circle :size="props.size"></el-button>
</template> </template>
</el-popover>
<!-- 枚举类型使用tab展示 --> </div>
<template #default="scope" v-else-if="item.type == 'tag'"> </div>
<enum-tag :size="props.size" :enums="item.typeParam" :value="item.getValueByData(scope.row)"></enum-tag> </slot>
</template>
<template #default="scope" v-else>
<!-- 配置了美化文本按钮以及文本内容大于指定长度，则显示美化按钮 -->
<el-popover
v-if="item.isBeautify && item.getValueByData(scope.row)?.length > 35"
effect="light"
trigger="click"
placement="top"
width="600px"
>
<template #default>
<el-input :autosize="{ minRows: 3, maxRows: 15 }" disabled v-model="formatVal" type="textarea" />
</template>
<template #reference>
<el-link
@click="formatText(item.getValueByData(scope.row))"
:underline="false"
type="success"
icon="MagicStick"
class="mr-1"
></el-link>
</template>
</el-popover>
<span>{{ item.getValueByData(scope.row) }}</span>
</template>
</el-table-column>
</template>
</el-table>
</div>
<el-row v-if="props.pageable" class="!mt-4" type="flex" justify="end">
<el-pagination
:small="props.size == 'small'"
@current-change="pageNumChange"
@size-change="pageSizeChange"
style="text-align: right"
layout="prev, pager, next, total, sizes"
:total="total"
v-model:current-page="queryForm.pageNum"
v-model:page-size="queryForm.pageSize"
:page-sizes="pageSizes"
/>
</el-row>
</div> </div>
<!-- <el-row v-if="props.pageable" class="!mt-4" type="flex" justify="end"> <div class="h-[calc(100%-90px)]">
<el-table
ref="tableRef"
v-bind="$attrs"
height="100%"
@selection-change="handleSelectionChange"
:data="tableData"
highlight-current-row
v-loading="loading"
:size="props.size as any"
:border="border"
>
<el-table-column v-if="props.showSelection" :selectable="selectable" type="selection" width="40" />
<template v-for="(item, index) in tableColumns">
<el-table-column
:key="index"
v-if="item.show"
:prop="item.prop"
:label="$t(item.label)"
:fixed="item.fixed"
:align="item.align"
:show-overflow-tooltip="item.showOverflowTooltip"
:min-width="item.minWidth"
:sortable="item.sortable || false"
:type="item.type"
:width="item.width"
>
<!-- 插槽：预留功能 -->
<template #default="scope" v-if="item.slot">
<slot :name="item.slotName ? item.slotName : item.prop" :data="scope.row"></slot>
</template>
<!-- 枚举类型使用tab展示 -->
<template #default="scope" v-else-if="item.type == 'tag'">
<enum-tag :size="props.size" :enums="item.typeParam" :value="item.getValueByData(scope.row)"></enum-tag>
</template>
<template #default="scope" v-else>
<!-- 配置了美化文本按钮以及文本内容大于指定长度，则显示美化按钮 -->
<el-popover
v-if="item.isBeautify && item.getValueByData(scope.row)?.length > 35"
effect="light"
trigger="click"
placement="top"
width="600px"
>
<template #default>
<el-input :autosize="{ minRows: 3, maxRows: 15 }" disabled v-model="formatVal" type="textarea" />
</template>
<template #reference>
<el-link
@click="formatText(item.getValueByData(scope.row))"
:underline="false"
type="success"
icon="MagicStick"
class="mr-1"
></el-link>
</template>
</el-popover>
<span>{{ item.getValueByData(scope.row) }}</span>
</template>
</el-table-column>
</template>
</el-table>
</div>
<el-row v-if="props.pageable" class="mt-4" type="flex" justify="end">
<el-pagination <el-pagination
:small="props.size == 'small'" :small="props.size == 'small'"
@current-change="pageNumChange" @current-change="pageNumChange"
@@ -181,7 +159,7 @@
v-model:page-size="queryForm.pageSize" v-model:page-size="queryForm.pageSize"
:page-sizes="pageSizes" :page-sizes="pageSizes"
/> />
</el-row> --> </el-row>
</el-card> </el-card>
</div> </div>
</template> </template>
@@ -192,7 +170,6 @@ import { TableColumn } from './index';
import EnumTag from '@/components/enumtag/EnumTag.vue'; import EnumTag from '@/components/enumtag/EnumTag.vue';
import { useThemeConfig } from '@/store/themeConfig'; import { useThemeConfig } from '@/store/themeConfig';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useEventListener } from '@vueuse/core';
import Api from '@/common/Api'; import Api from '@/common/Api';
import SearchForm from '@/components/SearchForm/index.vue'; import SearchForm from '@/components/SearchForm/index.vue';
import { SearchItem } from '../SearchForm/index'; import { SearchItem } from '../SearchForm/index';
@@ -294,10 +271,9 @@ const state = reactive({
pageSizes: [] as any, // 可选每页显示的数据量 pageSizes: [] as any, // 可选每页显示的数据量
// 输入框宽度 // 输入框宽度
formatVal: '', // 格式化后的值 formatVal: '', // 格式化后的值
tableMaxHeight: '500px',
}); });
const { pageSizes, formatVal, tableMaxHeight } = toRefs(state); const { pageSizes, formatVal } = toRefs(state);
watch(tableData, (newValue: any) => { watch(tableData, (newValue: any) => {
if (newValue && newValue.length > 0) { if (newValue && newValue.length > 0) {
@@ -309,10 +285,6 @@ watch(tableData, (newValue: any) => {
} }
}); });
watch(isShowSearch, () => {
calcuTableHeight();
});
watch( watch(
() => props.data, () => props.data,
(newValue: any) => { (newValue: any) => {
@@ -321,9 +293,6 @@ watch(
); );
onMounted(async () => { onMounted(async () => {
calcuTableHeight();
useEventListener(window, 'resize', calcuTableHeight);
if (props.searchItems.length > 0) { if (props.searchItems.length > 0) {
nowSearchItem.value = props.searchItems[0]; nowSearchItem.value = props.searchItems[0];
} }
@@ -347,11 +316,6 @@ onMounted(async () => {
} }
}); });
const calcuTableHeight = () => {
const headerHeight = isShowSearch.value ? 330 : 250;
state.tableMaxHeight = window.innerHeight - headerHeight + 'px';
};
const searchFormItemKeyUpEnter = (event: any) => { const searchFormItemKeyUpEnter = (event: any) => {
event.preventDefault(); event.preventDefault();
search(); search();
@@ -381,80 +345,4 @@ defineExpose({
total, total,
}); });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss"></style>
.table-box,
.table-main {
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
height: 100%;
// 表格 header 样式
.table-header {
width: 100%;
.header-button-lf {
float: left;
}
.header-button-ri {
float: right;
.tool-button {
display: flex;
justify-content: space-between;
}
.simple-search-form {
margin-right: 10px;
display: flex;
justify-content: space-between;
::v-deep(.el-form-item__content > *) {
width: 100% !important;
}
.simple-search-form-label {
text-align: right;
margin-right: 5px;
}
.simple-search-form-btn:hover {
color: var(--el-color-primary);
}
}
}
.el-button {
margin-bottom: 10px;
}
}
// el-table 表格样式
.el-table {
flex: 1;
// 修复 safari 浏览器表格错位 https://github.com/HalseySpicy/Geeker-Admin/issues/83
table {
width: 100%;
}
// 设置 el-table 中 header 文字不换行，并省略
.el-table__header .el-table__cell > .cell {
white-space: wrap;
}
// table 中 image 图片样式
.table-image {
width: 50px;
height: 50px;
border-radius: 50%;
}
}
::v-deep(.el-form-item__label) {
font-weight: bold;
}
}
</style>

9
frontend/src/layout/component/main.vue
View File

@@ -33,7 +33,6 @@ const { proxy } = getCurrentInstance() as any;
const { themeConfig } = storeToRefs(useThemeConfig()); const { themeConfig } = storeToRefs(useThemeConfig());
const route = useRoute(); const route = useRoute();
const state = reactive({ const state = reactive({
headerHeight: '',
currentRouteMeta: {} as any, currentRouteMeta: {} as any,
isShowLink: false, isShowLink: false,
}); });
@@ -50,20 +49,12 @@ const initCurrentRouteMeta = (meta: object) => {
state.isShowLink = true; state.isShowLink = true;
}, 100); }, 100);
}; };
// 设置 main 的高度
const initHeaderHeight = () => {
let { isTagsview } = themeConfig.value;
if (isTagsview) return (state.headerHeight = `77px`);
else return (state.headerHeight = `50px`);
};
// 页面加载前 // 页面加载前
onBeforeMount(() => { onBeforeMount(() => {
initCurrentRouteMeta(route.meta); initCurrentRouteMeta(route.meta);
initHeaderHeight();
}); });
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度 // 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(themeConfig.value, (val) => { watch(themeConfig.value, (val) => {
state.headerHeight = val.isTagsview ? '77px' : '50px';
if (val.isFixedHeaderChange !== val.isFixedHeader) { if (val.isFixedHeaderChange !== val.isFixedHeader) {
if (!proxy.$refs.layoutScrollbarRef) return false; if (!proxy.$refs.layoutScrollbarRef) return false;
proxy.$refs.layoutScrollbarRef.update(); proxy.$refs.layoutScrollbarRef.update();

8
frontend/src/layout/main/columns.vue
View File

@@ -5,10 +5,10 @@
<Aside /> <Aside />
<el-container class="flex-center layout-backtop"> <el-container class="flex-center layout-backtop">
<Header v-if="isFixedHeader" /> <Header v-if="isFixedHeader" />
<el-scrollbar> <!-- <el-scrollbar> -->
<Header v-if="!isFixedHeader" /> <Header v-if="!isFixedHeader" />
<Main /> <Main />
</el-scrollbar> <!-- </el-scrollbar> -->
</el-container> </el-container>
</div> </div>
<el-backtop target=".layout-backtop .el-scrollbar__wrap"></el-backtop> <el-backtop target=".layout-backtop .el-scrollbar__wrap"></el-backtop>

8
frontend/src/layout/main/defaults.vue
View File

@@ -3,10 +3,10 @@
<Aside /> <Aside />
<el-container class="flex-center layout-backtop"> <el-container class="flex-center layout-backtop">
<Header v-if="isFixedHeader" /> <Header v-if="isFixedHeader" />
<el-scrollbar ref="layoutDefaultsScrollbarRef"> <!-- <el-scrollbar view-class="!h-full" ref="layoutDefaultsScrollbarRef"> -->
<Header v-if="!isFixedHeader" /> <Header v-if="!isFixedHeader" />
<Main /> <Main />
</el-scrollbar> <!-- </el-scrollbar> -->
</el-container> </el-container>
<el-backtop target=".layout-backtop .el-scrollbar__wrap"></el-backtop> <el-backtop target=".layout-backtop .el-scrollbar__wrap"></el-backtop>
</el-container> </el-container>

37
frontend/src/views/ops/component/TagTree.vue
View File

@@ -1,8 +1,9 @@
<template> <template>
<div class="card !p-1"> <el-card class="h-full flex" body-class="!p-1 flex flex-col flex-1 overflow-auto">
<el-input v-model="filterText" :placeholder="$t('tag.tagFilterPlaceholder')" clearable size="small" class="!mb-1 w-full" /> <el-input v-model="filterText" :placeholder="$t('tag.tagFilterPlaceholder')" clearable size="small" class="!mb-1 w-full" />
<el-scrollbar class="tag-tree"> <el-scrollbar>
<el-tree <el-tree
class="min-w-full inline-block"
ref="treeRef" ref="treeRef"
:highlight-current="true" :highlight-current="true"
:indent="10" :indent="10"
@@ -21,7 +22,7 @@
<span <span
:id="node.key" :id="node.key"
@dblclick="treeNodeDblclick(data, node)" @dblclick="treeNodeDblclick(data, node)"
class="node-container none-select" class="node-container flex items-center w-full cursor-pointer none-select"
:class="data.type.nodeDblclickFunc ? 'none-select' : ''" :class="data.type.nodeDblclickFunc ? 'none-select' : ''"
> >
<span v-if="data.type.value == TagTreeNode.TagPath"> <span v-if="data.type.value == TagTreeNode.TagPath">
@@ -40,7 +41,7 @@
</slot> </slot>
</span> </span>
<span class="label-suffix"> <span class="absolute right-2.5 mt-0.5 text-[10px] text-gray-400">
<slot :node="node" :data="data" name="suffix"></slot> <slot :node="node" :data="data" name="suffix"></slot>
</span> </span>
</span> </span>
@@ -49,7 +50,7 @@
<contextmenu :dropdown="state.dropdown" :items="state.contextmenuItems" ref="contextmenuRef" @currentContextmenuClick="onCurrentContextmenuClick" /> <contextmenu :dropdown="state.dropdown" :items="state.contextmenuItems" ref="contextmenuRef" @currentContextmenuClick="onCurrentContextmenuClick" />
</el-scrollbar> </el-scrollbar>
</div> </el-card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@@ -240,28 +241,4 @@ defineExpose({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
.tag-tree {
height: calc(100vh - 143px);
.el-tree {
display: inline-block;
min-width: 100%;
}
.label-suffix {
position: absolute;
right: 10px;
color: #c4c9c4;
font-size: 10px;
margin-top: 2px;
}
.node-container {
display: flex;
align-items: center;
width: 100%; // 确保容器宽度占满整个节点区域
cursor: pointer; // 添加鼠标指针样式
}
}
</style>

3
frontend/src/views/ops/db/DbList.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="db-list h-full"> <div class="db-list">
<el-drawer <el-drawer
:title="title" :title="title"
v-model="dialogVisible" v-model="dialogVisible"
@@ -153,6 +153,7 @@
:close-on-click-modal="false" :close-on-click-modal="false"
v-model="sqlExecLogDialog.visible" v-model="sqlExecLogDialog.visible"
:destroy-on-close="true" :destroy-on-close="true"
body-class="h-250"
> >
<db-sql-exec-log :db-id="sqlExecLogDialog.dbId" :dbs="sqlExecLogDialog.dbs" /> <db-sql-exec-log :db-id="sqlExecLogDialog.dbId" :dbs="sqlExecLogDialog.dbs" />
</el-dialog> </el-dialog>

2
frontend/src/views/ops/db/DbSqlExecLog.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="db-sql-exec-log"> <div class="db-sql-exec-log h-full">
<page-table <page-table
ref="pageTableRef" ref="pageTableRef"
:page-api="dbApi.getSqlExecs" :page-api="dbApi.getSqlExecs"

25
frontend/src/views/ops/db/SqlExec.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="db-sql-exec"> <div class="db-sql-exec h-full">
<ResourceOpPanel> <ResourceOpPanel>
<template #left> <template #left>
<tag-tree <tag-tree
@@ -54,7 +54,7 @@
</template> </template>
<template #right> <template #right>
<div class="card db-op !p-1"> <el-card class="h-full" body-class="h-full !p-1 flex flex-col flex-1">
<el-row> <el-row>
<el-col :span="24" v-if="state.db"> <el-col :span="24" v-if="state.db">
<el-descriptions :column="4" size="small" border> <el-descriptions :column="4" size="small" border>
@@ -151,9 +151,8 @@
type="card" type="card"
@tab-remove="onRemoveTab" @tab-remove="onRemoveTab"
@tab-change="onTabChange" @tab-change="onTabChange"
style="width: 100%"
v-model="state.activeName" v-model="state.activeName"
class="!h-full" class="!h-full w-full"
> >
<el-tab-pane class="!h-full" closable v-for="dt in state.tabs.values()" :label="dt.label" :name="dt.key" :key="dt.key"> <el-tab-pane class="!h-full" closable v-for="dt in state.tabs.values()" :label="dt.label" :name="dt.key" :key="dt.key">
<template #label> <template #label>
@@ -210,7 +209,7 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</div> </el-card>
</template> </template>
</ResourceOpPanel> </ResourceOpPanel>
@@ -980,18 +979,14 @@ const getNowDbInfo = () => {
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.db-sql-exec { .db-sql-exec {
.db-op {
height: calc(100vh - 106px);
}
#data-exec { #data-exec {
.el-tabs { ::v-deep(.el-tabs) {
--el-tabs-header-height: 30px; --el-tabs-header-height: 30px;
} }
.el-tabs__header { ::v-deep(.el-tabs__header) {
margin: 0 0 5px; margin: 0 0 5px;
.el-tabs__item { .el-tabs__item {
@@ -999,8 +994,10 @@ const getNowDbInfo = () => {
} }
} }
.el-tabs__nav-next, ::v-deep(.el-tabs__nav-next) {
.el-tabs__nav-prev { line-height: 30px;
}
::v-deep(.el-tabs__nav-prev) {
line-height: 30px; line-height: 30px;
} }
} }

12
frontend/src/views/ops/db/component/table/DbTableData.vue
View File

@@ -4,7 +4,7 @@
<template #default="{ height, width }"> <template #default="{ height, width }">
<el-table-v2 <el-table-v2
ref="tableRef" ref="tableRef"
:header-height="showColumnTip && dbConfig.showColumnComment ? 45 : 30" :header-height="showColumnTip && dbConfig.showColumnComment ? 48 : 30"
:row-height="30" :row-height="30"
:row-class="rowClass" :row-class="rowClass"
:row-key="null" :row-key="null"
@@ -50,13 +50,13 @@
</div> </div>
<!-- 字段备注信息 --> <!-- 字段备注信息 -->
<span <div
v-if="dbConfig.showColumnComment" v-if="dbConfig.showColumnComment"
style="color: var(--el-color-info-light-3)" style="color: var(--el-color-info-light-3)"
class="!text-[10px] el-text el-text--small is-truncated" class="!text-[10px] el-text el-text--small is-truncated"
> >
{{ column.columnComment }} {{ column.columnComment }}
</span> </div>
</div> </div>
<div v-else class="header-column-title"> <div v-else class="header-column-title">
@@ -107,7 +107,7 @@
</template> </template>
<template v-if="state.loading" #overlay> <template v-if="state.loading" #overlay>
<div class="el-loading-mask" style="display: flex; flex-direction: column; align-items: center; justify-content: center"> <div class="el-loading-mask flex flex-col items-center justify-center">
<div> <div>
<SvgIcon class="is-loading" name="loading" color="var(--el-color-primary)" :size="28" /> <SvgIcon class="is-loading" name="loading" color="var(--el-color-primary)" :size="28" />
<el-text class="ml-1" tag="b">{{ $t('db.execTime') }} - {{ state.execTime.toFixed(1) }}s</el-text> <el-text class="ml-1" tag="b">{{ $t('db.execTime') }} - {{ state.execTime.toFixed(1) }}s</el-text>
@@ -119,9 +119,7 @@
</template> </template>
<template #empty> <template #empty>
<div style="text-align: center"> <el-empty class="text-center" :description="props.emptyText" :image-size="60" />
<el-empty :description="props.emptyText" :image-size="100" />
</div>
</template> </template>
</el-table-v2> </el-table-v2>
</template> </template>

16
frontend/src/views/ops/machine/MachineOp.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="flex-all-center"> <div class="flex-all-center h-full">
<ResourceOpPanel @resized="onResizeTagTree"> <ResourceOpPanel @resized="onResizeTagTree">
<template #left> <template #left>
<tag-tree <tag-tree
@@ -32,15 +32,8 @@
</template> </template>
<template #right> <template #right>
<div class="machine-terminal-tabs card !p-1"> <el-card class="h-full" body-class="machine-terminal-tabs h-full !p-1 flex flex-col flex-1">
<el-tabs <el-tabs v-if="state.tabs.size > 0" type="card" @tab-remove="onRemoveTab" v-model="state.activeTermName" class="!h-full w-full">
v-if="state.tabs.size > 0"
type="card"
@tab-remove="onRemoveTab"
style="width: 100%"
v-model="state.activeTermName"
class="!h-full"
>
<el-tab-pane class="!h-full" closable v-for="dt in state.tabs.values()" :label="dt.label" :name="dt.key" :key="dt.key"> <el-tab-pane class="!h-full" closable v-for="dt in state.tabs.values()" :label="dt.label" :name="dt.key" :key="dt.key">
<template #label> <template #label>
<el-popconfirm @confirm="handleReconnect(dt, true)" :title="$t('machine.reConnTips')"> <el-popconfirm @confirm="handleReconnect(dt, true)" :title="$t('machine.reConnTips')">
@@ -162,7 +155,7 @@
<machine-stats v-model:visible="machineStatsDialog.visible" :machineId="machineStatsDialog.machineId" :title="machineStatsDialog.title" /> <machine-stats v-model:visible="machineStatsDialog.visible" :machineId="machineStatsDialog.machineId" :title="machineStatsDialog.title" />
<machine-rec v-model:visible="machineRecDialog.visible" :machineId="machineRecDialog.machineId" :title="machineRecDialog.title" /> <machine-rec v-model:visible="machineRecDialog.visible" :machineId="machineRecDialog.machineId" :title="machineRecDialog.title" />
</div> </el-card>
</template> </template>
</ResourceOpPanel> </ResourceOpPanel>
</div> </div>
@@ -584,7 +577,6 @@ const handleReconnect = (tab: any, force = false) => {
<style lang="scss"> <style lang="scss">
.machine-terminal-tabs { .machine-terminal-tabs {
height: calc(100vh - 108px);
--el-tabs-header-height: 30px; --el-tabs-header-height: 30px;
.el-tabs { .el-tabs {

1
frontend/src/views/ops/machine/cronjob/CronJobExecList.vue
View File

@@ -9,6 +9,7 @@
:show-close="true" :show-close="true"
:destroy-on-close="true" :destroy-on-close="true"
width="65%" width="65%"
body-class="h-200"
> >
<page-table <page-table
ref="pageTableRef" ref="pageTableRef"

10
frontend/src/views/ops/mongo/MongoDataOp.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="flex-all-center"> <div class="flex-all-center h-full">
<ResourceOpPanel> <ResourceOpPanel>
<template #left> <template #left>
<tag-tree <tag-tree
@@ -43,7 +43,7 @@
</template> </template>
<template #right> <template #right>
<div class="mongo-data-tab card !p-1 !w-full"> <div class="mongo-data-tab card h-full !p-1 w-full">
<el-row v-if="nowColl"> <el-row v-if="nowColl">
<el-descriptions class="!w-full" :column="10" size="small" border> <el-descriptions class="!w-full" :column="10" size="small" border>
<!-- <el-descriptions-item label-align="right" label="tag">xxx</el-descriptions-item> --> <!-- <el-descriptions-item label-align="right" label="tag">xxx</el-descriptions-item> -->
@@ -546,12 +546,6 @@ const getNowDataTab = () => {
} }
.mongo-data-tab { .mongo-data-tab {
height: calc(100vh - 108px);
}
.mongo-data-tab {
margin-top: 1px;
.mongo-data-tab-data { .mongo-data-tab-data {
height: calc(100vh - 230px); height: calc(100vh - 230px);
} }

13
frontend/src/views/ops/redis/DataOperation.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="redis-data-op flex-all-center"> <div class="redis-data-op flex-all-center h-full">
<ResourceOpPanel> <ResourceOpPanel>
<template #left> <template #left>
<tag-tree <tag-tree
@@ -45,7 +45,7 @@
<template #right> <template #right>
<Splitpanes class="default-theme"> <Splitpanes class="default-theme">
<Pane size="35" max-size="50"> <Pane size="35" max-size="50">
<div class="key-list-vtree card !p-1"> <div class="key-list-vtree h-full card !p-1">
<el-scrollbar> <el-scrollbar>
<el-row :gutter="5"> <el-row :gutter="5">
<el-col :span="2"> <el-col :span="2">
@@ -144,7 +144,7 @@
</Pane> </Pane>
<Pane> <Pane>
<div class="key-detail card !p-1"> <div class="h-full card !p-1">
<el-tabs @tab-remove="removeDataTab" v-model="state.activeName"> <el-tabs @tab-remove="removeDataTab" v-model="state.activeName">
<el-tab-pane closable v-for="dt in state.dataTabs" :key="dt.key" :label="dt.label" :name="dt.key"> <el-tab-pane closable v-for="dt in state.dataTabs" :key="dt.key" :label="dt.label" :name="dt.key">
<key-detail :redis="redisInst" :key-info="dt.keyInfo" @change-key="searchKey()" @del-key="delKey" /> <key-detail :redis="redisInst" :key-info="dt.keyInfo" @change-key="searchKey()" @del-key="delKey" />
@@ -613,13 +613,8 @@ const delKey = async (key: string) => {
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.redis-data-op { .redis-data-op {
.key-list-vtree,
.key-detail {
height: calc(100vh - 108px);
}
.key-list-vtree .folder-label { .key-list-vtree .folder-label {
font-weight: bold; font-weight: bold;
} }