From 6ea4e02ba7bf1b77739431dfa97f2b0195051f99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=81=E7=AB=AD=E5=8A=9B?= <jerrykuku@qq.com>
Date: Wed, 3 Jan 2024 14:28:56 +0800
Subject: [PATCH] wip

---
 main/.env.dev                                 |   2 +-
 main/src/assets/lang/en_US.json               |   2 +-
 main/src/assets/lang/zh_CN.json               |   2 +-
 main/src/assets/scss/common/_others.scss      |  10 +-
 main/src/assets/scss/common/_size.scss        |   5 +
 main/src/components/Apps/AppCard.vue          |  60 +++---
 main/src/components/Apps/AppCardSkeleton.vue  |  15 +-
 main/src/components/Apps/AppDetailInfo.vue    | 126 ++++++------
 main/src/components/Apps/AppPanel.vue         |  34 ++--
 main/src/components/Apps/AppSideBar.vue       |   8 -
 .../Apps/AppStoreSourceManagement.vue         | 125 ++++++------
 main/src/components/Apps/AppTerminalPanel.vue |  26 +--
 .../Apps/AppsInstallationLocation.vue         |  76 +++-----
 main/src/components/Apps/ComposeConfig.vue    |  97 ++++------
 .../src/components/Apps/ExternalLinkPanel.vue |   6 +-
 main/src/components/Apps/TipEditorModal.vue   |  21 +-
 main/src/components/Apps/progress.js          |  61 +++---
 main/src/components/CoreService.vue           |   1 -
 main/src/components/TopBar.vue                |   6 +-
 .../components/SidebarMenuButton.vue          |   2 +-
 .../filebrowser/drop/DropContextMenu.vue      |  15 --
 .../components/filebrowser/drop/Network.js    |   1 -
 main/src/components/forms/EnvInputGroup.vue   |   2 +-
 main/src/components/forms/ImportPanel.vue     | 179 ++----------------
 main/src/components/forms/InputGroup.vue      |   2 +-
 main/src/components/forms/Ports.vue           |   2 +-
 .../components/forms/VolumesInputGroup.vue    |   2 +-
 main/src/mixins/ListViewMixin.js              |   1 -
 28 files changed, 320 insertions(+), 569 deletions(-)

diff --git a/main/.env.dev b/main/.env.dev
index 7ac36ef7..8be23524 100644
--- a/main/.env.dev
+++ b/main/.env.dev
@@ -9,6 +9,6 @@ NODE_ENV=dev
 # VUE_APP_DEV_IP=192.168.2.132
 # VUE_APP_DEV_IP=192.168.2.219
 #VUE_APP_DEV_IP=192.168.2.243
-VUE_APP_DEV_IP=192.168.2.132
+VUE_APP_DEV_IP=192.168.2.63
 VUE_APP_DEV_PORT=80
 #VUE_APP_DEV_PORT=81
diff --git a/main/src/assets/lang/en_US.json b/main/src/assets/lang/en_US.json
index 5f77338a..7bcf3df3 100644
--- a/main/src/assets/lang/en_US.json
+++ b/main/src/assets/lang/en_US.json
@@ -373,7 +373,7 @@
   "Connection lost. Retry in 5 seconds...": "Connection lost. Retry in 5 seconds...",
   "cli to compose...": "cli to compose...",
   "View tutorial": "View tutorial",
-  "Add Source": "Add Source",
+  "Add Source": "More apps",
   "More": "More",
   "Search an app...": "Search an app...",
   "Tips": "Tips",
diff --git a/main/src/assets/lang/zh_CN.json b/main/src/assets/lang/zh_CN.json
index 2cbadb19..6074c9e1 100644
--- a/main/src/assets/lang/zh_CN.json
+++ b/main/src/assets/lang/zh_CN.json
@@ -370,7 +370,7 @@
   "Connection lost. Retry in 5 seconds...": "连接丢失。5秒后重试...",
   "cli to compose...": "cli 转为 Compose",
   "View tutorial": "观看教程",
-  "Add Source": "添加软件源",
+  "Add Source": "更多应用",
   "More": "浏览更多",
   "Search an app...": "搜索应用……",
   "Tips": "提示",
diff --git a/main/src/assets/scss/common/_others.scss b/main/src/assets/scss/common/_others.scss
index 26f74e38..9f5eb419 100644
--- a/main/src/assets/scss/common/_others.scss
+++ b/main/src/assets/scss/common/_others.scss
@@ -158,7 +158,7 @@
 	}
 
 	.container-icon {
-		padding: 0 0.5rem;
+		padding: 0 0.25rem;
 	}
 }
 
@@ -240,3 +240,11 @@ button.dropdown-item.is-active {
 .w-full {
 	width: 100% !important;
 }
+
+.swiper-button-next, .swiper-button-prev{
+	transition: opacity 0.3s;
+	&.swiper-button-disabled{
+		opacity: 0 !important;
+	}
+}
+
diff --git a/main/src/assets/scss/common/_size.scss b/main/src/assets/scss/common/_size.scss
index f71de937..ea125b6b 100644
--- a/main/src/assets/scss/common/_size.scss
+++ b/main/src/assets/scss/common/_size.scss
@@ -23,6 +23,11 @@
 	word-break: keep-all;
 }
 
+.is-14x14 {
+	width: 14px;
+	height: 14px;
+}
+
 .is-16x16 {
 	width: 16px;
 	height: 16px;
diff --git a/main/src/components/Apps/AppCard.vue b/main/src/components/Apps/AppCard.vue
index 09d2e83d..db2540e7 100644
--- a/main/src/components/Apps/AppCard.vue
+++ b/main/src/components/Apps/AppCard.vue
@@ -5,16 +5,17 @@
 		<!-- Action Button Start -->
 		<div v-if="item.app_type !== 'system' && !isContainerApp && !isUninstalling" class="action-btn">
 			<b-dropdown ref="dro" :mobile-modal="false" :triggers="['contextmenu', 'click']" animation="fade1"
-				append-to-body aria-role="list" class="app-card-drop" position="is-bottom-left"
+				append-to-body aria-role="list" class="app-card-drop" :position="dropdownPosition"
 				@active-change="setDropState">
 				<template #trigger>
-					<p role="button">
+					<p role="button" @click="handleDorpdownPosition">
 						<b-icon class="is-clickable" icon="dots-vertical-outline" pack="casa"></b-icon>
 					</p>
 				</template>
 
 				<b-dropdown-item :focusable="false" aria-role="menu-item" custom>
-					<b-button expanded tag="a" type="is-text" @click="openApp(item)">{{ $t('Open') }}</b-button>
+					<b-button expanded tag="a" type="is-text" @click="openApp(item)" :disabled="item.status != 'running'">{{
+						$t('Open') }}</b-button>
 					<b-button v-if="isV2App" expanded icon-pack="casa" icon-right="question-outline" size="is-16"
 						type="is-text" @click="openTips(item.name)">
 						{{ $t('Tips') }}
@@ -23,11 +24,6 @@
 						$t('Setting')
 					}}
 					</b-button>
-					<b-button v-if="false" :loading="isCloning" expanded type="is-text"
-						@click="appClone(item.appstore_id)">{{
-							$t('Clone')
-						}}
-					</b-button>
 
 					<b-button v-if="isV2App" expanded type="is-text" @click="checkAppVersion(item.name)">{{
 						$t('Check then update')
@@ -47,25 +43,6 @@
 					}}
 					</b-button>
 
-					<b-dropdown v-if="false" :triggers="['click']" aria-role="list" class="is-right" expanded>
-						<template #trigger>
-							<b-button :label="$t('Advanced')" expanded type="is-text" />
-						</template>
-						<b-dropdown-item :focusable="false" aria-role="menu-item" custom>
-							<b-button expanded type="is-text">{{ $t('Open') }}</b-button>
-							<b-button expanded type="is-text">{{ $t('Open') }}</b-button>
-							<b-dropdown id="box" aria-role="list" class="is-right" expanded>
-								<template #trigger>
-									<b-button :label="$t('Advanced')" expanded type="is-text" />
-								</template>
-								<b-dropdown-item id="item" :focusable="false" aria-role="menu-item" custom>
-									<b-button expanded type="is-text">{{ $t('Open') }}</b-button>
-									<b-button expanded type="is-text">{{ $t('Open') }}</b-button>
-								</b-dropdown-item>
-							</b-dropdown>
-						</b-dropdown-item>
-					</b-dropdown>
-
 					<b-button v-if="isLinkApp" class="mb-1" expanded type="is-text" @click="uninstallApp(true)">
 						{{ $t('Delete') }}
 						<b-loading v-model="isUninstalling" :is-full-page="false">
@@ -82,16 +59,16 @@
 					<div v-if="!isLinkApp" class="gap">
 						<div class="columns is-gapless _b-bor is-flex">
 							<div class="column is-flex is-justify-content-center is-align-items-center">
-								<b-button :loading="isRestarting" expanded type="is-text" @click="restartApp">
-									<b-icon custom-size="is-size-20px" icon="restart-outline" pack="casa"
-										size="is-20x20"></b-icon>
+								<b-button :loading="isRestarting" expanded type="is-text" @click="restartApp"
+									:disabled="item.status != 'running'">
+									<b-icon custom-size="is-size-20px" icon="restart-outline" pack="casa"></b-icon>
 								</b-button>
 							</div>
 							<div class="column is-flex is-justify-content-center is-align-items-center">
 								<b-button :class="item.status" :loading="isStarting" class="has-text-red" expanded
 									type="is-text" @click="toggle(item)">
 									<b-icon custom-size="is-size-20px" icon="shutdown-outline" pack="casa"
-										size="is-20"></b-icon>
+										:custom-class="shutDownClass"></b-icon>
 								</b-button>
 							</div>
 						</div>
@@ -175,6 +152,7 @@ export default {
 			// Public. Only changes the state of the card, not the state of the button.
 			isSaving: false,
 			isActiveTooltip: false,
+			dropdownPosition: "is-bottom-right",
 		}
 	},
 	props: {
@@ -245,6 +223,9 @@ export default {
 		isLinkApp() {
 			return this.item.app_type === "LinkApp"
 		},
+		shutDownClass() {
+			return this.item.status !== 'running'? "shutdown-rounded": ""
+		},
 
 	},
 
@@ -271,6 +252,15 @@ export default {
 	},
 
 	methods: {
+		handleDorpdownPosition(event) {
+			this.$nextTick(() => {
+				const rightOffset = window.innerWidth - event.clientX - 160
+				const horizontalPos = rightOffset > 0 ? "right" : "left"
+				const bottomOffset = window.innerHeight - event.clientY - 212
+				const verticalPos = bottomOffset > 0 ? "bottom" : "top"
+				this.dropdownPosition = `is-${verticalPos}-${horizontalPos}`
+			})
+		},
 		/**
 		 * @description: Open app in new windows
 		 * @param {String} status App status
@@ -825,6 +815,12 @@ export default {
 	padding-bottom: 3px;
 }
 
+.shutdown-rounded {
+	border-radius: 50%;
+	background-color: #000;
+	color: #fff;
+}
+
 .app-card-drop {
 	.dropdown-menu {
 		min-width: 10rem;
@@ -1026,7 +1022,7 @@ export default {
 		padding-bottom: 1.5rem;
 		padding-right: 1.5rem;
 
-		//styleName: Text 400Regular/Text03;
+
 		font-size: 14px;
 		font-weight: 400;
 		line-height: 20px;
diff --git a/main/src/components/Apps/AppCardSkeleton.vue b/main/src/components/Apps/AppCardSkeleton.vue
index a8e5363b..9975fc68 100644
--- a/main/src/components/Apps/AppCardSkeleton.vue
+++ b/main/src/components/Apps/AppCardSkeleton.vue
@@ -1,13 +1,3 @@
-<!--
- * @Author: Jerryk jerry@icewhale.org
- * @Date: 2023-02-08 12:09:40
- * @LastEditors: Jerryk jerry@icewhale.org
- * @LastEditTime: 2023-02-08 19:16:11
- * @FilePath: /CasaOS-UI/src/components/Apps/AppCardSkeleton.vue
- * @Description: 
- * 
- * Copyright (c) 2023 by IceWhale, All Rights Reserved. 
--->
 <template>
 	<div class="common-card is-flex is-align-items-center is-justify-content-center p-55 app-card" :style="animation">
 		<!-- Action Button End -->
@@ -21,8 +11,7 @@
 				<div class="sk-line mt-3"></div>
 
 			</div>
-			<!-- Card Content End -->
-
+			<!-- Card Content End -->˝
 		</div>
 	</div>
 </template>
@@ -80,7 +69,5 @@ export default {
 		border-radius: 0.25rem;
 		background-color: rgba(133, 149, 163, 0.6);
 	}
-
-
 }
 </style>
\ No newline at end of file
diff --git a/main/src/components/Apps/AppDetailInfo.vue b/main/src/components/Apps/AppDetailInfo.vue
index 4515f197..4e8f1371 100644
--- a/main/src/components/Apps/AppDetailInfo.vue
+++ b/main/src/components/Apps/AppDetailInfo.vue
@@ -15,39 +15,35 @@
 			<div class="app-header is-flex pb-4 b-line">
 				<div class="header-icon mr-5">
 					<b-image :key="appDetailData.icon" :src="appDetailData.icon"
-							 :src-fallback="require('@/assets/img/app/default.svg')"
-							 class="is-128x128 icon-shadow"
-							 webp-fallback=".jpg"></b-image>
+						:src-fallback="require('@/assets/img/app/default.svg')" class="is-128x128 icon-shadow"
+						webp-fallback=".jpg"></b-image>
 				</div>
 				<div class="is-flex-grow-1 is-flex is-align-items-center">
 					<div>
 						<h4 class="title store-title is-4 ">{{ i18n(appDetailData.title) }}</h4>
 						<p class="subtitle is-size-14px two-line mb-3">{{
-								i18n(appDetailData.tagline)
-							}}</p>
+							i18n(appDetailData.tagline)
+						}}</p>
 						<p class="description mb-2">
 							<b-button v-if="installedList.includes(appDetailData.id)"
-									  :loading="appDetailData.id == currentInstallId" rounded
-									  size="is-normal" type="is-primary"
-									  @click="openThirdContainerByAppInfo(appDetailData)">
+								:loading="appDetailData.id == currentInstallId" rounded size="is-normal" type="is-primary"
+								@click="openThirdContainerByAppInfo(appDetailData)">
 								{{ $t('Open') }}
 							</b-button>
-							<b-button v-else :disabled="unusable"
-									  :loading="appDetailData.id == currentInstallId"
-									  rounded size="is-normal" type="is-primary"
-									  @click="$emit('install', appDetailData.id, appDetailData);$messageBus('appstore_install', i18n(appDetailData.title) )">
+							<b-button v-else :disabled="unusable" :loading="appDetailData.id == currentInstallId" rounded
+								size="is-normal" type="is-primary"
+								@click="$emit('install', appDetailData.id, appDetailData); $messageBus('appstore_install', i18n(appDetailData.title))">
 								{{ $t('Install') }}
 							</b-button>
 						</p>
 
 						<p v-if="unusable"
-						   class="has-background-red-tertiary has-text-red has-text-full-04 _is-normal is-flex is-align-items-center font pr-2"
-						   style="width: fit-content;height: 1.5rem;border-radius: 0.25rem">
+							class="has-background-red-tertiary has-text-red has-text-full-04 _is-normal is-flex is-align-items-center font pr-2"
+							style="width: fit-content;height: 1.5rem;border-radius: 0.25rem">
 							<label class="is-flex ml-2 mr-1">
-								<b-icon class="is-16x16" custom-size="casa-19px" icon="close-outline"
-										pack="casa"></b-icon>
+								<b-icon class="is-16x16" custom-size="casa-19px" icon="close-outline" pack="casa"></b-icon>
 							</label>
-							{{ $t('Not compatible with {arch} devices.', {arch: archTitle}) }}
+							{{ $t('Not compatible with {arch} devices.', { arch: archTitle }) }}
 						</p>
 
 					</div>
@@ -60,8 +56,7 @@
 					<div>
 						<p class="heading">{{ $t('CATEGORY') }}</p>
 						<p class="title">
-							<b-icon :icon="getCateIcon(appDetailData.category)"
-									custom-size="mdi-36px"></b-icon>
+							<b-icon :icon="getCateIcon(appDetailData.category)" custom-size="mdi-36px"></b-icon>
 						</p>
 						<p class="footing is-size-14px">{{ appDetailData.category }}</p>
 					</div>
@@ -78,8 +73,8 @@
 				<div class="level-item has-text-centered">
 					<div>
 						<p class="heading "><span class="is-hidden-mobile">{{
-								$t('REQUIRE')
-							}} </span>{{ $t('MEMORY') }}</p>
+							$t('REQUIRE')
+						}} </span>{{ $t('MEMORY') }}</p>
 						<p class="title has-text-weight-normal">{{ appDetailData.min_memory }}</p>
 						<p class="footing is-size-14px">MB</p>
 					</div>
@@ -89,31 +84,25 @@
 
 			<!-- App Info Slider Start -->
 			<div v-if="showDetailSwiper" class="is-relative">
-				<swiper ref="infoSwiper" :options="swiperOptions"
-						class="swiper swiper-responsive-breakpoints">
-					<swiper-slide v-for="item in appDetailData.screenshot_link" :key="'sc'+item">
+				<swiper ref="infoSwiper" :options="swiperOptions" class="swiper swiper-responsive-breakpoints"
+					@observer-update="updateSwiper" @ready="handleSwiperReadied">
+					<swiper-slide v-for="item in appDetailData.screenshot_link" :key="'sc' + item">
 						<div class="gap">
-							<b-image :src="item"
-									 :src-fallback="require('@/assets/img/app/swiper_placeholder.png')"
-									 class="border-8"
-									 placeholder ratio="16by9" @click.native="zoomScreenshot(item)"></b-image>
+							<b-image :src="item" :src-fallback="require('@/assets/img/app/swiper_placeholder.png')"
+								class="border-8 is-clickable " placeholder ratio="16by9"
+								@click.native="zoomScreenshot(item)"></b-image>
 						</div>
 					</swiper-slide>
-
 				</swiper>
-				<div :class="{'swiper-button-disabled':disPrev}" class="swiper-button-prev"
-					 @click="$refs.infoSwiper.$swiper.slidePrev()"></div>
-				<div :class="{'swiper-button-disabled':disNext}" class="swiper-button-next"
-					 @click="$refs.infoSwiper.$swiper.slideNext()"></div>
+				<div class="swiper-button-prev"></div>
+				<div class="swiper-button-next"></div>
 			</div>
 
 			<!-- App Info Slider End -->
 
 			<!-- App Info  Start -->
-			<div class="app-desc mt-4 mb-6">
-				<VMdEditor
-					:value="i18n(appDetailData.description)" mode="preview"
-					left-toolbar right-toolbar>
+			<div class="app-desc mt-4 mb-6 is-size-14px">
+				<VMdEditor :value="i18n(appDetailData.description)" mode="preview" left-toolbar right-toolbar>
 				</VMdEditor>
 			</div>
 			<!-- App Info  End -->
@@ -123,16 +112,16 @@
 </template>
 
 <script>
-import VMdEditor   			  from '@kangc/v-md-editor';
-import {Swiper, SwiperSlide}  from 'vue-awesome-swiper'
-import business_OpenThirdApp  from "@/mixins/app/Business_OpenThirdApp";
+import VMdEditor from '@kangc/v-md-editor';
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import business_OpenThirdApp from "@/mixins/app/Business_OpenThirdApp";
 import business_ShowNewAppTag from "@/mixins/app/Business_ShowNewAppTag";
-import commonI18n             from "@/mixins/base/common-i18n";
-import app                    from "../../App.vue";
+import commonI18n from "@/mixins/base/common-i18n";
+import app from "@/App.vue";
 
 export default {
 	name: "AppDetailInfo.vue",
-	components: {VMdEditor, Swiper, SwiperSlide},
+	components: { VMdEditor, Swiper, SwiperSlide },
 	mixins: [business_ShowNewAppTag, business_OpenThirdApp, commonI18n],
 	props: {
 		appDetailData: {
@@ -181,17 +170,25 @@ export default {
 		},
 		unusable() {
 			return !this.appDetailData.architectures?.includes(this.arch);
-		},
+		}
 	},
 	data() {
 		return {
 			//Image List Swiper
 			disPrev: false,
 			disNext: false,
+			slidesPerView: 3,
+			swiper: null,
 			swiperOptions: {
 				loop: false,
 				autoplay: true,
+				observer: true,
 				spaceBetween: 24,
+				navigation: {
+					nextEl: '.swiper-button-next',
+					prevEl: '.swiper-button-prev',
+					disabledClass: 'swiper-button-disabled',
+				},
 				breakpoints: {
 					640: {
 						slidesPerView: 1
@@ -203,41 +200,32 @@ export default {
 						slidesPerView: 3
 					}
 				},
-				// on: {
-				// 	slideChangeTransitionStart: this.handleInfoSlide
-				// },
+				on: {
+					breakpoint: (swiper) => {
+						this.slidesPerView = swiper.slidesPerView;
+					}
+				}
 			},
 		}
 	},
 	methods: {
-		// migrate START ======
-		// TODO remove the deprecate code.
-		/**
-		 * @description:
-		 * @param {*} swiper
-		 * @return {*}
-		 */
-		/*handleInfoSlide(swiper) {
-		  this.disPrev = (swiper.activeIndex == 0) ? true : false;
-		  this.disNext = swiper.isEnd;
-		},*/
-
-		// migrate END ======
-
-		// this.cateMenu : {name: 'appstore', title: 'App Store', icon: 'mdi-apps', component: 'AppStore'}
-		// param : this.cateMenu.name
+		updateSwiper() {
+			this.swiper.slideTo(0, 0, false);
+		},
+		handleSwiperReadied(swiper) {
+			this.swiper = swiper;
+		},
 		getCateIcon(name) {
-			let tempO = this.cateMenu.find(item => item.name == name) || {font: 'apps'}
+			let tempO = this.cateMenu.find(item => item.name == name) || { font: 'apps' }
 			return tempO.font;
 		},
 		zoomScreenshot(img) {
 			const customVNode = this.$createElement('div', {
 				class: 'modal-content'
 			}, [
-				this.$createElement('img', {attrs: {src: img}})
+				this.$createElement('img', { attrs: { src: img } })
 			]);
 
-
 			this.$buefy.modal.open({
 				content: [customVNode],
 				customClass: '_zoom-screenshot',
@@ -277,15 +265,17 @@ export default {
 	.modal-close {
 		position: absolute;
 
-		&::before, &::after {
+		&::before,
+		&::after {
 			background: #fff;
 		}
 	}
 
 }
 
-.app-detial .modal-card-body .github-markdown-body{
+.app-detial .modal-card-body .github-markdown-body {
 	padding: 1rem 0 0 0;
+	font-size: 0.875rem;
 	line-height: 1.25rem;
 }
 </style>
\ No newline at end of file
diff --git a/main/src/components/Apps/AppPanel.vue b/main/src/components/Apps/AppPanel.vue
index ecaca48d..5327ee21 100644
--- a/main/src/components/Apps/AppPanel.vue
+++ b/main/src/components/Apps/AppPanel.vue
@@ -119,10 +119,8 @@
 								</swiper-slide>
 
 							</swiper>
-							<div :class="{ 'swiper-button-disabled': disFeaturedPrev }" class="swiper-button-prev"
-								@click="$refs.featureSwiper.$swiper.slidePrev(); $messageBus('appstore_slide')"></div>
-							<div :class="{ 'swiper-button-disabled': disFeaturedNext }" class="swiper-button-next"
-								@click="$refs.featureSwiper.$swiper.slideNext(); $messageBus('appstore_slide')"></div>
+							<div class="swiper-button-prev" @click="$messageBus('appstore_slide')"></div>
+							<div class="swiper-button-next" @click="$messageBus('appstore_slide')"></div>
 						</div>
 					</template>
 					<!-- Featured Slider End -->
@@ -137,8 +135,8 @@
 								<b-dropdown v-model="currentCate" :max-height="240" :mobile-modal="false" animation="fade1"
 									aria-role="list" class="app-select file-dropdown" scrollable>
 									<template #trigger="{ active }">
-										<b-button :label="currentCate.name" type="is-text" icon-left="category" icon-pack="casa"
-											:icon-right="active ? 'up-outline' : 'down-outline'" />
+										<b-button :label="currentCate.name" type="is-text" icon-left="category"
+											icon-pack="casa" :icon-right="active ? 'up-outline' : 'down-outline'" />
 									</template>
 									<b-dropdown-item v-for="menu in cateMenu" :key="menu.id"
 										:class="menu.id == currentCate.id ? 'is-active' : ''" :data-title="menu.count"
@@ -165,8 +163,8 @@
 									animation="fade1" aria-role="list" class="app-select file-dropdown"
 									position="is-bottom-right" scrollable>
 									<template #trigger="{ active }">
-										<b-button :label="currentAuthor.name" type="is-text" icon-left="posted-by" icon-pack="casa"
-											:icon-right="active ? 'up-outline' : 'down-outline'" />
+										<b-button :label="currentAuthor.name" type="is-text" icon-left="posted-by"
+											icon-pack="casa" :icon-right="active ? 'up-outline' : 'down-outline'" />
 									</template>
 									<b-dropdown-item v-for="menu in authorMenu" :key="menu.id"
 										:class="menu.id == currentAuthor.id ? 'is-active' : ''" :data-title="menu.count"
@@ -185,13 +183,14 @@
 						<!-- Author End -->
 
 						<transition name="search-fade">
-							<b-icon v-if="searchAndSourcesStatus === 'showSources'" class="is-flex is-align-self-center ml-2 is-clickable"
-								icon="search-outline" pack="casa" @click.native="searchAndSourcesStatusController"></b-icon>
+							<b-icon v-if="searchAndSourcesStatus === 'showSources'"
+								class="is-flex is-align-self-center ml-2 is-clickable" icon="search-outline" pack="casa"
+								@click.native="searchAndSourcesStatusController"></b-icon>
 						</transition>
 						<transition name="search-fade">
 							<b-input v-if="searchAndSourcesStatus !== 'showSources'" ref="search_app"
 								v-on-click-outside="resetSearchAndSourcesStatus" :placeholder="$t('Search an app...')"
-								class="app-search ml-2"  @input="debounceSearchInput"
+								class="app-search ml-2" @input="debounceSearchInput"
 								@keyup.enter.native="counterPatchGetStoreList++"></b-input>
 						</transition>
 						<div class="is-flex-grow-1"></div>
@@ -370,7 +369,7 @@
 					</div>
 					<b-progress :value="totalPercentage" format="percent" show-value type="is-primary"></b-progress>
 					<h3 :class="currentInstallAppTextClass" class="title is-6 has-text-centered" style="height: 20px"
-					v-dompurify-html="currentInstallAppText"></h3>
+						v-dompurify-html="currentInstallAppText"></h3>
 				</div>
 			</section>
 			<!-- App Install Process End -->
@@ -545,12 +544,15 @@ export default {
 			currentInstallId: '',
 
 			// Featured Swiper
-			disFeaturedPrev: false,
-			disFeaturedNext: false,
 			featureSwiperOptions: {
 				loop: false,
 				autoplay: true,
 				spaceBetween: 24,
+				navigation: {
+					nextEl: '.swiper-button-next',
+					prevEl: '.swiper-button-prev',
+					disabledClass: 'swiper-button-disabled',
+				},
 				breakpoints: {
 					640: {
 						slidesPerView: 1
@@ -1589,14 +1591,14 @@ export default {
 	.swiper-button-next,
 	.swiper-rtl .swiper-button-prev {
 		right: -20px;
-		top: calc(50% - 2.25rem);
+		top: calc(50% - 3.625rem);
 		left: auto;
 	}
 
 	.swiper-button-prev,
 	.swiper-rtl .swiper-button-next {
 		left: -20px;
-		top: calc(50% - 2.25rem);
+		top: calc(50% - 3.625rem);
 		right: auto;
 	}
 
diff --git a/main/src/components/Apps/AppSideBar.vue b/main/src/components/Apps/AppSideBar.vue
index 48a5d350..081d8c07 100644
--- a/main/src/components/Apps/AppSideBar.vue
+++ b/main/src/components/Apps/AppSideBar.vue
@@ -1,11 +1,3 @@
-<!--
- * @Author: JerryK
- * @Date: 2021-12-14 11:52:36
- * @LastEditors: Jerryk jerry@icewhale.org
- * @LastEditTime: 2022-06-21 12:29:44
- * @Description: 
- * @FilePath: \CasaOS-UI\src\components\Apps\AppSideBar.vue
--->
 <template>
 	<div class="app-sidebar" :class="{'no-event':isOpen}">
 		<transition :name="transitionName" @before-enter="beforeEnter" @after-enter="afterEnter" @enter="enter">
diff --git a/main/src/components/Apps/AppStoreSourceManagement.vue b/main/src/components/Apps/AppStoreSourceManagement.vue
index 56b11cec..69001576 100644
--- a/main/src/components/Apps/AppStoreSourceManagement.vue
+++ b/main/src/components/Apps/AppStoreSourceManagement.vue
@@ -1,17 +1,8 @@
-<!--
- * @LastEditors: zhanghengxin ezreal.zhang@icewhale.org
- * @LastEditTime: 2023-07-13 13:31:07
- * @FilePath: /CasaOS-UI/main/src/components/Apps/AppStoreSourceManagement.vue
-  * @Description:
-  *
-  * Copyright (c) 2023 by IceWhale, All Rights Reserved.
-
-  -->
 <script setup>
-import {defineEmits, defineProps, getCurrentInstance, onBeforeUnmount, onMounted, ref} from "vue";
-import {vOnClickOutside}                                                               from '@vueuse/components'
+import { defineEmits, defineProps, getCurrentInstance, onBeforeUnmount, onMounted, ref } from "vue";
+import { vOnClickOutside } from '@vueuse/components'
 
-const emit = defineEmits(["refreshAppStore", "refreshSize"]);
+const emit = defineEmits(["refreshAppStore", "refreshSize","close"]);
 const props = defineProps(['totalApps']);
 /*
 const stateBox = {
@@ -44,11 +35,12 @@ const subscribe = app.$socket.$subscribe
 const unsubscribe = app.$socket.$unsubscribe
 const componentState = ref("init")
 const ignoreElRef = ref(null)
+const sourceDorpRef = ref(null)
 const onClickOutsideHandler = [
 	(ev) => {
 		changeInputState(true)
 	},
-	{ignore: [ignoreElRef]}
+	{ ignore: [ignoreElRef] }
 ]
 
 const addLoadingState = ref(false)
@@ -94,6 +86,7 @@ function unregisterAppStore(id) {
 }
 
 function redirectURL() {
+	sourceDorpRef.value.toggle();
 	window.open("https://awesome.casaos.io/content/3rd-party-app-stores/list.html", "_blank", "noopener");
 }
 
@@ -171,67 +164,86 @@ onBeforeUnmount(() => {
 <template>
 	<div v-on-click-outside="onClickOutsideHandler">
 		<Transition mode="out-in" name="management-change" @after-enter="activeInput">
-			<div v-if="componentState==='first_add_state'" key="1" class="one-line" @click="changeInputState">+ {{
-					$t("Add Source")
-				}}
-			</div>
+			<b-button v-if="componentState === 'first_add_state'" @click="changeInputState" icon-pack="casa"
+				icon-left="plus-outline">
+				{{ $t("Add Source") }}
+			</b-button>
 			<div v-else-if="componentState === 'second_list_state'" key="2">
-				<b-dropdown aria-role="menu" position="is-bottom-left" style="height: 2rem;">
-					<template #trigger>
-						<b-button icon-pack="casa" icon-right="down">
-							{{ props.totalApps }} APPS
+				<b-dropdown aria-role="menu" position="is-bottom-left" class="file-dropdown source-dropdown"
+					animation="fade1" :close-on-click="false" ref="sourceDorpRef">
+					<template #trigger="{ active }">
+						<b-button icon-pack="casa" :icon-right="active ? 'up-outline' : 'down-outline'">
+							{{ props.totalApps }} apps
 						</b-button>
 					</template>
 
-					<b-dropdown-item
-						v-for="item in sourceList" :key="item.id" aria-role="menu-item"
-						custom>
+					<b-dropdown-item v-for="item in sourceList" :key="item.id" aria-role="menu-item" custom>
 						<p :ref="`removeButton${item.id}`" class="is-flex is-align-items-center">
 							<span class="has-text-full-04 is-flex-grow-1 one-line">{{ item.name }}</span>
-							<b-button v-if="operationSourceName !== item.id" class="is-flex-shrink-0 _button-icon"
-									  icon-pack="mdi" icon-right="trash-can-outline"
-									  type="is-text" @click.native="operationSourceName = item.id"></b-button>
+							<template v-if="operationSourceName !== item.id">
+								<b-icon class="close-button" custom-size="casa-16px" icon="trash-outline" pack="casa"
+									@click.native="operationSourceName = item.id" />
+							</template>
 							<template v-else>
-								<b-button class="is-flex-shrink-0 _button-icon" icon-pack="casa"
-										  icon-right="close"
-										  type="is-text" @click.native="operationSourceName = -1"></b-button>
-								<b-button :loading="removeLoadingState" class="is-flex-shrink-0 _button-icon"
-										  icon-pack="casa"
-										  icon-right="matching" type="is-text"
-										  @click.native="unregisterAppStore(item.id)"></b-button>
+								<b-icon class="close-button" custom-size="casa-16px" icon="close-outline" pack="casa"
+									@click.native="operationSourceName = -1" />
+								<b-icon class="close-button" custom-size="casa-16px" icon="check-outline" pack="casa"
+									@click.native="unregisterAppStore(item.id)" />
 							</template>
 						</p>
 					</b-dropdown-item>
-					<hr class="mt-1 mb-1"/>
+					<hr class="dropdown-divider">
 					<b-dropdown-item @click="changeInputState">
-						<a :ref="ignoreElRef" class="one-line"> {{
-								$t("Add Source")
-							}}
-						</a>
+						<span :ref="ignoreElRef" class="one-line"> {{
+							$t("Add Source")
+						}}
+						</span>
 					</b-dropdown-item>
 					<b-dropdown-item @click="redirectURL">
-						<a class="one-line"> {{
-								$t("More")
-							}}
-						</a>
+						<span class="one-line"> {{
+							$t("More")
+						}}
+						</span>
 					</b-dropdown-item>
 				</b-dropdown>
 			</div>
 			<div v-else-if="componentState === 'active_input_state'" key="3" class="is-flex is-align-items-center">
-				<b-input ref="inputSourceURL" v-model="url" :disabled="addLoadingState"
-						 class="is-flex-grow-1 _sources_input" icon-pack="casa" icon-right="question"
-						 icon-right-clickable @icon-right-click="redirectURL"></b-input>
-				<b-button :loading="addLoadingState" class="is-flex-shrink-0 _button-icon"
-						  icon-pack="casa" icon-right="plus"
-						  @click="registerAppStore(url)">{{ $t("Add") }}
-				</b-button>
+				<b-field class="mb-0">
+					<b-input class="_sources_input" ref="inputSourceURL" v-model="url"
+						:disabled="addLoadingState"></b-input>
+					<b-tooltip label="Get more apps" position="is-bottom" class="add-tooltip" type="is-dark"
+						:class="{ disabled: addLoadingState }">
+						<b-icon class="is-clickable" icon="question-outline" pack="casa" size="is-small"
+							@click.native="redirectURL" />
+					</b-tooltip>
+					<p class="control">
+						<b-button class="_sources_input" @click="registerAppStore(url)" :loading="addLoadingState">{{
+							$t("Add") }}</b-button>
+					</p>
+				</b-field>
 			</div>
 		</Transition>
 	</div>
-
 </template>
 
 <style lang="scss" scoped>
+.source-dropdown {
+	::v-deep .dropdown-menu {
+		min-width: 11rem !important;
+	}
+}
+
+.add-tooltip {
+	border-top: 1px solid #CFCFCF !important;
+	border-bottom: 1px solid #CFCFCF !important;
+	align-items: center !important;
+	padding-right: 0.25rem;
+
+	&.disabled {
+		background-color: hsl(0, 0%, 96%) !important;
+	}
+}
+
 ._button-icon {
 	border: 0;
 	box-shadow: none;
@@ -244,13 +256,20 @@ onBeforeUnmount(() => {
 }
 
 ._sources_input {
+	height: 2rem !important;
+
 	::v-deep .input {
 		height: 2rem !important;
+		border-right: 0 !important;
 	}
 
 	::v-deep span.icon {
 		height: 2rem !important;
 		width: 2rem !important;
+
+		i {
+			font-size: 1rem !important;
+		}
 	}
 }
 
@@ -258,10 +277,6 @@ onBeforeUnmount(() => {
 	transition: all .3s ease;
 }
 
-//.slide-fade-leave-active {
-//	transition: opacity 0;
-//}
-
 .management-change-enter {
 	transform: translateX(-10px);
 	opacity: 0;
diff --git a/main/src/components/Apps/AppTerminalPanel.vue b/main/src/components/Apps/AppTerminalPanel.vue
index 10b2e261..3d27a255 100644
--- a/main/src/components/Apps/AppTerminalPanel.vue
+++ b/main/src/components/Apps/AppTerminalPanel.vue
@@ -1,20 +1,9 @@
-<!--
-  * @LastEditors: zhanghengxin ezreal.zhang@icewhale.org
-  * @LastEditTime: 2023/3/2 下午4:26
-  * @FilePath: /CasaOS-UI/src/components/Apps/AppTerminalPanel.vue
-  * @Description:
-  *
-  * Copyright (c) 2023 by IceWhale, All Rights Reserved.
-  
-  -->
-
 <template>
 	<div class="modal-card">
-
 		<!-- Modal-Card Body Start -->
 		<section class="modal-card-body ">
 			<div class="close-container">
-				<button class="delete" type="button" @click="$emit('close')"/>
+				<button class="delete" type="button" @click="$emit('close')" />
 			</div>
 			<h3 class="title is-3">{{ serviceName || appName }}</h3>
 			<div class="is-flex-grow-1">
@@ -26,19 +15,16 @@
 						<logs-card ref="logs" :data="logData"></logs-card>
 					</b-tab-item>
 				</b-tabs>
-
 			</div>
-
 		</section>
 		<!-- Modal-Card Body End -->
-
 		<b-loading v-model="isLoading" :is-full-page="false"></b-loading>
 	</div>
 </template>
 
 <script>
 import TerminalCard from '@/components/logsAndTerminal/TerminalCard.vue';
-import LogsCard     from '@/components/logsAndTerminal/LogsCard.vue'
+import LogsCard from '@/components/logsAndTerminal/LogsCard.vue'
 
 export default {
 	name: 'app-terminal-panel',
@@ -67,13 +53,8 @@ export default {
 	},
 	methods: {
 		getLogs() {
-			// OLD:: this.$api.container.getLogsV2(this.appid)
 			this.$openAPI.appManagement.compose.composeAppLogs(this.appName).then((res) => {
 				if (res.status == 200) {
-					// let data = res.data.data
-					// console.log(data)
-					// let replaceData = data.replace(/\n(.{8})/gu, '\n');
-					// this.logData = replaceData.substring(8, replaceData.length - 1);
 					this.logData = res.data.data
 				}
 			}).catch((err) => {
@@ -96,5 +77,4 @@ export default {
 }
 </script>
 
-<style>
-</style>
+<style></style>
diff --git a/main/src/components/Apps/AppsInstallationLocation.vue b/main/src/components/Apps/AppsInstallationLocation.vue
index 05f720a3..dcef981f 100644
--- a/main/src/components/Apps/AppsInstallationLocation.vue
+++ b/main/src/components/Apps/AppsInstallationLocation.vue
@@ -1,60 +1,44 @@
-<!--
- * @Author: zhanghengxin ezreal.ice@icloud.com
- * @Date: 2022-09-07 17:35:02
- * @LastEditors: zhanghengxin ezreal.ice@icloud.com
- * @LastEditTime: 2022-09-07 17:57:11
- * @FilePath: /CasaOS-UI/src/components/Apps/AppsInstallationLocation.vue
- * @Description:
- *
- * Copyright (c) 2022 by IceWhale, All Rights Reserved.
-
--->
-
 <template>
 	<div class="mb-5 mt-2 pri-border">
 		<div :class="false" class="is-flex mb-4 mt-4 ml-6">
-			<b-radio
-			v-model="system"
-			:native-value="item.mount_point"
-			name="installationLocation"
-			type="is-info"
-			@input="$emit('selection', item.mount_point)"
-			>
-          <span class="is-flex">
-          <div class="header-icon">
-            <b-image :src="require('@/assets/img/storage/storage.png')" class="is-64x64"></b-image>
-          </div>
-          <div class="ml-3 is-flex-grow-1 is-flex is-align-items-center">
-            <div>
-              <h4 class="title is-size-14px mb-0 has-text-left one-line">{{ item.name }}
-                <b-tag v-if="item.isSystem" class="ml-2">CasaOS</b-tag>
-              </h4>
+			<b-radio v-model="system" :native-value="item.mount_point" name="installationLocation" type="is-info"
+				@input="$emit('selection', item.mount_point)">
+				<span class="is-flex">
+					<div class="header-icon">
+						<b-image :src="require('@/assets/img/storage/storage.png')" class="is-64x64"></b-image>
+					</div>
+					<div class="ml-3 is-flex-grow-1 is-flex is-align-items-center">
+						<div>
+							<h4 class="title is-size-14px mb-0 has-text-left one-line">{{ item.name }}
+								<b-tag v-if="item.isSystem" class="ml-2">CasaOS</b-tag>
+							</h4>
 
-              <p class="has-text-left is-size-7 has-text-grey-light	">{{ $t('Single Drive Storage') }}, <span
-			  class="is-uppercase">{{ item.fsType }}</span>
-                <b-tooltip :label="$t('CasaOS reserves 1% of file space when creating storage in EXT4 format.')"
-						   append-to-body>
-                  <b-icon class="mr-2 " icon="question-outline" pack="casa" size="is-small"></b-icon>
-                </b-tooltip>
-              </p>
-              <p class="has-text-left is-size-7 ">{{
-                  $t("Available Total", {
-                    name: item.diskName,
-                    avl: renderSize(item.availSize),
-                    total: renderSize(item.size)
-                  })
-                }}</p>
-            </div>
+							<p class="has-text-left is-size-7 has-text-grey-light	">{{ $t('Single Drive Storage') }}, <span
+									class="is-uppercase">{{ item.fsType }}</span>
+								<b-tooltip
+									:label="$t('CasaOS reserves 1% of file space when creating storage in EXT4 format.')"
+									append-to-body>
+									<b-icon class="mr-2 " icon="question-outline" pack="casa" size="is-small"></b-icon>
+								</b-tooltip>
+							</p>
+							<p class="has-text-left is-size-7 ">{{
+								$t("Available Total", {
+									name: item.diskName,
+									avl: renderSize(item.availSize),
+									total: renderSize(item.size)
+								})
+							}}</p>
+						</div>
 
-          </div>
-          </span>
+					</div>
+				</span>
 			</b-radio>
 		</div>
 	</div>
 </template>
 
 <script>
-import {mixin} from "@/mixins/mixin";
+import { mixin } from "@/mixins/mixin";
 
 export default {
 	name: "AppsInstallationLocation",
diff --git a/main/src/components/Apps/ComposeConfig.vue b/main/src/components/Apps/ComposeConfig.vue
index 83d2c253..7e256974 100644
--- a/main/src/components/Apps/ComposeConfig.vue
+++ b/main/src/components/Apps/ComposeConfig.vue
@@ -1,13 +1,3 @@
-<!--
-  * @LastEditors: zhanghengxin ezreal.zhang@icewhale.org
-  * @LastEditTime: 2023/2/22 下午12:18
-  * @FilePath: /CasaOS-UI/src/components/Apps/ComposeConfig.vue
-  * @Description:
-  *
-  * Copyright (c) 2023 by IceWhale, All Rights Reserved.
-
-  -->
-
 <template>
 	<section style="height: calc(100vh - 12.8125rem)">
 		<b-tabs class="has-text-full-03" style="height:100%" @input="key => $emit('updateDockerComposeServiceName', key)">
@@ -86,8 +76,8 @@
 						<b-switch v-model="service.privileged"></b-switch>
 					</b-field>
 
-					<b-field :label="$t('Memory Limit')">
-						<vue-slider :max="totalMemory" :min="memory_min" class="mx-2"
+					<b-field :label="$t('Memory Limit')" class="mb-5">
+						<vue-slider :max="totalMemory" :min="memory_min" class="mx-2" :marks="true" :data="markData"
 							:value="service.deploy.resources.limits.memory | duplexDisplay"
 							@change="(v) => service.deploy.resources.limits.memory = v"></vue-slider>
 					</b-field>
@@ -262,38 +252,6 @@ export default {
 			type: Number,
 			required: true,
 		},
-		/*networks STRUCTURE [
-			{
-				"driver": "host",
-				"networks": [
-					{
-						"driver": "host",
-						"id": "3014e1842267eb8aabea9e83b21ff95f36d988c519a51b107d86db9906501ba0",
-						"name": "host"
-					}
-				]
-			},
-			{
-				"driver": "bridge",
-				"networks": [
-					{
-						"driver": "bridge",
-						"id": "AAA",
-						"name": "AAA"
-					},
-					{
-						"driver": "bridge",
-						"id": "BBB",
-						"name": "BBB"
-					},
-					{
-						"driver": "bridge",
-						"id": "CCC",
-						"name": "bridge"
-					}
-				]
-			}
-		]*/
 		networks: {
 			type: Array,
 			required: true,
@@ -328,12 +286,6 @@ export default {
 			handler(val) {
 				if (val != null) {
 					this.parseComposeYaml(val);
-				} else {
-					// let gg =
-					// 	find(this.networks, (o) => {
-					// 		return o.driver == "bridge";
-					// 	}) || [];
-					// this.configData.network_mode = gg.length > 0 ? gg[0].name : "bridge";
 				}
 			},
 			immediate: true,
@@ -381,6 +333,21 @@ export default {
 				}
 			});
 		},
+		markData() {
+			const data = [];
+			let markData = 256
+			let i = 0
+			while (markData < this.totalMemory) {
+				markData = 256 * Math.pow(2, i)
+				if (markData < this.totalMemory) {
+					data.push(markData);
+				} else {
+					data.push(this.totalMemory);
+				}
+				i++
+			}
+			return data;
+		},
 	},
 	created() {
 		// Set Front-end base url
@@ -556,11 +523,11 @@ export default {
 					};
 				} else if (isObject(item)) {
 					return item;
-				 } else {
+				} else {
 					return {
 						host_ip: "",
-						target: item+"",
-						published: item+"",
+						target: item + "",
+						published: item + "",
 						protocol: "tcp",
 					};
 				}
@@ -788,13 +755,6 @@ export default {
 
 				ConfigData = merge(yaml, ConfigData)
 			}
-
-			// check
-			// let DockerComposeCommands = YAML.stringify(ConfigData)
-			// this.$api.apps.checkPort().then(res => {
-			// 	this.ports_in_use = res.data?.data || {}
-			// })
-
 			this.$emit("updateDockerComposeCommands", YAML.stringify(ConfigData));
 		},
 
@@ -935,4 +895,21 @@ export default {
 		}
 	}
 }
+
+::v-deep .vue-slider-mark-step {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    -webkit-box-shadow: 0 0 0 2px #ccc;
+    box-shadow: 0 0 0 2px #ccc;
+    background-color: #fff;
+}
+
+::v-deep .vue-slider-mark-label{
+	font-size: 0.75rem;
+}
+
+::v-deep .vue-slider-dot-tooltip-text{
+	font-size: 0.75rem;
+}
 </style>
diff --git a/main/src/components/Apps/ExternalLinkPanel.vue b/main/src/components/Apps/ExternalLinkPanel.vue
index 2873aa0b..7bf506ae 100644
--- a/main/src/components/Apps/ExternalLinkPanel.vue
+++ b/main/src/components/Apps/ExternalLinkPanel.vue
@@ -100,11 +100,7 @@ export default {
 		linkIcon: {
 			type: String,
 			default: "",
-		},
-		// linkId: {
-		// 	type: String,
-		// 	default: "",
-		// },
+		}
 	},
 	data() {
 		return {
diff --git a/main/src/components/Apps/TipEditorModal.vue b/main/src/components/Apps/TipEditorModal.vue
index 46303ba5..61ad6d86 100644
--- a/main/src/components/Apps/TipEditorModal.vue
+++ b/main/src/components/Apps/TipEditorModal.vue
@@ -83,8 +83,7 @@ export default {
 		},
 	},
 	watch: {
-		isEditing(val, a) {
-			console.log('isEditing', val, a)
+		isEditing(val) {
 			if (val) {
 				// editor is editable
 				this.controlEditorState = 'edit'
@@ -97,24 +96,8 @@ export default {
 			return this.isEditing
 		},
 		composeData: {
-			handler(val) {
+			handler() {
 				//Get tips in compose.
-				console.log('watch tips', val)
-
-				/*let getValueByPath = this.composeData['services'][this.name]
-				if (getValueByPath && getValueByPath['tips'] && getValueByPath['tips']['before_install']) {
-					let multiLine = getValueByPath['tips']['before_install'].forEach(item => {
-						let value = item.content['default'] && item.content['en_US']
-						return `${item.value}:${value}\n`
-					})
-					console.log('multiLine', multiLine)
-					// return multiLine
-					this.tips = multiLine;
-				} else {
-					this.tips = '';
-					// return ''
-				}*/
-
 				let getValueByPath = this.composeData['x-casaos']
 				if (getValueByPath?.['tips']?.['custom'] || getValueByPath?.['tips']?.['before_install']) {
 					this.tips = getValueByPath['tips']['custom'] || ice_i18n(getValueByPath['tips']['before_install'])
diff --git a/main/src/components/Apps/progress.js b/main/src/components/Apps/progress.js
index 9053103b..22d71f3a 100644
--- a/main/src/components/Apps/progress.js
+++ b/main/src/components/Apps/progress.js
@@ -1,14 +1,3 @@
-/*
- * @Author: Jerryk jerry@icewhale.org
- * @Date: 2022-12-24 15:06:48
- * @LastEditors: Jerryk jerry@icewhale.org
- * @LastEditTime: 2023-02-06 18:34:40
- * @FilePath: /CasaOS-UI/src/components/Apps/progress.js
- * @Description: 
- * 
- * Copyright (c) 2022 by IceWhale, All Rights Reserved. 
- */
-
 import filter from 'lodash/filter';
 import meanBy from 'lodash/meanBy';
 
@@ -19,7 +8,7 @@ class ProgressTracker {
 	}
 
 	addLayer(id) {
-		this.layers[id] = {progress: null, coalesced: false};
+		this.layers[id] = { progress: null, coalesced: false };
 	}
 
 	linkLayer(id, tracker) {
@@ -40,11 +29,11 @@ class ProgressTracker {
 	}
 
 	finishLayer(id) {
-		this.updateLayer(id, {current: 1, total: 1});
+		this.updateLayer(id, { current: 1, total: 1 });
 	}
 
 	getProgress() {
-		const layers = filter(this.layers, {coalesced: false});
+		const layers = filter(this.layers, { coalesced: false });
 		const avgProgress = meanBy(layers, 'progress') || 0;
 		return Math.round(100 * avgProgress);
 	}
@@ -71,29 +60,39 @@ class DockerProgress {
 		try {
 			let downloadedPercentage;
 			let extractedPercentage;
-			({id, status} = evt);
+			({ id, status } = evt);
 			if (id == null) {
 				id = '';
 			}
 			if (status == null) {
 				status = '';
 			}
-			if (status === 'Pulling fs layer') {
-				this.downloadProgressTracker.addLayer(id);
-				this.extractionProgressTracker.addLayer(id);
-			} else if (status === 'Ready to download') {
-				this.downloadProgressTracker.linkLayer(id, evt.extractionProgressTracker);
-			} else if (status === 'Downloading') {
-				this.downloadProgressTracker.updateLayer(id, evt.progressDetail);
-			} else if (status === 'Extracting') {
-				this.extractionProgressTracker.updateLayer(id, evt.progressDetail);
-			} else if (status === 'Download complete') {
-				this.downloadProgressTracker.finishLayer(id);
-			} else if (status === 'Pull complete') {
-				this.extractionProgressTracker.finishLayer(id);
-			} else if (status === 'Already exists') {
-				this.downloadProgressTracker.finishLayer(id);
-				this.extractionProgressTracker.finishLayer(id);
+			switch (status) {
+				case 'Pulling fs layer':
+					this.downloadProgressTracker.addLayer(id);
+					this.extractionProgressTracker.addLayer(id);
+					break;
+				case 'Ready to download':
+					this.downloadProgressTracker.linkLayer(id, evt.extractionProgressTracker);
+					break;
+				case 'Downloading':
+					this.downloadProgressTracker.updateLayer(id, evt.progressDetail);
+					break;
+				case 'Extracting':
+					this.extractionProgressTracker.updateLayer(id, evt.progressDetail);
+					break;
+				case 'Download complete':
+					this.downloadProgressTracker.finishLayer(id);
+					break;
+				case 'Pull complete':
+					this.extractionProgressTracker.finishLayer(id);
+					break;
+				case 'Already exists':
+					this.downloadProgressTracker.finishLayer(id);
+					this.extractionProgressTracker.finishLayer(id);
+					break;
+				default:
+					break;
 			}
 			if (status.startsWith('Status: Image is up to date for ') ||
 				status.startsWith('Status: Downloaded newer image for ')) {
diff --git a/main/src/components/CoreService.vue b/main/src/components/CoreService.vue
index d736565e..db8ab6ba 100644
--- a/main/src/components/CoreService.vue
+++ b/main/src/components/CoreService.vue
@@ -426,7 +426,6 @@ export default {
 			// 2. update noticesData
 			if (this.noticesData[res.name]) {
 				if (res.message !== "") {
-					console.log(res.message)
 					const messageArray = res.message?.split(/[(\r\n)\r\n]+/) || [];
 					messageArray.forEach((item, index) => {
 						if (!item) {
diff --git a/main/src/components/TopBar.vue b/main/src/components/TopBar.vue
index d3aad5d9..e4af562c 100644
--- a/main/src/components/TopBar.vue
+++ b/main/src/components/TopBar.vue
@@ -826,7 +826,7 @@ export default {
 }
 
 ._title {
-	//styleName: Text 500Medium/Text02;
+	
 	font-family: $family-sans-serif;
 	font-size: 1rem;
 	font-weight: 500;
@@ -838,7 +838,7 @@ export default {
 }
 
 ._is-normal {
-	//styleName: Text 400Regular/Text03;
+	
 	font-family: $family-sans-serif;
 	font-size: 0.875rem;
 	font-weight: 400;
@@ -1074,7 +1074,7 @@ export default {
 					vertical-align: middle;
 
 					color: hsla(208, 20%, 20%, 1);
-					//styleName: Text 500Medium/Text02;
+					
 					font-family: $family-sans-serif;
 					font-size: 1rem;
 					font-weight: 500;
diff --git a/main/src/components/filebrowser/components/SidebarMenuButton.vue b/main/src/components/filebrowser/components/SidebarMenuButton.vue
index 0ecedecf..28d949a9 100644
--- a/main/src/components/filebrowser/components/SidebarMenuButton.vue
+++ b/main/src/components/filebrowser/components/SidebarMenuButton.vue
@@ -35,4 +35,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+
diff --git a/main/src/components/filebrowser/drop/DropContextMenu.vue b/main/src/components/filebrowser/drop/DropContextMenu.vue
index 51ad860c..bbacc792 100644
--- a/main/src/components/filebrowser/drop/DropContextMenu.vue
+++ b/main/src/components/filebrowser/drop/DropContextMenu.vue
@@ -1,13 +1,3 @@
-<!--
- * @Author: Jerryk jerry@icewhale.org
- * @Date: 2023-02-28 17:07:15
- * @LastEditors: Jerryk jerry@icewhale.org
- * @LastEditTime: 2023-03-17 16:42:58
- * @FilePath: /CasaOS-UI/src/components/filebrowser/drop/DropContextMenu.vue
- * @Description: 
- * 
- * Copyright (c) 2023 by IceWhale, All Rights Reserved. 
--->
 <template>
 	<div>
 		<div :style="{ top: y + 'px', left: x + 'px' }" class="drop-context-menu">
@@ -16,11 +6,6 @@
 						aria-role="list" class="file-dropdown" close-on-click>
 				<!-- Blank Start -->
 				<template>
-					<!-- <b-dropdown-item aria-role="menuitem" class="is-flex is-align-items-center has-text-danger"
-						key="drop-context2" @click="cancel" v-if="showCancel">
-						<b-icon pack="casa" icon="close-outline" class="mr-1 is-16x16" custom-size="casa-16px" /> {{ $t(cancelText)
-						}}
-					</b-dropdown-item> -->
 					<b-dropdown-item key="drop-context1" aria-role="menuitem" class="is-flex is-align-items-center">
 						<b-upload v-model="files" class="is-clickable has-text-full-03 is-flex is-align-items-center"
 								  multiple @input="activeDropUpload">
diff --git a/main/src/components/filebrowser/drop/Network.js b/main/src/components/filebrowser/drop/Network.js
index 4d091cdd..88499277 100644
--- a/main/src/components/filebrowser/drop/Network.js
+++ b/main/src/components/filebrowser/drop/Network.js
@@ -224,7 +224,6 @@ export class Peer {
 		if (!chunk.byteLength) return;
 
 		this._digester.unchunk(chunk);
-		// console.log(this._digester);
 		const progress = this._digester.progress;
 		this._onDownloadProgress(progress);
 
diff --git a/main/src/components/forms/EnvInputGroup.vue b/main/src/components/forms/EnvInputGroup.vue
index 2b513fbc..8d0770b9 100644
--- a/main/src/components/forms/EnvInputGroup.vue
+++ b/main/src/components/forms/EnvInputGroup.vue
@@ -2,7 +2,7 @@
 	<div class="mb-5">
 		<div class="field is-flex is-align-items-center mb-2">
 			<label class="label mb-0 is-flex-grow-1">{{ label }}</label>
-			<b-button icon-left="plus" rounded size="is-small" @click="addItem">{{ $t('Add') }}</b-button>
+			<b-button  icon-left="plus-outline" icon-pack="casa" rounded size="is-small" @click="addItem">{{ $t('Add') }}</b-button>
 		</div>
 		<div v-if="items.length == 0" class="is-flex is-align-items-center mb-5 info">
 			<b-icon icon="warning-solid" size="is-small" pack="casa" class="mr-2 "></b-icon>
diff --git a/main/src/components/forms/ImportPanel.vue b/main/src/components/forms/ImportPanel.vue
index a6cbb06e..b1726e25 100644
--- a/main/src/components/forms/ImportPanel.vue
+++ b/main/src/components/forms/ImportPanel.vue
@@ -11,15 +11,14 @@
 		<section class="modal-card-body">
 			<b-tabs v-model="activeTab" :animated="false">
 				<b-tab-item label="Docker Compose">
-					<b-field :message="errors" :type="{ 'is-danger': !!errors}">
+					<b-field :message="errors" :type="{ 'is-danger': !!errors }">
 						<b-input v-model="dockerComposeCommands"
-								 :placeholder="$t('Notice: If there are multiple services, only the first set can be analyzed correctly')"
-								 class="import-area"
-								 type="textarea"></b-input>
+							:placeholder="$t('Notice: If there are multiple services, only the first set can be analyzed correctly')"
+							class="import-area" type="textarea"></b-input>
 					</b-field>
 
 					<b-upload ref="importUpload" v-model="dropFiles" accept=".yaml,.yml" drag-drop expanded
-							  @input="onSelect">
+						@input="onSelect">
 						<section class="section">
 							<div class="content has-text-centered">
 								<p>
@@ -32,15 +31,15 @@
 
 				</b-tab-item>
 				<b-tab-item label="Docker CLI">
-					<b-field :message="errors" :type="{ 'is-danger': !!errors}" class="mb-0">
+					<b-field :message="errors" :type="{ 'is-danger': !!errors }" class="mb-0">
 						<b-input v-model="dockerCliCommands" class="import-area-cli" type="textarea"></b-input>
 					</b-field>
 				</b-tab-item>
 
 				<b-tab-item v-if="false" :label="$t('AppFile')">
-					<b-field :message="errors" :type="{ 'is-danger': !!errors}">
+					<b-field :message="errors" :type="{ 'is-danger': !!errors }">
 						<b-upload ref="importUpload" v-model="dropFiles" accept="application/json" drag-drop expanded
-								  @input="onSelect">
+							@input="onSelect">
 							<section class="section">
 								<div class="content has-text-centered">
 									<p>
@@ -52,9 +51,7 @@
 						</b-upload>
 					</b-field>
 				</b-tab-item>
-
 			</b-tabs>
-
 		</section>
 		<!-- Modal-Card Body End -->
 		<!-- Modal-Card Footer Start-->
@@ -63,8 +60,8 @@
 				<a rel="noopener" href="https://www.composerize.com/" target="_blank">{{ $t('cli to compose...') }}</a>
 			</div>
 			<div>
-				<b-button :label="$t('Cancel')" rounded @click="$emit('close')"/>
-				<b-button :label="$t('Submit')" rounded type="is-primary" @click="emitSubmit"/>
+				<b-button :label="$t('Cancel')" rounded @click="$emit('close')" />
+				<b-button :label="$t('Submit')" rounded type="is-primary" @click="emitSubmit" />
 			</div>
 		</footer>
 		<!-- Modal-Card Footer End -->
@@ -73,7 +70,7 @@
 
 <script>
 
-import YAML        from "yaml"
+import YAML from "yaml"
 import composerize from "composerize";
 
 export default {
@@ -84,24 +81,17 @@ export default {
 			dropFiles: {},
 			dockerCliCommands: "",
 			dockerComposeCommands: "",
-			// parseError: false,
 			appFileLoaded: false,
 			errors: "",
 			dropText: this.$t('Drop your Docker Compose file here or click to upload'),
 			uploadIcon: "upload",
-			// updateData: this.initData
 		}
 	},
 	props: {
-		// initData: Object,
 		netWorks: Array,
 		oriNetWorks: Array,
 		deviceMemory: Number
 	},
-	created() {
-		//console.log(this.oriNetWorks);
-
-	},
 	methods: {
 		/**
 		 * @description: Emit Event to tell parent Update
@@ -114,19 +104,12 @@ export default {
 				this.$emit('update', this.dockerComposeCommands)
 				this.$emit('close')
 			} else if (this.activeTab == 0) {
-
-				// if (this.checkYAML()) {
 				this.errors = ""
 				this.$emit('update', this.dockerComposeCommands)
 				this.$emit('close')
-				// } else {
-				// 	this.errors = this.$t('Please fill correct compose YAML')
-				// 	this.parseError = true;
-				// }
 			} else if (this.activeTab == 2) {
 				if (this.appFileLoaded) {
 					this.errors = ""
-					// this.$emit('update', this.updateData)
 					this.$emit('close')
 				} else {
 					this.errors = this.$t('Please import a valid App file')
@@ -167,18 +150,14 @@ export default {
 					keywords: ["media"],
 					value: `/Media`
 				}
-
 			]
-
 			checkArray.forEach(item => {
 				if (item.keywords.some(keywordsItem => {
 					return containerPath.includes(keywordsItem)
 				})) {
 					finalHostPath = rootDir + item.value
-
 				}
 			})
-
 			return finalHostPath
 		},
 
@@ -200,114 +179,6 @@ export default {
 			}
 			return true
 		},
-		/**
-		 * @description: Parse Import Docker Compose Commands
-		 * @return {Boolean}
-		 */
-		parseComposeYaml() {
-			//
-			// 	try {
-			// 		const yaml = YAML.parse(this.dockerComposeCommands)
-			// 		if (yaml.version === undefined) {
-			// 			return false
-			// 		}
-			// 		const parsedInput = Object.values(yaml.services)[0]
-			// 		// Image
-			// 		this.updateData.image = parsedInput.image
-			// 		// Label
-			// 		if (parsedInput.container_name != undefined) {
-			// 			this.updateData.label = upperFirst(parsedInput.container_name)
-			// 		} else {
-			// 			const imageArray = parsedInput.image.split("/")
-			// 			const lastNode = [...imageArray].pop()
-			// 			this.updateData.label = upperFirst(lastNode.split(":")[0])
-			// 		}
-			// 		// Envs
-			// 		if (parsedInput.environment) {
-			// 			let envArray = Array.isArray(parsedInput.environment) ? parsedInput.environment : Object.entries(parsedInput.environment)
-			// 			this.updateData.envs = envArray.map(item => {
-			// 				let ii = typeof item === "object" ? Array.from(item) : item.split("=");
-			// 				return {
-			// 					hostname: ii[1].replace(/"/g, ""),
-			// 					container: ii[0]
-			// 				}
-			// 			})
-			// 		} else {
-			// 			this.updateData.envs = []
-			// 		}
-			//
-			//
-			// 		//Ports
-			// 		this.updateData.ports = this.makeArray(parsedInput.ports).map(item => {
-			// 			let pArray = item.split(":")
-			// 			let endArray = pArray[1].split("/")
-			// 			let protocol = (endArray[1]) ? endArray[1] : 'tcp';
-			// 			return {
-			// 				container: endArray[0],
-			// 				hostname: pArray[0],
-			// 				protocol: protocol
-			// 			}
-			// 		})
-			//
-			// 		//Volume
-			// 		this.updateData.volumes = this.makeArray(parsedInput.volumes).map(item => {
-			// 			let ii = item.split(":");
-			// 			if (ii.length > 1) {
-			// 				return {
-			// 					container: ii[1],
-			// 					hostname: this.volumeAutoCheck(ii[1], ii[0], lowerFirst(this.updateData.label))
-			// 				}
-			// 			} else {
-			// 				return {
-			// 					container: ii[0],
-			// 					hostname: this.volumeAutoCheck(ii[0], "", lowerFirst(this.updateData.label))
-			// 				}
-			// 			}
-			// 		})
-			//
-			// 		// Devices
-			// 		this.updateData.devices = this.makeArray(parsedInput.device).map(item => {
-			// 			let ii = item.split(":");
-			// 			return {
-			// 				container: ii[1],
-			// 				hostname: ii[0]
-			// 			}
-			// 		})
-			//
-			// 		//Network
-			// 		let pnetwork = (parsedInput.network_mode != undefined) ? parsedInput.network_mode : (parsedInput.network != undefined) ? parsedInput.network[0] : undefined
-			// 		if (pnetwork != undefined) {
-			// 			let network = (pnetwork == 'physical') ? 'macvlan' : pnetwork;
-			// 			let seletNetworks = this.netWorks.filter(item => {
-			// 				if (item.driver == network) {
-			// 					return true
-			// 				}
-			// 			})
-			// 			if (seletNetworks.length > 0) {
-			// 				this.updateData.network_model = seletNetworks[0].networks[0].name;
-			// 			}
-			// 		}
-			//
-			// 		//hostname
-			// 		this.updateData.host_name = parsedInput.hostname != undefined ? parsedInput.hostname : ""
-			// 		// privileged
-			// 		this.updateData.privileged = parsedInput.privileged != undefined
-			//
-			// 		//cap-add
-			// 		if (parsedInput.cap_add != undefined) {
-			// 			this.updateData.cap_add = parsedInput.cap_add
-			// 		}
-			// 		//Restart
-			// 		if (parsedInput.restart != undefined) {
-			// 			this.updateData.restart = parsedInput.restart
-			// 		}
-			//
-			// 		return true
-			// 	} catch (error) {
-			// 		console.log(error);
-			// 		return false
-			// 	}
-		},
 		onSelect(val) {
 			const _this = this
 			const reader = new FileReader();
@@ -322,28 +193,6 @@ export default {
 			reader.readAsText(val)
 			reader.onload = function () {
 				_this.dockerComposeCommands = this.result
-				// try {
-				// 	_this.updateData = JSON.parse(this.result);
-				// 	if (_this.updateData.version === undefined || _this.updateData.version != "1.0") {
-				// 		_this.clearInput()
-				// 		return false
-				// 	} else {
-				// 		delete _this.updateData.versison
-				// 		_this.updateData.network_model = _this.getNetworkModel(_this.updateData.network_model)
-				// 		_this.updateData.memory = _this.deviceMemory
-				// 		if (!has(_this.updateData, 'protocol')) {
-				// 			_this.updateData.protocol = "http"
-				// 		}
-				// 		_this.dropText = val.name + " " + _this.$t('has been selected')
-				// 		_this.uploadIcon = "file-document"
-				// 		_this.appFileLoaded = true
-				// 		return true
-				// 	}
-				//
-				// } catch (e) {
-				// 	_this._this.clearInput()
-				// 	return false
-				// }
 			}
 		},
 		clearInput() {
@@ -371,9 +220,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.import-area {
+	::v-deep .textarea {
+		height: 22rem;
+	}
+}
+
 .import-area-cli {
 	::v-deep .textarea {
-		height: 244px;
+		height: 30rem;
 	}
 }
 
diff --git a/main/src/components/forms/InputGroup.vue b/main/src/components/forms/InputGroup.vue
index 4e0c2608..9c61ecda 100644
--- a/main/src/components/forms/InputGroup.vue
+++ b/main/src/components/forms/InputGroup.vue
@@ -2,7 +2,7 @@
 	<div class="mb-5">
 		<div class="field is-flex is-align-items-center mb-2">
 			<label class="label mb-0 is-flex-grow-1">{{ label }}</label>
-			<b-button icon-left="plus" icon-pack="casa" rounded size="is-small" @click="addItem">{{ $t('Add') }}</b-button>
+			<b-button  icon-left="plus-outline" icon-pack="casa" rounded size="is-small" @click="addItem">{{ $t('Add') }}</b-button>
 		</div>
 		<div v-if="items.length == 0" class="is-flex is-align-items-center mb-5 info">
 			<b-icon icon="warning-solid" size="is-small" pack="casa" class="mr-2 "></b-icon>
diff --git a/main/src/components/forms/Ports.vue b/main/src/components/forms/Ports.vue
index d3ff7fa7..51072a85 100644
--- a/main/src/components/forms/Ports.vue
+++ b/main/src/components/forms/Ports.vue
@@ -2,7 +2,7 @@
 	<div class="mb-5">
 		<div class="field is-flex is-align-items-center mb-2">
 			<label class="label mb-0 is-flex-grow-1">{{ $t('Ports') }}</label>
-			<b-button icon-left="plus" rounded size="is-small" @click="addItem">{{ $t('Add') }}</b-button>
+			<b-button  icon-left="plus-outline" icon-pack="casa" rounded size="is-small" @click="addItem">{{ $t('Add') }}</b-button>
 		</div>
 		<div v-if="items.length == 0" class="is-flex is-align-items-center mb-5 info">
 			<b-icon icon="warning-solid" size="is-small" pack="casa" class="mr-2 "></b-icon>
diff --git a/main/src/components/forms/VolumesInputGroup.vue b/main/src/components/forms/VolumesInputGroup.vue
index 9aa0a820..7dfd0164 100644
--- a/main/src/components/forms/VolumesInputGroup.vue
+++ b/main/src/components/forms/VolumesInputGroup.vue
@@ -2,7 +2,7 @@
 	<div class="mb-5">
 		<div class="field is-flex is-align-items-center mb-2">
 			<label class="label mb-0 is-flex-grow-1">{{ label }}</label>
-			<b-button icon-left="plus" rounded size="is-small" @click="addItem">{{ $t('Add') }}</b-button>
+			<b-button  icon-left="plus-outline" icon-pack="casa" rounded size="is-small" @click="addItem">{{ $t('Add') }}</b-button>
 		</div>
 		<div v-if="items.length == 0" class="is-flex is-align-items-center mb-5 info">
 			<b-icon icon="warning-solid" size="is-small" pack="casa" class="mr-2 "></b-icon>
diff --git a/main/src/mixins/ListViewMixin.js b/main/src/mixins/ListViewMixin.js
index 4ba0668a..14b7c148 100644
--- a/main/src/mixins/ListViewMixin.js
+++ b/main/src/mixins/ListViewMixin.js
@@ -63,7 +63,6 @@ export default {
 				this.cols = Math.floor(cw / this.CARD_WIDTH)
 				this.colStyle.width = (100 / this.cols).toString() + "%"
 			}
-			const ww = document.body.clientWidth
 		},
 
 		/*************************************************