zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui-layout): correct flex text truncation issues

Browse Source 
Add min-w-0, w-full, and block classes to flex child elements and text nodes across various UI components to ensure text truncation works correctly. Remove outdated hardcoded card item width styles from global SCSS and replace them with inline responsive width classes where appropriate.
This commit is contained in:
duanshuwen
2026-07-25 19:17:13 +08:00
parent 04a7acc8b3
commit 7913db7a83
27 changed files with 82 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/Discovery/components/CardSwiper/index.vue
View File

@@ -14,14 +14,14 @@
<image class="card-image" :src="slot.item.coverImage" mode="aspectFill" />
</view>
<view class="card-body">
<view class="card-body box-border w-full min-w-0">
<view v-if="slot.item.tag" class="card-tag">
{{ slot.item.tag }}
</view>
<view class="card-title truncate">
<view class="card-title w-full truncate">
{{ slot.item.title }}
</view>
<view v-if="slot.item.subTitle" class="card-desc truncate">
<view v-if="slot.item.subTitle" class="card-desc w-full truncate">
{{ slot.item.subTitle }}
</view>
</view>

10
src/pages/Discovery/components/DiscoveryAudioToolCard/index.vue
View File

@@ -8,15 +8,15 @@
</view>
</view>
<view class="audio-content">
<text class="audio-title truncate">{{ normalizedItem.title }}</text>
<text class="audio-subtitle truncate">{{ normalizedItem.subTitle }}</text>
<view class="audio-content min-w-0 flex-1">
<text class="audio-title block w-full truncate">{{ normalizedItem.title }}</text>
<text class="audio-subtitle block w-full truncate">{{ normalizedItem.subTitle }}</text>
<view class="audio-progress-row">
<view class="audio-progress-row w-full min-w-0">
<view class="audio-progress-track">
<view class="audio-progress-fill" :style="{ width: `${normalizedItem.progress}%` }" />
</view>
<text class="audio-time truncate">
<text class="audio-time block w-[90px] truncate">
{{ normalizedItem.currentTime }} / {{ normalizedItem.duration }}
</text>
</view>

6
src/pages/Discovery/components/DiscoveryGuideMapToolCard/index.vue
View File

@@ -16,9 +16,9 @@
</view>
</view>
<view class="guide-map-content">
<text class="guide-map-title truncate">{{ normalizedItem.title }}</text>
<text class="guide-map-subtitle truncate">{{ normalizedItem.subTitle }}</text>
<view class="guide-map-content min-w-0 flex-1">
<text class="guide-map-title block w-full truncate">{{ normalizedItem.title }}</text>
<text class="guide-map-subtitle block w-full truncate">{{ normalizedItem.subTitle }}</text>
</view>
</view>
</template>

14
src/pages/Discovery/components/DiscoveryPhotoToolCard/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<view class="discovery-photo-tool-card" hover-class="is-pressed" hover-stay-time="80" @tap="handleSelect">
<view class="photo-visual">
<view class="photo-visual w-[88px] min-w-0">
<view class="camera-illustration">
<view class="camera-top" />
<view class="camera-flash" />
@@ -12,21 +12,21 @@
<view class="camera-dot is-small" />
</view>
</view>
<text class="photo-badge truncate">{{ normalizedItem.badge }}</text>
<text class="photo-badge w-[calc(100%_-_18px)] truncate">{{ normalizedItem.badge }}</text>
</view>
<view class="photo-content">
<text class="photo-title truncate">{{ normalizedItem.title }}</text>
<text class="photo-subtitle truncate">{{ normalizedItem.subTitle }}</text>
<view class="photo-content min-w-0 flex-1">
<text class="photo-title block w-full truncate">{{ normalizedItem.title }}</text>
<text class="photo-subtitle block w-full truncate">{{ normalizedItem.subTitle }}</text>
<view class="photo-options">
<view v-for="(option, index) in normalizedItem.options" :key="getOptionKey(option, index)" class="photo-option"
<view v-for="(option, index) in normalizedItem.options" :key="getOptionKey(option, index)" class="photo-option min-w-0 flex-1"
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}`" />
</view>
<text class="photo-option-label truncate">{{ option.label }}</text>
<text class="photo-option-label block w-[76px] truncate">{{ option.label }}</text>
</view>
</view>
</view>

8
src/pages/Discovery/components/ExploreCards/index.vue
View File

@@ -9,10 +9,10 @@
<view class="explore-card-gradient" />
<view class="explore-card-content">
<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">
<view class="explore-card-content box-border w-full min-w-0">
<text class="explore-card-tag block w-full truncate">{{ item.tag }}</text>
<text class="explore-card-title block w-full truncate">{{ item.title }}</text>
<text v-if="item.subTitle" class="explore-card-desc block w-full truncate">
{{ item.subTitle }}
</text>
</view>

6
src/pages/Discovery/components/HeritageQuickPrompts/index.vue
View File

@@ -4,9 +4,9 @@
<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 truncate">{{ item.title }}</text>
<text class="prompt-desc truncate">{{ item.subTitle }}</text>
<view class="prompt-copy min-w-0 flex-1">
<text class="prompt-title block w-full truncate">{{ item.title }}</text>
<text class="prompt-desc block w-full truncate">{{ item.subTitle }}</text>
</view>
</view>
</view>

8
src/pages/Discovery/components/QuickQuestions/index.vue
View File

@@ -2,13 +2,13 @@
<view class="container pl-[12px]">
<view class="container-scroll text-[0px] overflow-x-auto whitespace-nowrap">
<view class="card-item bg-white inline-block rounded-[20px] mr-[10px]" v-for="(item, index) in list" :key="index"
@click="sendReply(item)">
<view class="card-item inline-block w-[150px] mr-[10px] rounded-[20px] bg-white" v-for="(item, index) in list"
:key="index" @click="sendReply(item)">
<view class="flex flex-row justify-start p-[10px]">
<view class="box-border flex w-full min-w-0 flex-row justify-start overflow-hidden p-[10px]">
<image class="card-img shrink-0 rounded-[14px]" :src="createSvgIndex(index)" />
<view class=" flex flex-col flex-1 pl-[8px] py-[4px]">
<view class="flex w-0 min-w-0 flex-1 flex-col overflow-hidden pl-[8px] py-[4px]">
<view class="w-full text-[12px] font-[600] text-[#171717] truncate">
{{ item.title }}
</view>

5
src/pages/Discovery/components/QuickQuestions/styles/index.scss
View File

@@ -2,11 +2,6 @@
}
.card-item {
min-width: 130px;
max-width: 150px;
}
.card-img {
height: 40px;
width: 40px;