feat: add a field to disable auto check on the list page

packages/web/package.json

@@ -22,7 +22,7 @@
     "uuid": "^9.0.0",
     "vue": "^3.2.37",
     "vue-router": "^4.0.0",
-    "vuetify": "^3.0.1"
+    "vuetify": "^3.5.6"
   },
   "devDependencies": {
     "@autorecord/http-server": "workspace:^",

packages/web/postcss.config.cjs

@@ -1,5 +1,7 @@
 module.exports = {
   plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
     tailwindcss: {
       // 如果是由 electron 项目来启动，那么执行目录就不是 web 项目路径，所以不能用相对路径，要用绝对路径。
       config: __dirname + '/tailwind.config.cjs',

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

@@ -4,17 +4,22 @@
       {{ recorder.remarks || `${providerName} ${recorder.channelId}` }}
     </v-card-title>
 
-    <v-card-text>
-      <div>平台：{{ providerName }}</div>
+    <v-card-text class="grid grid-cols-[auto_1fr] items-center">
+      <span>平台：</span>
+      <span>{{ providerName }}</span>
+
+      <span>频道：</span>
       <div>
-        频道：
         <a :href="recorder.channelURL" target="_blank" class="hover:underline">
           {{ recorder.channelId }}
         </a>
       </div>
-      <div>备注：{{ recorder.remarks }}</div>
+
+      <span>备注：</span>
+      <span>{{ recorder.remarks }}</span>
+
+      <span>状态：</span>
       <div>
-        <span>状态：</span>
         <v-tooltip text="点击查看录制参数" :disabled="!ffmpegArgsDialogAvailable">
           <template v-slot:activator="{ props }">
             <span
@@ -36,14 +41,24 @@
           </v-card>
         </v-dialog>
       </div>
+
+      <span title="禁用自动录制">禁用：</span>
+      <v-switch
+        class="small-switch"
+        color="#880000"
+        hide-details
+        inset
+        v-model="recorder.disableAutoCheck"
+        :loading="requestingDisableAutoCheck"
+      />
     </v-card-text>
 
     <v-card-actions class="border-t justify-end">
-      <v-btn v-if="recorder.state === 'idle'" @click="startRecord" :loading="requesting" size="small">刷新</v-btn>
+      <v-btn v-if="recorder.state === 'idle'" @click="startRecord" :loading="requestingRecord" size="small">刷新</v-btn>
       <v-btn
         v-else
         @click="stopRecord"
-        :loading="requesting"
+        :loading="requestingRecord"
         :disabled="recorder.state === 'stopping-record'"
         size="small"
       >
@@ -64,7 +79,7 @@
 
 <script setup lang="ts">
 import type { ClientRecorder } from '@autorecord/http-server'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { RouteNames } from '../../router'
 import { RecorderService } from '../../services/RecorderService'
 
@@ -80,7 +95,8 @@ const providers = [
   { id: 'DouYin', name: '抖音' },
 ]
 
-const requesting = ref(false)
+const requestingRecord = ref(false)
+const requestingDisableAutoCheck = ref(false)
 
 const providerName = computed(() => providers.find((p) => p.id === recorder.providerId)?.name ?? '未知')
 
@@ -93,20 +109,54 @@ const stateText = computed(() =>
 )
 
 const startRecord = async () => {
-  requesting.value = true
+  requestingRecord.value = true
   try {
     await RecorderService.startRecord(recorder.id)
   } finally {
-    requesting.value = false
+    requestingRecord.value = false
   }
 }
 
 const stopRecord = async () => {
-  requesting.value = true
+  requestingRecord.value = true
   try {
     await RecorderService.stopRecord(recorder.id)
   } finally {
-    requesting.value = false
+    requestingRecord.value = false
+  }
+}
+
+const setDisableAutoCheck = async (value: boolean) => {
+  requestingDisableAutoCheck.value = true
+  try {
+    await RecorderService.updateRecorder({
+      ...recorder,
+      disableAutoCheck: value,
+    })
+  } finally {
+    requestingDisableAutoCheck.value = false
   }
 }
+
+watch(
+  () => recorder.disableAutoCheck,
+  (newVal) => {
+    if (newVal == null) return
+    setDisableAutoCheck(newVal)
+  },
+)
 </script>
+
+<style scoped>
+.small-switch {
+  :deep(&.v-switch .v-selection-control) {
+    min-height: auto;
+  }
+
+  :deep(.v-selection-control__wrapper) {
+    height: auto;
+    transform: scale(0.5);
+    transform-origin: left;
+  }
+}
+</style>

yarn.lock

@@ -194,7 +194,7 @@ __metadata:
     vue: ^3.2.37
     vue-router: ^4.0.0
     vue-tsc: ^0.40.4
-    vuetify: ^3.0.1
+    vuetify: ^3.5.6
   languageName: unknown
   linkType: soft
 
@@ -11038,22 +11038,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vuetify@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "vuetify@npm:3.0.1"
+"vuetify@npm:^3.5.6":
+  version: 3.5.6
+  resolution: "vuetify@npm:3.5.6"
   peerDependencies:
-    vite-plugin-vuetify: ^1.0.0-alpha.12
-    vue: ^3.2.0
+    typescript: ">=4.7"
+    vite-plugin-vuetify: ">=1.0.0-alpha.12"
+    vue: ^3.3.0
     vue-i18n: ^9.0.0
-    webpack-plugin-vuetify: ^2.0.0-alpha.11
+    webpack-plugin-vuetify: ">=2.0.0-alpha.11"
   peerDependenciesMeta:
+    typescript:
+      optional: true
     vite-plugin-vuetify:
       optional: true
     vue-i18n:
       optional: true
     webpack-plugin-vuetify:
       optional: true
-  checksum: 520fddba9200b27419a6f7dda697cef47547e2fa9b00564f76103e830e136063ed4e60e664832ce2b63e9cda81e5c65d23da11bbb0dc095626e0c2607cb1ccb6
+  checksum: 2653dece66f2c4d7392b31b3240298a5124bcf27501e205458fa8c98d84bab38a77b1365419998837e65efa5170e37ce530bb18b60ed2c7fb3babad7b063e60e
   languageName: node
   linkType: hard