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

2026-03-28 05:59:46 +08:00 · 2023-08-30 00:30:36 +08:00
parent 19dcd54be0
commit 2cac0c95bd
5 changed files with 422 additions and 5 deletions
--- a/package.json
+++ b/package.json
@@ -50,12 +50,14 @@
    "@mdi/font": "7.2.96",
    "@tauri-apps/api": "^1.4.0",
    "clipboard": "^2.0.11",
+    "echarts": "^5.4.3",
    "html2canvas": "^1.4.1",
    "js-md5": "^0.7.3",
    "pinia": "^2.1.6",
    "pinia-plugin-persistedstate": "^3.2.0",
    "tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql#v1",
    "vue": "^3.3.4",
+    "vue-echarts": "^6.6.1",
    "vue-json-viewer": "^3.0.4",
    "vue-router": "^4.2.4",
    "vuetify": "^3.3.14"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ dependencies:
  clipboard:
    specifier: ^2.0.11
    version: 2.0.11
+  echarts:
+    specifier: ^5.4.3
+    version: 5.4.3
  html2canvas:
    specifier: ^1.4.1
    version: 1.4.1
@@ -32,6 +35,9 @@ dependencies:
  vue:
    specifier: ^3.3.4
    version: 3.3.4
+  vue-echarts:
+    specifier: ^6.6.1
+    version: 6.6.1(echarts@5.4.3)(vue@3.3.4)
  vue-json-viewer:
    specifier: ^3.0.4
    version: 3.0.4(vue@3.3.4)
@@ -1151,6 +1157,7 @@ packages:

  /boolean@3.2.0:
    resolution: {integrity: sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==}
+    requiresBuild: true
    dev: true
    optional: true

@@ -1356,6 +1363,7 @@ packages:

  /config-chain@1.1.13:
    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+    requiresBuild: true
    dependencies:
      ini: 1.3.8
      proto-list: 1.2.4
@@ -1563,6 +1571,7 @@ packages:

  /detect-node@2.1.0:
    resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
+    requiresBuild: true
    dev: true
    optional: true

@@ -1622,6 +1631,13 @@ packages:
    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
    dev: true

+  /echarts@5.4.3:
+    resolution: {integrity: sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==}
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.4.4
+    dev: false
+
  /ee-first@1.1.1:
    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
    dev: true
@@ -1779,6 +1795,7 @@ packages:

  /es6-error@4.1.1:
    resolution: {integrity: sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==}
+    requiresBuild: true
    dev: true
    optional: true

@@ -3008,6 +3025,7 @@ packages:

  /json-stringify-safe@5.0.1:
    resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
+    requiresBuild: true
    dev: true
    optional: true

@@ -3171,6 +3189,7 @@ packages:
  /matcher@3.0.0:
    resolution: {integrity: sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==}
    engines: {node: '>=10'}
+    requiresBuild: true
    dependencies:
      escape-string-regexp: 4.0.0
    dev: true
@@ -3343,6 +3362,7 @@ packages:
  /npm-conf@1.1.3:
    resolution: {integrity: sha512-Yic4bZHJOt9RCFbRP3GgpqhScOY4HH3V2P8yBj6CeYq118Qr+BLXqT2JvpJ00mryLESpgOxf5XlFv4ZjXxLScw==}
    engines: {node: '>=4'}
+    requiresBuild: true
    dependencies:
      config-chain: 1.1.13
      pify: 3.0.0
@@ -3579,6 +3599,7 @@ packages:
  /pify@3.0.0:
    resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
    engines: {node: '>=4'}
+    requiresBuild: true
    dev: true
    optional: true

@@ -3711,6 +3732,7 @@ packages:

  /proto-list@1.2.4:
    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
+    requiresBuild: true
    dev: true
    optional: true

@@ -3815,6 +3837,10 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /resize-detector@0.3.0:
+    resolution: {integrity: sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==}
+    dev: false
+
  /resolve-from@4.0.0:
    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
    engines: {node: '>=4'}
@@ -3867,6 +3893,7 @@ packages:
  /roarr@2.15.4:
    resolution: {integrity: sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A==}
    engines: {node: '>=8.0'}
+    requiresBuild: true
    dependencies:
      boolean: 3.2.0
      detect-node: 2.1.0
@@ -3925,6 +3952,7 @@ packages:

  /semver-compare@1.0.0:
    resolution: {integrity: sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==}
+    requiresBuild: true
    dev: true
    optional: true

@@ -3977,6 +4005,7 @@ packages:
  /serialize-error@7.0.1:
    resolution: {integrity: sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==}
    engines: {node: '>=10'}
+    requiresBuild: true
    dependencies:
      type-fest: 0.13.1
    dev: true
@@ -4135,6 +4164,7 @@ packages:

  /sprintf-js@1.1.2:
    resolution: {integrity: sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==}
+    requiresBuild: true
    dev: true
    optional: true

@@ -4535,6 +4565,10 @@ packages:
      strip-bom: 3.0.0
    dev: true

+  /tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+    dev: false
+
  /tslib@2.6.0:
    resolution: {integrity: sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==}
    dev: true
@@ -4542,6 +4576,7 @@ packages:
  /tunnel@0.0.6:
    resolution: {integrity: sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==}
    engines: {node: '>=0.6.11 <=0.7.0 || >=0.7.3'}
+    requiresBuild: true
    dev: true
    optional: true

@@ -4555,6 +4590,7 @@ packages:
  /type-fest@0.13.1:
    resolution: {integrity: sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==}
    engines: {node: '>=10'}
+    requiresBuild: true
    dev: true
    optional: true

@@ -4716,6 +4752,21 @@ packages:
    optionalDependencies:
      fsevents: 2.3.3

+  /vue-demi@0.13.11(vue@3.3.4):
+    resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.3.4
+    dev: false
+
  /vue-demi@0.14.5(vue@3.3.4):
    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
    engines: {node: '>=12'}
@@ -4731,6 +4782,23 @@ packages:
      vue: 3.3.4
    dev: false

+  /vue-echarts@6.6.1(echarts@5.4.3)(vue@3.3.4):
+    resolution: {integrity: sha512-EpreTzlNeJ+eaUn0AhXEmKJk98xJGecgTqAdyZovoXWnhTxnlW2HuBM0ei3y8rLw1JCUabf8/sYvxjlr8SzBKQ==}
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.5
+      echarts: ^5.4.1
+      vue: ^2.6.12 || ^3.1.1
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      echarts: 5.4.3
+      resize-detector: 0.3.0
+      vue: 3.3.4
+      vue-demi: 0.13.11(vue@3.3.4)
+    dev: false
+
  /vue-eslint-parser@9.3.1(eslint@8.48.0):
    resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}
    engines: {node: ^14.17.0 || >=16.0.0}
@@ -4940,8 +5008,14 @@ packages:
    engines: {node: '>=10'}
    dev: true

+  /zrender@5.4.4:
+    resolution: {integrity: sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==}
+    dependencies:
+      tslib: 2.3.0
+    dev: false
+
  github.com/tauri-apps/tauri-plugin-sql/b8fd19dac907cc8c3d78681cd4803a326b8b861e:
-    resolution: {commit: b8fd19dac907cc8c3d78681cd4803a326b8b861e, repo: git+ssh://git@github.com/tauri-apps/tauri-plugin-sql.git, type: git}
+    resolution: {tarball: https://codeload.github.com/tauri-apps/tauri-plugin-sql/tar.gz/b8fd19dac907cc8c3d78681cd4803a326b8b861e}
    name: tauri-plugin-sql-api
    version: 0.0.0
    dependencies:
--- a/src/components/gachaRecord/gr-echarts.vue
+++ b/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>
--- a/src/components/gachaRecord/gr-overview.vue
+++ b/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>
--- a/src/pages/User/Gacha.vue
+++ b/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>