更新

2026-06-01 09:34:27 +08:00
parent 75dfaa0dcd
commit 7cfa4d269a
21 changed files with 7756 additions and 602 deletions
@@ -0,0 +1,116 @@
+<template>
+    <view class="food-tile-icon" :class="[`food-tile-icon--${size}`]">
+        <text class="food-tile-icon__emoji">{{ fallbackIcon }}</text>
+        <image
+            v-if="src && !imageFailed"
+            class="food-tile-icon__img"
+            :src="src"
+            :mode="size === 'tile' ? 'aspectFill' : 'aspectFit'"
+            @error="onImageError"
+        />
+    </view>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { getFoodImgUrl } from '../data/gameFoodImg.js'
+
+const props = defineProps({
+    food: { type: [Object, String], default: null },
+    size: { type: String, default: 'tile' }
+})
+
+const imageFailed = ref(false)
+
+const fallbackIcon = computed(() => {
+    if (typeof props.food === 'object' && props.food?.icon) return props.food.icon
+    return '🍽'
+})
+
+const src = computed(() => {
+    if (typeof props.food === 'object' && props.food?.img) return props.food.img
+    if (typeof props.food === 'object' && props.food?.icon) return getFoodImgUrl(props.food.icon)
+    return ''
+})
+
+watch(
+    () => src.value,
+    () => {
+        imageFailed.value = false
+    }
+)
+
+function onImageError() {
+    imageFailed.value = true
+}
+</script>
+
+<style lang="scss" scoped>
+.food-tile-icon {
+    position: relative;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.food-tile-icon--tile {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    font-size: calc(var(--tile-emoji-size, 48px) * 0.76);
+}
+
+.food-tile-icon--tile .food-tile-icon__emoji,
+.food-tile-icon--tile .food-tile-icon__img {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 70%;
+    height: 70%;
+    z-index: 2;
+}
+
+.food-tile-icon--goal {
+    width: 40rpx;
+    height: 40rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.food-tile-icon--tooltip {
+    width: 36rpx;
+    height: 36rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.food-tile-icon__emoji {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-size: inherit;
+    line-height: 1;
+    z-index: 1;
+}
+
+.food-tile-icon--goal .food-tile-icon__emoji,
+.food-tile-icon--tooltip .food-tile-icon__emoji {
+    position: static;
+    transform: none;
+    font-size: 34rpx;
+}
+
+.food-tile-icon__img {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    display: block;
+}
+</style>
@@ -66,7 +66,12 @@ const ICON_PATHS = {
    egg: '<path d="M12 22c4.97 0 8-3.27 8-7.31C20 9.65 16.42 2 12 2S4 9.65 4 14.69C4 18.73 7.03 22 12 22Z"/>',
    home: '<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>',
    'plus-circle': '<circle cx="12" cy="12" r="10"/><path d="M8 12h8M12 8v8"/>',
-    'chevron-right': '<path d="m9 18 6-6-6-6"/>'
+    'chevron-right': '<path d="m9 18 6-6-6-6"/>',
+    'chevron-left': '<path d="m15 18-6-6 6-6"/>',
+    check: '<path d="M20 6 9 17l-5-5"/>',
+    settings: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
+    syringe: '<path d="m18 2 4 4"/><path d="m17 7 3-3"/><path d="M19 9 8.7 19.3c-1 1-2.5 1-3.4 0l-.6-.6c-1-1-1-2.5 0-3.4L15 5"/><path d="m9 11 4 4"/><path d="m5 19-3 3"/><path d="m14 4 6 6"/>',
+    zap: '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>'
 }

 /** 图片加载失败时的 emoji 回退 */
@@ -106,7 +111,12 @@ const ICON_FALLBACK = {
    egg: '🍳',
    home: '🏠',
    'plus-circle': '⊕',
-    'chevron-right': '›'
+    'chevron-right': '›',
+    'chevron-left': '‹',
+    check: '✓',
+    settings: '⚙',
+    syringe: '💉',
+    zap: '⚡'
 }

 const strokeColor = computed(() => {