feat: update AigcPhotoCard, FaqHelpCard, MapNavigationCard, NoticeCard, ScenicImageCard with new layouts, styles, and mock data; enhance user interaction and visual appeal

src/pages/ChatModule/ScenicImageCard/index.vue

@@ -1,22 +1,35 @@
 <template>
-  <CardShell class="scenic-image-card" variant="soft" pressable :disabled="disabled" @select="handleAction">
-    <view class="scenic-image-card__image-wrap relative">
-      <MediaFrame class="scenic-image-card__image h-260" :src="data.image" />
-      <view v-if="hasCaption" class="scenic-image-card__caption">
-        <view class="scenic-image-card__caption-title color-white font-size-14 font-900">{{ data.caption.title }}</view>
-        <view v-if="data.caption.subtitle" class="scenic-image-card__caption-subtitle font-size-11 font-700">
-          {{ data.caption.subtitle }}
-        </view>
-      </view>
-      <view class="scenic-image-card__expand absolute flex flex-items-center flex-justify-center w-32 h-32 rounded-full color-white font-size-16 font-900">⛶</view>
+  <view
+    class="scenic-image-card relative rounded-24 overflow-hidden w-full"
+    :class="{ 'is-disabled': disabled }"
+    @click="handleSelect"
+  >
+    <image
+      class="scenic-image-card__image block w-full"
+      :src="data.image"
+      mode="aspectFill"
+    />
+
+    <view
+      class="scenic-image-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900"
+      @click.stop="handleAction"
+    >
+      {{ action.icon }}
     </view>
-  </CardShell>
+
+    <view v-if="hasCaption" class="scenic-image-card__caption">
+      <view v-if="caption.title" class="scenic-image-card__title color-white font-size-18 font-900 ellipsis-1">
+        {{ caption.title }}
+      </view>
+      <view v-if="caption.subtitle" class="scenic-image-card__subtitle color-white font-size-14 font-900 ellipsis-1">
+        {{ caption.subtitle }}
+      </view>
+    </view>
+  </view>
 </template>
 
 <script setup>
 import { computed } from "vue";
-import CardShell from "../SharedVisual/CardShell.vue";
-import MediaFrame from "../SharedVisual/MediaFrame.vue";
 
 const props = defineProps({
   data: {
@@ -31,11 +44,17 @@ const props = defineProps({
 
 const emit = defineEmits(["select", "action"]);
 
-const hasCaption = computed(() => Boolean(props.data.caption?.title || props.data.caption?.subtitle));
+const caption = computed(() => props.data.caption || {});
+const action = computed(() => props.data.action || {});
+const hasCaption = computed(() => Boolean(caption.value.title || caption.value.subtitle));
+
+const handleSelect = () => {
+  if (props.disabled) return;
+  emit("select", props.data);
+};
 
 const handleAction = () => {
   if (props.disabled) return;
-  emit("select", props.data);
   emit("action", props.data);
 };
 </script>

src/pages/ChatModule/ScenicImageCard/mocks.js

@@ -1,7 +1,19 @@
-export default {
+export const scenicImageWithoutCaption = {
+  id: "bridge-mist-plain",
   image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1000&q=80",
-  caption: {
-    title: "水上森林二号机位",
-    subtitle: "下午逆光较弱，适合拍摄树影和水面反射",
+  action: {
+    icon: "↗",
+  },
+};
+
+export default {
+  id: "bridge-mist",
+  image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1000&q=80",
+  caption: {
+    title: "古桥晨雾机位",
+    subtitle: "清晨 6:30 雾气最浓，长焦压缩效果极佳",
+  },
+  action: {
+    icon: "↗",
   },
 };

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

@@ -1,8 +1,30 @@
-.scenic-image-card__image-wrap {
+.scenic-image-card {
+  height: 324px;
+  background: #e2e8f0;
+}
+
+.scenic-image-card:active,
+.scenic-image-card__expand:active {
+  opacity: 0.86;
+}
+
+.scenic-image-card.is-disabled {
+  opacity: 0.55;
 }
 
 .scenic-image-card__image {
-  border-radius: 0;
+  height: 100%;
+}
+
+.scenic-image-card__expand {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 2;
+  width: 40px;
+  height: 40px;
+  background: rgba(15, 23, 42, 0.36);
+  line-height: 40px;
 }
 
 .scenic-image-card__caption {
@@ -10,21 +32,17 @@
   left: 0;
   right: 0;
   bottom: 0;
-  padding: 42px 16px 16px;
+  padding: 72px 22px 20px;
   background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.72) 100%);
 }
 
-.scenic-image-card__caption-title {
-  line-height: 20px;
+.scenic-image-card__title {
+  line-height: 24px;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
 }
 
-.scenic-image-card__caption-subtitle {
-  margin-top: 3px;
-  color: rgba(255, 255, 255, 0.72);
-}
-
-.scenic-image-card__expand {
-  top: 12px;
-  right: 12px;
-  background: rgba(0, 0, 0, 0.32);
+.scenic-image-card__subtitle {
+  margin-top: 4px;
+  line-height: 18px;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
 }