mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-02-08 01:20:07 +08:00
style: Optimize the styles of dashboard, container, and other pages (#7811)
This commit is contained in:
ssongliu
GitHub
parent
46967db3ae
commit
b2fa0aa2d4
@ -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 {
|
||||
@ -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";
|
||||
}
|
||||
@ -61,6 +70,14 @@
|
||||
content: "\e638";
|
||||
}
|
||||
|
||||
.p-terminal:before {
|
||||
content: "\e864";
|
||||
}
|
||||
|
||||
.p-terminal1:before {
|
||||
content: "\e663";
|
||||
}
|
||||
|
||||
.p-arrow-right:before {
|
||||
content: "\e665";
|
||||
}
|
||||
@ -361,10 +378,6 @@
|
||||
content: "\e76a";
|
||||
}
|
||||
|
||||
.p-zhongduan:before {
|
||||
content: "\e731";
|
||||
}
|
||||
|
||||
.p-alert-1:before {
|
||||
content: "\e615";
|
||||
}
|
||||
@ -373,7 +386,7 @@
|
||||
content: "\e701";
|
||||
}
|
||||
|
||||
.p-minglinghang:before {
|
||||
.p-zhongduan:before {
|
||||
content: "\e61e";
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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",
|
||||
@ -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",
|
||||
@ -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": "短信告警",
|
||||
@ -638,7 +659,7 @@
|
||||
{
|
||||
"icon_id": "11052436",
|
||||
"name": "命令行",
|
||||
"font_class": "minglinghang",
|
||||
"font_class": "zhongduan",
|
||||
"unicode": "e61e",
|
||||
"unicode_decimal": 58910
|
||||
},
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 157 KiB After Width: | Height: | Size: 167 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -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>
|
||||
|
||||
@ -24,7 +25,7 @@ defineProps({
|
||||
<style scoped lang="scss">
|
||||
.home-card {
|
||||
.header {
|
||||
span {
|
||||
.header-span {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
||||
@ -382,7 +382,6 @@ const message = {
|
||||
used: 'Used',
|
||||
free: 'Free',
|
||||
percent: 'Percent',
|
||||
app: 'Recommended Apps',
|
||||
goInstall: 'Go install',
|
||||
|
||||
networkCard: 'NetworkCard',
|
||||
|
||||
@ -374,7 +374,6 @@ const message = {
|
||||
used: '使用済み',
|
||||
free: '無料',
|
||||
percent: '利用',
|
||||
app: '推奨アプリケーション',
|
||||
goInstall: 'インストールします',
|
||||
|
||||
networkCard: 'ネットワークカード',
|
||||
|
||||
@ -376,7 +376,6 @@ const message = {
|
||||
used: '사용 중',
|
||||
free: '여유',
|
||||
percent: '사용률',
|
||||
app: '추천 애플리케이션',
|
||||
goInstall: 'Go 설치',
|
||||
|
||||
networkCard: '네트워크 카드',
|
||||
|
||||
@ -382,7 +382,6 @@ const message = {
|
||||
used: 'Digunakan',
|
||||
free: 'Percuma',
|
||||
percent: 'Penggunaan',
|
||||
app: 'Aplikasi Disyorkan',
|
||||
goInstall: 'Pergi pasang',
|
||||
|
||||
networkCard: 'Kad rangkaian',
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -376,7 +376,6 @@ const message = {
|
||||
used: 'Использовано',
|
||||
free: 'Свободно',
|
||||
percent: 'Утилизация',
|
||||
app: 'Рекомендуемые приложения',
|
||||
goInstall: 'Установить',
|
||||
|
||||
networkCard: 'Интерфейс',
|
||||
|
||||
@ -374,7 +374,6 @@ const message = {
|
||||
used: '已用',
|
||||
free: '可用',
|
||||
percent: '使用率',
|
||||
app: '推薦應用',
|
||||
goInstall: '去安裝',
|
||||
|
||||
networkCard: '網卡',
|
||||
|
||||
@ -372,7 +372,6 @@ const message = {
|
||||
used: '已用',
|
||||
free: '可用',
|
||||
percent: '使用率',
|
||||
app: '推荐应用',
|
||||
goInstall: '去安装',
|
||||
|
||||
networkCard: '网卡',
|
||||
|
||||
@ -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: [
|
||||
{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Layout } from '@/routers/constant';
|
||||
|
||||
const toolboxRouter = {
|
||||
sort: 7,
|
||||
sort: 8,
|
||||
path: '/toolbox',
|
||||
component: Layout,
|
||||
redirect: '/toolbox/supervisor',
|
||||
|
||||
@ -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';
|
||||
},
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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';
|
||||
},
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
</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 v-if="countItem.running" effect="plain" class="ml-2">
|
||||
<el-tag size="small" 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">
|
||||
<el-tag size="small" 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">
|
||||
<el-tag size="small" 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">
|
||||
<el-tag size="small" 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">
|
||||
<el-tag size="small" 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">
|
||||
<el-tag size="small" 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">
|
||||
<el-tag size="small" v-if="countItem.dead" effect="plain" class="ml-2">
|
||||
{{ $t('commons.status.dead') }} * {{ countItem.dead }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</CardWithHeader>
|
||||
<el-row :gutter="20" class="mt-5">
|
||||
@ -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">
|
||||
</template>
|
||||
<template #header-l>
|
||||
<span v-if="countItem.imageSize" effect="plain" class="ml-2 text-xs">
|
||||
{{ $t('commons.status.used') }}: {{ computeSize(countItem.imageSize) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
</CardWithHeader>
|
||||
</el-col>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<CardWithHeader :header="$t('home.app')" class="mt-5" :loading="loading">
|
||||
<CardWithHeader :header="$t('app.app')" class="mt-5" :loading="loading">
|
||||
<template #header-r>
|
||||
<el-popover placement="left" :width="226" trigger="click">
|
||||
<el-input size="small" v-model="filter" clearable @input="loadOption()" />
|
||||
@ -29,11 +29,13 @@
|
||||
<el-col :span="5">
|
||||
<div>
|
||||
<el-badge
|
||||
badge-style="background-color: transparent; color: #646a73; font-size: 12px; border: none"
|
||||
:value="$t('home.recommend')"
|
||||
badge-style="background-color: transparent; font-size: 10px; border: none"
|
||||
v-if="app.isRecommend"
|
||||
:offset="[-60, 0]"
|
||||
>
|
||||
<template #content>
|
||||
<svg-icon iconName="p-tuijian"></svg-icon>
|
||||
</template>
|
||||
<el-avatar
|
||||
shape="square"
|
||||
:size="55"
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
<el-alert type="info" :closable="false">
|
||||
<template #title>
|
||||
<span class="input-help whitespace-break-spaces">
|
||||
{{ $t('file.fileHeper') }}
|
||||
{{ $t('file.fileHelper') }}
|
||||
</span>
|
||||
</template>
|
||||
</el-alert>
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
<OpDialog ref="opRef" @search="getContent" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onUnmounted, reactive, ref, watch } from 'vue';
|
||||
import { onUnmounted, reactive, ref } from 'vue';
|
||||
import { operateSupervisorProcessFile } from '@/api/modules/host-tool';
|
||||
import i18n from '@/lang';
|
||||
import { TabsPaneContext } from 'element-plus';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user