1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-10-17 02:46:49 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: Adjust the global interval style (#8408)

Browse source
This commit is contained in:
ssongliu 2025-04-16 16:20:20 +08:00 • committed by GitHub
parent dafeab8704
commit 0ee7e1d675
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 60 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/app-status/index.vue
View file

@ -2,7 +2,7 @@
<div class="app-status" v-if="data.isExist">
<el-card>
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<div class="flex flex-wrap gap-4 ml-3">
<el-tag effect="dark" type="success">{{ data.app }}</el-tag>
<Status class="mt-0.5" :key="refresh" :status="data.status"></Status>
<el-tag>{{ $t('app.version') }}{{ data.version }}</el-tag>

6
frontend/src/components/layout-content/index.vue
View file

@ -93,11 +93,11 @@ const showBack = computed(() => {
@use '@/styles/mixins.scss' as *;
.content-container__app {
margin-top: 20px;
margin-top: 7px;
}
.content-container__search {
margin-top: 20px;
margin-top: 7px;
.el-card {
--el-card-padding: 12px;
}
@ -121,7 +121,7 @@ const showBack = computed(() => {
}
.content-container__main {
margin-top: 20px;
margin-top: 7px;
}
.prompt {

2
frontend/src/layout/components/Sidebar/components/Logo.vue
View file

@ -41,7 +41,7 @@ const goHome = () => {
display: flex;
align-items: center;
justify-content: center;
height: 55px;
height: 49px;
z-index: 1;
img {
object-fit: contain;

6
frontend/src/layout/components/Sidebar/index.scss
View file

@ -7,8 +7,8 @@
.el-menu-item {
border-radius: 4px;
background-color: var(--el-menu-item-bg-color);
margin: 6px 0;
height: 46px;
margin: 7px 0;
height: 42px;
box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
box-sizing: border-box;
@ -51,7 +51,7 @@
.el-sub-menu__title {
background-color: var(--el-menu-item-bg-color);
box-shadow: 0 0 4px rgba(0, 94, 235, 0.1);
margin: 6px 0;
margin-top: 7px;
height: 46px;
border-radius: 4px;
&:hover {

4
frontend/src/layout/index.vue
View file

@ -2,7 +2,7 @@
<div :class="classObj" class="app-wrapper" v-loading="loading" :element-loading-text="loadingText" fullscreen>
<div v-if="classObj.mobile && classObj.openSidebar" class="drawer-bg" @click="handleClickOutside" />
<div class="app-sidebar" v-if="!globalStore.isFullScreen">
<el-affix :offset="18" class="affix">
<el-affix :offset="17" class="affix">
<el-tooltip
:content="menuStore.isCollapse ? $t('commons.button.expand') : $t('commons.button.collapse')"
>
@ -180,7 +180,7 @@ onMounted(() => {
overflow-x: hidden;
}
.app-main {
padding: 20px;
padding: 7px 20px;
flex: 1;
overflow: auto;
}

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

@ -144,7 +144,7 @@ html {
font-size: 12px;
.el-card {
--el-card-padding: 12px;
--el-card-padding: 9px;
.buttons {
margin-left: 100px;
@ -271,6 +271,10 @@ html {
width: 200px !important;
}
.card-interval {
margin-top: 7px;
}
.p-w-300 {
width: 300px !important;
}

8
frontend/src/views/ai/gpu/index.vue
View file

@ -33,7 +33,7 @@
{{ gpuInfo.cudaVersion }}
</el-descriptions-item>
</el-descriptions>
<el-collapse v-model="activeNames" class="mt-5">
<el-collapse v-model="activeNames" class="card-interval">
<el-collapse-item v-for="item in gpuInfo.gpu" :key="item.index" :name="item.index">
<template #title>
<span class="name-class">{{ item.index + '. ' + item.productName }}</span>
@ -152,7 +152,7 @@
}}
</el-descriptions-item>
</el-descriptions>
<div class="mt-5">
<div class="card-interval">
<span class="title-class">{{ $t('aiTools.gpu.process') }}</span>
</div>
<el-table :data="item.processes" v-if="item.processes?.length !== 0">
@ -191,7 +191,7 @@
{{ xpuInfo.driverVersion }}
</el-descriptions-item>
</el-descriptions>
<el-collapse v-model="activeNames" class="mt-5">
<el-collapse v-model="activeNames" class="card-interval">
<el-collapse-item
v-for="item in xpuInfo.xpu"
:key="item.basic.deviceID"
@ -226,7 +226,7 @@
{{ item.basic.pciBdfAddress }}
</el-descriptions-item>
</el-descriptions>
<div class="mt-5">
<div class="card-interval">
<span class="title-class">{{ $t('aiTools.gpu.process') }}</span>
</div>
<el-table :data="item.processes" v-if="item.processes?.length !== 0">

2
frontend/src/views/container/container/index.vue
View file

@ -2,7 +2,7 @@
<div v-loading="loading">
<docker-status v-model:isActive="isActive" v-model:isExist="isExist" @search="search" />
<div class="mt-5" v-if="isExist && isActive">
<div class="card-interval" v-if="isExist && isActive">
<el-tag @click="searchWithStatus('all')" v-if="countItem.all" effect="plain" size="large">
{{ $t('commons.table.all') }} * {{ countItem.all }}
</el-tag>

8
frontend/src/views/container/dashboard/index.vue
View file

@ -8,7 +8,7 @@
/>
<div v-if="isExist" :class="{ mask: !isActive }">
<CardWithHeader :header="$t('menu.container')" class="mt-5">
<CardWithHeader :header="$t('menu.container')" class="card-interval">
<template #body>
<span class="count" @click="goRouter('Container')">{{ countItem.containerCount }}</span>
</template>
@ -39,7 +39,7 @@
</el-tag>
</template>
</CardWithHeader>
<el-row :gutter="20" class="mt-5">
<el-row :gutter="7" class="card-interval">
<el-col :span="8">
<CardWithHeader :header="$t('container.compose')">
<template #body>
@ -69,7 +69,7 @@
</CardWithHeader>
</el-col>
</el-row>
<el-row :gutter="20" class="mt-5">
<el-row :gutter="7" class="card-interval">
<el-col :span="8">
<CardWithHeader :header="$t('container.imageRepo')">
<template #body>
@ -92,7 +92,7 @@
</CardWithHeader>
</el-col>
</el-row>
<CardWithHeader :header="$t('container.setting')" class="mt-5">
<CardWithHeader :header="$t('container.setting')" class="card-interval">
<template #body>
<el-descriptions :column="1" border>
<el-descriptions-item :label="$t('container.sockPath')">

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

@ -8,10 +8,10 @@
@search="search"
/>
<div v-if="isExist" class="app-status p-mt-20">
<div v-if="isExist" class="app-status card-interval">
<el-card>
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<div class="flex flex-wrap gap-4 ml-3">
<el-tag class="float-left" effect="dark" type="success">Docker</el-tag>
<Status class="mt-0.5" :status="isActive ? 'enable' : 'disable'" />
<el-tag>{{ $t('app.version') }}: {{ form.version }}</el-tag>
@ -32,7 +32,7 @@
</el-card>
</div>
<LayoutContent v-if="isExist" class="p-mt-20" :title="$t('container.setting')">
<LayoutContent v-if="isExist" class="card-interval" :title="$t('container.setting')">
<template #main>
<el-radio-group v-model="confShowType" @change="changeMode">
<el-radio-button value="base">{{ $t('database.baseConf') }}</el-radio-button>

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

@ -1,9 +1,9 @@
<template>
<div v-if="recordShow" v-loading="loading">
<div class="app-status p-mt-20">
<div class="app-status card-interval">
<el-card>
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<div class="flex flex-wrap gap-4 ml-3">
<el-popover
v-if="dialogData.rowData.name.length >= 15"
placement="top-start"

2
frontend/src/views/database/mysql/index.vue
View file

@ -3,7 +3,7 @@
<div class="app-status mt-5" v-if="currentDB?.from === 'remote'">
<el-card>
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<div class="flex flex-wrap gap-4 ml-3">
<el-tag class="float-left" effect="dark" type="success">
{{ currentDB?.type === 'mysql' ? 'Mysql' : 'MariaDB' }}
</el-tag>

2
frontend/src/views/database/postgresql/index.vue
View file

@ -3,7 +3,7 @@
<div class="app-status mt-5" v-if="currentDB?.from === 'remote'">
<el-card>
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<div class="flex flex-wrap gap-4 ml-3">
<el-tag class="float-left" effect="dark" type="success">PostgreSQL</el-tag>
<el-tag>{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
</div>

2
frontend/src/views/database/redis/index.vue
View file

@ -3,7 +3,7 @@
<div class="app-status mt-5" v-if="currentDB && currentDB.from === 'remote'">
<el-card>
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<div class="flex flex-wrap gap-4 ml-3">
<el-tag class="float-left" effect="dark" type="success">Redis</el-tag>
<el-tag>{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
</div>

4
frontend/src/views/home/app/index.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<CardWithHeader :header="$t('app.app')" class="mt-5" :loading="loading">
<CardWithHeader :header="$t('app.app')" class="card-interval" :loading="loading">
<template #header-r>
<el-popover placement="left" :width="226" trigger="click">
<el-input size="small" v-model="filter" clearable @input="loadOption()" />
@ -23,7 +23,7 @@
</el-popover>
</template>
<template #body>
<el-scrollbar height="545px" class="moz-height">
<el-scrollbar height="531px" class="moz-height">
<div class="h-app-card" v-for="(app, index) in apps" :key="index">
<el-row :gutter="5">
<el-col :span="5">

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

@ -21,7 +21,7 @@
<el-alert
v-if="!isSafety && globalStore.showEntranceWarn"
style="margin-top: 20px"
class="card-interval"
type="warning"
@close="hideEntrance"
>
@ -40,7 +40,7 @@
</template>
</el-alert>
<el-row :gutter="20" style="margin-top: 20px">
<el-row :gutter="7" class="card-interval">
<el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
<CardWithHeader :header="$t('menu.home')" height="166px">
<template #body>
@ -82,12 +82,12 @@
</div>
</template>
</CardWithHeader>
<CardWithHeader :header="$t('commons.table.status')" style="margin-top: 20px">
<CardWithHeader :header="$t('commons.table.status')" class="card-interval">
<template #body>
<Status ref="statusRef" style="margin-bottom: 33px" />
</template>
</CardWithHeader>
<CardWithHeader :header="$t('menu.monitor')" style="margin-top: 20px; margin-bottom: 20px">
<CardWithHeader :header="$t('menu.monitor')" class="card-interval">
<template #header-r>
<el-radio-group
style="float: right; margin-left: 5px"
@ -253,7 +253,7 @@
</template>
</CardWithHeader>
<AppLauncher ref="appRef" style="margin-top: 20px" />
<AppLauncher ref="appRef" class="card-interval" />
</el-col>
</el-row>

4
frontend/src/views/host/firewall/status/index.vue
View file

@ -1,8 +1,8 @@
<template>
<div class="app-status" style="margin-top: 20px" v-if="baseInfo.isExist">
<div class="app-status card-interval" v-if="baseInfo.isExist">
<el-card>
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<div class="flex flex-wrap gap-4 ml-3">
<el-tag effect="dark" type="success">{{ baseInfo.name }}</el-tag>
<Status class="mt-0.5" :status="baseInfo.isActive ? 'enable' : 'disable'" />
<el-tag>{{ $t('app.version') }}: {{ baseInfo.version }}</el-tag>

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

@ -19,7 +19,7 @@
</div>
</el-card>
</div>
<el-row :gutter="20" style="margin-top: 20px">
<el-row :gutter="7" class="card-interval">
<el-col :span="24">
<el-card style="overflow: inherit">
<template #header>
@ -51,7 +51,7 @@
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px">
<el-row :gutter="7" class="card-interval">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-card style="overflow: inherit">
<template #header>
@ -113,7 +113,7 @@
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px">
<el-row :gutter="7" class="card-interval">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<el-card style="overflow: inherit">
<template #header>
@ -570,7 +570,7 @@ onMounted(() => {
<style scoped lang="scss">
.content-container__search {
margin-top: 20px;
margin-top: 7px;
.el-card {
--el-card-padding: 12px;
}

4
frontend/src/views/host/ssh/ssh/index.vue
View file

@ -2,10 +2,10 @@
<div v-loading="loading">
<FireRouter />
<div class="app-status mt-5">
<div class="app-status card-interval">
<el-card>
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<div class="flex flex-wrap gap-4 ml-3">
<el-tag class="float-left" effect="dark" type="success">SSH</el-tag>
<Status class="mt-0.5" :status="form.isActive ? 'enable' : 'disable'" :msg="form.message" />
</div>

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

@ -2,8 +2,8 @@
<div>
<el-tabs
type="card"
class="terminal-tabs"
style="background-color: var(--panel-terminal-tag-bg-color); margin-top: 20px"
class="terminal-tabs card-interval"
style="background-color: var(--panel-terminal-tag-bg-color)"
v-model="terminalValue"
:before-leave="beforeLeave"
@tab-change="quickCmd = ''"
@ -246,13 +246,13 @@ const cleanTimer = () => {
};
const loadHeight = () => {
return globalStore.openMenuTabs ? '269px' : '229px';
return globalStore.openMenuTabs ? '230px' : '190px';
};
const loadEmptyHeight = () => {
return globalStore.openMenuTabs ? '240px' : '200px';
return globalStore.openMenuTabs ? '201px' : '156px';
};
const loadFullScreenHeight = () => {
return globalStore.openMenuTabs ? '66px' : '90px';
return globalStore.openMenuTabs ? '105px' : '60px';
};
const handleTabsRemove = (targetName: string, action: 'remove' | 'add') => {

6
frontend/src/views/toolbox/clam/status/index.vue
View file

@ -1,9 +1,9 @@
<template>
<div>
<div class="app-status tool-status" v-if="data.isExist">
<div class="app-status" v-if="data.isExist">
<el-card>
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<div class="flex flex-wrap gap-4 ml-3">
<el-tag class="w-17" effect="dark" type="success">ClamAV</el-tag>
<Status class="mt-0.5" :status="data.isActive ? 'enable' : 'disable'" />
<el-tag class="w-24">{{ $t('app.version') }}:{{ data.version }}</el-tag>
@ -33,7 +33,7 @@
</div>
</div>
<div class="flex w-full flex-col gap-4 md:flex-row mt-5" v-if="showFresh">
<div class="flex flex-wrap gap-4">
<div class="flex flex-wrap gap-4 ml-3">
<el-tag class="w-16" effect="dark" type="success">FreshClam</el-tag>
<Status class="mt-0.5" :status="data.freshIsActive ? 'enable' : 'disable'" />
<el-tag class="w-24">{{ $t('app.version') }}:{{ data.freshVersion }}</el-tag>

4
frontend/src/views/toolbox/fail2ban/index.vue
View file

@ -1,9 +1,9 @@
<template>
<div v-loading="loading">
<div class="app-status" style="margin-top: 20px">
<div class="app-status card-interval">
<el-card v-if="form.isExist">
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<div class="flex flex-wrap gap-4 ml-3">
<el-tag effect="dark" type="success">Fail2ban</el-tag>
<Status class="mt-0.5" :status="form.isActive ? 'enable' : 'disable'" />
<el-tag>{{ form.version }}</el-tag>

4
frontend/src/views/toolbox/ftp/index.vue
View file

@ -1,9 +1,9 @@
<template>
<div>
<div class="app-status mt-5">
<div class="app-status card-interval">
<el-card v-if="form.isExist">
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<div class="flex flex-wrap gap-4 ml-3">
<el-tag effect="dark" type="success">FTP</el-tag>
<Status class="mt-0.5" :status="form.isActive ? 'enable' : 'disable'" />
</div>

2
frontend/src/views/toolbox/supervisor/status/index.vue
View file

@ -3,7 +3,7 @@
<div class="app-status" v-if="data.isExist">
<el-card>
<div class="flex w-full flex-col gap-4 md:flex-row">
<div class="flex flex-wrap gap-4">
<div class="flex flex-wrap gap-4 ml-3">
<el-tag effect="dark" type="success">{{ 'Supervisor' }}</el-tag>
<Status class="mt-0.5" :key="data.status" :status="data.status"></Status>
<el-tag>{{ $t('app.version') }}:{{ data.version }}</el-tag>