👽️ migrate to vuetify4

src/components/app/t-sidebar.vue

@@ -9,7 +9,7 @@
       />
       <div class="mid-menu">
         <!-- 菜单项 -->
-        <v-list-item :link="true" :title.attr="'首页'" href="/">
+        <v-list-item :link="true" :title.attr="'首页'" class="thin-spacer" href="/">
           <template #title>首页</template>
           <template #prepend>
             <img alt="homeIcon" class="side-icon paimon" src="/UI/nav/paimon.webp" />
@@ -206,7 +206,7 @@
         <!-- 用户菜单 -->
         <v-menu :open-on-click="true" location="end">
           <template #activator="{ props }">
-            <v-list-item :title.attr="userInfo.nickname" v-bind="props">
+            <v-list-item :title.attr="userInfo.nickname" class="thin-spacer" v-bind="props">
               <template #title>{{ userInfo.nickname }}</template>
               <template #prepend>
                 <img :src="userInfo.avatar" alt="userIcon" class="side-icon paimon" />
@@ -812,8 +812,10 @@ async function tryLaunchGame(): Promise<void> {
   }
 }
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .tsb-box {
+  --v-list-prepend-gap: 24px;
+
   position: relative;
   background: var(--app-side-bg);
   color: var(--app-side-content);
@@ -841,8 +843,8 @@ async function tryLaunchGame(): Promise<void> {
   width: 100%;
 }
 
-:deep(.side-icon.paimon + .v-list-item__spacer) {
-  width: 24px;
+.thin-spacer {
+  --v-list-prepend-gap: 16px;
 }
 
 .side-icon {

src/components/pageBag/pbo-material.vue

@@ -5,7 +5,7 @@
       <slot name="left"></slot>
       <div class="pbom-box">
         <div class="pbom-share">
-          {{ dbInfo.updated }} | UID {{ props.uid }} | TeyvatGuide v{{ version }}
+          ID {{ props.data.info.id }} | UID {{ props.uid }} | TeyvatGuide v{{ version }}
         </div>
         <div class="pbom-top">
           <div class="pbom-icon">
@@ -81,7 +81,7 @@ const showRecord = computed<boolean>(() => !SKIP_BAG_TYPES.includes(props.data.i
 onMounted(async () => (version.value = await getVersion()));
 
 const dbInfo = shallowRef<TGApp.Sqlite.UserBag.MaterialTable>(props.data.tb);
-
+console.log(dbInfo.value);
 watch(
   () => props.data.info,
   async () => await refreshDb(),

src/components/userAvatar/tua-avatar-box.vue

@@ -62,7 +62,7 @@ import { computed } from "vue";
 
 import TuaRelicBox from "./tua-relic-box.vue";
 
-import { AppCharacterData } from "@/data/index.js";
+import { AppCalendarData, AppCharacterData } from "@/data/index.js";
 
 type fixedLenArr<T, N extends number> = [T, ...Array<T>] & { length: N };
 type AvatarRelics = fixedLenArr<TGApp.Game.Avatar.Relic | false, 5>;
@@ -74,7 +74,9 @@ const userStore = useUserStore();
 const avatarIcon = computed<string>(() => {
   const costume = getCostume();
   if (costume) return `/WIKI/costume/${costume.id}.webp`;
-  return `/WIKI/character/${props.role.avatar.id}.webp`;
+  const findA = AppCalendarData.find((a) => a.id === props.role.avatar.id);
+  if (findA) return `/WIKI/character/${props.role.avatar.id}.webp`;
+  return props.role.avatar.icon;
 });
 const avatarBox = computed<TItemBoxData>(() => ({
   size: "100px",
@@ -90,20 +92,25 @@ const avatarBox = computed<TItemBoxData>(() => ({
   display: "inner",
   clickable: true,
 }));
-const weaponBox = computed<TItemBoxData>(() => ({
-  size: "65px",
-  height: "65px",
-  bg: `/icon/bg/${props.role.weapon.rarity}-Star.webp`,
-  icon: `/WIKI/weapon/${props.role.weapon.id}.webp`,
-  lt: `/icon/weapon/${props.role.weapon.type_name}.webp`,
-  ltSize: "20px",
-  rt: props.role.weapon.affix_level.toString(),
-  rtSize: "20px",
-  innerText: props.role.weapon.name,
-  innerHeight: 20,
-  display: "inner",
-  clickable: true,
-}));
+const weaponBox = computed<TItemBoxData>(() => {
+  let icon = props.role.weapon.icon;
+  const findW = AppCalendarData.find((w) => w.id === props.role.weapon.id);
+  if (findW) icon = `/WIKI/weapon/${props.role.weapon.id}.webp`;
+  return {
+    size: "65px",
+    height: "65px",
+    bg: `/icon/bg/${props.role.weapon.rarity}-Star.webp`,
+    icon: icon,
+    lt: `/icon/weapon/${props.role.weapon.type_name}.webp`,
+    ltSize: "20px",
+    rt: props.role.weapon.affix_level.toString(),
+    rtSize: "20px",
+    innerText: props.role.weapon.name,
+    innerHeight: 20,
+    display: "inner",
+    clickable: true,
+  };
+});
 const relicsBox = computed<AvatarRelics>(() => {
   const relics = props.role.relics;
   return [
@@ -146,7 +153,7 @@ function getWeaponTitle(): string {
   title.push(`${weapon.rarity}星 精炼${weapon.affix_level} Lv.${weapon.level}`);
   const propMain = userStore.getProp(weapon.main_property.property_type);
   title.push(`${propMain !== false ? propMain.name : "未知属性"} - ${weapon.main_property.final}`);
-  if (weapon.sub_property !== null) {
+  if (weapon.sub_property !== undefined && weapon.sub_property !== null) {
     const propSub = userStore.getProp(weapon.sub_property.property_type);
     title.push(`${propSub !== false ? propSub.name : "未知属性"} - ${weapon.sub_property.final}`);
   }