feat: improve odds market group selection

web/apps/web-antd/src/views/match/odds-curve/index.vue

@@ -147,6 +147,7 @@ const marketOptions = computed(() => {
   const available = new Set(availableMarketKeys.value);
   return MARKET_GROUPS.map((group) => ({
     ...group,
+    availableKeys: group.keys.filter((key) => available.has(key)),
     options: group.keys
       .filter((key) => available.has(key))
       .map((key) => ({
@@ -156,6 +157,10 @@ const marketOptions = computed(() => {
   })).filter((group) => group.options.length);
 });
 
+const selectMarketGroup = (keys: string[]) => {
+  selectedMarkets.value = [...keys];
+};
+
 const formatTime = (time?: number) => {
   return time ? dayjs(time).format('MM-DD HH:mm:ss') : '-';
 };
@@ -378,7 +383,13 @@ onMounted(() => {
 
       <div class="market-selector" v-if="marketOptions.length">
         <div v-for="group in marketOptions" :key="group.label" class="market-group">
-          <span class="market-group-label">{{ group.label }}</span>
+          <button
+            class="market-group-label"
+            type="button"
+            @click="selectMarketGroup(group.availableKeys)"
+          >
+            {{ group.label }}
+          </button>
           <CheckboxGroup v-model:value="selectedMarkets" :options="group.options" />
         </div>
       </div>
@@ -508,9 +519,18 @@ onMounted(() => {
 .market-group-label {
   width: 64px;
   flex: none;
+  padding: 0;
+  border: 0;
+  background: transparent;
   color: hsl(var(--foreground) / 0.66);
+  cursor: pointer;
   font-size: 13px;
   line-height: 24px;
+  text-align: left;
+}
+
+.market-group-label:hover {
+  color: hsl(var(--primary));
 }
 
 .chart-wrap {