feat(mod-ui): convert install button to DropMenu

Author: clansty

MaiChartManager/Front/src/views/ModManager/ModInstallDropdown.tsx

@@ -1,50 +1,97 @@
-import { defineComponent, ref } from 'vue';
-
+import { defineComponent, ref, computed } from 'vue';
 import { globalCapture, modInfo, updateModInfo } from "@/store/refs";
 import { modUpdateInfo } from "@/store/appUpdate";
 import api from "@/client/api";
-import { latestVersion } from './shouldShowUpdateController';
 import { useI18n } from 'vue-i18n';
-import { Button } from '@munet/ui';
+import { Button, DropMenu } from '@munet/ui';
 import { useAsyncState } from '@vueuse/core';
 import { updateAquaMaiConfig } from './refs';
+
 export default defineComponent({
   setup() {
-    const showAquaMaiInstallDone = ref(false)
+    const showDone = ref(false);
     const { t } = useI18n();
-    const { isLoading: installingAquaMai, execute: installAquaMai } = useAsyncState(async () => {
-      const type = latestVersion.value.type;
-      console.log(type)
-      // 但是你根本看不到这个加载图标，因为太快了
-      if (type === 'builtin') {
-        await api.InstallAquaMai()
-      } else {
-        const version = modUpdateInfo.value?.find(it => it.type === type);
-        if (!version) {
-          throw new Error(t('mod.versionNotFound'));
-        }
-        const urls = [version.url!];
-        if (version.url2) {
-          urls.push(version.url2);
+    const installType = ref<'builtin' | 'slow' | 'ci' | 'mumod'>('slow');
+    
+    const { isLoading: installing, execute: doInstallAsync } = useAsyncState(
+      async () => {
+        const type = installType.value;
+        if (type === 'mumod') {
+          await api.InstallMuMod();
+        } else if (type === 'builtin') {
+          await api.InstallAquaMai();
+        } else {
+          const version = modUpdateInfo.value?.find(it => it.type === type);
+          if (!version) throw new Error(t('mod.versionNotFound'));
+          const urls = [version.url!];
+          if (version.url2) urls.push(version.url2);
+          await api.InstallAquaMaiOnline({ type, urls, sign: version.sign });
         }
-        await api.InstallAquaMaiOnline({
-          type,
-          urls,
-          sign: version.sign,
-        });
+        await updateModInfo();
+        await updateAquaMaiConfig();
+        showDone.value = true;
+        setTimeout(() => (showDone.value = false), 3000);
+      },
+      undefined,
+      {
+        immediate: false,
+        onError: (e: any) => globalCapture(e, t('mod.installFailed')),
       }
-      await updateModInfo()
-      await updateAquaMaiConfig()
-      showAquaMaiInstallDone.value = true
-      setTimeout(() => showAquaMaiInstallDone.value = false, 3000);
-    }, undefined, {
-      immediate: false,
-      onError: (e: any) => globalCapture(e, t('mod.installFailed')),
-    })
-
-    return () =>
-      <Button ing={installingAquaMai.value} onClick={() => installAquaMai()}>
-        {showAquaMaiInstallDone.value ? <span class="i-material-symbols-done" /> : modInfo.value?.aquaMaiInstalled ? t('mod.reinstallUpdate') : t('mod.install')}
-      </Button>
+    );
+    
+    const doInstall = (type: 'builtin' | 'slow' | 'ci' | 'mumod') => {
+      installType.value = type;
+      doInstallAsync(0);
+    };
+    
+    const formatVersionDesc = (type: string) => {
+      const entry = modUpdateInfo.value?.find(it => it.type === type);
+      if (!entry?.version) return '';
+      const date = entry.createdAt ? new Date(entry.createdAt).toLocaleDateString() : '';
+      return date ? `v${entry.version} · ${date}` : `v${entry.version}`;
+    };
+    
+    const installChannel = (type: 'slow' | 'ci') => {
+      const hasOnlineVersion = modUpdateInfo.value?.find(it => it.type === type && it.url);
+      if (hasOnlineVersion) {
+        doInstall(type);
+      } else {
+        doInstall('builtin');
+      }
+    };
+    
+    const options = computed(() => [
+      {
+        label: t('mod.stableChannel'),
+        desc: formatVersionDesc('slow'),
+        action: () => installChannel('slow'),
+      },
+      {
+        label: t('mod.fastChannel'),
+        desc: formatVersionDesc('ci'),
+        action: () => installChannel('ci'),
+      },
+      {
+        label: 'MuMod',
+        desc: t('mod.mumodDesc'),
+        action: () => doInstall('mumod'),
+      },
+    ]);
+    
+    return () => (
+      <DropMenu options={options.value} align="right">
+        {{
+          trigger: (onClick: any) => (
+            <Button ing={installing.value} onClick={onClick}>
+              {showDone.value
+                ? <span class="i-material-symbols-done" />
+                : modInfo.value?.aquaMaiInstalled || modInfo.value?.muModInstalled
+                  ? t('mod.reinstallUpdate')
+                  : t('mod.install')}
+            </Button>
+          ),
+        }}
+      </DropMenu>
+    );
   },
 });

MaiChartManager/Front/src/views/Settings/AquaMaiSection.tsx

@@ -1,13 +1,15 @@
 import { defineComponent } from "vue";
 import { Radio } from "@munet/ui";
 import { useI18n } from "vue-i18n";
-import { selectedChannel } from "@/views/ModManager/shouldShowUpdateController";
+import { selectedChannel, isMuModMode } from "@/views/ModManager/shouldShowUpdateController";
 
 export default defineComponent({
   setup() {
     const { t } = useI18n();
 
-    return () => (
+    return () => {
+      if (isMuModMode.value) return null;
+      return (
       <div class="mb-6">
         <div class="text-lg font-semibold mb-3 text-[var(--link-color)]">AquaMai</div>
         <div class="rounded-xl bg-white/60 p-4 flex flex-col gap-4 border border-gray-200 border-solid">
@@ -23,6 +25,7 @@ export default defineComponent({
           </div>
         </div>
       </div>
-    );
+      );
+    };
   },
 });