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/RecommendationListCard/index.vue

@@ -0,0 +1,58 @@
+<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
+        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="{ '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>
+        </view>
+      </view>
+    </view>
+  </CardShell>
+</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: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["select"]);
+
+const items = computed(() => props.data.items || []);
+
+const handleSelect = (item) => {
+  if (props.disabled) return;
+  emit("select", item);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

src/pages/ChatModule/RecommendationListCard/mocks.js

@@ -0,0 +1,21 @@
+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: "list-2",
+      title: "游客中心咖啡吧",
+      description: "可补水休息，靠近返程接驳点。",
+      meta: "步行 5 分钟",
+      cover: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=600&q=80",
+    },
+  ],
+};

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

@@ -0,0 +1,46 @@
+.recommendation-list-card {
+}
+
+.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__item {
+}
+
+.recommendation-list-card__item:active {
+  opacity: 0.86;
+}
+
+.recommendation-list-card__item.is-disabled {
+  opacity: 0.55;
+}
+
+.recommendation-list-card__thumb {
+}
+
+.recommendation-list-card__content {
+  min-width: 0;
+}
+
+.recommendation-list-card__name {
+}
+
+.recommendation-list-card__desc {
+  margin-top: 5px;
+  line-height: 16px;
+}
+
+.recommendation-list-card__meta {
+  margin-top: 7px;
+}