Skip to content

style: Adjust the global interval style #8408

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
f2c-ci-robot merged 1 commit into from
Apr 16, 2025
Merged

style: Adjust the global interval style #8408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/components/app-status/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/layout-content/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -121,7 +121,7 @@ const showBack = computed(() => {
}

.content-container__main {
margin-top: 20px;
margin-top: 7px;
}

.prompt {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/layout/components/Sidebar/components/Logo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/layout/components/Sidebar/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/layout/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')"
>
Expand Down Expand Up @@ -180,7 +180,7 @@ onMounted(() => {
overflow-x: hidden;
}
.app-main {
padding: 20px;
padding: 7px 20px;
flex: 1;
overflow: auto;
}
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/styles/common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ html {
font-size: 12px;

.el-card {
--el-card-padding: 12px;
--el-card-padding: 9px;

.buttons {
margin-left: 100px;
Expand Down Expand Up @@ -271,6 +271,10 @@ html {
width: 200px !important;
}

.card-interval {
margin-top: 7px;
}

.p-w-300 {
width: 300px !important;
}
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/views/ai/gpu/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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">
Copy link
Copy Markdown
Member

@wanghe-fit2cloud wanghe-fit2cloud Apr 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only significant change between versions is that the el-collapse class has been modified from "mt-5" to "card-interval". This could potentially affect spacing and styling when applied elsewhere in the codebase. However, without more context or additional changes, it's not clear whether this is an intentional adjustment for layout improvements.

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/container/container/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/views/container/dashboard/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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')">
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/views/container/setting/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/views/cronjob/cronjob/record/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/database/mysql/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/database/postgresql/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/database/redis/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/views/home/app/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()" />
Expand All @@ -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">
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/views/home/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@

<el-alert
v-if="!isSafety && globalStore.showEntranceWarn"
style="margin-top: 20px"
class="card-interval"
type="warning"
@close="hideEntrance"
>
Expand All @@ -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>
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -253,7 +253,7 @@
</template>
</CardWithHeader>

<AppLauncher ref="appRef" style="margin-top: 20px" />
<AppLauncher ref="appRef" class="card-interval" />
</el-col>
</el-row>

Copy link
Copy Markdown
Member

@wanghe-fit2cloud wanghe-fit2cloud Apr 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the provided code snippet, there are a few potential issues and optimizations that could be considered:

  1. Consistent Class Names: The CSS class name card-interval is used inconsistently throughout the codebase. It would be better if this was consistently applied.

  2. Duplicate Code Review Needed: Some of the repeated template content within CardWithHeader components can be reduced by creating reusable slots or templates.

Here’s an optimized version with suggested changes:

-<el-row :gutter="20" style="margin-top: 20px">
+<el-row :gutter="[20, 7]">  <!-- Use array syntax for consistent gutter settings -->
    <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
        <CardWithHeader :header="$t('menu.home')" height="166px">
            <template #body>
                <div></div> <!-- Template content here -->
            </template>
        </CardWithHeader>

        <CardWithHeader :header="$t('commons.table.status')" class="card-interval">
            <template #body>
                <Status ref="statusRef" />
            </template>
        </CardWithHeader>

        <CardWithHeader :header="$t('menu.monitor')" class="card-interval">
            <template r>
                <el-radio-group
                    style="float: right; margin-left: 5px"
                >
                    <!-- Radio group options go here -->
                </el-radio-group>
            </template>
        </CardWithHeader>

        <CardWithHeader header="$t('menu.app.launcher')" class="card-interval">
            <template #body>
                <AppLauncher ref="appRef"/>
            </template>
        </CardWithHeader>
    </el-col>
</el-row>

Key Changes:

  • Array Syntax for Gutter: Replaced [20, 7] syntax for gutters to ensure consistency across different screen sizes.
  • Removed Unused Margin Styles: Removed inline styles like style="margin-top: 20px" where applicable, ensuring cleaner HTML structure and easier maintenance.
  • Reduced Repetition: Consolidated shared template contents into parent components (e.g., using <Slot> elements) within each <CardWithHeader> component to promote DRY principles.

These improvements make the code more maintainable and adhere to best practices.

Expand Down
4 changes: 2 additions & 2 deletions frontend/src/views/host/firewall/status/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/views/host/monitor/monitor/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -570,7 +570,7 @@ onMounted(() => {

<style scoped lang="scss">
.content-container__search {
margin-top: 20px;
margin-top: 7px;
.el-card {
--el-card-padding: 12px;
}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/views/host/ssh/ssh/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/views/terminal/terminal/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ''"
Expand Down Expand Up @@ -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') => {
Copy link
Copy Markdown
Member

@wanghe-fit2cloud wanghe-fit2cloud Apr 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are several areas of optimization and potential issues you could address:

Potential Issues:

  1. Duplicate Content: The same text ("229px", "200px", etc.) is repeated three times without explanation in loadEmptyHeight and loadFullscreenHeight, which can be cleaned up.

Optimization Suggestions:

  1. Simplify Height Calculation:

    • Combine the calculations for different states into a single function that handles all three cases based on globalStore.openMenuTabs. This makes maintenance easier if more logic or dependencies are introduced later.
    const getTabContainerHeight = (type) => {
    switch (type) {
        case 'openMenuTabs':
            return globalStore.openMenuTabs ? ['66px', '90px'] : ['105px', '60px'];
        default:
            return [...Array(3).keys()].map(() => 'auto'); // Adjust this line as needed based on specific requirements
    }
};

  2. Improve Tab Removal Logic:

    • Ensure that handleTabsRemove correctly manages the removal of tabs, possibly adding checks to manage edge cases such as attempting to remove the active tab.
    const handleTabsRemove = (targetName: string, action: 'remove' | 'add') => {
    if (action === 'remove') {
        const index = globalState.tabs.findIndex(tab => tab.name === targetName);
        if (index !== -1 && index > 0) { // Only allow removing non-active tabs from the first position
            globalState.tabs.splice(index, 1);
            emit('change-tabs', new Tabs(globalState.tabs));
        }
    } else if (action === 'add') {
        // Implement logic to add new tabs here
    }
};

By applying these suggestions, you enhance not only the readability but also maintainability and performance of your application. Make sure to test thoroughly after making changes to ensure they behave as expected across various scenarios.

Expand Down
Loading
Loading