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

refactor: remove margin utils, use inline pixel spacing

Browse Source 
Delete the src/static/scss/margin.scss utility file, update all component templates to replace pre-defined margin classes with inline arbitrary pixel values (e.g. mb-[4px] instead of mb-4), and clean up long template lines for better readability.
This commit is contained in:
duanshuwen
2026-07-24 22:02:09 +08:00
parent 0883d2b9c9
commit c125154a75
53 changed files with 167 additions and 554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/ChatMain/ChatCardOther/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="w-full flex flex-col overflow-hidden pl-[12px] mt-6 mb-6">
<view class="w-full flex flex-col overflow-hidden pl-[12px] mt-[6px] mb-[6px]">
<text class="font-size-14 text-[#333333]">{{ text }}</text>
<slot></slot>
</view>

99
src/pages/ChatMain/ChatLongAnswer/ParsedValueView.vue
View File

@@ -4,7 +4,7 @@
<image class="content-body-image content-body-image-bottom" :src="contentImageUrl" mode="widthFix"
@click="handlePreviewClick(contentImageUrl)" />
</template>
<template v-else-if="shouldRenderSpotLocate">
<view class="detail-action-zone">
<view class="detail-action-label">查看景点详情</view>
@@ -13,7 +13,8 @@
<view class="poi-mini-body">
<view v-if="spotLocateValue.name" class="poi-mini-title">{{ spotLocateValue.name }}</view>
<view v-if="spotLocateValue.description" class="poi-mini-desc">{{ spotLocateValue.description }}</view>
<button v-if="hasMapLocation(spotLocateValue)" class="detail-solid-button" @click.stop="openMap(spotLocateValue)">带我去</button>
<button v-if="hasMapLocation(spotLocateValue)" class="detail-solid-button"
@click.stop="openMap(spotLocateValue)">带我去</button>
</view>
</view>
</view>
@@ -53,21 +54,12 @@
<view class="detail-action-label">相关票务</view>
<scroll-view class="detail-product-scroll" :scroll-x="!isSingleCommodity">
<view class="detail-product-row">
<view
v-for="commodity in commodityItems"
:key="commodity.commodity_id || commodity.commodity_name"
class="detail-product-card"
:class="{ 'overview-combo-card': isSingleCommodity }"
>
<view v-for="commodity in commodityItems" :key="commodity.commodity_id || commodity.commodity_name"
class="detail-product-card" :class="{ 'overview-combo-card': isSingleCommodity }">
<template v-if="isSingleCommodity">
<view class="overview-combo-body">
<image
v-if="commodity.commodity_photo"
class="overview-combo-cover"
:src="commodity.commodity_photo"
mode="aspectFill"
@click="handlePreviewClick(commodity.commodity_photo)"
/>
<image v-if="commodity.commodity_photo" class="overview-combo-cover" :src="commodity.commodity_photo"
mode="aspectFill" @click="handlePreviewClick(commodity.commodity_photo)" />
<view class="overview-combo-info">
<view v-if="commodity.commodity_name" class="overview-combo-name">
{{ commodity.commodity_name }}
@@ -80,23 +72,15 @@
</view>
</view>
</view>
<button
v-if="commodity.commodity_id"
class="overview-combo-button"
@click.stop="openCommodityDetail(commodity)"
>
<button v-if="commodity.commodity_id" class="overview-combo-button"
@click.stop="openCommodityDetail(commodity)">
立即购买
</button>
</template>
<template v-else>
<image
v-if="commodity.commodity_photo"
class="detail-product-image"
:src="commodity.commodity_photo"
mode="aspectFill"
@click="handlePreviewClick(commodity.commodity_photo)"
/>
<image v-if="commodity.commodity_photo" class="detail-product-image" :src="commodity.commodity_photo"
mode="aspectFill" @click="handlePreviewClick(commodity.commodity_photo)" />
<view class="detail-product-body">
<view v-if="commodity.commodity_tag" class="detail-product-tag">
{{ commodity.commodity_tag }}
@@ -107,11 +91,8 @@
<view v-if="commodity.commodity_price" class="detail-product-price">
<text class="detail-product-currency">¥</text>{{ commodity.commodity_price }}
</view>
<button
v-if="commodity.commodity_id"
class="detail-buy-button"
@click.stop="openCommodityDetail(commodity)"
>
<button v-if="commodity.commodity_id" class="detail-buy-button"
@click.stop="openCommodityDetail(commodity)">
立即购买
</button>
</view>
@@ -124,19 +105,10 @@
<template v-else-if="shouldRenderPhotoList">
<view class="detail-action-zone">
<view class="detail-action-label mt-12">查看机位图</view>
<swiper
class="photo-card-swiper"
:indicator-dots="photoItems.length > 1"
indicator-color="#FFFFFF"
indicator-active-color="#00A6FF"
circular
:duration="250"
>
<swiper-item
v-for="photo in photoItems"
:key="photo.photo_url || photo.photo_name"
>
<view class="detail-action-label mt-[12px]">查看机位图</view>
<swiper class="photo-card-swiper" :indicator-dots="photoItems.length > 1" indicator-color="#FFFFFF"
indicator-active-color="#00A6FF" circular :duration="250">
<swiper-item v-for="photo in photoItems" :key="photo.photo_url || photo.photo_name">
<view class="photo-card" @click="handlePreviewClick(photo.photo_url, photoItems.map(p => p.photo_url))">
<image class="photo-card-image" :src="photo.photo_url" mode="aspectFill" />
<view class="photo-card-caption">
@@ -171,11 +143,8 @@
<view v-if="aigcComponetValue.description" class="aigc-desc">
{{ aigcComponetValue.description }}
</view>
<button
v-if="aigcComponetValue.jumpUrl"
class="detail-solid-button aigc-button"
@click="jumpAigcClick(aigcComponetValue)"
>
<button v-if="aigcComponetValue.jumpUrl" class="detail-solid-button aigc-button"
@click="jumpAigcClick(aigcComponetValue)">
生成我的合影
</button>
</view>
@@ -208,11 +177,7 @@
<template v-else>
<template v-for="entry in renderFieldEntries" :key="entry.key">
<ChatMarkdown
v-if="entry.type === 'text'"
class="content-body-markdown"
:text="entry.value"
/>
<ChatMarkdown v-if="entry.type === 'text'" class="content-body-markdown" :text="entry.value" />
<view v-else-if="entry.type === 'image'" class="content-body-image-card">
<image class="content-body-image" :src="entry.value.image_id" mode="widthFix"
@@ -222,16 +187,14 @@
</view>
</view>
<view v-else-if="entry.type === 'list'" class="content-body-list-card" :style="getContentBodyListCardStyle(entry.key)">
<view v-else-if="entry.type === 'list'" class="content-body-list-card"
:style="getContentBodyListCardStyle(entry.key)">
<view v-for="(item, index) in entry.value" :key="index" class="content-body-list-item">
<view class="content-body-list-text">
<ChatMarkdown
class="content-body-markdown"
:text="formatLeafValue(item)"
<ChatMarkdown class="content-body-markdown" :text="formatLeafValue(item)"
:theme-color="getContentBodyMarkdownColor(entry.key)"
:font-color="getContentBodyMarkdownColor(entry.key)"
:font-sub-color="getContentBodyMarkdownColor(entry.key)"
/>
:font-sub-color="getContentBodyMarkdownColor(entry.key)" />
</view>
</view>
</view>
@@ -429,7 +392,7 @@ const aigcComponetValue = computed(() => getAigcComponetValue(displayValue.value
const getTourRoutesValue = (value) => {
const tourRoutes = isObjectValue(value) ? value : {};
return {
routes_title: toTrimmedText(tourRoutes.routes_title),
full_routes: toTrimmedText(tourRoutes.full_routes),
@@ -616,11 +579,13 @@ const openMap = (spot) => {
const longitude = spot.longitude;
const name = spot.name || "";
const address = spot.description || name;
uni.getLocation({ type: 'gcj02', success: () => {
uni.openLocation({ latitude, longitude, name, address });
}, fail: () => {
uni.openLocation({ latitude, longitude, name, address });
}});
uni.getLocation({
type: 'gcj02', success: () => {
uni.openLocation({ latitude, longitude, name, address });
}, fail: () => {
uni.openLocation({ latitude, longitude, name, address });
}
});
};
const sendReply = (item) => {

2
src/pages/ChatMain/ChatMoreTips/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<view class="more-tips bg-white border-box">
<view class="font-size-0 whitespace-nowrap scroll-x">
<view class="more-tips-item inline-block mr-8" v-for="(item, index) in guideWords" :key="index">
<view class="more-tips-item inline-block mr-[8px]" v-for="(item, index) in guideWords" :key="index">
<text :class="['font-500 font-size-12 text-center', `color-${index}`]" @click="sendReply(item)">
{{ item }}
</text>

2
src/pages/ChatMain/ChatTopNavBar/index.vue
View File

@@ -12,7 +12,7 @@
:totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns" :displayWidth="spriteStyle.displayWidth"
:fps="16" />
<text v-show="show" :class="[
'font-size-14 font-500 text-[#171717] ml-10',
'font-size-14 font-500 text-[#171717] ml-[10px]',
{ 'text-animated': show },
]">
{{ config.name }}

7
src/pages/ChatMain/NoticeMessage/detail.vue
View File

@@ -13,12 +13,13 @@
<view class="pt-[16px] px-[12px] pb-[24px] border-box">
<view class="text-[#171717] font-size-16 font-weight-600">{{ detailTitle }}</view>
<view v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-16">
<view v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-[16px]">
<uni-icons type="clock" size="18" color="#5A6780" />
<text class="text-[#171717] font-size-12 font-weight-600 ml-8">发布时间：{{ publishTime }}</text>
<text class="text-[#171717] font-size-12 font-weight-600 ml-[8px]">发布时间：{{ publishTime }}</text>
</view>
<view class="mt-20 pt-[16px] text-[#666666] font-size-14 leading-[20px] border-top">{{ noticeContent }}</view>
<view class="mt-[20px] pt-[16px] text-[#666666] font-size-14 leading-[20px] border-top">{{ noticeContent }}
</view>
</view>
</view>
</scroll-view>

8
src/pages/ChatModule/AnswerComponent/index.vue
View File

@@ -4,7 +4,7 @@
<view class="w-vw"></view>
<view class="flex flex-col px-[16px] pt-[16px] pb-[12px] border-box" @click="lookDetailAction">
<view v-if="tag" class="long-answer-tag" :style="longAnswerTagStyle">{{ tag }}</view>
<view v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-4">
<view v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-[4px]">
<text class="font-size-16 font-600 text-[#0B5C2D]"> {{ title }}</text>
</view>
<!-- 文字内容，根据数据模式限制预览行数 -->
@@ -12,12 +12,12 @@
<ChatMarkdown :text="processedContent" :fontColor="'#94A3B8'" />
</view>
<!-- 超过2行时显示...提示 -->
<view v-if="!finish" class="flex flex-row flex-items-center mt-8">
<view v-if="!finish" class="flex flex-row flex-items-center mt-[8px]">
<text class="font-size-12 font-500 font-color-600">正在生成</text>
<ChatLoading />
</view>
<view v-if="isOverflow" class="flex flex-row flex-items-center flex-justify-between mt-12">
<text class="font-size-12 font-800 text-[#cbd5e1] mr-4">查看完整{{ tag }}</text>
<view v-if="isOverflow" class="flex flex-row flex-items-center flex-justify-between mt-[12px]">
<text class="font-size-12 font-800 text-[#cbd5e1] mr-[4px]">查看完整{{ tag }}</text>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
</view>

2
src/pages/ChatModule/CallMobile/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<uni-popup ref="popup" type="center" :safe-area="false">
<view class="popup-content bg-white mx-24 px-[12px] py-16 rounded-[12px]">
<view class="popup-content bg-white mx-[24px] px-[12px] py-16 rounded-[12px]">
<view class="header flex flex-items-center pb-[12px]">
<view class="title flex-full text-center font-size-17 text-[#000000] font-500 ml-[24px]">呼叫热线</view>
<uni-icons type="close" size="24" color="#CACFD8" @click="close" />

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

@@ -2,7 +2,7 @@
<view class="container w-full border-ff overflow-hidden rounded-[24px] flex flex-col">
<!-- 占位撑开 -->
<view class="w-vw"></view>
<view class="content flex flex-col m-4 rounded-[24px]">
<view class="content flex flex-col m-[4px] rounded-[24px]">
<view class="flex flex-col p-[6px] flex-items-center justify-center">
<image class="w-full rounded-[20px]" :src="componentDataMap.background" mode="widthFix" />
@@ -12,9 +12,9 @@
<text class="tag-text">{{ componentDataMap.superscript }}</text>
</view>
<image class="g_title mt-20" :src="componentDataMap.title" />
<image class="g_title mt-[20px]" :src="componentDataMap.title" />
<text class="font-size-14 font-400 text-white my-12 text-center">
<text class="font-size-14 font-400 text-white my-[12px] text-center">
{{ componentDataMap.description }}
</text>

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

@@ -87,7 +87,7 @@
<view class="long-text-guide-card__map-bar flex flex-items-center bg-white">
<view class="flex-full">
<view class="text-[#1e293b] font-size-15 font-900">{{ activeItem.action.title }}</view>
<view class="text-[#94a3b8] font-size-12 font-800 mt-2">{{ activeItem.action.subtitle }}</view>
<view class="text-[#94a3b8] font-size-12 font-800 mt-[2px]">{{ activeItem.action.subtitle }}</view>
</view>
<view class="long-text-guide-card__nav-btn text-white bg-[#0f172a] font-size-14 font-900"
@click="handleAction(activeItem)">

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

@@ -10,10 +10,10 @@
</view>
<view class="center ml-[12px]">
<view class="font-color-900 font-size-14">打开导览地图</view>
<view class="font-color-500 font-size-12 mt-6">距你 {{ distance }} · 步行 {{ walk }}</view>
<view class="font-color-500 font-size-12 mt-[6px]">距你 {{ distance }} · 步行 {{ walk }}</view>
</view>
<view class="ml-[12px] flex flex-items-center flex-justify-center w-32 h-32 rounded-full bg-[#f2f5f8]">
<uni-icons class="mb-2" type="right" size="12" color="#99A0AE" />
<uni-icons class="mb-[2px]" type="right" size="12" color="#99A0AE" />
</view>
</view>
</view>

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

@@ -3,9 +3,9 @@
<ModuleTitle :title="recommendTheme.themeName" />
<view class="container-scroll font-size-0 scroll-x whitespace-nowrap">
<view class="card-item bg-white inline-block rounded-[20px] mr-8"
<view class="card-item bg-white inline-block rounded-[20px] mr-[8px]"
v-for="(item, index) in recommendTheme.recommendPostsList" :key="index" @click="sendReply(item)">
<view class="m-4 relative">
<view class="m-[4px] relative">
<image class="card-img rounded-[16px] relative z-10" :src="item.coverPhoto" mode="aspectFill" />
<view class="shadow absolute rounded-[16px]"></view>

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

@@ -11,12 +11,12 @@
{{ item.title }}
</view>
<view
class="recommendation-list-card__distance flex flex-items-center gap-[4px] mt-4 text-[#94a3b8] font-size-12 font-800">
class="recommendation-list-card__distance flex flex-items-center gap-[4px] mt-[4px] text-[#94a3b8] font-size-12 font-800">
<text class="recommendation-list-card__pin">⌖</text>
<text>{{ item.distance }}</text>
</view>
<view
class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-12 text-[#334155] font-size-12 font-900"
class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-[12px] text-[#334155] font-size-12 font-900"
@click.stop="handleSelect(item)">
{{ getActionText(item) }}
</view>

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

@@ -1,7 +1,7 @@
<template>
<CardShell variant="detail">
<view class="visual-detail__header flex flex-items-center px-[16px] border-bottom-F1F5F9">
<view class="visual-detail__back mr-8 rounded-full bg-[#f8fafc] text-[#334155] font-900 text-center"
<view class="visual-detail__back mr-[8px] rounded-full bg-[#f8fafc] text-[#334155] font-900 text-center"
@click="$emit('back')">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>

2
src/pages/ChatModule/ZModuleBase/index.vue
View File

@@ -2,7 +2,7 @@
<view class="container w-full border-ff overflow-hidden rounded-[24px] flex flex-col">
<!-- 占位撑开 -->
<view class="w-vw"></view>
<view class="flex flex-col m-4 rounded-[24px]">
<view class="flex flex-col m-[4px] rounded-[24px]">
<slot name="content"></slot>
</view>
</view>

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

@@ -2,7 +2,7 @@
<view class="container pl-[12px]">
<view class="container-scroll font-size-0 scroll-x whitespace-nowrap">
<view class="card-item bg-white inline-block rounded-[20px] mr-10" v-for="(item, index) in list" :key="index"
<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="flex flex-row flex-justify-start p-[10px]">

2
src/pages/goods/album/index.vue
View File

@@ -2,7 +2,7 @@
<view class="bg-[#f5f7fa] flex flex-col h-screen overflow-hidden">
<TopNavBar title="房间相册" backgroundColor="transparent" />
<view class="p-[8px]">
<text class="ml-4 font-size-18 text-[#171717] font-500">全部({{ albumList.length }})</text>
<text class="ml-[4px] font-size-18 text-[#171717] font-500">全部({{ albumList.length }})</text>
</view>
<scroll-view scroll-y class="scroll-container overflow-auto">

6
src/pages/goods/components/GoodFacility/index.vue
View File

@@ -9,12 +9,12 @@
<uni-icons fontFamily="znicons" size="20" color="#171717">
{{ zniconsMap[moduleItem.icon] }}
</uni-icons>
<text class="ml-4 font-size-12 text-[#171717] leading-[20px]">
<text class="ml-[4px] font-size-12 text-[#171717] leading-[20px]">
{{ moduleItem.title }}
</text>
</view>
<view class="border-box flex flex-col flex-items-start mt-4 pb-[12px]">
<text class="font-size-12 text-[#525866] leading-[20px] mb-4" v-for="(text, index) in moduleItem.desc"
<view class="border-box flex flex-col flex-items-start mt-[4px] pb-[12px]">
<text class="font-size-12 text-[#525866] leading-[20px] mb-[4px]" v-for="(text, index) in moduleItem.desc"
:key="index">
{{ text }}
</text>

2
src/pages/goods/components/GoodPackage/index.vue
View File

@@ -2,7 +2,7 @@
<view class="border-box border-top-8 pl-[12px] pr-[12px] pt-[6px] pb-[12px]">
<ModuleTitle v-if="showTitle" title="套餐包含内容" />
<view class="flex flex-items-start flex-col" v-for="(item, index) in goodsData.commodityPackageConfig" :key="index">
<view class="title-row py-[4px] ml-4">
<view class="title-row py-[4px] ml-[4px]">
<text class="left font-size-14 text-[#171717]">{{ item.name }}</text>
<view class="sep" aria-hidden="true"></view>
<text class="right font-size-14 text-[#171717]">{{ item.count }}{{ item.unit }}</text>

2
src/pages/goods/index.vue
View File

@@ -35,7 +35,7 @@
<!-- 立即抢购 -->
<view class="footer border-top">
<view class="amt font-size-20 font-bold text-[#ff3d60] line-height-28 flex flex-items-center mr-8">
<view class="amt font-size-20 font-bold text-[#ff3d60] line-height-28 flex flex-items-center mr-[8px]">
{{ calculatedTotalPrice }}
</view>

8
src/pages/login/index.vue
View File

@@ -17,11 +17,13 @@
<view class="login-agreement flex flex-items-center">
<CheckBox v-model="isAgree">
<text class="font-size-12 text-[#525866]">我已阅读并同意</text>
<text class="font-size-12 text-[#0CCD58] ml-4 mr-4" @click.stop="handleAgreeClick('service')">《服务协议》</text>
<text class="font-size-12 text-[#0CCD58] ml-[4px] mr-[4px]"
@click.stop="handleAgreeClick('service')">《服务协议》</text>
<text class="font-size-12 text-[#525866]">和</text>
<text class="font-size-12 text-[#0CCD58] ml-4 mr-4" @click.stop="handleAgreeClick('privacy')">《隐私协议》</text>
<text class="font-size-12 text-[#0CCD58] ml-[4px] mr-[4px]"
@click.stop="handleAgreeClick('privacy')">《隐私协议》</text>
<text class="font-size-12 text-[#525866]">，\n</text>
<text class="font-size-12 text-[#525866] ml-30">授权与账号关联操作</text>
<text class="font-size-12 text-[#525866] ml-[30px]">授权与账号关联操作</text>
</CheckBox>
</view>