global-navigation-satellite-system/src/render/components/SatelliteTableView.vue

<template>
<div>
  <div id="satellite-table-container" class="text-white absolute bottom-0 text-center">
    <button @click="show = !show" class="rounded border-blue-900 bg-blue-900">
      <svg v-if="show" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 13l-7 7-7-7m14-8l-7 7-7-7" />
      </svg>
      <svg v-else xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11l7-7 7 7M5 19l7-7 7 7" />
      </svg>
    </button>
    <table ref="satelliteTable" v-show="show" class="text-center">
        <thead class="text-2xl">
          <th class="py-3 bg-blue-900 border border-gray-900"
              v-for="label, index in ['序号', '卫星名称', '显示/隐藏', '跟踪']"
              :key="label"
              :style="{width: index == 1 ? '37.5vw' : '12.5vw'}">
              {{ label }}
          </th>
        </thead>
        <tbody class="text-lg odd:bg-gray-50">
          <tr v-for="{ id, show }, index in satellites" :key="id">
            <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="onShowStateCheckboxChanged(id)" />
            </td>
            <td class="border border-gray-900">
              <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>
              </button>
            </td>
          </tr>
        </tbody>
    </table>
  </div>
</div>
</template>

<script lang="ts" setup>
import { useStore } from 'vuex'
import { ref, computed, watch } from 'vue'


const show = ref(false)
    
const store                      = useStore()
const satellites                 = computed(() => store.getters["satelliteSystem/satellites"])
const onTrackButtonClicked       = id => store.dispatch('satelliteSystem/track', id)
const onShowStateCheckboxChanged = id => store.dispatch('satelliteSystem/toggleShow', id)

// 表格数据更新时，滚动条回到最顶部
const satelliteTable = ref(null)
watch(satellites, () => satelliteTable.value.scrollTop = 0)
</script>

<style scoped>
#satellite-table-container {
  left: 12.5vw;
  right: 12.5vw;
}

table {
  display: block;
  height: 360px;
  overflow: auto;
}

tr:nth-child(odd) {
  background-color: rgb(17, 24, 39);
}

tr:nth-child(even) {
  background-color:rgb(31, 41, 55)
}

td {
  padding: 5px 0;
}

::-webkit-scrollbar
{
  width: 12px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
    background-color: #4fbee2;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
    background-color: #111827;
}

</style>>