update

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

@@ -136,17 +136,18 @@ const isHalfEvent = (eventId?: number) => {
   return typeof eventId === 'number' && eventId < 0;
 };
 
-const marketOptions = computed(() => {
+const marketOptionGroups = computed(() => {
   const available = new Set(availableMarketKeys.value);
-  return PLATFORMS.flatMap(({ label: platformLabel, value: platform }) => (
-    MARKET_KEYS.map((key) => {
+  return PLATFORMS.map(({ label, value: platform }) => ({
+    label,
+    options: MARKET_KEYS.map((key) => {
       const value = getMarketKey(platform, key);
       return {
-        label: `${platformLabel} ${MARKET_LABELS[key] ?? key}`,
+        label: MARKET_LABELS[key] ?? key,
         value,
       };
-    })
-  )).filter((option) => available.has(option.value));
+    }).filter((option) => available.has(option.value)),
+  })).filter((group) => group.options.length);
 });
 
 const selectedMarket = computed({
@@ -446,7 +447,7 @@ onMounted(() => {
         </div>
       </div>
 
-      <div class="market-selector" v-if="marketOptions.length">
+      <div class="market-selector" v-if="marketOptionGroups.length">
         <div class="market-mode">
           <span>盘口选择</span>
           <Switch
@@ -456,12 +457,19 @@ onMounted(() => {
           />
         </div>
         <div class="market-options">
-          <CheckboxGroup
-            v-if="isMultiSelect"
-            v-model:value="selectedMarkets"
-            :options="marketOptions"
-          />
-          <RadioGroup v-else v-model:value="selectedMarket" :options="marketOptions" />
+          <div
+            v-for="group in marketOptionGroups"
+            :key="group.label"
+            class="market-row"
+          >
+            <span class="market-platform">{{ group.label }}</span>
+            <CheckboxGroup
+              v-if="isMultiSelect"
+              v-model:value="selectedMarkets"
+              :options="group.options"
+            />
+            <RadioGroup v-else v-model:value="selectedMarket" :options="group.options" />
+          </div>
         </div>
       </div>
 
@@ -595,7 +603,7 @@ onMounted(() => {
 
 .market-selector {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 16px;
   padding: 12px 16px;
   border-bottom: 1px solid hsl(var(--border));
@@ -610,9 +618,27 @@ onMounted(() => {
 }
 
 .market-options {
+  display: grid;
+  flex: 1;
+  gap: 8px;
   min-width: 0;
 }
 
+.market-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 24px;
+}
+
+.market-platform {
+  width: 28px;
+  flex: none;
+  color: hsl(var(--foreground) / 0.58);
+  font-size: 12px;
+  font-weight: 600;
+}
+
 .chart-wrap {
   height: calc(100vh - 292px);
   min-height: 420px;