feat: add RecommendationListCard and RoutePlanCard components with styles and mocks

- Implemented RecommendationListCard component for displaying a list of recommendations with titles, descriptions, and badges.
- Created RoutePlanCard component to show route details, including nodes and tips, with a detailed view toggle.
- Added ScenicImageCard component for showcasing images with optional captions.
- Developed SharedVisual components: CardShell, BadgePill, MediaFrame, ActionRow, and DetailShell for reusable UI elements.
- Introduced SCSS styles for all new components and updated existing styles for consistency.
- Created test page to preview and interact with all components using mock data.
- Added new utility classes for background colors, borders, colors, display, flex, font sizes, font weights, heights, positions, rounded corners, and widths.

src/pages/ChatModule/PoiCompareCard/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <view class="poi-compare-card">
+    <CardShell v-if="!selectedItem" class="poi-compare-card__overview p-16" variant="soft">
+      <view class="poi-compare-card__header flex flex-justify-between gap-12">
+        <view>
+          <view class="poi-compare-card__title color-1E293B font-size-16 font-900">{{ data.title }}</view>
+          <view class="poi-compare-card__subtitle color-94A3B8 font-size-11 font-700">{{ data.subtitle }}</view>
+        </view>
+        <BadgePill v-if="data.badge" :label="data.badge" tone="purple" />
+      </view>
+      <view class="poi-compare-card__grid grid grid-cols-2 gap-10">
+        <view
+          v-for="item in items"
+          :key="item.id || item.title"
+          class="poi-compare-card__option p-8 rounded-18 bg-F8FAFC"
+          :class="{ 'is-disabled': disabled }"
+          @click="openDetail(item)"
+        >
+          <MediaFrame class="poi-compare-card__image h-108" :src="item.cover" />
+          <view class="poi-compare-card__option-title color-1E293B font-size-13 font-900 ellipsis-1">{{ item.title }}</view>
+          <view class="poi-compare-card__score color-7C3AED font-size-11 font-900">{{ item.score }}</view>
+        </view>
+      </view>
+    </CardShell>
+
+    <DetailShell
+      v-else
+      :title="selectedItem.title"
+      :tag="selectedItem.score"
+      tone="purple"
+      @back="closeDetail"
+    >
+      <view class="poi-compare-card__detail p-16">
+        <view
+          v-for="row in selectedDetails"
+          :key="row.label"
+          class="poi-compare-card__row flex flex-justify-between gap-16 border-bottom-F1F5F9"
+        >
+          <view class="poi-compare-card__row-label color-94A3B8 font-size-12 font-800">{{ row.label }}</view>
+          <view class="poi-compare-card__row-value color-1E293B font-size-12 font-900">{{ row.value }}</view>
+        </view>
+      </view>
+    </DetailShell>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import CardShell from "../SharedVisual/CardShell.vue";
+import BadgePill from "../SharedVisual/BadgePill.vue";
+import MediaFrame from "../SharedVisual/MediaFrame.vue";
+import DetailShell from "../SharedVisual/DetailShell.vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["select", "back"]);
+
+const selectedItem = ref(null);
+const items = computed(() => props.data.items || []);
+const selectedDetails = computed(() => selectedItem.value?.details || []);
+
+const openDetail = (item) => {
+  if (props.disabled) return;
+  selectedItem.value = item;
+  emit("select", item);
+};
+
+const closeDetail = () => {
+  selectedItem.value = null;
+  emit("back");
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>