优化：多市场结算后的页面UI

src/locales/en.json

@@ -111,7 +111,9 @@
     "no": "No",
     "priceZero": "0¢",
     "moreActions": "More actions",
-    "settledSubMarketsTitle": "Sub-markets (settled)"
+    "settledSubMarketsTitle": "Sub-markets (settled)",
+    "expandDescription": "Show more",
+    "collapseDescription": "Show less"
   },
   "searchPage": {
     "title": "Search",

src/locales/ja.json

@@ -111,7 +111,9 @@
     "no": "No",
     "priceZero": "0¢",
     "moreActions": "その他の操作",
-    "settledSubMarketsTitle": "サブマーケット（決済済み）"
+    "settledSubMarketsTitle": "サブマーケット（決済済み）",
+    "expandDescription": "全文を表示",
+    "collapseDescription": "閉じる"
   },
   "searchPage": {
     "title": "検索",

src/locales/ko.json

@@ -111,7 +111,9 @@
     "no": "No",
     "priceZero": "0¢",
     "moreActions": "더보기",
-    "settledSubMarketsTitle": "하위 마켓(정산 완료)"
+    "settledSubMarketsTitle": "하위 마켓(정산 완료)",
+    "expandDescription": "전체 보기",
+    "collapseDescription": "접기"
   },
   "searchPage": {
     "title": "검색",

src/locales/zh-CN.json

@@ -111,7 +111,9 @@
     "no": "否",
     "priceZero": "0¢",
     "moreActions": "更多操作",
-    "settledSubMarketsTitle": "子市场（已结算）"
+    "settledSubMarketsTitle": "子市场（已结算）",
+    "expandDescription": "展开全文",
+    "collapseDescription": "收起"
   },
   "searchPage": {
     "title": "搜索",

src/locales/zh-TW.json

@@ -111,7 +111,9 @@
         "no": "否",
         "priceZero": "0¢",
         "moreActions": "更多操作",
-        "settledSubMarketsTitle": "子市場（已結算）"
+        "settledSubMarketsTitle": "子市場（已結算）",
+        "expandDescription": "展開全文",
+        "collapseDescription": "收起"
     },
     "searchPage": {
         "title": "搜尋",

src/views/EventMarkets.vue

@@ -75,7 +75,29 @@
             <div class="rules-pane">
               <div v-if="eventDetail?.description" class="rules-section">
                 <h3 class="rules-title">{{ t('activity.rulesDescription') }}</h3>
-                <div class="rules-text">{{ eventDetail.description }}</div>
+                <div
+                  class="rules-text"
+                  :class="{
+                    'rules-text--multi-collapsed':
+                      rulesDescriptionCollapsible && !rulesDescriptionExpanded,
+                  }"
+                >
+                  {{ eventDetail.description }}
+                </div>
+                <v-btn
+                  v-if="rulesDescriptionCollapsible"
+                  variant="text"
+                  size="small"
+                  density="compact"
+                  class="rules-description-toggle"
+                  @click="rulesDescriptionExpanded = !rulesDescriptionExpanded"
+                >
+                  {{
+                    rulesDescriptionExpanded
+                      ? t('eventMarkets.collapseDescription')
+                      : t('eventMarkets.expandDescription')
+                  }}
+                </v-btn>
               </div>
               <div v-if="eventDetail?.resolutionSource" class="rules-section">
                 <h3 class="rules-title">{{ t('activity.rulesSource') }}</h3>
@@ -328,6 +350,15 @@ const markets = computed(() => {
 const activeMarkets = computed(() => markets.value.filter((m) => !isPmMarketClosed(m)))
 /** 已结算/已关闭的子市场 */
 const closedMarkets = computed(() => markets.value.filter((m) => isPmMarketClosed(m)))
+/** 多市场时描述默认折叠，避免首屏过长 */
+const isMultiMarket = computed(() => markets.value.length > 1)
+const RULES_DESC_COLLAPSE_MIN_LEN = 80
+const rulesDescriptionExpanded = ref(false)
+const rulesDescriptionCollapsible = computed(() => {
+  if (!isMultiMarket.value) return false
+  const d = eventDetail.value?.description?.trim() ?? ''
+  return d.length > RULES_DESC_COLLAPSE_MIN_LEN
+})
 const selectedMarket = computed(() => activeMarkets.value[selectedMarketIndex.value] ?? null)
 /** 移动端底部栏显示的市场（选中项或首个），仅在有可交易市场时使用 */
 const barMarket = computed(() => selectedMarket.value ?? activeMarkets.value[0])
@@ -777,7 +808,10 @@ watch(
 )
 watch(
   () => route.params.id,
-  () => loadEventDetail(),
+  () => {
+    rulesDescriptionExpanded.value = false
+    loadEventDetail()
+  },
 )
 
 // 监听语言切换，语言变化时重新加载数据
@@ -1010,6 +1044,9 @@ watch(
 }
 
 .rules-card .rules-section {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
   margin-bottom: 16px;
 }
 
@@ -1034,6 +1071,22 @@ watch(
   word-break: break-word;
 }
 
+.rules-text--multi-collapsed {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+}
+
+.rules-description-toggle {
+  margin-top: 4px;
+  padding: 0 4px !important;
+  min-width: auto !important;
+  text-transform: none;
+  font-weight: 600;
+  align-self: flex-start;
+}
+
 .rules-card .rules-link {
   font-size: 14px;
   color: #2563eb;

src/views/TradeDetail.vue

@@ -258,7 +258,29 @@
                 <template v-else>
                   <div v-if="eventDetail?.description" class="rules-section">
                     <h3 class="rules-title">{{ t('activity.rulesDescription') }}</h3>
-                    <div class="rules-text">{{ eventDetail.description }}</div>
+                    <div
+                      class="rules-text"
+                      :class="{
+                        'rules-text--multi-collapsed':
+                          rulesDescriptionCollapsible && !rulesDescriptionExpanded,
+                      }"
+                    >
+                      {{ eventDetail.description }}
+                    </div>
+                    <v-btn
+                      v-if="rulesDescriptionCollapsible"
+                      variant="text"
+                      size="small"
+                      density="compact"
+                      class="rules-description-toggle"
+                      @click="rulesDescriptionExpanded = !rulesDescriptionExpanded"
+                    >
+                      {{
+                        rulesDescriptionExpanded
+                          ? t('eventMarkets.collapseDescription')
+                          : t('eventMarkets.expandDescription')
+                      }}
+                    </v-btn>
                   </div>
                   <div v-if="eventDetail?.resolutionSource" class="rules-section">
                     <h3 class="rules-title">{{ t('activity.rulesSource') }}</h3>
@@ -648,6 +670,16 @@ const showSettledOutcomeBar = computed(
   () => currentMarketClosed.value && Boolean((settledOutcomeLabel.value ?? '').trim()),
 )
 
+/** 详情页接口若含多个子市场，描述区首屏折叠 */
+const isEventMultiMarket = computed(() => (eventDetail.value?.markets?.length ?? 0) > 1)
+const RULES_DESC_COLLAPSE_MIN_LEN = 80
+const rulesDescriptionExpanded = ref(false)
+const rulesDescriptionCollapsible = computed(() => {
+  if (!isEventMultiMarket.value) return false
+  const d = eventDetail.value?.description?.trim() ?? ''
+  return d.length > RULES_DESC_COLLAPSE_MIN_LEN
+})
+
 // --- CLOB WebSocket 订单簿与成交 ---
 // 按 token 索引区分：0 = Yes，1 = No
 type OrderBookRows = { price: number; shares: number; priceRaw?: number }[]
@@ -1552,7 +1584,10 @@ const handleResize = () => {
 
 watch(
   () => route.params.id,
-  () => loadEventDetail(),
+  () => {
+    rulesDescriptionExpanded.value = false
+    loadEventDetail()
+  },
   { immediate: false },
 )
 
@@ -2218,6 +2253,9 @@ onUnmounted(() => {
 }
 
 .rules-section {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
   margin-bottom: 16px;
 }
 
@@ -2242,6 +2280,21 @@ onUnmounted(() => {
   word-break: break-word;
 }
 
+.rules-text--multi-collapsed {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+}
+
+.rules-description-toggle {
+  margin-top: 4px;
+  padding: 0 4px !important;
+  min-width: auto !important;
+  text-transform: none;
+  font-weight: 600;
+}
+
 .rules-link {
   font-size: 14px;
   color: #2563eb;