diff --git a/src/components/app/t-sidebar.vue b/src/components/app/t-sidebar.vue
index a8c9c82c..adc8ace5 100644
--- a/src/components/app/t-sidebar.vue
+++ b/src/components/app/t-sidebar.vue
@@ -37,6 +37,12 @@
           <img alt="achievementsIcon" class="side-icon" src="@/assets/icons/achievements.svg" />
         </template>
       </v-list-item>
+      <v-list-item v-if="isDevEnv" :link="true" :title.attr="'背包材料'" href="/bag/material">
+        <template #title>背包材料</template>
+        <template #prepend>
+          <img alt="materialBagIcon" class="side-icon" src="/icon/material/121234.webp" />
+        </template>
+      </v-list-item>
       <v-divider />
       <v-list-item :link="true" :title.attr="'原神战绩'" href="/user/record">
         <template #title>原神战绩</template>
diff --git a/src/components/pageBag/pb-materialItem.vue b/src/components/pageBag/pb-materialItem.vue
new file mode 100644
index 00000000..57b65a3e
--- /dev/null
+++ b/src/components/pageBag/pb-materialItem.vue
@@ -0,0 +1,83 @@
+<!-- 背包材料物品项 -->
+<template>
+  <div v-if="info" :title="info.name" class="pb-mi-box" @click="toMaterial()">
+    <div class="pb-mi-left">
+      <img :src="`/icon/bg/${info.star}-Star.webp`" alt="bg" class="pb-mi-bg" />
+      <img :src="`/icon/material/${info.id}.webp`" alt="icon" class="pb-mi-icon" />
+    </div>
+    <div class="pb-mi-right">{{ info.name }}</div>
+    <div class="pb-mi-id">{{ item.count }}_{{ info.id }}</div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, shallowRef } from "vue";
+
+import { WikiMaterialData } from "@/data/index.js";
+
+type PbMaterialItemProps = { tb: TGApp.Sqlite.UserBag.TableMaterial };
+
+const props = defineProps<PbMaterialItemProps>();
+
+const info = shallowRef<TGApp.App.Material.WikiItem>();
+const item = shallowRef<TGApp.Sqlite.UserBag.TableMaterial>(props.tb);
+
+onMounted(() => {
+  const find = WikiMaterialData.find((i) => i.id === props.tb.id);
+  if (find) info.value = find;
+});
+
+// TODO: 点击修改数量/查看更改历史
+function toMaterial(): void {}
+</script>
+<style lang="scss" scoped>
+.pb-mi-box {
+  position: relative;
+  display: flex;
+  height: 45px;
+  align-items: center;
+  justify-content: flex-start;
+  padding-right: 5px;
+  border: 1px solid var(--common-shadow-1);
+  border-radius: 5px;
+  background: var(--box-bg-1);
+  column-gap: 5px;
+  cursor: pointer;
+}
+
+.pb-mi-left {
+  position: relative;
+  width: 45px;
+  height: 45px;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+}
+
+.pb-mi-bg,
+.pb-mi-icon {
+  position: absolute;
+  top: 0;
+  width: 45px;
+  height: 45px;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+}
+
+.pb-mi-right {
+  position: relative;
+  overflow: hidden;
+  max-width: calc(100% - 50px);
+  color: var(--box-text-2);
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+
+.pb-mi-id {
+  position: absolute;
+  right: 4px;
+  bottom: 2px;
+  font-size: 8px;
+  opacity: 0.6;
+}
+</style>
diff --git a/src/pages/common/PageBagMaterial.vue b/src/pages/common/PageBagMaterial.vue
new file mode 100644
index 00000000..0221124b
--- /dev/null
+++ b/src/pages/common/PageBagMaterial.vue
@@ -0,0 +1,38 @@
+<!-- 背包材料页面 -->
+<template>
+  <!-- TODO: 顶部栏，参考材料WIKI页面 -->
+  <div class="page-bag-material">
+    <template v-for="(table, idx) in materialList" :key="idx">
+      <PbMaterialItem :tb="table" />
+    </template>
+    <!-- TODO: 材料浮窗，显示获取数量&更改记录&一些操作 -->
+  </div>
+</template>
+<script lang="ts" setup>
+import PbMaterialItem from "@comp/pageBag/pb-materialItem.vue";
+import TSUserBagMaterial from "@Sqlm/userBagMaterial.js";
+import { onMounted, ref, shallowRef } from "vue";
+
+const curUid = ref<number>();
+const uidList = shallowRef<Array<number>>([]);
+const materialList = shallowRef<Array<TGApp.Sqlite.UserBag.TableMaterial>>([]);
+
+onMounted(async () => {
+  uidList.value = await TSUserBagMaterial.getAllUid();
+  // TODO: 如果用户已登录，优先当前登录UID
+  if (uidList.value.length > 0) {
+    curUid.value = uidList.value[0];
+    materialList.value = await TSUserBagMaterial.getMaterial(curUid.value);
+    console.log(curUid.value, materialList.value);
+  }
+});
+</script>
+<style lang="scss" scoped>
+.page-bag-material {
+  position: relative;
+  display: grid;
+  width: 100%;
+  gap: 8px;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+</style>
diff --git a/src/plugins/Sqlite/index.ts b/src/plugins/Sqlite/index.ts
index 4d4a7b8f..6e3fe0f3 100644
--- a/src/plugins/Sqlite/index.ts
+++ b/src/plugins/Sqlite/index.ts
@@ -1,6 +1,6 @@
 /**
  * Sqlite 数据库操作类
- * @since Beta v0.8.4
+ * @since Beta v0.9.0
  */
 
 import { app } from "@tauri-apps/api";
@@ -27,6 +27,8 @@ class Sqlite {
     "UserAccount",
     "UserCharacters",
     "UserRecord",
+    // TODO: v0.9.0 进行注释移除
+    // "UserBagMaterial"
   ];
   private db: Database | null = null;
   private static instance: Sqlite | null = null;
diff --git a/src/plugins/Sqlite/modules/userBagMaterial.ts b/src/plugins/Sqlite/modules/userBagMaterial.ts
index ad24a66e..bae01c86 100644
--- a/src/plugins/Sqlite/modules/userBagMaterial.ts
+++ b/src/plugins/Sqlite/modules/userBagMaterial.ts
@@ -95,14 +95,15 @@ async function getMaterial(
 ): Promise<Array<TGApp.Sqlite.UserBag.TableMaterial>> {
   const db = await TGSqlite.getDB();
   let res: Array<TGApp.Sqlite.UserBag.TableMaterialRaw>;
-  if (id) {
+  // TODO: 排序
+  if (id !== undefined) {
     res = await db.select<Array<TGApp.Sqlite.UserBag.TableMaterialRaw>>(
-      "SELECT * FROM UserBagMaterial WHERE uid = ? AND id = ?",
+      "SELECT * FROM UserBagMaterial WHERE uid = ? AND id = ?;",
       [uid, id],
     );
   } else {
     res = await db.select<Array<TGApp.Sqlite.UserBag.TableMaterialRaw>>(
-      "SELECT * FROM UserBagMaterial WHERE uid =",
+      "SELECT * FROM UserBagMaterial WHERE uid =?;",
       [uid],
     );
   }
diff --git a/src/router/modules/main.ts b/src/router/modules/main.ts
index e60899d4..90c78533 100644
--- a/src/router/modules/main.ts
+++ b/src/router/modules/main.ts
@@ -1,7 +1,6 @@
 /**
- * @file router/modules/main.ts
- * @description 主路由模块
- * @since Beta v0.6.3
+ * 主路由模块
+ * @since Beta v0.9.0
  */
 import type { RouteRecordRaw } from "vue-router";
 
@@ -36,6 +35,11 @@ const mainRoutes = (<const>[
     name: "成就",
     component: async () => await import("@/pages/common/PageAchi.vue"),
   },
+  {
+    path: "/bag/material",
+    name: "背包材料",
+    component: async () => await import("@/pages/common/PageBagMaterial.vue"),
+  },
   {
     path: "/collection",
     name: "收藏",