feat: New design of home page

xmcl-electron-app/main/ElectronLauncherApp.ts

@@ -1,14 +1,10 @@
 import { LauncherApp } from '@xmcl/runtime'
-import { ReleaseInfo } from '@xmcl/runtime-api'
 import { Shell } from '@xmcl/runtime/lib/app/Shell'
-import { Task } from '@xmcl/task'
 import { app, shell } from 'electron'
-import { join } from 'path'
 import { URL } from 'url'
 import Controller from './Controller'
 import defaultApp from './defaultApp'
 import { preloadServices } from './preloadServices'
-import { DownloadAppInstallerTask } from './utils/appinstaller'
 import { isDirectory } from './utils/fs'
 import { ElectronUpdater, setup } from './utils/updater'
 import { getWindowsUtils } from './utils/windowsUtils'

xmcl-electron-app/main/preloadServices.ts

@@ -1,4 +1,4 @@
-import { BaseService, CurseForgeService, InstanceUpdateService, DiagnoseService, ElyByService, ExternalAuthSkinService, FeedTheBeastService, ImportService, InstallService, InstanceInstallService, InstanceIOService, InstanceJavaService, InstanceLogService, InstanceManifestService, InstanceModsService, InstanceOptionsService, InstanceResourcePackService, InstanceSavesService, InstanceService, InstanceShaderPacksService, InstanceVersionService, JavaService, LaunchService, LittleSkinUserService, ModpackService, ModrinthService, OfficialUserService, OfflineUserService, PeerService, ResourcePackPreviewService, ResourceService, ServerStatusService, UserService, VersionService } from '@xmcl/runtime'
+import { BaseService, CurseForgeService, DiagnoseService, ElyByService, ExternalAuthSkinService, FeedTheBeastService, ImportService, InstallService, InstanceInstallService, InstanceIOService, InstanceJavaService, InstanceLogService, InstanceManifestService, InstanceModsService, InstanceOptionsService, InstanceResourcePackService, InstanceSavesService, InstanceScreenshotService, InstanceService, InstanceShaderPacksService, InstanceUpdateService, InstanceVersionService, JavaService, LaunchService, LittleSkinUserService, ModpackService, ModrinthService, OfficialUserService, OfflineUserService, PeerService, ResourcePackPreviewService, ResourceService, ServerStatusService, UserService, VersionService } from '@xmcl/runtime'
 import { NatService } from '@xmcl/runtime/lib/services/NatService'
 
 export const preloadServices = [
@@ -18,6 +18,7 @@ export const preloadServices = [
   InstanceResourcePackService,
   InstanceSavesService,
   InstanceService,
+  InstanceScreenshotService,
   InstanceShaderPacksService,
   InstanceUpdateService,
   InstanceVersionService,

xmcl-keystone-ui/src/views/Home.vue

@@ -3,7 +3,7 @@
     class="flex flex-col home-page flex-1 min-h-0 overflow-auto max-h-full"
   >
     <HomeHeader
-      class="pt-10 pb-5 px-10 sticky top-0 z-10"
+      class="pt-10 mb-4 sticky top-0 z-10"
       :focus-mode="isFocusMode"
     />
 

xmcl-keystone-ui/src/views/HomeCardBase.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-card class="flex flex-col h-full">
+    <v-card-title>
+      <v-icon left>
+        {{ icon }}
+      </v-icon>
+      {{ title }}
+    </v-card-title>
+    <!-- <v-card-subtitle>
+      别忘了开 Modloader 哦……
+    </v-card-subtitle> -->
+    <v-card-text class="flex-grow">
+      <template v-if="refreshing">
+        <v-skeleton-loader type="paragraph" />
+      </template>
+      <template v-else>
+        {{ text }}
+        <div
+          v-if="icons.length > 0"
+          class="mt-4"
+        >
+          <v-avatar
+            v-for="a of icons"
+            :key="a.name"
+            :color="a.color"
+            size="30px"
+            @mouseenter="onEnter($event, a.name)"
+            @mouseleave="onLeave($event)"
+          >
+            <img
+              v-if="a.icon"
+              :src="a.icon"
+            >
+            <span v-else> {{ a.name[0].toUpperCase() }} </span>
+          </v-avatar>
+        </div>
+      </template>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn
+        :disabled="refreshing"
+        :loading="refreshing"
+        color="teal accent-4"
+        text
+        @click="emit('navigate')"
+      >
+        {{ button }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+<script lang="ts" setup>
+import { kSharedTooltip } from '@/composables/sharedTooltip'
+
+defineProps<{
+  icon?: string
+  title: string
+  text: string
+  button: string
+  refreshing: boolean
+  icons: Array<{ name: string; icon?: string; color?: string }>
+}>()
+const emit = defineEmits(['navigate'])
+const tooltip = inject(kSharedTooltip)
+const onEnter = tooltip?.onEnter || (() => { })
+const onLeave = tooltip?.onLeave || (() => { })
+</script>