辅助窗口部分选项提供一个 popover

Hanxven · Sep 7, 2024 · e147e63 · e147e63
1 parent e246c40
commit e147e63
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 50 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## 新增
 
-- 带有英雄选择台的模式，提供了一个设置项，将可以始终选择优先级列表最前面的英雄。([#87](https://github.com/Hanxven/LeagueAkari/issues/87))
+- [UNTESTED] 带有英雄选择台的模式，提供了一个设置项，将可以始终选择优先级列表最前面的英雄。([#87](https://github.com/Hanxven/LeagueAkari/issues/87))
 
 - 战绩页面的标签页现在可以通过鼠标中键关闭。([#85](https://github.com/Hanxven/LeagueAkari/pull/85))
 

diff --git a/src/main/akari-ipc/mobx-based-basic-module.ts b/src/main/akari-ipc/mobx-based-basic-module.ts
@@ -18,7 +18,7 @@ type StateSetter = (
 
 interface RegisteredState {
   object: object
-  props: Map<string, { toRaw: boolean }>
+  props: Map<string, { raw: boolean }>
 }
 
 export type RegisteredSettingHandler = (
@@ -87,7 +87,7 @@ export class MobxBasedBasicModule extends LeagueAkariModule {
       return Array.from(this._registeredStates.get(stateId)!.props.entries()).map(
         ([path, config]) => ({
           path,
-          toRaw: config.toRaw
+          raw: config.raw
         })
       )
     })
@@ -104,7 +104,7 @@ export class MobxBasedBasicModule extends LeagueAkariModule {
       const item = this._registeredStates.get(stateId)!
       const prop = item.props.get(propPath)!
 
-      return prop.toRaw ? toJS(get(item.object, propPath)) : get(item.object, propPath)
+      return prop.raw ? toJS(get(item.object, propPath)) : get(item.object, propPath)
     })
 
     this.onCall('set-state-prop', (stateId: string, propPath: string, value: any) => {
@@ -202,18 +202,18 @@ export class MobxBasedBasicModule extends LeagueAkariModule {
    * @param resName 资源名称
    * @param getter 资源 getter
    */
-  getterSync(resName: string, getter: SimpleStateGetter, toRaw = false) {
+  getterSync(resName: string, getter: SimpleStateGetter, raw = false) {
     this.reaction(getter, (newValue) => {
-      this.sendEvent(`update-getter/${resName}`, toRaw ? toJS(newValue) : newValue)
+      this.sendEvent(`update-getter/${resName}`, raw ? toJS(newValue) : newValue)
     })
-    this.onCall(`get-getter/${resName}`, () => (toRaw ? toJS(getter()) : getter()))
+    this.onCall(`get-getter/${resName}`, () => (raw ? toJS(getter()) : getter()))
   }
 
   propSync<T extends object>(
     stateId: string,
     obj: T,
     propPath: Paths<T> | Paths<T>[],
-    toRaw = false
+    raw = false
   ) {
     if (!this._registeredStates.has(stateId)) {
       this._registeredStates.set(stateId, {
@@ -235,16 +235,16 @@ export class MobxBasedBasicModule extends LeagueAkariModule {
         throw new Error(`Prop path ${path} already registered for ${stateId}`)
       }
 
-      config.props.set(path, { toRaw })
+      config.props.set(path, { raw })
 
       this.reaction(
         () => get(obj, path),
         (newValue) => {
           this.sendEvent(
             `update-state-prop/${stateId}`,
             path,
-            toRaw ? toJS(newValue) : newValue,
-            toRaw
+            raw ? toJS(newValue) : newValue,
+            raw
           )
         }
       )
@@ -256,15 +256,15 @@ export class MobxBasedBasicModule extends LeagueAkariModule {
    * @param stateId 状态 ID
    * @param propPath 属性路径
    * @param value 新值
-   * @param toRaw 是否转换为普通对象
+   * @param raw 是否转换为普通对象
    */
   propUpdateEvent<T extends object = any>(
     stateId: string,
     propPath: Paths<T>,
     value: any,
-    toRaw = false
+    raw = false
   ) {
-    this.sendEvent(`update-state-prop/${stateId}`, propPath, toRaw ? toJS(value) : value, toRaw)
+    this.sendEvent(`update-state-prop/${stateId}`, propPath, raw ? toJS(value) : value, raw)
   }
 
   /**

diff --git a/src/renderer-shared/akari-ipc/state-sync-module.ts b/src/renderer-shared/akari-ipc/state-sync-module.ts
@@ -22,14 +22,14 @@ export class StateSyncModule extends LeagueAkariRendererModule {
     try {
       const configList = (await this.call('get-state-props', stateId)) as {
         path: string
-        toRaw: boolean
+        raw: boolean
       }[]
       const jobs = configList
         .map((config) => {
           return async () => {
             try {
               const value = await this.call(`get-state-prop`, stateId, config.path)
-              set(obj, config.path, config.toRaw ? markRaw(value) : value)
+              set(obj, config.path, config.raw ? markRaw(value) : value)
             } catch (error) {
               throw new Error(
                 `Failed to get initial state of ${config} from ${stateId}: ${(error as Error).message}`
@@ -39,10 +39,10 @@ export class StateSyncModule extends LeagueAkariRendererModule {
         })
         .map((job) => job())
 
-      this.onEvent(`update-state-prop/${stateId}`, (path: string, value, toRaw: boolean) => {
+      this.onEvent(`update-state-prop/${stateId}`, (path: string, value, raw: boolean) => {
         // FOR DEBUGGING ONLY: uncomment the following line to see state changes
         // console.log(this.id, stateId, path, value)
-        set(obj, path, toRaw ? markRaw(value) : value)
+        set(obj, path, raw ? markRaw(value) : value)
       })
 
       await Promise.all(jobs)

diff --git a/src/renderer-shared/components/CopyableText.vue b/src/renderer-shared/components/CopyableText.vue
@@ -16,7 +16,8 @@ import { useSlots } from 'vue'
 const {
   showMessage = true,
   prefix = '',
-  suffix = ''
+  suffix = '',
+  text: propText
 } = defineProps<{
   text?: string | number
   showMessage?: boolean
@@ -35,8 +36,8 @@ const message = useMessage()
 const handleCopy = async () => {
   let text = ''
   if (slots.default) {
-    if (text) {
-      text = text.toString()
+    if (propText) {
+      text = propText.toString()
     } else {
       const nodes = slots.default()
       if (nodes[0] && typeof nodes[0].children === 'string') {

diff --git a/src/renderer/src-auxiliary-window/components/LoungeOperations.vue b/src/renderer/src-auxiliary-window/components/LoungeOperations.vue
@@ -12,27 +12,73 @@
         @update:value="(val) => agfm.setAutoAcceptEnabled(val)"
       />
     </NFlex>
-    <NFlex align="center" class="control-item">
-      <span class="label" style="flex: 1"
-        >自动匹配 ({{
-          isCustomGame ? '模式不适用' : formatDelayText(agf.settings.autoMatchmakingDelaySeconds)
-        }})</span
-      >
-      <NSwitch
-        size="small"
-        :value="agf.settings.autoMatchmakingEnabled"
-        @update:value="(val) => agfm.setAutoMatchmakingEnabled(val)"
-      />
-    </NFlex>
+    <NPopover :show-arrow="false">
+      <template #trigger>
+        <NFlex align="center" class="control-item">
+          <div style="flex: 1; display: flex; justify-content: flex-start; align-items: center">
+            <span class="label"
+              >自动匹配 ({{
+                isCustomGame
+                  ? '模式不适用'
+                  : formatDelayText(agf.settings.autoMatchmakingDelaySeconds)
+              }})</span
+            >
+            <NIcon class="icon" ref="auto-matchmaking">
+              <ExpandMoreSharpIcon />
+            </NIcon>
+          </div>
+          <NSwitch
+            size="small"
+            :value="agf.settings.autoMatchmakingEnabled"
+            @update:value="(val) => agfm.setAutoMatchmakingEnabled(val)"
+          />
+        </NFlex>
+      </template>
+      <NFlex class="more" vertical>
+        <NFlex align="center" class="control-item">
+          <span class="label" style="flex: 1">最低人数</span>
+          <NInputNumber
+            :value="agf.settings.autoMatchmakingMinimumMembers"
+            @update:value="(val) => am.setAutoMatchmakingMinimumMembers(val || 1)"
+            :min="1"
+            :max="99"
+            size="tiny"
+            style="width: 80px"
+          />
+        </NFlex>
+        <NFlex align="center" class="control-item">
+          <span class="label" style="flex: 1">匹配前等待时间</span>
+          <NInputNumber
+            :value="agf.settings.autoMatchmakingDelaySeconds"
+            @update:value="(value) => am.setAutoMatchmakingDelaySeconds(value || 0)"
+            placeholder="秒"
+            :min="0"
+            size="tiny"
+            style="width: 80px"
+          />
+        </NFlex>
+        <NFlex align="center" class="control-item">
+          <span class="label" style="flex: 1">等待邀请中成员</span>
+          <NSwitch
+            :value="agf.settings.autoMatchmakingWaitForInvitees"
+            @update:value="(val) => am.setAutoMatchmakingWaitForInvitees(val)"
+            size="small"
+          />
+        </NFlex>
+      </NFlex>
+    </NPopover>
   </NCard>
 </template>
 
 <script setup lang="ts">
 import { autoGameflowRendererModule as agfm } from '@renderer-shared/modules/auto-gameflow'
+import { autoGameflowRendererModule as am } from '@renderer-shared/modules/auto-gameflow'
 import { useAutoGameflowStore } from '@renderer-shared/modules/auto-gameflow/store'
 import { useGameflowStore } from '@renderer-shared/modules/lcu-state-sync/gameflow'
-import { NCard, NFlex, NSwitch } from 'naive-ui'
-import { computed } from 'vue'
+import { ExpandMoreSharp as ExpandMoreSharpIcon } from '@vicons/material'
+import { useElementHover } from '@vueuse/core'
+import { NCard, NFlex, NIcon, NInputNumber, NPopover, NSwitch } from 'naive-ui'
+import { computed, useTemplateRef, watchEffect } from 'vue'
 
 const agf = useAutoGameflowStore()
 const gameflow = useGameflowStore()
@@ -51,12 +97,30 @@ const formatDelayText = (d: number) => {
   }
   return `${d.toFixed(1)} s`
 }
+
+const mEl = useTemplateRef('auto-matchmaking')
+const isMElHover = useElementHover(() => mEl.value?.$el)
+
+watchEffect(() => {
+  console.log(isMElHover.value)
+})
 </script>
 
 <style scoped lang="less">
 .label {
-  font-size: 10px;
+  font-size: 11px;
+  color: rgb(178, 178, 178);
+}
+
+.icon {
+  font-size: 18px;
   color: rgb(178, 178, 178);
+  margin-left: 4px;
+}
+
+.more {
+  font-size: 11px;
+  width: 82vw;
 }
 
 .control-item {
@@ -67,4 +131,3 @@ const formatDelayText = (d: number) => {
   }
 }
 </style>
-@renderer-shared/modules/auto-gameflow@renderer-shared/modules/auto-gameflow/store@renderer-shared/modules/lcu-state-sync/gameflow
diff --git a/src/renderer/src-main-window/views/automation/AutoGameflow.vue b/src/renderer/src-main-window/views/automation/AutoGameflow.vue
@@ -109,18 +109,6 @@
             style="width: 80px"
           />
         </ControlItem>
-        <ControlItem
-          class="control-item-margin"
-          label="等待邀请中成员"
-          label-description="自动开启匹配将等待所有被邀请的玩家做出回应"
-          :label-width="200"
-        >
-          <NSwitch
-            :value="agf.settings.autoMatchmakingWaitForInvitees"
-            @update:value="(val) => am.setAutoMatchmakingWaitForInvitees(val)"
-            size="small"
-          />
-        </ControlItem>
         <ControlItem
           class="control-item-margin"
           label="匹配前等待时间 (s)"
@@ -136,6 +124,18 @@
             size="small"
           />
         </ControlItem>
+        <ControlItem
+          class="control-item-margin"
+          label="等待邀请中成员"
+          label-description="自动开启匹配将等待所有被邀请的玩家做出回应"
+          :label-width="200"
+        >
+          <NSwitch
+            :value="agf.settings.autoMatchmakingWaitForInvitees"
+            @update:value="(val) => am.setAutoMatchmakingWaitForInvitees(val)"
+            size="small"
+          />
+        </ControlItem>
         <ControlItem
           class="control-item-margin"
           label="停止匹配策略"

diff --git a/src/renderer/src-main-window/views/match-history/widgets/SpectateStatus.vue b/src/renderer/src-main-window/views/match-history/widgets/SpectateStatus.vue
@@ -12,7 +12,7 @@ const props = defineProps<{
 }>()
 
 watchEffect(async () => {
-  const res = await edsm.sgp.getSpectatorGameflow('d947ea9e-905f-57f0-8fe2-a38eabe070c0')
+  const res = await edsm.sgp.getSpectatorGameflow('58d32d08-aede-5bcf-adf3-c218c3025f62')
   console.log(res)
 })