feat: New mod install cart UI

xmcl-keystone-ui/locales/en.yaml

@@ -373,20 +373,24 @@ instance:
   fileApi: The synchronize file server API url
   fileApiHint: The url to synchronize instance files from a remote config server.
   gameVersion: Game Version
+  icon: Profile Icon
+  iconUrl: Icon Url
   includeVersion: Include Version | Include Versions
   lastPlayed: Last Played
   launchArguments: Launch Arguments Preview
   mcOptions: Minecraft Options
   mcOptionsHint: Additional Minecraft launch arugments
   name: Profile Name
-  icon: Profile Icon
-  iconUrl: Icon Url
   nameHint: The name used to identify the game
   neverPlayed: Never Played
   openCrashReportFolder: Open Crash Report Folder
   openLogFolder: Open Log Folder
   playtime: Playtime
   requireName: The name is required
+  setting:
+    reset: Reset
+    save: Save
+    unsaved: Your modification is unsaved!
   showInstance: Show instance folder
   versionHint: The Minecraft version of this game
   vmOptions: JVM Options
@@ -405,6 +409,7 @@ instanceSetting:
   fastLaunch: Turbo Launch
   fastLaunchHint: Ignore the user status and existed unfixed problems
   hideLauncher: Hide the launcher after launch
+  icon: Pick an image
   showLog: Show Minecraft Log
   showLogHint: This will popup a window to stream Minecraft log after game started
 instanceTemplate:
@@ -431,6 +436,9 @@ instances:
   refreshServers: Refresh Servers
 issue:
   name: Issues
+items:
+  count: '{count} items'
+  total: '{total} total'
 java:
   allocatedLong: Use system default java
   allocatedShort: Auto Allocated
@@ -575,7 +583,6 @@ minecraftVersion:
   showAlpha: Show Snapshot
   snapshot: Snapshot
 mod:
-  showDirectory: Show mods directory
   acceptVersion: Accept {version}
   backToAllMods: Back to All Mods
   compatible: Compatible Mod.
@@ -599,11 +606,16 @@ mod:
   searchOnCurseforge: Search in curseforge
   searchOnModrinth: Search {name} in Modrinth
   selected: Selected Mods
+  showDirectory: Show mods directory
   showFile: Show the mod path {file}
   showInCurseforge: Show the mod in curseforge
   showInModrinth: Show {name} in Modrinth
   showIncompatible: Show Incompatible Mods
   unselected: Unselected Mods
+modInstall:
+  install: Install
+  pending: Pending to install
+  search: Search Result
 modSearchType:
   all: All
   local: Local

xmcl-keystone-ui/locales/zh-CN.yaml

@@ -400,6 +400,10 @@ instance:
   openLogFolder: 打开日志文件夹
   playtime: 游玩时间
   requireName: 必须填写名称
+  setting:
+    reset: 重置
+    save: 保存
+    unsaved: 注意！你尚未保存更改！
   showInstance: 显示文件夹
   versionHint: 这个游戏使用的Minecraft版本
   vmOptions: JVM 启动选项
@@ -418,6 +422,7 @@ instanceSetting:
   fastLaunch: 快速启动
   fastLaunchHint: 启动时跳过刷新用户和没有修复的问题
   hideLauncher: Minecraft 启动后隐藏启动器
+  icon: 选择图片
   showLog: Minecraft 启动后显示日志
   showLogHint: 游戏开启后将弹出一个显示 Minecraft 日志的窗口
 instanceTemplate:
@@ -613,6 +618,10 @@ mod:
   showInModrinth: 在 Modrinth 中显示 {name}
   showIncompatible: 显示不兼容 Mods
   unselected: 未选 Mods
+modInstall:
+  install: 安装
+  pending: 安装列表
+  search: 搜索结果
 modSearchType:
   all: 所有
   local: 本地

xmcl-keystone-ui/src/assets/common.css

@@ -9,8 +9,8 @@ input::-webkit-inner-spin-button {
     --warning-color: #e65100;
     --warning-color-decent: #c45920;
     --common-color: #424242;
-    --border-dark: hsla(0,0%,100%,.12);
-    --border-light: hsla(0,0%,100%,.12);
+    --border-dark: hsla(0, 0%, 100%, .12);
+    --border-light: hsla(0, 0%, 100%, .12);
 }
 
 p {
@@ -77,12 +77,21 @@ html ::-webkit-scrollbar {
 
 ::-webkit-scrollbar {
     width: 8px;
+    height: 8px;
     cursor: pointer;
+    background: transparent;
     z-index: 1000;
 }
 
+::-webkit-resizer,
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
 ::-webkit-scrollbar-thumb {
     width: 8px;
+    height: 8px;
     cursor: pointer;
     background: rgba(155, 155, 155, 0.5);
     transition: all 1s;
@@ -107,6 +116,7 @@ html ::-webkit-scrollbar {
 .vue-grid-item.vue-grid-placeholder {
     background: rgba(0, 0, 0, 0.3) !important;
 }
+
 .dark .vue-grid-item.vue-grid-placeholder {
     background: rgba(255, 255, 255, 0.5) !important;
 }

xmcl-keystone-ui/src/components/Hint.vue

@@ -12,7 +12,7 @@
     >
       <div
         v-if="!button"
-        class="headline text-center select-none"
+        class="headline text-center select-none text-button"
         :style="{ 'color': color }"
       >
         <v-icon
@@ -68,6 +68,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  secondary: {
+    type: Boolean,
+    default: false,
+  },
 })
 </script>