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

@@ -0,0 +1,98 @@
+<template>
+  <view class="long-text-guide-card">
+    <view v-if="mode === 'list'" class="long-text-guide-card__list w-full">
+      <CardShell
+        v-for="item in cards"
+        :key="item.id || item.title"
+        class="long-text-guide-card__item"
+        pressable
+        :disabled="disabled"
+        @select="openDetail(item)"
+      >
+        <view class="long-text-guide-card__body px-20 pt-20 pb-12">
+          <view class="long-text-guide-card__meta flex flex-items-center gap-8">
+            <BadgePill :label="item.badge" tone="amber" />
+          </view>
+          <view class="long-text-guide-card__title color-1E293B font-size-14 font-900">{{ item.title }}</view>
+          <view class="long-text-guide-card__summary color-94A3B8 font-size-12">{{ item.summary }}</view>
+        </view>
+        <view class="long-text-guide-card__footer flex flex-items-center flex-justify-between px-20 pb-16 color-CBD5E1 font-size-11">
+          <text>{{ item.footer }}</text>
+          <text class="long-text-guide-card__arrow">›</text>
+        </view>
+      </CardShell>
+    </view>
+
+    <DetailShell
+      v-else
+      :title="activeItem.title"
+      :tag="activeItem.badge"
+      tone="amber"
+      @back="closeDetail"
+    >
+      <view class="long-text-guide-card__detail p-18">
+        <view
+          v-for="(section, index) in detailSections"
+          :key="section.title || index"
+          class="long-text-guide-card__section"
+        >
+          <view class="long-text-guide-card__section-title color-1E293B font-size-15 font-900">{{ section.title }}</view>
+          <view class="long-text-guide-card__section-text color-475569 font-size-13 font-600">{{ section.content }}</view>
+        </view>
+        <view v-if="activeItem.action" class="long-text-guide-card__action">
+          <ActionRow
+            :title="activeItem.action.title"
+            :subtitle="activeItem.action.subtitle"
+            :icon="activeItem.action.icon"
+            tone="amber"
+            :disabled="disabled"
+            :payload="activeItem"
+            @action="$emit('action', $event)"
+          />
+        </view>
+      </view>
+    </DetailShell>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import CardShell from "../SharedVisual/CardShell.vue";
+import BadgePill from "../SharedVisual/BadgePill.vue";
+import DetailShell from "../SharedVisual/DetailShell.vue";
+import ActionRow from "../SharedVisual/ActionRow.vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["select", "back", "action"]);
+
+const selected = ref(null);
+const cards = computed(() => props.data.cards || []);
+const activeItem = computed(() => selected.value || cards.value[0] || {});
+const mode = computed(() => (selected.value ? "detail" : "list"));
+const detailSections = computed(() => activeItem.value.sections || []);
+
+const openDetail = (item) => {
+  if (props.disabled) return;
+  selected.value = item;
+  emit("select", item);
+};
+
+const closeDetail = () => {
+  selected.value = null;
+  emit("back");
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>