From 01e6a87d4b023a9efa2833ddba1e7ffaf9409d22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Thu, 29 Aug 2024 16:35:43 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E4=BF=AE=E5=A4=8D=E7=89=B9?=
 =?UTF-8?q?=E5=AE=9A=E6=83=85=E5=86=B5=E4=B8=8B=E7=9A=84UI=E6=BA=A2?=
 =?UTF-8?q?=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/gachaRecord/gro-overview.vue | 58 +++++++++++++--------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/components/gachaRecord/gro-overview.vue b/src/components/gachaRecord/gro-overview.vue
index 61b7cfd6..2fbfe79e 100644
--- a/src/components/gachaRecord/gro-overview.vue
+++ b/src/components/gachaRecord/gro-overview.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="gro-o-container">
-    <gro-dataview v-if="newData.length !== 0" v-model:data-val="newData" data-type="new" />
-    <gro-dataview v-model:data-val="normalData" data-type="normal" />
-    <gro-dataview v-model:data-val="avatarData" data-type="avatar" />
-    <gro-dataview v-model:data-val="weaponData" data-type="weapon" />
-    <gro-dataview v-if="mixData.length !== 0" v-model:data-val="mixData" data-type="mix" />
+    <gro-dataview v-if="newData.length !== 0" :data-val="newData" data-type="new" />
+    <gro-dataview :data-val="normalData" data-type="normal" />
+    <gro-dataview :data-val="avatarData" data-type="avatar" />
+    <gro-dataview :data-val="weaponData" data-type="weapon" />
+    <gro-dataview v-if="mixData.length !== 0" :data-val="mixData" data-type="mix" />
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 import GroDataview from "./gro-dataview.vue";
 
@@ -18,32 +18,46 @@ interface GachaOverviewProps {
 
 const props = defineProps<GachaOverviewProps>();
 // data
-let newData = props.modelValue.filter((item) => item.uigfType === "100");
-let normalData = props.modelValue.filter((item) => item.uigfType === "200");
-let avatarData = props.modelValue.filter((item) => item.uigfType === "301");
-let weaponData = props.modelValue.filter((item) => item.uigfType === "302");
-let mixData = props.modelValue.filter((item) => item.uigfType === "500");
+const newData = computed<TGApp.Sqlite.GachaRecords.SingleTable[]>(() =>
+  props.modelValue.filter((item) => item.uigfType === "100"),
+);
+const normalData = computed<TGApp.Sqlite.GachaRecords.SingleTable[]>(() =>
+  props.modelValue.filter((item) => item.uigfType === "200"),
+);
+const avatarData = computed<TGApp.Sqlite.GachaRecords.SingleTable[]>(() =>
+  props.modelValue.filter((item) => item.uigfType === "301"),
+);
+const weaponData = computed<TGApp.Sqlite.GachaRecords.SingleTable[]>(() =>
+  props.modelValue.filter((item) => item.uigfType === "302"),
+);
+const mixData = computed<TGApp.Sqlite.GachaRecords.SingleTable[]>(() =>
+  props.modelValue.filter((item) => item.uigfType === "500"),
+);
 
-const cnCols = computed(() => {
+const cnCols = ref<string>(getCnCols());
+
+function getCnCols(): string {
   let total = 5;
-  if (newData.length === 0) {
+  if (newData.value.length === 0) {
     total -= 1;
   }
-  if (mixData.length === 0) {
+  if (mixData.value.length === 0) {
     total -= 1;
   }
-  return `repeat(${total}, 1fr)`;
-});
+  if (total === 5) {
+    return "repeat(5, 0.2fr)";
+  } else if (total === 4) {
+    return "repeat(4, 0.25fr)";
+  } else {
+    return "repeat(3, 0.33fr)";
+  }
+}
 
 // 监听数据变化
 watch(
   () => props.modelValue,
-  (newVal) => {
-    newData = newVal.filter((item) => item.uigfType === "100");
-    normalData = newVal.filter((item) => item.uigfType === "200");
-    avatarData = newVal.filter((item) => item.uigfType === "301");
-    weaponData = newVal.filter((item) => item.uigfType === "302");
-    mixData = newVal.filter((item) => item.uigfType === "500");
+  () => {
+    cnCols.value = getCnCols();
   },
 );
 </script>