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

@@ -0,0 +1,45 @@
+<template>
+  <CardShell class="map-navigation-card" variant="soft">
+    <view class="map-navigation-card__map">
+      <MediaFrame class="map-navigation-card__image h-178" :src="data.mapImage" />
+      <view class="map-navigation-card__pin color-334155 font-size-10 font-900">{{ data.pinText }}</view>
+    </view>
+    <view class="map-navigation-card__bar flex flex-items-center gap-12">
+      <view class="map-navigation-card__info flex-full">
+        <view class="map-navigation-card__title color-1E293B font-size-14 font-900 ellipsis-1">{{ data.title }}</view>
+        <view class="map-navigation-card__distance color-94A3B8 font-size-11 font-800 ellipsis-1">{{ data.distance }}</view>
+      </view>
+      <view class="map-navigation-card__button rounded-50 color-white bg-0F172A font-size-12 font-900" :class="{ 'is-disabled': disabled }" @click="handleAction">
+        {{ data.buttonText }}
+      </view>
+    </view>
+  </CardShell>
+</template>
+
+<script setup>
+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 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/MapNavigationCard/mocks.js

@@ -0,0 +1,7 @@
+export default {
+  mapImage: "https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=900&q=80",
+  pinText: "目的地",
+  title: "前往翠谷瀑布",
+  distance: "距你 500m · 步行约 8 分钟",
+  buttonText: "导航",
+};

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

@@ -0,0 +1,39 @@
+.map-navigation-card__map {
+  position: relative;
+  padding: 8px;
+}
+
+.map-navigation-card__image {
+}
+
+.map-navigation-card__pin {
+  position: absolute;
+  top: 18px;
+  left: 18px;
+  padding: 5px 9px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.map-navigation-card__bar {
+  padding: 0 14px 14px;
+}
+
+.map-navigation-card__info {
+  min-width: 0;
+}
+
+.map-navigation-card__title {
+}
+
+.map-navigation-card__distance {
+  margin-top: 4px;
+}
+
+.map-navigation-card__button {
+  padding: 9px 14px;
+}
+
+.map-navigation-card__button.is-disabled {
+  opacity: 0.55;
+}