df2f158018
- add AiTabSwitch component with its image assets and styles - add Welcome component for welcome text, weather display and notice messages - update ChatMainList to use new components and add background header layout - replace custom swiper in NoticeMessage with Vant VanSwipe component - add Vant Swipe type definitions to components.d.ts
156 lines
4.1 KiB
Vue
156 lines
4.1 KiB
Vue
<template>
|
|
<div class="flex w-full">
|
|
<div class="flex flex-col flex-full min-width-0 mr-12">
|
|
<div class="flex flex-row flex-items-center flex-justify-between min-width-0">
|
|
<span class="flex-full min-width-0 text-[20px] text-[600] color-white ellipsis-1">
|
|
{{ mainPageDataModel.welcomeContent }}
|
|
</span>
|
|
<span class="shrink-0 text-[20px] text-[600] color-white mt-4"> {{ weatherText }} </span>
|
|
</div>
|
|
|
|
<NoticeMessage :tipsMessage="props.mainPageDataModel.tipsMessage" />
|
|
</div>
|
|
|
|
<SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
|
|
:frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
|
|
:displayWidth="spriteStyle.displayWidth" :fps="16" />
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { onMounted, ref } from "vue";
|
|
import { defineProps, computed } from "vue";
|
|
import SpriteAnimator from "@/components/SpriteAnimator/index.vue";
|
|
import NoticeMessage from "../NoticeMessage/index.vue";
|
|
import { getLocalWeather } from "@/api/home";
|
|
|
|
const weatherText = ref('');
|
|
|
|
const props = defineProps({
|
|
mainPageDataModel: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
initPageImages: {
|
|
backgroundImageUrl: "",
|
|
logoImageUrl: "",
|
|
welcomeImageUrl: "",
|
|
}
|
|
};
|
|
},
|
|
},
|
|
});
|
|
|
|
const initPageImages = computed(() => {
|
|
return props.mainPageDataModel?.initPageImages || {};
|
|
});
|
|
|
|
const spriteStyle = computed(() => {
|
|
const images = initPageImages.value;
|
|
return {
|
|
backgroundImageUrl: images.backgroundImageUrl,
|
|
ipLargeImage: images.ipLargeImage,
|
|
frameWidth: images.ipLargeImageWidth,
|
|
frameHeight: images.ipLargeImageHeight,
|
|
totalFrames: images.ipLargeTotalFrames,
|
|
columns: images.ipLargeColumns,
|
|
displayWidth: 105,
|
|
};
|
|
});
|
|
|
|
const getLocalWeatherData = async () => {
|
|
const res = await getLocalWeather();
|
|
if (res && res.code === 0) {
|
|
const { temperature, weather } = res.data;
|
|
weatherText.value = `${temperature}°C ${getWeatherEmoji(weather)}`;
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
getLocalWeatherData();
|
|
});
|
|
|
|
const getWeatherEmoji = (text) => {
|
|
if (weatherTextMap[text]) return weatherTextMap[text];
|
|
if (text.includes("晴")) return "☀️";
|
|
if (text.includes("云")) return "☁️";
|
|
if (text.includes("雨")) return "🌧️";
|
|
if (text.includes("雷")) return "⛈️";
|
|
if (text.includes("雪")) return "🌨️";
|
|
if (text.includes("雾") || text.includes("霾")) return "😷";
|
|
if (text.includes("风")) return "🌬️";
|
|
if (text.includes("沙")) return "🌪️";
|
|
return "❓";
|
|
}
|
|
|
|
const weatherTextMap = {
|
|
// 晴 / 云
|
|
"晴": "☀️",
|
|
"少云": "🌤️",
|
|
"晴间多云": "⛅",
|
|
"多云": "☁️",
|
|
"阴": "☁️",
|
|
|
|
// 风
|
|
"有风": "🌬️",
|
|
"平静": "🍃",
|
|
"微风": "🌬️",
|
|
"和风": "🌬️",
|
|
"清风": "🌬️",
|
|
"强风/劲风": "💨",
|
|
"疾风": "💨",
|
|
"大风": "💨",
|
|
"烈风": "💨",
|
|
"风暴": "🌪️",
|
|
"狂爆风": "🌪️",
|
|
"飓风": "🌀",
|
|
"龙卷风": "🌪️",
|
|
|
|
// 雨
|
|
"阵雨": "🌦️",
|
|
"雷阵雨": "⛈️",
|
|
"雷阵雨并伴有冰雹": "⛈️",
|
|
"小雨": "🌧️",
|
|
"中雨": "🌧️",
|
|
"大雨": "🌧️",
|
|
"暴雨": "🌧️",
|
|
"大暴雨": "🌧️",
|
|
"特大暴雨": "🌧️",
|
|
"强阵雨": "🌦️",
|
|
"毛毛雨/细雨": "🌦️",
|
|
|
|
// 雪
|
|
"小雪": "🌨️",
|
|
"中雪": "🌨️",
|
|
"大雪": "❄️",
|
|
"暴雪": "❄️",
|
|
"雨夹雪": "🌨️",
|
|
"阵雪": "🌨️",
|
|
|
|
// 雾霾 / 沙尘
|
|
"雾": "🌁", // 有能见度的雾（城市感）
|
|
"轻雾": "🌫️", // 轻微雾气
|
|
"浓雾": "🌁", // 更厚的雾（用城市雾更直观）
|
|
"大雾": "🌁",
|
|
"强浓雾": "🌁",
|
|
"特强浓雾": "🌁",
|
|
|
|
// 😷 霾（偏污染）
|
|
"霾": "😷", // 直接表达空气差（用户感知最强）
|
|
"中度霾": "😷",
|
|
"重度霾": "🤢", // 更严重一点
|
|
"严重霾": "☠️", // 极端情况（视觉冲击强）
|
|
|
|
"扬沙": "🌪️",
|
|
"浮尘": "🌪️",
|
|
"沙尘暴": "🌪️",
|
|
"强沙尘暴": "🌪️",
|
|
|
|
// 特殊
|
|
"热": "🔥",
|
|
"冷": "🥶"
|
|
};
|
|
|
|
</script>
|
|
|
|
<style scoped></style>
|