From e101450aee8dc80707426094d90900a50f959588 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=81=E7=AB=AD=E5=8A=9B?= <jerrykuku@qq.com>
Date: Fri, 12 Jan 2024 14:00:34 +0800
Subject: [PATCH] Add avatar.

---
 main/src/App.vue                              |   2 +-
 main/src/components/Apps/AppPanel.vue         |   7 +-
 main/src/components/Apps/ComposeConfig.vue    |  65 ++++-----
 main/src/components/Apps/Dropdown.vue         | 125 ++++++++----------
 main/src/components/SideBar.vue               |  67 +++++-----
 main/src/components/TopBar.vue                |   4 +-
 main/src/components/account/AccountPanel.vue  |  49 ++++---
 .../uploader/components/uploader.vue          |   1 -
 main/src/service/users.js                     |  17 +--
 main/src/views/Home.vue                       |   9 --
 10 files changed, 161 insertions(+), 185 deletions(-)

diff --git a/main/src/App.vue b/main/src/App.vue
index 425fea6a..e43c7497 100644
--- 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
index f7a840eb..3a311444 100644
--- 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
index 7e256974..f0adeea7 100644
--- 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
index 192cb831..16af256f 100644
--- a/main/src/components/Apps/Dropdown.vue
+++ b/main/src/components/Apps/Dropdown.vue
@@ -1,19 +1,19 @@
 <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>
@@ -21,10 +21,10 @@
 </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) {
diff --git a/main/src/components/SideBar.vue b/main/src/components/SideBar.vue
index 6efb50d3..0154dd97 100644
--- a/main/src/components/SideBar.vue
+++ b/main/src/components/SideBar.vue
@@ -1,11 +1,11 @@
 <template>
-	<div v-if="!isLoading" :class="{ 'open': sidebarOpen }" class="side-bar contextmenu-canvas">
+	<div v-if="!isLoading" :class="{ 'open': sidebarOpen }" class="side-bar contextmenu-canvas" ref="sidebar">
 		<vue-custom-scrollbar :settings="scrollSettings" class="scroll-area contextmenu-canvas">
 			<div v-for="(item, index) in activeApps" :key="`widgets_${index}`">
 				<component :is="item.app" :class="{ 'last-block': index === activeApps.length - 1 }"></component>
 			</div>
 		</vue-custom-scrollbar>
-		<settings v-model="widgetsSettings" :class="{ 'mt-4': activeApps.length > 0 }" class="mr-4" @change="handleChange">
+		<settings v-model="widgetsSettings" :class="{ 'mt-4': activeApps.length > 0 }" @change="handleChange">
 		</settings>
 	</div>
 </template>
@@ -85,6 +85,9 @@ export default {
 	},
 	mounted() {
 		this.getConfig();
+
+		window.addEventListener('resize', this.handleResize);
+
 	},
 
 	methods: {
@@ -100,6 +103,7 @@ export default {
 						this.saveData(initData);
 						this.widgetsSettings = initData;
 						this.isLoading = false;
+						this.handleResize();
 					} else {
 						this.diffAndCombineData(initData, res.data.data);
 					}
@@ -126,6 +130,7 @@ export default {
 				this.saveData(newData);
 			}
 			this.isLoading = false;
+			this.handleResize();
 		},
 		/**
 		 * @description: Get Local widgets datas
@@ -157,6 +162,16 @@ export default {
 			this.saveData(this.widgetsSettings)
 		},
 
+		handleResize() {
+			const ww = window.innerWidth;
+			if (this.isLoading) return false;
+			const parentWidth = document.querySelector('.slider-content').offsetWidth;
+			this.$nextTick(() => {
+				const padding = ww <= 480 ? 0 : -16;
+				this.$refs.sidebar.style.width = parentWidth + padding + 'px'
+			})
+		}
+
 	},
 }
 </script>
@@ -164,29 +179,37 @@ export default {
 <style lang="scss">
 .side-bar {
 	z-index: 10;
-	margin-right: -15px;
 	// height: calc(100vh - 6rem);
 	height: calc(var(--vh, 1vh) * 100 - 6rem);
 	overflow: inherit !important;
 	position: fixed;
-	width: 21.25rem;
 
-	@include until-fullhd {
-		width: 18.25rem;
-	}
+	@include until(480px) {
+		z-index: 20;
+		left: 0rem;
+		width: auto;
+		margin: 0 0 0 1rem !important;
+		transform: translateX(-100vw);
+		transition: all 0.3s ease-in-out;
 
-	@include until-widescreen {
-		width: 18rem;
+		&.open {
+			transform: translateX(0);
+		}
 	}
-
 }
 
 .scroll-area {
 	position: relative;
-	padding: 0 1rem 0 0;
+	padding: 0 16px 0 0;
+	margin-right: -16px;
 	max-height: calc(100% - 7.5rem);
 	overflow-x: inherit !important;
 	overflow-y: hidden !important;
+
+	@include until(480px) {
+		max-height: calc(100% - 7rem);
+		height: 100% !important;
+	}
 }
 
 .ps__thumb-x,
@@ -227,26 +250,4 @@ export default {
 .ps__rail-y.ps--clicking .ps__thumb-y {
 	width: 8px;
 }
-
-@media screen and (max-width: 480px) {
-	.side-bar {
-		z-index: 20;
-		left: 0rem;
-		width: auto;
-		margin: 0 0 0 1rem !important;
-		transform: translateX(-100vw);
-		transition: all 0.3s ease-in-out;
-
-		&.open {
-			width: calc(100% - 2rem);
-			transform: translateX(0);
-		}
-	}
-
-	.scroll-area {
-		max-height: calc(100% - 7rem);
-		height: 100% !important;
-		margin-right: -1rem;
-	}
-}
 </style>
diff --git a/main/src/components/TopBar.vue b/main/src/components/TopBar.vue
index 9913cfc8..8ea9fc4d 100644
--- a/main/src/components/TopBar.vue
+++ b/main/src/components/TopBar.vue
@@ -3,10 +3,10 @@
 		<div class="navbar-brand ml-4 _fixed-height">
 
 			<!-- SideBar Button Start -->
-			<div id="sidebar-btn" class="is-flex is-align-items-center mr-3 ml-3">
+			<div id="sidebar-btn" class="is-flex is-align-items-center navbar-item">
 				<b-tooltip :active="!$store.state.isMobile" :label="sidebarIconLabel" position="is-right" type="is-dark">
 					<div role="button" @click="showSideBar">
-						<b-icon :icon="sidebarIcon" class="picon" size="is-20"></b-icon>
+						<b-icon :icon="sidebarIcon" class="picon" pack="casa" size="is-20"></b-icon>
 					</div>
 				</b-tooltip>
 			</div>
diff --git a/main/src/components/account/AccountPanel.vue b/main/src/components/account/AccountPanel.vue
index 07d70196..7590ca7d 100644
--- a/main/src/components/account/AccountPanel.vue
+++ b/main/src/components/account/AccountPanel.vue
@@ -17,8 +17,7 @@
 								<b-icon icon="edit-outline" pack="casa" />
 								<input type="file" class="file-input" accept="image/*" @change="loadImage($event)" />
 							</div>
-							<b-image :src="require('@/assets/img/account/default-avatar.svg')" class="is-80x80"
-								rounded></b-image>
+							<b-image :src="avatarUrl" class="is-80x80" rounded></b-image>
 						</div>
 
 					</div>
@@ -98,24 +97,20 @@
 
 						</div>
 					</div>
-
-
 				</template>
 			</section>
 			<!-- Modal-Card Body End -->
 			<!-- Modal-Card Footer Start-->
-			<footer class="modal-card-foot is-flex is-align-items-center">
-				<div class="is-flex-grow-1"></div>
-				<div>
-					<b-button v-if="state != 1" :label="$t('Back')" rounded @click.stop="goto(1)" />
-					<b-button v-if="state == 1" :label="$t('Logout')" rounded @click="logout" type="is-dark" />
-					<b-button v-else-if="state == 2" :label="$t('Submit')" expaned rounded type="is-dark"
-						@click="handleSubmit(saveUser)" />
-					<b-button v-else-if="state == 3" :label="$t('Submit')" expaned rounded type="is-dark"
-						@click="handleSubmit(savePassword)" />
-					<b-button v-else-if="state == 4" :label="$t('Submit')" expaned rounded type="is-dark"
-						@click="handleSubmit(saveAvatar)" />
-				</div>
+			<footer class="modal-card-foot is-flex is-align-items-center" :class="buttonAlign">
+				<b-button v-if="state != 1" :label="$t('Back')" rounded @click.stop="goto(1)" />
+				<b-button v-if="state == 1" :label="$t('Logout')" rounded @click="logout" type="is-dark" />
+				<b-button v-else-if="state == 2" :label="$t('Submit')" expaned rounded type="is-dark"
+					@click="handleSubmit(saveUser)" />
+				<b-button v-else-if="state == 3" :label="$t('Submit')" expaned rounded type="is-dark"
+					@click="handleSubmit(savePassword)" />
+				<b-button v-else-if="state == 4" :label="$t('Submit')" expaned rounded type="is-dark"
+					@click="handleSubmit(saveAvatar)" />
+
 			</footer>
 			<!-- Modal-Card Footer End -->
 		</ValidationObserver>
@@ -151,6 +146,7 @@ function getMimeType(file, fallback = null) {
 	}
 }
 
+const avatarUrlPrefix = "v1/users/avatar?token=";
 
 export default {
 	name: "account-panel",
@@ -160,6 +156,7 @@ export default {
 			state: 1,
 			user: this.$store.state.user,
 			username: this.$store.state.user.username,
+			avatarUrl: `${avatarUrlPrefix}${this.$store.state.token || localStorage.getItem("access_token")}`,
 			oriPassword: "",
 			password: '',
 			confirmation: "",
@@ -217,6 +214,9 @@ export default {
 		},
 		bodyPadding() {
 			return this.state == 1 || this.state == 4 ? "px-40 py-24" : ""
+		},
+		buttonAlign() {
+			return this.state == 1 ? "is-justify-content-center" : "is-justify-content-end"
 		}
 	},
 
@@ -307,7 +307,22 @@ export default {
 		},
 
 		async saveAvatar() {
-			console.log(this.result.canvas.toDataURL());
+			this.isLoading = true;
+			const imageData = this.result.canvas.toDataURL();
+			this.$api.users.saveAvatar({ file: imageData }).then(() => {
+				this.$buefy.toast.open({
+					message: this.$t(`Update successful`),
+					type: 'is-success'
+				})
+				this.isLoading = false;
+				this.state = 1;
+			}).catch(() => {
+				this.$buefy.toast.open({
+					message: this.$t(`Update failure`),
+					type: 'is-danger'
+				})
+				this.isLoading = false;
+			})
 		},
 		logout() {
 			this.$messageBus('account_setting_logout')
diff --git a/main/src/components/filebrowser/uploader/components/uploader.vue b/main/src/components/filebrowser/uploader/components/uploader.vue
index 0f1e93ee..5c647007 100644
--- a/main/src/components/filebrowser/uploader/components/uploader.vue
+++ b/main/src/components/filebrowser/uploader/components/uploader.vue
@@ -92,7 +92,6 @@ export default {
 			this.fileList = this.uploader.fileList
 			this.$api.sys.getVersion().then(res => {
 				if (this.autoStart && res.status === 200) {
-					console.log(this.uploader);
 					this.uploader.opts.headers.Authorization = this.$store.state.access_token || localStorage.getItem("access_token")
 					this.uploader.upload()
 				}
diff --git a/main/src/service/users.js b/main/src/service/users.js
index 4d7b6fe9..e0290d48 100644
--- a/main/src/service/users.js
+++ b/main/src/service/users.js
@@ -1,14 +1,4 @@
-/*
- * @Author: Jerryk jerry@icewhale.org
- * @Date: 2022-07-12 21:57:26
- * @LastEditors: zhanghengxin ezreal.ice@icloud.com
- * @LastEditTime: 2022-09-20 23:44:51
- * @FilePath: /CasaOS-UI/src/service/users.js
- * @Description:
- *
- * Copyright (c) 2022 by IceWhale, All Rights Reserved.
- */
-import {api} from "./service.js";
+import { api } from "./service.js";
 
 const PREFIX = "/users"
 const PREFIX2 = "/v2/users"
@@ -142,6 +132,11 @@ const users = {
 		return api.delete(`${PREFIX2}/event/${uuid}`);
 	},
 
+	// save user avatar 
+	saveAvatar(data) {
+		return api.put(`${PREFIX}/avatar`, data);
+	},
+
 }
 
 export default users;
diff --git a/main/src/views/Home.vue b/main/src/views/Home.vue
index 92bf2b7a..6adc8853 100644
--- a/main/src/views/Home.vue
+++ b/main/src/views/Home.vue
@@ -1,12 +1,3 @@
-<!--
- * @LastEditors: zhanghengxin ezreal.zhang@icewhale.org
- * @LastEditTime: 2023-09-12 14:33:00
- * @FilePath: /CasaOS-UI/main/src/views/Home.vue
-  * @Description:
-  *
-  * Copyright (c) 2022 by IceWhale, All Rights Reserved.
-  -->
-
 <template>
 	<div v-if="!isLoading" class="out-container">
 		<!-- NavBar Start -->