Add avatar.

IceWhaleTech · Jan 12, 2024 · e101450 · e101450
1 parent 47a9e51
commit e101450
Show file tree

Hide file tree

Showing 10 changed files with 161 additions and 185 deletions.
diff --git a/main/src/App.vue b/main/src/App.vue
@@ -153,7 +153,7 @@ _____             _____ _____
 <style lang="scss" scoped>
 #app {
 	width: 100vw;
-	height: calc(var(--vh,1vh) * 100);
+	height: 100dvh;
 	font-weight: 400;
 	font-size: 0.875rem;
 	-webkit-font-smoothing: antialiased;

diff --git a/main/src/components/Apps/AppPanel.vue b/main/src/components/Apps/AppPanel.vue
@@ -1,6 +1,6 @@
 <template>
 	<div :class="{ 'narrow': currentSlide > 0, 'card-width': isFirstInstall, '_stepStoreList': currentSlide === 0 }"
-		class="app-card modal-card">
+		class=" modal-card">
 		<!--    first setting！！ apps installation location-->
 		<template v-if="isFirstInstall">
 			<header class="modal-card-head b-line">
@@ -1515,14 +1515,17 @@ export default {
 <style lang="scss">
 // appPanel global style
 .app-panel {
+	.modal-card-head {
+		background-color: hsla(208, 16%, 94%, 1);
+	}
 	._stepStoreList {
 		min-height: calc(100vh - 2.5rem);
-
 		.modal-card-body {
 			overflow-y: scroll;
 			overflow-x: clip;
 		}
 	}
+
 }
 
 .app-search {

diff --git a/main/src/components/Apps/ComposeConfig.vue b/main/src/components/Apps/ComposeConfig.vue
@@ -787,39 +787,25 @@ export default {
 			}
 		},
 		bridgePorts(services) {
-			/*
-			 - "3000"
-			 - "3000-3005"
-			 - "127.0.0.1:8001"
-			 - "127.0.0.1:5000-5010"
-			 */
-
-			let published,
-				result = [];
-			for (let key in services) {
-				let service = services[key]
-				service.ports.map(function (item) {
-					// TODO 需要健壮一下
+			let result = [];
+			for (const key in services) {
+				const service = services[key];
+				service.ports.forEach((item) => {
 					if (isNumber(item)) {
 						result.push(item);
-						return;
-					}
-					const TEMPORARY_PORT_INFORMATION = item.published?.split(":");
-					if (TEMPORARY_PORT_INFORMATION.length > 1) {
-						published = TEMPORARY_PORT_INFORMATION[1];
 					} else {
-						published = TEMPORARY_PORT_INFORMATION[0];
-					}
-					published = published?.split("-");
-
-					if (published.length > 1) {
-						let start = published[0];
-						let end = published[1];
-						for (let i = start; i <= end; i++) {
-							result.push(i);
+						const TEMPORARY_PORT_INFORMATION = item.published?.split(":");
+						const published = TEMPORARY_PORT_INFORMATION?.length > 1 ? TEMPORARY_PORT_INFORMATION[1] : TEMPORARY_PORT_INFORMATION[0];
+						const publishedRange = published?.split("-");
+						if (publishedRange?.length > 1) {
+							const start = parseInt(publishedRange[0]);
+							const end = parseInt(publishedRange[1]);
+							for (let i = start; i <= end; i++) {
+								result.push(i);
+							}
+						} else {
+							result.push(parseInt(publishedRange[0]));
 						}
-					} else {
-						result.push(published[0]);
 					}
 				});
 			}
@@ -855,11 +841,6 @@ export default {
 	},
 };
 </script>
-<style lang="scss">
-.app-card .modal-card-head.setting-compose-panel {
-	background-color: hsla(208, 16%, 94%, 1);
-}
-</style>
 <style lang="scss" scoped>
 .b-tabs {
 	margin-bottom: 0;
@@ -897,19 +878,19 @@ 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;
+	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{
+::v-deep .vue-slider-mark-label {
 	font-size: 0.75rem;
 }
 
-::v-deep .vue-slider-dot-tooltip-text{
+::v-deep .vue-slider-dot-tooltip-text {
 	font-size: 0.75rem;
 }
 </style>
diff --git a/main/src/components/Apps/Dropdown.vue b/main/src/components/Apps/Dropdown.vue
@@ -1,30 +1,30 @@
 <template>
 	<div ref="dropdown" :class="rootClasses" class="dropdown dropdown-menu-animation" @mouseleave="isHoverable = false">
 		<div v-if="!inline" ref="trigger" :tabindex="disabled ? false : triggerTabindex" aria-haspopup="true"
-			 class="dropdown-trigger" @click="onClick" @mouseenter="onHover" @contextmenu.prevent="onContextMenu"
-			 @focus.capture="onFocus">
-			<slot :active="isActive" name="trigger"/>
+			class="dropdown-trigger" @click="onClick" @mouseenter="onHover" @contextmenu.prevent="onContextMenu"
+			@focus.capture="onFocus">
+			<slot :active="isActive" name="trigger" />
 		</div>
 
 		<transition :name="animation">
-			<div v-if="isMobileModal" v-show="isActive" :aria-hidden="!isActive" class="background"/>
+			<div v-if="isMobileModal" v-show="isActive" :aria-hidden="!isActive" class="background" />
 		</transition>
 		<transition :name="animation">
 			<div v-show="(!disabled && (isActive || isHoverable)) || inline" ref="dropdownMenu" v-trap-focus="trapFocus"
-				 :aria-hidden="!isActive" :style="style" class="dropdown-menu">
+				:aria-hidden="!isActive" :style="style" class="dropdown-menu">
 				<div :aria-modal="!inline" :role="ariaRole" :style="contentStyle" class="dropdown-content">
-					<slot/>
+					<slot />
 				</div>
 			</div>
 		</transition>
 	</div>
 </template>
 
 <script>
-import trapFocus                                                           from 'buefy/src/directives/trapFocus'
-import config                                                              from 'buefy/src/utils/config'
-import {createAbsoluteElement, isCustomElement, removeElement, toCssWidth} from 'buefy/src/utils/helpers'
-import ProviderParentMixin                                                 from 'buefy/src//utils/ProviderParentMixin'
+import trapFocus from 'buefy/src/directives/trapFocus'
+import config from 'buefy/src/utils/config'
+import { createAbsoluteElement, isCustomElement, removeElement, toCssWidth } from 'buefy/src/utils/helpers'
+import ProviderParentMixin from 'buefy/src//utils/ProviderParentMixin'
 
 const DEFAULT_CLOSE_OPTIONS = ['escape', 'outside']
 
@@ -135,10 +135,10 @@ export default {
 		},
 		cancelOptions() {
 			return typeof this.canClose === 'boolean'
-			? this.canClose
-			? DEFAULT_CLOSE_OPTIONS
-			: []
-			: this.canClose
+				? this.canClose
+					? DEFAULT_CLOSE_OPTIONS
+					: []
+				: this.canClose
 		},
 		contentStyle() {
 			return {
@@ -266,7 +266,7 @@ export default {
 		/**
 		 * Keypress event that is bound to the document
 		 */
-		keyPress({key}) {
+		keyPress({ key }) {
 			if (this.isActive && (key === 'Escape' || key === 'Esc')) {
 				if (this.cancelOptions.indexOf('escape') < 0) return
 				this.isActive = false
@@ -310,63 +310,54 @@ export default {
 			}
 		},
 
-		updateAppendToBody() {
-			const dropdown = this.$refs.dropdown
-			const dropdownMenu = this.$refs.dropdownMenu
-			const trigger = this.$refs.trigger
-			if (dropdownMenu && trigger) {
-				// update wrapper dropdown
-				const dropdownWrapper = this.$data._bodyEl.children[0]
-				dropdownWrapper.classList.forEach((item) => dropdownWrapper.classList.remove(item))
-				dropdownWrapper.classList.add('dropdown')
-				dropdownWrapper.classList.add('dropdown-menu-animation')
-				if (this.$vnode && this.$vnode.data && this.$vnode.data.staticClass) {
-					dropdownWrapper.classList.add(this.$vnode.data.staticClass)
-				}
-				this.rootClasses.forEach((item) => {
-					// skip position prop
-					if (item && typeof item === 'object') {
-						for (let key in item) {
-							if (item[key]) {
-								dropdownWrapper.classList.add(key)
+		methods: {
+			updateAppendToBody() {
+				const dropdown = this.$refs.dropdown
+				const dropdownMenu = this.$refs.dropdownMenu
+				const trigger = this.$refs.trigger
+				if (dropdownMenu && trigger) {
+					const dropdownWrapper = this.$data._bodyEl.children[0]
+					dropdownWrapper.classList = ['dropdown', 'dropdown-menu-animation', ...(this.$vnode && this.$vnode.data && this.$vnode.data.staticClass ? [this.$vnode.data.staticClass] : [])]
+					this.rootClasses.forEach((item) => {
+						if (item && typeof item === 'object') {
+							for (let key in item) {
+								if (item[key]) {
+									dropdownWrapper.classList.add(key)
+								}
 							}
 						}
-					}
-				})
-				if (this.appendToBodyCopyParent) {
-					const parentNode = this.$refs.dropdown.parentNode
-					const parent = this.$data._bodyEl
-					parent.classList.forEach((item) => parent.classList.remove(item))
-					parentNode.classList.forEach((item) => {
-						parent.classList.add(item)
 					})
-				}
-				const rect = trigger.getBoundingClientRect()
-				let top = rect.top + window.scrollY
-				let left = rect.left + window.scrollX
-				if (!this.position || this.position.indexOf('bottom') >= 0) {
-					top += trigger.clientHeight
-				} else {
-					top -= dropdownMenu.clientHeight
-				}
-				if (this.position && this.position.indexOf('left') >= 0) {
-					left -= (dropdownMenu.clientWidth - trigger.clientWidth)
-				}
-				if (this.position && this.position.indexOf('is-right') >= 0) {
-					console.log('is-right');
-					top += 0
-					left -= 0
-				}
-
-				this.style = {
-					position: 'absolute',
-					top: `${top}px`,
-					left: `${left}px`,
-					zIndex: '99',
-					width: this.expanded ? `${dropdown.offsetWidth}px` : undefined
+					if (this.appendToBodyCopyParent) {
+						const parentNode = this.$refs.dropdown.parentNode
+						const parent = this.$data._bodyEl
+						parent.classList = [...parentNode.classList]
+					}
+					const rect = trigger.getBoundingClientRect()
+					let top = rect.top + window.scrollY
+					let left = rect.left + window.scrollX
+					if (!this.position || this.position.includes('bottom')) {
+						top += trigger.clientHeight
+					} else {
+						top -= dropdownMenu.clientHeight
+					}
+					if (this.position && this.position.includes('left')) {
+						left -= dropdownMenu.clientWidth - trigger.clientWidth
+					}
+					if (this.position && this.position.includes('is-right')) {
+						console.log('is-right')
+						top += 0
+						left -= 0
+					}
+					this.style = {
+						position: 'absolute',
+						top: `${top}px`,
+						left: `${left}px`,
+						zIndex: '99',
+						width: this.expanded ? `${dropdown.offsetWidth}px` : undefined
+					}
 				}
 			}
-		}
+		},
 	},
 	mounted() {
 		if (this.appendToBody) {