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

@@ -0,0 +1,45 @@
+<template>
+  <CardShell class="scenic-image-card" variant="soft" pressable :disabled="disabled" @select="handleAction">
+    <view class="scenic-image-card__image-wrap relative">
+      <MediaFrame class="scenic-image-card__image h-260" :src="data.image" />
+      <view v-if="hasCaption" class="scenic-image-card__caption">
+        <view class="scenic-image-card__caption-title color-white font-size-14 font-900">{{ data.caption.title }}</view>
+        <view v-if="data.caption.subtitle" class="scenic-image-card__caption-subtitle font-size-11 font-700">
+          {{ data.caption.subtitle }}
+        </view>
+      </view>
+      <view class="scenic-image-card__expand absolute flex flex-items-center flex-justify-center w-32 h-32 rounded-full color-white font-size-16 font-900">⛶</view>
+    </view>
+  </CardShell>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import CardShell from "../SharedVisual/CardShell.vue";
+import MediaFrame from "../SharedVisual/MediaFrame.vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["select", "action"]);
+
+const hasCaption = computed(() => Boolean(props.data.caption?.title || props.data.caption?.subtitle));
+
+const handleAction = () => {
+  if (props.disabled) return;
+  emit("select", props.data);
+  emit("action", props.data);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

src/pages/ChatModule/ScenicImageCard/mocks.js

@@ -0,0 +1,7 @@
+export default {
+  image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1000&q=80",
+  caption: {
+    title: "水上森林二号机位",
+    subtitle: "下午逆光较弱，适合拍摄树影和水面反射",
+  },
+};

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

@@ -0,0 +1,30 @@
+.scenic-image-card__image-wrap {
+}
+
+.scenic-image-card__image {
+  border-radius: 0;
+}
+
+.scenic-image-card__caption {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 42px 16px 16px;
+  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.72) 100%);
+}
+
+.scenic-image-card__caption-title {
+  line-height: 20px;
+}
+
+.scenic-image-card__caption-subtitle {
+  margin-top: 3px;
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.scenic-image-card__expand {
+  top: 12px;
+  right: 12px;
+  background: rgba(0, 0, 0, 0.32);
+}