feat: Add new store page for modpacks

Voxelum · Dec 24, 2023 · 0abc260 · 0abc260
1 parent 4208950
commit 0abc260
Show file tree

Hide file tree

Showing 96 changed files with 2,981 additions and 1,328 deletions.
diff --git a/xmcl-keystone-ui/locales/en.yaml b/xmcl-keystone-ui/locales/en.yaml
@@ -1311,6 +1311,12 @@ shaderPack:
   selectSearchHint: Search and select Shader Pack
   showDirectory: Show shader pack directory
   showFile: Show this shader pack in folder
+store:
+  explore: Explore
+  latestMinecraft: Latest Minecraft Version
+  name: Modpack Market
+  popular: Popular Modpacks
+  recentUpdated: Recent Updated
 summery: Summery
 tag:
   create: Create Tag
@@ -1384,11 +1390,14 @@ universalDrop:
   title: Drop File(s) Here to Import as
   unknownResource: Unknown
 upstream:
+  downgrade: Downgrade
   missingModpackMetadata: >-
     The old modpack metadata not found.
 
     You can still upgrade, but the result might be wrong. Please backup your
     instance files.
+  onlyShowCurrentVersion: Only Show Current Minecraft Version
+  update: Update
 user:
   accessToken: Access Token
   authMode: Auth Service

diff --git a/xmcl-keystone-ui/locales/fr.yaml b/xmcl-keystone-ui/locales/fr.yaml
@@ -1448,6 +1448,7 @@ universalDrop:
   title: Déposez le ou les fichiers ici pour les importer en tant que
   unknownResource: Inconnu
 upstream:
+  downgrade: Rétrograder
   missingModpackMetadata: >-
     Les anciennes métadonnées du modpack sont introuvables.
                 

diff --git a/xmcl-keystone-ui/locales/ru.yaml b/xmcl-keystone-ui/locales/ru.yaml
@@ -1356,6 +1356,7 @@ universalDrop:
   title: Перетащите файл(ы) сюда, чтобы импортировать как
   unknownResource: Неизвестно
 upstream:
+  downgrade: Понизить версию
   missingModpackMetadata: >-
     Не найдена metadata старого модпака
 

diff --git a/xmcl-keystone-ui/locales/uk.yaml b/xmcl-keystone-ui/locales/uk.yaml
@@ -1408,6 +1408,7 @@ universalDrop:
   title: Перетягніть файл(и) сюди, щоб імпортувати як
   unknownResource: Невідомо
 upstream:
+  downgrade: Понизити
   missingModpackMetadata: >-
     Метадані старого модпакету не знайдено.
 

diff --git a/xmcl-keystone-ui/locales/zh-CN.yaml b/xmcl-keystone-ui/locales/zh-CN.yaml
@@ -136,7 +136,7 @@ curseforge:
     files: 文件
     images: 图片
   recentFiles: 近期文件
-  releasedDate: 创建日期
+  releasedDate: 发布日期
   search: 搜索
   texture-packs:
     description: 从 Curseforge 上安装资源包
@@ -1273,6 +1273,12 @@ shaderPack:
   selectSearchHint: 查看已选择的光影包
   showDirectory: 显示光影文件夹
   showFile: 在文件夹中显示此 shader pack
+store:
+  explore: 探索
+  latestMinecraft: 使用近期 Minecraft 版本
+  name: 整合包市场
+  popular: 热门整合包
+  recentUpdated: 最近更新
 summery: 简介
 tag:
   create: 创建标签
@@ -1341,8 +1347,11 @@ universalDrop:
   title: 将文件拖到这并导入为
   unknownResource: 无法解析
 upstream:
+  downgrade: 降级
   missingModpackMetadata: >-
     无法找到当前实例使用的整合包元数据。虽然你不会因此没法更新到最新的整合包版本，但这样更新的结果可能不正确，强烈推荐重新创建新实例。若要更新请备份你的文件。
+  onlyShowCurrentVersion: 只显示适合当前 Minecraft 的版本
+  update: 更新
 user:
   accessToken: 访问令牌
   authMode: 验证服务

diff --git a/xmcl-keystone-ui/src/assets/common.css b/xmcl-keystone-ui/src/assets/common.css
@@ -515,4 +515,14 @@ a {
 
 .dragover {
     @apply border-4 border-dashed border-yellow-400;
+}
+
+
+.hide-underline .theme--.v-text-field>.v-input__control>.v-input__slot:before {
+    border: none;
+}
+
+.hide-underline .v-text-field>.v-input__control>.v-input__slot:before {
+    border: none;
+    border-width: 0px;
 }
diff --git a/xmcl-keystone-ui/src/components/AppCopyChip.vue b/xmcl-keystone-ui/src/components/AppCopyChip.vue
@@ -2,9 +2,10 @@
   <v-chip
     v-shared-tooltip="value"
     v-ripple
-    color="grey darken-4"
+    color="dark:(grey darken-4)"
     class="cursor-pointer"
     :small="!large"
+    :outlined="outlined"
     @click="onInfoClicked(value)"
   >
     <span
@@ -26,6 +27,7 @@ import { vSharedTooltip } from '@/directives/sharedTooltip'
 defineProps<{
   value: string
   large?: boolean
+  outlined?: boolean
 }>()
 
 const onInfoClicked = (value: string) => {

diff --git a/xmcl-keystone-ui/src/components/AppImageDialog.vue b/xmcl-keystone-ui/src/components/AppImageDialog.vue
@@ -14,7 +14,7 @@
       <div class="absolute bottom-10 flex w-full flex-col items-center justify-center gap-2">
         {{ description }}
         <div v-if="date">
-          {{ getLocalDateString(date) }}
+          {{ getDateString(date) }}
         </div>
         <v-card class="hover:(scale-100 opacity-100) flex flex-grow-0 gap-2 rounded-xl px-2 py-1 opacity-60 transition">
           <v-btn
@@ -38,11 +38,12 @@
 </template>
 
 <script lang="ts" setup>
+import { useDateString } from '@/composables/date'
 import { kImageDialog } from '@/composables/imageDialog'
-import { getLocalDateString } from '@/util/date'
 import { injection } from '@/util/inject'
 
 const { isShown, image, description, date } = injection(kImageDialog)
+const { getDateString } = useDateString()
 const onOpen = () => {
   window.open(image.value, 'browser')
 }

diff --git a/xmcl-keystone-ui/src/components/CategoryChip.vue b/xmcl-keystone-ui/src/components/CategoryChip.vue
@@ -0,0 +1,37 @@
+<template>
+  <v-chip
+    label
+    :small="small"
+    :outlined="outlined"
+    @click="$emit('click')"
+  >
+    <v-avatar
+      v-if="item.icon?.startsWith('http')"
+      left
+    >
+      <v-img
+        :src="item.icon"
+      />
+    </v-avatar>
+    <v-avatar
+      v-else-if="item.icon"
+      left
+      v-html="item.icon"
+    />
+    {{ item.text }}
+  </v-chip>
+</template>
+<script setup lang="ts">
+
+export interface CategoryChipProps {
+  text: string
+  icon?: string
+}
+
+defineProps<{
+  item: CategoryChipProps
+  small?: boolean
+  outlined?: boolean
+}>()
+
+</script>
diff --git a/xmcl-keystone-ui/src/components/ErrorView.vue b/xmcl-keystone-ui/src/components/ErrorView.vue
@@ -9,7 +9,7 @@
     >
       error
     </v-icon>
-    <div class="max-w-full select-text break-words text-center text-3xl font-bold">
+    <div class="max-w-full select-text overflow-auto break-words text-center text-3xl font-bold">
       {{ tError(error) }}
     </div>
     <div

diff --git a/xmcl-keystone-ui/src/components/GalleryGrid.vue b/xmcl-keystone-ui/src/components/GalleryGrid.vue
@@ -2,14 +2,24 @@
   <div class="relative flex gap-4">
     <div
       class="absolute left-0 flex h-full items-center lg:static"
-      @click="prev"
     >
-      <v-btn icon>
+      <v-btn
+        icon
+        @click="prev"
+      >
         <v-icon>
           chevron_left
         </v-icon>
       </v-btn>
     </div>
+    <!-- <v-window
+      v-model="index"
+      class="elevation-1"
+    >
+      <v-window-item
+        v-for="(currentGroup, i) of grouped"
+        :key="i"
+      > -->
     <Transition
       mode="out-in"
       transition="fade-transition"
@@ -25,13 +35,12 @@
         <v-card
           v-for="g of currentGroup"
           :key="g.id"
-          class="flex h-40 max-h-40 max-w-full overflow-auto"
+          class="flex h-40 max-h-40 max-w-full overflow-auto overflow-x-hidden"
           @click="$emit('enter', g)"
         >
           <v-img
-            v-if="g.logo"
             :src="g.logo"
-            class="white--text w-30"
+            class="white--text max-w-36 min-w-36"
           />
           <div class="flex max-w-full flex-col overflow-auto">
             <v-card-title class="ml-1 max-w-full overflow-hidden overflow-ellipsis whitespace-nowrap pt-3">
@@ -67,6 +76,7 @@
               <v-chip
                 v-for="c of g.categories.slice(0, 2)"
                 :key="c"
+                class="hidden lg:block"
                 :ripple="false"
                 small
               >
@@ -77,11 +87,15 @@
         </v-card>
       </div>
     </Transition>
+    <!-- </v-window-item>
+    </v-window> -->
     <div
       class="absolute right-0 flex h-full items-center lg:static"
-      @click="next"
     >
-      <v-btn icon>
+      <v-btn
+        icon
+        @click="next"
+      >
         <v-icon>
           chevron_right
         </v-icon>

diff --git a/xmcl-keystone-ui/src/components/GalleryList.vue b/xmcl-keystone-ui/src/components/GalleryList.vue
@@ -1,22 +1,32 @@
 <template>
-  <div class="relative flex select-none gap-4">
+  <div class="relative flex w-full select-none gap-4">
     <div
       class="absolute left-0 flex h-full items-center lg:static"
-      @click="prev"
     >
-      <v-btn icon>
+      <v-btn
+        icon
+        @click="prev"
+      >
         <v-icon>
           chevron_left
         </v-icon>
       </v-btn>
     </div>
+    <!-- <v-window
+      v-model="index"
+      class="elevation-1 w-full"
+    >
+      <v-window-item
+        v-for="(currentGroup, i) of grouped"
+        :key="i"
+      > -->
     <Transition
       mode="out-in"
       transition="fade-transition"
     >
       <div
         :key="index"
-        class="grid gap-4 overflow-auto"
+        class="grid w-full gap-4 overflow-auto"
         :style="{
           gridTemplateColumns: `repeat(${size}, minmax(0, 1fr))`,
         }"
@@ -25,6 +35,7 @@
           v-for="g of currentGroup"
           :key="g.id"
           class="flex flex-col overflow-auto"
+          outlined
           @click="$emit('enter', g)"
         >
           <v-img
@@ -33,7 +44,7 @@
             height="200px"
             class="flex-shrink flex-grow-0"
           />
-          <v-card-subtitle class="whitespace-nowrap">
+          <v-card-subtitle class="h-[98px] flex-grow">
             <v-icon
               class="mr-1"
               size="16"
@@ -71,11 +82,15 @@
         </v-card>
       </div>
     </Transition>
+    <!-- </v-window-item>
+    </v-window> -->
     <div
       class="absolute right-0 flex h-full items-center lg:static"
-      @click="next"
     >
-      <v-btn icon>
+      <v-btn
+        icon
+        @click="next"
+      >
         <v-icon>
           chevron_right
         </v-icon>
@@ -129,8 +144,6 @@ const grouped = computed(() => {
 const index = ref(0)
 const currentGroup = computed(() => grouped.value[index.value])
 
-const { getDateString } = useDateString()
-
 const next = () => {
   index.value = (index.value + 1) % grouped.value.length
 }

diff --git a/xmcl-keystone-ui/src/components/Hint.vue b/xmcl-keystone-ui/src/components/Hint.vue
@@ -13,7 +13,7 @@
       <div
         v-if="!button"
         class="headline text-button select-none text-center"
-        :style="{ 'color': color }"
+        :style="{ 'color': color, }"
       >
         <v-icon
           :style="{ 'font-size' : `${size}px`, 'color': color }"

diff --git a/xmcl-keystone-ui/src/views/HomeCardBase.vue → xmcl-keystone-ui/src/components/HomeCard.vue b/xmcl-keystone-ui/src/views/HomeCardBase.vue → xmcl-keystone-ui/src/components/HomeCard.vue
diff --git a/xmcl-keystone-ui/src/components/InfoHighlight.vue b/xmcl-keystone-ui/src/components/InfoHighlight.vue
@@ -0,0 +1,29 @@
+<template>
+  <span>
+    <div class="text-center text-2xl font-bold text-gray-600 dark:text-gray-300">
+      {{ value.value }}
+    </div>
+    <div
+      class="flex w-full items-center justify-center"
+    >
+      <v-icon
+        class="material-icons-outlined"
+        left
+        small
+      >
+        {{ value.icon }}
+      </v-icon>
+      <span class="whitespace-nowrap">{{ value.name }}</span>
+    </div>
+  </span>
+</template>
+<script setup lang="ts">
+export interface Highlight {
+  value: string | number
+  icon: string
+  name: string
+}
+defineProps<{
+  value: Highlight
+}>()
+</script>