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/components/SwipeCards/index.vue
View File

@@ -12,8 +12,8 @@
<!-- 底部：价格 + 购买按钮 -->
<view class="card-footer p-[12px] flex justify-between items-center">
<view class="border-box">
<view class="text-[14px] font-[500] text-[#333333] truncate">
<view class="border-box min-w-0 flex-1">
<view class="w-full text-[14px] font-[500] text-[#333333] truncate">
{{ card.commodityName }}
</view>
<view class="card-price-row text-[#333333]">
@@ -221,4 +221,4 @@ const placeOrderHandle = (item) => {
<style scoped lang="scss">
@import "./styles/index.scss";
</style>
</style>

8
src/pages-aigc/home/components/TemplateCard/index.vue
View File

@@ -11,11 +11,11 @@
<view class="template-media-shade" />
</view>
<view class="template-copy">
<view class="template-copy box-border w-full min-w-0">
<text class="template-badge">{{ template.templateTag }}</text>
<text class="template-title truncate">{{ template.templateTitle || template.templateName }}</text>
<text class="template-desc truncate">{{ template.templateSubTitle }}</text>
<text class="template-note truncate">{{ template.templateDescription }}</text>
<text class="template-title block w-[178px] truncate">{{ template.templateTitle || template.templateName }}</text>
<text class="template-desc block w-[178px] truncate">{{ template.templateSubTitle }}</text>
<text class="template-note block w-[172px] truncate">{{ template.templateDescription }}</text>
<button class="template-select" type="default" @tap.stop="emit('select')">
选这个模板
</button>

8
src/pages-aigc/record/components/RecordCard/index.vue
View File

@@ -7,10 +7,10 @@
<text v-if="isGenerating" class="record-card-media-text">生成中</text>
</view>
<view class="record-card-copy">
<text class="record-card-title truncate">{{ title }}</text>
<text class="record-card-time truncate">{{ record.createTime }}</text>
<text class="record-card-status truncate">{{ statusText }}</text>
<view class="record-card-copy w-full min-w-0">
<text class="record-card-title block w-full truncate">{{ title }}</text>
<text class="record-card-time block w-full truncate">{{ record.createTime }}</text>
<text class="record-card-status block w-full truncate">{{ statusText }}</text>
</view>
<view v-if="actionText" class="record-card-action">

4
src/pages-booking/index.vue
View File

@@ -8,12 +8,12 @@
<view class="booking-content flex-1 p-[12px] overflow-hidden scroll-y">
<!-- 预约内容 -->
<view class="border-box bg-white p-[12px] rounded-[12px] mb-[12px]">
<view class="border-box w-full min-w-0 bg-white p-[12px] rounded-[12px] mb-[12px]">
<!-- 酒店类型入住离店日期部分 -->
<DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" :showBtn="true"
@click="navigateToDetail(orderData)" />
<view class="text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
<view class="w-full text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
{{ orderData.commodityName }}
</view>

8
src/pages-order/order/components/GoodsInfo/index.vue
View File

@@ -1,9 +1,9 @@
<template>
<view v-if="orderType == 0" class="border-box bg-white p-[12px] rounded-[12px] mb-[12px]">
<view v-if="orderType == 0" class="border-box w-full min-w-0 bg-white p-[12px] rounded-[12px] mb-[12px]">
<!-- 酒店类型入住离店日期部分 -->
<DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" />
<view class="text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
<view class="w-full text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
{{ orderData.commodityName }}
</view>
@@ -20,8 +20,8 @@
</view>
</view>
<view v-if="orderType != 0" class="border-box bg-white p-[12px] rounded-[12px] mb-[12px]">
<view class="text-[16px] font-[500] text-[#000000] leading-[24px] truncate mb-[8px]">
<view v-if="orderType != 0" class="border-box w-full min-w-0 bg-white p-[12px] rounded-[12px] mb-[12px]">
<view class="w-full text-[16px] font-[500] text-[#000000] leading-[24px] truncate mb-[8px]">
{{ orderData.commodityName }}
</view>

4
src/pages-order/order/components/OrderQrcode/index.vue
View File

@@ -13,8 +13,8 @@
<view class="bg-white rounded-[12px] flex flex-col items-center justify-center p-[12px] mb-[12px] mx-[12px]">
<view class="flex w-full flex-row items-center justify-between py-[4px]">
<view>
<view class="text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
<view class="min-w-0 flex-1">
<view class="w-full text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
{{ selectedVoucher.name }}
</view>
</view>

4
src/pages-quick/components/Card/index.vue
View File

@@ -1,11 +1,11 @@
<template>
<view class="card bg-white p-[8px] rounded-[12px] flex flex-items-start m-[12px]" @click.stop="handleClick(item)">
<image class="left rounded-[10px]" :src="item.commodityPhoto" mode="aspectFill" />
<view class="right flex-1 pl-[12px]">
<view class="right min-w-0 flex-1 pl-[12px]">
<view class="text-[16px] leading-[24px] text-[#171717] mb-[4px]">
{{ item.commodityName }}
</view>
<view v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-[#99a0ae] mb-[4px] truncate">
<view v-if="item.commodityFacility" class="w-full text-[12px] leading-[16px] text-[#99a0ae] mb-[4px] truncate">
{{ item.commodityFacility.join(" ") }}
</view>
<view class="text-[12px] leading-[18px] color-43669A">

4
src/pages/ChatMain/HomeWelcome/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<view class="home-welcome-panel">
<view class="home-welcome-header">
<text class="home-welcome-title truncate">
<view class="home-welcome-header w-full min-w-0">
<text class="home-welcome-title block w-0 min-w-0 truncate">
{{ props.mainPageDataModel.welcomeContent || "小七欢迎你～" }}
</text>
<text v-if="weatherText" class="home-welcome-weather">

4
src/pages/ChatModule/FacilityLocationCard/index.vue
View File

@@ -3,11 +3,11 @@
<image class="facility-location-card__image block w-full" :src="data.image" mode="aspectFill" />
<view class="facility-location-card__body px-[24px] pb-[24px]">
<view class="facility-location-card__title-row flex items-center">
<view class="facility-location-card__title-row flex w-full min-w-0 items-center">
<view class="facility-location-card__badge text-[#2563eb] bg-[#eff6ff] text-[12px] font-bold">
{{ type.text }}
</view>
<view class="facility-location-card__title text-[#1e293b] text-[18px] font-bold truncate">
<view class="facility-location-card__title w-0 min-w-0 text-[#1e293b] text-[18px] font-bold truncate">
{{ data.title }}
</view>
</view>

4
src/pages/ChatModule/FaqHelpCard/index.vue
View File

@@ -12,9 +12,9 @@
<view class="faq-help-card__divider"></view>
<view class="faq-help-card__list">
<view v-for="item in questions" :key="item.id || item.text" class="faq-help-card__item flex items-center"
<view v-for="item in questions" :key="item.id || item.text" class="faq-help-card__item flex w-full min-w-0 items-center"
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
<view class="faq-help-card__question text-[#475569] text-[18px] font-bold truncate flex-1">
<view class="faq-help-card__question w-0 min-w-0 text-[#475569] text-[18px] font-bold truncate flex-1">
{{ item.text }}
</view>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>

4
src/pages/ChatModule/LongTextGuideCard/index.vue
View File

@@ -21,12 +21,12 @@
</view>
<view v-else class="long-text-guide-card__detail-card bg-white rounded-[24px] overflow-hidden">
<view class="long-text-guide-card__detail-header flex items-center border-bottom-F1F5F9">
<view class="long-text-guide-card__detail-header box-border flex w-full min-w-0 items-center border-bottom-F1F5F9">
<view class="long-text-guide-card__back flex items-center justify-center rounded-full font-bold"
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>
<view class="long-text-guide-card__detail-title text-[#1e293b] text-[18px] font-bold truncate">
<view class="long-text-guide-card__detail-title w-0 min-w-0 text-[#1e293b] text-[18px] font-bold truncate">
{{ activeItem.title }}
</view>
<view class="long-text-guide-card__badge long-text-guide-card__detail-badge text-[12px] font-bold"

6
src/pages/ChatModule/MapNavigationCard/index.vue
View File

@@ -9,11 +9,11 @@
</view>
<view class="map-navigation-card__content flex items-center">
<view class="map-navigation-card__info flex-1">
<view class="map-navigation-card__title text-[#1e293b] text-[18px] font-bold truncate">
<view class="map-navigation-card__info min-w-0 flex-1">
<view class="map-navigation-card__title w-full text-[#1e293b] text-[18px] font-bold truncate">
{{ data.title }}
</view>
<view class="map-navigation-card__distance text-[#94a3b8] text-[14px] font-bold truncate">
<view class="map-navigation-card__distance w-full text-[#94a3b8] text-[14px] font-bold truncate">
{{ data.distance }}
</view>
</view>

4
src/pages/ChatModule/PoiCompareCard/index.vue
View File

@@ -1,11 +1,11 @@
<template>
<view class="poi-compare-card w-full">
<view v-if="!isDetail" class="poi-compare-card__overview bg-white rounded-[24px] overflow-hidden">
<view class="poi-compare-card__head flex items-center">
<view class="poi-compare-card__head flex w-full min-w-0 items-center">
<view class="poi-compare-card__mark flex items-center justify-center rounded-full shrink-0">
{{ data.icon }}
</view>
<view class="poi-compare-card__title text-[#1e293b] text-[18px] font-bold truncate flex-1">
<view class="poi-compare-card__title w-0 min-w-0 text-[#1e293b] text-[18px] font-bold truncate flex-1">
{{ data.title }}
</view>
</view>

4
src/pages/ChatModule/RecommendPostsList/index.vue
View File

@@ -11,8 +11,8 @@
<view class="shadow absolute rounded-[16px]"></view>
</view>
<view class="card-text border-box">
<view class="text-[11px] text-[#99a0ae] truncate">
<view class="card-text border-box w-full min-w-0">
<view class="w-full text-[11px] text-[#99a0ae] truncate">
{{ item.topic }}
</view>
</view>

4
src/pages/ChatModule/RecommendationListCard/index.vue
View File

@@ -6,8 +6,8 @@
class="recommendation-list-card__item inline-block bg-white rounded-[20px] overflow-hidden"
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
<image class="recommendation-list-card__image block w-full" :src="item.image" mode="aspectFill" />
<view class="recommendation-list-card__body p-[16px]">
<view class="recommendation-list-card__name text-[#1e293b] text-[18px] font-bold truncate">
<view class="recommendation-list-card__body box-border w-full min-w-0 p-[16px]">
<view class="recommendation-list-card__name w-full text-[#1e293b] text-[18px] font-bold truncate">
{{ item.title }}
</view>
<view

14
src/pages/ChatModule/RoutePlanCard/index.vue
View File

@@ -4,8 +4,8 @@
class="route-plan-card__summary flex items-center bg-white rounded-[24px] overflow-hidden w-full"
:class="{ 'is-disabled': disabled }" @click="openDetail">
<image class="route-plan-card__cover block shrink-0" :src="data.image" mode="aspectFill" />
<view class="route-plan-card__body flex-1">
<view class="route-plan-card__title text-[#1e293b] text-[18px] font-bold truncate">
<view class="route-plan-card__body min-w-0 flex-1">
<view class="route-plan-card__title w-full text-[#1e293b] text-[18px] font-bold truncate">
{{ data.title }}
</view>
<view class="route-plan-card__tags flex items-center">
@@ -21,11 +21,11 @@
</view>
<view v-else class="route-plan-card__detail bg-white rounded-[24px] overflow-hidden w-full">
<view class="route-plan-card__detail-head flex items-center">
<view class="route-plan-card__detail-head flex w-full min-w-0 items-center">
<view class="route-plan-card__back flex items-center justify-center rounded-full shrink-0" @click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>
<view class="route-plan-card__detail-title text-[#1e293b] text-[18px] font-bold truncate flex-1">
<view class="route-plan-card__detail-title w-0 min-w-0 text-[#1e293b] text-[18px] font-bold truncate flex-1">
{{ data.title }}
</view>
<view class="route-plan-card__detail-badge text-[#047857] bg-[#ecfdf5] text-[12px] font-bold">
@@ -42,11 +42,11 @@
</view>
<view class="route-plan-card__node bg-white rounded-[20px] flex items-center">
<image class="route-plan-card__node-image block shrink-0" :src="node.image" mode="aspectFill" />
<view class="route-plan-card__node-body flex-1">
<view class="route-plan-card__node-title text-[#1e293b] text-[16px] font-bold truncate">
<view class="route-plan-card__node-body min-w-0 flex-1">
<view class="route-plan-card__node-title w-full text-[#1e293b] text-[16px] font-bold truncate">
{{ node.title }}
</view>
<view class="route-plan-card__node-desc text-[#94a3b8] text-[12px] font-bold truncate">
<view class="route-plan-card__node-desc w-full text-[#94a3b8] text-[12px] font-bold truncate">
{{ node.description }}
</view>
<view v-if="node.tag"

6
src/pages/ChatModule/ScenicImageCard/index.vue
View File

@@ -9,11 +9,11 @@
{{ action.icon }}
</view>
<view v-if="hasCaption" class="scenic-image-card__caption">
<view v-if="caption.title" class="scenic-image-card__title text-white text-[18px] font-bold truncate">
<view v-if="hasCaption" class="scenic-image-card__caption box-border w-full min-w-0">
<view v-if="caption.title" class="scenic-image-card__title w-full text-white text-[18px] font-bold truncate">
{{ caption.title }}
</view>
<view v-if="caption.subtitle" class="scenic-image-card__subtitle text-white text-[14px] font-bold truncate">
<view v-if="caption.subtitle" class="scenic-image-card__subtitle w-full text-white text-[14px] font-bold truncate">
{{ caption.subtitle }}
</view>
</view>

6
src/pages/ChatModule/SharedVisual/ActionRow.vue
View File

@@ -6,9 +6,9 @@
:class="toneClass">
<slot name="icon">{{ icon }}</slot>
</view>
<view class="visual-action-row__body flex-1">
<view class="visual-action-row__title text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</view>
<view v-if="subtitle" class="visual-action-row__subtitle truncate">
<view class="visual-action-row__body min-w-0 flex-1">
<view class="visual-action-row__title w-full text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</view>
<view v-if="subtitle" class="visual-action-row__subtitle w-full truncate">
{{ subtitle }}
</view>
</view>

4
src/pages/ChatModule/SharedVisual/DetailShell.vue
View File

@@ -1,11 +1,11 @@
<template>
<CardShell variant="detail">
<view class="visual-detail__header flex items-center px-[16px] border-bottom-F1F5F9">
<view class="visual-detail__header box-border flex w-full min-w-0 items-center px-[16px] border-bottom-F1F5F9">
<view class="visual-detail__back mr-[8px] rounded-full bg-[#f8fafc] text-[#334155] font-bold text-center"
@click="$emit('back')">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>
<view class="visual-detail__title flex-1 text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</view>
<view class="visual-detail__title w-0 min-w-0 flex-1 text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</view>
<BadgePill v-if="tag" :label="tag" :tone="tone" />
</view>
<slot />

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;