实现单机版

src/render/components/SatelliteTableView.vue

@@ -23,10 +23,10 @@
             <td class="border border-gray-900"> {{ index + 1 }} </td>
             <td class="border border-gray-900"> {{ id }} </td>
             <td class="border border-gray-900">
-              <input :checked="show" type="checkbox" class="w-6 h-6 cursor-pointer" @change="onSatelliteTableCheckboxChanged(id)" />
+              <input :checked="show" type="checkbox" class="w-6 h-6 cursor-pointer" @change="onShowStateCheckboxChanged(id)" />
             </td>
             <td class="border border-gray-900">
-              <button @click="$emit('track-satellite-selected', id)">
+              <button @click="onTrackButtonClicked(id)">
                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                 </svg>
@@ -39,27 +39,22 @@
 </div>
 </template>
 
-<script lang="ts">
-import { ref, computed, defineComponent } from 'vue'
+<script lang="ts" setup>
 import { useStore } from 'vuex'
+import { ref, computed, watch } from 'vue'
 
 
-export default defineComponent({
-  setup: () => {
-    const show           = ref(false)
+const show           = ref(false)
     
-    const store          = useStore()
-    const satelliteTable = ref(null)
-    const satellites     = computed(() => {
-      if (satelliteTable.value) satelliteTable.value.scrollTop = 0
+const store                      = useStore()
+const satellites                 = computed(() => store.state.satellites.all)
+const onTrackButtonClicked       = id => store.commit('satellites/track', id)
+const onShowStateCheckboxChanged = id => store.commit('satellites/toggleShow', id)
 
-      return store.state.satellites.all
-    })
-    
-    const onSatelliteTableCheckboxChanged = id => store.commit('satellites/toggleShow', id)
-    
-    return { show, satelliteTable, satellites, onSatelliteTableCheckboxChanged }
-  }
+// 表格数据更新时，滚动条回到最顶部
+const satelliteTable = ref(null)
+watch(satellites, () => {
+  if (satelliteTable.value) satelliteTable.value.scrollTop = 0
 })
 </script>
 
@@ -95,12 +90,11 @@ td {
 ::-webkit-scrollbar-thumb {
     border-radius: 10px;
     -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
-    background-color: #1f2937;
+    background-color: #4fbee2;
 }
 
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
-    /* border-radius: 10px; */
     background-color: #111827;
 }