Skip to content

style: refine app launcher card layout #12404

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
ssongliu merged 1 commit into from
Apr 3, 2026
+129 −105
Merged

style: refine app launcher card layout #12404

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
234 changes: 129 additions & 105 deletions frontend/src/views/home/app/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,14 @@
<el-scrollbar height="531px" class="moz-height">
<div class="h-app-card" v-for="(app, index) in apps" :key="index">
<el-row :gutter="5">
<el-col :span="5">
<el-avatar shape="square" :size="55" :src="getAppIconSrc(app)" />
<el-col :span="5" class="h-app-media-col">
<div class="h-app-media">
<el-avatar shape="square" :size="55" :src="getAppIconSrc(app)" />
</div>
</el-col>
<el-col :span="16">
<el-col :span="16" class="h-app-main-col">
<div class="h-app-content" v-if="!app.currentRow">
<div>
<div class="h-app-heading">
<span class="h-app-title">{{ app.name }}</span>
<svg-icon class="svg-icon" iconName="p-huobao1"></svg-icon>
</div>
Expand All @@ -42,7 +44,7 @@
</div>
</div>
<div class="h-app-content" v-else>
<div>
<div class="h-app-heading">
<el-dropdown trigger="hover">
<el-button type="primary" plain size="small" link class="h-app-dropdown">
{{ app.currentRow.name }}
Expand All @@ -61,12 +63,12 @@
</template>
</el-dropdown>
</div>
<div class="h-app-margin">
<div class="h-app-meta">
<el-button plain size="small" link class="h-app-desc">
{{ $t('app.version') + ': ' + app.currentRow.version }}
</el-button>
</div>
<div class="h-app-margin">
<div class="h-app-actions">
<el-button
size="small"
type="primary"
Expand Down Expand Up @@ -100,63 +102,14 @@
size="small"
type="primary"
link
@click="routerToFileWithPath(app.currentRow.path)"
@click="routerToName('AppInstalled')"
>
{{ $t('home.dir') }}
{{ $t('tabs.more') }}
Comment on lines +105 to +107
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot Apr 2, 2026

Choose a reason for hiding this comment

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

P2 Badge Keep app-specific actions in launcher card

This change replaces the app-specific action entry point with a generic AppInstalled navigation, so from the launcher card users can no longer directly open the selected app’s directory or website URL (those controls were removed in this commit). For installed/website apps, this is a functional regression: the action now loses app context and forces users to re-find the app in another page instead of acting on the current card.

Useful? React with 👍 / 👎.

</el-button>
<el-popover
placement="left"
trigger="hover"
v-if="app.currentRow.appType == 'website'"
:width="260"
>
<template #reference>
<el-button
link
size="small"
type="primary"
:style="mobile ? 'margin-left: -1px' : ''"
>
{{ $t('app.toLink') }}
</el-button>
</template>
<span v-if="defaultLink == '' && app.currentRow.webUI == ''">
{{ $t('app.webUIConfig') }}
<el-link
icon="Position"
@click="jumpToPath(router, '/settings/panel')"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
<div v-else>
<div>
<el-button
v-if="defaultLink != ''"
type="primary"
link
@click="toLink(defaultLink + ':' + app.currentRow.httpPort)"
>
{{ defaultLink + ':' + app.currentRow.httpPort }}
</el-button>
</div>
<div>
<el-button
v-if="app.currentRow.webUI != ''"
type="primary"
link
@click="toLink(app.currentRow.webUI)"
>
{{ app.currentRow.webUI }}
</el-button>
</div>
</div>
</el-popover>
</div>
</div>
</el-col>
<el-col :span="1">
<el-col :span="1" class="h-app-side-col">
<el-button
class="h-app-button"
type="primary"
Expand All @@ -170,7 +123,6 @@
</el-button>
</el-col>
</el-row>
<div class="h-app-divider" />
</div>
</el-scrollbar>
</template>
Expand All @@ -180,18 +132,14 @@

<script lang="ts" setup>
import { getAppIconUrl, installedOp } from '@/api/modules/app';
import { getAgentSettingByKey } from '@/api/modules/setting';
import { changeLauncherStatus, loadAppLauncher, loadAppLauncherOption } from '@/api/modules/dashboard';
import i18n from '@/lang';
import { GlobalStore } from '@/store';
import { MsgSuccess } from '@/utils/message';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { jumpToPath } from '@/utils/util';
import { computed, ref } from 'vue';
import { jumpToInstall } from '@/utils/app';
import { routerToFileWithPath, routerToNameWithQuery } from '@/utils/router';
import { routerToName, routerToNameWithQuery } from '@/utils/router';

const router = useRouter();
const globalStore = GlobalStore();

let loading = ref(false);
Expand All @@ -201,12 +149,10 @@ const filter = ref();
const mobile = computed(() => {
return globalStore.isMobile();
});
const defaultLink = ref('');

const acceptParams = (): void => {
search();
loadOption();
getConfig();
};

const goInstall = (key: string, type: string) => {
Expand Down Expand Up @@ -245,19 +191,6 @@ const onChangeStatus = async (row: any) => {
});
};

const toLink = (link: string) => {
window.open(link, '_blank');
};

const getConfig = async () => {
try {
const res = await getAgentSettingByKey('SystemIP');
if (res.data != '') {
defaultLink.value = res.data;
}
} catch (error) {}
};

const onOperate = async (operation: string, row: any) => {
ElMessageBox.confirm(
i18n.global.t('app.operatorHelper', [i18n.global.t('commons.button.' + operation)]),
Expand Down Expand Up @@ -306,45 +239,109 @@ defineExpose({

<style lang="scss" scoped>
.h-app-card {
cursor: pointer;
padding: 10px 15px;
margin-right: 10px;
line-height: 18px;
padding: 8px 10px;
margin: 0 4px 3px 0;
min-height: 66px;
line-height: 16px;
border: 1px solid var(--el-border-color-lighter);
border-radius: 10px;
transition: border-color 0.18s ease;

.h-app-content {
padding-left: 15px;
padding-left: 4px;

.h-app-title {
font-weight: 500;
font-size: 15px;
font-weight: 600;
font-size: 14px;
color: var(--panel-text-color);
letter-spacing: 0.01em;
}

.h-app-desc {
margin-top: 2px;
margin-top: 3px;
line-height: 1.4;

span {
font-weight: 400;
font-size: 12px;
font-size: 11px;
color: var(--el-text-color-regular);
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
}
}

.h-app-button {
margin-top: 10px;
padding: 1px 10px;
line-height: 1;
border-radius: 999px;
}

&:hover {
background-color: rgba(0, 94, 235, 0.03);
border-color: var(--el-color-primary);
}
}

.h-app-media-col,
.h-app-side-col {
display: flex;
align-items: flex-start;
}

.h-app-side-col {
align-items: center;
min-height: 58px;
justify-content: flex-start;
margin-left: -2px;
}

.h-app-main-col {
display: flex;
align-items: center;
padding-right: 6px;
}

.h-app-media {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 16px;

:deep(.el-avatar) {
width: 50px !important;
height: 50px !important;
border-radius: 14px;
}
}

.h-app-divider {
margin-top: 10px;
border: 0;
border-top: var(--panel-border);
.h-app-heading {
display: flex;
align-items: center;
gap: 4px;
min-height: 20px;
line-height: 1.2;
}

.h-app-meta {
margin-top: 1px;
}

.h-app-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 10px;
margin-top: 2px;
line-height: 1.2;
}

.h-app-desc {
font-weight: 400;
font-size: 12px;
font-size: 11px;
color: var(--el-text-color-regular);
}

Expand All @@ -361,19 +358,46 @@ defineExpose({

.h-app-dropdown {
font-weight: 600;
font-size: 16px;
font-size: 14px;
color: var(--panel-text-color);
min-height: 18px;
}

.h-app-margin {
margin-top: 2px;
:deep(.h-app-actions .el-button) {
min-height: 16px;
margin-left: 0 !important;
padding: 0;
}

.h-app-option {
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: var(--el-text-color-regular);
@media only screen and (max-width: 768px) {
.h-app-card {
padding: 12px;
margin-right: 0;
border-radius: 14px;
}

.h-app-card .h-app-content {
padding-left: 0;
}

.h-app-media {
width: 56px;
height: 56px;
border-radius: 16px;
}

.h-app-heading {
min-height: 22px;
}

.h-app-dropdown,
.h-app-card .h-app-content .h-app-title {
font-size: 14px;
}

.h-app-actions {
gap: 2px 8px;
}
}

/* FOR MOZILLA */
Expand Down
Loading