🚸 支持排序，调整默认排序逻辑

src/pages/common/PageBagMaterial.vue

@@ -1,6 +1,5 @@
 <!-- 背包材料页面 -->
 <template>
-  <!-- TODO: 顶部栏，参考材料WIKI页面 -->
   <v-app-bar>
     <template #prepend>
       <div class="pbm-nav-prepend">
@@ -15,29 +14,10 @@
           variant="outlined"
           width="200px"
         />
-        <v-select
-          v-model="selectType"
-          :clearable="true"
-          :hide-details="true"
-          :items="materialTypes"
-          density="compact"
-          item-title="type"
-          label="材料类别"
-          variant="outlined"
-          width="250px"
-        >
-          <template #item="{ props, item }">
-            <v-list-item v-bind="props">
-              <template #append>
-                <v-chip>{{ item.raw.number }}</v-chip>
-              </template>
-            </v-list-item>
-          </template>
-        </v-select>
       </div>
     </template>
     <template #append>
-      <div class="pbm-nav-extension">
+      <div class="pbm-nav-append">
         <div class="pbm-nav-search">
           <v-text-field
             v-model="search"
@@ -67,9 +47,44 @@
         </v-btn>
       </div>
     </template>
+    <template #extension>
+      <div class="pbm-nav-extension">
+        <v-select
+          v-model="selectType"
+          :clearable="true"
+          :hide-details="true"
+          :items="materialTypes"
+          density="compact"
+          item-title="type"
+          label="材料类别"
+          variant="outlined"
+          width="250px"
+        >
+          <template #item="{ props, item }">
+            <v-list-item v-bind="props">
+              <template #append>
+                <v-chip>{{ item.raw.number }}</v-chip>
+              </template>
+            </v-list-item>
+          </template>
+        </v-select>
+        <v-select
+          v-model="curSort"
+          :clearable="true"
+          :hide-details="true"
+          :items="sortList"
+          density="compact"
+          item-title="text"
+          item-value="value"
+          label="排序"
+          variant="outlined"
+          width="160px"
+        />
+      </div>
+    </template>
   </v-app-bar>
   <div class="pbm-container">
-    <template v-for="material in materialShow" :key="`${curUid}-${material.info.id}`">
+    <template v-for="material in materialShow" :key="material.info.id">
       <PbMaterialItem
         :cur="curMaterial"
         :info="material.info"
@@ -103,7 +118,7 @@ import showLoading from "@comp/func/loading.js";
 import showSnackbar from "@comp/func/snackbar.js";
 import PbMaterialItem from "@comp/pageBag/pb-materialItem.vue";
 import PboMaterial from "@comp/pageBag/pbo-material.vue";
-import TSUserBagMaterial from "@Sqlm/userBagMaterial.js";
+import TSUserBagMaterial, { BAG_TYPE_LIST } from "@Sqlm/userBagMaterial.js";
 import useAppStore from "@store/app.js";
 import useUserStore from "@store/user.js";
 import { path } from "@tauri-apps/api";
@@ -112,10 +127,22 @@ import { exists } from "@tauri-apps/plugin-fs";
 import { platform } from "@tauri-apps/plugin-os";
 import TGLogger from "@utils/TGLogger.js";
 import { storeToRefs } from "pinia";
-import { nextTick, onMounted, ref, shallowRef, watch } from "vue";
+import { nextTick, onMounted, ref, shallowRef, triggerRef, watch } from "vue";
 
 import { WikiMaterialData } from "@/data/index.js";
 
+/**
+ * 材料排序类型枚举
+ */
+enum MaterialSortType {
+  /** 最近更新 */
+  Latest,
+  /** 最多数量 */
+  MaxCount,
+  /** 最少数量 */
+  MinCount,
+}
+
 /** 材料类型 */
 type MaterialType = {
   /** 类型 */
@@ -123,6 +150,13 @@ type MaterialType = {
   /** 计数 */
   number: number;
 };
+/** 材料排序 */
+type MaterialSort = {
+  /** 文本 */
+  text: string;
+  /** 值 */
+  value: MaterialSortType;
+};
 /** 材料信息 */
 export type MaterialInfo = {
   /** 数据库数据 */
@@ -134,11 +168,18 @@ export type MaterialInfo = {
 const { gameDir, isInAdmin, isLogin } = storeToRefs(useAppStore());
 const { account } = storeToRefs(useUserStore());
 
+const sortList: Array<MaterialSort> = [
+  { text: "最近更新", value: MaterialSortType.Latest },
+  { text: "最多数量", value: MaterialSortType.MaxCount },
+  { text: "最少数量", value: MaterialSortType.MinCount },
+];
+
 const curUid = ref<number>(0);
 const selectType = ref<string | null>(null);
 const search = ref<string>();
 const showOverlay = ref<boolean>(false);
 const curIdx = ref<number>(0);
+const curSort = ref<MaterialSortType | null>(null);
 const uidList = shallowRef<Array<number>>([]);
 const materialTypes = shallowRef<Array<MaterialType>>([]);
 const curMaterial = shallowRef<MaterialInfo>();
@@ -159,10 +200,12 @@ watch(
   },
 );
 watch(
-  () => selectType.value,
+  () => [selectType.value, curSort.value],
   async () => {
     if (showOverlay.value) showOverlay.value = false;
-    materialShow.value = getSelectMaterials();
+    const renderMaterials = getSelectMaterials();
+    materialShow.value = sortMaterials(renderMaterials);
+    triggerRef(materialShow);
     curIdx.value = 0;
   },
 );
@@ -187,6 +230,26 @@ function getSelectMaterials(): Array<MaterialInfo> {
   return materialList.value.filter((i) => i.info.type === selectType.value);
 }
 
+function sortMaterials(data: Array<MaterialInfo>): Array<MaterialInfo> {
+  if (curSort.value === null) {
+    return data.sort(
+      (a, b) =>
+        BAG_TYPE_LIST.indexOf(a.info.type) - BAG_TYPE_LIST.indexOf(b.info.type) ||
+        a.info.type.localeCompare(b.info.type) ||
+        b.info.star - a.info.star ||
+        a.info.id - b.info.id,
+    );
+  }
+  switch (curSort.value) {
+    case MaterialSortType.Latest:
+      return data.sort((a, b) => b.tb.updated.localeCompare(a.tb.updated));
+    case MaterialSortType.MaxCount:
+      return data.sort((a, b) => b.tb.count - a.tb.count);
+    case MaterialSortType.MinCount:
+      return data.sort((a, b) => a.tb.count - b.tb.count);
+  }
+}
+
 /**
  * 加载存档数据
  * @param {number} uid 存档UID
@@ -214,11 +277,14 @@ async function loadMaterialList(uid: number): Promise<void> {
       tList.push({ type: info.type, number: material.count });
     }
   }
-  materialList.value = mList.sort(
-    (a, b) => a.info.type.localeCompare(b.info.type) || b.info.id - a.info.id,
+  tList.sort(
+    (a, b) =>
+      BAG_TYPE_LIST.indexOf(a.type) - BAG_TYPE_LIST.indexOf(b.type) || a.type.localeCompare(b.type),
   );
-  materialShow.value = mList;
+  materialList.value = sortMaterials(mList);
+  materialShow.value = materialList.value;
   materialTypes.value = tList;
+  curSort.value = null;
   curIdx.value = 0;
   await showLoading.end();
 }
@@ -406,7 +472,7 @@ function switchMaterial(isNext: boolean): void {
   margin-right: 8px;
 }
 
-.pbm-nav-extension {
+.pbm-nav-append {
   position: relative;
   display: flex;
   align-items: center;
@@ -422,6 +488,16 @@ function switchMaterial(isNext: boolean): void {
   font-family: var(--font-title);
 }
 
+.pbm-nav-extension {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 4px;
+  margin-left: 16px;
+  column-gap: 8px;
+}
+
 .pbm-container {
   position: relative;
   display: grid;

src/plugins/Sqlite/modules/userBagMaterial.ts

@@ -1,6 +1,6 @@
 /**
  * 用户背包材料模块
- * @since Beta v0.9.0
+ * @since Beta v0.9.1
  */
 import { timestampToDate } from "@utils/toolFunc.js";
 
@@ -12,10 +12,42 @@ export const SKIP_BAG_TYPES: ReadonlyArray<string> = [
   "系统开放",
   "好感成长",
   "风之翼",
+  /**TODO:数据获取*/
   "挑战结算道具",
+  /**TODO:数据获取*/
   "稀有货币",
+  /**TODO:数据获取*/
   "通用货币",
 ];
+export const BAG_TYPE_LIST: ReadonlyArray<string> = [
+  "高级兑换券",
+  "普通兑换券",
+  "限定祈愿道具",
+  "祈愿道具",
+  "任务道具",
+  "七国徽印",
+  "冒险道具",
+  "消耗品",
+  "角色经验素材",
+  "武器强化素材",
+  "锻造用矿石",
+  "角色天赋素材",
+  "角色突破素材",
+  "武器突破素材",
+  "角色培养素材",
+  "角色与武器培养素材",
+  "蒙德区域特产",
+  "璃月区域特产",
+  "稻妻区域特产",
+  "须弥区域特产",
+  "枫丹区域特产",
+  "纳塔区域特产",
+  "挪德卡莱区域特产",
+  "食材",
+  "素材",
+  "药剂",
+  "小道具",
+];
 
 /**
  * 获取有效材料ID