gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-19 08:19:15 +08:00
Code

feat: Optimize style and description (#7393)

Browse Source
This commit is contained in:
蘭 2024-12-17 20:46:11 +08:00 committed by GitHub
parent 6275eec918
commit 3b38b9d86b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 249 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/views/login/components/login-form.vue
View File

@ -52,9 +52,14 @@
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item v-if="globalStore.isIntl" command="en">
English
</el-dropdown-item>
<el-dropdown-item command="zh">中文(简体)</el-dropdown-item> <el-dropdown-item command="zh">中文(简体)</el-dropdown-item>
<el-dropdown-item command="tw">中文(繁體)</el-dropdown-item> <el-dropdown-item command="tw">中文(繁體)</el-dropdown-item>
<el-dropdown-item command="en">English</el-dropdown-item> <el-dropdown-item v-if="!globalStore.isIntl" command="en">
English
</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>

2
frontend/src/views/setting/panel/index.vue
View File

@ -2,7 +2,7 @@
<div v-loading="loading"> <div v-loading="loading">
<LayoutContent :title="$t('setting.panel')" :divider="true"> <LayoutContent :title="$t('setting.panel')" :divider="true">
<template #main> <template #main>
<el-form :model="form" :label-position="mobile ? 'top' : 'left'" label-width="150px"> <el-form :model="form" :label-position="mobile ? 'top' : 'left'" label-width="auto">
<el-row> <el-row>
<el-col :span="1"><br /></el-col> <el-col :span="1"><br /></el-col>
<el-col :xs="24" :sm="20" :md="15" :lg="12" :xl="12"> <el-col :xs="24" :sm="20" :md="15" :lg="12" :xl="12">

200
frontend/src/views/toolbox/clean/index.vue
View File

@ -137,6 +137,7 @@
</div> </div>
</div> </div>
<div v-if="scanStatus === 'scanned'"> <div v-if="scanStatus === 'scanned'">
<div class="flex flex-row justify-between items-center gap-2">
<div> <div>
<el-text class="clean_title"> <el-text class="clean_title">
{{ $t('clean.totalScan') }} {{ computeSize(totalSize) }} {{ $t('clean.totalScan') }} {{ computeSize(totalSize) }}
@ -146,13 +147,15 @@
{{ $t('clean.selectScan') }} {{ computeSize(selectSize) }} {{ $t('clean.selectScan') }} {{ computeSize(selectSize) }}
</el-text> </el-text>
</div> </div>
</div>
<div class="large_button"> <div class="large_button">
<el-button type="primary" size="large" @click="onSubmitClean"> <el-button type="primary" size="large" @click="onSubmitClean">
{{ $t('clean.clean') }} {{ $t('clean.clean') }}
</el-button> </el-button>
</div> </div>
</div> </div>
<el-collapse v-model="activeNames" class="mt-5"> <div class="tree-container">
<el-collapse v-model="activeNames" class="tree-collapse">
<el-collapse-item :title="$t('clean.system')" name="system"> <el-collapse-item :title="$t('clean.system')" name="system">
<el-tree <el-tree
ref="systemRef" ref="systemRef"
@ -162,16 +165,29 @@
show-checkbox show-checkbox
:props="defaultProps" :props="defaultProps"
@check-change="onChange" @check-change="onChange"
class="responsive-tree"
> >
<template #default="{ node, data }"> <template #default="{ node, data }">
<div class="float-left"> <div class="tree-node">
<span>{{ load18n(data.label) }}</span> <el-tooltip
</div> effect="dark"
<div class="ml-4 float-left"> :content="load18n(data.label)"
<span v-if="data.size">{{ computeSize(data.size) }}</span> placement="top"
</div> >
<div class="ml-4 float-left"> <span class="tree-node-label">{{ load18n(data.label) }}</span>
<span>{{ loadTag(node, data) }}</span> </el-tooltip>
<span class="tree-node-size" v-if="data.size">
{{ computeSize(data.size) }}
</span>
<el-tooltip
effect="dark"
:content="loadTag(node, data)"
placement="top"
>
<span class="tree-node-tooltip">
{{ loadTag(node, data) }}
</span>
</el-tooltip>
</div> </div>
</template> </template>
</el-tree> </el-tree>
@ -186,16 +202,29 @@
show-checkbox show-checkbox
:props="defaultProps" :props="defaultProps"
@check-change="onChange" @check-change="onChange"
class="responsive-tree"
> >
<template #default="{ node, data }"> <template #default="{ node, data }">
<div class="float-left"> <div class="tree-node">
<span>{{ load18n(data.label) }}</span> <el-tooltip
</div> effect="dark"
<div class="ml-4 float-left"> :content="load18n(data.label)"
<span v-if="data.size">{{ computeSize(data.size) }}</span> placement="top"
</div> >
<div class="ml-4 float-left"> <span class="tree-node-label">{{ load18n(data.label) }}</span>
<span>{{ loadTag(node, data) }}</span> </el-tooltip>
<span class="tree-node-size" v-if="data.size">
{{ computeSize(data.size) }}
</span>
<el-tooltip
effect="dark"
:content="loadTag(node, data)"
placement="top"
>
<span class="tree-node-tooltip">
{{ loadTag(node, data) }}
</span>
</el-tooltip>
</div> </div>
</template> </template>
</el-tree> </el-tree>
@ -209,16 +238,29 @@
show-checkbox show-checkbox
:props="defaultProps" :props="defaultProps"
@check-change="onChange" @check-change="onChange"
class="responsive-tree"
> >
<template #default="{ node, data }"> <template #default="{ node, data }">
<div class="float-left"> <div class="tree-node">
<span>{{ load18n(data.label) }}</span> <el-tooltip
</div> effect="dark"
<div class="ml-4 float-left"> :content="load18n(data.label)"
<span v-if="data.size">{{ computeSize(data.size) }}</span> placement="top"
</div> >
<div class="ml-4 float-left"> <span class="tree-node-label">{{ load18n(data.label) }}</span>
<span>{{ loadTag(node, data) }}</span> </el-tooltip>
<span class="tree-node-size" v-if="data.size">
{{ computeSize(data.size) }}
</span>
<el-tooltip
effect="dark"
:content="loadTag(node, data)"
placement="top"
>
<span class="tree-node-tooltip">
{{ loadTag(node, data) }}
</span>
</el-tooltip>
</div> </div>
</template> </template>
</el-tree> </el-tree>
@ -232,16 +274,29 @@
show-checkbox show-checkbox
:props="defaultProps" :props="defaultProps"
@check-change="onChange" @check-change="onChange"
class="responsive-tree"
> >
<template #default="{ node, data }"> <template #default="{ node, data }">
<div class="float-left"> <div class="tree-node">
<span>{{ load18n(data.label) }}</span> <el-tooltip
</div> effect="dark"
<div class="ml-4 float-left"> :content="load18n(data.label)"
<span v-if="data.size">{{ computeSize(data.size) }}</span> placement="top"
</div> >
<div class="ml-4 float-left"> <span class="tree-node-label">{{ load18n(data.label) }}</span>
<span>{{ loadTag(node, data) }}</span> </el-tooltip>
<span class="tree-node-size" v-if="data.size">
{{ computeSize(data.size) }}
</span>
<el-tooltip
effect="dark"
:content="loadTag(node, data)"
placement="top"
>
<span class="tree-node-tooltip">
{{ loadTag(node, data) }}
</span>
</el-tooltip>
</div> </div>
</template> </template>
</el-tree> </el-tree>
@ -255,22 +310,36 @@
show-checkbox show-checkbox
:props="defaultProps" :props="defaultProps"
@check-change="onChange" @check-change="onChange"
class="responsive-tree"
> >
<template #default="{ node, data }"> <template #default="{ node, data }">
<div class="float-left"> <div class="tree-node">
<span>{{ load18n(data.label) }}</span> <el-tooltip
</div> effect="dark"
<div class="ml-4 float-left"> :content="load18n(data.label)"
<span v-if="data.size">{{ computeSize(data.size) }}</span> placement="top"
</div> >
<div class="ml-4 float-left"> <span class="tree-node-label">{{ load18n(data.label) }}</span>
<span>{{ loadTag(node, data) }}</span> </el-tooltip>
<span class="tree-node-size" v-if="data.size">
{{ computeSize(data.size) }}
</span>
<el-tooltip
effect="dark"
:content="loadTag(node, data)"
placement="top"
>
<span class="tree-node-tooltip">
{{ loadTag(node, data) }}
</span>
</el-tooltip>
</div> </div>
</template> </template>
</el-tree> </el-tree>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
@ -642,4 +711,53 @@ onMounted(() => {
float: right; float: right;
margin-right: 15px; margin-right: 15px;
} }
.tree-container {
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
}
.tree-collapse {
flex: 1;
overflow: hidden;
}
.responsive-tree {
width: 100%;
max-height: 100%;
overflow: auto;
}
.tree-node {
display: flex;
align-items: center;
justify-content: start;
gap: 1rem;
width: 100%;
overflow: hidden;
}
.tree-node-label {
flex-shrink: 0;
max-width: 60%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tree-node-size {
flex-shrink: 0;
max-width: 25%;
white-space: nowrap;
}
.tree-node-tooltip {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
</style> </style>