Merge pull request #8 from beclab/fix/dashboard_controlhub-1225

fix: fix dashboard user avatar and update ui

apps/adminConsole/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apps/admin_console",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "description": "Control Hub",
   "productName": "Control Hub",
   "private": true,

apps/adminConsole/src/containers/NamespacesSelection.vue

@@ -1,20 +1,18 @@
 <template>
-	<QSectionStyle>
-		<q-select
-			dense
-			v-model="selected"
-			:options="options"
-			outlined
-			@update:model-value="change"
-		/>
-	</QSectionStyle>
+	<BtSelect
+		dense
+		v-model="selected"
+		:options="options"
+		outlined
+		@update:model-value="change"
+	/>
 </template>
 
 <script setup lang="ts">
 import { getNamespacesList } from 'src/network';
 import { ref, onMounted, withDefaults } from 'vue';
-import QSectionStyle from '@packages/ui/src/components/QSectionStyle.vue';
 import { useI18n } from 'vue-i18n';
+import BtSelect from '@packages/ui/src/components/Select.vue';
 const { t } = useI18n();
 
 interface Props {

apps/adminConsole/src/pages/Storages/PersistentVolumeClaim.vue

@@ -8,27 +8,22 @@
 					v-model="selectValue"
 					@update:model-value="fetchData"
 				></NamespacesSelection>
-				<QSectionStyle>
-					<q-select
-						dense
-						v-model="status"
-						:options="VOLUME_STATUS"
-						outlined
-						option-label="text"
-						option-value="value"
-						@update:model-value="fetchData"
-					>
-						<template v-slot:option="scope">
-							<q-item v-bind="scope.itemProps">
-								{{ $t(scope.opt.text) }}
-							</q-item>
-						</template>
-						<template #selected>
-							{{ $t(status.text) }}
-						</template>
-					</q-select>
-				</QSectionStyle>
-
+				<BtSelect
+					dense
+					v-model="status"
+					:options="VOLUME_STATUS"
+					outlined
+					option-label="text"
+					option-value="value"
+					@update:model-value="fetchData"
+				>
+					<template v-slot:option-label="scope">
+						{{ $t(scope.opt.text) }}
+					</template>
+					<template #selected>
+						{{ $t(status.text) }}
+					</template>
+				</BtSelect>
 				<QInputStyle>
 					<q-input
 						v-model="storageName"
@@ -205,6 +200,7 @@ import EditDialog from 'components/dialog/src/IndexDialog.vue';
 import { useI18n } from 'vue-i18n';
 import { set } from 'lodash';
 import { useColor } from '@bytetrade/ui';
+import BtSelect from '@packages/ui/src/components/Select.vue';
 const { color: blueDefault } = useColor('blue-default');
 const { color: inkOnBrand } = useColor('ink-on-brand');
 

apps/adminConsole/yarn.lock

@@ -11,7 +11,7 @@
     "@jridgewell/trace-mapping" "^0.3.24"
 
 "@apps/monitoring@../monitoring":
-  version "0.4.6"
+  version "0.4.7"
   dependencies:
     "@apps/nodes" "../nodes"
     "@bytetrade/core" "0.3.67"

apps/common/src/components/RouteBackBar.vue

@@ -17,8 +17,10 @@
 			<MyAvatarImg
 				v-else-if="avatar"
 				:src="avatar"
-				:width="!isContent ? '32px' : '48px'"
-				:height="!isContent ? '32px' : '48px'"
+				:style="{
+					width: !isContent ? '32px' : '48px',
+					height: !isContent ? '32px' : '48px'
+				}"
 				:class="!isContent ? 'q-mr-sm' : 'q-mr-lg'"
 			></MyAvatarImg>
 			<span

apps/common/src/components/Select.vue

@@ -0,0 +1,85 @@
+<template>
+	<QSectionStyle>
+		<q-select v-bind="$attrs" popup-content-class="q-pa-sm my-select-wrapper">
+			<template v-slot:option="scope">
+				<q-item
+					class="row justify-between items-center cursor-pointer select-option-item"
+					:class="[scope.selected ? 'selected-active' : '']"
+					v-bind="scope.itemProps"
+				>
+					<q-item-section class="text-body3">
+						<slot
+							v-if="$slots['option-label']"
+							name="option-label"
+							v-bind="scope"
+						></slot>
+						<template v-else>
+							{{
+								$attrs['option-label']
+									? $t(scope.opt[$attrs['option-label']])
+									: scope.opt['label']
+							}}
+						</template>
+					</q-item-section>
+
+					<q-item-section avatar class="my-avatar-wrapper">
+						<q-icon
+							v-if="isEqual(scope.opt, $attrs.modelValue)"
+							color="primary"
+							size="16px"
+							name="sym_r_check_circle"
+						/>
+					</q-item-section>
+				</q-item>
+			</template>
+			<template
+				v-for="(slot, name) in $slots"
+				v-slot:[name]="scope"
+				:key="name"
+			>
+				<slot :name="name" v-if="scope" v-bind="scope"></slot>
+				<slot :name="name" v-else></slot>
+			</template>
+		</q-select>
+	</QSectionStyle>
+</template>
+
+<script lang="ts" setup>
+import QSectionStyle from './QSectionStyle.vue';
+import { isEqual } from 'lodash';
+import { useSlots, computed } from 'vue';
+</script>
+
+<style lang="scss" scoped>
+.my-select-wrapper {
+	.select-option-item {
+		gap: 4px;
+		padding: 8px;
+		&.selected-active {
+			border-radius: 8px;
+		}
+
+		.my-avatar-wrapper {
+			min-width: 20px;
+			padding-left: 4px;
+		}
+	}
+
+	::v-deep(.q-menu) {
+		border-radius: 8px;
+		background: $background-2;
+		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
+	}
+	::v-deep(.q-menu .q-virtual-scroll__content) {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+}
+</style>
+<style lang="scss">
+.my-select-wrapper .q-manual-focusable--focused > .q-focus-helper {
+	background: $background-hover !important;
+	opacity: 1 !important;
+}
+</style>

apps/common/src/containers/Monitoring/DateRangeMonitoring.vue

@@ -1,27 +1,22 @@
 <template>
-	<QSectionStyle>
-		<q-select
-			v-model="selectValue"
-			:options="options"
-			dense
-			outlined
-			@update:model-value="change"
-		>
-			<template v-slot:selected-item="scope">
-				<div>{{ selectItemformat(scope.opt) }}</div>
-			</template>
-			<template v-slot:option="scope">
-				<q-item v-bind="scope.itemProps">
-					<q-item-section>
-						<q-item-label> {{ selectItemformat(scope.opt) }}</q-item-label>
-					</q-item-section>
-				</q-item>
-			</template>
-		</q-select>
-	</QSectionStyle>
+	<BtSelect
+		v-model="selectValue"
+		:options="options"
+		dense
+		outlined
+		@update:model-value="change"
+	>
+		<template v-slot:selected-item="scope">
+			<div>{{ selectItemformat(scope.opt) }}</div>
+		</template>
+		<template v-slot:option-label="scope">
+			{{ selectItemformat(scope.opt) }}
+		</template>
+	</BtSelect>
 </template>
 
 <script lang="ts">
+import BtSelect from '../../components/Select.vue';
 export type DateRangeItem = string;
 
 export const options: DateRangeItem[] = [

apps/monitoring/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apps/monitoring",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "Dashboard",
   "productName": "Dashboard",
   "private": true,

apps/monitoring/src/components/MyCard.vue

@@ -8,7 +8,7 @@
 				<div v-else>{{ icon }}</div>
 
 				<div v-if="$slots.title"><slot name="title"></slot></div>
-				<div v-else class="text-h4 text-grey-10">{{ title }}</div>
+				<div v-else class="text-h4 text-ink-1">{{ title }}</div>
 			</div>
 			<div><slot name="extra"></slot></div>
 		</div>

apps/monitoring/src/containers/NodeSelect/IndexPage.vue

@@ -1,23 +1,16 @@
 <template>
-	<QSectionStyle>
-		<q-select
-			style="min-width: 200px"
-			v-model="selectValue"
-			@update:model-value="selectHandler"
-			:options="options"
-			dense
-			outlined
-		>
-			<template v-slot:option="scope">
-				<q-separator v-if="scope.opt.user" />
-				<q-item v-bind="scope.itemProps">
-					<q-item-section>
-						<q-item-label>{{ scope.opt.label }}</q-item-label>
-					</q-item-section>
-				</q-item>
-			</template>
-		</q-select>
-	</QSectionStyle>
+	<BtSelect
+		style="min-width: 200px"
+		v-model="selectValue"
+		@update:model-value="selectHandler"
+		:options="options"
+		dense
+		outlined
+	>
+		<template v-slot:option-label="scope">
+			{{ scope.opt.label }}
+		</template>
+	</BtSelect>
 </template>
 
 <script setup lang="ts">
@@ -30,6 +23,7 @@ import {
 import QSectionStyle from '@packages/ui/src/components/QSectionStyle.vue';
 import { GLOBAL_ROLE } from '@packages/ui/src/constant/user';
 import { initOptions, options, selectValue } from './config';
+import BtSelect from '@packages/ui/src/components/Select.vue';
 
 const emits = defineEmits(['update:model-value']);