feat: Support change icon

Voxelum · May 3, 2023 · 9c0a377 · 9c0a377
1 parent f786c33
commit 9c0a377
Show file tree

Hide file tree

Showing 8 changed files with 265 additions and 64 deletions.
diff --git a/xmcl-keystone-ui/locales/en.yaml b/xmcl-keystone-ui/locales/en.yaml
@@ -379,6 +379,8 @@ instance:
   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

diff --git a/xmcl-keystone-ui/src/composables/instanceEdit.ts b/xmcl-keystone-ui/src/composables/instanceEdit.ts
@@ -1,13 +1,12 @@
-import { InjectionKey } from 'vue'
-import { BaseServiceKey, InstanceServiceKey, RuntimeVersions } from '@xmcl/runtime-api'
+import { InjectionKey, Ref } from 'vue'
+import { BaseServiceKey, Instance, InstanceServiceKey, RuntimeVersions } from '@xmcl/runtime-api'
 import { useService } from '@/composables'
 
 export const InstanceEditInjectionKey: InjectionKey<ReturnType<typeof useInstanceEdit>> = Symbol('InstanceEdit')
 
-export function useInstanceEdit() {
-  const { state, editInstance: edit } = useService(InstanceServiceKey)
+export function useInstanceEdit(instance: Ref<Instance | undefined>) {
+  const { editInstance: edit } = useService(InstanceServiceKey)
   const { state: baseState } = useService(BaseServiceKey)
-  const instance = computed(() => state.instances.find(s => s.path === state.path))
 
   const data = reactive({
     name: instance.value?.name ?? '',
@@ -43,6 +42,8 @@ export function useInstanceEdit() {
 
     javaPath: instance.value?.java,
 
+    icon: instance.value?.icon,
+
     loading: true,
   })
 
@@ -108,6 +109,79 @@ export function useInstanceEdit() {
     set: (v) => { data.showLog = v },
   })
 
+  const isModified = computed(() => {
+    const current = instance.value
+    if (!current) {
+      return true
+    }
+    if (current.name !== data.name) {
+      return true
+    }
+    if (current.url !== data.url) {
+      return true
+    }
+    if (current.fileApi !== data.fileServerApi) {
+      return true
+    }
+    if (current.minMemory !== data.minMemory) {
+      return true
+    }
+    if (current.maxMemory !== data.maxMemory) {
+      return true
+    }
+    if (current.vmOptions?.join(' ') !== data.vmOptions) {
+      return true
+    }
+    if (current.mcOptions?.join(' ') !== data.mcOptions) {
+      return true
+    }
+    if (current.assignMemory !== data.assignMemory) {
+      return true
+    }
+    if (current.version !== data.version) {
+      return true
+    }
+
+    if (current.runtime.minecraft !== data.runtime.minecraft) {
+      return true
+    }
+    if (current.runtime.forge !== data.runtime.forge) {
+      return true
+    }
+    if (current.runtime.fabricLoader !== data.runtime.fabricLoader) {
+      return true
+    }
+    if (current.runtime.quiltLoader !== data.runtime.quiltLoader) {
+      return true
+    }
+    if (current.runtime.optifine !== data.runtime.optifine) {
+      return true
+    }
+
+    if (current.fastLaunch !== data.fastLaunch) {
+      return true
+    }
+    if (current.showLog !== data.showLog) {
+      return true
+    }
+    if (current.hideLauncher !== data.hideLauncher) {
+      return true
+    }
+    if (current.java !== data.javaPath) {
+      return true
+    }
+    if (current.icon !== data.icon) {
+      return true
+    }
+    if (current.server?.host && current.server?.host !== data.host) {
+      return true
+    }
+    if (current.server?.port && current.server?.port !== Number.parseInt(data.port, 10)) {
+      return true
+    }
+    return false
+  })
+
   async function save() {
     const payload = {
       name: data.name,
@@ -124,6 +198,7 @@ export function useInstanceEdit() {
       showLog: data.showLog,
       hideLauncher: data.hideLauncher,
       java: data.javaPath,
+      icon: data.icon,
     }
     if (!instance.value?.server) {
       await edit({
@@ -140,6 +215,7 @@ export function useInstanceEdit() {
         },
       })
     }
+    data.icon = instance.value?.icon
   }
   function load() {
     data.loading = false
@@ -152,8 +228,13 @@ export function useInstanceEdit() {
       data.author = current.author
       data.fileServerApi = current.fileApi
       data.description = current.description || ''
-      data.runtime = current.runtime
+      data.runtime.fabricLoader = current.runtime.fabricLoader
+      data.runtime.forge = current.runtime.forge
+      data.runtime.minecraft = current.runtime.minecraft
+      data.runtime.optifine = current.runtime.optifine
+      data.runtime.quiltLoader = current.runtime.quiltLoader
       data.version = current.version
+      data.icon = current.icon
 
       if (current.server) {
         data.host = current.server.host
@@ -171,6 +252,7 @@ export function useInstanceEdit() {
   }
 
   return {
+    isModified,
     isGlobalAssignMemory,
     isGlobalMinMemory,
     isGlobalMaxMemory,

diff --git a/xmcl-keystone-ui/src/views/BaseSetting.vue b/xmcl-keystone-ui/src/views/BaseSetting.vue
@@ -1,62 +1,80 @@
 <template>
-  <v-container
-    fill-height
-    class="overflow-auto"
-  >
-    <v-layout
-      wrap
-      fill-height
+  <div class="mx-6">
+    <BaseSettingGeneral />
+    <BaseSettingSync />
+    <BaseSettingModpack v-if="!isServer" />
+    <BaseSettingServer v-else />
+    <BaseSettingJava />
+    <BaseSettingLaunch />
+
+    <v-snackbar
+      color="black"
+      :timeout="-1"
+
+      :value="edit.isModified"
     >
-      <v-flex
-        d-flex
-        xs12
-        tag="h2"
-        class="headline"
-      >
-        {{ t("BaseSetting.title") }}
-      </v-flex>
-      <BaseSettingGeneral />
-      <BaseSettingSync />
-      <BaseSettingModpack v-if="!isServer" />
-      <BaseSettingServer v-else />
-      <BaseSettingJava />
-      <BaseSettingLaunch />
-    </v-layout>
-  </v-container>
+      <div class="mr-4 text-button">
+        {{ t('instance.setting.unsaved') }}
+      </div>
+
+      <template #action="{ attrs }">
+        <div
+          class="flex gap-1 mr-2"
+          v-bind="attrs"
+        >
+          <v-btn
+            text
+            @click="onReset"
+          >
+            {{ t('instance.setting.reset') }}
+          </v-btn>
+
+          <v-btn
+            color="primary"
+            @click="edit.save"
+          >
+            {{ t('instance.setting.save') }}
+          </v-btn>
+        </div>
+      </template>
+    </v-snackbar>
+  </div>
 </template>
 
 <script lang=ts setup>
-import { useInstance, useInstanceIsServer } from '../composables/instance'
+import { useAutoSaveLoad } from '@/composables'
+import { kInstanceContext } from '@/composables/instanceContext'
+import { usePresence } from '@/composables/presence'
+import { injection } from '@/util/inject'
 import { InstanceEditInjectionKey, useInstanceEdit } from '../composables/instanceEdit'
 import BaseSettingGeneral from './BaseSettingGeneral.vue'
+import BaseSettingJava from './BaseSettingJava.vue'
+import BaseSettingLaunch from './BaseSettingLaunch.vue'
 import BaseSettingModpack from './BaseSettingModpack.vue'
 import BaseSettingServer from './BaseSettingServer.vue'
-import { useAutoSaveLoad, useService } from '@/composables'
-import BaseSettingLaunch from './BaseSettingLaunch.vue'
-import BaseSettingJava from './BaseSettingJava.vue'
 import BaseSettingSync from './BaseSettingSync.vue'
-import { usePresence } from '@/composables/presence'
-import { InstanceServiceKey } from '@xmcl/runtime-api'
 
-const { instance } = useInstance()
-const isServer = useInstanceIsServer(instance)
-const edit = useInstanceEdit()
+const { isServer, name, instance } = injection(kInstanceContext)
+const edit = useInstanceEdit(instance)
 const { t } = useI18n()
 provide(InstanceEditInjectionKey, edit)
-useAutoSaveLoad(edit.save, edit.load)
+useAutoSaveLoad(() => {}, edit.load)
+
+function onReset() {
+  edit.load()
+}
 
-const { state } = useService(InstanceServiceKey)
-usePresence({ location: 'instance-setting', instance: state.instance.name })
+usePresence({ location: 'instance-setting', instance: name.value })
 </script>
 
 <style scoped=true>
-.flex {
+/* .flex {
   padding: 6px 8px !important
-}
+} */
 
-.v-btn {
+/* .v-btn {
   margin: 0
-}
+} */
 </style>
 <style>
 .local-version .v-select__selection--comma {