feat(MedalList): DeprecateType text seperate (#226)

* feat(MedalList): DeprecateType text seperate

* fix(MedalList): undefined fix

Author: Yanstory

src/widgets/MedalList/MedalGroup.vue

@@ -26,6 +26,7 @@ const props = withDefaults(
     groupData: MedalGroup;
     medalDataList: Medal[];
     showDeprecateBadge?: boolean;
+    deprecateText?: string;
   }>(),
   {
     showDeprecateBadge: true,
@@ -162,12 +163,7 @@ const showTrimed = ref(false);
           ]"
         >
           <span class="mdi mdi-vanish" />
-          <span v-if="groupData.deprecateType === 'CC'">
-            危机合约套组：不复刻
-          </span>
-          <span v-if="groupData.deprecateType === 'retro'">
-            已复刻过的活动：无法再获得本蚀刻章套组
-          </span>
+          {{ deprecateText }}
         </div>
         <div class="pos-relative max-w-full flex">
           <div
@@ -179,12 +175,7 @@ const showTrimed = ref(false);
             ]"
           >
             <span class="mdi mdi-vanish" />
-            <span v-if="groupData.deprecateType === 'CC'">
-              危机合约套组：不复刻
-            </span>
-            <span v-if="groupData.deprecateType === 'retro'">
-              已复刻过的活动：无法再获得本蚀刻章套组
-            </span>
+            {{ deprecateText }}
           </div>
           <NImage
             :src="`${TORAPPU_ENDPOINT}/assets/medal_diy/${(showTrimed && groupData.isTrim ? 'trim/' : '') + groupData.id}.png`"

src/widgets/MedalList/MedalList.vue

@@ -34,6 +34,7 @@ const medalMetaData = ref<MedalMetaData>({
   medal: {},
   medalGroup: {},
   category: {},
+  groupDeprecateType: {},
 });
 
 onMounted(async () => {
@@ -275,22 +276,24 @@ const i18nConfig = getNaiveUILocale();
               size="small"
               align="stretch"
             >
-              <MedalComponent
-                v-for="medalId in cate.medal.filter((medalId) =>
-                  checkMedalExists(medalId),
-                )"
-                :key="medalId"
-                :medal-data="filteredMedalData.medal[medalId]"
-                :show-deprecate-badge="showDeprecateBadge"
-                :mini-medal-data="
-                  filteredMedalData.medal[medalId].preMedalList
-                    ? genPreMedalList(
-                        filteredMedalData.medal[medalId].preMedalList,
-                      )
-                    : {}
-                "
-                class="h-auto w-full lg:w-49%"
-              />
+              <NFlex responsive="screen" size="small" align="stretch">
+                <MedalComponent
+                  v-for="medalId in cate.medal.filter((medalId) =>
+                    checkMedalExists(medalId),
+                  )"
+                  :key="medalId"
+                  :medal-data="filteredMedalData.medal[medalId]"
+                  :show-deprecate-badge="showDeprecateBadge"
+                  :mini-medal-data="
+                    filteredMedalData.medal[medalId].preMedalList
+                      ? genPreMedalList(
+                          filteredMedalData.medal[medalId].preMedalList,
+                        )
+                      : {}
+                  "
+                  class="h-auto w-full lg:w-49%"
+                />
+              </NFlex>
               <MedalGroupComponent
                 v-for="medalGroupId in cate.medalGroup.slice().reverse()"
                 :key="medalGroupId"
@@ -301,6 +304,13 @@ const i18nConfig = getNaiveUILocale();
                   })
                 "
                 :show-deprecate-badge="showDeprecateBadge"
+                :deprecate-text="
+                  filteredMedalData.medalGroup[medalGroupId].deprecateType
+                    ? medalMetaData.groupDeprecateType[
+                        filteredMedalData.medalGroup[medalGroupId].deprecateType
+                      ]
+                    : ''
+                "
                 class="h-auto w-full lg:w-49%"
               />
               <div

src/widgets/MedalList/MedalShowcase.vue

@@ -39,6 +39,7 @@ const medalMetaData = ref<MedalMetaData>({
   medal: {},
   medalGroup: {},
   category: {},
+  groupDeprecateType: {},
 });
 
 onMounted(async () => {
@@ -197,6 +198,13 @@ const i18nConfig = getNaiveUILocale();
               v-if="filteredMedalData.medalGroup[medalGroupId]"
               :group-data="filteredMedalData.medalGroup[medalGroupId]"
               :medal-data-list="generateGroupMedalData(medalGroupId)"
+              :deprecate-text="
+                filteredMedalData.medalGroup[medalGroupId].deprecateType
+                  ? medalMetaData.groupDeprecateType[
+                      filteredMedalData.medalGroup[medalGroupId].deprecateType
+                    ]
+                  : ''
+              "
             />
           </NGridItem>
         </NGrid>

src/widgets/MedalList/MedalStats.vue

@@ -3,9 +3,9 @@ import { computed, ref } from "vue";
 
 import { NCard, NNumberAnimation, NStatistic, NTooltip } from "naive-ui";
 
-import type { MedalMetaData } from "./types";
+import type { MedalMetaDataCore } from "./types";
 const props = defineProps<{
-  medalMetaData: MedalMetaData;
+  medalMetaData: MedalMetaDataCore;
 }>();
 
 const showSecret = ref(false);

src/widgets/MedalList/types.ts

@@ -52,4 +52,26 @@ export interface MedalMetaData {
       medal: Array<string>;
     };
   };
+  groupDeprecateType: {
+    [key: string]: string;
+  };
+}
+
+export interface MedalMetaDataCore {
+  medal: {
+    [key: string]: Medal;
+  };
+  medalGroup: {
+    [key: string]: MedalGroup;
+  };
+  category: {
+    [key: string]: {
+      name: string;
+      desc: string;
+      extraDesc?: Array<string>;
+      subCategory?: Array<string>;
+      medalGroup: Array<string>;
+      medal: Array<string>;
+    };
+  };
 }