fix(client): fix zindex issue

Fix #8064
Fix #8063

packages/client/src/components/ui/context-menu.vue

@@ -1,6 +1,6 @@
 <template>
 <transition :name="$store.state.animation ? 'fade' : ''" appear>
-	<div class="nvlagfpb" @contextmenu.prevent.stop="() => {}">
+	<div class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
 		<MkMenu :items="items" class="_popup _shadow" :align="'left'" @close="$emit('closed')"/>
 	</div>
 </transition>
@@ -10,6 +10,7 @@
 import { defineComponent } from 'vue';
 import contains from '@/scripts/contains';
 import MkMenu from './menu.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -29,6 +30,11 @@ export default defineComponent({
 		},
 	},
 	emits: ['closed'],
+	data() {
+		return {
+			zIndex: os.claimZIndex('high'),
+		};
+	},
 	computed: {
 		keymap(): any {
 			return {
@@ -82,7 +88,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 .nvlagfpb {
 	position: absolute;
-	z-index: 65535;
 }
 
 .fade-enter-active, .fade-leave-active {

packages/client/src/components/ui/modal.vue

@@ -49,10 +49,10 @@ export default defineComponent({
 			type: String,
 			default: 'auto',
 		},
-		front: {
-			type: Boolean,
+		zPriority: {
+			type: String as PropType<'low' | 'middle' | 'high'>,
 			required: false,
-			default: false,
+			default: 'low',
 		},
 		noOverlap: {
 			type: Boolean,
@@ -74,7 +74,7 @@ export default defineComponent({
 		const transformOrigin = ref('center');
 		const showing = ref(true);
 		const content = ref<HTMLElement>();
-		const zIndex = os.claimZIndex(props.front);
+		const zIndex = os.claimZIndex(props.zPriority);
 		const type = computed(() => {
 			if (props.preferType === 'auto') {
 				if (isTouchUsing && window.innerWidth < 500 && window.innerHeight < 1000) {

packages/client/src/components/ui/popup-menu.vue

@@ -1,5 +1,5 @@
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :src="src" :transparent-bg="true" @click="$refs.modal.close()" @closed="$emit('closed')">
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="$refs.modal.close()" @closed="$emit('closed')">
 	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq _popup _shadow" :class="{ drawer: type === 'drawer' }" @close="$refs.modal.close()"/>
 </MkModal>
 </template>

packages/client/src/components/ui/tooltip.vue

@@ -34,7 +34,7 @@ export default defineComponent({
 
 	setup(props, context) {
 		const el = ref<HTMLElement>();
-		const zIndex = os.claimZIndex(true);
+		const zIndex = os.claimZIndex('high');
 
 		const setPosition = () => {
 			if (el.value == null) return;

packages/client/src/components/ui/window.vue

@@ -155,7 +155,7 @@ export default defineComponent({
 
 		// 最前面へ移動
 		top() {
-			(this.$el as any).style.zIndex = os.claimZIndex(this.front);
+			(this.$el as any).style.zIndex = os.claimZIndex(this.front ? 'middle' : 'low');
 		},
 
 		onBodyMousedown() {