Merge pull request #74 from HoraceHuang-ui/horace_dev

2.5.6

.gitignore

@@ -23,8 +23,3 @@ release
 *.njsproj
 *.sln
 *.sw?
-
-# lockfile
-package-lock.json
-pnpm-lock.yaml
-yarn.lock

components.d.ts

@@ -17,8 +17,10 @@ declare module 'vue' {
     MyCarousel: typeof import('./src/components/MyCarousel.vue')['default']
     MyCheckbox: typeof import('./src/components/MyCheckbox.vue')['default']
     MyDropdown: typeof import('./src/components/MyDropdown.vue')['default']
+    MySelect: typeof import('./src/components/MySelect.vue')['default']
     MyTabs: typeof import('./src/components/MyTabs.vue')['default']
     MyTag: typeof import('./src/components/MyTag.vue')['default']
+    MyTextSwitch: typeof import('./src/components/MyTextSwitch.vue')['default']
     MyTooltip: typeof import('./src/components/MyTooltip.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

package.json

@@ -1,6 +1,6 @@
 {
   "name": "miXeD",
-  "version": "2.5.5",
+  "version": "2.5.6",
   "main": "dist-electron/main/index.js",
   "description": "All-in-one miHoYo game launcher",
   "author": "HoraceHYY <[email protected]>",

src/components/LauncherPosts.vue

@@ -12,7 +12,7 @@ defineProps({
 })
 
 const tabsModel = ref(0)
-const keys = ['POST_TYPE_INFO', 'POST_TYPE_ACTIVITY', 'POST_TYPE_ANNOUNCE']
+const keys = ['POST_TYPE_ACTIVITY', 'POST_TYPE_ANNOUNCE', 'POST_TYPE_INFO']
 const tabs = translateMultiple(keys)
 
 const openLink = (url: string) => {

src/components/MyDropdown.vue

@@ -15,11 +15,19 @@ const props = defineProps({
   },
   width: {
     type: String,
-    default: '100%',
+    default: 'max-content',
+  },
+  selected: {
+    type: Number,
+    default: -1,
+  },
+  middle: {
+    type: Boolean,
+    default: false,
   },
 })
 
-defineEmits(['command'])
+const emit = defineEmits(['command'])
 
 const wrapperStyles: Record<string, any> = {
   top: {
@@ -46,17 +54,24 @@ const wrapperStyles: Record<string, any> = {
 }
 
 const showMenu = ref(false)
+const wrapperRef = ref<HTMLElement>()
+const dropdownRef = ref<HTMLElement>()
 let timer: NodeJS.Timeout | number | undefined = undefined
 
-const transformX = computed(() => {
+const transform = computed(() => {
+  if (!wrapperRef.value || !dropdownRef.value) return {}
   if (props.placement === 'top' || props.placement === 'bottom') {
-    return {
-      transform: 'translateX(-50%)',
-    }
+    return wrapperRef.value.clientWidth >= dropdownRef.value.clientWidth
+      ? {}
+      : {
+          transform: `translateX(-${((dropdownRef.value.clientWidth - wrapperRef.value.clientWidth) / 2).toFixed(0)}px)`,
+        }
   } else {
-    return {
-      transform: 'translateY(-50%)',
-    }
+    return wrapperRef.value.clientHeight >= dropdownRef.value.clientHeight
+      ? {}
+      : {
+          transform: `translateY(-${((dropdownRef.value.clientHeight - wrapperRef.value.clientHeight) / 2).toFixed(0)}px)`,
+        }
   }
 })
 
@@ -78,31 +93,37 @@ const onMouseEnter = () => {
 const onMouseLeave = () => {
   timer = setTimeout(hideMenu, 500)
 }
+
+const sendCommand = (idx: number) => {
+  emit('command', idx)
+  hideMenu()
+}
 </script>
 
 <template>
   <div class="relative">
-    <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+    <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" ref="wrapperRef">
       <slot />
     </div>
 
     <Transition name="fade">
       <div
-        class="absolute min-w-full min-h-full overflow-visible flex flex-row z-50"
+        class="absolute min-w-full overflow-visible flex flex-row z-50"
         :style="{ ...wrapperStyles[placement], width: width }"
         v-if="showMenu"
+        ref="dropdownRef"
       >
         <div
-          class="p-1 bg-white rounded-xl w-fit h-fit min-w-full text-center shadow-md"
-          :style="transformX"
+          class="px-1 py-0.5 bg-white rounded-xl w-fit h-fit min-w-full text-center text-nowrap shadow-md"
+          :style="middle ? transform : undefined"
           @mouseenter="onMouseEnter"
           @mouseleave="onMouseLeave"
         >
           <div
             v-for="(item, idx) in items"
-            class="py-1.5 rounded-lg cursor-default hover:bg-yellow-100 hover:text-yellow-600 active:bg-yellow-400 active:text-yellow-800 transition-all"
-            :class="itemClass"
-            @click="$emit('command', idx)"
+            class="py-1 my-0.5 rounded-lg cursor-default hover:bg-yellow-100 hover:text-yellow-600 active:bg-yellow-400 active:text-yellow-800 transition-all"
+            :class="{ itemClass, 'item-selected': selected == idx }"
+            @click="sendCommand(idx)"
             :key="idx"
           >
             {{ item }}
@@ -114,6 +135,10 @@ const onMouseLeave = () => {
 </template>
 
 <style scoped>
+.item-selected {
+  @apply bg-yellow-100 text-yellow-600;
+}
+
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;

src/components/MySelect.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { PropType } from 'vue'
+
+const props = defineProps({
+  items: {
+    type: Array as PropType<string[]>,
+    required: true,
+  },
+  selectorClass: {
+    type: String,
+  },
+  selectorStyle: {
+    type: Object as PropType<Record<string, any>>,
+  },
+  itemClass: {
+    type: String,
+  },
+  modelValue: {
+    type: Number,
+    default: -1,
+  },
+  middle: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const selectionChange = (idx: number) => {
+  emit('update:modelValue', idx)
+  if (idx === props.modelValue) {
+    return
+  }
+  emit('change', idx)
+}
+</script>
+
+<template>
+  <MyDropdown
+    :items="items"
+    :item-class="itemClass"
+    :selected="modelValue"
+    :middle="middle"
+    @command="selectionChange"
+  >
+    <div
+      class="w-fit rounded-full py-1 px-3 flex flex-row justify-between"
+      :class="selectorClass"
+      :style="selectorStyle"
+    >
+      <div class="mr-4">{{ modelValue == -1 ? '' : items[modelValue] }}</div>
+      <i class="bi bi-chevron-down" />
+    </div>
+  </MyDropdown>
+</template>
+
+<style scoped></style>

src/components/MyTextSwitch.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+  },
+  leftText: {
+    type: String,
+    required: true,
+  },
+  rightText: {
+    type: String,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const max = (a: number, b: number) => (a > b ? a : b)
+
+const leftRef = ref<HTMLElement>()
+const rightRef = ref<HTMLElement>()
+
+const unitWidth = computed(() => {
+  if (!leftRef.value || !rightRef.value) return 0
+  return max(leftRef.value.scrollWidth, rightRef.value.scrollWidth) + 10
+})
+
+const sliderTransform = computed(() => {
+  return {
+    transform: props.modelValue
+      ? 'translateX(0)'
+      : `translateX(calc(${unitWidth.value}px + 5px))`,
+  }
+})
+
+watch(unitWidth, () => {
+  console.log('width: ' + unitWidth.value.toString())
+})
+
+const switchState = () => {
+  console.log('width: ' + unitWidth.value.toString())
+  emit('update:modelValue', !props.modelValue)
+}
+</script>
+
+<template>
+  <div
+    class="ml-3 rounded-full flex flex-row py-1 bg-white relative cursor-pointer"
+    :style="{ width: `calc(${unitWidth}px * 2 + 10px)` }"
+    @click="switchState"
+  >
+    <div
+      class="rounded-full bg-blue-500 absolute top-0 bottom-0 z-0 transition-all"
+      :style="{ width: `calc(${unitWidth}px + 5px)`, ...sliderTransform }"
+    ></div>
+    <div
+      ref="leftRef"
+      class="rounded-full absolute z-10 left-0 text-center transition-all text-nowrap"
+      :class="{ 'text-white': modelValue }"
+      :style="{ width: `${unitWidth}px` }"
+    >
+      {{ leftText }}
+    </div>
+    <div
+      ref="rightRef"
+      class="rounded-full absolute z-10 right-0 text-center transition-all text-nowrap"
+      :class="{ 'text-white': !modelValue }"
+      :style="{ width: `${unitWidth}px` }"
+    >
+      {{ rightText }}
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/components/MyTooltip.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { PropType, ref } from 'vue'
+import { computed, PropType, ref } from 'vue'
 
-defineProps({
+const props = defineProps({
   content: {
     type: String,
     required: false,
@@ -14,6 +14,10 @@ defineProps({
     type: String,
     default: '300px',
   },
+  middle: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const wrapperStyles: Record<string, any> = {
@@ -41,8 +45,27 @@ const wrapperStyles: Record<string, any> = {
 }
 
 const showTooltip = ref(false)
+const wrapperRef = ref<HTMLElement>()
+const dropdownRef = ref<HTMLElement>()
 let timer: NodeJS.Timeout | number | undefined = undefined
 
+const transform = computed(() => {
+  if (!wrapperRef.value || !dropdownRef.value) return {}
+  if (props.placement === 'top' || props.placement === 'bottom') {
+    return wrapperRef.value.clientWidth >= dropdownRef.value.clientWidth
+      ? {}
+      : {
+          transform: `translateX(-${((dropdownRef.value.clientWidth - wrapperRef.value.clientWidth) / 2).toFixed(0)}px)`,
+        }
+  } else {
+    return wrapperRef.value.clientHeight >= dropdownRef.value.clientHeight
+      ? {}
+      : {
+          transform: `translateY(-${((dropdownRef.value.clientHeight - wrapperRef.value.clientHeight) / 2).toFixed(0)}px)`,
+        }
+  }
+})
+
 const hideTooltip = () => {
   showTooltip.value = false
   clearTimeout(timer)
@@ -65,18 +88,20 @@ const onMouseLeave = () => {
 
 <template>
   <div class="relative">
-    <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+    <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" ref="wrapperRef">
       <slot />
     </div>
 
     <Transition name="fade">
       <div
-        class="absolute min-w-full min-h-full overflow-visible flex flex-row z-50"
-        :style="{ ...wrapperStyles[placement], width: maxWidth }"
+        class="absolute min-w-full min-h-full w-max overflow-visible flex flex-row z-50"
+        :style="{ ...wrapperStyles[placement], maxWidth: maxWidth }"
         v-if="showTooltip"
       >
         <div
           class="p-2 bg-opacity-80 bg-black rounded-lg text-gray-100 w-fit h-fit text-left"
+          ref="dropdownRef"
+          :style="middle ? transform : undefined"
           @mouseenter="onMouseEnter"
           @mouseleave="onMouseLeave"
         >

src/components/TopHeader.vue

@@ -110,21 +110,21 @@ const winMin = () => {
       />
     </div>
     <div class="example focus drag" style="width: 35vw">
-      <div class="traffic-lights no-drag mt-2">
-        <button
+      <div class="traffic-lights no-drag mt-2 flex flex-row py-3">
+        <div
           class="traffic-light traffic-light-maximize mx-1"
           id="maximize"
-        ></button>
-        <button
+        ></div>
+        <div
           class="traffic-light traffic-light-minimize mx-1"
           id="minimize"
           @click="winMin"
-        ></button>
-        <button
+        ></div>
+        <div
           class="traffic-light traffic-light-close mx-1"
           id="close"
           @click="winClose"
-        ></button>
+        ></div>
       </div>
     </div>
   </div>