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

@@ -0,0 +1,53 @@
+<template>
+  <CardShell class="aigc-photo-card p-16" variant="soft">
+    <view class="aigc-photo-card__body flex flex-items-center gap-12">
+      <view class="aigc-photo-card__icon flex flex-items-center flex-justify-center w-44 h-44 rounded-16 bg-CCFBF1 font-size-22 font-900">{{ data.icon }}</view>
+      <view class="aigc-photo-card__content flex-full">
+        <view class="aigc-photo-card__title font-size-16 font-900">{{ data.title }}</view>
+        <view class="aigc-photo-card__subtitle color-0F766E font-size-11 font-700">{{ data.subtitle }}</view>
+      </view>
+    </view>
+    <view class="aigc-photo-card__preview grid grid-cols-3 gap-8 mt-14">
+      <MediaFrame
+        v-for="(image, index) in images"
+        :key="image || index"
+        class="aigc-photo-card__image h-82 rounded-14"
+        :src="image"
+      />
+    </view>
+    <view class="aigc-photo-card__button mt-14 p-12 rounded-16 color-white bg-0F766E font-size-13 font-900 text-center" :class="{ 'is-disabled': disabled }" @click="handleAction">
+      {{ data.buttonText }}
+    </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 images = computed(() => props.data.images || []);
+
+const handleAction = () => {
+  if (props.disabled) return;
+  emit("select", props.data);
+  emit("action", props.data);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>