feat: persist the sorting mode

packages/shared/src/index.ts

@@ -10,6 +10,7 @@ export interface Settings {
   autoGenerateSRTOnRecordStop?: boolean
   autoRemoveRecordWhenTinySize?: boolean
   locale?: string
+  sortMode?: string
 }
 
 /** electron render 给 web 暴露的 API */

packages/web/src/views/RecordersManage/index.vue

@@ -57,14 +57,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, normalizeClass } from 'vue'
+import { computed, onMounted, ref, normalizeClass, watch } from 'vue'
 import type { ClientRecorder } from '@autorecord/http-server'
 import { RecorderService } from '../../services/RecorderService'
 import RecorderCard from './RecorderCard.vue'
 import { RouteNames } from '../../router'
 import { assert } from '../../utils'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { LARServerService } from '../../services/LARServerService'
 
 const { t, locale } = useI18n()
 const route = useRoute()
@@ -113,6 +114,15 @@ const sortModes: {
 const sortMode = ref(sortModes[0])
 const filterText = ref<string>('')
 
+// TODO: 不知道为啥直接 await 会白屏，先简单实现
+LARServerService.getSettings({}).then((settings) => {
+  sortMode.value = sortModes.find((mode) => mode.id === settings.sortMode) ?? sortModes[0]
+})
+watch(sortMode, async ({ id }) => {
+  const settings = await LARServerService.getSettings({})
+  await LARServerService.setSettings({ ...settings, sortMode: id })
+})
+
 const displayingRecorders = computed(() => {
   const fields: (keyof ClientRecorder)[] = ['remarks', 'channelId']
   const result = recorders.value.filter((recorder) =>