zishuo/1Panel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 修改页面二级导航栏样式

Browse Source
This commit is contained in:
ssongliu
2023-01-31 23:28:37 +08:00
parent e83bc0b675
commit d9a0ea1fe7
37 changed files with 844 additions and 833 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/lang/modules/en.ts
View File

@@ -364,6 +364,7 @@ export default {
rdbInfo: 'Rule list has 0 value, please confirm and try again!',
},
container: {
createContainer: 'Create container',
containerList: 'Container list',
operatorHelper: '{0} will be performed on the selected container. Do you want to continue?',
start: 'Start',
@@ -387,7 +388,6 @@ export default {
emptyUser: 'When empty, you will log in with the default user of container',
containerTerminal: 'Container terminal',
containerCreate: 'Container create',
port: 'Port',
exposePort: 'Expose port',
exposeAll: 'Expose all',
@@ -454,6 +454,7 @@ export default {
createVolume: 'Create volume',
repo: 'Repo',
createRepo: 'Create repo',
name: 'Name',
protocol: 'protocol',
httpRepo: 'The http repository needs to restart the docker service to add credit',
@@ -467,7 +468,9 @@ export default {
registrieHelper: 'One in a row, for example:\n172.16.10.111:8081 \n172.16.10.112:8081',
compose: 'Compose',
createCompose: 'Create compose',
composeTemplate: 'Compose template',
createComposeTemplate: 'Create compose template',
description: 'Description',
content: 'Content',
containerNumber: 'Container number',
@@ -773,6 +776,7 @@ export default {
upgradeNotes: 'Release note',
upgradeNow: 'Upgrade now',
monitor: 'Monitor',
enableMonitor: 'Enable',
storeDays: 'Expiration time (day)',
cleanMonitor: 'Clearing monitoring records',

10
frontend/src/lang/modules/zh.ts
View File

@@ -4,7 +4,7 @@ export default {
false: '否',
example: '例如：',
button: {
create: '新建',
create: '创建',
add: '添加',
save: '保存',
set: '设置',
@@ -381,6 +381,7 @@ export default {
rdbInfo: '规则列表存在 0 值，请确认后重试！',
},
container: {
createContainer: '创建容器',
containerList: '容器列表',
operatorHelper: '将对选中容器进行 {0} 操作，是否继续？',
start: '启动',
@@ -404,7 +405,6 @@ export default {
containerTerminal: '容器终端',
emptyUser: '为空时，将使用容器默认的用户登录',
containerCreate: '容器创建',
port: '端口',
exposePort: '暴露端口',
exposeAll: '暴露所有',
@@ -462,7 +462,7 @@ export default {
imageNameHelper: '镜像名称及 Tag，例：nginx:latest',
network: '网络',
createNetwork: '添加网络',
createNetwork: '创建网络',
networkName: '网络名',
driver: '模式',
option: '参数',
@@ -477,6 +477,7 @@ export default {
createVolume: '创建存储卷',
repo: '仓库',
createRepo: '创建仓库',
name: '名称',
protocol: '协议',
downloadUrl: '下载地址',
@@ -487,7 +488,9 @@ export default {
registrieHelper: '一行一个，例：\n172.16.10.111:8081 \n172.16.10.112:8081',
compose: '编排',
createCompose: '创建编排',
composeTemplate: '编排模版',
createComposeTemplate: '创建编排模版',
description: '描述',
content: '内容',
containerNumber: '容器数量',
@@ -788,6 +791,7 @@ export default {
mfaHelper2: '使用手机应用扫描以下二维码，获取 6 位验证码',
mfaHelper3: '输入手机应用上的 6 位数字',
monitor: '监控',
enableMonitor: '监控状态',
storeDays: '过期时间 (天)',
cleanMonitor: '清空监控记录',

13
frontend/src/routers/modules/container.ts
View File

@@ -4,14 +4,21 @@ const containerRouter = {
sort: 5,
path: '/containers',
component: Layout,
redirect: '/containers',
redirect: '/containers/container',
meta: {
icon: 'p-docker',
title: 'menu.container',
},
children: [
{
path: '',
path: '/containers',
name: 'Containers',
redirect: '/containers/container',
component: () => import('@/views/container/index.vue'),
meta: {},
children: [
{
path: 'container',
name: 'Container',
component: () => import('@/views/container/container/index.vue'),
props: true,
@@ -94,6 +101,8 @@ const containerRouter = {
},
},
],
},
],
};
export default containerRouter;

13
frontend/src/routers/modules/database.ts
View File

@@ -4,14 +4,21 @@ const databaseRouter = {
sort: 4,
path: '/databases',
component: Layout,
redirect: '/databases',
redirect: '/databases/mysql',
meta: {
icon: 'p-database',
title: 'menu.database',
},
children: [
{
path: '',
path: '/databases',
name: 'Databases',
redirect: '/databases/mysql',
component: () => import('@/views/database/index.vue'),
meta: {},
children: [
{
path: 'mysql',
name: 'Mysql',
component: () => import('@/views/database/mysql/index.vue'),
hidden: true,
@@ -29,6 +36,8 @@ const databaseRouter = {
},
},
],
},
],
};
export default databaseRouter;

13
frontend/src/routers/modules/log.ts
View File

@@ -4,14 +4,21 @@ const logsRouter = {
sort: 7,
path: '/logs',
component: Layout,
redirect: '/logs',
redirect: '/logs/operation',
meta: {
title: 'menu.logs',
icon: 'p-log',
},
children: [
{
path: '',
path: '/logs',
name: 'Log',
redirect: '/logs/operation',
component: () => import('@/views/log/index.vue'),
meta: {},
children: [
{
path: 'operation',
name: 'OperationLog',
component: () => import('@/views/log/operation/index.vue'),
hidden: true,
@@ -38,6 +45,8 @@ const logsRouter = {
},
},
],
},
],
};
export default logsRouter;

39
frontend/src/routers/modules/setting.ts
View File

@@ -4,83 +4,92 @@ const settingRouter = {
sort: 8,
path: '/settings',
component: Layout,
redirect: '/setting',
redirect: '/settings/panel',
meta: {
title: 'menu.settings',
icon: 'p-config',
},
children: [
{
path: '/setting',
path: '/settings',
name: 'Setting',
redirect: '/settings/panel',
component: () => import('@/views/setting/index.vue'),
meta: {},
children: [
{
path: 'panel',
name: 'Panel',
component: () => import('@/views/setting/panel/index.vue'),
hidden: true,
meta: {
requiresAuth: true,
key: 'Setting',
activeMenu: 'Setting',
},
},
{
path: '/setting/backupaccount',
path: 'backupaccount',
name: 'BackupAccount',
component: () => import('@/views/setting/backup-account/index.vue'),
hidden: true,
meta: {
requiresAuth: true,
key: 'Setting',
activeMenu: 'Setting',
},
},
{
path: '/setting/about',
path: 'about',
name: 'About',
component: () => import('@/views/setting/about/index.vue'),
hidden: true,
meta: {
requiresAuth: true,
key: 'Setting',
activeMenu: 'Setting',
},
},
{
path: '/setting/monitor',
path: 'monitor',
name: 'Monitor',
component: () => import('@/views/setting/monitor/index.vue'),
hidden: true,
meta: {
requiresAuth: true,
key: 'Setting',
activeMenu: 'Setting',
},
},
{
path: '/setting/safe',
path: 'safe',
name: 'Safe',
component: () => import('@/views/setting/safe/index.vue'),
hidden: true,
meta: {
requiresAuth: true,
key: 'Setting',
activeMenu: 'Setting',
},
},
{
path: '/setting/snapshot',
path: 'snapshot',
name: 'Snapshot',
hidden: true,
component: () => import('@/views/setting/snapshot/index.vue'),
meta: {
requiresAuth: true,
key: 'Setting',
activeMenu: 'Setting',
},
},
{
path: '/expired',
path: 'expired',
name: 'Expired',
hidden: true,
component: () => import('@/views/setting/expired.vue'),
meta: {
requiresAuth: true,
key: 'Expired',
activeMenu: 'Expired',
},
},
],
},
],
};
export default settingRouter;

2
frontend/src/views/app-store/apps/index.vue
View File

@@ -33,7 +33,7 @@
</el-row>
</template>
<template #rightButton>
<el-button @click="sync" type="text" :plain="true">{{ $t('app.syncAppList') }}</el-button>
<el-button @click="sync" link :plain="true">{{ $t('app.syncAppList') }}</el-button>
</template>
<template #main>
<el-row :gutter="5">

1
frontend/src/views/app-store/index.vue
View File

@@ -11,7 +11,6 @@
import LayoutContent from '@/layout/layout-content.vue';
import RouterButton from '@/components/router-button/index.vue';
import i18n from '@/lang';
const buttons = [
{
label: i18n.global.t('app.all'),

25
frontend/src/views/container/compose/index.vue
View File

@@ -1,7 +1,5 @@
<template>
<div v-loading="loading">
<Submenu activeName="compose" />
<div v-show="isOnDetail">
<ComposeDetial @back="backList" ref="composeDetailRef" />
</div>
@@ -12,19 +10,25 @@
</el-button>
<span style="font-size: 14px">{{ $t('container.startIn') }}</span>
</el-card>
<el-card v-if="!isOnDetail" style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
<LayoutContent :header="$t('container.compose')">
<LayoutContent
v-loading="loading"
v-if="!isOnDetail"
:title="$t('container.compose')"
:class="{ mask: dockerStatus != 'Running' }"
>
<template #toolbar>
<el-button type="primary" @click="onOpenDialog()">
{{ $t('container.createCompose') }}
</el-button>
</template>
<template #main>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
:data="data"
@search="search"
>
<template #toolbar>
<el-button icon="Plus" type="primary" @click="onOpenDialog()">
{{ $t('commons.button.create') }}
</el-button>
</template>
<el-table-column
:label="$t('commons.table.name')"
show-overflow-tooltip
@@ -57,8 +61,8 @@
fix
/>
</ComplexTable>
</template>
</LayoutContent>
</el-card>
<EditDialog ref="dialogEditRef" />
<CreateDialog @search="search" ref="dialogRef" />
@@ -72,7 +76,6 @@ import LayoutContent from '@/layout/layout-content.vue';
import EditDialog from '@/views/container/compose/edit/index.vue';
import CreateDialog from '@/views/container/compose/create/index.vue';
import ComposeDetial from '@/views/container/compose/detail/index.vue';
import Submenu from '@/views/container/index.vue';
import { composeOperator, loadDockerStatus, searchCompose } from '@/api/modules/container';
import i18n from '@/lang';
import { ElMessage } from 'element-plus';

2
frontend/src/views/container/container/create/index.vue
View File

@@ -2,7 +2,7 @@
<el-drawer v-model="createVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<template #header>
<div class="card-header">
<span>{{ $t('container.containerCreate') }}</span>
<span>{{ $t('container.createContainer') }}</span>
</div>
</template>
<el-form ref="formRef" v-loading="loading" :model="form" :rules="rules" label-width="80px">

46
frontend/src/views/container/container/index.vue
View File

@@ -1,6 +1,5 @@
<template>
<div>
<Submenu activeName="container" />
<el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
<span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
<el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
@@ -8,17 +7,14 @@
</el-button>
<span style="font-size: 14px">{{ $t('container.startIn') }}</span>
</el-card>
<el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
<LayoutContent :header="$t('container.container')">
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
:data="data"
@search="search"
<LayoutContent
v-loading="loading"
:title="$t('container.container')"
:class="{ mask: dockerStatus != 'Running' }"
>
<template #toolbar>
<el-button icon="Plus" type="primary" @click="onCreate()">
{{ $t('commons.button.create') }}
<el-button type="primary" @click="onCreate()">
{{ $t('container.createContainer') }}
</el-button>
<el-button-group style="margin-left: 10px">
<el-button :disabled="checkStatus('start')" @click="onOperate('start')">
@@ -44,11 +40,18 @@
</el-button>
</el-button-group>
</template>
<template #main>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
:data="data"
@search="search"
>
<el-table-column type="selection" fix />
<el-table-column
:label="$t('commons.table.name')"
show-overflow-tooltip
min-width="100"
min-width="80"
prop="name"
fix
>
@@ -59,7 +62,7 @@
<el-table-column
:label="$t('container.image')"
show-overflow-tooltip
min-width="100"
min-width="80"
prop="imageName"
/>
<el-table-column :label="$t('commons.table.status')" min-width="50" prop="state" fix>
@@ -67,7 +70,7 @@
<Status :key="row.state" :status="row.state"></Status>
</template>
</el-table-column>
<el-table-column :label="$t('container.upTime')" min-width="100" prop="runTime" fix />
<el-table-column :label="$t('container.upTime')" min-width="80" prop="runTime" fix />
<el-table-column
prop="createTime"
:label="$t('commons.table.date')"
@@ -75,15 +78,15 @@
show-overflow-tooltip
/>
<fu-table-operations
width="200px"
width="220px"
:ellipsis="10"
:buttons="buttons"
:label="$t('commons.table.operate')"
fix
/>
</ComplexTable>
</template>
</LayoutContent>
</el-card>
<CodemirrorDialog ref="mydetail" />
@@ -105,7 +108,6 @@ import ContainerLogDialog from '@/views/container/container/log/index.vue';
import TerminalDialog from '@/views/container/container/terminal/index.vue';
import CodemirrorDialog from '@/components/codemirror-dialog/codemirror.vue';
import Status from '@/components/status/index.vue';
import Submenu from '@/views/container/index.vue';
import { reactive, onMounted, ref } from 'vue';
import { dateFormat } from '@/utils/util';
import { ContainerOperator, inspect, loadDockerStatus, searchContainer } from '@/api/modules/container';
@@ -114,6 +116,7 @@ import { ElMessage, ElMessageBox } from 'element-plus';
import i18n from '@/lang';
import router from '@/routers';
const loading = ref();
const data = ref();
const selects = ref<any>([]);
const paginationConfig = reactive({
@@ -154,9 +157,15 @@ const search = async () => {
pageSize: paginationConfig.pageSize,
filters: filterItem,
};
await searchContainer(params).then((res) => {
loading.value = true;
await searchContainer(params)
.then((res) => {
loading.value = false;
data.value = res.data.items || [];
paginationConfig.total = res.data.total;
})
.catch(() => {
loading.value = false;
});
};
@@ -239,12 +248,15 @@ const onOperate = async (operation: string) => {
};
ps.push(ContainerOperator(param));
}
loading.value = true;
Promise.all(ps)
.then(() => {
loading.value = false;
search();
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
})
.catch(() => {
loading.value = false;
search();
});
});

11
frontend/src/views/container/image/index.vue
View File

@@ -1,6 +1,5 @@
<template>
<div v-loading="loading">
<Submenu activeName="image" />
<el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
<span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
<el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
@@ -8,9 +7,8 @@
</el-button>
<span style="font-size: 14px">{{ $t('container.startIn') }}</span>
</el-card>
<el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
<LayoutContent :header="$t('container.image')">
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<LayoutContent v-loading="loading" :title="$t('container.image')" :class="{ mask: dockerStatus != 'Running' }">
<template #toolbar>
<el-button @click="onOpenPull">
{{ $t('container.imagePull') }}
@@ -22,6 +20,8 @@
{{ $t('container.build') }}
</el-button>
</template>
<template #main>
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<el-table-column label="ID" show-overflow-tooltip prop="id" min-width="60" />
<el-table-column :label="$t('container.tag')" prop="tags" min-width="160" fix>
<template #default="{ row }">
@@ -43,8 +43,8 @@
:label="$t('commons.table.operate')"
/>
</ComplexTable>
</template>
</LayoutContent>
</el-card>
<Pull ref="dialogPullRef" @search="search" />
<Tag ref="dialogTagRef" @search="search" />
@@ -82,7 +82,6 @@
import ComplexTable from '@/components/complex-table/index.vue';
import { reactive, onMounted, ref } from 'vue';
import { dateFormatSimple } from '@/utils/util';
import Submenu from '@/views/container/index.vue';
import { Container } from '@/api/interface/container';
import LayoutContent from '@/layout/layout-content.vue';
import Pull from '@/views/container/image/pull/index.vue';

110
frontend/src/views/container/index.vue
View File

@@ -1,77 +1,49 @@
<template>
<div>
<el-card class="topRouterCard">
<el-radio-group :model-value="props.activeName" @change="handleChange">
<el-radio-button class="topRouterButton" size="default" label="container">
{{ $t('container.container') }}
</el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="compose">
{{ $t('container.compose') }}
</el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="image">
{{ $t('container.image') }}
</el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="network">
{{ $t('container.network') }}
</el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="volume">
{{ $t('container.volume') }}
</el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="repo">
{{ $t('container.repo') }}
</el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="template">
{{ $t('container.composeTemplate') }}
</el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="setting">
{{ $t('container.setting') }}
</el-radio-button>
</el-radio-group>
</el-card>
<RouterButton :buttons="buttons" />
<LayoutContent>
<router-view></router-view>
</LayoutContent>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();
import i18n from '@/lang';
import LayoutContent from '@/layout/layout-content.vue';
import RouterButton from '@/components/router-button/index.vue';
interface MenuProps {
activeName: string;
}
const props = withDefaults(defineProps<MenuProps>(), {
activeName: 'container',
});
const routerTo = (path: string) => {
router.push({ path: path });
};
const handleChange = (val: string) => {
switch (val) {
case 'container':
routerTo('/containers');
break;
case 'compose':
routerTo('/containers/compose');
break;
case 'image':
routerTo('/containers/image');
break;
case 'network':
routerTo('/containers/network');
break;
case 'volume':
routerTo('/containers/volume');
break;
case 'repo':
routerTo('/containers/repo');
break;
case 'template':
routerTo('/containers/template');
break;
case 'setting':
routerTo('/containers/setting');
break;
}
};
const buttons = [
{
label: i18n.global.t('container.container'),
path: '/containers/container',
},
{
label: i18n.global.t('container.compose'),
path: '/containers/compose',
},
{
label: i18n.global.t('container.image'),
path: '/containers/image',
},
{
label: i18n.global.t('container.network'),
path: '/containers/network',
},
{
label: i18n.global.t('container.volume'),
path: '/containers/volume',
},
{
label: i18n.global.t('container.repo'),
path: '/containers/repo',
},
{
label: i18n.global.t('container.composeTemplate'),
path: '/containers/template',
},
{
label: i18n.global.t('container.setting'),
path: '/containers/setting',
},
];
</script>

39
frontend/src/views/container/network/index.vue
View File

@@ -1,6 +1,5 @@
<template>
<div>
<Submenu activeName="network" />
<el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
<span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
<el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
@@ -8,22 +7,27 @@
</el-button>
<span style="font-size: 14px">{{ $t('container.startIn') }}</span>
</el-card>
<el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
<LayoutContent :header="$t('container.network')">
<LayoutContent
v-loading="loading"
:title="$t('container.network')"
:class="{ mask: dockerStatus != 'Running' }"
>
<template #toolbar>
<el-button type="primary" @click="onCreate()">
{{ $t('container.createNetwork') }}
</el-button>
<el-button plain :disabled="selects.length === 0" @click="batchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<template #main>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
:data="data"
@search="search"
>
<template #toolbar>
<el-button icon="Plus" type="primary" @click="onCreate()">
{{ $t('commons.button.create') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<el-table-column type="selection" :selectable="selectable" fix />
<el-table-column
:label="$t('commons.table.name')"
@@ -67,8 +71,8 @@
/>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
</ComplexTable>
</template>
</LayoutContent>
</el-card>
<CodemirrorDialog ref="codemirror" />
<CreateDialog @search="search" ref="dialogCreateRef" />
@@ -80,7 +84,6 @@ import LayoutContent from '@/layout/layout-content.vue';
import ComplexTable from '@/components/complex-table/index.vue';
import CreateDialog from '@/views/container/network/create/index.vue';
import CodemirrorDialog from '@/components/codemirror-dialog/codemirror.vue';
import Submenu from '@/views/container/index.vue';
import { reactive, onMounted, ref } from 'vue';
import { dateFormat } from '@/utils/util';
import { deleteNetwork, searchNetwork, inspect, loadDockerStatus } from '@/api/modules/container';
@@ -89,6 +92,8 @@ import i18n from '@/lang';
import { useDeleteData } from '@/hooks/use-delete-data';
import router from '@/routers';
const loading = ref();
const detailInfo = ref();
const codemirror = ref();
@@ -130,12 +135,18 @@ const search = async () => {
page: paginationConfig.currentPage,
pageSize: paginationConfig.pageSize,
};
await searchNetwork(params).then((res) => {
loading.value = true;
await searchNetwork(params)
.then((res) => {
loading.value = false;
data.value = res.data.items || [];
for (const item of data.value) {
item.isSystem = isSystem(item.name);
}
paginationConfig.total = res.data.total;
})
.catch(() => {
loading.value = false;
});
};

34
frontend/src/views/container/repo/index.vue
View File

@@ -1,6 +1,5 @@
<template>
<div>
<Submenu activeName="repo" />
<el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
<span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
<el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
@@ -8,22 +7,23 @@
</el-button>
<span style="font-size: 14px">{{ $t('container.startIn') }}</span>
</el-card>
<el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
<LayoutContent :header="$t('container.repo')">
<LayoutContent v-loading="loading" :title="$t('container.repo')" :class="{ mask: dockerStatus != 'Running' }">
<template #toolbar>
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('container.createRepo') }}
</el-button>
<el-button plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<template #main>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
:data="data"
@search="search"
>
<template #toolbar>
<el-button icon="Plus" type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<el-table-column type="selection" :selectable="selectable" fix />
<el-table-column :label="$t('commons.table.name')" prop="name" min-width="60" />
<el-table-column
@@ -51,8 +51,8 @@
</el-table-column>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" />
</ComplexTable>
</template>
</LayoutContent>
</el-card>
<OperatorDialog @search="search" ref="dialogRef" />
<DeleteDialog @search="search" ref="dialogDeleteRef" />
</div>
@@ -63,7 +63,6 @@ import LayoutContent from '@/layout/layout-content.vue';
import ComplexTable from '@/components/complex-table/index.vue';
import OperatorDialog from '@/views/container/repo/operator/index.vue';
import DeleteDialog from '@/views/container/repo/delete/index.vue';
import Submenu from '@/views/container/index.vue';
import { reactive, onMounted, ref } from 'vue';
import { dateFormatSimple } from '@/utils/util';
import { Container } from '@/api/interface/container';
@@ -71,6 +70,7 @@ import { loadDockerStatus, searchImageRepo } from '@/api/modules/container';
import i18n from '@/lang';
import router from '@/routers';
const loading = ref();
const data = ref();
const selects = ref<any>([]);
const paginationConfig = reactive({
@@ -96,9 +96,15 @@ const search = async () => {
page: paginationConfig.currentPage,
pageSize: paginationConfig.pageSize,
};
await searchImageRepo(params).then((res) => {
loading.value = true;
await searchImageRepo(params)
.then((res) => {
loading.value = false;
data.value = res.data.items || [];
paginationConfig.total = res.data.total;
})
.catch(() => {
loading.value = false;
});
};

11
frontend/src/views/container/setting/index.vue
View File

@@ -1,6 +1,5 @@
<template>
<div v-loading="loading">
<Submenu activeName="setting" />
<div>
<div class="app-content" style="margin-top: 20px">
<el-card class="app-card">
<el-row :gutter="20">
@@ -49,8 +48,9 @@
</el-row>
</el-card>
</div>
<el-card style="margin-top: 20px">
<LayoutContent :header="$t('container.setting')">
<LayoutContent v-loading="loading" :title="$t('container.setting')" :divider="true">
<template #main>
<el-radio-group v-model="confShowType" @change="changeMode">
<el-radio-button label="base">{{ $t('database.baseConf') }}</el-radio-button>
<el-radio-button label="all">{{ $t('database.allConf') }}</el-radio-button>
@@ -114,8 +114,8 @@
{{ $t('commons.button.save') }}
</el-button>
</div>
</template>
</LayoutContent>
</el-card>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSubmitSave"></ConfirmDialog>
</div>
@@ -124,7 +124,6 @@
<script lang="ts" setup>
import { ElMessage, FormInstance } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import Submenu from '@/views/container/index.vue';
import { Codemirror } from 'vue-codemirror';
import LayoutContent from '@/layout/layout-content.vue';
import { javascript } from '@codemirror/lang-javascript';

38
frontend/src/views/container/template/index.vue
View File

@@ -1,6 +1,5 @@
<template>
<div>
<Submenu activeName="template" />
<el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
<span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
<el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
@@ -8,22 +7,27 @@
</el-button>
<span style="font-size: 14px">{{ $t('container.startIn') }}</span>
</el-card>
<el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
<LayoutContent :header="$t('container.composeTemplate')">
<LayoutContent
v-loading="loading"
:title="$t('container.composeTemplate')"
:class="{ mask: dockerStatus != 'Running' }"
>
<template #toolbar>
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('container.createComposeTemplate') }}
</el-button>
<el-button plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<template #main>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
:data="data"
@search="search"
>
<template #toolbar>
<el-button icon="Plus" type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<el-table-column type="selection" fix />
<el-table-column
:label="$t('commons.table.name')"
@@ -44,8 +48,8 @@
</el-table-column>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" />
</ComplexTable>
</template>
</LayoutContent>
</el-card>
<el-dialog v-model="detailVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="70%">
<template #header>
@@ -81,7 +85,6 @@
<script lang="ts" setup>
import LayoutContent from '@/layout/layout-content.vue';
import ComplexTable from '@/components/complex-table/index.vue';
import Submenu from '@/views/container/index.vue';
import { Codemirror } from 'vue-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark';
@@ -94,6 +97,7 @@ import { useDeleteData } from '@/hooks/use-delete-data';
import i18n from '@/lang';
import router from '@/routers';
const loading = ref();
const data = ref();
const selects = ref<any>([]);
const detailVisiable = ref(false);
@@ -123,9 +127,15 @@ const search = async () => {
page: paginationConfig.currentPage,
pageSize: paginationConfig.pageSize,
};
await searchComposeTemplate(params).then((res) => {
loading.value = true;
await searchComposeTemplate(params)
.then((res) => {
loading.value = false;
data.value = res.data.items || [];
paginationConfig.total = res.data.total;
})
.catch(() => {
loading.value = false;
});
};

34
frontend/src/views/container/volume/index.vue
View File

@@ -1,6 +1,5 @@
<template>
<div>
<Submenu activeName="volume" />
<el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
<span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
<el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
@@ -8,22 +7,23 @@
</el-button>
<span style="font-size: 14px">{{ $t('container.startIn') }}</span>
</el-card>
<el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
<LayoutContent :header="$t('container.volume')">
<LayoutContent v-loading="loading" :title="$t('container.volume')" :class="{ mask: dockerStatus != 'Running' }">
<template #toolbar>
<el-button type="primary" @click="onCreate()">
{{ $t('container.createVolume') }}
</el-button>
<el-button plain :disabled="selects.length === 0" @click="batchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<template #main>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
:data="data"
@search="search"
>
<template #toolbar>
<el-button icon="Plus" type="primary" @click="onCreate()">
{{ $t('commons.button.create') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<el-table-column type="selection" fix />
<el-table-column
:label="$t('commons.table.name')"
@@ -56,8 +56,8 @@
/>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
</ComplexTable>
</template>
</LayoutContent>
</el-card>
<CodemirrorDialog ref="codemirror" />
<CreateDialog @search="search" ref="dialogCreateRef" />
@@ -68,7 +68,6 @@
import LayoutContent from '@/layout/layout-content.vue';
import ComplexTable from '@/components/complex-table/index.vue';
import CreateDialog from '@/views/container/volume/create/index.vue';
import Submenu from '@/views/container/index.vue';
import CodemirrorDialog from '@/components/codemirror-dialog/codemirror.vue';
import { reactive, onMounted, ref } from 'vue';
import { dateFormat } from '@/utils/util';
@@ -78,6 +77,7 @@ import i18n from '@/lang';
import { useDeleteData } from '@/hooks/use-delete-data';
import router from '@/routers';
const loading = ref();
const detailInfo = ref();
const codemirror = ref();
@@ -115,9 +115,15 @@ const search = async () => {
page: paginationConfig.currentPage,
pageSize: paginationConfig.pageSize,
};
await searchVolume(params).then((res) => {
loading.value = true;
await searchVolume(params)
.then((res) => {
loading.value = false;
data.value = res.data.items || [];
paginationConfig.total = res.data.total;
})
.catch(() => {
loading.value = false;
});
};

48
frontend/src/views/cronjob/index.vue
View File

@@ -1,28 +1,29 @@
<template>
<div>
<el-card class="topRouterCard">
<el-radio-group v-model="active">
<el-radio-button class="topRouterButton" size="default" label="cronjob">
{{ $t('cronjob.cronTask') }}
</el-radio-button>
</el-radio-group>
</el-card>
<el-card style="margin-top: 20px">
<LayoutContent :header="$t('cronjob.cronTask')">
<RouterButton
:buttons="[
{
label: i18n.global.t('cronjob.cronTask'),
path: '/cronjobs',
},
]"
/>
<LayoutContent v-loading="loading" :title="$t('cronjob.cronTask')">
<template #toolbar>
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}{{ $t('cronjob.cronTask') }}
</el-button>
<el-button plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<template #main>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
@search="search"
:data="data"
>
<template #toolbar>
<el-button type="primary" icon="Plus" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<el-table-column type="selection" fix />
<el-table-column :label="$t('cronjob.taskName')" prop="name" />
<el-table-column :label="$t('commons.table.status')" prop="status">
@@ -87,8 +88,8 @@
fix
/>
</ComplexTable>
</template>
</LayoutContent>
</el-card>
<OperatrDialog @search="search" ref="dialogRef" />
<RecordDialog ref="dialogRecordRef" />
@@ -109,9 +110,9 @@ import { Cronjob } from '@/api/interface/cronjob';
import { useDeleteData } from '@/hooks/use-delete-data';
import { ElMessage, ElMessageBox } from 'element-plus';
const loading = ref();
const selects = ref<any>([]);
const active = ref('cronjob');
const data = ref();
const paginationConfig = reactive({
currentPage: 1,
@@ -134,7 +135,10 @@ const search = async () => {
page: paginationConfig.currentPage,
pageSize: paginationConfig.pageSize,
};
const res = await getCronjobPage(params);
loading.value = true;
await getCronjobPage(params)
.then((res) => {
loading.value = false;
data.value = res.data.items || [];
for (const item of data.value) {
if (item.targetDir !== '-') {
@@ -142,6 +146,10 @@ const search = async () => {
}
}
paginationConfig.total = res.data.total;
})
.catch(() => {
loading.value = false;
});
};
const dialogRecordRef = ref<DialogExpose>();

44
frontend/src/views/database/index.vue
View File

@@ -1,36 +1,24 @@
<template>
<div>
<el-card class="topRouterCard">
<el-radio-group :model-value="props.activeName" @change="handleChange">
<el-radio-button class="topRouterButton" size="default" label="mysql">Mysql</el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="redis">Redis</el-radio-button>
</el-radio-group>
</el-card>
<RouterButton :buttons="buttons" />
<LayoutContent>
<router-view></router-view>
</LayoutContent>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();
interface MenuProps {
activeName: string;
}
const props = withDefaults(defineProps<MenuProps>(), {
activeName: 'mysql',
});
import LayoutContent from '@/layout/layout-content.vue';
import RouterButton from '@/components/router-button/index.vue';
const routerTo = (path: string) => {
router.push({ path: path });
};
const handleChange = (val: string) => {
switch (val) {
case 'mysql':
routerTo('/databases');
break;
case 'redis':
routerTo('/databases/redis');
break;
}
};
const buttons = [
{
label: 'Mysql',
path: '/databases/mysql',
},
{
label: 'Redis',
path: '/databases/redis',
},
];
</script>

45
frontend/src/views/database/mysql/index.vue
View File

@@ -1,23 +1,16 @@
<template>
<div v-loading="loading">
<Submenu activeName="mysql" />
<LayoutContent :title="'Mysql ' + $t('menu.database')">
<template #app>
<AppStatus
:app-key="'mysql'"
style="margin-top: 20px"
v-model:loading="loading"
@setting="onSetting"
@is-exist="checkExist"
/>
<Setting ref="settingRef" style="margin-top: 20px" />
></AppStatus>
</template>
<el-card
width="30%"
v-if="mysqlStatus != 'Running' && !isOnSetting && mysqlIsExist && !loading"
class="mask-prompt"
>
<span style="font-size: 14px">{{ $t('commons.service.serviceNotStarted', ['Mysql']) }}</span>
</el-card>
<div style="margin-top: 20px" v-if="mysqlIsExist && !isOnSetting">
<template #toolbar v-if="mysqlIsExist && !isOnSetting">
<el-button type="primary" @click="onOpenDialog()">
{{ $t('database.create') }}
</el-button>
@@ -28,19 +21,15 @@
{{ $t('database.remoteAccess') }}
</el-button>
<el-button @click="goDashboard" type="primary" plain>phpMyAdmin</el-button>
</div>
<div v-if="mysqlIsExist" :class="{ mask: mysqlStatus != 'Running' }">
<el-card v-if="!isOnSetting" style="margin-top: 10px">
<LayoutContent :header="'Mysql ' + $t('menu.database')">
</template>
<template #main v-if="mysqlIsExist && !isOnSetting">
<ComplexTable :pagination-config="paginationConfig" @search="search" :data="data">
<el-table-column :label="$t('commons.table.name')" prop="name" />
<el-table-column :label="$t('commons.login.username')" prop="username" />
<el-table-column :label="$t('commons.login.password')" prop="password">
<template #default="{ row }">
<div>
<span style="float: left; line-height: 25px" v-if="!row.showPassword">
***********
</span>
<span style="float: left; line-height: 25px" v-if="!row.showPassword">***********</span>
<div style="cursor: pointer; float: left" v-if="!row.showPassword">
<el-icon
style="margin-left: 5px; margin-top: 3px"
@@ -74,11 +63,7 @@
</el-table-column>
<el-table-column :label="$t('commons.table.description')" prop="description">
<template #default="{ row }">
<fu-read-write-switch
:data="row.description"
v-model="row.edit"
@change="onChange(row)"
>
<fu-read-write-switch :data="row.description" v-model="row.edit" @change="onChange(row)">
<el-input v-model="row.description" @blur="row.edit = false" />
</fu-read-write-switch>
</template>
@@ -97,9 +82,16 @@
fix
/>
</ComplexTable>
</LayoutContent>
<el-card
width="30%"
v-if="mysqlStatus != 'Running' && !isOnSetting && mysqlIsExist && !loading"
class="mask-prompt"
>
<span style="font-size: 14px">{{ $t('commons.service.serviceNotStarted', ['Mysql']) }}</span>
</el-card>
</div>
</template>
</LayoutContent>
<Setting ref="settingRef" style="margin-top: 20px" />
<el-dialog v-model="changeVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
<template #header>
<div class="card-header">
@@ -195,7 +187,6 @@ import UploadDialog from '@/views/database/mysql/upload/index.vue';
import AppResources from '@/views/database/mysql/check/index.vue';
import Setting from '@/views/database/mysql/setting/index.vue';
import AppStatus from '@/components/app-status/index.vue';
import Submenu from '@/views/database/index.vue';
import { dateFormat } from '@/utils/util';
import { reactive, ref } from 'vue';
import {

28
frontend/src/views/database/redis/index.vue
View File

@@ -1,34 +1,26 @@
<template>
<div v-loading="loading">
<Submenu activeName="redis" />
<AppStatus
:app-key="'redis'"
style="margin-top: 20px"
@before="onBefore"
@setting="onSetting"
@is-exist="checkExist"
v-model:loading="loading"
></AppStatus>
<el-card
width="30%"
v-if="redisStatus != 'Running' && !isOnSetting && redisIsExist && !loading"
class="mask-prompt"
>
<span style="font-size: 14px">{{ $t('commons.service.serviceNotStarted', ['Redis']) }}</span>
</el-card>
<div v-show="redisIsExist" :class="{ mask: redisStatus != 'Running' }">
<el-button style="margin-top: 20px" type="primary" plain @click="goDashboard" icon="Position">
Redis-Commander
</el-button>
<el-button style="margin-top: 20px" type="primary" plain @click="onChangePassword">
<LayoutContent v-show="!isOnSetting && redisIsExist" :title="'Redis ' + $t('menu.database')">
<template #toolbar v-if="!isOnSetting && redisIsExist">
<el-button type="primary" plain @click="goDashboard" icon="Position">Redis-Commander</el-button>
<el-button plain @click="onChangePassword">
{{ $t('database.changePassword') }}
</el-button>
</template>
<template #main>
<Terminal :key="isRefresh" style="margin-top: 10px" ref="terminalRef" />
</div>
</template>
</LayoutContent>
<Setting ref="settingRef" style="margin-top: 10px" />
<Setting ref="settingRef" style="margin-top: 30px" />
<Password ref="passwordRef" @check-exist="initTerminal" @close-terminal="closeTerminal(true)" />
<el-dialog
v-model="commandVisiable"
@@ -52,7 +44,7 @@
</template>
<script lang="ts" setup>
import Submenu from '@/views/database/index.vue';
import LayoutContent from '@/layout/layout-content.vue';
import Setting from '@/views/database/redis/setting/index.vue';
import Password from '@/views/database/redis/password/index.vue';
import Terminal from '@/views/database/redis/terminal/index.vue';

2
frontend/src/views/database/redis/terminal/index.vue
View File

@@ -1,8 +1,6 @@
<template>
<div v-show="terminalShow" style="height: 100%">
<el-card>
<div style="height: calc(100vh - 230px)" :id="'terminal-exec'"></div>
</el-card>
</div>
</template>

16
frontend/src/views/home/index.vue
View File

@@ -1,12 +1,13 @@
<template>
<div>
<el-card class="topRouterCard">
<el-radio-group v-model="active">
<el-radio-button class="topRouterButton" size="default" label="home">
{{ $t('home.overview') }}
</el-radio-button>
</el-radio-group>
</el-card>
<RouterButton
:buttons="[
{
label: i18n.global.t('menu.monitor'),
path: '/home/index',
},
]"
/>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="18">
<CardWithHeader :header="$t('home.overview')">
@@ -163,7 +164,6 @@ import { loadBaseInfo, loadCurrentInfo } from '@/api/modules/dashboard';
import { getIOOptions, getNetworkOptions } from '@/api/modules/monitor';
const router = useRouter();
const active = ref('home');
const statuRef = ref();
const appRef = ref();

16
frontend/src/views/host/monitor/index.vue
View File

@@ -1,12 +1,13 @@
<template>
<div>
<el-card class="topRouterCard">
<el-radio-group v-model="active">
<el-radio-button class="topRouterButton" size="default" label="monitor">
{{ $t('menu.monitor') }}
</el-radio-button>
</el-radio-group>
</el-card>
<RouterButton
:buttons="[
{
label: i18n.global.t('menu.monitor'),
path: '/hosts/monitor',
},
]"
/>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="24">
<el-card style="overflow: inherit">
@@ -124,7 +125,6 @@ import { Monitor } from '@/api/interface/monitor';
import { dateFormatWithoutYear } from '@/utils/util';
import i18n from '@/lang';
const active = ref('monitor');
const zoomStart = ref();
const monitorBase = ref();
const timeRangeLoad = ref<[Date, Date]>([new Date(new Date().setHours(0, 0, 0, 0)), new Date()]);

60
frontend/src/views/log/index.vue
View File

@@ -1,47 +1,29 @@
<template>
<div>
<el-card class="topRouterCard">
<el-radio-group :model-value="props.activeName" @change="handleChange">
<el-radio-button class="topRouterButton" size="default" label="operation">
{{ $t('logs.operation') }}
</el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="login">
{{ $t('logs.login') }}
</el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="system">
{{ $t('logs.system') }}
</el-radio-button>
</el-radio-group>
</el-card>
<RouterButton :buttons="buttons" />
<LayoutContent>
<router-view></router-view>
</LayoutContent>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();
import i18n from '@/lang';
import LayoutContent from '@/layout/layout-content.vue';
import RouterButton from '@/components/router-button/index.vue';
interface MenuProps {
activeName: string;
}
const props = withDefaults(defineProps<MenuProps>(), {
activeName: 'operation',
});
const routerTo = (path: string) => {
router.push({ path: path });
};
const handleChange = (val: string) => {
switch (val) {
case 'operation':
routerTo('/logs');
break;
case 'login':
routerTo('/logs/login');
break;
case 'system':
routerTo('/logs/system');
break;
}
};
const buttons = [
{
label: i18n.global.t('logs.operation'),
path: '/logs/operation',
},
{
label: i18n.global.t('logs.login'),
path: '/logs/login',
},
{
label: i18n.global.t('logs.system'),
path: '/logs/system',
},
];
</script>

23
frontend/src/views/log/login/index.vue
View File

@@ -1,15 +1,13 @@
<template>
<div>
<Submenu activeName="login" />
<el-card style="margin-top: 20px">
<LayoutContent :header="$t('logs.login')">
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<LayoutContent v-loading="loading" :title="$t('logs.login')">
<template #toolbar>
<el-button type="primary" @click="onClean()">
<el-button type="primary" plain @click="onClean()">
{{ $t('logs.deleteLogs') }}
</el-button>
</template>
<template #main>
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<el-table-column min-width="40" :label="$t('logs.loginIP')" prop="ip" />
<el-table-column min-width="40" :label="$t('logs.loginAddress')" prop="address" />
<el-table-column :label="$t('logs.loginAgent')" show-overflow-tooltip prop="agent" />
@@ -32,8 +30,8 @@
show-overflow-tooltip
/>
</ComplexTable>
</template>
</LayoutContent>
</el-card>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSubmitClean"></ConfirmDialog>
</div>
</template>
@@ -44,11 +42,11 @@ import ConfirmDialog from '@/components/confirm-dialog/index.vue';
import LayoutContent from '@/layout/layout-content.vue';
import { dateFormat } from '@/utils/util';
import { cleanLogs, getLoginLogs } from '@/api/modules/log';
import Submenu from '@/views/log/index.vue';
import { onMounted, reactive, ref } from '@vue/runtime-core';
import i18n from '@/lang';
import { ElMessage } from 'element-plus';
const loading = ref();
const data = ref();
const confirmDialogRef = ref();
const paginationConfig = reactive({
@@ -62,9 +60,16 @@ const search = async () => {
page: paginationConfig.currentPage,
pageSize: paginationConfig.pageSize,
};
const res = await getLoginLogs(params);
loading.value = true;
await getLoginLogs(params)
.then((res) => {
loading.value = false;
data.value = res.data.items;
paginationConfig.total = res.data.total;
})
.catch(() => {
loading.value = false;
});
};
const onClean = async () => {

23
frontend/src/views/log/operation/index.vue
View File

@@ -1,15 +1,13 @@
<template>
<div>
<Submenu activeName="operation" />
<el-card style="margin-top: 20px">
<LayoutContent :header="$t('logs.operation')">
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<LayoutContent v-loading="loading" :title="$t('logs.operation')">
<template #toolbar>
<el-button type="primary" @click="onClean()">
<el-button type="primary" plain @click="onClean()">
{{ $t('logs.deleteLogs') }}
</el-button>
</template>
<template #main>
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<el-table-column :label="$t('logs.resource')" prop="group" fix>
<template #default="{ row }">
{{ $t('logs.detail.' + row.group) }}
@@ -43,8 +41,8 @@
show-overflow-tooltip
/>
</ComplexTable>
</template>
</LayoutContent>
</el-card>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSubmitClean"></ConfirmDialog>
</div>
@@ -56,11 +54,11 @@ import ConfirmDialog from '@/components/confirm-dialog/index.vue';
import { dateFormat } from '@/utils/util';
import LayoutContent from '@/layout/layout-content.vue';
import { cleanLogs, getOperationLogs } from '@/api/modules/log';
import Submenu from '@/views/log/index.vue';
import { onMounted, reactive, ref } from '@vue/runtime-core';
import i18n from '@/lang';
import { ElMessage } from 'element-plus';
const loading = ref();
const data = ref();
const confirmDialogRef = ref();
const paginationConfig = reactive({
@@ -74,9 +72,16 @@ const search = async () => {
page: paginationConfig.currentPage,
pageSize: paginationConfig.pageSize,
};
const res = await getOperationLogs(params);
loading.value = true;
await getOperationLogs(params)
.then((res) => {
loading.value = false;
data.value = res.data.items;
paginationConfig.total = res.data.total;
})
.catch(() => {
loading.value = false;
});
};
const onClean = async () => {

17
frontend/src/views/log/system/index.vue
View File

@@ -1,8 +1,7 @@
<template>
<div>
<Submenu activeName="system" />
<el-card style="margin-top: 20px">
<LayoutContent :header="$t('logs.system')">
<LayoutContent v-loading="loading" :title="$t('logs.system')">
<template #main>
<codemirror
:autofocus="true"
placeholder="None data"
@@ -18,8 +17,8 @@
v-model="logs"
:readOnly="true"
/>
</template>
</LayoutContent>
</el-card>
</div>
</template>
@@ -29,10 +28,10 @@ import LayoutContent from '@/layout/layout-content.vue';
import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark';
import { nextTick, onMounted, ref, shallowRef } from 'vue';
import Submenu from '@/views/log/index.vue';
import { LoadFile } from '@/api/modules/files';
import { loadBaseDir } from '@/api/modules/setting';
const loading = ref();
const extensions = [javascript(), oneDark];
const logs = ref();
const view = shallowRef();
@@ -43,7 +42,9 @@ const handleReady = (payload) => {
const loadSystemlogs = async () => {
const pathRes = await loadBaseDir();
let logPath = pathRes.data.replaceAll('/data', '/log');
const res = await LoadFile({ path: `${logPath}/1Panel.log` });
await LoadFile({ path: `${logPath}/1Panel.log` })
.then((res) => {
loading.value = false;
logs.value = res.data;
nextTick(() => {
const state = view.value.state;
@@ -52,6 +53,10 @@ const loadSystemlogs = async () => {
scrollIntoView: true,
});
});
})
.catch(() => {
loading.value = false;
});
};
onMounted(() => {

12
frontend/src/views/setting/about/index.vue
View File

@@ -1,9 +1,8 @@
<template>
<div v-loading="loading">
<Submenu activeName="about" />
<el-card style="margin-top: 20px">
<LayoutContent :header="$t('setting.about')">
<div style="text-align: center">
<div>
<LayoutContent v-loading="loading" :title="$t('setting.about')" :divider="true">
<template #main>
<div style="text-align: center; margin-top: 20px">
<div style="justify-self: center">
<img style="width: 80px" src="@/assets/images/ko_image.png" />
</div>
@@ -34,8 +33,8 @@
</el-link>
</div>
</div>
</template>
</LayoutContent>
</el-card>
<el-drawer :key="refresh" v-model="drawerShow" size="50%">
<el-form label-width="120px">
<el-form-item :label="$t('setting.newVersion')">
@@ -58,7 +57,6 @@
<script lang="ts" setup>
import LayoutContent from '@/layout/layout-content.vue';
import { getSettingInfo, loadUpgradeInfoByOSS, upgrade } from '@/api/modules/setting';
import Submenu from '@/views/setting/index.vue';
import { onMounted, ref } from 'vue';
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

13
frontend/src/views/setting/backup-account/index.vue
View File

@@ -1,8 +1,8 @@
<template>
<div>
<Submenu activeName="backupaccount" />
<LayoutContent :title="$t('setting.backup')" :divider="true">
<template #main>
<el-form label-position="left" label-width="130px" :v-key="reflash">
<LayoutContent header="Local" style="margin-top: 20px">
<el-row :gutter="20">
<el-col :span="24">
<el-card>
@@ -26,10 +26,10 @@
</el-card>
</el-col>
</el-row>
</LayoutContent>
</el-form>
<LayoutContent :header="$t('setting.thirdParty')" style="margin-top: 20px">
<el-row :gutter="20">
<div style="margin-top: 20px"><span style="font-size: 14px; font-weight: 500">第三方账号</span></div>
<el-row :gutter="20" style="margin-top: 5px">
<el-col :span="12">
<el-card style="height: 265px">
<template #header>
@@ -208,8 +208,8 @@
</el-card>
</el-col>
</el-row>
</template>
</LayoutContent>
</el-form>
<DialogOperate ref="dialogRef" @search="search" />
</div>
</template>
@@ -219,7 +219,6 @@ import { onMounted, ref } from 'vue';
import LayoutContent from '@/layout/layout-content.vue';
import { getBackupList, deleteBackup } from '@/api/modules/backup';
import DialogOperate from '@/views/setting/backup-account/operate/index.vue';
import Submenu from '@/views/setting/index.vue';
import { Backup } from '@/api/interface/backup';
import { ElForm } from 'element-plus';
import { useDeleteData } from '@/hooks/use-delete-data';

1
frontend/src/views/setting/expired.vue
View File

@@ -72,6 +72,7 @@ let settingForm = reactive<Setting.SettingInfo>({
language: '',
serverPort: 8888,
securityEntrance: '',
systemVersion: '',
expirationDays: 0,
expirationTime: '',
complexityVerification: 'enable',

89
frontend/src/views/setting/index.vue
View File

@@ -1,64 +1,41 @@
<template>
<div>
<el-card class="topRouterCard">
<el-radio-group :model-value="props.activeName" @change="handleChange">
<el-radio-button class="topRouterButton" size="default" label="panel">
{{ $t('setting.panel') }}
</el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="safe">
{{ $t('setting.safe') }}
</el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="backupaccount">
{{ $t('setting.backupAccount') }}
</el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="snapshot">
{{ $t('setting.snapshot') }}
</el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="monitor">
{{ $t('menu.monitor') }}
</el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="about">
{{ $t('setting.about') }}
</el-radio-button>
</el-radio-group>
</el-card>
<RouterButton :buttons="buttons" />
<LayoutContent>
<router-view></router-view>
</LayoutContent>
</div>
</template>
<script lang="ts" setup>
import router from '@/routers';
import i18n from '@/lang';
import LayoutContent from '@/layout/layout-content.vue';
import RouterButton from '@/components/router-button/index.vue';
interface MenuProps {
activeName: string;
}
const props = withDefaults(defineProps<MenuProps>(), {
activeName: 'all',
});
const routerTo = (path: string) => {
router.push({ path: path });
};
const handleChange = (val: string) => {
switch (val) {
case 'panel':
routerTo('/setting');
break;
case 'safe':
routerTo('/setting/safe');
break;
case 'backupaccount':
routerTo('/setting/backupaccount');
break;
case 'monitor':
routerTo('/setting/monitor');
break;
case 'about':
routerTo('/setting/about');
break;
case 'snapshot':
routerTo('/setting/snapshot');
break;
}
};
const buttons = [
{
label: i18n.global.t('setting.panel'),
path: '/settings/panel',
},
{
label: i18n.global.t('setting.safe'),
path: '/settings/safe',
},
{
label: i18n.global.t('setting.backupAccount'),
path: '/settings/backupaccount',
},
{
label: i18n.global.t('setting.monitor'),
path: '/settings/monitor',
},
{
label: i18n.global.t('setting.snapshot'),
path: '/settings/snapshot',
},
{
label: i18n.global.t('setting.about'),
path: '/settings/about',
},
];
</script>

20
frontend/src/views/setting/monitor/index.vue
View File

@@ -1,9 +1,8 @@
<template>
<div>
<Submenu activeName="monitor" />
<LayoutContent v-loading="loading" :title="$t('setting.monitor')" :divider="true">
<template #main>
<el-form :model="form" ref="panelFormRef" label-position="left" label-width="160px">
<el-card style="margin-top: 20px">
<LayoutContent :header="$t('menu.monitor')">
<el-row>
<el-col :span="1"><br /></el-col>
<el-col :span="10">
@@ -40,9 +39,9 @@
</el-form-item>
</el-col>
</el-row>
</LayoutContent>
</el-card>
</el-form>
</template>
</LayoutContent>
</div>
</template>
@@ -52,10 +51,10 @@ import { ElMessage, FormInstance } from 'element-plus';
import LayoutContent from '@/layout/layout-content.vue';
import { cleanMonitors, getSettingInfo, updateSetting } from '@/api/modules/setting';
import { useDeleteData } from '@/hooks/use-delete-data';
import Submenu from '@/views/setting/index.vue';
import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
const loading = ref();
const form = reactive({
monitorStatus: 'disable',
monitorStoreDays: 30,
@@ -86,8 +85,15 @@ const onSave = async (formEl: FormInstance | undefined, key: string, val: any) =
key: key,
value: val + '',
};
await updateSetting(param);
loading.value = true;
await updateSetting(param)
.then(() => {
loading.value = false;
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
})
.catch(() => {
loading.value = false;
});
};
function callback(error: any) {
if (error) {

10
frontend/src/views/setting/panel/index.vue
View File

@@ -1,9 +1,8 @@
<template>
<div>
<Submenu activeName="panel" />
<LayoutContent v-loading="loading" :title="$t('setting.panel')" :divider="true">
<template #main>
<el-form :model="form" ref="panelFormRef" label-position="left" v-loading="loading" label-width="160px">
<el-card style="margin-top: 20px">
<LayoutContent :header="$t('setting.panel')">
<el-row>
<el-col :span="1"><br /></el-col>
<el-col :span="10">
@@ -112,9 +111,9 @@
</el-form-item>
</el-col>
</el-row>
</LayoutContent>
</el-card>
</el-form>
</template>
</LayoutContent>
</div>
</template>
@@ -123,7 +122,6 @@ import { ref, reactive, onMounted, computed } from 'vue';
import { ElMessage, ElForm } from 'element-plus';
import LayoutContent from '@/layout/layout-content.vue';
import { syncTime, getSettingInfo, updateSetting } from '@/api/modules/setting';
import Submenu from '@/views/setting/index.vue';
import { Rules } from '@/global/form-rules';
import { GlobalStore } from '@/store';
import { useI18n } from 'vue-i18n';

10
frontend/src/views/setting/safe/index.vue
View File

@@ -1,9 +1,8 @@
<template>
<div>
<Submenu activeName="safe" />
<LayoutContent v-loading="loading" :title="$t('setting.safe')" :divider="true">
<template #main>
<el-form :model="form" ref="panelFormRef" v-loading="loading" label-position="left" label-width="160px">
<el-card style="margin-top: 20px">
<LayoutContent :header="$t('setting.safe')">
<el-row>
<el-col :span="1"><br /></el-col>
<el-col :span="10">
@@ -102,9 +101,9 @@
</el-form-item>
</el-col>
</el-row>
</LayoutContent>
</el-card>
</el-form>
</template>
</LayoutContent>
<el-dialog
v-model="timeoutVisiable"
:destroy-on-close="true"
@@ -180,7 +179,6 @@
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElForm } from 'element-plus';
import Submenu from '@/views/setting/index.vue';
import { Setting } from '@/api/interface/setting';
import LayoutContent from '@/layout/layout-content.vue';
import { updatePassword, updateSetting, getMFA, bindMFA, getSettingInfo } from '@/api/modules/setting';

11
frontend/src/views/setting/snapshot/index.vue
View File

@@ -1,12 +1,12 @@
<template>
<div v-loading="loading">
<Submenu activeName="snapshot" />
<el-card v-if="!isRecordShow" style="margin-top: 20px">
<LayoutContent :header="$t('setting.snapshot')">
<div>
<LayoutContent v-loading="loading" v-if="!isRecordShow" :title="$t('setting.snapshot')" :divider="true">
<template #main>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
:data="data"
style="margin-top: 20px"
@search="search"
>
<template #toolbar>
@@ -65,8 +65,8 @@
fix
/>
</ComplexTable>
</template>
</LayoutContent>
</el-card>
<RecoverStatus ref="recoverStatusRef"></RecoverStatus>
<el-drawer v-model="dialogVisiable" :title="$t('setting.createSnapshot')" size="50%">
<el-form v-loading="loading" ref="snapRef" label-width="100px" :model="snapInfo" :rules="rules">
@@ -109,7 +109,6 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElMessage } from 'element-plus';
import { Setting } from '@/api/interface/setting';
import Submenu from '@/views/setting/index.vue';
import LayoutContent from '@/layout/layout-content.vue';
import RecoverStatus from '@/views/setting/snapshot/status/index.vue';
import { getBackupList } from '@/api/modules/backup';