From cf7eb04605fd4e0eab02c8f85851696165bc210e Mon Sep 17 00:00:00 2001
From: huaiyuan <1029848564@qq.com>
Date: Mon, 11 Nov 2024 20:29:27 +0800
Subject: [PATCH] fix: fixed some ui bug

---
 packages/frontend/src/assets/esc-dark.svg     |   3 +
 packages/frontend/src/assets/search-icon.svg  |   4 +-
 .../frontend/src/components/ConfirmDialog.vue |   2 +-
 .../src/components/UpgradeComponent.vue       |  19 +-
 packages/frontend/src/css/quasar-bex.sass     | 555 ++++++++++++++++++
 .../frontend/src/css/quasar.variables.scss    |   5 +-
 packages/frontend/src/i18n/en-US/index.ts     |   8 +
 packages/frontend/src/i18n/zh-CN/index.ts     |   8 +
 packages/frontend/src/pages/LaunchPad.vue     |   1 +
 .../src/pages/Search/FooterComponent.vue      |  18 +-
 .../src/pages/Search/HomeComponent.vue        |  10 +-
 .../frontend/src/pages/Search/IndexPage.vue   |  11 +-
 .../frontend/src/pages/Search/TextSearch.vue  |  10 +-
 .../frontend/src/pages/mobile/LaunchPad.vue   |  44 +-
 14 files changed, 661 insertions(+), 37 deletions(-)
 create mode 100644 packages/frontend/src/assets/esc-dark.svg
 create mode 100644 packages/frontend/src/css/quasar-bex.sass

diff --git a/packages/frontend/src/assets/esc-dark.svg b/packages/frontend/src/assets/esc-dark.svg
new file mode 100644
index 0000000..1dfcfcb
--- /dev/null
+++ b/packages/frontend/src/assets/esc-dark.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.95466 5.66663C7.34675 5.66663 6.87494 5.81179 6.54003 6.10301C6.20512 6.39482 6.03705 6.7429 6.03705 7.14849C6.03705 7.49218 6.14507 7.75561 6.35988 7.93836C6.57407 8.12347 6.94306 8.27858 7.4674 8.40238C8.19602 8.56626 8.61581 8.68175 8.72847 8.74895C8.84114 8.81616 8.89775 8.91346 8.89775 9.04256C8.89775 9.17697 8.82789 9.27818 8.68737 9.34538C8.54684 9.41259 8.35802 9.44671 8.1203 9.44671C7.71421 9.44671 7.43646 9.3697 7.28604 9.21642C7.20061 9.13094 7.14577 8.98576 7.12039 8.78119H5.8968C5.8968 9.23276 6.07003 9.60394 6.4167 9.89576C6.76337 10.187 7.29923 10.3333 8.026 10.3333C8.73852 10.3333 9.26517 10.1952 9.60627 9.91994C9.94675 9.64404 10.1165 9.2888 10.1165 8.85373C10.1165 8.5236 9.99813 8.24865 9.76103 8.02817C9.52084 7.81064 9.16109 7.64785 8.68132 7.53997C7.96012 7.38964 7.53969 7.28349 7.42145 7.22218C7.3026 7.16323 7.24372 7.06753 7.24372 6.93548C7.24372 6.83055 7.30035 6.73926 7.41178 6.66145C7.52321 6.58363 7.71091 6.54515 7.97401 6.54515C8.29405 6.54515 8.51921 6.62267 8.6523 6.77889C8.72287 6.86496 8.76738 6.98095 8.78409 7.12892H9.99076C9.9369 6.59186 9.72784 6.21349 9.36445 5.99478C9.00107 5.77548 8.53162 5.66663 7.95466 5.66663ZM3.28396 5.67469C2.60796 5.67469 2.0582 5.8776 1.63477 6.28378C1.21134 6.68996 1 7.27285 1 8.03393C1 8.8457 1.23445 9.43193 1.70369 9.79213C2.17293 10.1523 2.7146 10.3333 3.3287 10.3333C4.07218 10.3333 4.65083 10.1194 5.06374 9.69196C5.32993 9.42314 5.47829 9.15805 5.5111 8.89748H4.28025C4.20844 9.02659 4.12586 9.12779 4.03239 9.2003C3.86091 9.33471 3.63679 9.4018 3.36255 9.4018C3.10317 9.4018 2.88141 9.34739 2.69756 9.23715C2.39484 9.0597 2.2337 8.75064 2.21513 8.31026H5.57518C5.58137 7.93061 5.56809 7.64026 5.53528 7.43865C5.47895 7.09378 5.35715 6.79134 5.16772 6.53018C4.95848 6.23424 4.69284 6.01641 4.37093 5.87964C4.04902 5.74228 3.68697 5.6741 3.28396 5.67469ZM12.924 5.6862C12.243 5.6862 11.7095 5.89687 11.322 6.31602C10.9344 6.73517 10.7416 7.32082 10.7416 8.07423C10.7416 8.74215 10.9172 9.28547 11.2676 9.70462C11.6173 10.1238 12.1636 10.3333 12.9059 10.3333C13.6487 10.3333 14.2095 10.0831 14.5877 9.58027C14.8248 9.26841 14.9582 8.93849 14.9867 8.58891H13.7559C13.7305 8.82 13.6565 9.00807 13.5382 9.1531C13.4187 9.29812 13.219 9.36956 12.9361 9.36956C12.538 9.36956 12.2654 9.18699 12.1212 8.82149C12.0419 8.62577 12.0039 8.36847 12.0039 8.04659C12.0039 7.70938 12.0419 7.43882 12.1212 7.23485C12.2716 6.85048 12.5505 6.65799 12.9579 6.65799C13.2432 6.65799 13.454 6.74652 13.5902 6.92397C13.6831 7.05602 13.7414 7.20337 13.7643 7.36726H15C14.9319 6.74119 14.7148 6.30396 14.3459 6.05695C13.9775 5.80994 13.5034 5.6862 12.924 5.6862ZM3.28638 6.62115C3.57114 6.62115 3.80843 6.69919 4.00095 6.85718C4.19348 7.01577 4.30028 7.24611 4.32257 7.55148H2.24536C2.28931 7.26557 2.39674 7.03958 2.56697 6.87215C2.73721 6.70473 2.97747 6.62115 3.28638 6.62115Z" fill="#ADADAD"/>
+</svg>
diff --git a/packages/frontend/src/assets/search-icon.svg b/packages/frontend/src/assets/search-icon.svg
index 093271a..6ec7c61 100644
--- a/packages/frontend/src/assets/search-icon.svg
+++ b/packages/frontend/src/assets/search-icon.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.6129 15.516C19.0653 13.5341 19.7159 11.0768 19.4343 8.63575C19.1528 6.19474 17.96 3.95004 16.0945 2.35072C14.2291 0.75141 11.8285 -0.084566 9.37314 0.0100437C6.91777 0.104653 4.58866 1.12287 2.85178 2.86099C1.11491 4.59911 0.0983577 6.92894 0.00550496 9.38438C-0.0873478 11.8398 0.750346 14.2398 2.35099 16.1041C3.95164 17.9684 6.1972 19.1596 8.63841 19.4394C11.0796 19.7192 13.5365 19.0669 15.5174 17.613H15.5159C15.5609 17.673 15.6089 17.73 15.6629 17.7855L21.4379 23.5605C21.7191 23.842 22.1007 24.0002 22.4986 24.0003C22.8965 24.0005 23.2782 23.8425 23.5596 23.5613C23.8411 23.28 23.9993 22.8985 23.9994 22.5006C23.9996 22.1027 23.8416 21.721 23.5604 21.4395L17.7854 15.6645C17.7318 15.6102 17.6741 15.5616 17.6129 15.516ZM17.9999 9.75003C17.9999 10.8334 17.7865 11.9062 17.3719 12.9072C16.9573 13.9081 16.3496 14.8176 15.5835 15.5837C14.8174 16.3497 13.908 16.9574 12.907 17.372C11.9061 17.7866 10.8333 18 9.74988 18C8.66648 18 7.59368 17.7866 6.59274 17.372C5.59181 16.9574 4.68233 16.3497 3.91625 15.5837C3.15017 14.8176 2.54248 13.9081 2.12788 12.9072C1.71327 11.9062 1.49988 10.8334 1.49988 9.75003C1.49988 7.56199 2.36908 5.46357 3.91625 3.9164C5.46343 2.36922 7.56185 1.50003 9.74988 1.50003C11.9379 1.50003 14.0363 2.36922 15.5835 3.9164C17.1307 5.46357 17.9999 7.56199 17.9999 9.75003Z" fill="#857C77"/>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.8355 8.22896C1.82439 7.38884 1.9787 6.55474 2.28961 5.77431C2.60053 4.99387 3.06197 4.28238 3.64758 3.68045C4.23319 3.07853 4.93151 2.59795 5.70266 2.26617C6.47381 1.93439 7.3027 1.7579 8.14199 1.74678C8.98128 1.73565 9.81455 1.89011 10.5942 2.20134C11.3739 2.51257 12.0846 2.97446 12.686 3.56066C13.2873 4.14685 13.7674 4.84586 14.0988 5.61778C14.4303 6.3897 14.6066 7.21942 14.6177 8.05954C14.6402 9.75626 13.9883 11.3924 12.8057 12.6081C11.623 13.8237 10.0063 14.5193 8.31124 14.5417C6.61621 14.5642 4.98169 13.9117 3.76726 12.7279C2.55282 11.544 1.85795 9.92568 1.8355 8.22896ZM17.7376 16.4616L14.6207 13.34C15.2939 12.4982 15.7948 11.5319 16.0947 10.4962C16.3946 9.46048 16.4877 8.37579 16.3686 7.30408C16.2496 6.23237 15.9207 5.19465 15.4008 4.25023C14.8809 3.30581 14.1801 2.47321 13.3386 1.8C11.6395 0.440382 9.47046 -0.188053 7.30853 0.0529012C5.1466 0.293855 3.16879 1.38447 1.81004 3.0849C0.543572 4.66316 -0.0956169 6.65421 0.0152756 8.67553C0.126168 10.6969 0.97932 12.6059 2.41082 14.0358C3.84233 15.4658 5.75122 16.3158 7.77075 16.4226C9.79029 16.5294 11.778 15.8855 13.3521 14.6144L16.4675 17.733C16.6331 17.8994 16.8571 17.9944 17.0917 17.9976C17.3263 18.0009 17.5529 17.9122 17.723 17.7505C17.8932 17.5888 17.9934 17.3669 18.0023 17.1322C18.0112 16.8976 17.928 16.6687 17.7706 16.4946L17.7376 16.4616Z" fill="#ADADAD"/>
 </svg>
diff --git a/packages/frontend/src/components/ConfirmDialog.vue b/packages/frontend/src/components/ConfirmDialog.vue
index f1b1f48..ba580c4 100644
--- a/packages/frontend/src/components/ConfirmDialog.vue
+++ b/packages/frontend/src/components/ConfirmDialog.vue
@@ -106,7 +106,7 @@ const onCancel = async () => {
 				border-radius: 8px;
 			}
 			.message {
-				max-width: 310px;
+				max-width: calc(100% - 45px);
 				font-size: 12px;
 				line-height: 16px;
 			}
diff --git a/packages/frontend/src/components/UpgradeComponent.vue b/packages/frontend/src/components/UpgradeComponent.vue
index 9a0b516..d04f67e 100644
--- a/packages/frontend/src/components/UpgradeComponent.vue
+++ b/packages/frontend/src/components/UpgradeComponent.vue
@@ -21,18 +21,18 @@
 			class="content"
 			v-if="['completed', 'not_running'].includes(upgradeStore.state)"
 		>
-			<div>Congratulations</div>
-			<div>Update successful</div>
+			<div>{{ t('upgrade.success_title') }}</div>
+			<div>{{ t('upgrade.success_message') }}</div>
 		</div>
 
 		<div class="content" v-else-if="upgradeStore.state === 'failed'">
-			<div>Upgrade failed</div>
-			<div>Upgrade failed,please try again</div>
+			<div>{{ t('upgrade.fail_title') }}</div>
+			<div>{{ t('upgrade.fail_message') }}</div>
 		</div>
 
 		<div class="content" v-else>
-			<div>Upgrading System</div>
-			<div>Please wait a moment</div>
+			<div>{{ t('upgrade.running_title') }}</div>
+			<div>{{ t('upgrade.running_message') }}</div>
 		</div>
 
 		<div
@@ -40,7 +40,7 @@
 			v-if="!['started', 'running'].includes(upgradeStore.state)"
 			@click="confirm"
 		>
-			Confirm
+			{{ t('buttons.confirm') }}
 		</div>
 		<div class="confirm" v-else style="opacity: 0"></div>
 	</div>
@@ -48,6 +48,7 @@
 <script lang="ts">
 import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
 import { useUpgradeStore } from '../stores/upgrade';
+import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
 	name: 'UpgradeComponent',
@@ -55,6 +56,7 @@ export default defineComponent({
 	setup(props, context) {
 		const upgradeStore = useUpgradeStore();
 		const timer = ref();
+		const { t } = useI18n();
 
 		const confirm = () => {
 			context.emit('closeUpgrade');
@@ -82,7 +84,8 @@ export default defineComponent({
 
 		return {
 			upgradeStore,
-			confirm
+			confirm,
+			t
 		};
 	}
 });
diff --git a/packages/frontend/src/css/quasar-bex.sass b/packages/frontend/src/css/quasar-bex.sass
new file mode 100644
index 0000000..52fd947
--- /dev/null
+++ b/packages/frontend/src/css/quasar-bex.sass
@@ -0,0 +1,555 @@
+$space-base   : 8px !default
+$space-x-base : $space-base !default
+$space-y-base : $space-base !default
+$space-none : (x: 0, y: 0) !default
+$space-xs   : (x: ($space-x-base * .5), y: ($space-y-base * .5)) !default
+$space-sm   : (x: $space-x-base, y: $space-y-base) !default
+$space-md   : (x: ($space-x-base* 1.5), y: ($space-y-base* 1.5)) !default
+$space-lg   : (x: ($space-x-base * 2.5), y: ($space-y-base * 2.5)) !default
+$space-xl   : (x: ($space-x-base * 4), y: ($space-y-base * 4)) !default
+$space-xxl   : (x: ($space-x-base * 5.5), y: ($space-y-base * 5.5)) !default
+$space-xxxl   : (x: ($space-x-base * 7), y: ($space-y-base * 7)) !default
+$space-xxxxl   : (x: ($space-x-base * 10), y: ($space-y-base * 10)) !default
+
+// sorry for long line; we need .sass and it doesn't support multi-line list
+$spaces: ('none': $space-none, 'xs': $space-xs, 'sm': $space-sm, 'md': $space-md, 'lg': $space-lg, 'xl': $space-xl, 'xxl': $space-xxl, 'xxxl': $space-xxxl, 'xxxxl': $space-xxxxl) !default
+
+$animate-duration : .3s !default
+$animate-delay    : .3s !default
+$animate-repeat   : 1 !default
+
+// Max width at which point
+// current size ends
+$breakpoint-xs: 799px !default
+$breakpoint-sm: 1023px !default
+$breakpoint-md: 1599px !default
+$breakpoint-lg: 1919px !default
+
+$flex-cols      : 12 !default
+$flex-gutter-xs : ($space-base * .5) !default
+$flex-gutter-sm : $space-base !default
+$flex-gutter-md : ($space-base* 1.5) !default
+$flex-gutter-lg : ($space-base * 2.5) !default
+$flex-gutter-xl : ($space-base * 4) !default
+$flex-gutter-xxl : ($space-base * 5.5) !default
+$flex-gutter-xxxl : ($space-base * 7) !default
+$flex-gutter-xxxxl : ($space-base * 10) !default
+
+$body-font-size   : 14px !default
+$body-line-height : 1.5 !default
+
+// sorry for long line; we need .sass and it doesn't support multi-line list
+$flex-gutter: ('none': 0, 'xs': $flex-gutter-xs, 'sm': $flex-gutter-sm, 'md': $flex-gutter-md, 'lg': $flex-gutter-lg, 'xl': $flex-gutter-xl, 'xxl': $flex-gutter-xxl, 'xxxl': $flex-gutter-xxxl,'xxxxl': $flex-gutter-xxxxl) !default
+
+// sorry for long line; we need .sass and it doesn't support multi-line list
+$sizes: ('xs': 0, 'sm': ($breakpoint-xs + 1), 'md': ($breakpoint-sm + 1), 'lg': ($breakpoint-md + 1), 'xl': ($breakpoint-lg + 1)) !default
+
+$breakpoint-xs-max: (map-get($sizes, "sm") - 0.02) !default
+
+$breakpoint-sm-min: map-get($sizes, "sm") !default
+$breakpoint-sm-max: (map-get($sizes, "md") - 0.02) !default
+
+$breakpoint-md-min: map-get($sizes, "md") !default
+$breakpoint-md-max: (map-get($sizes, "lg") - 0.02) !default
+
+$breakpoint-lg-min: map-get($sizes, "lg") !default
+$breakpoint-lg-max: (map-get($sizes, "xl") - 0.02) !default
+
+$breakpoint-xl-min: map-get($sizes, "xl") !default
+
+$h1:        (size: 60px,     line-height: 68px,     letter-spacing: normal, weight: 500) !default
+$h2:        (size: 48px,  line-height: 56px,  letter-spacing: normal, weight: 500) !default
+$h3:        (size: 32px,     line-height: 40px, letter-spacing: normal,    weight: 700) !default
+$h4:        (size: 24px, line-height: 32px,   letter-spacing: normal,  weight: 700) !default
+$h5:        (size: 20px,   line-height: 28px,     letter-spacing: normal,    weight: 700) !default
+$h6:        (size: 16px,  line-height: 24px,     letter-spacing: normal,   weight: 700) !default
+$subtitle1: (size: 16px,  line-height: 24px, letter-spacing: normal,  weight: 500) !default
+$subtitle2: (size: 14px,     line-height: 20px,  letter-spacing: normal,  weight: 500) !default
+$subtitle3: (size: 12px,  line-height:16px, letter-spacing: normal,  weight: 500) !default
+$body1:     (size: 16px,     line-height: 24px,   letter-spacing: normal,  weight: 400) !default
+$body2:     (size: 14px,     line-height: 20px,   letter-spacing: normal,  weight: 400) !default
+$body3:     (size: 12px,  line-height: 16px,  letter-spacing: normal,  weight: 400) !default
+$overline:  (size: 10px,   line-height: 12px,     letter-spacing: normal,  weight: 500) !default
+$caption:   (size: 10px,   line-height: 12px,  letter-spacing: normal,  weight: 400) !default
+
+// sorry for long line; we need .sass and it doesn't support multi-line list
+$headings: ('h1': $h1, 'h2': $h2, 'h3': $h3, 'h4': $h4, 'h5': $h5, 'h6': $h6, 'subtitle1': $subtitle1, 'subtitle2': $subtitle2, 'subtitle3': $subtitle3, 'body1': $body1, 'body2': $body2, 'body3': $body3, 'overline': $overline, 'caption': $caption) !default
+
+// sorry for long line; we need .sass and it doesn't support multi-line list
+$h-tags: (h1: map-get($headings, "h1"), h2: map-get($headings, "h2"), h3: map-get($headings, "h3"), h4: map-get($headings, "h4"), h5: map-get($headings, "h5"), h6: map-get($headings, "h6")) !default
+
+// sorry for long line; we need .sass and it doesn't support multi-line list
+$text-weights: (thin: 100, light: 300, regular: 400, medium: 500, bold: 700, bolder: 900) !default
+
+$primary   : #1976D2 !default
+$secondary : #26A69A !default
+$accent    : #9C27B0 !default
+
+// used by dark mode
+$dark-page : #121212 !default
+$dark      : #1d1d1d !default
+
+$positive  : #29CC5F !default
+$negative  : #FF4D4D !default
+$info      : #3377FF !default
+$warning   : #FEBE01 !default
+
+$dimmed-background       : rgba(0, 0, 0, .4) !default
+$light-dimmed-background : rgba(255, 255, 255, .6) !default
+
+$separator-color         : rgba(0, 0, 0, .12) !default
+$separator-dark-color    : rgba(255, 255, 255, .28) !default
+
+$red : #FF4D4D !default
+$red-1 : #FFF2F2 !default
+$red-2 : #FFDBDB !default
+$red-3 : #FFB8B8 !default
+$red-4 : #FF9494 !default
+$red-5 : #FF7070 !default
+$red-6 : #FF4D4D !default
+$red-7 : #FF2626 !default
+$red-8 : #FF0000 !default
+$red-9 : #E50000 !default
+$red-10 : #CC0000 !default
+$red-11 : #ff8a80 !default
+$red-12 : #ff5252 !default
+$red-13 : #ff1744 !default
+$red-14 : #d50000 !default
+$pink : #e91e63 !default
+$pink-1 : #fce4ec !default
+$pink-2 : #f8bbd0 !default
+$pink-3 : #f48fb1 !default
+$pink-4 : #f06292 !default
+$pink-5 : #ec407a !default
+$pink-6 : #e91e63 !default
+$pink-7 : #d81b60 !default
+$pink-8 : #c2185b !default
+$pink-9 : #ad1457 !default
+$pink-10 : #880e4f !default
+$pink-11 : #ff80ab !default
+$pink-12 : #ff4081 !default
+$pink-13 : #f50057 !default
+$pink-14 : #c51162 !default
+$purple : #9c27b0 !default
+$purple-1 : #f3e5f5 !default
+$purple-2 : #e1bee7 !default
+$purple-3 : #ce93d8 !default
+$purple-4 : #ba68c8 !default
+$purple-5 : #ab47bc !default
+$purple-6 : #9c27b0 !default
+$purple-7 : #8e24aa !default
+$purple-8 : #7b1fa2 !default
+$purple-9 : #6a1b9a !default
+$purple-10 : #4a148c !default
+$purple-11 : #ea80fc !default
+$purple-12 : #e040fb !default
+$purple-13 : #d500f9 !default
+$purple-14 : #aa00ff !default
+$deep-purple : #673ab7 !default
+$deep-purple-1 : #ede7f6 !default
+$deep-purple-2 : #d1c4e9 !default
+$deep-purple-3 : #b39ddb !default
+$deep-purple-4 : #9575cd !default
+$deep-purple-5 : #7e57c2 !default
+$deep-purple-6 : #673ab7 !default
+$deep-purple-7 : #5e35b1 !default
+$deep-purple-8 : #512da8 !default
+$deep-purple-9 : #4527a0 !default
+$deep-purple-10 : #311b92 !default
+$deep-purple-11 : #b388ff !default
+$deep-purple-12 : #7c4dff !default
+$deep-purple-13 : #651fff !default
+$deep-purple-14 : #6200ea !default
+$indigo : #3f51b5 !default
+$indigo-1 : #e8eaf6 !default
+$indigo-2 : #c5cae9 !default
+$indigo-3 : #9fa8da !default
+$indigo-4 : #7986cb !default
+$indigo-5 : #5c6bc0 !default
+$indigo-6 : #3f51b5 !default
+$indigo-7 : #3949ab !default
+$indigo-8 : #303f9f !default
+$indigo-9 : #283593 !default
+$indigo-10 : #1a237e !default
+$indigo-11 : #8c9eff !default
+$indigo-12 : #536dfe !default
+$indigo-13 : #3d5afe !default
+$indigo-14 : #304ffe !default
+$blue : #3377FF !default
+$blue-1 : #EBF1FF !default
+$blue-2 : #CCDDFF !default
+$blue-3 : #A6C3FF !default
+$blue-4 : #80AAFF !default
+$blue-5 : #5990FF !default
+$blue-6 : #3377FF !default
+$blue-7 : #0D5EFF !default
+$blue-8 : #004DE5 !default
+$blue-9 : #0044CC !default
+$blue-10 : #003CB2 !default
+$blue-11 : #82b1ff !default
+$blue-12 : #448aff !default
+$blue-13 : #2979ff !default
+$blue-14 : #2962ff !default
+$light-blue : #03a9f4 !default
+$light-blue-1 : #e1f5fe !default
+$light-blue-2 : #b3e5fc !default
+$light-blue-3 : #81d4fa !default
+$light-blue-4 : #4fc3f7 !default
+$light-blue-5 : #29b6f6 !default
+$light-blue-6 : #03a9f4 !default
+$light-blue-7 : #039be5 !default
+$light-blue-8 : #0288d1 !default
+$light-blue-9 : #0277bd !default
+$light-blue-10 : #01579b !default
+$light-blue-11 : #80d8ff !default
+$light-blue-12 : #40c4ff !default
+$light-blue-13 : #00b0ff !default
+$light-blue-14 : #0091ea !default
+$cyan : #00bcd4 !default
+$cyan-1 : #e0f7fa !default
+$cyan-2 : #b2ebf2 !default
+$cyan-3 : #80deea !default
+$cyan-4 : #4dd0e1 !default
+$cyan-5 : #26c6da !default
+$cyan-6 : #00bcd4 !default
+$cyan-7 : #00acc1 !default
+$cyan-8 : #0097a7 !default
+$cyan-9 : #00838f !default
+$cyan-10 : #006064 !default
+$cyan-11 : #84ffff !default
+$cyan-12 : #18ffff !default
+$cyan-13 : #00e5ff !default
+$cyan-14 : #00b8d4 !default
+$teal : #00BE7F !default
+$teal-1 : #BFFFEA !default
+$teal-2 : #91F2D2 !default
+$teal-3 : #67E5BB !default
+$teal-4 : #41D9A6 !default
+$teal-5 : #1FCC92 !default
+$teal-6 : #00BE7F !default
+$teal-7 : #00AB72 !default
+$teal-8 : #009664 !default
+$teal-9 : #008257 !default
+$teal-10 : #006E49 !default
+$teal-11 : #a7ffeb !default
+$teal-12 : #64ffda !default
+$teal-13 : #1de9b6 !default
+$teal-14 : #00bfa5 !default
+$green : #29CC5F !default
+$green-1 : #E5FFEE !default
+$green-2 : #C2FFD6 !default
+$green-3 : #96F2B5 !default
+$green-4 : #6EE596 !default
+$green-5 : #45D976 !default
+$green-6 : #29CC5F !default
+$green-7 : #0ABF46 !default
+$green-8 : #00B23B !default
+$green-9 : #009933 !default
+$green-10 : #00802A !default
+$green-11 : #b9f6ca !default
+$green-12 : #69f0ae !default
+$green-13 : #00e676 !default
+$green-14 : #00c853 !default
+$light-green : #2EE58A !default
+$light-green-1 : #E5FFF2 !default
+$light-green-2 : #C8FAE1 !default
+$light-green-3 : #9FF5CA !default
+$light-green-4 : #78F0B4 !default
+$light-green-5 : #52EB9F !default
+$light-green-6 : #2EE58A !default
+$light-green-7 : #21D97D !default
+$light-green-8 : #14CC71 !default
+$light-green-9 : #0ABF65 !default
+$light-green-10 : #00B25A !default
+$light-green-11 : #ccff90 !default
+$light-green-12 : #b2ff59 !default
+$light-green-13 : #76ff03 !default
+$light-green-14 : #64dd17 !default
+$lime : #cddc39 !default
+$lime-1 : #f9fbe7 !default
+$lime-2 : #f0f4c3 !default
+$lime-3 : #e6ee9c !default
+$lime-4 : #dce775 !default
+$lime-5 : #d4e157 !default
+$lime-6 : #cddc39 !default
+$lime-7 : #c0ca33 !default
+$lime-8 : #afb42b !default
+$lime-9 : #9e9d24 !default
+$lime-10 : #827717 !default
+$lime-11 : #f4ff81 !default
+$lime-12 : #eeff41 !default
+$lime-13 : #c6ff00 !default
+$lime-14 : #aeea00 !default
+$yellow : #FFEB3B !default
+$yellow-1 : #FFFCE0 !default
+$yellow-2 : #FFF8BF !default
+$yellow-3 : #FFF59E !default
+$yellow-4 : #FFF27D !default
+$yellow-5 : #FFEE5C !default
+$yellow-6 : #FFEB3B !default
+$yellow-7 : #F2DC18 !default
+$yellow-8 : #E5CE00 !default
+$yellow-9 : #D9C300 !default
+$yellow-10 : #CCB700 !default
+$yellow-11 : #ffff8d !default
+$yellow-12 : #ffff00 !default
+$yellow-13 : #ffea00 !default
+$yellow-14 : #ffd600 !default
+$amber : #ffc107 !default
+$amber-1 : #fff8e1 !default
+$amber-2 : #ffecb3 !default
+$amber-3 : #ffe082 !default
+$amber-4 : #ffd54f !default
+$amber-5 : #ffca28 !default
+$amber-6 : #ffc107 !default
+$amber-7 : #ffb300 !default
+$amber-8 : #ffa000 !default
+$amber-9 : #ff8f00 !default
+$amber-10 : #ff6f00 !default
+$amber-11 : #ffe57f !default
+$amber-12 : #ffd740 !default
+$amber-13 : #ffc400 !default
+$amber-14 : #ffab00 !default
+$orange : #FF7733 !default
+$orange-1 : #FFF1EB !default
+$orange-2 : #FFDDCC !default
+$orange-3 : #FFC3A6 !default
+$orange-4 : #FFAA80 !default
+$orange-5 : #FF9059 !default
+$orange-6 : #FF7733 !default
+$orange-7 : #FF5E0D !default
+$orange-8 : #E54D00 !default
+$orange-9 : #CC4400 !default
+$orange-10 : #B23C00 !default
+$orange-11 : #ffd180 !default
+$orange-12 : #ffab40 !default
+$orange-13 : #ff9100 !default
+$orange-14 : #ff6d00 !default
+$deep-orange : #ff5722 !default
+$deep-orange-1 : #fbe9e7 !default
+$deep-orange-2 : #ffccbc !default
+$deep-orange-3 : #ffab91 !default
+$deep-orange-4 : #ff8a65 !default
+$deep-orange-5 : #ff7043 !default
+$deep-orange-6 : #ff5722 !default
+$deep-orange-7 : #f4511e !default
+$deep-orange-8 : #e64a19 !default
+$deep-orange-9 : #d84315 !default
+$deep-orange-10 : #bf360c !default
+$deep-orange-11 : #ff9e80 !default
+$deep-orange-12 : #ff6e40 !default
+$deep-orange-13 : #ff3d00 !default
+$deep-orange-14 : #dd2c00 !default
+$brown : #795548 !default
+$brown-1 : #efebe9 !default
+$brown-2 : #d7ccc8 !default
+$brown-3 : #bcaaa4 !default
+$brown-4 : #a1887f !default
+$brown-5 : #8d6e63 !default
+$brown-6 : #795548 !default
+$brown-7 : #6d4c41 !default
+$brown-8 : #5d4037 !default
+$brown-9 : #4e342e !default
+$brown-10 : #3e2723 !default
+$brown-11 : #d7ccc8 !default
+$brown-12 : #bcaaa4 !default
+$brown-13 : #8d6e63 !default
+$brown-14 : #5d4037 !default
+$grey : #8F8F8F !default
+$grey-1 : #F6F6F6 !default
+$grey-2 : #EBEBEB !default
+$grey-3 : #DBDBDB !default
+$grey-4 : #CCCBCB !default
+$grey-5 : #ADADAD !default
+$grey-6 : #8F8F8F !default
+$grey-7 : #707070 !default
+$grey-8 : #5C5C5C !default
+$grey-9 : #3D3D3D !default
+$grey-10 : #1F1F1F !default
+$grey-11 : #f5f5f5 !default
+$grey-12 : #eeeeee !default
+$grey-13 : #bdbdbd !default
+$grey-14 : #616161 !default
+$blue-grey : #607d8b !default
+$blue-grey-1 : #eceff1 !default
+$blue-grey-2 : #cfd8dc !default
+$blue-grey-3 : #b0bec5 !default
+$blue-grey-4 : #90a4ae !default
+$blue-grey-5 : #78909c !default
+$blue-grey-6 : #607d8b !default
+$blue-grey-7 : #546e7a !default
+$blue-grey-8 : #455a64 !default
+$blue-grey-9 : #37474f !default
+$blue-grey-10 : #263238 !default
+$blue-grey-11 : #cfd8dc !default
+$blue-grey-12 : #b0bec5 !default
+$blue-grey-13 : #78909c !default
+$blue-grey-14 : #455a64 !default
+
+$ios-statusbar-height : 20px !default
+
+$z-fab                : 990 !default
+$z-side               : 1000 !default
+$z-marginals          : 2000 !default
+$z-fixed-drawer       : 3000 !default
+$z-fullscreen         : 6000 !default
+$z-menu               : 6000 !default
+$z-top                : 7000 !default
+$z-tooltip            : 9000 !default
+$z-notify             : 9500 !default
+$z-max                : 9998 !default
+
+$shadow-color         : #000 !default
+$shadow-transition    : box-shadow .28s cubic-bezier(.4, 0, .2, 1) !default
+$inset-shadow         : 0 7px 9px -7px rgba($shadow-color, .7) inset !default
+$inset-shadow-down    : 0 -7px 9px -7px rgba($shadow-color, .7) inset !default
+
+$elevation-umbra      : rgba($shadow-color, .2) !default
+$elevation-penumbra   : rgba($shadow-color, .14) !default
+$elevation-ambient    : rgba($shadow-color, .12) !default
+
+$shadow-0  : 0 0 0 $elevation-umbra, 0 0 0 $elevation-penumbra, 0 0 0 $elevation-ambient !default
+$shadow-1  : 0 1px 3px $elevation-umbra, 0 1px 1px $elevation-penumbra, 0 2px 1px -1px $elevation-ambient !default
+$shadow-2  : 0 1px 5px $elevation-umbra, 0 2px 2px $elevation-penumbra, 0 3px 1px -2px $elevation-ambient !default
+$shadow-3  : 0 1px 8px $elevation-umbra, 0 3px 4px $elevation-penumbra, 0 3px 3px -2px $elevation-ambient !default
+$shadow-4  : 0 2px 4px -1px $elevation-umbra, 0 4px 5px $elevation-penumbra, 0 1px 10px $elevation-ambient !default
+$shadow-5  : 0 3px 5px -1px $elevation-umbra, 0 5px 8px $elevation-penumbra, 0 1px 14px $elevation-ambient !default
+$shadow-6  : 0 3px 5px -1px $elevation-umbra, 0 6px 10px $elevation-penumbra, 0 1px 18px $elevation-ambient !default
+$shadow-7  : 0 4px 5px -2px $elevation-umbra, 0 7px 10px 1px $elevation-penumbra, 0 2px 16px 1px $elevation-ambient !default
+$shadow-8  : 0 5px 5px -3px $elevation-umbra, 0 8px 10px 1px $elevation-penumbra, 0 3px 14px 2px $elevation-ambient !default
+$shadow-9  : 0 5px 6px -3px $elevation-umbra, 0 9px 12px 1px $elevation-penumbra, 0 3px 16px 2px $elevation-ambient !default
+$shadow-10 : 0 6px 6px -3px $elevation-umbra, 0 10px 14px 1px $elevation-penumbra, 0 4px 18px 3px $elevation-ambient !default
+$shadow-11 : 0 6px 7px -4px $elevation-umbra, 0 11px 15px 1px $elevation-penumbra, 0 4px 20px 3px $elevation-ambient !default
+$shadow-12 : 0 7px 8px -4px $elevation-umbra, 0 12px 17px 2px $elevation-penumbra, 0 5px 22px 4px $elevation-ambient !default
+$shadow-13 : 0 7px 8px -4px $elevation-umbra, 0 13px 19px 2px $elevation-penumbra, 0 5px 24px 4px $elevation-ambient !default
+$shadow-14 : 0 7px 9px -4px $elevation-umbra, 0 14px 21px 2px $elevation-penumbra, 0 5px 26px 4px $elevation-ambient !default
+$shadow-15 : 0 8px 9px -5px $elevation-umbra, 0 15px 22px 2px $elevation-penumbra, 0 6px 28px 5px $elevation-ambient !default
+$shadow-16 : 0 8px 10px -5px $elevation-umbra, 0 16px 24px 2px $elevation-penumbra, 0 6px 30px 5px $elevation-ambient !default
+$shadow-17 : 0 8px 11px -5px $elevation-umbra, 0 17px 26px 2px $elevation-penumbra, 0 6px 32px 5px $elevation-ambient !default
+$shadow-18 : 0 9px 11px -5px $elevation-umbra, 0 18px 28px 2px $elevation-penumbra, 0 7px 34px 6px $elevation-ambient !default
+$shadow-19 : 0 9px 12px -6px $elevation-umbra, 0 19px 29px 2px $elevation-penumbra, 0 7px 36px 6px $elevation-ambient !default
+$shadow-20 : 0 10px 13px -6px $elevation-umbra, 0 20px 31px 3px $elevation-penumbra, 0 8px 38px 7px $elevation-ambient !default
+$shadow-21 : 0 10px 13px -6px $elevation-umbra, 0 21px 33px 3px $elevation-penumbra, 0 8px 40px 7px $elevation-ambient !default
+$shadow-22 : 0 10px 14px -6px $elevation-umbra, 0 22px 35px 3px $elevation-penumbra, 0 8px 42px 7px $elevation-ambient !default
+$shadow-23 : 0 11px 14px -7px $elevation-umbra, 0 23px 36px 3px $elevation-penumbra, 0 9px 44px 8px $elevation-ambient !default
+$shadow-24 : 0 11px 15px -7px $elevation-umbra, 0 24px 38px 3px $elevation-penumbra, 0 9px 46px 8px $elevation-ambient !default
+
+// sorry for long line; we need .sass and it doesn't support multi-line list
+$shadows: ($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10, $shadow-11, $shadow-12, $shadow-13, $shadow-14, $shadow-15, $shadow-16, $shadow-17, $shadow-18, $shadow-19, $shadow-20, $shadow-21, $shadow-22, $shadow-23, $shadow-24)
+
+$shadow-up-0  : 0 0 0 $elevation-umbra, 0 0 0 $elevation-penumbra, 0 0 0 $elevation-ambient !default
+$shadow-up-1  : 0 -1px 3px $elevation-umbra, 0 -1px 1px $elevation-penumbra, 0 -2px 1px -1px $elevation-ambient !default
+$shadow-up-2  : 0 -1px 5px $elevation-umbra, 0 -2px 2px $elevation-penumbra, 0 -3px 1px -2px $elevation-ambient !default
+$shadow-up-3  : 0 -1px 8px $elevation-umbra, 0 -3px 4px $elevation-penumbra, 0 -3px 3px -2px $elevation-ambient !default
+$shadow-up-4  : 0 -2px 4px -1px $elevation-umbra, 0 -4px 5px $elevation-penumbra, 0 -1px 10px $elevation-ambient !default
+$shadow-up-5  : 0 -3px 5px -1px $elevation-umbra, 0 -5px 8px $elevation-penumbra, 0 -1px 14px $elevation-ambient !default
+$shadow-up-6  : 0 -3px 5px -1px $elevation-umbra, 0 -6px 10px $elevation-penumbra, 0 -1px 18px $elevation-ambient !default
+$shadow-up-7  : 0 -4px 5px -2px $elevation-umbra, 0 -7px 10px 1px $elevation-penumbra, 0 -2px 16px 1px $elevation-ambient !default
+$shadow-up-8  : 0 -5px 5px -3px $elevation-umbra, 0 -8px 10px 1px $elevation-penumbra, 0 -3px 14px 2px $elevation-ambient !default
+$shadow-up-9  : 0 -5px 6px -3px $elevation-umbra, 0 -9px 12px 1px $elevation-penumbra, 0 -3px 16px 2px $elevation-ambient !default
+$shadow-up-10 : 0 -6px 6px -3px $elevation-umbra, 0 -10px 14px 1px $elevation-penumbra, 0 -4px 18px 3px $elevation-ambient !default
+$shadow-up-11 : 0 -6px 7px -4px $elevation-umbra, 0 -11px 15px 1px $elevation-penumbra, 0 -4px 20px 3px $elevation-ambient !default
+$shadow-up-12 : 0 -7px 8px -4px $elevation-umbra, 0 -12px 17px 2px $elevation-penumbra, 0 -5px 22px 4px $elevation-ambient !default
+$shadow-up-13 : 0 -7px 8px -4px $elevation-umbra, 0 -13px 19px 2px $elevation-penumbra, 0 -5px 24px 4px $elevation-ambient !default
+$shadow-up-14 : 0 -7px 9px -4px $elevation-umbra, 0 -14px 21px 2px $elevation-penumbra, 0 -5px 26px 4px $elevation-ambient !default
+$shadow-up-15 : 0 -8px 9px -5px $elevation-umbra, 0 -15px 22px 2px $elevation-penumbra, 0 -6px 28px 5px $elevation-ambient !default
+$shadow-up-16 : 0 -8px 10px -5px $elevation-umbra, 0 -16px 24px 2px $elevation-penumbra, 0 -6px 30px 5px $elevation-ambient !default
+$shadow-up-17 : 0 -8px 11px -5px $elevation-umbra, 0 -17px 26px 2px $elevation-penumbra, 0 -6px 32px 5px $elevation-ambient !default
+$shadow-up-18 : 0 -9px 11px -5px $elevation-umbra, 0 -18px 28px 2px $elevation-penumbra, 0 -7px 34px 6px $elevation-ambient !default
+$shadow-up-19 : 0 -9px 12px -6px $elevation-umbra, 0 -19px 29px 2px $elevation-penumbra, 0 -7px 36px 6px $elevation-ambient !default
+$shadow-up-20 : 0 -10px 13px -6px $elevation-umbra, 0 -20px 31px 3px $elevation-penumbra, 0 -8px 38px 7px $elevation-ambient !default
+$shadow-up-21 : 0 -10px 13px -6px $elevation-umbra, 0 -21px 33px 3px $elevation-penumbra, 0 -8px 40px 7px $elevation-ambient !default
+$shadow-up-22 : 0 -10px 14px -6px $elevation-umbra, 0 -22px 35px 3px $elevation-penumbra, 0 -8px 42px 7px $elevation-ambient !default
+$shadow-up-23 : 0 -11px 14px -7px $elevation-umbra, 0 -23px 36px 3px $elevation-penumbra, 0 -9px 44px 8px $elevation-ambient !default
+$shadow-up-24 : 0 -11px 15px -7px $elevation-umbra, 0 -24px 38px 3px $elevation-penumbra, 0 -9px 46px 8px $elevation-ambient !default
+
+// sorry for long line; we need .sass and it doesn't support multi-line list
+$shadows-up: ($shadow-up-1, $shadow-up-2, $shadow-up-3, $shadow-up-4, $shadow-up-5, $shadow-up-6, $shadow-up-7, $shadow-up-8, $shadow-up-9, $shadow-up-10, $shadow-up-11, $shadow-up-12, $shadow-up-13, $shadow-up-14, $shadow-up-15, $shadow-up-16, $shadow-up-17, $shadow-up-18, $shadow-up-19, $shadow-up-20, $shadow-up-21, $shadow-up-22, $shadow-up-23, $shadow-up-24)
+
+$generic-border-radius          : 4px !default
+$generic-hover-transition       : .3s cubic-bezier(.25, .8, .5, 1) !default
+$typography-font-family         : 'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif !default
+$min-line-height                : 1.12 !default
+
+$button-border-radius           : 3px !default
+$button-padding                 : 4px 16px !default
+$button-dense-padding           : .285em !default
+$button-transition              : $generic-hover-transition !default
+$button-font-size               : 14px !default
+$button-line-height             : 1.715em !default
+$button-font-weight             : 500 !default
+$button-shadow                  : $shadow-2 !default
+$button-shadow-active           : $shadow-5 !default
+$button-rounded-border-radius   : 28px !default
+$button-push-border-radius      : 7px !default
+
+$chat-message-received-color    : #000 !default
+$chat-message-received-bg       : $green-4 !default
+$chat-message-sent-color        : #000 !default
+$chat-message-sent-bg           : $grey-4 !default
+$chat-message-avatar-size       : 48px !default
+$chat-message-border-radius     : $generic-border-radius !default
+$chat-message-distance          : 8px !default
+$chat-message-text-padding      : 8px !default
+
+$item-base-color                : $grey-5 !default
+
+$editor-border-color            : $separator-color !default
+$editor-border-dark-color       : $separator-dark-color !default
+$editor-content-padding         : 10px !default
+$editor-content-min-height      : 10em !default
+$editor-toolbar-padding         : 4px !default
+$editor-hr-color                : $editor-border-color !default
+$editor-hr-dark-color           : $editor-border-dark-color !default
+$editor-button-gutter           : 4px !default
+
+$table-transition               : $generic-hover-transition !default
+$table-border-radius            : $generic-border-radius !default
+$table-box-shadow               : $shadow-2 !default
+
+$table-border-color             : $separator-color !default
+$table-hover-background         : rgba(0, 0, 0, .03) !default
+$table-selected-background      : rgba(0, 0, 0, .06) !default
+
+$table-dark-border-color        : $separator-dark-color !default
+$table-dark-hover-background    : rgba(255, 255, 255, .07) !default
+$table-dark-selected-background : rgba(255, 255, 255, .1) !default
+
+$toolbar-min-height             : 50px !default
+$toolbar-padding                : 0 12px !default
+$toolbar-inset-size             : 58px !default
+$toolbar-title-font-size        : 21px !default
+$toolbar-title-font-weight      : normal !default
+$toolbar-title-letter-spacing   : .01em !default
+$toolbar-title-padding          : 0 12px !default
+
+$layout-border                  : 1px solid $separator-color !default
+$layout-shadow                  : 0 0 10px 2px rgba(0,0,0,0.2), 0 0px 10px rgba(0,0,0,0.24) !default
+
+$menu-background                : #fff !default
+$menu-box-shadow                : $shadow-2 !default
+$menu-max-width                 : 95vw !default
+
+$rating-grade-color             : $yellow !default
+$rating-shadow                  : 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !default
+
+$tooltip-color                  : #fafafa !default
+$tooltip-background             : $grey-7 !default
+$tooltip-padding                : 6px 10px !default
+$tooltip-border-radius          : $generic-border-radius !default
+$tooltip-fontsize               : 10px !default
+$tooltip-mobile-padding         : 8px 16px !default
+$tooltip-mobile-fontsize        : 14px !default
+
+$option-focus-transition        : .22s cubic-bezier(0,0,.2,1) !default
+
+$input-font-size                : 14px !default
+$input-text-color               : rgba(0,0,0,.87) !default
+$input-label-color              : rgba(0,0,0,.6) !default
+$input-autofill-color           : inherit !default
+
+$img-loading-font-size          : 50px !default
+$img-content-position           : absolute !default
+$img-content-padding            : 16px !default
+$img-content-color              : #fff !default
+$img-content-background         : rgba(0, 0, 0, .47) !default
diff --git a/packages/frontend/src/css/quasar.variables.scss b/packages/frontend/src/css/quasar.variables.scss
index 7f2ff61..ee5aebf 100644
--- a/packages/frontend/src/css/quasar.variables.scss
+++ b/packages/frontend/src/css/quasar.variables.scss
@@ -25,5 +25,8 @@ $info: #31ccec;
 $warning: #f2c037;
 $grey: rgba(0, 0, 0, 0.4);
 
-@import '@bytetrade/ui/lib/styles/quasar.variables.sass';
+
+@import './quasar-bex.sass';
+@import '@bytetrade/ui/lib/styles/quasar.popup.scss';
 @import '@bytetrade/ui/lib/styles/quasar.btn.scss';
+@import '@bytetrade/ui/lib/styles/quasar.variables.sass';
diff --git a/packages/frontend/src/i18n/en-US/index.ts b/packages/frontend/src/i18n/en-US/index.ts
index 874ad56..7b2de44 100644
--- a/packages/frontend/src/i18n/en-US/index.ts
+++ b/packages/frontend/src/i18n/en-US/index.ts
@@ -35,5 +35,13 @@ export default {
 			'This application has been suspended. You can resume it on the Application page in Settings.',
 		crashed: 'The application has crashed. Please wait while it restarts.',
 		delete_app: 'Are you sure you want to delete the application "{appName}"?'
+	},
+	upgrade: {
+		success_title: 'Congratulations',
+		success_message: 'Update successful',
+		fail_title: 'Upgrade failed',
+		fail_message: 'Upgrade failed,please try again',
+		running_title: 'Upgrading System',
+		running_message: 'Please wait a moment'
 	}
 };
diff --git a/packages/frontend/src/i18n/zh-CN/index.ts b/packages/frontend/src/i18n/zh-CN/index.ts
index 2424ba7..c493adc 100644
--- a/packages/frontend/src/i18n/zh-CN/index.ts
+++ b/packages/frontend/src/i18n/zh-CN/index.ts
@@ -34,5 +34,13 @@ export default {
 		suspended: '此应用程序已暂停。您可以在“设置”中的“应用”恢复它。',
 		crashed: '应用程序已崩溃。正在重新启动，请稍候。',
 		delete_app: '您确定要删除 "{appName}" 这个应用吗？'
+	},
+	upgrade: {
+		success_title: '恭喜',
+		success_message: '更新成功',
+		fail_title: '更新失败',
+		fail_message: '更新失败，请再试一次',
+		running_title: '系统更新中',
+		running_message: '请稍等...'
 	}
 };
diff --git a/packages/frontend/src/pages/LaunchPad.vue b/packages/frontend/src/pages/LaunchPad.vue
index 2b65d8d..e900af2 100644
--- a/packages/frontend/src/pages/LaunchPad.vue
+++ b/packages/frontend/src/pages/LaunchPad.vue
@@ -157,6 +157,7 @@
 					<template v-slot:control>
 						<q-carousel-control
 							class="row items-center justify-center full-width"
+							v-if="appStore.launchPadApps.length > 1"
 						>
 							<span
 								class="carousel_dot q-mx-sm"
diff --git a/packages/frontend/src/pages/Search/FooterComponent.vue b/packages/frontend/src/pages/Search/FooterComponent.vue
index 0f56fb2..590f390 100644
--- a/packages/frontend/src/pages/Search/FooterComponent.vue
+++ b/packages/frontend/src/pages/Search/FooterComponent.vue
@@ -2,7 +2,8 @@
 	<div class="search-footer q-pl-lg">
 		<div>
 			<q-btn
-				class="btn-size-xs btn-no-text q-mr-xs bg-grey-2"
+				class="btn-size-xs btn-no-text q-mr-xs"
+				:class="isDark ? 'bg-background-4' : 'bg-grey-2'"
 				icon="sym_r_swap_vert"
 				text-color="ink-2"
 			>
@@ -14,7 +15,8 @@
 
 		<div>
 			<q-btn
-				class="btn-size-xs btn-no-text q-mr-xs bg-grey-2"
+				class="btn-size-xs btn-no-text"
+				:class="isDark ? 'bg-background-4' : 'bg-grey-2'"
 				icon="sym_r_keyboard_return"
 				text-color="ink-2"
 			>
@@ -25,8 +27,8 @@
 		<div class="separator"></div>
 
 		<div class="row items-center justify-center">
-			<div class="esc">
-				<img src="./../../assets/esc.svg" alt="esc" />
+			<div class="esc" :class="isDark ? 'bg-background-4' : 'bg-grey-2'">
+				<img :src="isDark ? escDark : esc" alt="esc" />
 			</div>
 			<span class="q-ml-md">{{ t('quit') }}</span>
 		</div>
@@ -34,8 +36,15 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import esc from './../../assets/esc.svg';
+import escDark from './../../assets/esc-dark.svg';
+
 const { t } = useI18n();
+const $q = useQuasar();
+const isDark = ref($q.dark.mode);
 </script>
 
 <style lang="scss" scoped>
@@ -53,7 +62,6 @@ const { t } = useI18n();
 		width: 24px;
 		height: 24px;
 		border-radius: 4px;
-		background-color: rgba(0, 0, 0, 0.1);
 		display: flex;
 		align-items: center;
 		justify-content: center;
diff --git a/packages/frontend/src/pages/Search/HomeComponent.vue b/packages/frontend/src/pages/Search/HomeComponent.vue
index 7a123dc..0d2b77c 100644
--- a/packages/frontend/src/pages/Search/HomeComponent.vue
+++ b/packages/frontend/src/pages/Search/HomeComponent.vue
@@ -83,7 +83,6 @@ const props = defineProps({
 });
 
 const emits = defineEmits(['openCommand']);
-
 const { t } = useI18n();
 const searchTxt = ref('');
 const searchRef = ref();
@@ -253,7 +252,7 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .list {
 	height: calc(100% - 48px);
-	border-top: 1px solid #d8d8d8;
+	border-top: 1px solid $separator-color;
 	overflow: scroll;
 	scrollbar-width: none;
 
@@ -269,10 +268,10 @@ onUnmounted(() => {
 	}
 	.item {
 		width: calc(100% - 32px);
-		height: 48px;
-		line-height: 48px;
+		height: 40px;
+		line-height: 40px;
 		border-radius: 12px;
-		margin: 0 16px;
+		margin: 0 16px 4px;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
@@ -284,7 +283,6 @@ onUnmounted(() => {
 			img {
 				width: 24px;
 				height: 24px;
-				border: 0.6px solid #e0e0e0;
 				border-radius: 4px;
 				margin: 0 8px;
 			}
diff --git a/packages/frontend/src/pages/Search/IndexPage.vue b/packages/frontend/src/pages/Search/IndexPage.vue
index 66d51ef..38a0aa7 100644
--- a/packages/frontend/src/pages/Search/IndexPage.vue
+++ b/packages/frontend/src/pages/Search/IndexPage.vue
@@ -165,8 +165,8 @@ onBeforeUnmount(() => {
 		position: relative;
 
 		.icon {
-			width: 24px;
-			height: 24px;
+			width: 18px;
+			height: 18px;
 		}
 
 		.btn {
@@ -189,7 +189,7 @@ onBeforeUnmount(() => {
 			height: 100%;
 			border: none;
 			outline: none;
-			margin: 0 16px;
+			margin: 0 12px;
 			font-weight: 400;
 			font-size: 16px;
 			line-height: 20px;
@@ -202,13 +202,14 @@ onBeforeUnmount(() => {
 		}
 
 		.appIcon {
-			height: 42px;
+			height: 32px;
 			display: flex;
 			align-items: center;
 			justify-content: space-around;
-			background: rgba(26, 19, 15, 0.06);
+			background: $background-4;
 			border-radius: 4px;
 			padding: 8px 12px;
+			margin-left: 18px;
 		}
 	}
 }
diff --git a/packages/frontend/src/pages/Search/TextSearch.vue b/packages/frontend/src/pages/Search/TextSearch.vue
index b9fd526..123de5c 100644
--- a/packages/frontend/src/pages/Search/TextSearch.vue
+++ b/packages/frontend/src/pages/Search/TextSearch.vue
@@ -6,9 +6,9 @@
 			alt="delete"
 			@click="goBack"
 		/>
-		<div class="appIcon q-ml-sm">
+		<div class="appIcon">
 			<img class="icon" :src="item?.icon" alt="search" />
-			<span class="q-ml-sm">{{ item?.title }}</span>
+			<span class="q-ml-sm text-ink-2 text-body3">{{ item?.title }}</span>
 		</div>
 		<input
 			class="input text-ink-1"
@@ -26,7 +26,7 @@
 			@click="handleClear"
 		/>
 	</div>
-	<div class="files">
+	<div class="files bg-background-2">
 		<div class="fileDetails" v-if="fileData && fileData.length > 0">
 			<bt-scroll-area class="full-width full-height q-pa-md">
 				<div
@@ -121,6 +121,7 @@
 							class="icon cursor-pointer"
 							name="sym_r_share_windows"
 							size="20px"
+							color="ink-2"
 							@click="open(file)"
 						/>
 						<q-icon
@@ -128,6 +129,7 @@
 							class="icon cursor-pointer"
 							name="sym_r_search"
 							size="20px"
+							color="ink-2"
 							@click="open(file)"
 						/>
 					</div>
@@ -344,7 +346,7 @@ hi {
 <style lang="scss" scoped>
 .files {
 	height: calc(100% - 46px);
-	border-top: 1px solid #d8d8d8;
+	border-top: 1px solid $separator-color;
 	overflow: hidden;
 	display: flex;
 
diff --git a/packages/frontend/src/pages/mobile/LaunchPad.vue b/packages/frontend/src/pages/mobile/LaunchPad.vue
index 5d309cb..259854d 100644
--- a/packages/frontend/src/pages/mobile/LaunchPad.vue
+++ b/packages/frontend/src/pages/mobile/LaunchPad.vue
@@ -10,7 +10,7 @@
 					transition-next="slide-left"
 					swipeable
 					animated
-					navigation
+					ref="carousel"
 					class="bg-grey-1 shadow-2 rounded-borders q_vackgr_carousel"
 				>
 					<q-carousel-slide
@@ -82,6 +82,21 @@
 							</div>
 						</div>
 					</q-carousel-slide>
+
+					<template v-slot:control>
+						<q-carousel-control
+							class="row items-center justify-center full-width"
+							v-if="appStore.launchPadApps.length > 1"
+						>
+							<span
+								class="carousel_dot q-mx-sm"
+								:class="slide === index ? 'active' : ''"
+								v-for="(dot, index) in appStore.launchPadApps"
+								:key="index"
+								@click.stop="goto(index)"
+							></span>
+						</q-carousel-control>
+					</template>
 				</q-carousel>
 			</template>
 			<div class="noresult" v-else>{{ t('launch_no_result') }}</div>
@@ -120,6 +135,7 @@ const searchVal = ref<string>('');
 const isFocus = ref<boolean>(true);
 
 const isDisplay = ref<boolean>(false);
+const carousel = ref();
 
 let slide = ref(0);
 let isDelete = false;
@@ -177,7 +193,9 @@ function deleteLaunch(
 	index: number,
 	Indexlist: number
 ) {
-	const message = `Are you sure you want to delete the application "${launchTitle}"？`;
+	const message = t('mseeage.delete_app', {
+		appName: launchTitle
+	});
 
 	$q.dialog({
 		component: ConfirmDialog,
@@ -198,6 +216,10 @@ function deleteLaunch(
 		await appStore.get_my_apps_info();
 	});
 }
+
+const goto = (value: number) => {
+	carousel.value.goTo(value);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -281,7 +303,7 @@ function deleteLaunch(
 		background-size: contain;
 		position: absolute;
 		top: -14px;
-		left: -14px;
+		left: 7px;
 		z-index: 99;
 		cursor: pointer;
 	}
@@ -398,8 +420,8 @@ function deleteLaunch(
 		margin: auto;
 		width: 56px;
 		height: 56px;
-		border-radius: 56px;
-		background-color: #ffffff;
+		border-radius: 28px;
+		background-color: rgba(255, 255, 255, 0.9);
 	}
 }
 .in-center-page {
@@ -532,4 +554,16 @@ function deleteLaunch(
 :global(.q-carousel__navigation-icon) {
 	font-size: 5px !important;
 }
+
+.carousel_dot {
+	display: inline-block;
+	width: 8px;
+	height: 8px;
+	background-color: rgba(255, 255, 255, 0.3);
+	border-radius: 4px;
+	cursor: pointer;
+	&.active {
+		background-color: rgba(255, 255, 255, 1);
+	}
+}
 </style>