refactor: replace custom ellipsis classes with native utilities

delete unused ellipsis.scss partial and its import, update all components to use truncate and line-clamp-2 utilities

src/pages/Discovery/components/CardSwiper/index.vue

@@ -1,27 +1,14 @@
 <template>
-  <view
-    class="card-swiper"
-    :class="{ 'is-single': props.list.length <= 1 }"
-    @touchstart="handleTouchStart"
-    @touchmove.stop.prevent="handleTouchMove"
-    @touchend="handleTouchEnd"
-    @touchcancel="handleTouchCancel"
-  >
+  <view class="card-swiper" :class="{ 'is-single': props.list.length <= 1 }" @touchstart="handleTouchStart"
+    @touchmove.stop.prevent="handleTouchMove" @touchend="handleTouchEnd" @touchcancel="handleTouchCancel">
     <view class="swiper-stage">
-      <view
-        v-for="slot in renderSlots"
-        :key="slot.key"
-        class="swiper-card"
-        :class="[
-          `is-${slot.role}`,
-          {
-            'is-current': slot.role === 'current',
-            'is-fill-fade': slot.key === fillFadeKey,
-          },
-        ]"
-        :style="slot.style"
-        @tap="handleCardTap(slot)"
-      >
+      <view v-for="slot in renderSlots" :key="slot.key" class="swiper-card" :class="[
+        `is-${slot.role}`,
+        {
+          'is-current': slot.role === 'current',
+          'is-fill-fade': slot.key === fillFadeKey,
+        },
+      ]" :style="slot.style" @tap="handleCardTap(slot)">
         <view class="card-shell">
           <view class="card-media">
             <image class="card-image" :src="slot.item.coverImage" mode="aspectFill" />
@@ -31,19 +18,15 @@
             <view v-if="slot.item.tag" class="card-tag">
               {{ slot.item.tag }}
             </view>
-            <view class="card-title ellipsis-1">
+            <view class="card-title truncate">
               {{ slot.item.title }}
             </view>
-            <view v-if="slot.item.subTitle" class="card-desc ellipsis-1">
+            <view v-if="slot.item.subTitle" class="card-desc truncate">
               {{ slot.item.subTitle }}
             </view>
           </view>
 
-          <view
-            v-if="canSwipe"
-            class="card-mask"
-            :style="getMaskStyle(slot.role)"
-          />
+          <view v-if="canSwipe" class="card-mask" :style="getMaskStyle(slot.role)" />
         </view>
       </view>
     </view>

src/pages/Discovery/components/DiscoveryAudioToolCard/index.vue

@@ -1,17 +1,7 @@
 <template>
-  <view
-    class="discovery-audio-tool-card"
-    hover-class="is-pressed"
-    hover-stay-time="80"
-    @tap="handleSelect"
-  >
+  <view class="discovery-audio-tool-card" hover-class="is-pressed" hover-stay-time="80" @tap="handleSelect">
     <view class="audio-visual">
-      <image
-        v-if="normalizedItem.coverImage"
-        class="audio-cover"
-        :src="normalizedItem.coverImage"
-        mode="aspectFill"
-      />
+      <image v-if="normalizedItem.coverImage" class="audio-cover" :src="normalizedItem.coverImage" mode="aspectFill" />
       <view v-else class="audio-cover audio-cover-fallback" />
       <view class="audio-play">
         <view class="audio-play-triangle" />
@@ -19,17 +9,14 @@
     </view>
 
     <view class="audio-content">
-      <text class="audio-title ellipsis-1">{{ normalizedItem.title }}</text>
-      <text class="audio-subtitle ellipsis-1">{{ normalizedItem.subTitle }}</text>
+      <text class="audio-title truncate">{{ normalizedItem.title }}</text>
+      <text class="audio-subtitle truncate">{{ normalizedItem.subTitle }}</text>
 
       <view class="audio-progress-row">
         <view class="audio-progress-track">
-          <view
-            class="audio-progress-fill"
-            :style="{ width: `${normalizedItem.progress}%` }"
-          />
+          <view class="audio-progress-fill" :style="{ width: `${normalizedItem.progress}%` }" />
         </view>
-        <text class="audio-time ellipsis-1">
+        <text class="audio-time truncate">
           {{ normalizedItem.currentTime }} / {{ normalizedItem.duration }}
         </text>
       </view>

src/pages/Discovery/components/DiscoveryGuideMapToolCard/index.vue

@@ -1,10 +1,5 @@
 <template>
-  <view
-    class="discovery-guide-map-tool-card"
-    hover-class="is-pressed"
-    hover-stay-time="80"
-    @tap="handleSelect"
-  >
+  <view class="discovery-guide-map-tool-card" hover-class="is-pressed" hover-stay-time="80" @tap="handleSelect">
     <view class="guide-map-visual">
       <view class="guidepost-illustration">
         <view class="guidepost-sign is-pink">
@@ -22,8 +17,8 @@
     </view>
 
     <view class="guide-map-content">
-      <text class="guide-map-title ellipsis-1">{{ normalizedItem.title }}</text>
-      <text class="guide-map-subtitle ellipsis-1">{{ normalizedItem.subTitle }}</text>
+      <text class="guide-map-title truncate">{{ normalizedItem.title }}</text>
+      <text class="guide-map-subtitle truncate">{{ normalizedItem.subTitle }}</text>
     </view>
   </view>
 </template>

src/pages/Discovery/components/DiscoveryPhotoToolCard/index.vue

@@ -1,10 +1,5 @@
 <template>
-  <view
-    class="discovery-photo-tool-card"
-    hover-class="is-pressed"
-    hover-stay-time="80"
-    @tap="handleSelect"
-  >
+  <view class="discovery-photo-tool-card" hover-class="is-pressed" hover-stay-time="80" @tap="handleSelect">
     <view class="photo-visual">
       <view class="camera-illustration">
         <view class="camera-top" />
@@ -17,36 +12,21 @@
           <view class="camera-dot is-small" />
         </view>
       </view>
-      <text class="photo-badge ellipsis-1">{{ normalizedItem.badge }}</text>
+      <text class="photo-badge truncate">{{ normalizedItem.badge }}</text>
     </view>
 
     <view class="photo-content">
-      <text class="photo-title ellipsis-1">{{ normalizedItem.title }}</text>
-      <text class="photo-subtitle ellipsis-1">{{ normalizedItem.subTitle }}</text>
+      <text class="photo-title truncate">{{ normalizedItem.title }}</text>
+      <text class="photo-subtitle truncate">{{ normalizedItem.subTitle }}</text>
 
       <view class="photo-options">
-        <view
-          v-for="(option, index) in normalizedItem.options"
-          :key="getOptionKey(option, index)"
-          class="photo-option"
-          hover-class="is-option-pressed"
-          hover-stay-time="80"
-          @tap.stop="handleOptionSelect(option, index)"
-        >
+        <view v-for="(option, index) in normalizedItem.options" :key="getOptionKey(option, index)" class="photo-option"
+          hover-class="is-option-pressed" hover-stay-time="80" @tap.stop="handleOptionSelect(option, index)">
           <view class="photo-option-thumb">
-            <image
-              v-if="option.coverImage"
-              class="photo-option-image"
-              :src="option.coverImage"
-              mode="aspectFill"
-            />
-            <view
-              v-else
-              class="photo-option-placeholder"
-              :class="`is-${index}`"
-            />
+            <image v-if="option.coverImage" class="photo-option-image" :src="option.coverImage" mode="aspectFill" />
+            <view v-else class="photo-option-placeholder" :class="`is-${index}`" />
           </view>
-          <text class="photo-option-label ellipsis-1">{{ option.label }}</text>
+          <text class="photo-option-label truncate">{{ option.label }}</text>
         </view>
       </view>
     </view>

src/pages/Discovery/components/ExploreCards/index.vue

@@ -1,33 +1,18 @@
 <template>
   <view class="explore-cards">
-    <scroll-view
-      class="explore-scroll"
-      scroll-x
-      show-scrollbar="false"
-    >
+    <scroll-view class="explore-scroll" scroll-x show-scrollbar="false">
       <view class="explore-track">
-        <view
-          v-for="(item, index) in normalizedList"
-          :key="getItemKey(item, index)"
-          class="explore-card"
-          :class="`is-${item.tone}`"
-          hover-class="is-pressed"
-          hover-stay-time="80"
-          @tap="handleCardTap(item.raw, index)"
-        >
-          <image
-            v-if="item.coverImage"
-            class="explore-card-image"
-            :src="item.coverImage"
-            mode="aspectFill"
-          />
+        <view v-for="(item, index) in normalizedList" :key="getItemKey(item, index)" class="explore-card"
+          :class="`is-${item.tone}`" hover-class="is-pressed" hover-stay-time="80"
+          @tap="handleCardTap(item.raw, index)">
+          <image v-if="item.coverImage" class="explore-card-image" :src="item.coverImage" mode="aspectFill" />
 
           <view class="explore-card-gradient" />
 
           <view class="explore-card-content">
-            <text class="explore-card-tag ellipsis-1">{{ item.tag }}</text>
-            <text class="explore-card-title ellipsis-1">{{ item.title }}</text>
-            <text v-if="item.subTitle" class="explore-card-desc ellipsis-1">
+            <text class="explore-card-tag truncate">{{ item.tag }}</text>
+            <text class="explore-card-title truncate">{{ item.title }}</text>
+            <text v-if="item.subTitle" class="explore-card-desc truncate">
               {{ item.subTitle }}
             </text>
           </view>

src/pages/Discovery/components/HeritageQuickPrompts/index.vue

@@ -1,22 +1,12 @@
 <template>
-  <scroll-view
-    class="prompt-strip"
-    scroll-x
-    show-scrollbar="false"
-  >
+  <scroll-view class="prompt-strip" scroll-x show-scrollbar="false">
     <view class="prompt-track">
-      <view
-        v-for="(item, index) in normalizedList"
-        :key="getItemKey(item, index)"
-        class="prompt-card"
-        hover-class="is-pressed"
-        hover-stay-time="80"
-        @tap="handleTap(item.raw, index)"
-      >
+      <view v-for="(item, index) in normalizedList" :key="getItemKey(item, index)" class="prompt-card"
+        hover-class="is-pressed" hover-stay-time="80" @tap="handleTap(item.raw, index)">
         <view class="prompt-mark" />
         <view class="prompt-copy">
-          <text class="prompt-title ellipsis-1">{{ item.title }}</text>
-          <text class="prompt-desc ellipsis-1">{{ item.subTitle }}</text>
+          <text class="prompt-title truncate">{{ item.title }}</text>
+          <text class="prompt-desc truncate">{{ item.subTitle }}</text>
         </view>
       </view>
     </view>

src/pages/Discovery/components/QuickQuestions/index.vue

@@ -9,10 +9,10 @@
           <image class="card-img flex-shrink-0 rounded-[14px]" :src="createSvgIndex(index)" />
 
           <view class="min-width-0 flex flex-col flex-full pl-[8px] py-[4px]">
-            <view class="w-full text-[12px] font-[600] text-[#171717] ellipsis-1">
+            <view class="w-full text-[12px] font-[600] text-[#171717] truncate">
               {{ item.title }}
             </view>
-            <view class="w-full text-[9px] text-[#94a3b8] ellipsis-1">
+            <view class="w-full text-[9px] text-[#94a3b8] truncate">
               {{ item.subTitle }}
             </view>
           </view>