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

feat: replace arrow characters with uni-icons in various cards; enhance visual consistency and user experience

Browse Source
This commit is contained in:
DEV_DSW
2026-05-13 17:09:22 +08:00
parent 0afb690262
commit 2b908436fd
12 changed files with 12 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,7 +22,7 @@
<view class="faq-help-card__question color-475569 font-size-18 font-900 ellipsis-1 flex-full">
{{ item.text }}
</view>
<view class="faq-help-card__arrow color-CBD5E1 font-size-22 font-900 flex-shrink-0">›</view>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
</view>
</view>
</view>

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

@@ -22,7 +22,7 @@
</view>
<view class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
<text class="color-CBD5E1 font-size-12 font-800">{{ item.footer }}</text>
<text class="long-text-guide-card__arrow color-CBD5E1 font-700">›</text>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
</view>
</view>
</view>
@@ -33,7 +33,7 @@
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 }}

49
src/pages/ChatModule/LongTextGuideComboCard/index.vue
View File

@@ -1,49 +0,0 @@
<template>
<view class="long-text-guide-combo-card">
<LongTextGuideCard
:data="data"
:disabled="disabled"
@select="$emit('select', $event)"
@back="$emit('back', $event)"
@action="$emit('action', $event)"
/>
<view v-if="actions.length" class="long-text-guide-combo-card__actions flex flex-col gap-10 mt-12 p-10 rounded-24">
<ActionRow
v-for="item in actions"
:key="item.title"
:title="item.title"
:subtitle="item.subtitle"
:icon="item.icon"
:tone="item.tone || 'green'"
:disabled="disabled"
:payload="item"
@action="$emit('action', $event)"
/>
</view>
</view>
</template>
<script setup>
import { computed } from "vue";
import LongTextGuideCard from "../LongTextGuideCard/index.vue";
import ActionRow from "../SharedVisual/ActionRow.vue";
const props = defineProps({
data: {
type: Object,
default: () => ({}),
},
disabled: {
type: Boolean,
default: false,
},
});
defineEmits(["select", "back", "action"]);
const actions = computed(() => props.data.actions || []);
</script>
<style scoped lang="scss">
@import "./styles/index.scss";
</style>

22
src/pages/ChatModule/LongTextGuideComboCard/mocks.js
View File

@@ -1,22 +0,0 @@
export default {
cards: [
{
id: "combo-guide",
badge: "组合攻略",
time: "约 5 分钟阅读",
title: "一天内拍照、游览和用餐怎么安排",
summary: "把景点详情、大图机位、导航和票务入口组合到同一张攻略卡后续行动区。",
footer: "展开攻略和行动",
sections: [
{ title: "上午", content: "先拍远景与人像，再进入主步道游览。" },
{ title: "下午", content: "根据光线选择二号机位，最后去游客中心附近补给。" },
],
action: { title: "查看景点详情", subtitle: "开放时间与路线", icon: "i" },
},
],
actions: [
{ title: "查看机位图", subtitle: "高清大图与拍摄角度", icon: "▣", tone: "blue" },
{ title: "带我去这里", subtitle: "地图路线与步行距离", icon: "⌖", tone: "green" },
{ title: "相关票务", subtitle: "门票和套票入口", icon: "¥", tone: "amber" },
],
};

8
src/pages/ChatModule/LongTextGuideComboCard/styles/index.scss
View File

@@ -1,8 +0,0 @@
.long-text-guide-combo-card {
width: 100%;
}
.long-text-guide-combo-card__actions {
background: rgba(255, 255, 255, 0.62);
box-shadow: 0 8px 26px rgba(15, 23, 42, 0.04);
}

37
src/pages/ChatModule/MultiPoiRecommendationCard/index.vue
View File

@@ -1,37 +0,0 @@
<template>
<view class="multi-poi-recommendation-card">
<PoiDetailCard
v-for="item in items"
:key="item.id || item.title"
class="multi-poi-recommendation-card__item"
:data="item"
:disabled="disabled"
@select="$emit('select', $event)"
@action="$emit('action', $event)"
/>
</view>
</template>
<script setup>
import { computed } from "vue";
import PoiDetailCard from "../PoiDetailCard/index.vue";
const props = defineProps({
data: {
type: Object,
default: () => ({}),
},
disabled: {
type: Boolean,
default: false,
},
});
defineEmits(["select", "action"]);
const items = computed(() => props.data.items || []);
</script>
<style scoped lang="scss">
@import "./styles/index.scss";
</style>

34
src/pages/ChatModule/MultiPoiRecommendationCard/mocks.js
View File

@@ -1,34 +0,0 @@
export default {
items: [
{
id: "poi-1",
title: "翠谷瀑布",
category: "自然景观",
cover: "https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?auto=format&fit=crop&w=900&q=80",
description: "主线步道上的核心停留点，适合拍摄水景。",
facts: [
{ label: "距离", value: "500m" },
{ label: "推荐", value: "高" },
{ label: "耗时", value: "30m" },
],
tags: ["亲水", "拍照"],
actionTitle: "导航到瀑布",
actionSubtitle: "步行约 8 分钟",
},
{
id: "poi-2",
title: "水上森林",
category: "亲子友好",
cover: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=900&q=80",
description: "树影和水面交错，适合慢游和家庭出行。",
facts: [
{ label: "距离", value: "1.2km" },
{ label: "推荐", value: "中高" },
{ label: "耗时", value: "45m" },
],
tags: ["轻徒步", "观景"],
actionTitle: "导航到水上森林",
actionSubtitle: "观光车约 6 分钟",
},
],
};

10
src/pages/ChatModule/MultiPoiRecommendationCard/styles/index.scss
View File

@@ -1,10 +0,0 @@
.multi-poi-recommendation-card {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.multi-poi-recommendation-card__item {
flex-shrink: 0;
}

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

@@ -27,7 +27,7 @@
class="notice-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
@click="closeDetail"
>
‹
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>
<view class="notice-card__head-title color-1E293B font-size-18 font-900">
{{ detail.navTitle }}

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

@@ -60,7 +60,7 @@
class="poi-compare-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
@click="closeDetail"
>
‹
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>
<view class="poi-compare-card__detail-title color-1E293B font-size-20 font-900 flex-full">
{{ detail.title }}

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

@@ -26,7 +26,9 @@
</view>
</view>
</view>
<view class="route-plan-card__arrow flex-shrink-0"></view>
<view class="flex-shrink-0">
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
</view>
</view>
<view v-else class="route-plan-card__detail bg-white rounded-24 overflow-hidden w-full">
@@ -35,7 +37,7 @@
class="route-plan-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
@click="closeDetail"
>
‹
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>
<view class="route-plan-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
{{ data.title }}

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

@@ -1,7 +1,9 @@
<template>
<CardShell variant="detail">
<view class="visual-detail__header flex flex-items-center px-16 border-box border-bottom-F1F5F9">
<view class="visual-detail__back mr-8 rounded-full bg-F8FAFC color-334155 font-900 text-center" @click="$emit('back')">‹</view>
<view class="visual-detail__back mr-8 rounded-full bg-F8FAFC color-334155 font-900 text-center" @click="$emit('back')">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view>
<view class="visual-detail__title flex-full color-1E293B font-size-14 font-900 ellipsis-1">{{ title }}</view>
<BadgePill v-if="tag" :label="tag" :tone="tone" />
</view>