🌱 草创概览饼图，echarts调参苦手

src/components/gachaRecord/gr-echarts.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-chart class="echarts-box" :option="props.options" autoresize />
+</template>
+<script lang="ts" setup>
+// vue
+import { onMounted, provide } from "vue";
+import VChart, { THEME_KEY } from "vue-echarts";
+// tauri
+import { event } from "@tauri-apps/api";
+// store
+import { useAppStore } from "../../store/modules/app";
+// echarts
+import { use } from "echarts/core";
+import { LegendComponent, TitleComponent, TooltipComponent } from "echarts/components";
+import { PieChart } from "echarts/charts";
+import { LabelLayout } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+
+// types
+import { type EChartsOption } from "echarts";
+import showSnackbar from "../func/snackbar";
+
+export interface GachaEchartsProps {
+  echartsId: string;
+  options: EChartsOption;
+}
+
+const props = defineProps<GachaEchartsProps>();
+
+// store
+const appStore = useAppStore();
+
+use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);
+
+// 获取当前主题
+const theme = appStore.theme;
+provide(THEME_KEY, theme === "dark" ? "dark" : "light");
+
+onMounted(async () => {
+  await listenOnTheme();
+});
+
+// 监听主题变化
+async function listenOnTheme(): Promise<void> {
+  await event.listen("readTheme", (e) => {
+    const themeGet = <string>e.payload;
+    if (theme !== themeGet) {
+      console.info(`主题已切换为 ${themeGet}，请刷新页面`);
+      showSnackbar({
+        text: `主题已切换为 ${themeGet}，即将刷新页面`,
+      });
+      setTimeout(() => {
+        window.location.reload();
+      }, 1500);
+    }
+  });
+}
+</script>
+<style lang="css" scoped>
+.echarts-box {
+  width: 800px;
+  height: 600px;
+  padding: 10px;
+  border-radius: 10px;
+  margin: 10px;
+  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
+}
+</style>

src/components/gachaRecord/gr-overview.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="gro-container">
+    <v-chart :option="getPoolData()" autoresize class="gro-chart" />
+  </div>
+</template>
+<script lang="ts" setup>
+// vue
+import { onMounted, provide } from "vue";
+import VChart, { THEME_KEY } from "vue-echarts";
+// tauri
+import { event } from "@tauri-apps/api";
+// store
+import { useAppStore } from "../../store/modules/app";
+// echarts
+import { use } from "echarts/core";
+import { LegendComponent, TitleComponent, TooltipComponent } from "echarts/components";
+import { PieChart } from "echarts/charts";
+import { LabelLayout } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+import { type EChartsOption } from "echarts";
+import showSnackbar from "../func/snackbar";
+
+use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);
+// 获取当前主题
+const theme = useAppStore().theme;
+provide(THEME_KEY, theme === "dark" ? "dark" : "light");
+
+interface GachaOverviewProps {
+  modelValue: TGApp.Sqlite.GachaRecords.SingleTable[];
+}
+
+const props = defineProps<GachaOverviewProps>();
+
+onMounted(async () => {
+  await listenOnTheme();
+});
+
+// data
+const overviewDefaultData = <EChartsOption>{
+  title: [
+    {
+      text: "数据概览",
+      left: "center",
+    },
+    {
+      text: "卡池分布",
+      left: "14%",
+      top: "45%",
+    },
+    {
+      text: "星级分布",
+      left: "14%",
+      top: "95%",
+    },
+    {
+      text: "武器分布",
+      left: "48%",
+      top: "20%",
+    },
+    {
+      text: "角色分布",
+      left: "80%",
+      top: "20%",
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+  // 标签
+  // legend:{},
+  series: [
+    {
+      name: "卡池分布",
+      type: "pie",
+      radius: "50%",
+      data: [],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0, 0, 0, 0.5)",
+        },
+      },
+      left: 0,
+      right: "66.6667%",
+      top: 0,
+      bottom: "50%",
+    },
+    {
+      name: "星级分布",
+      type: "pie",
+      radius: "50%",
+      data: [],
+      left: 0,
+      right: "66.6667%",
+      top: "50%",
+      bottom: "0",
+    },
+    {
+      name: "武器分布",
+      type: "pie",
+      radius: [40, 150],
+      center: ["50%", "50%"],
+      roseType: "area",
+      itemStyle: {
+        borderRadius: 8,
+      },
+      data: [],
+      left: "33.3333%",
+      right: "33.3333%",
+      datasetIndex: 3,
+    },
+    {
+      name: "角色分布",
+      type: "pie",
+      radius: "50%",
+      data: [],
+      left: "66.6667%",
+      right: 0,
+    },
+  ],
+};
+
+// 监听主题变化
+async function listenOnTheme(): Promise<void> {
+  await event.listen("readTheme", (e) => {
+    const themeGet = <string>e.payload;
+    if (theme !== themeGet) {
+      console.info(`主题已切换为 ${themeGet}，请刷新页面`);
+      showSnackbar({
+        text: `主题已切换为 ${themeGet}，即将刷新页面`,
+      });
+      setTimeout(() => {
+        window.location.reload();
+      }, 200);
+    }
+  });
+}
+
+// 获取卡池分布的数据
+function getPoolData(): EChartsOption {
+  const data = JSON.parse(JSON.stringify(overviewDefaultData));
+  data.title[0].subtext = `共 ${props.modelValue.length} 条数据`;
+  data.series[0].data = [
+    { value: props.modelValue.filter((item) => item.uigfType === "200").length, name: "常驻祈愿" },
+    {
+      value: props.modelValue.filter((item) => item.uigfType === "301").length,
+      name: "角色活动祈愿",
+    },
+    {
+      value: props.modelValue.filter((item) => item.uigfType === "302").length,
+      name: "武器活动祈愿",
+    },
+  ];
+  data.series[1].data = [
+    { value: props.modelValue.filter((item) => item.rank === "3").length, name: "3星" },
+    { value: props.modelValue.filter((item) => item.rank === "4").length, name: "4星" },
+    { value: props.modelValue.filter((item) => item.rank === "5").length, name: "5星" },
+  ];
+  const tempSet = new Set<string>();
+  const tempRecord = new Map<string, number>();
+  props.modelValue
+    .filter((item) => item.type === "武器")
+    .map((item) => {
+      if (tempSet.has(item.name)) {
+        tempRecord.set(item.name, tempRecord.get(item.name)! + 1);
+      } else {
+        tempSet.add(item.name);
+        tempRecord.set(item.name, 1);
+      }
+    });
+  data.series[2].data = Array.from(tempRecord).map((item) => {
+    return {
+      value: item[1],
+      name: item[0],
+    };
+  });
+  tempSet.clear();
+  tempRecord.clear();
+  props.modelValue
+    .filter((item) => item.type === "角色")
+    .map((item) => {
+      if (tempSet.has(item.name)) {
+        tempRecord.set(item.name, tempRecord.get(item.name)! + 1);
+      } else {
+        tempSet.add(item.name);
+        tempRecord.set(item.name, 1);
+      }
+    });
+  data.series[3].data = Array.from(tempRecord).map((item) => {
+    return {
+      value: item[1],
+      name: item[0],
+    };
+  });
+  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/pages/User/Gacha.vue

@@ -1,8 +1,34 @@
 <template>
   <ToLoading v-model="loading" :title="loadingTitle" />
-  <h1>祈愿数据获取、展示、统计</h1>
-  <v-btn @click="handleImportBtn">导入</v-btn>
-  <v-btn @click="handleExportBtn">导出</v-btn>
+  <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>
+    </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>
+    </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>
 </template>
 <script lang="ts" setup>
 // vue
@@ -17,6 +43,9 @@ 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 获取祈愿数据
 
 // store
 const userStore = useUserStore();
@@ -27,11 +56,25 @@ const loadingTitle = ref<string>();
 
 // data
 const user = userStore.getCurAccount();
+const gachaListCur = ref<TGApp.Sqlite.GachaRecords.SingleTable[]>([]);
+const tab = ref<string>("");
 
-onMounted(() => {
+onMounted(async () => {
+  loadingTitle.value = `正在获取用户 ${user.gameUid} 的祈愿数据`;
+  gachaListCur.value = await TGSqlite.getGachaRecords(user.gameUid);
+  loadingTitle.value = `正在渲染数据`;
+  tab.value = "overview";
   loading.value = false;
+  showSnackbar({
+    text: `成功获取 ${gachaListCur.value.length} 条祈愿数据`,
+  });
 });
 
+// 判断用户是否登录
+function isLogin(): boolean {
+  return user?.gameUid !== undefined;
+}
+
 // 导入按钮点击事件
 async function handleImportBtn(): Promise<void> {
   const selectedFile = await dialog.open({
@@ -144,3 +187,22 @@ async function handleExportBtn(): Promise<void> {
   });
 }
 </script>
+<style lang="css" scoped>
+.gacha-top-bar {
+  background: rgb(0 0 0/50%);
+  color: #f4d8a8;
+  font-family: var(--font-title);
+}
+
+.gacha-top-btn {
+  margin: 0 10px;
+  background: #393b40;
+  color: #faf7e8 !important;
+}
+
+.gacha-tab {
+  margin-bottom: 10px;
+  color: var(--common-text-title);
+  font-family: var(--font-title);
+}
+</style>