🎨 美化样式，添加新手池数据

src/components/gachaRecord/gro-echarts.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="gro-container">
-    <v-chart :option="getPoolData()" autoresize class="gro-chart" />
-  </div>
+  <v-chart :option="getPoolData()" autoresize />
 </template>
 <script lang="ts" setup>
 // vue
@@ -10,21 +8,34 @@ import VChart, { THEME_KEY } from "vue-echarts";
 import showSnackbar from "../func/snackbar";
 // echarts
 import { use } from "echarts/core";
-import { LegendComponent, TitleComponent, TooltipComponent } from "echarts/components";
+import {
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent,
+} from "echarts/components";
 import { PieChart } from "echarts/charts";
 import { LabelLayout } from "echarts/features";
 import { CanvasRenderer } from "echarts/renderers";
 import { type EChartsOption } from "echarts";
 
-use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);
+use([
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent,
+  LegendComponent,
+  PieChart,
+  CanvasRenderer,
+  LabelLayout,
+]);
 // 获取当前主题
 provide(THEME_KEY, "dark");
 
-interface GachaOverviewProps {
+interface GachaOverviewEchartsProps {
   modelValue: TGApp.Sqlite.GachaRecords.SingleTable[];
 }
 
-const props = defineProps<GachaOverviewProps>();
+const props = defineProps<GachaOverviewEchartsProps>();
 
 onMounted(async () => {
   const totalNum = props.modelValue.length;
@@ -34,7 +45,7 @@ onMounted(async () => {
 });
 
 // data
-const overviewDefaultData = <EChartsOption>{
+const defaultOptions = <EChartsOption>{
   title: [
     {
       text: "数据概览",
@@ -72,6 +83,13 @@ const overviewDefaultData = <EChartsOption>{
     top: 20,
     bottom: 20,
   },
+  toolbox: {
+    show: true,
+    feature: {
+      restore: {},
+      saveAsImage: {},
+    },
+  },
   series: [
     {
       name: "卡池分布",
@@ -101,11 +119,11 @@ const overviewDefaultData = <EChartsOption>{
     {
       name: "角色池分布",
       type: "pie",
-      radius: [40, 150],
+      radius: [30, 150],
       center: ["50%", "50%"],
       roseType: "area",
       itemStyle: {
-        borderRadius: 10,
+        borderRadius: [2, 10],
       },
       data: [],
       datasetIndex: 3,
@@ -125,9 +143,10 @@ const overviewDefaultData = <EChartsOption>{
 
 // 获取卡池分布的数据
 function getPoolData(): EChartsOption {
-  const data = JSON.parse(JSON.stringify(overviewDefaultData));
+  const data = JSON.parse(JSON.stringify(defaultOptions));
   data.title[0].subtext = `共 ${props.modelValue.length} 条数据`;
   data.series[0].data = [
+    { value: props.modelValue.filter((item) => item.uigfType === "100").length, name: "新手祈愿" },
     { value: props.modelValue.filter((item) => item.uigfType === "200").length, name: "常驻祈愿" },
     {
       value: props.modelValue.filter((item) => item.uigfType === "301").length,
@@ -151,9 +170,9 @@ function getPoolData(): EChartsOption {
   data.title[3].subtext = `共 ${tempList.length} 条数据, 其中三星武器 ${star3} 抽`;
   tempList
     .filter((item) => item.rank !== "3")
-    .map((item) => {
+    .forEach((item) => {
       if (tempSet.has(item.name)) {
-        tempRecord.set(item.name, tempRecord.get(item.name)! + 1);
+        tempRecord.set(item.name, (tempRecord.get(item.name) ?? 0) + 1);
       } else {
         tempSet.add(item.name);
         tempRecord.set(item.name, 1);
@@ -173,9 +192,9 @@ function getPoolData(): EChartsOption {
   data.title[4].subtext = `共 ${tempList.length} 条数据，其中三星武器 ${star3} 抽`;
   tempList
     .filter((item) => item.rank !== "3")
-    .map((item) => {
+    .forEach((item) => {
       if (tempSet.has(item.name)) {
-        tempRecord.set(item.name, tempRecord.get(item.name)! + 1);
+        tempRecord.set(item.name, (tempRecord.get(item.name) ?? 0) + 1);
       } else {
         tempSet.add(item.name);
         tempRecord.set(item.name, 1);
@@ -190,16 +209,3 @@ function getPoolData(): EChartsOption {
   return data;
 }
 </script>
-<style lang="css" scoped>
-.gro-container {
-  width: calc(100% - 20px);
-  padding: 10px;
-  border-radius: 5px;
-  margin: 10px;
-  box-shadow: 0 0 10px var(--common-shadow-4);
-}
-
-.gro-chart {
-  height: calc(100vh - 200px);
-}
-</style>

src/components/gachaRecord/gro-overview.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="gro-o-container">
+    <!-- 这里放三列 -->
+  </div>
+</template>
+<script lang="ts" setup>
+interface GachaOverviewProps {
+  modelValue: TGApp.Sqlite.GachaRecords.SingleTable[];
+}
+
+const props = defineProps<GachaOverviewProps>();
+
+console.log(props.modelValue);
+</script>
+<style lang="css" scoped>
+.gro-o-container {
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  background: var(--common-shadow-2);
+}
+</style>

src/pages/User/Gacha.vue

@@ -2,33 +2,34 @@
   <ToLoading v-model="loading" :title="loadingTitle" />
   <v-app-bar class="gacha-top-bar">
     <template #prepend>
-      <v-app-bar-title v-if="isLogin()">{{ user.gameUid }}</v-app-bar-title>
-      <v-app-bar-title v-else>祈愿数据</v-app-bar-title>
+      <v-app-bar-title>
+        <span>祈愿记录</span>
+        <span v-if="isLogin()"> - {{ user.nickname }} UID：{{ user.gameUid }}</span>
+      </v-app-bar-title>
     </template>
     <v-spacer />
     <template #append>
-      <v-btn prepend-icon="mdi-import" class="gacha-top-btn" @click="handleImportBtn"> 导入 </v-btn>
-      <v-btn prepend-icon="mdi-export" class="gacha-top-btn" @click="handleExportBtn"> 导出 </v-btn>
+      <v-btn prepend-icon="mdi-share-variant" class="gacha-top-btn" @click="handleShareBtn">
+        分享
+      </v-btn>
+      <v-btn prepend-icon="mdi-import" class="gacha-top-btn" @click="handleImportBtn"> 导入</v-btn>
+      <v-btn prepend-icon="mdi-export" class="gacha-top-btn" @click="handleExportBtn"> 导出</v-btn>
     </template>
   </v-app-bar>
-  <v-tabs v-model="tab" align-tabs="start" class="gacha-tab">
-    <v-tab value="overview">概览</v-tab>
-    <v-tab value="character">角色</v-tab>
-    <v-tab value="weapon">武器</v-tab>
-  </v-tabs>
-  <v-window v-model="tab">
-    <v-window-item value="overview">
-      <gr-overview v-model="gachaListCur" />
-    </v-window-item>
-    <v-window-item value="character">
-      这里放角色
-      <!-- 组件 -->
-    </v-window-item>
-    <v-window-item value="weapon">
-      这里放武器
-      <!-- 组件 -->
-    </v-window-item>
-  </v-window>
+  <div class="gacha-container">
+    <v-tabs v-model="tab" align-tabs="start" class="gacha-tab" direction="vertical">
+      <v-tab value="echarts">图表概览</v-tab>
+      <v-tab value="overview">数据概览</v-tab>
+    </v-tabs>
+    <v-window v-model="tab" class="gacha-window">
+      <v-window-item value="echarts" class="gacha-window-item">
+        <gro-echarts v-model="gachaListCur" />
+      </v-window-item>
+      <v-window-item value="overview" class="gacha-window-item">
+        <gro-overview v-model="gachaListCur" />
+      </v-window-item>
+    </v-window>
+  </div>
 </template>
 <script lang="ts" setup>
 // vue
@@ -36,6 +37,8 @@ import { onMounted, ref } from "vue";
 import showSnackbar from "../../components/func/snackbar";
 import showConfirm from "../../components/func/confirm";
 import ToLoading from "../../components/overlay/to-loading.vue";
+import GroEcharts from "../../components/gachaRecord/gro-echarts.vue";
+import GroOverview from "../../components/gachaRecord/gro-overview.vue";
 // tauri
 import { dialog } from "@tauri-apps/api";
 // store
@@ -43,7 +46,6 @@ import { useUserStore } from "../../store/modules/user";
 // utils
 import { exportUigfData, readUigfData, verifyUigfData } from "../../utils/UIGF";
 import TGSqlite from "../../plugins/Sqlite";
-import GrOverview from "../../components/gachaRecord/gr-overview.vue";
 
 // todo: 不读取用户数据，直接读取数据库，获取 uid 列表，然后根据 uid 获取祈愿数据
 
@@ -63,7 +65,7 @@ onMounted(async () => {
   loadingTitle.value = `正在获取用户 ${user.gameUid} 的祈愿数据`;
   gachaListCur.value = await TGSqlite.getGachaRecords(user.gameUid);
   loadingTitle.value = `正在渲染数据`;
-  tab.value = "overview";
+  tab.value = "echarts";
   loading.value = false;
   showSnackbar({
     text: `成功获取 ${gachaListCur.value.length} 条祈愿数据`,
@@ -75,6 +77,14 @@ function isLogin(): boolean {
   return user?.gameUid !== undefined;
 }
 
+// 分享按钮点击事件
+async function handleShareBtn(): Promise<void> {
+  showSnackbar({
+    color: "grey",
+    text: `暂未开放`,
+  });
+}
+
 // 导入按钮点击事件
 async function handleImportBtn(): Promise<void> {
   const selectedFile = await dialog.open({
@@ -115,11 +125,19 @@ async function handleImportBtn(): Promise<void> {
       }
       loadingTitle.value = "正在导入祈愿数据";
       loading.value = true;
-      await importRemoteData(remoteData);
-      loading.value = false;
-      showSnackbar({
-        text: `成功导入 ${remoteData.list.length} 条祈愿数据`,
-      });
+      if (remoteData.list.length === 0) {
+        loading.value = false;
+        showSnackbar({
+          color: "error",
+          text: `导入的祈愿数据为空`,
+        });
+      } else {
+        await TGSqlite.mergeUIGF(user.gameUid, remoteData.list);
+        loading.value = false;
+        showSnackbar({
+          text: `成功导入 ${remoteData.list.length} 条祈愿数据`,
+        });
+      }
     }
   } else {
     showSnackbar({
@@ -129,18 +147,6 @@ async function handleImportBtn(): Promise<void> {
   }
 }
 
-// 导入
-async function importRemoteData(data: TGApp.Plugins.UIGF.FullData): Promise<void> {
-  if (data.list.length === 0) {
-    showSnackbar({
-      color: "error",
-      text: `导入的祈愿数据为空`,
-    });
-    return;
-  }
-  await TGSqlite.mergeUIGF(user.gameUid, data.list);
-}
-
 // 导出按钮点击事件
 async function handleExportBtn(): Promise<void> {
   const gachaList = await TGSqlite.getGachaRecords(user.gameUid);
@@ -200,9 +206,33 @@ async function handleExportBtn(): Promise<void> {
   color: #faf7e8 !important;
 }
 
+.gacha-container {
+  display: flex;
+  height: calc(100vh - 100px);
+  align-items: center;
+  justify-content: left;
+  border-radius: 5px;
+  box-shadow: 0 0 10px 0 var(--common-shadow-4);
+}
+
 .gacha-tab {
-  margin-bottom: 10px;
+  width: 100px;
+  height: 100%;
   color: var(--common-text-title);
   font-family: var(--font-title);
 }
+
+.gacha-window {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+}
+
+.gacha-window-item {
+  height: 100%;
+  padding: 5px;
+  border: 1px inset var(--common-shadow-8);
+  border-radius: 5px;
+  overflow-y: auto;
+}
 </style>