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

@@ -0,0 +1,86 @@
+<template>
+  <view class="notice-card">
+    <CardShell v-if="!activeNotice" class="notice-card__list p-16" variant="soft">
+      <view class="notice-card__header flex flex-justify-between gap-12">
+        <view>
+          <view class="notice-card__title color-1E293B font-size-16 font-900">{{ data.title }}</view>
+          <view class="notice-card__subtitle color-94A3B8 font-size-11 font-700">{{ data.subtitle }}</view>
+        </view>
+        <BadgePill v-if="data.badge" :label="data.badge" tone="rose" />
+      </view>
+      <view
+        v-for="item in notices"
+        :key="item.id || item.title"
+        class="notice-card__item flex gap-12 border-bottom-F1F5F9"
+        :class="{ 'is-disabled': disabled }"
+        @click="openNotice(item)"
+      >
+        <view class="notice-card__item-body flex-full">
+          <view class="notice-card__item-title color-1E293B font-size-13 font-900 ellipsis-1">{{ item.title }}</view>
+          <view class="notice-card__item-desc color-94A3B8 font-size-11 font-700 ellipsis-2">{{ item.summary }}</view>
+        </view>
+        <view class="notice-card__item-date color-E11D48 font-size-10 font-900">{{ item.date }}</view>
+      </view>
+    </CardShell>
+
+    <DetailShell
+      v-else
+      :title="activeNotice.title"
+      :tag="activeNotice.type"
+      tone="rose"
+      @back="closeNotice"
+    >
+      <view class="notice-card__detail p-16">
+        <MediaFrame v-if="activeNotice.cover" class="notice-card__cover h-154" :src="activeNotice.cover" />
+        <view class="notice-card__meta color-94A3B8 font-size-11 font-800">{{ activeNotice.date }}</view>
+        <view
+          v-for="(paragraph, index) in paragraphs"
+          :key="index"
+          class="notice-card__paragraph color-475569 font-size-13 font-700"
+        >
+          {{ paragraph }}
+        </view>
+      </view>
+    </DetailShell>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import CardShell from "../SharedVisual/CardShell.vue";
+import DetailShell from "../SharedVisual/DetailShell.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", "back"]);
+
+const activeNotice = ref(null);
+const notices = computed(() => props.data.notices || []);
+const paragraphs = computed(() => activeNotice.value?.paragraphs || []);
+
+const openNotice = (item) => {
+  if (props.disabled) return;
+  activeNotice.value = item;
+  emit("select", item);
+};
+
+const closeNotice = () => {
+  activeNotice.value = null;
+  emit("back");
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>