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/SharedVisual/ActionRow.vue

@@ -0,0 +1,62 @@
+<template>
+  <view
+    class="visual-action-row flex flex-items-center gap-12 p-12 bg-white rounded-18 border-box"
+    :class="{ 'is-disabled': disabled }"
+    @click="handleClick"
+  >
+    <view class="visual-action-row__icon flex flex-items-center flex-justify-center w-42 h-42 rounded-14 font-size-18 font-900" :class="toneClass">
+      <slot name="icon">{{ icon }}</slot>
+    </view>
+    <view class="visual-action-row__body flex-full">
+      <view class="visual-action-row__title color-1E293B font-size-14 font-900 ellipsis-1">{{ title }}</view>
+      <view v-if="subtitle" class="visual-action-row__subtitle ellipsis-1">
+        {{ subtitle }}
+      </view>
+    </view>
+    <view class="visual-action-row__arrow color-CBD5E1 font-700">›</view>
+  </view>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  subtitle: {
+    type: String,
+    default: "",
+  },
+  icon: {
+    type: String,
+    default: "",
+  },
+  tone: {
+    type: String,
+    default: "green",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  payload: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["action"]);
+
+const toneClass = computed(() => `visual-action-row__icon--${props.tone}`);
+
+const handleClick = () => {
+  if (props.disabled) return;
+  emit("action", props.payload);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>