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

refactor: convert legacy color classes to tailwind syntax

Browse Source 
Replace all custom `bg-*` utility classes across Vue components with Tailwind's arbitrary hex color notation (e.g. `bg-[#f7f7f7]`). Remove redundant hardcoded background color definitions from src/static/scss/background.scss, clean up template formatting, and update gradient button styles to use direct hex values.
This commit is contained in:
duanshuwen
2026-07-24 15:56:35 +08:00
parent d3d15b1a19
commit aa0203819c
27 changed files with 225 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,17 +1,10 @@
<template>
<view class="long-text-guide-card w-full">
<view v-if="mode === 'list'" class="long-text-guide-card__list w-full">
<view
v-for="item in cards"
:key="item.id"
class="long-text-guide-card__summary-card bg-white rounded-24 border-box"
:class="{ 'is-disabled': disabled }"
@click="openDetail(item)"
>
<view
class="long-text-guide-card__badge font-size-12 font-900"
:class="`is-${item.badgeTone}`"
>
<view v-for="item in cards" :key="item.id"
class="long-text-guide-card__summary-card bg-white rounded-24 border-box" :class="{ 'is-disabled': disabled }"
@click="openDetail(item)">
<view class="long-text-guide-card__badge font-size-12 font-900" :class="`is-${item.badgeTone}`">
{{ item.badge }}
</view>
<view class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
@@ -29,76 +22,49 @@
<view v-else class="long-text-guide-card__detail-card bg-white rounded-24 border-box overflow-hidden">
<view class="long-text-guide-card__detail-header flex flex-items-center border-bottom-F1F5F9">
<view
class="long-text-guide-card__back flex flex-items-center flex-justify-center rounded-full font-700"
@click="closeDetail"
>
<view class="long-text-guide-card__back flex flex-items-center flex-justify-center rounded-full font-700"
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>
<view class="long-text-guide-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1">
{{ activeItem.title }}
</view>
<view
class="long-text-guide-card__badge long-text-guide-card__detail-badge font-size-12 font-900"
:class="`is-${activeItem.badgeTone}`"
>
<view class="long-text-guide-card__badge long-text-guide-card__detail-badge font-size-12 font-900"
:class="`is-${activeItem.badgeTone}`">
{{ activeItem.badge }}
</view>
</view>
<view class="long-text-guide-card__rich-body">
<view
v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage"
:key="`before-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500"
>
<template
v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`"
>
<text
v-if="segment.highlight"
class="long-text-guide-card__highlight font-800"
>
<view v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage" :key="`before-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500">
<template v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`">
<text v-if="segment.highlight" class="long-text-guide-card__highlight font-800">
{{ segment.text }}
</text>
<text v-else>{{ segment.text }}</text>
</template>
</view>
<image
v-if="activeItem.image"
class="long-text-guide-card__main-image w-full rounded-14 block"
:src="activeItem.image"
mode="aspectFill"
/>
<image v-if="activeItem.image" class="long-text-guide-card__main-image w-full rounded-14 block"
:src="activeItem.image" mode="aspectFill" />
<view class="long-text-guide-card__section-title color-1E293B font-size-16 font-900">
{{ activeItem.sectionTitle }}
</view>
<view class="long-text-guide-card__tip-block bg-ECFDF5">
<view
v-for="(tip, index) in activeItem.tips || []"
:key="tip"
class="long-text-guide-card__tip color-047857 font-size-14 font-800"
>
<view class="long-text-guide-card__tip-block bg-[#ecfdf5]">
<view v-for="(tip, index) in activeItem.tips || []" :key="tip"
class="long-text-guide-card__tip color-047857 font-size-14 font-800">
{{ index + 1 }} {{ tip }}
</view>
</view>
<view
v-for="(paragraph, paragraphIndex) in paragraphsAfterTips"
:key="`after-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500"
>
<template
v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`"
>
<text
v-if="segment.highlight"
class="long-text-guide-card__highlight font-800"
>
<view v-for="(paragraph, paragraphIndex) in paragraphsAfterTips" :key="`after-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500">
<template v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`">
<text v-if="segment.highlight" class="long-text-guide-card__highlight font-800">
{{ segment.text }}
</text>
<text v-else>{{ segment.text }}</text>
@@ -112,11 +78,8 @@
</view>
<view class="long-text-guide-card__map-card rounded-16 overflow-hidden">
<view class="long-text-guide-card__map-image-wrap relative">
<image
class="long-text-guide-card__map-image w-full block"
:src="activeItem.action.image"
mode="aspectFill"
/>
<image class="long-text-guide-card__map-image w-full block" :src="activeItem.action.image"
mode="aspectFill" />
<view class="long-text-guide-card__map-tag color-white font-size-10 font-900">
{{ activeItem.action.tag }}
</view>
@@ -126,10 +89,8 @@
<view class="color-1E293B font-size-15 font-900">{{ activeItem.action.title }}</view>
<view class="color-94A3B8 font-size-12 font-800 mt-2">{{ activeItem.action.subtitle }}</view>
</view>
<view
class="long-text-guide-card__nav-btn color-white bg-0F172A font-size-14 font-900"
@click="handleAction(activeItem)"
>
<view class="long-text-guide-card__nav-btn color-white bg-[#0f172a] font-size-14 font-900"
@click="handleAction(activeItem)">
{{ activeItem.action.buttonText }}
</view>
</view>
@@ -141,12 +102,10 @@
{{ activeItem.action.label }}
</view>
<view class="long-text-guide-card__photo-card relative" @click="handleAction(activeItem)">
<image
class="long-text-guide-card__photo-image w-full block"
:src="activeItem.action.image"
mode="aspectFill"
/>
<view class="long-text-guide-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900">
<image class="long-text-guide-card__photo-image w-full block" :src="activeItem.action.image"
mode="aspectFill" />
<view
class="long-text-guide-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900">
↗
</view>
</view>