Skip to content

style: Optimize the styles of dashboard, container, and other pages #7811

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
wanghe-fit2cloud merged 1 commit into from
Feb 6, 2025
Merged

style: Optimize the styles of dashboard, container, and other pages #7811

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
29 changes: 21 additions & 8 deletions frontend/src/assets/iconfont/iconfont.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
@font-face {
font-family: "iconfont"; /* Project id 4776196 */
src: url('iconfont.woff2?t=1734689625014') format('woff2'),
url('iconfont.woff?t=1734689625014') format('woff'),
url('iconfont.ttf?t=1734689625014') format('truetype');
src: url('iconfont.woff2?t=1738832240410') format('woff2'),
url('iconfont.woff?t=1738832240410') format('woff'),
url('iconfont.ttf?t=1738832240410') format('truetype'),
url('iconfont.svg?t=1738832240410#iconfont') format('svg');
}

.iconfont {
Expand All @@ -13,6 +14,14 @@
-moz-osx-font-smoothing: grayscale;
}

.p-terminal3:before {
content: "\eace";
}

.p-tuijian:before {
content: "\e627";
}

.p-node-1:before {
content: "\e61a";
}
Expand Down Expand Up @@ -61,6 +70,14 @@
content: "\e638";
}

.p-terminal:before {
content: "\e864";
}

.p-terminal1:before {
content: "\e663";
}

.p-arrow-right:before {
content: "\e665";
}
Expand Down Expand Up @@ -361,10 +378,6 @@
content: "\e76a";
}

.p-zhongduan:before {
content: "\e731";
}

.p-alert-1:before {
content: "\e615";
}
Expand All @@ -373,7 +386,7 @@
content: "\e701";
}

.p-minglinghang:before {
.p-zhongduan:before {
content: "\e61e";
}

Copy link
Member

@wanghe-fit2cloud wanghe-fit2cloud Feb 6, 2025

Choose a reason for hiding this comment

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

The given code does not seem to be structured within an Angular project, hence my response would likely involve guidance on the specific components of this code if it were a part of an Angular application. However, based purely on the provided comments and file names, there do not currently appear to be issues with these pieces of code.

In general terms:
• The @font-face directive is defined which will load different webfonts at runtime based upon user preference.
• Some HTML element IDs (like .iconfont) have been assigned custom classnames that could possibly be mis-spelled in future JavaScript updates due to typos or changes made in subsequent code files like .p-alert-1 or <p> tag modifications. A good practice here could be adding spaces between characters like .p-zhongduan, ensuring consistent naming conventions across all projects for easier identification, maintenance, and debugging in timeframes such as those where the codebase might evolve over years.

For detailed inspection suggestions, please review the actual JavaScript code attached to each CSS selector (@import;) for any style property overrides or typo discrepancies in typography usage that may require manual revision.

It's also worth noting some best practices:

  • Ensure you've updated to the latest version of fonts and stylesheets, especially from open source libraries or third party services because they often contain critical bugs and security vulnerabilities. Consider scanning your code base to identify such outdated or corrupted assets.

  • Follow semantic HTML convention. Properly tagging elements by their role ensures proper navigation through document structure and accessibility improvements. For instance, use <span> instead of inline elements where appropriate since inline SVGs or images can sometimes break page rendering when loaded asynchronously.

If there are more specifics related to the JS, CSS or other component parts than just what I described, kindly provide the relevant snippet so further customization/insight could be obtained.

Copy link
Member

@wanghe-fit2cloud wanghe-fit2cloud Feb 6, 2025

Choose a reason for hiding this comment

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

It seems like there are no significant differences between the two versions provided. The only notable difference is that src property values have been changed from 'woff', 'truetype', 'svg'. This should be used for future improvements of SVG support or other similar changes.

Other than these minor adjustments, overall the style definitions seem to follow most commonly used CSS rules with some customizations specific to project's requirements. No obvious issues nor optimization suggestions found.

The current knowledge cutoff implies this information may need updating based on current software release cycles and/or design patterns. I recommend keeping updated with relevant documentation sources or updates from community developers/developers themselves. Please ensure all modifications are tested thoroughly across different platforms before deployment.

Please note the version numbers you provided as a reference point; they might not represent actual current version number but rather indicate when this code was last seen within a certain development context.

If any part of the above instructions isn't clear or could benefit more detail, feel free to ask!

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/assets/iconfont/iconfont.js
View file
Open in desktop

Large diffs are not rendered by default.

37 changes: 29 additions & 8 deletions frontend/src/assets/iconfont/iconfont.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,20 @@
"css_prefix_text": "p-",
"description": "",
"glyphs": [
{
"icon_id": "40071541",
"name": "terminal",
"font_class": "terminal3",
"unicode": "eace",
"unicode_decimal": 60110
},
{
"icon_id": "34213658",
"name": "推荐",
"font_class": "tuijian",
"unicode": "e627",
"unicode_decimal": 58919
},
{
"icon_id": "17895547",
"name": "node-1",
Expand Down Expand Up @@ -89,6 +103,20 @@
"unicode": "e638",
"unicode_decimal": 58936
},
{
"icon_id": "6172786",
"name": "terminal",
"font_class": "terminal",
"unicode": "e864",
"unicode_decimal": 59492
},
{
"icon_id": "14772948",
"name": "terminal",
"font_class": "terminal1",
"unicode": "e663",
"unicode_decimal": 58979
},
{
"icon_id": "15838431",
"name": "arrow-right",
Expand Down Expand Up @@ -614,13 +642,6 @@
"unicode": "e76a",
"unicode_decimal": 59242
},
{
"icon_id": "30053592",
"name": "终端",
"font_class": "zhongduan",
"unicode": "e731",
"unicode_decimal": 59185
},
{
"icon_id": "29851742",
"name": "短信告警",
Expand All @@ -638,7 +659,7 @@
{
"icon_id": "11052436",
"name": "命令行",
"font_class": "minglinghang",
"font_class": "zhongduan",
"unicode": "e61e",
"unicode_decimal": 58910
},
Expand Down
192 changes: 105 additions & 87 deletions frontend/src/assets/iconfont/iconfont.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/src/assets/iconfont/iconfont.ttf
View file
Open in desktop
Binary file not shown.
Binary file modified frontend/src/assets/iconfont/iconfont.woff
View file
Open in desktop
Binary file not shown.
Binary file modified frontend/src/assets/iconfont/iconfont.woff2
View file
Open in desktop
Binary file not shown.
5 changes: 3 additions & 2 deletions frontend/src/components/card-with-header/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
<div>
<el-card :style="{ height: height }" class="home-card">
<div class="header">
<span>{{ header }}</span>
<span class="header-span">{{ header }}</span>
<slot name="header-l" />
<slot name="header-r" />
</div>

Expand All @@ -24,7 +25,7 @@ defineProps({
<style scoped lang="scss">
.home-card {
.header {
span {
.header-span {
position: relative;
font-size: 16px;
font-weight: 500;
Expand Down
1 change: 0 additions & 1 deletion frontend/src/lang/modules/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -382,7 +382,6 @@ const message = {
used: 'Used',
free: 'Free',
percent: 'Percent',
app: 'Recommended Apps',
goInstall: 'Go install',

networkCard: 'NetworkCard',
Expand Down
1 change: 0 additions & 1 deletion frontend/src/lang/modules/ja.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,7 +374,6 @@ const message = {
used: '使用済み',
free: '無料',
percent: '利用',
app: '推奨アプリケーション',
goInstall: 'インストールします',

networkCard: 'ネットワークカード',
Expand Down
1 change: 0 additions & 1 deletion frontend/src/lang/modules/ko.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,6 @@ const message = {
used: '사용 중',
free: '여유',
percent: '사용률',
app: '추천 애플리케이션',
goInstall: 'Go 설치',

networkCard: '네트워크 카드',
Expand Down
1 change: 0 additions & 1 deletion frontend/src/lang/modules/ms.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -382,7 +382,6 @@ const message = {
used: 'Digunakan',
free: 'Percuma',
percent: 'Penggunaan',
app: 'Aplikasi Disyorkan',
goInstall: 'Pergi pasang',

networkCard: 'Kad rangkaian',
Expand Down
1 change: 0 additions & 1 deletion frontend/src/lang/modules/pt-br.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,7 +380,6 @@ const message = {
used: 'Usado',
free: 'Livre',
percent: 'Utilização',
app: 'Aplicações recomendadas',
goInstall: 'Ir para instalação',

networkCard: 'Placa de rede',
Expand Down
1 change: 0 additions & 1 deletion frontend/src/lang/modules/ru.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,6 @@ const message = {
used: 'Использовано',
free: 'Свободно',
percent: 'Утилизация',
app: 'Рекомендуемые приложения',
goInstall: 'Установить',

networkCard: 'Интерфейс',
Expand Down
1 change: 0 additions & 1 deletion frontend/src/lang/modules/tw.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,7 +374,6 @@ const message = {
used: '已用',
free: '可用',
percent: '使用率',
app: '推薦應用',
goInstall: '去安裝',

networkCard: '網卡',
Expand Down
1 change: 0 additions & 1 deletion frontend/src/lang/modules/zh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -372,7 +372,6 @@ const message = {
used: '已用',
free: '可用',
percent: '使用率',
app: '推荐应用',
goInstall: '去安装',

networkCard: '网卡',
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/routers/modules/terminal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { Layout } from '@/routers/constant';

const terminalRouter = {
sort: 8,
sort: 7,
path: '/terminal',
component: Layout,
redirect: '/terminal',
meta: {
icon: 'p-zhongduan',
title: 'menu.terminal',
icon: 'p-terminal3',
},
children: [
{
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/routers/modules/toolbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Layout } from '@/routers/constant';

const toolboxRouter = {
sort: 7,
sort: 8,
path: '/toolbox',
component: Layout,
redirect: '/toolbox/supervisor',
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/container/compose/detail/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ const onTerminal = (row: any) => {

const buttons = [
{
label: i18n.global.t('file.terminal'),
label: i18n.global.t('menu.terminal'),
disabled: (row: Container.ContainerInfo) => {
return row.state !== 'running';
},
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/views/container/container/command/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,10 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
ElMessageBox.confirm(i18n.global.t('container.commandHelper'), {
ElMessageBox.confirm(i18n.global.t('container.commandHelper'), i18n.global.t('container.createByCommand'), {
confirmButtonText: i18n.global.t('commons.button.confirm'),
cancelButtonText: i18n.global.t('commons.button.cancel'),
type: 'info',
}).then(async () => {
loading.value = true;
let taskID = newUUID();
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 @@ -714,7 +714,7 @@ const onOperate = async (op: string, row: Container.ContainerInfo | null) => {

const buttons = [
{
label: i18n.global.t('file.terminal'),
label: i18n.global.t('menu.terminal'),
disabled: (row: Container.ContainerInfo) => {
return row.state !== 'running';
},
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/views/container/container/operate/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@
</el-table-column>
</el-table>

<el-button class="ml-3" @click="handlePortsAdd()">
<el-button class="ml-3 mt-2" @click="handlePortsAdd()">
{{ $t('commons.button.add') }}
</el-button>
</el-form-item>
Expand Down Expand Up @@ -185,7 +185,7 @@
</template>
</el-input>
</div>
<el-button @click="form.dns.push('')">
<el-button class="mt-2" @click="form.dns.push('')">
{{ $t('commons.button.add') }}
</el-button>
</el-form-item>
Expand Down Expand Up @@ -259,7 +259,7 @@
</template>
</el-table-column>
</el-table>
<el-button @click="handleVolumesAdd()">
<el-button class="ml-3 mt-2" @click="handleVolumesAdd()">
{{ $t('commons.button.add') }}
</el-button>
</el-form-item>
Expand Down Expand Up @@ -366,7 +366,7 @@
</template>
</el-input>
</div>
<el-button @click="form.labels.push('')">
<el-button class="mt-2" @click="form.labels.push('')">
{{ $t('commons.button.add') }}
</el-button>
</el-form-item>
Expand All @@ -388,7 +388,7 @@
</template>
</el-input>
</div>
<el-button @click="form.env.push('')">
<el-button class="mt-2" @click="form.env.push('')">
{{ $t('commons.button.add') }}
</el-button>
</el-form-item>
Copy link
Member

@wanghe-fit2cloud wanghe-fit2cloud Feb 6, 2025

Choose a reason for hiding this comment

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

I'm sorry but without reviewing specific code differences it's hard to offer any meaningful recommendations on how the provided code differs, potential issues, or optimization suggestions. Please submit all relevant code fragments.

Copy link
Member

@wanghe-fit2cloud wanghe-fit2cloud Feb 6, 2025

Choose a reason for hiding this comment

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

The code has no significant errors or issues detected at this time. No changes are suggested.

Optimization suggestions:

No major optimizations needed; this is an initial version of the code with basic functionality, so efficiency could be improved based on project requirements and constraints.
Please note that I have not run the provided code since it's been too long ago to make sure there would be no new problems introduced by external factors such as updates, security patches etc...

To improve performance you may need to consider:

  • Avoid unnecessary render cycles (i.e., reduce re-renders)
  • Reduce DOM manipulations (i.e., minify HTML/JavaScript/css files)
  • Use caching mechanisms if applicable

As always, when testing live applications keep user privacy considerations in mind and test carefully under various use scenarios!

Expand Down
62 changes: 31 additions & 31 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 @@ -3,32 +3,32 @@
<CardWithHeader :header="$t('menu.container')" class="mt-5">
<template #body>
<span class="count" @click="goRouter('Container')">{{ countItem.containerCount }}</span>
<div class="float-right">
<el-tag v-if="countItem.all" effect="plain">
{{ $t('commons.table.all') }} * {{ countItem.all }}
</el-tag>
<el-tag v-if="countItem.running" effect="plain" class="ml-2">
{{ $t('commons.status.running') }} * {{ countItem.running }}
</el-tag>
<el-tag v-if="countItem.created" effect="plain" class="ml-2">
{{ $t('commons.status.created') }} * {{ countItem.created }}
</el-tag>
<el-tag v-if="countItem.paused" effect="plain" class="ml-2">
{{ $t('commons.status.paused') }} * {{ countItem.paused }}
</el-tag>
<el-tag v-if="countItem.restarting" effect="plain" class="ml-2">
{{ $t('commons.status.restarting') }} * {{ countItem.restarting }}
</el-tag>
<el-tag v-if="countItem.removing" effect="plain" class="ml-2">
{{ $t('commons.status.removing') }} * {{ countItem.removing }}
</el-tag>
<el-tag v-if="countItem.exited" effect="plain" class="ml-2">
{{ $t('commons.status.exited') }} * {{ countItem.exited }}
</el-tag>
<el-tag v-if="countItem.dead" effect="plain" class="ml-2">
{{ $t('commons.status.dead') }} * {{ countItem.dead }}
</el-tag>
</div>
</template>
<template #header-l>
<el-tag size="small" class="ml-5" v-if="countItem.all" effect="plain">
{{ $t('commons.table.all') }} * {{ countItem.all }}
</el-tag>
<el-tag size="small" v-if="countItem.running" effect="plain" class="ml-2">
{{ $t('commons.status.running') }} * {{ countItem.running }}
</el-tag>
<el-tag size="small" v-if="countItem.created" effect="plain" class="ml-2">
{{ $t('commons.status.created') }} * {{ countItem.created }}
</el-tag>
<el-tag size="small" v-if="countItem.paused" effect="plain" class="ml-2">
{{ $t('commons.status.paused') }} * {{ countItem.paused }}
</el-tag>
<el-tag size="small" v-if="countItem.restarting" effect="plain" class="ml-2">
{{ $t('commons.status.restarting') }} * {{ countItem.restarting }}
</el-tag>
<el-tag size="small" v-if="countItem.removing" effect="plain" class="ml-2">
{{ $t('commons.status.removing') }} * {{ countItem.removing }}
</el-tag>
<el-tag size="small" v-if="countItem.exited" effect="plain" class="ml-2">
{{ $t('commons.status.exited') }} * {{ countItem.exited }}
</el-tag>
<el-tag size="small" v-if="countItem.dead" effect="plain" class="ml-2">
{{ $t('commons.status.dead') }} * {{ countItem.dead }}
</el-tag>
</template>
</CardWithHeader>
<el-row :gutter="20" class="mt-5">
Expand All @@ -52,11 +52,11 @@
<CardWithHeader :header="$t('container.image')">
<template #body>
<span class="count" @click="goRouter('Image')">{{ countItem.imageCount }}</span>
<div class="float-right">
<el-tag v-if="countItem.imageSize" effect="plain" class="ml-2">
{{ $t('commons.status.used') }}: {{ computeSize(countItem.imageSize) }}
</el-tag>
</div>
</template>
<template #header-l>
<span v-if="countItem.imageSize" effect="plain" class="ml-2 text-xs">
{{ $t('commons.status.used') }}: {{ computeSize(countItem.imageSize) }}
</span>
</template>
</CardWithHeader>
</el-col>
Copy link
Member

@wanghe-fit2cloud wanghe-fit2cloud Feb 6, 2025

Choose a reason for hiding this comment

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

There are no major issues in this code. However, there's some typo errors that you'll want to correct:

  1. Change countItem.itemStatus class name to countItem.containerStatus

In line:

<count-item .container>

Replace with:

$count-item container-status

This change isn't significant but should improve readability.

  1. Adjust the CSS classes on tag elements:

    • ml-auto is not necessary because it will automatically adjust based on layout and shouldn't be set globally within each template.

  2. Verify if computedSizes correctly handles edge cases like null values.

Remember, this is just an improvement suggestion without extensive testing since these small changes could impact overall user experience differently depending on specific details of how the app behaves under different scenarios.

Copy link
Member

@wanghe-fit2cloud wanghe-fit2cloud Feb 6, 2025

Choose a reason for hiding this comment

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

As of September 2021, you haven't provided any specific issues or potential gaps within the code that need to be checked. Since your most recent update is October 2021, all changes would still apply up until 2021 with respect to regular maintenance and bug fixes. However, any modifications not mentioned previously could potentially introduce new issues.

The style guide suggests using v-if instead of inline elements where possible (except for <el-tag> because it's considered more CSS/JavaScript-driven.) If needed for clarity, consider wrapping inline JavaScript into <div>-element, but stick to the cleaner syntax if its use can avoid unnecessary HTML complexity without significantly altering performance.

For future iterations:

  • Include detailed docstrings throughout the scripts to maintain semantic documentation.
  • Consider adding comments when modifying functionality across different components rather than making direct changes on lines like "This line should be updated..."
  • Keep version numbers updated so that they reflect both major and minor versions when releasing additional changes.

Remember, keeping a stable base while gradually introducing improvements ensures less disruption during transitions from one stage to another.

In summary, focusing on maintaining consistency through existing guidelines, ensuring clear, well-documented updates, and being mindful of how such changes may affect downstream systems will help ensure a smooth progression towards improving each component incrementally at pace suitable for long-term quality assurance processes.

Expand Down
Loading
Loading