Skip to content

Commit b6d3c3d

Browse files
ssongliussongliu
committed
style(home): refine app launcher card layout
1 parent f5e75d4 commit b6d3c3d

File tree

1 file changed

+129
-105
lines changed

1 file changed

+129
-105
lines changed

‎frontend/src/views/home/app/index.vue‎

Lines changed: 129 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,14 @@
2626
<el-scrollbar height="531px" class="moz-height">
2727
<div class="h-app-card" v-for="(app, index) in apps" :key="index">
2828
<el-row :gutter="5">
29-
<el-col :span="5">
30-
<el-avatar shape="square" :size="55" :src="getAppIconSrc(app)" />
29+
<el-col :span="5" class="h-app-media-col">
30+
<div class="h-app-media">
31+
<el-avatar shape="square" :size="55" :src="getAppIconSrc(app)" />
32+
</div>
3133
</el-col>
32-
<el-col :span="16">
34+
<el-col :span="16" class="h-app-main-col">
3335
<div class="h-app-content" v-if="!app.currentRow">
34-
<div>
36+
<div class="h-app-heading">
3537
<span class="h-app-title">{{ app.name }}</span>
3638
<svg-icon class="svg-icon" iconName="p-huobao1"></svg-icon>
3739
</div>
@@ -42,7 +44,7 @@
4244
</div>
4345
</div>
4446
<div class="h-app-content" v-else>
45-
<div>
47+
<div class="h-app-heading">
4648
<el-dropdown trigger="hover">
4749
<el-button type="primary" plain size="small" link class="h-app-dropdown">
4850
{{ app.currentRow.name }}
@@ -61,12 +63,12 @@
6163
</template>
6264
</el-dropdown>
6365
</div>
64-
<div class="h-app-margin">
66+
<div class="h-app-meta">
6567
<el-button plain size="small" link class="h-app-desc">
6668
{{ $t('app.version') + ': ' + app.currentRow.version }}
6769
</el-button>
6870
</div>
69-
<div class="h-app-margin">
71+
<div class="h-app-actions">
7072
<el-button
7173
size="small"
7274
type="primary"
@@ -100,63 +102,14 @@
100102
size="small"
101103
type="primary"
102104
link
103-
@click="routerToFileWithPath(app.currentRow.path)"
105+
@click="routerToName('AppInstalled')"
104106
>
105-
{{ $t('home.dir') }}
107+
{{ $t('tabs.more') }}
106108
</el-button>
107-
<el-popover
108-
placement="left"
109-
trigger="hover"
110-
v-if="app.currentRow.appType == 'website'"
111-
:width="260"
112-
>
113-
<template #reference>
114-
<el-button
115-
link
116-
size="small"
117-
type="primary"
118-
:style="mobile ? 'margin-left: -1px' : ''"
119-
>
120-
{{ $t('app.toLink') }}
121-
</el-button>
122-
</template>
123-
<span v-if="defaultLink == '' && app.currentRow.webUI == ''">
124-
{{ $t('app.webUIConfig') }}
125-
<el-link
126-
icon="Position"
127-
@click="jumpToPath(router, '/settings/panel')"
128-
type="primary"
129-
>
130-
{{ $t('firewall.quickJump') }}
131-
</el-link>
132-
</span>
133-
<div v-else>
134-
<div>
135-
<el-button
136-
v-if="defaultLink != ''"
137-
type="primary"
138-
link
139-
@click="toLink(defaultLink + ':' + app.currentRow.httpPort)"
140-
>
141-
{{ defaultLink + ':' + app.currentRow.httpPort }}
142-
</el-button>
143-
</div>
144-
<div>
145-
<el-button
146-
v-if="app.currentRow.webUI != ''"
147-
type="primary"
148-
link
149-
@click="toLink(app.currentRow.webUI)"
150-
>
151-
{{ app.currentRow.webUI }}
152-
</el-button>
153-
</div>
154-
</div>
155-
</el-popover>
156109
</div>
157110
</div>
158111
</el-col>
159-
<el-col :span="1">
112+
<el-col :span="1" class="h-app-side-col">
160113
<el-button
161114
class="h-app-button"
162115
type="primary"
@@ -170,7 +123,6 @@
170123
</el-button>
171124
</el-col>
172125
</el-row>
173-
<div class="h-app-divider" />
174126
</div>
175127
</el-scrollbar>
176128
</template>
@@ -180,18 +132,14 @@
180132

181133
<script lang="ts" setup>
182134
import { getAppIconUrl, installedOp } from '@/api/modules/app';
183-
import { getAgentSettingByKey } from '@/api/modules/setting';
184135
import { changeLauncherStatus, loadAppLauncher, loadAppLauncherOption } from '@/api/modules/dashboard';
185136
import i18n from '@/lang';
186137
import { GlobalStore } from '@/store';
187138
import { MsgSuccess } from '@/utils/message';
188-
import { ref } from 'vue';
189-
import { useRouter } from 'vue-router';
190-
import { jumpToPath } from '@/utils/util';
139+
import { computed, ref } from 'vue';
191140
import { jumpToInstall } from '@/utils/app';
192-
import { routerToFileWithPath, routerToNameWithQuery } from '@/utils/router';
141+
import { routerToName, routerToNameWithQuery } from '@/utils/router';
193142
194-
const router = useRouter();
195143
const globalStore = GlobalStore();
196144
197145
let loading = ref(false);
@@ -201,12 +149,10 @@ const filter = ref();
201149
const mobile = computed(() => {
202150
return globalStore.isMobile();
203151
});
204-
const defaultLink = ref('');
205152
206153
const acceptParams = (): void => {
207154
search();
208155
loadOption();
209-
getConfig();
210156
};
211157
212158
const goInstall = (key: string, type: string) => {
@@ -245,19 +191,6 @@ const onChangeStatus = async (row: any) => {
245191
});
246192
};
247193
248-
const toLink = (link: string) => {
249-
window.open(link, '_blank');
250-
};
251-
252-
const getConfig = async () => {
253-
try {
254-
const res = await getAgentSettingByKey('SystemIP');
255-
if (res.data != '') {
256-
defaultLink.value = res.data;
257-
}
258-
} catch (error) {}
259-
};
260-
261194
const onOperate = async (operation: string, row: any) => {
262195
ElMessageBox.confirm(
263196
i18n.global.t('app.operatorHelper', [i18n.global.t('commons.button.' + operation)]),
@@ -306,45 +239,109 @@ defineExpose({
306239

307240
<style lang="scss" scoped>
308241
.h-app-card {
309-
cursor: pointer;
310-
padding: 10px 15px;
311-
margin-right: 10px;
312-
line-height: 18px;
242+
padding: 8px 10px;
243+
margin: 0 4px 3px 0;
244+
min-height: 66px;
245+
line-height: 16px;
246+
border: 1px solid var(--el-border-color-lighter);
247+
border-radius: 10px;
248+
transition: border-color 0.18s ease;
313249
314250
.h-app-content {
315-
padding-left: 15px;
251+
padding-left: 4px;
252+
316253
.h-app-title {
317-
font-weight: 500;
318-
font-size: 15px;
254+
font-weight: 600;
255+
font-size: 14px;
319256
color: var(--panel-text-color);
257+
letter-spacing: 0.01em;
320258
}
321259
322260
.h-app-desc {
323-
margin-top: 2px;
261+
margin-top: 3px;
262+
line-height: 1.4;
263+
324264
span {
325265
font-weight: 400;
326-
font-size: 12px;
266+
font-size: 11px;
327267
color: var(--el-text-color-regular);
268+
display: -webkit-box;
269+
overflow: hidden;
270+
-webkit-box-orient: vertical;
271+
-webkit-line-clamp: 1;
328272
}
329273
}
330274
}
275+
331276
.h-app-button {
332-
margin-top: 10px;
277+
padding: 1px 10px;
278+
line-height: 1;
279+
border-radius: 999px;
333280
}
281+
334282
&:hover {
335-
background-color: rgba(0, 94, 235, 0.03);
283+
border-color: var(--el-color-primary);
284+
}
285+
}
286+
287+
.h-app-media-col,
288+
.h-app-side-col {
289+
display: flex;
290+
align-items: flex-start;
291+
}
292+
293+
.h-app-side-col {
294+
align-items: center;
295+
min-height: 58px;
296+
justify-content: flex-start;
297+
margin-left: -2px;
298+
}
299+
300+
.h-app-main-col {
301+
display: flex;
302+
align-items: center;
303+
padding-right: 6px;
304+
}
305+
306+
.h-app-media {
307+
display: inline-flex;
308+
align-items: center;
309+
justify-content: center;
310+
width: 58px;
311+
height: 58px;
312+
border-radius: 16px;
313+
314+
:deep(.el-avatar) {
315+
width: 50px !important;
316+
height: 50px !important;
317+
border-radius: 14px;
336318
}
337319
}
338320
339-
.h-app-divider {
340-
margin-top: 10px;
341-
border: 0;
342-
border-top: var(--panel-border);
321+
.h-app-heading {
322+
display: flex;
323+
align-items: center;
324+
gap: 4px;
325+
min-height: 20px;
326+
line-height: 1.2;
327+
}
328+
329+
.h-app-meta {
330+
margin-top: 1px;
331+
}
332+
333+
.h-app-actions {
334+
display: flex;
335+
flex-wrap: wrap;
336+
align-items: center;
337+
gap: 0 10px;
338+
margin-top: 2px;
339+
line-height: 1.2;
343340
}
344341
345342
.h-app-desc {
346343
font-weight: 400;
347-
font-size: 12px;
344+
font-size: 11px;
348345
color: var(--el-text-color-regular);
349346
}
350347
@@ -361,19 +358,46 @@ defineExpose({
361358
362359
.h-app-dropdown {
363360
font-weight: 600;
364-
font-size: 16px;
361+
font-size: 14px;
365362
color: var(--panel-text-color);
363+
min-height: 18px;
366364
}
367365
368-
.h-app-margin {
369-
margin-top: 2px;
366+
:deep(.h-app-actions .el-button) {
367+
min-height: 16px;
368+
margin-left: 0 !important;
369+
padding: 0;
370370
}
371371
372-
.h-app-option {
373-
font-weight: 500;
374-
font-size: 14px;
375-
line-height: 20px;
376-
color: var(--el-text-color-regular);
372+
@media only screen and (max-width: 768px) {
373+
.h-app-card {
374+
padding: 12px;
375+
margin-right: 0;
376+
border-radius: 14px;
377+
}
378+
379+
.h-app-card .h-app-content {
380+
padding-left: 0;
381+
}
382+
383+
.h-app-media {
384+
width: 56px;
385+
height: 56px;
386+
border-radius: 16px;
387+
}
388+
389+
.h-app-heading {
390+
min-height: 22px;
391+
}
392+
393+
.h-app-dropdown,
394+
.h-app-card .h-app-content .h-app-title {
395+
font-size: 14px;
396+
}
397+
398+
.h-app-actions {
399+
gap: 2px 8px;
400+
}
377401
}
378402
379403
/* FOR MOZILLA */

0 commit comments

Comments
 (0)