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

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>