1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-10-20 12:27:18 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: 优化页面兼容移动端问题 (#1320)

Browse source 
#### What this PR does / why we need it?

#### Summary of your change

#### Please indicate you've done the following:

- [ ] Made sure tests are passing and test coverage is added if needed.
- [ ] Made sure commit message follow the rule of [Conventional Commits specification](https://www.conventionalcommits.org/).
- [ ] Considered the docs impact and opened a new docs issue or PR with docs changes if needed.
This commit is contained in:
wangdan-fit2cloud 2023-06-09 23:38:15 +08:00 • committed by GitHub
parent e9bdca5279
commit 0275716ff5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 475 additions and 383 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/styles/common.scss
View file

@ -13,6 +13,11 @@
align-items: center; align-items: center;
} }
.flx-wrap {
display: flex;
flex-wrap: wrap;
}
.clearfix::after { .clearfix::after {
display: block; display: block;
height: 0; height: 0;

15
frontend/src/styles/moblie.scss
View file

@ -65,4 +65,19 @@
} }
} }
} }
.database-status {
.title {
margin-left: 10px !important;
}
.content {
margin-left: 10px !important;
}
}
@media only screen and (max-width: 768px) {
.el-col-xs-24 {
margin-bottom: 10px;
}
}
} }

4
frontend/src/views/container/setting/index.vue
View file

@ -43,8 +43,8 @@
</el-radio-group> </el-radio-group>
<el-row style="margin-top: 20px" v-if="confShowType === 'base'"> <el-row style="margin-top: 20px" v-if="confShowType === 'base'">
<el-col :span="1"><br /></el-col> <el-col :span="1"><br /></el-col>
<el-col :span="10"> <el-col :xs="24" :sm="24" :md="15" :lg="12" :xl="10">
<el-form :model="form" label-position="left" :rules="rules" ref="formRef" label-width="150px"> <el-form :model="form" label-position="left" :rules="rules" ref="formRef" label-width="120px">
<el-form-item :label="$t('container.mirrors')" prop="mirrors"> <el-form-item :label="$t('container.mirrors')" prop="mirrors">
<div style="width: 100%" v-if="form.mirrors"> <div style="width: 100%" v-if="form.mirrors">
<el-input <el-input

342
frontend/src/views/cronjob/record/index.vue
View file

@ -123,194 +123,198 @@
</el-row> </el-row>
</template> </template>
<template #main> <template #main>
<el-row :gutter="20" v-show="hasRecords"> <div style="overflow: auto">
<el-col :span="8"> <el-row :gutter="20" v-show="hasRecords" style="min-width: 900px">
<div> <el-col :span="8">
<ul class="infinite-list" style="overflow: auto"> <div>
<li <ul class="infinite-list" style="overflow: auto">
v-for="(item, index) in records" <li
:key="index" v-for="(item, index) in records"
@click="forDetail(item)" :key="index"
class="infinite-list-item" @click="forDetail(item)"
> class="infinite-list-item"
<el-icon v-if="item.status === 'Success'"><Select /></el-icon>
<el-icon v-if="item.status === 'Waiting'"><Loading /></el-icon>
<el-icon v-if="item.status === 'Failed'"><CloseBold /></el-icon>
<span v-if="item.id === currentRecord.id" style="color: red">
{{ dateFormat(0, 0, item.startTime) }}
</span>
<span v-else>{{ dateFormat(0, 0, item.startTime) }}</span>
</li>
</ul>
<div style="margin-top: 10px; font-size: 12px; float: right">
<el-pagination
:page-size="searchInfo.pageSize"
:current-page="searchInfo.page"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
:pager-count="5"
:page-sizes="[6, 8, 10, 12, 14]"
small
layout="total, sizes, prev, pager, next"
:total="searchInfo.recordTotal"
/>
</div>
</div>
</el-col>
<el-col :span="16">
<el-form label-position="top" :v-key="refresh">
<el-row type="flex" justify="center">
<el-form-item class="descriptionWide" v-if="isBackup()">
<template #label>
<span class="status-label">{{ $t('cronjob.target') }}</span>
</template>
<span class="status-count">{{ dialogData.rowData!.targetDir }}</span>
<el-button
v-if="currentRecord?.status === 'Success'"
type="primary"
style="margin-left: 10px"
link
icon="Download"
@click="onDownload(currentRecord, dialogData.rowData!.targetDirID)"
> >
{{ $t('file.download') }} <el-icon v-if="item.status === 'Success'"><Select /></el-icon>
</el-button> <el-icon v-if="item.status === 'Waiting'"><Loading /></el-icon>
</el-form-item> <el-icon v-if="item.status === 'Failed'"><CloseBold /></el-icon>
<el-form-item class="description" v-if="dialogData.rowData!.type === 'website'"> <span v-if="item.id === currentRecord.id" style="color: red">
{{ dateFormat(0, 0, item.startTime) }}
</span>
<span v-else>{{ dateFormat(0, 0, item.startTime) }}</span>
</li>
</ul>
<div style="margin-top: 10px; font-size: 12px; float: right">
<el-pagination
:page-size="searchInfo.pageSize"
:current-page="searchInfo.page"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
:pager-count="5"
:page-sizes="[6, 8, 10, 12, 14]"
small
layout="total, sizes, prev, pager, next"
:total="searchInfo.recordTotal"
/>
</div>
</div>
</el-col>
<el-col :span="16">
<el-form label-position="top" :v-key="refresh">
<el-row type="flex" justify="center">
<el-form-item class="descriptionWide" v-if="isBackup()">
<template #label>
<span class="status-label">{{ $t('cronjob.target') }}</span>
</template>
<span class="status-count">{{ dialogData.rowData!.targetDir }}</span>
<el-button
v-if="currentRecord?.status === 'Success'"
type="primary"
style="margin-left: 10px"
link
icon="Download"
@click="onDownload(currentRecord, dialogData.rowData!.targetDirID)"
>
{{ $t('file.download') }}
</el-button>
</el-form-item>
<el-form-item class="description" v-if="dialogData.rowData!.type === 'website'">
<template #label>
<span class="status-label">{{ $t('cronjob.website') }}</span>
</template>
<span v-if="dialogData.rowData!.website !== 'all'" class="status-count">
{{ dialogData.rowData!.website }}
</span>
<span v-else class="status-count">
{{ $t('commons.table.all') }}
</span>
</el-form-item>
<el-form-item class="description" v-if="dialogData.rowData!.type === 'database'">
<template #label>
<span class="status-label">{{ $t('cronjob.database') }}</span>
</template>
<span v-if="dialogData.rowData!.dbName !== 'all'" class="status-count">
{{ dialogData.rowData!.dbName }}
</span>
<span v-else class="status-count">
{{ $t('commons.table.all') }}
</span>
</el-form-item>
<el-form-item class="description" v-if="dialogData.rowData!.type === 'directory'">
<template #label>
<span class="status-label">{{ $t('cronjob.directory') }}</span>
</template>
<span v-if="dialogData.rowData!.sourceDir.length <= 12" class="status-count">
{{ dialogData.rowData!.sourceDir }}
</span>
<div v-else>
<el-popover
placement="top-start"
trigger="hover"
width="250"
:content="dialogData.rowData!.sourceDir"
>
<template #reference>
<span class="status-count">
{{ dialogData.rowData!.sourceDir.substring(0, 12) }}...
</span>
</template>
</el-popover>
</div>
</el-form-item>
<el-form-item class="description" v-if="isBackup()">
<template #label>
<span class="status-label">{{ $t('cronjob.retainCopies') }}</span>
</template>
<span class="status-count">{{ dialogData.rowData!.retainCopies }}</span>
</el-form-item>
</el-row>
<el-form-item
class="description"
v-if="dialogData.rowData!.type === 'website' || dialogData.rowData!.type === 'directory'"
>
<template #label> <template #label>
<span class="status-label">{{ $t('cronjob.website') }}</span> <span class="status-label">{{ $t('cronjob.exclusionRules') }}</span>
</template> </template>
<span v-if="dialogData.rowData!.website !== 'all'" class="status-count"> <span v-if="dialogData.rowData!.exclusionRules.length <= 12" class="status-count">
{{ dialogData.rowData!.website }} {{ dialogData.rowData!.exclusionRules }}
</span>
<span v-else class="status-count">
{{ $t('commons.table.all') }}
</span>
</el-form-item>
<el-form-item class="description" v-if="dialogData.rowData!.type === 'database'">
<template #label>
<span class="status-label">{{ $t('cronjob.database') }}</span>
</template>
<span v-if="dialogData.rowData!.dbName !== 'all'" class="status-count">
{{ dialogData.rowData!.dbName }}
</span>
<span v-else class="status-count">
{{ $t('commons.table.all') }}
</span>
</el-form-item>
<el-form-item class="description" v-if="dialogData.rowData!.type === 'directory'">
<template #label>
<span class="status-label">{{ $t('cronjob.directory') }}</span>
</template>
<span v-if="dialogData.rowData!.sourceDir.length <= 12" class="status-count">
{{ dialogData.rowData!.sourceDir }}
</span> </span>
<div v-else> <div v-else>
<el-popover <el-popover
placement="top-start" placement="top-start"
trigger="hover" trigger="hover"
width="250" width="250"
:content="dialogData.rowData!.sourceDir" :content="dialogData.rowData!.exclusionRules"
> >
<template #reference> <template #reference>
<span class="status-count"> <span class="status-count">
{{ dialogData.rowData!.sourceDir.substring(0, 12) }}... {{ dialogData.rowData!.exclusionRules.substring(0, 12) }}...
</span> </span>
</template> </template>
</el-popover> </el-popover>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item class="description" v-if="isBackup()"> <el-row type="flex" justify="center">
<template #label> <el-form-item class="descriptionWide">
<span class="status-label">{{ $t('cronjob.retainCopies') }}</span> <template #label>
</template> <span class="status-label">{{ $t('commons.search.timeStart') }}</span>
<span class="status-count">{{ dialogData.rowData!.retainCopies }}</span>
</el-form-item>
</el-row>
<el-form-item
class="description"
v-if="dialogData.rowData!.type === 'website' || dialogData.rowData!.type === 'directory'"
>
<template #label>
<span class="status-label">{{ $t('cronjob.exclusionRules') }}</span>
</template>
<span v-if="dialogData.rowData!.exclusionRules.length <= 12" class="status-count">
{{ dialogData.rowData!.exclusionRules }}
</span>
<div v-else>
<el-popover
placement="top-start"
trigger="hover"
width="250"
:content="dialogData.rowData!.exclusionRules"
>
<template #reference>
<span class="status-count">
{{ dialogData.rowData!.exclusionRules.substring(0, 12) }}...
</span>
</template> </template>
</el-popover> <span class="status-count">
</div> {{ dateFormat(0, 0, currentRecord?.startTime) }}
</el-form-item> </span>
<el-row type="flex" justify="center"> </el-form-item>
<el-form-item class="descriptionWide"> <el-form-item class="description">
<template #label> <template #label>
<span class="status-label">{{ $t('commons.search.timeStart') }}</span> <span class="status-label">{{ $t('commons.table.interval') }}</span>
</template>
<span class="status-count">{{ dateFormat(0, 0, currentRecord?.startTime) }}</span>
</el-form-item>
<el-form-item class="description">
<template #label>
<span class="status-label">{{ $t('commons.table.interval') }}</span>
</template>
<span class="status-count" v-if="currentRecord?.interval! <= 1000">
{{ currentRecord?.interval }} ms
</span>
<span class="status-count" v-if="currentRecord?.interval! > 1000">
{{ currentRecord?.interval! / 1000 }} s
</span>
</el-form-item>
<el-form-item class="description">
<template #label>
<span class="status-label">{{ $t('commons.table.status') }}</span>
</template>
<el-tooltip v-if="currentRecord?.status === 'Failed'" placement="top">
<template #content>
<div style="width: 300px; word-break: break-all">
{{ currentRecord?.message }}
</div>
</template> </template>
<el-tag type="danger">{{ $t('commons.table.statusFailed') }}</el-tag> <span class="status-count" v-if="currentRecord?.interval! <= 1000">
</el-tooltip> {{ currentRecord?.interval }} ms
<el-tag type="success" v-if="currentRecord?.status === 'Success'"> </span>
{{ $t('commons.table.statusSuccess') }} <span class="status-count" v-if="currentRecord?.interval! > 1000">
</el-tag> {{ currentRecord?.interval! / 1000 }} s
<el-tag type="info" v-if="currentRecord?.status === 'Waiting'"> </span>
{{ $t('commons.table.statusWaiting') }} </el-form-item>
</el-tag> <el-form-item class="description">
</el-form-item> <template #label>
</el-row> <span class="status-label">{{ $t('commons.table.status') }}</span>
<el-row v-if="currentRecord?.records"> </template>
<span>{{ $t('commons.table.records') }}</span> <el-tooltip v-if="currentRecord?.status === 'Failed'" placement="top">
<codemirror <template #content>
ref="mymirror" <div style="width: 300px; word-break: break-all">
:autofocus="true" {{ currentRecord?.message }}
:placeholder="$t('cronjob.noLogs')" </div>
:indent-with-tab="true" </template>
:tabSize="4" <el-tag type="danger">{{ $t('commons.table.statusFailed') }}</el-tag>
style="height: calc(100vh - 484px); width: 100%; margin-top: 5px" </el-tooltip>
:lineWrapping="true" <el-tag type="success" v-if="currentRecord?.status === 'Success'">
:matchBrackets="true" {{ $t('commons.table.statusSuccess') }}
theme="cobalt" </el-tag>
:styleActiveLine="true" <el-tag type="info" v-if="currentRecord?.status === 'Waiting'">
:extensions="extensions" {{ $t('commons.table.statusWaiting') }}
v-model="currentRecordDetail" </el-tag>
:disabled="true" </el-form-item>
/> </el-row>
</el-row> <el-row v-if="currentRecord?.records">
</el-form> <span>{{ $t('commons.table.records') }}</span>
</el-col> <codemirror
</el-row> ref="mymirror"
:autofocus="true"
:placeholder="$t('cronjob.noLogs')"
:indent-with-tab="true"
:tabSize="4"
style="height: calc(100vh - 484px); width: 100%; margin-top: 5px"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="currentRecordDetail"
:disabled="true"
/>
</el-row>
</el-form>
</el-col>
</el-row>
</div>
<div class="app-warn" v-show="!hasRecords"> <div class="app-warn" v-show="!hasRecords">
<div> <div>
<span>{{ $t('cronjob.noRecord') }}</span> <span>{{ $t('cronjob.noRecord') }}</span>

4
frontend/src/views/database/redis/setting/persistence/index.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div v-if="persistenceShow"> <div v-if="persistenceShow">
<el-row :gutter="20" style="margin-top: 5px" class="row-box"> <el-row :gutter="20" style="margin-top: 5px" class="row-box">
<el-col :span="12"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-card class="el-card"> <el-card class="el-card">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
@ -36,7 +36,7 @@
</el-form> </el-form>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-card class="el-card"> <el-card class="el-card">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">

244
frontend/src/views/database/redis/setting/status/index.vue
View file

@ -1,108 +1,131 @@
<template> <template>
<div v-if="statusShow"> <div v-if="statusShow" class="database-status">
<el-form label-position="top"> <el-form label-position="top">
<span class="title">{{ $t('database.baseParam') }}</span> <span class="title">{{ $t('database.baseParam') }}</span>
<el-divider class="devider" /> <el-divider class="devider" />
<el-row type="flex" style="margin-left: 50px" justify="center"> <el-row class="content">
<el-form-item style="width: 25%"> <el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="6">
<template #label> <el-form-item>
<span class="status-label">uptime_in_days</span> <template #label>
</template> <span class="status-label">uptime_in_days</span>
<span class="status-count">{{ redisStatus.uptime_in_days }}</span> </template>
<span class="input-help">{{ $t('database.uptimeInDays') }}</span> <span class="status-count">{{ redisStatus.uptime_in_days }}</span>
</el-form-item> <span class="input-help">{{ $t('database.uptimeInDays') }}</span>
<el-form-item style="width: 25%"> </el-form-item>
<template #label> </el-col>
<span class="status-label">tcp_port</span> <el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="6">
</template> <el-form-item>
<span class="status-count">{{ redisStatus.tcp_port }}</span> <template #label>
<span class="input-help">{{ $t('database.tcpPort') }}</span> <span class="status-label">tcp_port</span>
</el-form-item> </template>
<el-form-item style="width: 25%"> <span class="status-count">{{ redisStatus.tcp_port }}</span>
<template #label> <span class="input-help">{{ $t('database.tcpPort') }}</span>
<span class="status-label">connected_clients</span> </el-form-item>
</template> </el-col>
<span class="status-count">{{ redisStatus.connected_clients }}</span> <el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="6">
<span class="input-help">{{ $t('database.connectedClients') }}</span> <el-form-item>
</el-form-item> <template #label>
<el-form-item style="width: 25%"></el-form-item> <span class="status-label">connected_clients</span>
</template>
<span class="status-count">{{ redisStatus.connected_clients }}</span>
<span class="input-help">{{ $t('database.connectedClients') }}</span>
</el-form-item>
</el-col>
</el-row> </el-row>
<span class="title">{{ $t('database.performanceParam') }}</span> <span class="title">{{ $t('database.performanceParam') }}</span>
<el-divider class="devider" /> <el-divider class="devider" />
<el-row type="flex" style="margin-left: 50px" justify="center"> <el-row class="content">
<el-form-item style="width: 25%"> <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
<template #label> <el-form-item>
<span class="status-label">used_memory_rss</span> <template #label>
</template> <span class="status-label">used_memory_rss</span>
<span class="status-count">{{ redisStatus.used_memory_rss }}</span> </template>
<span class="input-help">{{ $t('database.usedMemoryRss') }}</span> <span class="status-count">{{ redisStatus.used_memory_rss }}</span>
</el-form-item> <span class="input-help">{{ $t('database.usedMemoryRss') }}</span>
<el-form-item style="width: 25%"> </el-form-item>
<template #label> </el-col>
<span class="status-label">used_memory</span> <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
</template> <el-form-item>
<span class="status-count">{{ redisStatus.used_memory }}</span> <template #label>
<span class="input-help">{{ $t('database.usedMemory') }}</span> <span class="status-label">used_memory</span>
</el-form-item> </template>
<el-form-item style="width: 25%"> <span class="status-count">{{ redisStatus.used_memory }}</span>
<template #label> <span class="input-help">{{ $t('database.usedMemory') }}</span>
<span class="status-label">mem_fragmentation_ratio</span> </el-form-item>
</template> </el-col>
<span class="status-count">{{ redisStatus.mem_fragmentation_ratio }}</span> <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
<span class="input-help">{{ $t('database.tmpTableToDBHelper') }}</span> <el-form-item>
</el-form-item> <template #label>
<el-form-item style="width: 25%"> <span class="status-label">mem_fragmentation_ratio</span>
<template #label> </template>
<span class="status-label">total_connections_received</span> <span class="status-count">{{ redisStatus.mem_fragmentation_ratio }}</span>
</template> <span class="input-help">{{ $t('database.tmpTableToDBHelper') }}</span>
<span class="status-count">{{ redisStatus.total_connections_received }}</span> </el-form-item>
<span class="input-help">{{ $t('database.totalConnectionsReceived') }}</span> </el-col>
</el-form-item> <el-col :xs="8" :sm="12" :md="6" :lg="6" :xl="6">
<el-form-item style="width: 25%"> <el-form-item>
<template #label> <template #label>
<span class="status-label">total_commands_processed</span> <span class="status-label">total_connections_received</span>
</template> </template>
<span class="status-count">{{ redisStatus.total_commands_processed }}</span> <span class="status-count">{{ redisStatus.total_connections_received }}</span>
<span class="input-help">{{ $t('database.totalCommandsProcessed') }}</span> <span class="input-help">{{ $t('database.totalConnectionsReceived') }}</span>
</el-form-item> </el-form-item>
<el-form-item style="width: 25%"> </el-col>
<template #label> <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
<span class="status-label">instantaneous_ops_per_sec</span> <el-form-item>
</template> <template #label>
<span class="status-count">{{ redisStatus.instantaneous_ops_per_sec }}</span> <span class="status-label">total_commands_processed</span>
<span class="input-help">{{ $t('database.instantaneousOpsPerSec') }}</span> </template>
</el-form-item> <span class="status-count">{{ redisStatus.total_commands_processed }}</span>
<el-form-item style="width: 25%"> <span class="input-help">{{ $t('database.totalCommandsProcessed') }}</span>
<template #label> </el-form-item>
<span class="status-label">keyspace_hits</span> </el-col>
</template> <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
<span class="status-count">{{ redisStatus.keyspace_hits }}</span> <el-form-item>
<span class="input-help">{{ $t('database.keyspaceHits') }}</span> <template #label>
</el-form-item> <span class="status-label">instantaneous_ops_per_sec</span>
<el-form-item style="width: 25%"> </template>
<template #label> <span class="status-count">{{ redisStatus.instantaneous_ops_per_sec }}</span>
<span class="status-label">keyspace_misses</span> <span class="input-help">{{ $t('database.instantaneousOpsPerSec') }}</span>
</template> </el-form-item>
<span class="status-count">{{ redisStatus.keyspace_misses }}</span> </el-col>
<span class="input-help">{{ $t('database.keyspaceMisses') }}</span> <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
</el-form-item> <el-form-item>
<el-form-item style="width: 25%"> <template #label>
<template #label> <span class="status-label">keyspace_hits</span>
<span class="status-label">hit</span> </template>
</template> <span class="status-count">{{ redisStatus.keyspace_hits }}</span>
<span class="status-count">{{ redisStatus.hit }}</span> <span class="input-help">{{ $t('database.keyspaceHits') }}</span>
<span class="input-help">{{ $t('database.hit') }}</span> </el-form-item>
</el-form-item> </el-col>
<el-form-item style="width: 25%"> <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
<template #label> <el-form-item>
<span class="status-label">latest_fork_usec</span> <template #label>
</template> <span class="status-label">keyspace_misses</span>
<span class="status-count">{{ redisStatus.latest_fork_usec }}</span> </template>
<span class="input-help">{{ $t('database.latestForkUsec') }}</span> <span class="status-count">{{ redisStatus.keyspace_misses }}</span>
</el-form-item> <span class="input-help">{{ $t('database.keyspaceMisses') }}</span>
<el-form-item style="width: 25%"></el-form-item> </el-form-item>
<el-form-item style="width: 25%"></el-form-item> </el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
<el-form-item>
<template #label>
<span class="status-label">hit</span>
</template>
<span class="status-count">{{ redisStatus.hit }}</span>
<span class="input-help">{{ $t('database.hit') }}</span>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
<el-form-item>
<template #label>
<span class="status-label">latest_fork_usec</span>
</template>
<span class="status-count">{{ redisStatus.latest_fork_usec }}</span>
<span class="input-help">{{ $t('database.latestForkUsec') }}</span>
</el-form-item>
</el-col>
</el-row> </el-row>
</el-form> </el-form>
</div> </div>
@ -169,16 +192,21 @@ defineExpose({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.devider { .database-status {
display: block; .devider {
height: 1px; display: block;
width: 100%; height: 1px;
margin: 12px 0; width: 100%;
border-top: 1px var(--el-border-color) var(--el-border-style); margin: 12px 0;
} border-top: 1px var(--el-border-color) var(--el-border-style);
.title { }
font-size: 20px; .title {
font-weight: 500; font-size: 20px;
margin-left: 50px; font-weight: 500;
margin-left: 50px;
}
.content {
margin-left: 50px;
}
} }
</style> </style>

174
frontend/src/views/host/monitor/monitor/index.vue
View file

@ -6,17 +6,20 @@
<el-col :span="24"> <el-col :span="24">
<el-card style="overflow: inherit"> <el-card style="overflow: inherit">
<template #header> <template #header>
<span class="title">{{ $t('monitor.avgLoad') }}</span> <div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
<el-date-picker <span class="title">{{ $t('monitor.avgLoad') }}</span>
@change="search('load')" <el-date-picker
v-model="timeRangeLoad" @change="search('load')"
type="datetimerange" v-model="timeRangeLoad"
:range-separator="$t('commons.search.timeRange')" type="datetimerange"
:start-placeholder="$t('commons.search.timeStart')" :range-separator="$t('commons.search.timeRange')"
:end-placeholder="$t('commons.search.timeEnd')" :start-placeholder="$t('commons.search.timeStart')"
:shortcuts="shortcuts" :end-placeholder="$t('commons.search.timeEnd')"
style="float: right; margin-top: -5px; width: 360px" :shortcuts="shortcuts"
></el-date-picker> style="max-width: 360px; width: 100%"
:size="mobile ? 'small' : 'default'"
></el-date-picker>
</div>
</template> </template>
<div id="loadLoadChart" class="chart"></div> <div id="loadLoadChart" class="chart"></div>
</el-card> </el-card>
@ -26,17 +29,20 @@
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-card style="overflow: inherit"> <el-card style="overflow: inherit">
<template #header> <template #header>
<span class="title">CPU</span> <div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
<el-date-picker <span class="title">CPU</span>
@change="search('cpu')" <el-date-picker
v-model="timeRangeCpu" @change="search('cpu')"
type="datetimerange" v-model="timeRangeCpu"
:range-separator="$t('commons.search.timeRange')" type="datetimerange"
:start-placeholder="$t('commons.search.timeStart')" :range-separator="$t('commons.search.timeRange')"
:end-placeholder="$t('commons.search.timeEnd')" :start-placeholder="$t('commons.search.timeStart')"
:shortcuts="shortcuts" :end-placeholder="$t('commons.search.timeEnd')"
style="float: right; margin-top: -5px; width: 360px" :shortcuts="shortcuts"
></el-date-picker> style="max-width: 360px; width: 100%"
:size="mobile ? 'small' : 'default'"
></el-date-picker>
</div>
</template> </template>
<div id="loadCPUChart" class="chart"></div> <div id="loadCPUChart" class="chart"></div>
</el-card> </el-card>
@ -44,17 +50,20 @@
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-card style="overflow: inherit"> <el-card style="overflow: inherit">
<template #header> <template #header>
<span class="title">{{ $t('monitor.memory') }}</span> <div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
<el-date-picker <span class="title">{{ $t('monitor.memory') }}</span>
@change="search('memory')" <el-date-picker
v-model="timeRangeMemory" @change="search('memory')"
type="datetimerange" v-model="timeRangeMemory"
:range-separator="$t('commons.search.timeRange')" type="datetimerange"
:start-placeholder="$t('commons.search.timeStart')" :range-separator="$t('commons.search.timeRange')"
:end-placeholder="$t('commons.search.timeEnd')" :start-placeholder="$t('commons.search.timeStart')"
:shortcuts="shortcuts" :end-placeholder="$t('commons.search.timeEnd')"
style="float: right; margin-top: -5px; width: 360px" :shortcuts="shortcuts"
></el-date-picker> style="max-width: 360px; width: 100%"
:size="mobile ? 'small' : 'default'"
></el-date-picker>
</div>
</template> </template>
<div id="loadMemoryChart" class="chart"></div> <div id="loadMemoryChart" class="chart"></div>
</el-card> </el-card>
@ -64,17 +73,20 @@
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-card style="overflow: inherit"> <el-card style="overflow: inherit">
<template #header> <template #header>
<span class="title">{{ $t('monitor.disk') }} IO</span> <div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
<el-date-picker <span class="title">{{ $t('monitor.disk') }} IO</span>
@change="search('io')" <el-date-picker
v-model="timeRangeIO" @change="search('io')"
type="datetimerange" v-model="timeRangeIO"
:range-separator="$t('commons.search.timeRange')" type="datetimerange"
:start-placeholder="$t('commons.search.timeStart')" :range-separator="$t('commons.search.timeRange')"
:end-placeholder="$t('commons.search.timeEnd')" :start-placeholder="$t('commons.search.timeStart')"
:shortcuts="shortcuts" :end-placeholder="$t('commons.search.timeEnd')"
style="float: right; margin-top: -5px; width: 360px" :shortcuts="shortcuts"
></el-date-picker> style="max-width: 360px; width: 100%"
:size="mobile ? 'small' : 'default'"
></el-date-picker>
</div>
</template> </template>
<div id="loadIOChart" class="chart"></div> <div id="loadIOChart" class="chart"></div>
</el-card> </el-card>
@ -82,34 +94,43 @@
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-card style="overflow: inherit"> <el-card style="overflow: inherit">
<template #header> <template #header>
<span class="title">{{ $t('monitor.network') }} IO:</span> <div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
<el-popover placement="bottom" :width="200" trigger="click"> <div>
<el-select @change="search('network')" v-model="networkChoose"> <span class="title">{{ $t('monitor.network') }} IO:</span>
<template #prefix>{{ $t('monitor.networkCard') }}</template> <el-popover placement="bottom" :width="200" trigger="click">
<div v-for="item in netOptions" :key="item"> <el-select @change="search('network')" v-model="networkChoose">
<el-option v-if="item === 'all'" :label="$t('commons.table.all')" :value="item" /> <template #prefix>{{ $t('monitor.networkCard') }}</template>
<el-option v-else :label="item" :value="item" /> <div v-for="item in netOptions" :key="item">
</div> <el-option
</el-select> v-if="item === 'all'"
<template #reference> :label="$t('commons.table.all')"
<span class="networkOption" v-if="networkChoose === 'all'"> :value="item"
{{ $t('commons.table.all') }} />
</span> <el-option v-else :label="item" :value="item" />
<span v-else class="networkOption"> </div>
{{ networkChoose }} </el-select>
</span> <template #reference>
</template> <span class="networkOption" v-if="networkChoose === 'all'">
</el-popover> {{ $t('commons.table.all') }}
<el-date-picker </span>
@change="search('network')" <span v-else class="networkOption">
v-model="timeRangeNetwork" {{ networkChoose }}
type="datetimerange" </span>
:range-separator="$t('commons.search.timeRange')" </template>
:start-placeholder="$t('commons.search.timeStart')" </el-popover>
:end-placeholder="$t('commons.search.timeEnd')" </div>
:shortcuts="shortcuts" <el-date-picker
style="float: right; margin-top: -5px; width: 360px" @change="search('network')"
></el-date-picker> v-model="timeRangeNetwork"
type="datetimerange"
:range-separator="$t('commons.search.timeRange')"
:start-placeholder="$t('commons.search.timeStart')"
:end-placeholder="$t('commons.search.timeEnd')"
:shortcuts="shortcuts"
style="max-width: 360px; width: 100%"
:size="mobile ? 'small' : 'default'"
></el-date-picker>
</div>
</template> </template>
<div id="loadNetworkChart" class="chart"></div> <div id="loadNetworkChart" class="chart"></div>
</el-card> </el-card>
@ -119,13 +140,20 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'; import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { loadMonitor, getNetworkOptions } from '@/api/modules/monitor'; import { loadMonitor, getNetworkOptions } from '@/api/modules/monitor';
import { Monitor } from '@/api/interface/monitor'; import { Monitor } from '@/api/interface/monitor';
import { dateFormatWithoutYear } from '@/utils/util'; import { dateFormatWithoutYear } from '@/utils/util';
import i18n from '@/lang'; import i18n from '@/lang';
import MonitorRouter from '@/views/host/monitor/index.vue'; import MonitorRouter from '@/views/host/monitor/index.vue';
import { GlobalStore } from '@/store';
const globalStore = GlobalStore();
const mobile = computed(() => {
return globalStore.isMobile();
});
const zoomStart = ref(); const zoomStart = ref();
const monitorBase = ref(); const monitorBase = ref();

51
frontend/src/views/log/login/index.vue
View file

@ -15,39 +15,44 @@
</el-button> </el-button>
</el-col> </el-col>
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8"> <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<TableSetting @search="search()" /> <div class="flx-align-center">
<div class="search-button"> <div class="search-button">
<el-input <el-input
v-model="searchIP" v-model="searchIP"
clearable clearable
@clear="search()" @clear="search()"
suffix-icon="Search" suffix-icon="Search"
@keyup.enter="search()" @keyup.enter="search()"
@change="search()" @change="search()"
:placeholder="$t('commons.button.search') + ' ip'" :placeholder="$t('commons.button.search') + ' ip'"
></el-input> ></el-input>
</div>
<TableSetting @search="search()" />
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
<template #search> <template #search>
<el-select v-model="searchStatus" @change="search()" clearable> <div class="flx-align-center">
<template #prefix>{{ $t('commons.table.status') }}</template> <el-select v-model="searchStatus" @change="search()" clearable>
<el-option :label="$t('commons.table.all')" value=""></el-option> <template #prefix>{{ $t('commons.table.status') }}</template>
<el-option :label="$t('commons.status.success')" value="Success"></el-option> <el-option :label="$t('commons.table.all')" value=""></el-option>
<el-option :label="$t('commons.status.failed')" value="Failed"></el-option> <el-option :label="$t('commons.status.success')" value="Success"></el-option>
</el-select> <el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
<el-button type="primary" plain @click="onClean()" style="margin-left: 10px"> </el-select>
{{ $t('logs.deleteLogs') }}
</el-button> <el-button type="primary" plain @click="onClean()" style="margin-left: 10px">
{{ $t('logs.deleteLogs') }}
</el-button>
</div>
</template> </template>
<template #main> <template #main>
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search"> <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<el-table-column min-width="40" :label="$t('logs.loginIP')" prop="ip" /> <el-table-column :label="$t('logs.loginIP')" prop="ip" />
<el-table-column min-width="40" :label="$t('logs.loginAddress')" prop="address" /> <el-table-column :label="$t('logs.loginAddress')" prop="address" />
<el-table-column :label="$t('logs.loginAgent')" show-overflow-tooltip prop="agent" /> <el-table-column :label="$t('logs.loginAgent')" show-overflow-tooltip prop="agent" />
<el-table-column min-width="40" :label="$t('logs.loginStatus')" prop="status"> <el-table-column :label="$t('logs.loginStatus')" prop="status">
<template #default="{ row }"> <template #default="{ row }">
<div v-if="row.status === 'Success'"> <div v-if="row.status === 'Success'">
<el-tag type="success">{{ $t('commons.status.success') }}</el-tag> <el-tag type="success">{{ $t('commons.status.success') }}</el-tag>

9
frontend/src/views/login/entrance/index.vue
View file

@ -145,9 +145,9 @@ onMounted(() => {
font-size: 40px; font-size: 40px;
font-family: pingFangSC-Regular; font-family: pingFangSC-Regular;
font-weight: 600; font-weight: 600;
// @media only screen and (max-width: 1440px) { @media only screen and (max-width: 768px) {
// margin-left: 0; font-size: 35px;
// } }
} }
@media only screen and (max-width: 1110px) { @media only screen and (max-width: 1110px) {
margin-bottom: 20px; margin-bottom: 20px;
@ -170,6 +170,9 @@ onMounted(() => {
@media only screen and (max-width: 1110px) { @media only screen and (max-width: 1110px) {
margin: 60px auto 0; margin: 60px auto 0;
} }
@media only screen and (max-width: 768px) {
width: 100%;
}
} }
} }
</style> </style>

10
frontend/src/views/login/index.vue
View file

@ -100,9 +100,9 @@ onMounted(() => {
font-size: 40px; font-size: 40px;
font-family: pingFangSC-Regular; font-family: pingFangSC-Regular;
font-weight: 600; font-weight: 600;
// @media only screen and (max-width: 1440px) { @media only screen and (max-width: 768px) {
// margin-left: 0; font-size: 35px;
// } }
} }
@media only screen and (max-width: 1110px) { @media only screen and (max-width: 1110px) {
margin-bottom: 20px; margin-bottom: 20px;
@ -125,6 +125,10 @@ onMounted(() => {
@media only screen and (max-width: 1110px) { @media only screen and (max-width: 1110px) {
margin: 60px auto 0; margin: 60px auto 0;
} }
@media only screen and (max-width: 768px) {
width: 100%;
}
} }
} }
</style> </style>