Skip to content

Commit 590238d

Browse files
lan-yonghuilan-yonghui
authored
style: Optimize layout style (#7352)
1 parent ed1b261 commit 590238d

File tree

14 files changed

+109
-86
lines changed

14 files changed

+109
-86
lines changed

‎frontend/src/components/license-import/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
{{ $t('license.power') }}
3434
</el-button>
3535
<div class="mt-3 mb-5">
36-
<el-button text type="primary" @click="toHalo">{{ $t('license.knowMorePro') }}</el-button>
36+
<el-button text type="primary" @click="toLxware">{{ $t('license.knowMorePro') }}</el-button>
3737
</div>
3838
</div>
3939
</el-dialog>
@@ -73,7 +73,7 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
7373
uploadRef.value!.handleStart(file);
7474
};
7575
76-
const toHalo = () => {
76+
const toLxware = () => {
7777
window.open('https://www.lxware.cn/1panel' + '', '_blank', 'noopener,noreferrer');
7878
};
7979

‎frontend/src/components/system-upgrade/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<el-divider v-if="!mobile" direction="vertical" />
1717
</div>
1818
<div class="flex flex-wrap items-center">
19-
<el-link :underline="false" type="primary" @click="toHalo">
19+
<el-link :underline="false" type="primary" @click="toLxware">
2020
{{ $t(globalStore.isIntl || !isProductPro ? 'license.community' : 'license.pro') }}
2121
</el-link>
2222
<el-link :underline="false" class="version" type="primary" @click="copyText(version)">
@@ -121,7 +121,7 @@ const handleClose = () => {
121121
drawerVisible.value = false;
122122
};
123123
124-
const toHalo = () => {
124+
const toLxware = () => {
125125
if (!globalStore.isIntl) {
126126
window.open('https://www.lxware.cn/1panel' + '', '_blank', 'noopener,noreferrer');
127127
}

‎frontend/src/styles/common.scss‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ html {
124124
.input-help {
125125
font-size: 12px;
126126
word-break: break-all;
127-
color: #ADB0BC;
127+
color: #adb0bc;
128128
width: 100%;
129129
display: inline-block;
130130
}
@@ -443,7 +443,7 @@ html {
443443
cursor: pointer;
444444
}
445445

446-
.dialog-footer{
446+
.dialog-footer {
447447
display: flex;
448448
align-items: center;
449449
justify-content: flex-end;
@@ -464,7 +464,7 @@ html {
464464
.monaco-editor-tree-dark .el-tree-node.is-current > .el-tree-node__content {
465465
background-color: #111417;
466466
}
467-
.check-label{
467+
.check-label {
468468
background: var(--panel-main-bg-color-10) !important;
469469
.check-label-a {
470470
color: var(--panel-color-primary);
@@ -480,8 +480,7 @@ html {
480480
}
481481
}
482482

483-
484483
.el-descriptions {
485484
overflow: hidden;
486485
text-overflow: ellipsis;
487-
}
486+
}

‎frontend/src/styles/element-dark.scss‎

Lines changed: 52 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,72 @@
11
html.dark {
2-
3-
--panel-color-primary: #3D8EFF;
4-
--panel-color-primary-light-8: #3674CC;
5-
--panel-color-primary-light-1: #6EAAFF;
6-
--panel-color-primary-light-2: #366FC2;
7-
--panel-color-primary-light-3: #3364AD;
8-
--panel-color-primary-light-4: #2F558F;
9-
--panel-color-primary-light-5: #372E46;
10-
--panel-color-primary-light-6: #2A4066;
11-
--panel-color-primary-light-7: #2D4A7A;
12-
--panel-color-primary-light-9: #2D4A7A;
13-
14-
--panel-main-bg-color-1: #E3E6F3;
15-
--panel-main-bg-color-2: #C0C2CF;
16-
--panel-main-bg-color-3: #ADB0BC;
17-
--panel-main-bg-color-4: #9597A4;
18-
--panel-main-bg-color-5: #90929F;
19-
--panel-main-bg-color-6: #787B88;
20-
--panel-main-bg-color-7: #5B5E6A;
2+
--panel-color-primary: #3d8eff;
3+
--panel-color-primary-light-8: #3674cc;
4+
--panel-color-primary-light-1: #6eaaff;
5+
--panel-color-primary-light-2: #366fc2;
6+
--panel-color-primary-light-3: #3364ad;
7+
--panel-color-primary-light-4: #2f558f;
8+
--panel-color-primary-light-5: #372e46;
9+
--panel-color-primary-light-6: #2a4066;
10+
--panel-color-primary-light-7: #2d4a7a;
11+
--panel-color-primary-light-9: #2d4a7a;
12+
13+
--panel-main-bg-color-1: #e3e6f3;
14+
--panel-main-bg-color-2: #c0c2cf;
15+
--panel-main-bg-color-3: #adb0bc;
16+
--panel-main-bg-color-4: #9597a4;
17+
--panel-main-bg-color-5: #90929f;
18+
--panel-main-bg-color-6: #787b88;
19+
--panel-main-bg-color-7: #5b5e6a;
2120
--panel-main-bg-color-8: #434552;
22-
--panel-main-bg-color-9: #2E313D;
21+
--panel-main-bg-color-9: #2e313d;
2322
--panel-main-bg-color-10: #242633;
24-
--panel-main-bg-color-11: #60626F;
23+
--panel-main-bg-color-11: #60626f;
2524
--panel-main-bg-color-12: #000000;
2625

2726
--panel-alert-error-bg-color: #fef0f0;
2827
--panel-alert-error-text-color: #f56c6c;
29-
--panel-alert-error-hover-bg-color: #E9657B;
28+
--panel-alert-error-hover-bg-color: #e9657b;
3029

3130
--panel-alert-success-bg-color: #e1f3d8;
3231
--panel-alert-success-text-color: #67c23a;
33-
--panel-alert-success-hover-bg-color: #4DC894;
32+
--panel-alert-success-hover-bg-color: #4dc894;
3433

35-
--panel-alert-warning-bg-color: #59472A;
36-
--panel-alert-warning-text-color: #EDAC2C;
37-
--panel-alert-warning-hover-bg-color: #F1C161;
34+
--panel-alert-warning-bg-color: #59472a;
35+
--panel-alert-warning-text-color: #edac2c;
36+
--panel-alert-warning-hover-bg-color: #f1c161;
3837

3938
--panel-alert-info-bg-color: var(--panel-main-bg-color-7);
4039
--panel-alert-info-text-color: var(--panel-text-color-white);
4140
--panel-alert-info-hover-bg-color: var(--panel-main-bg-color-4);
4241

4342
--el-color-success: #3fb950;
44-
--el-color-success-light-5: #4DC894;
43+
--el-color-success-light-5: #4dc894;
4544
--el-color-success-light-8: #3fb950;
4645
--el-color-success-light-9: var(--panel-main-bg-color-9);
4746

48-
--el-color-warning: #EDAC2C;
49-
--el-color-warning-light-5: #F1C161;
50-
--el-color-warning-light-8: #EDAC2C;
47+
--el-color-warning: #edac2c;
48+
--el-color-warning-light-5: #f1c161;
49+
--el-color-warning-light-8: #edac2c;
5150
--el-color-warning-light-9: var(--panel-main-bg-color-9);
5251

53-
--el-color-danger: #E2324F;
54-
--el-color-danger-light-5: #E9657B;
55-
--el-color-danger-light-8: #E2324F;
52+
--el-color-danger: #e2324f;
53+
--el-color-danger-light-5: #e9657b;
54+
--el-color-danger-light-8: #e2324f;
5655
--el-color-danger-light-9: var(--panel-main-bg-color-9);
5756

58-
--el-color-error: #E2324F;
59-
--el-color-error-light-5: #E9657B;
60-
--el-color-error-light-8: #E2324F;
57+
--el-color-error: #e2324f;
58+
--el-color-error-light-5: #e9657b;
59+
--el-color-error-light-8: #e2324f;
6160
--el-color-error-light-9: var(--panel-main-bg-color-9);
6261

6362
--el-color-info: var(--panel-main-bg-color-3);
6463
--el-color-info-light-5: var(--panel-main-bg-color-3);
6564
--el-color-info-light-8: var(--panel-main-bg-color-3);
6665
--el-color-info-light-9: var(--panel-main-bg-color-9);
6766

68-
6967
--panel-pie-bg-color: #434552;
7068
--panel-text-color-white: #ffffff;
7169

72-
7370
--el-color-primary: var(--panel-color-primary);
7471
--el-color-primary-light-1: var(--panel-color-primary-light-1);
7572
--el-color-primary-light-2: var(--panel-color-primary-light-2);
@@ -113,10 +110,10 @@ html.dark {
113110
--el-text-color-primary: var(--panel-main-bg-color-2);
114111
--el-text-color-regular: var(--panel-main-bg-color-2);
115112

116-
--el-box-shadow: 0px 12px 32px 4px rgba(36, 38, 51, .36), 0px 8px 20px rgba(36, 38, 51, .72);
117-
--el-box-shadow-light: 0px 0px 12px rgba(36, 38, 51, .72);
118-
--el-box-shadow-lighter: 0px 0px 6px rgba(36, 38, 51, .72);
119-
--el-box-shadow-dark: 0px 16px 48px 16px rgba(36, 38, 51, .72), 0px 12px 32px #242633, 0px 8px 16px -8px #242633;
113+
--el-box-shadow: 0px 12px 32px 4px rgba(36, 38, 51, 0.36), 0px 8px 20px rgba(36, 38, 51, 0.72);
114+
--el-box-shadow-light: 0px 0px 12px rgba(36, 38, 51, 0.72);
115+
--el-box-shadow-lighter: 0px 0px 6px rgba(36, 38, 51, 0.72);
116+
--el-box-shadow-dark: 0px 16px 48px 16px rgba(36, 38, 51, 0.72), 0px 12px 32px #242633, 0px 8px 16px -8px #242633;
120117
--el-bg-color: var(--panel-main-bg-color-9);
121118
--el-bg-color-overlay: var(--panel-main-bg-color-9);
122119

@@ -129,16 +126,17 @@ html.dark {
129126
color: var(--panel-main-bg-color-3);
130127
}
131128

132-
.el-menu-item:hover, .el-sub-menu__title:hover{
129+
.el-menu-item:hover,
130+
.el-sub-menu__title:hover {
133131
background: var(--panel-main-bg-color-8) !important;
134132
}
135133

136134
.el-menu .el-menu-item {
137-
box-shadow: 0 0 4px rgba(36, 38, 51, .72);
135+
box-shadow: 0 0 4px rgba(36, 38, 51, 0.72);
138136
}
139137

140138
.el-menu .el-sub-menu__title {
141-
box-shadow: 0 0 4px rgba(36, 38, 51, .72);
139+
box-shadow: 0 0 4px rgba(36, 38, 51, 0.72);
142140
}
143141

144142
.el-overlay {
@@ -188,11 +186,11 @@ html.dark {
188186
}
189187

190188
.el-card {
191-
--el-card-bg-color: var(--panel-main-bg-color-10)
189+
--el-card-bg-color: var(--panel-main-bg-color-10);
192190
}
193191

194192
.el-button:hover {
195-
--el-button-hover-border-color:var(--panel-main-bg-color-11);
193+
--el-button-hover-border-color: var(--panel-main-bg-color-11);
196194
--el-button-hover-bg-color: var(--panel-main-bg-color-10);
197195
}
198196

@@ -203,7 +201,7 @@ html.dark {
203201
&.brief-button {
204202
--el-button-text-color: var(--panel-main-bg-color-10);
205203
--el-button-hover-text-color: var(--el-color-white);
206-
--el-button-hover-border-color:var(--el-color-primary);
204+
--el-button-hover-border-color: var(--el-color-primary);
207205
--el-button-hover-bg-color: var(--el-color-primary);
208206
}
209207

@@ -219,15 +217,18 @@ html.dark {
219217
}
220218
}
221219

222-
.el-button--primary.is-plain, .el-button--primary.is-text, .el-button--primary.is-link {
220+
.el-button--primary.is-plain,
221+
.el-button--primary.is-text,
222+
.el-button--primary.is-link {
223223
--el-button-text-color: var(--panel-main-bg-color-2);
224224
--el-button-bg-color: var(--panel-main-bg-color-9);
225225
--el-button-border-color: var(--panel-main-bg-color-8);
226226
--el-button-hover-bg-color: var(--panel-main-bg-color-9);
227227
--el-button-hover-border-color: var(--panel-main-bg-color-8);
228228
}
229229

230-
.el-button--primary.is-text,.el-button--primary.is-link {
230+
.el-button--primary.is-text,
231+
.el-button--primary.is-link {
231232
--el-button-text-color: var(--panel-color-primary);
232233
}
233234

@@ -459,4 +460,4 @@ html.dark {
459460
.el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
460461
background-color: var(--panel-main-bg-color-10);
461462
}
462-
}
463+
}

‎frontend/src/views/database/mysql/index.vue‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -206,10 +206,11 @@
206206
show-overflow-tooltip
207207
/>
208208
<fu-table-operations
209-
width="370px"
209+
:ellipsis="mobile ? 0 : 10"
210+
:min-width="mobile ? 'auto' : 300"
210211
:buttons="buttons"
211-
:ellipsis="10"
212212
:label="$t('commons.table.operate')"
213+
fixed="right"
213214
fix
214215
/>
215216
</ComplexTable>
@@ -291,7 +292,7 @@ import UploadDialog from '@/components/upload/index.vue';
291292
import PortJumpDialog from '@/components/port-jump/index.vue';
292293
import { dateFormat } from '@/utils/util';
293294
import { ElMessageBox } from 'element-plus';
294-
import { onMounted, reactive, ref } from 'vue';
295+
import { computed, onMounted, reactive, ref } from 'vue';
295296
import {
296297
deleteCheckMysqlDB,
297298
listDatabases,
@@ -371,6 +372,10 @@ const onChangeConn = async () => {
371372
});
372373
};
373374
375+
const mobile = computed(() => {
376+
return globalStore.isMobile();
377+
});
378+
374379
const goRemoteDB = async () => {
375380
if (currentDB.value) {
376381
globalStore.setCurrentDB(currentDB.value.database);

‎frontend/src/views/database/postgresql/index.vue‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -168,10 +168,11 @@
168168
show-overflow-tooltip
169169
/>
170170
<fu-table-operations
171-
width="370px"
171+
:ellipsis="mobile ? 0 : 10"
172+
:min-width="mobile ? 'auto' : 300"
172173
:buttons="buttons"
173-
:ellipsis="10"
174174
:label="$t('commons.table.operate')"
175+
fixed="right"
175176
fix
176177
/>
177178
</ComplexTable>
@@ -252,7 +253,7 @@ import Backups from '@/components/backup/index.vue';
252253
import UploadDialog from '@/components/upload/index.vue';
253254
import PortJumpDialog from '@/components/port-jump/index.vue';
254255
import { dateFormat } from '@/utils/util';
255-
import { onMounted, reactive, ref } from 'vue';
256+
import { computed, onMounted, reactive, ref } from 'vue';
256257
import {
257258
deleteCheckPostgresqlDB,
258259
listDatabases,
@@ -331,6 +332,10 @@ const onChangeConn = async () => {
331332
});
332333
};
333334
335+
const mobile = computed(() => {
336+
return globalStore.isMobile();
337+
});
338+
334339
const goRemoteDB = async () => {
335340
if (currentDB.value) {
336341
globalStore.setCurrentDB(currentDB.value.database);

‎frontend/src/views/database/redis/index.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,10 @@ const onLoadConn = async () => {
213213
database: currentDBName.value,
214214
});
215215
};
216+
//
217+
// const mobile = computed(() => {
218+
// return globalStore.isMobile();
219+
// });
216220
217221
const goRouter = async (target: string) => {
218222
if (target === 'app') {

‎frontend/src/views/setting/license/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
<div class="h-app-content">{{ $t('license.technicalAdvice') }}</div>
9696
</el-col>
9797
<el-col :span="5">
98-
<el-button type="primary" plain round size="small" @click="toHalo()">
98+
<el-button type="primary" plain round size="small" @click="toLxware()">
9999
{{ $t('license.advice') }}
100100
</el-button>
101101
</el-col>
@@ -138,7 +138,7 @@ const license = reactive({
138138
message: '',
139139
});
140140
141-
const toHalo = () => {
141+
const toLxware = () => {
142142
window.open('https://www.lxware.cn/1panel' + '', '_blank', 'noopener,noreferrer');
143143
};
144144

‎frontend/src/views/website/runtime/dotnet/index.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
</el-text>
3838
</template>
3939
</el-table-column>
40-
<el-table-column :label="$t('website.runDir')" prop="codeDir">
40+
<el-table-column :label="$t('website.runDir')" prop="codeDir" min-width="120px">
4141
<template #default="{ row }">
4242
<el-button type="primary" link @click="toFolder(row.codeDir)">
4343
<el-icon>
@@ -47,7 +47,7 @@
4747
</template>
4848
</el-table-column>
4949
<el-table-column :label="$t('runtime.version')" prop="version"></el-table-column>
50-
<el-table-column :label="$t('runtime.externalPort')" prop="port">
50+
<el-table-column :label="$t('runtime.externalPort')" prop="port" min-width="110px">
5151
<template #default="{ row }">
5252
{{ row.port }}
5353
<el-button link :icon="Promotion" @click="goDashboard(row.port, 'http')"></el-button>
@@ -71,7 +71,7 @@
7171
</div>
7272
</template>
7373
</el-table-column>
74-
<el-table-column :label="$t('commons.button.log')" prop="path">
74+
<el-table-column :label="$t('commons.button.log')" prop="path" min-width="90px">
7575
<template #default="{ row }">
7676
<el-button @click="openLog(row)" link type="primary">{{ $t('website.check') }}</el-button>
7777
</template>

0 commit comments

Comments
 (0)