feat: enhance PoiCompareCard and RecommendationListCard with improved layout, styles, and mock data; remove MultiPoiRecommendationCard from test page

src/pages/ChatModule/RecommendationListCard/index.vue

@@ -1,36 +1,45 @@
 <template>
-  <CardShell class="recommendation-list-card p-16" variant="soft">
-    <view class="recommendation-list-card__header flex flex-justify-between gap-12">
-      <view>
-        <view class="recommendation-list-card__title color-1E293B font-size-16 font-900">{{ data.title }}</view>
-        <view class="recommendation-list-card__subtitle color-94A3B8 font-size-11 font-700">{{ data.subtitle }}</view>
-      </view>
-      <BadgePill v-if="data.badge" :label="data.badge" tone="blue" />
-    </view>
-    <view class="recommendation-list-card__list flex flex-col gap-10">
+  <view class="recommendation-list-card w-full">
+    <scroll-view
+      class="recommendation-list-card__scroll scroll-x whitespace-nowrap w-full"
+      scroll-x
+      :show-scrollbar="false"
+      enhanced
+    >
       <view
         v-for="item in items"
         :key="item.id || item.title"
-        class="recommendation-list-card__item flex gap-12 p-10 rounded-18 bg-F8FAFC"
+        class="recommendation-list-card__item inline-block bg-white rounded-20 overflow-hidden"
         :class="{ 'is-disabled': disabled }"
         @click="handleSelect(item)"
       >
-        <MediaFrame class="recommendation-list-card__thumb w-72 h-72 flex-shrink-0" :src="item.cover" />
-        <view class="recommendation-list-card__content flex-full">
-          <view class="recommendation-list-card__name color-1E293B font-size-14 font-900 ellipsis-1">{{ item.title }}</view>
-          <view class="recommendation-list-card__desc color-64748B font-size-11 font-700 ellipsis-2">{{ item.description }}</view>
-          <view class="recommendation-list-card__meta color-2563EB font-size-10 font-900">{{ item.meta }}</view>
+        <image
+          class="recommendation-list-card__image block w-full"
+          :src="item.image"
+          mode="aspectFill"
+        />
+        <view class="recommendation-list-card__body p-16">
+          <view class="recommendation-list-card__name color-1E293B font-size-18 font-900 ellipsis-1">
+            {{ item.title }}
+          </view>
+          <view class="recommendation-list-card__distance flex flex-items-center gap-4 mt-4 color-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 color-334155 font-size-12 font-900"
+            @click.stop="handleSelect(item)"
+          >
+            {{ getActionText(item) }}
+          </view>
         </view>
       </view>
-    </view>
-  </CardShell>
+    </scroll-view>
+  </view>
 </template>
 
 <script setup>
 import { computed } from "vue";
-import CardShell from "../SharedVisual/CardShell.vue";
-import BadgePill from "../SharedVisual/BadgePill.vue";
-import MediaFrame from "../SharedVisual/MediaFrame.vue";
 
 const props = defineProps({
   data: {
@@ -47,6 +56,10 @@ const emit = defineEmits(["select"]);
 
 const items = computed(() => props.data.items || []);
 
+const getActionText = (item) => {
+  return (item.action && item.action.text) || "";
+};
+
 const handleSelect = (item) => {
   if (props.disabled) return;
   emit("select", item);

src/pages/ChatModule/RecommendationListCard/mocks.js

@@ -1,21 +1,22 @@
 export default {
-  title: "为你推荐",
-  subtitle: "按距离和热度排序",
-  badge: "3 个地点",
   items: [
     {
-      id: "list-1",
-      title: "水上森林步道",
-      description: "轻松步行即可到达，适合拍照和短途散步。",
-      meta: "距你 620m",
-      cover: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&q=80",
+      id: "waterfall",
+      title: "翠谷瀑布",
+      image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=700&q=80",
+      distance: "1.2km",
+      action: {
+        text: "查看详情",
+      },
     },
     {
-      id: "list-2",
-      title: "游客中心咖啡吧",
-      description: "可补水休息，靠近返程接驳点。",
-      meta: "步行 5 分钟",
-      cover: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=600&q=80",
+      id: "forest",
+      title: "水上森林",
+      image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=700&q=80",
+      distance: "2.5km",
+      action: {
+        text: "查看详情",
+      },
     },
   ],
 };

src/pages/ChatModule/RecommendationListCard/styles/index.scss

@@ -1,21 +1,18 @@
 .recommendation-list-card {
+  padding: 4px 0 8px;
 }
 
-.recommendation-list-card__header {
-  margin-bottom: 12px;
-}
-
-.recommendation-list-card__title {
-}
-
-.recommendation-list-card__subtitle {
-  margin-top: 4px;
-}
-
-.recommendation-list-card__list {
+.recommendation-list-card__scroll {
+  padding-bottom: 2px;
 }
 
 .recommendation-list-card__item {
+  width: 200px;
+  margin-right: 14px;
+  vertical-align: top;
+  border: 1px solid #f1f5f9;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
+  box-sizing: border-box;
 }
 
 .recommendation-list-card__item:active {
@@ -26,21 +23,31 @@
   opacity: 0.55;
 }
 
-.recommendation-list-card__thumb {
+.recommendation-list-card__image {
+  height: 110px;
 }
 
-.recommendation-list-card__content {
-  min-width: 0;
+.recommendation-list-card__body {
+  box-sizing: border-box;
 }
 
 .recommendation-list-card__name {
+  line-height: 22px;
 }
 
-.recommendation-list-card__desc {
-  margin-top: 5px;
+.recommendation-list-card__distance {
   line-height: 16px;
 }
 
-.recommendation-list-card__meta {
-  margin-top: 7px;
+.recommendation-list-card__pin {
+  font-size: 13px;
+  line-height: 13px;
+}
+
+.recommendation-list-card__button {
+  height: 36px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #f8fafc;
+  box-sizing: border-box;
 }