Skip to content

Commit 8881827

Browse files
zhengkunwang223zhengkunwang223
authored
feat: Optimize the structure of installed apps in the App Store (#11361)
1 parent d957990 commit 8881827

File tree

9 files changed

+439
-395
lines changed

9 files changed

+439
-395
lines changed

‎agent/app/service/website.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -626,10 +626,10 @@ func (w WebsiteService) GetWebsite(id uint) (response.WebsiteDTO, error) {
626626
dName := d.GetName()
627627
if _, ok := dto.LBAlgorithms[dName]; ok {
628628
res.Algorithm = dName
629+
break
629630
}
630631
}
631632
res.Servers = getNginxUpstreamServers(up.UpstreamServers)
632-
break
633633
}
634634
}
635635
return res, nil

‎frontend/src/api/interface/app.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,9 @@ export namespace App {
165165
webUI: string;
166166
appKey?: string;
167167
serviceName: string;
168+
appStatus?: string;
169+
appType?: string;
170+
version?: string;
168171
}
169172

170173
export interface AppInstalledInfo {

‎frontend/src/api/interface/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ export interface SearchWithPage {
2828
}
2929
export interface CommonModel {
3030
id: number;
31-
CreatedAt?: string;
32-
UpdatedAt?: string;
31+
createdAt?: string;
32+
updatedAt?: string;
3333
}
3434
export interface DescriptionUpdate {
3535
id: number;

‎frontend/src/views/app-store/detail/index.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,6 @@ const getApp = async () => {
110110
try {
111111
const res = await getAppByKey(appKey.value);
112112
app.value = res.data;
113-
app.value.icon = 'data:image/png;base64,' + res.data.icon;
114113
version.value = app.value.versions[0];
115114
getDetail(app.value.id, version.value);
116115
} finally {

‎frontend/src/views/app-store/installed/app/card.vue‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<template>
2+
<div class="install-card">
3+
<el-card class="e-card">
4+
<el-row :gutter="10">
5+
<el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="3">
6+
<AppIcon
7+
@open-detail="$emit('openDetail')"
8+
:appID="installed.appID"
9+
:currentNode="currentNode"
10+
></AppIcon>
11+
</el-col>
12+
<el-col :xs="21" :sm="21" :md="21" :lg="20" :xl="21">
13+
<div class="a-detail">
14+
<AppHeader
15+
:installed="installed"
16+
:mode="mode"
17+
:defaultLink="defaultLink"
18+
@open-backups="$emit('openBackups')"
19+
@open-log="$emit('openLog')"
20+
@open-terminal="$emit('openTerminal')"
21+
@open-operate="$emit('openOperate')"
22+
@favorite-install="$emit('favoriteInstall')"
23+
@to-folder="$emit('toFolder')"
24+
@open-uploads="$emit('openUploads')"
25+
@ignore-app="$emit('ignoreApp')"
26+
@to-container="$emit('toContainer')"
27+
></AppHeader>
28+
<AppInfo
29+
:installed="installed"
30+
:defaultLink="defaultLink"
31+
@open-link="$emit('openLink')"
32+
@to-link="$emit('toLink')"
33+
@jump-to-path="$emit('jumpToPath', '/settings/panel')"
34+
></AppInfo>
35+
<div class="app-divider" />
36+
<slot name="buttons"></slot>
37+
</div>
38+
</el-col>
39+
</el-row>
40+
</el-card>
41+
</div>
42+
</template>
43+
44+
<script lang="ts" setup>
45+
import AppIcon from '@/views/app-store/installed/app/icon.vue';
46+
import AppHeader from '@/views/app-store/installed/app/header.vue';
47+
import AppInfo from '@/views/app-store/installed/app/info.vue';
48+
49+
import { App } from '@/api/interface/app';
50+
51+
interface Props {
52+
installed: App.AppInstalled;
53+
mode: string;
54+
defaultLink: string;
55+
currentNode: string;
56+
}
57+
defineProps<Props>();
58+
59+
defineEmits([
60+
'toFolder',
61+
'openUploads',
62+
'openDetail',
63+
'openBackups',
64+
'openLog',
65+
'openTerminal',
66+
'openOperate',
67+
'favoriteInstall',
68+
'openLink',
69+
'toLink',
70+
'jumpToPath',
71+
'ignoreApp',
72+
'toContainer',
73+
]);
74+
</script>
75+
76+
<style scoped lang="scss">
77+
@use '@/views/app-store/index.scss';
78+
</style>

‎frontend/src/views/app-store/installed/app/header.vue‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
<template>
2+
<div class="d-name">
3+
<div class="flex items-center justify-between">
4+
<div class="min-w-50 flex items-center justify-start gap-1">
5+
<el-button link type="info">
6+
<el-tooltip :content="installed.name" placement="top">
7+
<span class="name">{{ installed.name }}</span>
8+
</el-tooltip>
9+
</el-button>
10+
<span class="status">
11+
<Status :key="installed.status" :status="installed.status"></Status>
12+
</span>
13+
<span class="msg">
14+
<el-popover
15+
v-if="isAppErr(installed)"
16+
placement="bottom"
17+
:width="400"
18+
trigger="hover"
19+
:content="installed.message"
20+
:popper-options="options"
21+
>
22+
<template #reference>
23+
<el-button link type="danger">
24+
<el-icon><Warning /></el-icon>
25+
</el-button>
26+
</template>
27+
<div class="app-error">
28+
{{ installed.message }}
29+
</div>
30+
</el-popover>
31+
</span>
32+
<span class="ml-1">
33+
<el-tooltip effect="dark" :content="$t('app.toFolder')" placement="top">
34+
<el-button type="primary" link @click="$emit('toFolder')" icon="FolderOpened"></el-button>
35+
</el-tooltip>
36+
</span>
37+
<span class="ml-1">
38+
<el-tooltip
39+
v-if="mode !== 'upgrade'"
40+
effect="dark"
41+
:content="$t('commons.button.log')"
42+
placement="top"
43+
>
44+
<el-button
45+
type="primary"
46+
link
47+
@click="$emit('openLog')"
48+
:disabled="installed.status === 'DownloadErr'"
49+
>
50+
<el-icon><Tickets /></el-icon>
51+
</el-button>
52+
</el-tooltip>
53+
</span>
54+
<span class="ml-1">
55+
<el-tooltip v-if="mode !== 'upgrade'" effect="dark" :content="$t('menu.terminal')" placement="top">
56+
<el-button
57+
type="primary"
58+
link
59+
@click="$emit('openTerminal')"
60+
:disabled="installed.status !== 'Running'"
61+
>
62+
<el-icon>
63+
<SvgIcon iconName="p-terminal2" />
64+
</el-icon>
65+
</el-button>
66+
</el-tooltip>
67+
</span>
68+
<span class="ml-1">
69+
<el-tooltip v-if="mode !== 'upgrade'" effect="dark" :content="$t('menu.container')" placement="top">
70+
<el-button type="primary" link @click="$emit('toContainer')">
71+
<el-icon>
72+
<SvgIcon iconName="p-docker" />
73+
</el-icon>
74+
</el-button>
75+
</el-tooltip>
76+
</span>
77+
<span class="ml-1" v-if="mode === 'installed'">
78+
<el-tooltip
79+
effect="dark"
80+
:content="$t('website.cancelFavorite')"
81+
placement="top-start"
82+
v-if="installed.favorite"
83+
>
84+
<el-button
85+
link
86+
size="large"
87+
icon="StarFilled"
88+
type="warning"
89+
@click="$emit('favoriteInstall')"
90+
></el-button>
91+
</el-tooltip>
92+
<el-tooltip effect="dark" :content="$t('website.favorite')" placement="top-start" v-else>
93+
<el-button link icon="Star" type="info" @click="$emit('favoriteInstall')"></el-button>
94+
</el-tooltip>
95+
</span>
96+
</div>
97+
<div class="flex flex-wrap items-center justify-end gap-1">
98+
<el-button
99+
class="h-button"
100+
plain
101+
round
102+
size="small"
103+
@click="$emit('openUploads')"
104+
v-if="mode === 'installed'"
105+
>
106+
{{ $t('database.loadBackup') }}
107+
</el-button>
108+
<el-button
109+
class="h-button"
110+
plain
111+
round
112+
size="small"
113+
@click="$emit('openBackups')"
114+
v-if="mode === 'installed'"
115+
>
116+
{{ $t('commons.button.backup') }}
117+
</el-button>
118+
<el-button
119+
class="h-button"
120+
plain
121+
round
122+
size="small"
123+
:disabled="installed.status === 'Upgrading'"
124+
@click="$emit('ignoreApp')"
125+
v-if="mode === 'upgrade'"
126+
>
127+
{{ $t('commons.button.ignore') }}
128+
</el-button>
129+
<el-button
130+
class="h-button"
131+
plain
132+
round
133+
size="small"
134+
:disabled="
135+
(installed.status !== 'Running' && installed.status !== 'UpgradeErr') ||
136+
installed.appStatus === 'TakeDown'
137+
"
138+
@click="$emit('openOperate')"
139+
v-if="mode === 'upgrade'"
140+
>
141+
{{ $t('commons.button.upgrade') }}
142+
</el-button>
143+
</div>
144+
</div>
145+
</div>
146+
</template>
147+
148+
<script lang="ts" setup>
149+
import { App } from '@/api/interface/app';
150+
151+
interface Props {
152+
installed: App.AppInstalled;
153+
mode: string;
154+
}
155+
defineProps<Props>();
156+
157+
defineEmits([
158+
'toFolder',
159+
'openLog',
160+
'openTerminal',
161+
'toContainer',
162+
'openBackups',
163+
'openOperate',
164+
'ignoreApp',
165+
'openUploads',
166+
'favoriteInstall',
167+
]);
168+
169+
const options = {
170+
modifiers: [
171+
{
172+
name: 'flip',
173+
options: {
174+
padding: 5,
175+
fallbackPlacements: ['bottom-start', 'top-start', 'right', 'left'],
176+
},
177+
},
178+
],
179+
};
180+
181+
const isAppErr = (row: any) => {
182+
return row.status.includes('Err') || row.status.includes('Error') || row.status.includes('UnHealthy');
183+
};
184+
</script>
185+
<style scoped lang="scss">
186+
@use '@/views/app-store/index.scss';
187+
188+
.svg-icon {
189+
width: 100%;
190+
height: 100%;
191+
padding: 0;
192+
}
193+
</style>

‎frontend/src/views/app-store/installed/app/icon.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div class="icon">
3+
<el-avatar @click="$emit('openDetail')" shape="square" :size="77" :src="getAppIconUrl(appID, currentNode)" />
4+
</div>
5+
</template>
6+
7+
<script lang="ts" setup>
8+
import { getAppIconUrl } from '@/api/modules/app';
9+
10+
interface Props {
11+
currentNode: string;
12+
appID: number;
13+
}
14+
defineProps<Props>();
15+
16+
defineEmits(['openDetail']);
17+
</script>

0 commit comments

Comments
 (0)