💄 合成显示具有材料

src/components/pageBag/pb-materialItem.vue

@@ -63,6 +63,7 @@ $pb-mi-base: v-bind(idColor); /* stylelint-disable-line value-keyword-case */
   display: flex;
   overflow: hidden;
   height: 48px;
+  box-sizing: border-box;
   align-items: center;
   justify-content: flex-start;
   padding-right: 8px;

src/components/pageBag/pbo-convert-material.vue

@@ -0,0 +1,135 @@
+<!-- 背包材料转换项材料单项 -->
+<template>
+  <div
+    :class="[`star${props.material.star}`, `${props.material.local === 0 ? 'empty' : ''}`]"
+    :title="props.material.name"
+    class="pbo-cm-box"
+  >
+    <div class="pbo-cm-left">
+      <img :src="`/icon/bg/${props.material.star}-Star.webp`" alt="bg" class="bg" />
+      <img :src="`/icon/material/${props.material.id}.webp`" alt="icon" class="icon" />
+    </div>
+    <div class="pbo-cm-right">
+      <span class="pbo-cm-title">{{ props.material.name }}</span>
+      <span class="pbo-cm-count">x{{ props.material.count }}</span>
+    </div>
+    <div :title="`持有：${props.material.local}`" class="pbo-cm-local">
+      {{ props.material.local }}
+    </div>
+    <div class="pbo-cm-extra">{{ props.material.type }}·{{ props.material.id }}</div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { PboConvertSource } from "./pbo-convert.vue";
+
+type PbMaterialItemProps = { material: PboConvertSource };
+const props = defineProps<PbMaterialItemProps>();
+</script>
+<style lang="scss" scoped>
+@use "@styles/utils.scss" as utils;
+@use "@styles/github.styles.scss" as github-styles;
+
+.pbo-cm-box {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  min-width: 200px;
+  height: 48px;
+  align-items: center;
+  justify-content: flex-start;
+  padding-right: 4px;
+  border-radius: 4px;
+  column-gap: 4px;
+
+  &.empty {
+    opacity: 0.4;
+  }
+}
+
+.pbo-cm-left {
+  position: relative;
+  height: 100%;
+  flex-shrink: 0;
+  aspect-ratio: 1;
+
+  .bg,
+  .icon {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.pbo-cm-right {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  max-width: 100%;
+  align-items: flex-end;
+  justify-content: center;
+  color: var(--box-text-2);
+  column-gap: 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+
+.pbo-cm-title {
+  font-size: 14px;
+}
+
+.pbo-cm-count {
+  position: relative;
+  border-radius: 12px;
+  color: var(--tgc-od-red);
+  font-family: var(--font-title);
+  font-size: 12px;
+}
+
+.pbo-cm-extra {
+  position: absolute;
+  z-index: 1;
+  right: 2px;
+  bottom: 0;
+  font-size: 8px;
+  font-style: italic;
+  opacity: 0.8;
+}
+
+.pbo-cm-local {
+  position: absolute;
+  top: 0;
+  right: 0;
+  box-sizing: border-box;
+  padding-right: 4px;
+  padding-left: 12px;
+  border-top: unset;
+  border-right: unset;
+  border-bottom-left-radius: 12px;
+  font-family: var(--font-title);
+  font-size: 10px;
+  line-height: 12px;
+  text-align: center;
+}
+
+@for $i from 1 through 5 {
+  .star#{$i} {
+    $pbo-cm-base: utils.get-od-star-color($i);
+
+    border: 1px solid rgba($pbo-cm-base, 0.2);
+    background: rgba($pbo-cm-base, 0.15);
+
+    .pbo-cm-extra {
+      color: $pbo-cm-base;
+    }
+
+    .pbo-cm-local {
+      @include github-styles.github-tag-dark-gen($pbo-cm-base);
+
+      border-top: unset;
+      border-right: unset;
+    }
+  }
+}
+</style>

src/components/pageBag/pbo-convert.vue

@@ -0,0 +1,57 @@
+<!-- 背包材料合成 -->
+<template>
+  <div class="pboc-container">
+    <v-icon>mdi-all-inclusive</v-icon>
+    <PboConvertMaterial v-for="(material, index) in convertSources" :key="index" :material />
+  </div>
+</template>
+<script lang="ts" setup>
+import TSUserBagMaterial from "@Sqlm/userBagMaterial.js";
+import { shallowRef, watch } from "vue";
+
+import PboConvertMaterial from "./pbo-convert-material.vue";
+
+/** 组件参数 */
+type PboConvertProps = {
+  /** 用户UID */
+  uid: number;
+  /** 转换材料 */
+  data: TGApp.App.Material.Convert;
+};
+/** 渲染数据 */
+export type PboConvertSource = TGApp.App.Material.ConvertSrc & {
+  /** 本地数量 */
+  local: number;
+};
+
+const props = defineProps<PboConvertProps>();
+const convertSources = shallowRef<Array<PboConvertSource>>([]);
+
+watch(
+  () => props.data,
+  async () => await loadData(),
+  { immediate: true },
+);
+
+async function loadData(): Promise<void> {
+  const tmp: Array<PboConvertSource> = [];
+  for (const item of props.data.source) {
+    let cnt: number = 0;
+    const dbGet = await TSUserBagMaterial.getMaterial(props.uid, item.id);
+    if (dbGet.length > 0) cnt = dbGet[0].count;
+    tmp.push({ ...item, local: cnt });
+  }
+  convertSources.value = tmp;
+}
+</script>
+<style lang="css" scoped>
+.pboc-container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  border-radius: 4px;
+  column-gap: 8px;
+}
+</style>

src/components/pageBag/pbo-material.vue

@@ -11,10 +11,9 @@
           <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">{{ dbInfo.count }}</span>
           </div>
           <div class="pbom-name" @click="shareMaterial()">{{ props.data.info.name }}</div>
-          <div class="pbom-type">{{ props.data.info.type }}</div>
+          <div class="pbom-type">持有{{ dbInfo.count }}·{{ props.data.info.type }}</div>
         </div>
         <div class="pbom-mid">
           <div class="pbom-desc" v-html="parseHtmlText(props.data.info.description)" />
@@ -22,10 +21,11 @@
             <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
+            <PboConvert
               v-for="(item, index) in props.data.info.convert"
               :key="index"
               :data="item"
+              :uid="props.uid"
             />
           </div>
         </div>
@@ -53,7 +53,6 @@
 import TOverlay from "@comp/app/t-overlay.vue";
 import showDialog from "@comp/func/dialog.js";
 import showSnackbar from "@comp/func/snackbar.js";
-import TwoConvert from "@comp/pageWiki/two-convert.vue";
 import TwoSource from "@comp/pageWiki/two-source.vue";
 import TSUserBagMaterial from "@Sqlm/userBagMaterial.js";
 import { getVersion } from "@tauri-apps/api/app";
@@ -61,9 +60,11 @@ import { generateShareImg } from "@utils/TGShare.js";
 import { parseHtmlText, timestampToDate } from "@utils/toolFunc.js";
 import { onMounted, ref, shallowRef, watch } from "vue";
 
+import PboConvert from "./pbo-convert.vue";
+
 import type { MaterialInfo } from "@/pages/common/PageBagMaterial.vue";
 
-type PboMaterialProps = { data: MaterialInfo; uid: string };
+type PboMaterialProps = { data: MaterialInfo; uid: number };
 type PboMaterialEmits = (e: "updateDB", v: MaterialInfo) => void;
 
 const props = defineProps<PboMaterialProps>();
@@ -141,7 +142,7 @@ async function tryEdit(): Promise<void> {
   flex-direction: column;
   padding: 10px;
   border-radius: 10px;
-  background: var(--box-bg-1);
+  background: var(--app-page-bg);
   overflow-y: auto;
   row-gap: 10px;
 }
@@ -193,20 +194,6 @@ async function tryEdit(): Promise<void> {
     width: 56px;
     height: 56px;
   }
-
-  .cnt {
-    @include github-styles.github-tag-dark-gen(#ffcd0c);
-
-    position: absolute;
-    bottom: -4px;
-    left: 40px;
-    width: fit-content;
-    padding: 0 4px;
-    border-radius: 12px;
-    backdrop-filter: blur(5px);
-    font-size: 10px;
-    text-align: center;
-  }
 }
 
 .pbom-name {
@@ -234,8 +221,8 @@ async function tryEdit(): Promise<void> {
 .pbom-convert {
   padding: 8px;
   border-radius: 4px;
-  background: var(--box-bg-2);
-  color: var(--box-text-2);
+  background: var(--box-bg-1);
+  color: var(--box-text-1);
 }
 
 .pbom-desc {
@@ -268,7 +255,7 @@ async function tryEdit(): Promise<void> {
   justify-content: flex-start;
   padding: 8px;
   border-radius: 4px;
-  background: var(--box-bg-2);
+  background: var(--box-bg-1);
   row-gap: 8px;
 }