Skip to content

Commit

Permalink
feat: Optimize mobile style (#7417)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssongliu
ssongliu authored Dec 18, 2024
1 parent d1feb50 commit 524c714
Show file tree
Hide file tree
Showing 11 changed files with 180 additions and 156 deletions.
30 changes: 15 additions & 15 deletions frontend/src/views/container/setting/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,35 @@
<div v-loading="loading">
<div class="app-status p-mt-20">
<el-card>
<div>
<el-tag class="float-left" effect="dark" type="success">Docker</el-tag>
<el-tag round class="status-content" v-if="form.status === 'Running'" type="success">
{{ $t('commons.status.running') }}
</el-tag>
<el-tag round class="status-content" v-if="form.status === 'Stopped'" type="info">
{{ $t('commons.status.stopped') }}
</el-tag>
<el-tag class="status-content">{{ $t('app.version') }}: {{ form.version }}</el-tag>

<span v-if="form.status === 'Running'" class="buttons">
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<el-tag class="float-left" effect="dark" type="success">Docker</el-tag>
<el-tag round v-if="form.status === 'Running'" type="success">
{{ $t('commons.status.running') }}
</el-tag>
<el-tag round v-if="form.status === 'Stopped'" type="info">
{{ $t('commons.status.stopped') }}
</el-tag>
<el-tag>{{ $t('app.version') }}: {{ form.version }}</el-tag>
</div>
<div class="mt-0.5" v-if="form.status === 'Running'">
<el-button type="primary" @click="onOperator('stop')" link>
{{ $t('container.stop') }}
</el-button>
<el-divider direction="vertical" />
<el-button type="primary" @click="onOperator('restart')" link>
{{ $t('container.restart') }}
</el-button>
</span>

<span v-if="form.status === 'Stopped'" class="buttons">
</div>
<div class="mt-0.5" v-if="form.status === 'Stopped'">
<el-button type="primary" @click="onOperator('start')" link>
{{ $t('container.start') }}
</el-button>
<el-divider direction="vertical" />
<el-button type="primary" @click="onOperator('restart')" link>
{{ $t('container.restart') }}
</el-button>
</span>
</div>
</div>
</el-card>
</div>
Expand Down
59 changes: 33 additions & 26 deletions frontend/src/views/cronjob/record/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,39 @@
<div v-if="recordShow" v-loading="loading">
<div class="app-status p-mt-20">
<el-card>
<div>
<el-popover
v-if="dialogData.rowData.name.length >= 15"
placement="top-start"
trigger="hover"
width="250"
:content="$t('cronjob.' + dialogData.rowData.type) + ' - ' + dialogData.rowData.name"
>
<template #reference>
<el-tag style="float: left" effect="dark" type="success">
{{ $t('cronjob.' + dialogData.rowData.type) }} -
{{ dialogData.rowData.name.substring(0, 12) }}...
</el-tag>
</template>
</el-popover>
<el-tag v-if="dialogData.rowData.name.length < 15" class="float-left" effect="dark" type="success">
{{ $t('cronjob.' + dialogData.rowData.type) }} - {{ dialogData.rowData.name }}
</el-tag>
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<el-popover
v-if="dialogData.rowData.name.length >= 15"
placement="top-start"
trigger="hover"
width="250"
:content="$t('cronjob.' + dialogData.rowData.type) + ' - ' + dialogData.rowData.name"
>
<template #reference>
<el-tag style="float: left" effect="dark" type="success">
{{ $t('cronjob.' + dialogData.rowData.type) }} -
{{ dialogData.rowData.name.substring(0, 12) }}...
</el-tag>
</template>
</el-popover>
<el-tag
v-if="dialogData.rowData.name.length < 15"
class="float-left"
effect="dark"
type="success"
>
{{ $t('cronjob.' + dialogData.rowData.type) }} - {{ dialogData.rowData.name }}
</el-tag>

<el-tag v-if="dialogData.rowData.status === 'Enable'" round class="status-content" type="success">
{{ $t('commons.status.running') }}
</el-tag>
<el-tag v-if="dialogData.rowData.status === 'Disable'" round class="status-content" type="info">
{{ $t('commons.status.stopped') }}
</el-tag>
<span class="buttons">
<el-tag v-if="dialogData.rowData.status === 'Enable'" round type="success">
{{ $t('commons.status.running') }}
</el-tag>
<el-tag v-if="dialogData.rowData.status === 'Disable'" round type="info">
{{ $t('commons.status.stopped') }}
</el-tag>
</div>
<div class="mt-0.5">
<el-button type="primary" @click="onHandle(dialogData.rowData)" link>
{{ $t('commons.button.handle') }}
</el-button>
Expand All @@ -52,7 +59,7 @@
<el-button :disabled="!hasRecords" type="primary" @click="onClean" link>
{{ $t('commons.button.clean') }}
</el-button>
</span>
</div>
</div>
</el-card>
</div>
Expand Down
12 changes: 7 additions & 5 deletions frontend/src/views/database/mysql/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@
<div v-loading="loading">
<div class="app-status mt-5" v-if="currentDB?.from === 'remote'">
<el-card>
<div>
<el-tag class="float-left" effect="dark" type="success">
{{ currentDB?.type === 'mysql' ? 'Mysql' : 'MariaDB' }}
</el-tag>
<el-tag class="status-content">{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<el-tag class="float-left" effect="dark" type="success">
{{ currentDB?.type === 'mysql' ? 'Mysql' : 'MariaDB' }}
</el-tag>
<el-tag>{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
</div>
</div>
</el-card>
</div>
Expand Down
8 changes: 5 additions & 3 deletions frontend/src/views/database/postgresql/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@
<div v-loading="loading">
<div class="app-status mt-5" v-if="currentDB?.from === 'remote'">
<el-card>
<div>
<el-tag class="float-left" effect="dark" type="success">PostgreSQL</el-tag>
<el-tag class="status-content">{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<el-tag class="float-left" effect="dark" type="success">PostgreSQL</el-tag>
<el-tag>{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
</div>
</div>
</el-card>
</div>
Expand Down
8 changes: 5 additions & 3 deletions frontend/src/views/database/redis/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@
<div v-loading="loading">
<div class="app-status mt-5" v-if="currentDB && currentDB.from === 'remote'">
<el-card>
<div>
<el-tag class="float-left" effect="dark" type="success">Redis</el-tag>
<el-tag class="status-content">{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<el-tag class="float-left" effect="dark" type="success">Redis</el-tag>
<el-tag>{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
</div>
</div>
</el-card>
</div>
Expand Down
61 changes: 30 additions & 31 deletions frontend/src/views/host/firewall/status/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,41 @@
<div>
<div class="app-status" style="margin-top: 20px">
<el-card>
<div>
<el-tag effect="dark" type="success">{{ baseInfo.name }}</el-tag>
<el-tag round class="status-content" v-if="baseInfo.status === 'running'" type="success">
{{ $t('commons.status.running') }}
</el-tag>
<el-tag round class="status-content" v-if="baseInfo.status === 'not running'" type="info">
{{ $t('commons.status.stopped') }}
</el-tag>
<el-tag class="status-content">{{ $t('app.version') }}: {{ baseInfo.version }}</el-tag>

<span v-if="baseInfo.status === 'running'" class="buttons">
<el-button type="primary" @click="onOperate('stop')" link>
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<el-tag effect="dark" type="success">{{ baseInfo.name }}</el-tag>
<el-tag round v-if="baseInfo.status === 'running'" type="success">
{{ $t('commons.status.running') }}
</el-tag>
<el-tag round v-if="baseInfo.status === 'not running'" type="info">
{{ $t('commons.status.stopped') }}
</el-tag>
<el-tag>{{ $t('app.version') }}: {{ baseInfo.version }}</el-tag>
</div>
<div class="mt-0.5">
<el-button type="primary" v-if="baseInfo.status === 'running'" @click="onOperate('stop')" link>
{{ $t('commons.button.stop') }}
</el-button>
</span>
<span v-if="baseInfo.status === 'not running'" class="buttons">
<el-button type="primary" @click="onOperate('start')" link>
<el-button type="primary" v-if="baseInfo.status !== 'running'" @click="onOperate('start')" link>
{{ $t('commons.button.start') }}
</el-button>
</span>
<el-divider direction="vertical" />
<el-button type="primary" @click="onOperate('restart')" link>
{{ $t('container.restart') }}
</el-button>
<span v-if="onPing !== 'None'">
<el-divider direction="vertical" />
<el-button type="primary" link>{{ $t('firewall.noPing') }}</el-button>
<el-switch
size="small"
class="ml-2"
inactive-value="Disable"
active-value="Enable"
@change="onPingOperate"
v-model="onPing"
/>
</span>
<el-button type="primary" @click="onOperate('restart')" link>
{{ $t('container.restart') }}
</el-button>
<span v-if="onPing !== 'None'">
<el-divider direction="vertical" />
<el-button type="primary" link>{{ $t('firewall.noPing') }}</el-button>
<el-switch
size="small"
class="ml-2"
inactive-value="Disable"
active-value="enable"
@change="onPingOperate"
v-model="onPing"
/>
</span>
</div>
</div>
</el-card>
</div>
Expand Down
42 changes: 22 additions & 20 deletions frontend/src/views/host/ssh/ssh/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,27 @@

<div class="app-status mt-5">
<el-card>
<div>
<el-tag class="float-left" effect="dark" type="success">SSH</el-tag>
<el-tag round class="status-content" v-if="form.status === 'Enable'" type="success">
{{ $t('commons.status.running') }}
</el-tag>
<el-popover
v-if="form.status === 'Disable'"
placement="top-start"
trigger="hover"
width="450"
:content="form.message"
>
<template #reference>
<el-tag round class="status-content" v-if="form.status === 'Disable'" type="info">
{{ $t('commons.status.stopped') }}
</el-tag>
</template>
</el-popover>
<span class="buttons">
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<el-tag class="float-left" effect="dark" type="success">SSH</el-tag>
<el-tag round v-if="form.status === 'Enable'" type="success">
{{ $t('commons.status.running') }}
</el-tag>
<el-popover
v-if="form.status === 'Disable'"
placement="top-start"
trigger="hover"
width="450"
:content="form.message"
>
<template #reference>
<el-tag round v-if="form.status === 'Disable'" type="info">
{{ $t('commons.status.stopped') }}
</el-tag>
</template>
</el-popover>
</div>
<div class="mt-0.5">
<el-button v-if="form.status === 'Enable'" type="primary" @click="onOperate('stop')" link>
{{ $t('commons.button.stop') }}
</el-button>
Expand All @@ -45,7 +47,7 @@
@change="onOperate(autoStart)"
v-model="autoStart"
/>
</span>
</div>
</div>
</el-card>
</div>
Expand Down
48 changes: 26 additions & 22 deletions frontend/src/views/toolbox/clam/status/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,18 @@
<div>
<div class="app-status tool-status" v-if="data.isExist">
<el-card>
<div>
<el-tag class="w-17" effect="dark" type="success">ClamAV</el-tag>
<el-tag round class="status-content" v-if="data.isActive" type="success">
{{ $t('commons.status.running') }}
</el-tag>
<el-tag round class="status-content" v-if="!data.isActive" type="info">
{{ $t('commons.status.stopped') }}
</el-tag>
<el-tag class="status-content w-24">{{ $t('app.version') }}:{{ data.version }}</el-tag>
<span class="buttons">
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<el-tag class="w-17" effect="dark" type="success">ClamAV</el-tag>
<el-tag round v-if="data.isActive" type="success">
{{ $t('commons.status.running') }}
</el-tag>
<el-tag round v-if="!data.isActive" type="info">
{{ $t('commons.status.stopped') }}
</el-tag>
<el-tag class="w-24">{{ $t('app.version') }}:{{ data.version }}</el-tag>
</div>
<div class="mt-0.5">
<el-button type="primary" v-if="!data.isActive" link @click="onOperate('ClamAV', 'start')">
{{ $t('app.start') }}
</el-button>
Expand All @@ -33,18 +35,20 @@
<el-button type="primary" v-if="!showFresh" link @click="changeShow(true)">
{{ $t('toolbox.clam.showFresh') }}
</el-button>
</span>
</div>
</div>
<div class="mt-4" v-if="showFresh">
<el-tag class="w-16" effect="dark" type="success">FreshClam</el-tag>
<el-tag round class="status-content" v-if="data.freshIsActive" type="success">
{{ $t('commons.status.running') }}
</el-tag>
<el-tag round class="status-content" v-if="!data.freshIsActive" type="info">
{{ $t('commons.status.stopped') }}
</el-tag>
<el-tag class="status-content w-24">{{ $t('app.version') }}:{{ data.freshVersion }}</el-tag>
<span class="buttons">
<div class="flex w-full flex-col gap-4 md:flex-row mt-5" v-if="showFresh">
<div class="flex flex-wrap gap-4">
<el-tag class="w-16" effect="dark" type="success">FreshClam</el-tag>
<el-tag round v-if="data.freshIsActive" type="success">
{{ $t('commons.status.running') }}
</el-tag>
<el-tag round v-if="!data.freshIsActive" type="info">
{{ $t('commons.status.stopped') }}
</el-tag>
<el-tag class="w-24">{{ $t('app.version') }}:{{ data.freshVersion }}</el-tag>
</div>
<div class="mt-0.5">
<el-button
type="primary"
v-if="!data.freshIsActive"
Expand All @@ -65,7 +69,7 @@
<el-button type="primary" link @click="onOperate('FreshClam', 'restart')">
{{ $t('app.restart') }}
</el-button>
</span>
</div>
</div>
</el-card>
</div>
Expand Down
Loading

0 comments on commit 524c714

Please sign in to comment.