✨ 参考材料WIKI完善背包物品处理

2026-03-29 06:09:45 +08:00 · 2025-12-09 14:32:35 +08:00
parent eafd2fdff8
commit 17690bb024
8 changed files with 684 additions and 32 deletions
--- a/src/components/app/t-sidebar.vue
+++ b/src/components/app/t-sidebar.vue
@@ -37,7 +37,7 @@
          <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">
+      <v-list-item :link="true" :title.attr="'背包材料'" href="/bag/material">
        <template #title>背包材料</template>
        <template #prepend>
          <img alt="materialBagIcon" class="side-icon" src="/icon/material/121234.webp" />
--- a/src/components/pageBag/pb-materialItem.vue
+++ b/src/components/pageBag/pb-materialItem.vue
@@ -1,35 +1,38 @@
 <!-- 背包材料物品项 -->
 <template>
-  <div v-if="info" :title="info.name" class="pb-mi-box" @click="toMaterial()">
+  <div :title="props.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" />
+      <img :src="`/icon/bg/${props.info.star}-Star.webp`" alt="bg" class="pb-mi-bg" />
+      <img :src="`/icon/material/${props.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 class="pb-mi-right">{{ props.info.name }}</div>
+    <div class="pb-mi-id">{{ props.info.id }}</div>
+    <div class="pb-mi-cnt">{{ item.count }}</div>
  </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, shallowRef } from "vue";
+import { shallowRef } from "vue";

-import { WikiMaterialData } from "@/data/index.js";
+import type { MaterialInfo } from "@/pages/common/PageBagMaterial.vue";

-type PbMaterialItemProps = { tb: TGApp.Sqlite.UserBag.TableMaterial };
+/** 组件参数 */
+type PbMaterialItemProps = MaterialInfo;
+/** 组件事件 */
+type PbMaterialItemEmits = (e: "select", v: MaterialInfo) => void;

 const props = defineProps<PbMaterialItemProps>();
+const emits = defineEmits<PbMaterialItemEmits>();

-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 {}
+function toMaterial(): void {
+  emits("select", { tb: item.value, info: props.info });
+}
 </script>
 <style lang="scss" scoped>
+@use "@styles/github.styles.scss" as github-styles;
+
 .pb-mi-box {
  position: relative;
  display: flex;
@@ -80,4 +83,21 @@ function toMaterial(): void {}
  font-size: 8px;
  opacity: 0.6;
 }
+
+.pb-mi-cnt {
+  @include github-styles.github-tag-dark-gen(#82aaff);
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding-right: 4px;
+  padding-left: 12px;
+  border-top: unset;
+  border-left: unset;
+  border-bottom-left-radius: 20px;
+  border-top-right-radius: 4px;
+  font-family: var(--font-title);
+  font-size: 10px;
+  text-align: center;
+}
 </style>
--- a/src/components/pageBag/pbo-material.vue
+++ b/src/components/pageBag/pbo-material.vue
@@ -0,0 +1,202 @@
+<!-- 背包材料物品浮窗 TODO:更新记录图表 -->
+<template>
+  <TOverlay v-model="visible">
+    <div v-if="props.data" class="pbom-container">
+      <slot name="left"></slot>
+      <div class="pbom-box">
+        <div class="pbom-share">
+          {{ props.data.tb.updated }} | UID {{ props.uid }} | TeyvatGuide v{{ version }}
+        </div>
+        <div class="pbom-top">
+          <div class="pbom-icon">
+            <img :src="`/icon/bg/${props.data.info.star}-BGC.webp`" alt="bg" class="bg" />
+            <img :src="`/icon/material/${props.data.info.id}.webp`" alt="icon" class="icon" />
+            <span class="cnt">{{ props.data.tb.count }}</span>
+          </div>
+          <div class="pbom-name" @click="shareMaterial()">{{ props.data.info.name }}</div>
+          <div class="pbom-type">{{ props.data.info.type }}</div>
+        </div>
+        <div class="pbom-bottom">
+          <div class="pbom-desc" v-html="parseHtmlText(props.data.info.description)" />
+          <div v-if="props.data.info.source.length > 0" class="pbom-source">
+            <TwoSource v-for="(item, index) in props.data.info.source" :key="index" :data="item" />
+          </div>
+          <div v-if="props.data.info.convert.length > 0" class="pbom-convert">
+            <TwoConvert
+              v-for="(item, index) in props.data.info.convert"
+              :key="index"
+              :data="item"
+            />
+          </div>
+        </div>
+      </div>
+      <slot name="right"></slot>
+    </div>
+  </TOverlay>
+</template>
+<script lang="ts" setup>
+import TOverlay from "@comp/app/t-overlay.vue";
+import showSnackbar from "@comp/func/snackbar.js";
+import TwoConvert from "@comp/pageWiki/two-convert.vue";
+import TwoSource from "@comp/pageWiki/two-source.vue";
+import { getVersion } from "@tauri-apps/api/app";
+import { generateShareImg } from "@utils/TGShare.js";
+import { parseHtmlText } from "@utils/toolFunc.js";
+import { onMounted, ref } from "vue";
+
+import type { MaterialInfo } from "@/pages/common/PageBagMaterial.vue";
+
+type PboMaterialProps = { data: MaterialInfo; uid: string };
+
+const props = defineProps<PboMaterialProps>();
+const visible = defineModel<boolean>();
+const version = ref<string>();
+
+onMounted(async () => (version.value = await getVersion()));
+
+async function shareMaterial(): Promise<void> {
+  const element = document.querySelector<HTMLElement>(".pbom-box");
+  if (element === null) {
+    showSnackbar.error("未获取到分享内容");
+    return;
+  }
+  const fileName = `materialBag_${props.data.info.id}_${props.data.tb.count}`;
+  const zoom = window.outerWidth / window.innerWidth;
+  await generateShareImg(fileName, element, zoom, true);
+}
+</script>
+<style lang="scss" scoped>
+.pbom-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 12px;
+}
+
+.pbom-box {
+  position: relative;
+  display: flex;
+  width: 800px;
+  max-height: 600px;
+  flex-direction: column;
+  padding: 10px;
+  border-radius: 10px;
+  background: var(--box-bg-1);
+  overflow-y: auto;
+  row-gap: 10px;
+}
+
+.pbom-share {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+}
+
+.pbom-top {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 10px;
+  border-bottom: 1px solid var(--common-shadow-1);
+  background-position: center;
+  background-size: cover;
+  column-gap: 10px;
+}
+
+.pbom-icon {
+  position: relative;
+  display: flex;
+  width: 60px;
+  height: 60px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  .bg {
+    position: absolute;
+    z-index: 0;
+    width: 64px;
+    height: 64px;
+    flex-shrink: 0;
+    border-radius: 50%;
+  }
+
+  .icon {
+    position: relative;
+    width: 56px;
+    height: 56px;
+  }
+
+  .cnt {
+    position: absolute;
+    top: -4px;
+    left: 40px;
+    width: fit-content;
+    padding: 0 4px;
+    border: 1px solid var(--common-shadow-1);
+    border-radius: 12px;
+    background: var(--box-bg-2);
+    color: var(--box-text-2);
+    font-size: 10px;
+    text-align: center;
+  }
+}
+
+.pbom-name {
+  color: var(--common-text-title);
+  cursor: pointer;
+  font-family: var(--font-title);
+  font-size: 30px;
+}
+
+.pbom-type {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  opacity: 0.8;
+}
+
+.pbom-bottom {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+}
+
+.pbom-desc,
+.pbom-source,
+.pbom-convert {
+  padding: 10px;
+  border-radius: 10px;
+  background: var(--box-bg-2);
+  color: var(--box-text-2);
+}
+
+.pbom-desc {
+  font-size: 16px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.pbom-source {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  font-size: 16px;
+  row-gap: 5px;
+  white-space: pre-wrap;
+}
+
+.pbom-convert {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  row-gap: 5px;
+}
+</style>
--- a/src/components/userGacha/gbr-data-view.vue
+++ b/src/components/userGacha/gbr-data-view.vue
@@ -1,4 +1,4 @@
-<!-- 颂愿数据概览 -->
+<!-- 颂愿数据概览 TODO: 页面高度动态计算，参考GroDataView -->
 <template>
  <div class="gbr-dv-container">
    <div class="gbr-dvt-title">