feat(download): reset download tab state everytime

Author: SkyBird233

src/pages/download/DownloadIndex.vue

@@ -3,12 +3,11 @@ import CategorySecond from '../../components/CategorySecond.vue';
 import TitleComponent from './components/TitleComponent.vue';
 import DownloadButtonGroup from './components/DownloadButtonGroup.vue';
 import WslDetails from './components/WslDetails.vue';
-import { ref, useTemplateRef , computed } from 'vue';
+import { ref, useTemplateRef, computed } from 'vue';
 import DownloadButton from './components/DownloadButton.vue';
 import { useRoute } from 'vue-router';
 import useClipboard from 'vue-clipboard3';
 import { ElMessage, ElDialog } from 'element-plus';
-import { useDownloadPageStore } from '../../stores/download-page.js';
 import { highlightElement } from '../../utils/animation.ts';
 import { requestGetJson, useHighlightWatch } from '../../utils/utils.js';
 
@@ -27,7 +26,6 @@ const archGroupInfo = {
 };
 
 const route = useRoute();
-const downloadPageStore = useDownloadPageStore();
 //#endregion
 
 //#region Clipboard
@@ -507,14 +505,15 @@ const omaInstallScript = 'curl -sSf https://repo.aosc.io/get-oma.sh | sudo sh';
           description="适用于基于 Apple 芯片的 Mac 设备"
           :navigation-list="appleSiliconNavigationList"
           small-title />
-        <div
-          class="flex flex-col self-end [&_.theme-bg-color-secondary-primary]:py-2">
+        <div class="self-end">
           <DownloadButton
             arch-name="下载"
-            @click="
-              downloadPageStore.dialogTabArm64 = 'apple-silicon-instruction';
-              downloadPageStore.dialogArm64State = true;
-            " />
+            :popover-data="
+              antong1List.filter((i) => i.title === 'arm64')[0].popoverData
+            "
+            :isa-info="antong1List.filter((i) => i.title === 'arm64')[0]"
+            :sources="sources"
+            initial-dialog-tab="apple-silicon-instruction" />
         </div>
       </div>
     </div>

src/pages/download/components/DownloadButton.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue';
 import DownloadDetails from './DownloadDetails.vue';
-import { useDownloadPageStore } from '../../../stores/download-page.js';
 import { useRouter } from 'vue-router';
 
 const props = defineProps({
@@ -41,47 +40,35 @@ const props = defineProps({
   disabled: {
     type: Boolean,
     default: false
+  },
+  initialDialogTab: {
+    type: String,
+    default: 'installer'
   }
 });
 
 const router = useRouter();
 const dialogState = ref(false);
-const downloadPageStore = useDownloadPageStore();
 const archNameBrackets = props.archName.match(/^(.*?)([（(].*[）)])?$/);
 
 const osName = '安同 OS'; // TODO: dynamic OS name (AOSC OS / Afterglow OS)
 const dialogTitle = computed(
   () => `下载详情：${osName} - ${props.isaInfo?.zhLabel}`
 );
 
-const setDialogState = (state) => {
-  if (props.isaInfo?.title === 'arm64') {
-    downloadPageStore.dialogArm64State = state;
+const onClick = () => {
+  if (props.url) {
+    router.push(props.url);
   } else {
-    dialogState.value = state;
+    dialogState.value = true;
   }
 };
-
-const dialogModel = computed({
-  get() {
-    return props.isaInfo?.title === 'arm64'
-      ? downloadPageStore.dialogArm64State
-      : dialogState.value;
-  },
-  set(value) {
-    if (props.isaInfo?.title === 'arm64') {
-      downloadPageStore.dialogArm64State = value;
-    } else {
-      dialogState.value = value;
-    }
-  }
-});
 </script>
 
 <template>
   <div>
     <el-popover
-      :disabled="popoverData === undefined || dialogModel"
+      :disabled="popoverData === undefined || dialogState"
       :placement="popoverData?.placement"
       :hide-after="0"
       trigger="hover"
@@ -94,9 +81,7 @@ const dialogModel = computed({
             backgroundColor: buttonColor,
             width: $props.width + 'px'
           }"
-          @click="
-            url?.startsWith('#') ? router.push(url) : setDialogState(true)
-          "
+          @click="onClick"
           class="theme-bg-color-secondary-primary h-full grow hover:no-underline cursor-pointer py-2 overflow-hidden">
           <slot></slot>
           <span class="first-line-p">{{ archNameBrackets[1] }}</span>
@@ -107,14 +92,17 @@ const dialogModel = computed({
 
     <el-dialog
       v-if="!disabled && popoverData && isaInfo"
-      v-model="dialogModel"
+      v-model="dialogState"
       width="80%"
+      destroy-on-close
       :title="dialogTitle">
       <DownloadDetails
         :arch="archName"
         :content="popoverData.content"
         :isa-info="isaInfo"
-        :sources="sources" />
+        :sources="sources"
+        :initial-tab="initialDialogTab"
+      />
     </el-dialog>
   </div>
 </template>

src/pages/download/components/DownloadDetails.vue

@@ -1,9 +1,8 @@
 <script setup>
-import { computed } from 'vue';
+import { ref } from 'vue';
 import { ElTabs, ElTabPane } from 'element-plus';
 import DownloadDetailsMain from './DownloadDetailsMain.vue';
 import DownloadDetailsAppleSiliconInstruction from './DownloadDetailsAppleSiliconInstruction.vue';
-import { useDownloadPageStore } from '../../../stores/download-page.js';
 
 const props = defineProps({
   isaInfo: {
@@ -22,27 +21,18 @@ const props = defineProps({
   sources: {
     type: [{ name: String, loc: String, url: String }],
     required: true
-  }
-});
-
-const downloadPageStore = useDownloadPageStore();
-const activeTab = computed({
-  get() {
-    return props.isaInfo.title === 'arm64'
-      ? downloadPageStore.dialogTabArm64
-      : downloadPageStore.dialogTab;
   },
-  set(value) {
-    if (['installer', 'livekit'].includes(value)) {
-      downloadPageStore.dialogTab = value;
-    }
-    downloadPageStore.dialogTabArm64 = value;
+  initialTab: {
+    type: String,
+    default: 'installer'
   }
 });
+
+const dialogTab = ref(props.initialTab);
 </script>
 
 <template>
-  <el-tabs v-model="activeTab" class="*:px-2 pb-2">
+  <el-tabs v-model="dialogTab" class="*:px-2 pb-2">
     <el-tab-pane
       :disabled="!isaInfo.installer"
       label="系统安装盘"
@@ -78,15 +68,7 @@ const activeTab = computed({
       disabled>
       <!-- TODO -->
     </el-tab-pane>
-    <el-tab-pane
-      label="Docker"
-      name="docker"
-      disabled
-    />
-    <el-tab-pane
-      label="虚拟机镜像"
-      name="vm"
-      disabled
-    />
+    <el-tab-pane label="Docker" name="docker" disabled />
+    <el-tab-pane label="虚拟机镜像" name="vm" disabled />
   </el-tabs>
 </template>