Update ui, and Sekiro

package.json

@@ -15,6 +15,7 @@
     "build": "tauri build"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "@tauri-apps/api": "^1.5.6",
     "dayjs": "^1.11.11",
     "element-plus": "^2.7.5",

src/App.vue

@@ -7,6 +7,7 @@
         class="game-select"
         :placeholder="text.gameNamePlaceholder"
         clearable
+        @change="handleGameChange"
       >
         <el-option
           v-for="gameName in gameNames"
@@ -44,26 +45,36 @@
           <header>
             <!-- Name of backup -->
             <b class="name">
+              【{{ text[backup.type] }}】
               {{ backup.name === 'quickBackup' ? text.quickBackup : backup.name }}
             </b>
 
             <!-- Action buttons -->
             <div class="actions">
-              <el-button type="primary" @click="loadBackup(backup)">{{ text.load }}</el-button>
-              <el-button type="primary" @click="showUpdateModal(backup)">
-                {{ text.update }}
-              </el-button>
-              <el-button type="danger" @click="removeBackup(backup.id)">{{
-                text.remove
-              }}</el-button>
+              <el-button
+                type="primary"
+                circle
+                :title="text.load"
+                :icon="Check"
+                @click="loadBackup(backup)"
+              />
+              <el-button
+                type="primary"
+                circle
+                :title="text.update"
+                :icon="Edit"
+                @click="showUpdateModal(backup)"
+              />
+              <el-button
+                type="danger"
+                circle
+                :title="text.remove"
+                :icon="Delete"
+                @click="removeBackup(backup.id)"
+              />
             </div>
           </header>
 
-          <!-- Type of backup -->
-          <div>
-            <span class="type">{{ text[backup.type] }}</span>
-          </div>
-
           <!-- Description of backup -->
           <div class="description">{{ backup.description }}</div>
         </li>
@@ -201,7 +212,7 @@
     <el-form label-position="top">
       <!-- Font size -->
       <el-form-item :label="text.fontSizeLabel">
-        <el-input-number v-model="store.fontSize" :min="12" :max="24" :step="1" />
+        <el-input-number v-model="store.fontSize" :min="14" :max="20" :step="1" />
       </el-form-item>
 
       <!-- Theme -->
@@ -222,6 +233,7 @@
 <script setup lang="ts">
 import { ref, reactive, computed, watchEffect } from 'vue'
 import { ElMessage, ElMessageBox, FormInstance } from 'element-plus'
+import { Check, Edit, Delete } from '@element-plus/icons-vue'
 import IconChinese from './components/IconChinese.vue'
 import IconEnglish from './components/IconEnglish.vue'
 import IconSettings from './components/IconSettings.vue'
@@ -237,9 +249,14 @@ const store = reactive<Store>({
   ...storage.store
 })
 
-const gameNames: BackupType[] = ['DarkSoulsIII', 'EldenRing']
+const gameNames: BackupType[] = ['DarkSoulsIII', 'EldenRing', 'Sekiro']
 const currentGame = ref<BackupType>()
 
+/** Set default value of type of backing up */
+function handleGameChange() {
+  backupFormState.type = currentGame.value
+}
+
 const search = ref('')
 const filteredBackups = computed(() =>
   store.backups.filter(backup => {
@@ -440,6 +457,10 @@ ul {
 .el-button {
   padding: 0.5em 0.8em;
   height: auto;
+
+  &.is-circle {
+    width: auto;
+  }
 }
 .el-input {
   line-height: 1.57;
@@ -528,13 +549,6 @@ ul {
       user-select: text;
       margin-right: 0.5em;
     }
-    .type {
-      font-size: 0.65em;
-      padding: 0.4em 0.8em;
-      color: white;
-      background-color: var(--el-color-primary);
-      border-radius: 0.4em;
-    }
     .description {
       color: #666;
       font-size: 0.8em;

src/i18n/en.ts

@@ -4,6 +4,7 @@ const en: Text = {
   gameNamePlaceholder: 'All',
   DarkSoulsIII: 'Dark Souls III',
   EldenRing: 'Elden Ring',
+  Sekiro: 'Sekiro',
   gettingBackupsFailed: 'Getting backups failed, please try later',
   backUp: 'Back up',
   quickBackup: 'Quick Backup',
@@ -39,7 +40,7 @@ const en: Text = {
   removalFailed: 'Removal failed, please try later',
   empty: 'No backup found',
   settings: 'Settings',
-  fontSizeLabel: 'Font size (12 ~ 24)',
+  fontSizeLabel: 'Font size (14 ~ 20)',
   themeLabel: 'Theme',
   light: 'Light',
   dark: 'Dark',

src/i18n/index.ts

@@ -2,6 +2,7 @@ type Keys =
   | 'gameNamePlaceholder'
   | 'DarkSoulsIII'
   | 'EldenRing'
+  | 'Sekiro'
   | 'gettingBackupsFailed'
   | 'backUp'
   | 'quickBackup'

src/i18n/zh.ts

@@ -4,6 +4,7 @@ const zh: Text = {
   gameNamePlaceholder: '全部',
   DarkSoulsIII: '黑暗之魂3',
   EldenRing: '艾尔登法环',
+  Sekiro: '只狼',
   gettingBackupsFailed: '获取存档失败，请稍后再试',
   backUp: '备份',
   quickBackup: '快速备份',
@@ -39,7 +40,7 @@ const zh: Text = {
   removalFailed: '删除失败，请稍后再试',
   empty: '无备份',
   settings: '设置',
-  fontSizeLabel: '字体大小（12 ~ 24）',
+  fontSizeLabel: '字体大小（14 ~ 20）',
   themeLabel: '主题',
   light: '明亮',
   dark: '黑暗',

src/utils/Storage.ts

@@ -8,7 +8,7 @@ const dataDir = await path.dataDir()
 const keeperDir = await path.join(dataDir, 'DarkSoulsKeeper')
 const keeperJsonPath = await path.join(keeperDir, jsonName)
 
-export type BackupType = 'DarkSoulsIII' | 'EldenRing'
+export type BackupType = 'DarkSoulsIII' | 'EldenRing' | 'Sekiro'
 
 export type Backup = {
   id: string