Merge pull request #45 from beclab/fix/ui

fix:UI
beclab · Oct 28, 2024 · baf1f4f · baf1f4f
2 parents 2b44001 + 6782fb1
commit baf1f4f
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 42 deletions.
diff --git a/frontend/quasar.config.js b/frontend/quasar.config.js
@@ -163,7 +163,7 @@ module.exports = configure(function (/* ctx */) {
 					}
 				: {
 						'/app-store': {
-							target: `https://market.${process.env.ACCOUNT}.myterminus.com`,
+							target: `https://market.local.${process.env.ACCOUNT}.myterminus.com`,
 							changeOrigin: true
 						}
 					}

diff --git a/frontend/src/components/appcard/InstallButton.vue b/frontend/src/components/appcard/InstallButton.vue
@@ -9,10 +9,10 @@
 			'--width': larger ? '88px' : '72px',
 			'--statusWidth': larger
 				? showDropMenu
-					? 'calc(100% - 21px)'
+					? 'calc(100% - 25px)'
 					: '100%'
 				: showDropMenu
-					? 'calc(100% - 17px)'
+					? 'calc(100% - 21px)'
 					: '100%'
 		}"
 	>
@@ -65,22 +65,27 @@
 		<div
 			v-if="showDropMenu"
 			class="install_btn_separator_bg items-center"
-			:style="{ background: backgroundColor, height: larger ? '32px' : '24px' }"
+			:style="{
+				background: backgroundColor,
+				height: larger ? '32px' : '24px',
+				'--paddingY': larger ? '8px' : '6px'
+			}"
 		>
 			<div class="install_btn_separator" />
 		</div>
 		<q-btn-dropdown
 			v-if="showDropMenu"
 			dropdown-icon="img:/arrow.svg"
-			size="10"
+			:size="larger ? '12px' : '9px'"
 			:class="
 				larger ? 'application_install_larger_more' : 'application_install_more'
 			"
+			content-class="dropdown-menu"
 			flat
 			dense
 			:menu-offset="[0, 4]"
 		>
-			<div class="column dropdown-menu text-body3">
+			<div class="column text-body3">
 				<div
 					v-if="canLoad(item)"
 					class="dropdown-menu-item q-mt-xs"
@@ -622,15 +627,14 @@ function updateUI() {
 	padding: 0;
 
 	.install_btn_separator_bg {
-		width: 1px;
+		width: 5px;
 		height: 100%;
-		padding-top: 4px;
-		padding-bottom: 4px;
+		padding: var(--paddingY) 2px;
 
 		.install_btn_separator {
 			width: 1px;
 			height: 100%;
-			background: $separator;
+			background: $btn-stroke;
 		}
 	}
 
@@ -697,26 +701,19 @@ function updateUI() {
 	}
 }
 
-.dropdown-menu {
-	overflow: hidden;
-	width: 88px;
-	border-radius: 8px;
-	padding: 8px;
+.dropdown-menu-item {
+	height: 32px;
+	color: $ink-2;
+	padding: 8px 12px;
 
-	.dropdown-menu-item {
-		height: 32px;
-		color: $ink-2;
-		padding: 8px 12px;
-
-		&:hover {
-			background: $background-hover;
-			border-radius: 4px;
-		}
+	&:hover {
+		background: $background-hover;
+		border-radius: 4px;
+	}
 
-		&:active {
-			background: $background-hover;
-			border-radius: 4px;
-		}
+	&:active {
+		background: $background-hover;
+		border-radius: 4px;
 	}
 }
 </style>
diff --git a/frontend/src/components/appintro/AppIntroItem.vue b/frontend/src/components/appintro/AppIntroItem.vue
@@ -9,7 +9,7 @@
 		class="info-item-root row justify-between items-start no-wrap"
 	>
 		<div class="info-title col-5 text-body2 text-ink-3">{{ title }}</div>
-		<expend-text-view v-if="content" :text="content" />
+		<expend-text-view v-if="content" :text="content" align="right" />
 		<div v-else-if="link" class="info_link col-7" @click="emit('onLinkClick')">
 			{{ link }}
 		</div>

diff --git a/frontend/src/components/appintro/ExpendTextView.vue b/frontend/src/components/appintro/ExpendTextView.vue
@@ -3,7 +3,7 @@
 		<div
 			class="text-body2 text-ink-2"
 			:class="showDescription ? 'multi-row' : 'break-all'"
-			:style="{ '--displayLine': displayLine }"
+			:style="{ '--displayLine': displayLine, '--expendAlign': align }"
 			ref="multiRow"
 			v-html="formattedDescription"
 		/>
@@ -32,6 +32,10 @@ const props = defineProps({
 		type: Number,
 		default: 3
 	},
+	align: {
+		type: String,
+		default: 'left'
+	},
 	moreText: {
 		type: String,
 		default: i18n.global.t('base.more'),
@@ -79,9 +83,11 @@ watch(formattedDescription, () => {
 <style scoped lang="scss">
 .multi-row {
 	overflow: visible;
+	text-align: var(--expendAlign);
 }
 
 .break-all {
+	text-align: var(--expendAlign);
 	display: -webkit-box;
 	overflow: hidden;
 	white-space: normal !important;

diff --git a/frontend/src/css/app.scss b/frontend/src/css/app.scss
@@ -396,3 +396,11 @@ body.body--dark .q-drawer {
 	left: -24px;
 	filter: drop-shadow(24px 0 $blue-default);
 }
+
+.dropdown-menu {
+	overflow: hidden;
+	width: 88px;
+	border-radius: 8px;
+	padding: 8px;
+	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2) !important;
+}
diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
@@ -60,7 +60,7 @@
 					clickable
 					:active="menuStore.currentItem === MENU_TYPE.MyTerminus"
 					active-class="my-active-link"
-					class="bottom-menu row justify-start items-center cursor-pointer"
+					class="text-ink-2 bottom-menu row justify-start items-center cursor-pointer"
 					@click="changeItemMenu({ key: MENU_TYPE.MyTerminus })"
 				>
 					<q-icon name="sym_r_home" size="20px" />
@@ -337,7 +337,7 @@ const installOS = async () => {
 }
 
 .main-layout ::v-deep(.my-active-link) {
-	color: $blue-default;
-	background-color: $blue-soft;
+	color: $blue-default !important;
+	background-color: $blue-soft !important;
 }
 </style>
diff --git a/frontend/src/pages/application/AppDetailPage.vue b/frontend/src/pages/application/AppDetailPage.vue
@@ -59,14 +59,22 @@
 							"
 							class="app-details-padding app-detail-warning bg-red-soft row justify-start"
 						>
-							<q-icon color="negative" size="16px" name="sym_r_error" />
+							<q-icon
+								style="margin-top: 2px"
+								color="negative"
+								size="16px"
+								name="sym_r_error"
+							/>
 							<div class="column justify-start">
 								<div class="text-body-3 text-negative q-ml-sm">
 									{{ t('my.unable_to_install_app') }}
 								</div>
 								<template v-for="message in item.preflightError" :key="message">
-									<div class="text-body-3 text-negative">
-										{{ `&nbsp;·&nbsp;${message}` }}
+									<div class="row justify-start items-center">
+										<div class="text-circle bg-negative" />
+										<div class="text-negative text-body-3">
+											{{ message }}
+										</div>
 									</div>
 								</template>
 							</div>
@@ -1126,6 +1134,13 @@ const clickReturn = () => {
 			padding-right: 44px;
 		}
 
+		.text-circle {
+			margin: 6px;
+			width: 4px;
+			height: 4px;
+			border-radius: 50%;
+		}
+
 		.app-detail-warning {
 			margin-left: 44px;
 			width: calc(100% - 88px);

diff --git a/frontend/src/pages/me/LogPage.vue b/frontend/src/pages/me/LogPage.vue
@@ -16,7 +16,7 @@
 							:loading="loading"
 							v-model:pagination="pagination"
 							hide-pagination
-							style="margin-top: 12px"
+							style="margin-top: 32px"
 						>
 							<template v-slot:header="props">
 								<q-tr :props="props" style="height: 32px">
@@ -31,7 +31,7 @@
 								</q-tr>
 							</template>
 							<template v-slot:body-cell-status="props">
-								<q-td :props="props">
+								<q-td :props="props" style="height: 56px">
 									<q-badge
 										rounded
 										:color="
@@ -57,7 +57,7 @@
 
 						<div
 							v-if="rows.length > 0 || loading"
-							class="row justify-center q-mt-md"
+							class="row justify-end q-mt-md"
 						>
 							<q-pagination
 								v-model="pagination.page"

diff --git a/pkg/apiserver/service/v1/handler_admin.go b/pkg/apiserver/service/v1/handler_admin.go
@@ -4,9 +4,6 @@ import (
 	"encoding/json"
 	"errors"
 	"fmt"
-	"github.com/emicklei/go-restful/v3"
-	"github.com/golang/glog"
-	helmtime "helm.sh/helm/v3/pkg/time"
 	"market/internal/appmgr"
 	"market/internal/appservice"
 	"market/internal/boltdb"
@@ -16,6 +13,10 @@ import (
 	"reflect"
 	"sort"
 	"strings"
+
+	"github.com/emicklei/go-restful/v3"
+	"github.com/golang/glog"
+	helmtime "helm.sh/helm/v3/pkg/time"
 )
 
 func (h *Handler) myterminus(req *restful.Request, resp *restful.Response) {
@@ -91,6 +92,9 @@ func (h *Handler) myterminus(req *restful.Request, resp *restful.Response) {
 				info.Version = infoMarket.Version
 			}
 
+			info.Progress = h.commonWatchDogManager.GetProgress(info.Name)
+			info.Progress = h.watchDogManager.GetProgress(info.Name)
+
 			if info.CfgType == constants.AppType {
 				//todo
 				info.CurVersion = appsMap[info.Name].Spec.Settings["version"]