更新
This commit is contained in:
Your Name
Generated
-69
@@ -4142,9 +4142,6 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4161,9 +4158,6 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4180,9 +4174,6 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4199,9 +4190,6 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4433,9 +4421,6 @@
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4456,9 +4441,6 @@
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4479,9 +4461,6 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4502,9 +4481,6 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4525,9 +4501,6 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4548,9 +4521,6 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4729,9 +4699,6 @@
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4745,9 +4712,6 @@
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4761,9 +4725,6 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4777,9 +4738,6 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4793,9 +4751,6 @@
|
||||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4809,9 +4764,6 @@
|
||||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4825,9 +4777,6 @@
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4841,9 +4790,6 @@
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4857,9 +4803,6 @@
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4873,9 +4816,6 @@
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4889,9 +4829,6 @@
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4905,9 +4842,6 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -4921,9 +4855,6 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
||||
@@ -186,10 +186,9 @@
|
||||
{
|
||||
"path": "pages/more",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "日常护理",
|
||||
"navigationBarBackgroundColor": "#204e2b",
|
||||
"navigationBarTextStyle": "white",
|
||||
"backgroundColor": "#faf9f5",
|
||||
"backgroundColor": "#f4fbf4",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
@@ -209,6 +208,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/game",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "糖分突袭",
|
||||
"backgroundColor": "#c7d2fe",
|
||||
"disableScroll": true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -0,0 +1,188 @@
|
||||
/**
|
||||
* 糖分突袭 · 视觉特效状态（飘字、粒子、连消横幅、震屏、闪屏）
|
||||
* 特效风格参考「开心消消乐」：糖果色星屑、弹性扩散光环、大消除闪屏。
|
||||
*/
|
||||
import { ref } from 'vue'
|
||||
|
||||
let fxSeq = 0
|
||||
function nextFxId(prefix) {
|
||||
fxSeq += 1
|
||||
return `${prefix}-${fxSeq}-${Date.now()}`
|
||||
}
|
||||
|
||||
// 开心消消乐式糖果色板（彩虹爆裂用）
|
||||
const CANDY_COLORS = ['#FF5E9C', '#FFC93C', '#5BD16A', '#4D9DFF', '#FF8A3D', '#B57BFF', '#FF6F91', '#2FE6C8']
|
||||
// 星屑字形
|
||||
const STAR_GLYPHS = ['✦', '✧', '★', '✨']
|
||||
|
||||
export function useGameFx() {
|
||||
const floatingTexts = ref([])
|
||||
const burstParticles = ref([])
|
||||
const ripples = ref([])
|
||||
const comboBanner = ref({ show: false, text: '', tier: 1 })
|
||||
const screenShaking = ref(false)
|
||||
const flash = ref({ active: false, color: '#ffffff', opacity: 0 })
|
||||
|
||||
let comboBannerTimer = null
|
||||
let shakeTimer = null
|
||||
let flashTimer = null
|
||||
let flashFadeTimer = null
|
||||
|
||||
function spawnFloatingText(payload) {
|
||||
const id = nextFxId('ft')
|
||||
floatingTexts.value.push({ id, ...payload })
|
||||
const duration = payload.danger ? 1500 : payload.isCombo ? 1400 : 1200
|
||||
setTimeout(() => {
|
||||
floatingTexts.value = floatingTexts.value.filter((f) => f.id !== id)
|
||||
}, duration)
|
||||
return id
|
||||
}
|
||||
|
||||
/**
|
||||
* 糖果爆裂粒子（星屑 + 圆点混合，上抛后受重力下落，带旋转与缓动）。
|
||||
* @param {number} cx,cy 爆裂中心（屏幕坐标）
|
||||
* @param {string} color 基础颜色
|
||||
* @param {number} count 粒子数量
|
||||
* @param {object} opts { star, rainbow, gravity, sizeMin, sizeMax, distMin, distMax, life }
|
||||
*/
|
||||
function spawnBurst(cx, cy, color, count = 8, opts = {}) {
|
||||
const {
|
||||
star = true,
|
||||
rainbow = false,
|
||||
gravity = 64,
|
||||
sizeMin = 8,
|
||||
sizeMax = 16,
|
||||
distMin = 36,
|
||||
distMax = 110,
|
||||
life = 850
|
||||
} = opts
|
||||
const dur = (life / 1000).toFixed(2)
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const id = nextFxId('p')
|
||||
const isStar = star && Math.random() < 0.65
|
||||
const pSize = Math.random() * (sizeMax - sizeMin) + sizeMin
|
||||
const angle = Math.random() * Math.PI * 2
|
||||
const distance = Math.random() * (distMax - distMin) + distMin
|
||||
const tx = Math.cos(angle) * distance
|
||||
// 先上抛、再叠加重力下落，形成喷泉抛物线
|
||||
const ty = Math.sin(angle) * distance - distance * 0.35 + gravity
|
||||
const half = pSize / 2
|
||||
const pColor = rainbow
|
||||
? CANDY_COLORS[Math.floor(Math.random() * CANDY_COLORS.length)]
|
||||
: color
|
||||
const rot = Math.random() * 720 - 360
|
||||
const glyph = isStar ? STAR_GLYPHS[Math.floor(Math.random() * STAR_GLYPHS.length)] : ''
|
||||
|
||||
const particle = {
|
||||
id,
|
||||
left: cx - half,
|
||||
top: cy - half,
|
||||
size: pSize,
|
||||
color: pColor,
|
||||
char: glyph,
|
||||
opacity: 1,
|
||||
transform: 'scale(0.4) rotate(0deg)',
|
||||
transition: 'none'
|
||||
}
|
||||
burstParticles.value.push(particle)
|
||||
|
||||
setTimeout(() => {
|
||||
particle.transition =
|
||||
`left ${dur}s cubic-bezier(0.16,0.7,0.3,1), top ${dur}s cubic-bezier(0.3,0.1,0.4,1), opacity ${dur}s ease-in, transform ${dur}s ease-out`
|
||||
particle.left = cx - half + tx
|
||||
particle.top = cy - half + ty
|
||||
particle.opacity = 0
|
||||
particle.transform = `scale(${isStar ? 1.15 : 0.5}) rotate(${rot}deg)`
|
||||
}, 16)
|
||||
|
||||
setTimeout(() => {
|
||||
burstParticles.value = burstParticles.value.filter((p) => p.id !== id)
|
||||
}, life + 80)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 弹性扩散发光光环（开心消消乐式的扩散光圈）。
|
||||
* @param {object} opts { thickness, life }
|
||||
*/
|
||||
function spawnRipple(cx, cy, color, tier = 1, opts = {}) {
|
||||
const id = nextFxId('rp')
|
||||
const size = 36 + tier * 18
|
||||
const { thickness = Math.max(3, tier + 2), life = 600 } = opts
|
||||
ripples.value.push({
|
||||
id,
|
||||
left: cx,
|
||||
top: cy,
|
||||
size,
|
||||
color,
|
||||
thickness,
|
||||
opacity: 0.95
|
||||
})
|
||||
setTimeout(() => {
|
||||
ripples.value = ripples.value.filter((r) => r.id !== id)
|
||||
}, life)
|
||||
}
|
||||
|
||||
/**
|
||||
* 全屏闪光（大消除瞬间的爆闪），先点亮再淡出。
|
||||
*/
|
||||
function triggerFlash(color = '#ffffff', intensity = 0.5, life = 280) {
|
||||
if (flashFadeTimer) clearTimeout(flashFadeTimer)
|
||||
if (flashTimer) clearTimeout(flashTimer)
|
||||
flash.value = { active: true, color, opacity: intensity }
|
||||
flashFadeTimer = setTimeout(() => {
|
||||
flash.value = { ...flash.value, opacity: 0 }
|
||||
}, 24)
|
||||
flashTimer = setTimeout(() => {
|
||||
flash.value = { active: false, color, opacity: 0 }
|
||||
}, life)
|
||||
}
|
||||
|
||||
function showComboBanner(chain, points) {
|
||||
if (chain <= 1) return
|
||||
const tier = chain >= 4 ? 3 : chain >= 3 ? 2 : 1
|
||||
comboBanner.value = {
|
||||
show: true,
|
||||
text: `连消 ×${chain} +${points}`,
|
||||
tier
|
||||
}
|
||||
if (comboBannerTimer) clearTimeout(comboBannerTimer)
|
||||
comboBannerTimer = setTimeout(() => {
|
||||
comboBanner.value = { ...comboBanner.value, show: false }
|
||||
}, 1100)
|
||||
}
|
||||
|
||||
function triggerShake(intensity = 1) {
|
||||
screenShaking.value = true
|
||||
if (shakeTimer) clearTimeout(shakeTimer)
|
||||
shakeTimer = setTimeout(() => {
|
||||
screenShaking.value = false
|
||||
}, intensity >= 2 ? 420 : 280)
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
floatingTexts.value = []
|
||||
burstParticles.value = []
|
||||
ripples.value = []
|
||||
comboBanner.value = { show: false, text: '', tier: 1 }
|
||||
screenShaking.value = false
|
||||
flash.value = { active: false, color: '#ffffff', opacity: 0 }
|
||||
}
|
||||
|
||||
return {
|
||||
floatingTexts,
|
||||
burstParticles,
|
||||
ripples,
|
||||
comboBanner,
|
||||
screenShaking,
|
||||
flash,
|
||||
spawnFloatingText,
|
||||
spawnBurst,
|
||||
spawnRipple,
|
||||
showComboBanner,
|
||||
triggerShake,
|
||||
triggerFlash,
|
||||
clearAll
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/**
|
||||
* 游戏进度持久化：关卡、星级、连胜、每日打卡
|
||||
*/
|
||||
import { ref } from 'vue'
|
||||
import { calcLevelStars } from '../data/gameLevels.js'
|
||||
|
||||
const STORAGE_KEY = 'tongji_game_progress_v1'
|
||||
|
||||
const DEFAULT = {
|
||||
currentLevel: 1,
|
||||
maxUnlocked: 1,
|
||||
stars: {},
|
||||
winStreak: 0,
|
||||
dailyStreak: 0,
|
||||
lastPlayDate: '',
|
||||
totalWins: 0,
|
||||
bestCombo: 0,
|
||||
totalStars: 0
|
||||
}
|
||||
|
||||
function todayStr() {
|
||||
const d = new Date()
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
function sumStars(starsMap) {
|
||||
return Object.values(starsMap || {}).reduce((s, n) => s + (Number(n) || 0), 0)
|
||||
}
|
||||
|
||||
function loadRaw() {
|
||||
try {
|
||||
const raw = uni.getStorageSync(STORAGE_KEY)
|
||||
if (raw && typeof raw === 'object') return { ...DEFAULT, ...raw }
|
||||
} catch (_) {}
|
||||
return { ...DEFAULT }
|
||||
}
|
||||
|
||||
function saveRaw(data) {
|
||||
try {
|
||||
uni.setStorageSync(STORAGE_KEY, data)
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
export function useGameProgress() {
|
||||
const progress = ref(loadRaw())
|
||||
|
||||
function persist() {
|
||||
progress.value.totalStars = sumStars(progress.value.stars)
|
||||
saveRaw(progress.value)
|
||||
}
|
||||
|
||||
/** 进入游戏时更新每日打卡 */
|
||||
function touchDailyPlay() {
|
||||
const today = todayStr()
|
||||
const last = progress.value.lastPlayDate
|
||||
if (last === today) return progress.value.dailyStreak
|
||||
|
||||
const yesterday = new Date()
|
||||
yesterday.setDate(yesterday.getDate() - 1)
|
||||
const yStr = `${yesterday.getFullYear()}-${String(yesterday.getMonth() + 1).padStart(2, '0')}-${String(yesterday.getDate()).padStart(2, '0')}`
|
||||
|
||||
if (last === yStr) {
|
||||
progress.value.dailyStreak = (progress.value.dailyStreak || 0) + 1
|
||||
} else {
|
||||
progress.value.dailyStreak = 1
|
||||
}
|
||||
progress.value.lastPlayDate = today
|
||||
persist()
|
||||
return progress.value.dailyStreak
|
||||
}
|
||||
|
||||
function getStars(levelId) {
|
||||
return progress.value.stars[String(levelId)] || 0
|
||||
}
|
||||
|
||||
function recordWin({ levelId, movesLeft, glucoseLevel, score, levelConfig, maxCombo }) {
|
||||
const stars = calcLevelStars({ movesLeft, glucoseLevel, score, levelConfig })
|
||||
const key = String(levelId)
|
||||
const prev = progress.value.stars[key] || 0
|
||||
if (stars > prev) progress.value.stars[key] = stars
|
||||
|
||||
progress.value.winStreak = (progress.value.winStreak || 0) + 1
|
||||
progress.value.totalWins = (progress.value.totalWins || 0) + 1
|
||||
if (maxCombo > (progress.value.bestCombo || 0)) progress.value.bestCombo = maxCombo
|
||||
|
||||
const next = levelId + 1
|
||||
if (next > progress.value.maxUnlocked) progress.value.maxUnlocked = next
|
||||
progress.value.currentLevel = next
|
||||
persist()
|
||||
return { stars, newBest: stars > prev }
|
||||
}
|
||||
|
||||
function recordLoss() {
|
||||
progress.value.winStreak = 0
|
||||
persist()
|
||||
}
|
||||
|
||||
function setCurrentLevel(levelId) {
|
||||
progress.value.currentLevel = Math.max(1, Math.min(progress.value.maxUnlocked, levelId))
|
||||
persist()
|
||||
}
|
||||
|
||||
return {
|
||||
progress,
|
||||
touchDailyPlay,
|
||||
getStars,
|
||||
recordWin,
|
||||
recordLoss,
|
||||
setCurrentLevel,
|
||||
persist
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,303 @@
|
||||
/**
|
||||
* 糖分突袭 · 游戏音效（InnerAudioContext 池化，H5/小程序通用）
|
||||
* 每种操作独立音轨 + playbackRate 变调，避免“全是同一个声”
|
||||
*/
|
||||
import { ref, onUnmounted } from 'vue'
|
||||
|
||||
const STORAGE_KEY = 'tongji_game_sfx_enabled'
|
||||
const COS = 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/file'
|
||||
|
||||
/** 9 条基础素材（已上传 COS，小程序域名白名单内） */
|
||||
const SRC = {
|
||||
tap: `${COS}/20260526/20260526105128557ef8669.mp3`,
|
||||
swoosh: `${COS}/20260527/202605271539371ebe13672.mp3`,
|
||||
pop: `${COS}/20260526/202605261051282a0a94508.mp3`,
|
||||
buzz: `${COS}/20260527/202605271539376ff628472.mp3`,
|
||||
chime: `${COS}/20260528/202605280937077bad76716.mp3`,
|
||||
fanfare: `${COS}/20260528/20260528093707b021f5794.mp3`,
|
||||
blast: `${COS}/20260528/20260528093707ebd4d5733.mp3`,
|
||||
sparkle: `${COS}/20260528/20260528093707016f07427.mp3`,
|
||||
stinger: `${COS}/20260528/20260528093709c669f4659.mp3`
|
||||
}
|
||||
|
||||
/**
|
||||
* 音效表：src / volume / rate(playbackRate) / pool
|
||||
* rate 不同可在同一素材上听出明显差异
|
||||
*/
|
||||
const SFX = {
|
||||
// —— 交互 ——
|
||||
select: { src: SRC.tap, volume: 0.32, rate: 1.05, pool: 3 },
|
||||
deselect: { src: SRC.tap, volume: 0.22, rate: 0.82, pool: 2 },
|
||||
hint: { src: SRC.tap, volume: 0.26, rate: 1.28, pool: 2 },
|
||||
|
||||
swap: { src: SRC.swoosh, volume: 0.38, rate: 1.0, pool: 3 },
|
||||
swapFail: { src: SRC.buzz, volume: 0.36, rate: 1.18, pool: 2 },
|
||||
|
||||
drop: { src: SRC.pop, volume: 0.3, rate: 0.88, pool: 4 },
|
||||
dropLight: { src: SRC.pop, volume: 0.22, rate: 1.22, pool: 2 },
|
||||
|
||||
// —— 消除（按连数）——
|
||||
match3: { src: SRC.chime, volume: 0.48, rate: 1.0, pool: 4 },
|
||||
match4: { src: SRC.fanfare, volume: 0.54, rate: 1.06, pool: 3 },
|
||||
match5: { src: SRC.blast, volume: 0.62, rate: 1.0, pool: 3 },
|
||||
|
||||
// —— 消除（按 GI 主色）——
|
||||
matchLowGi: { src: SRC.chime, volume: 0.42, rate: 0.86, pool: 2 },
|
||||
matchMidGi: { src: SRC.chime, volume: 0.46, rate: 1.02, pool: 2 },
|
||||
matchHighGi: { src: SRC.buzz, volume: 0.44, rate: 0.92, pool: 2 },
|
||||
|
||||
// —— 连消 ——
|
||||
combo2: { src: SRC.fanfare, volume: 0.56, rate: 1.12, pool: 2 },
|
||||
combo3: { src: SRC.blast, volume: 0.64, rate: 1.08, pool: 2 },
|
||||
comboMega: { src: SRC.blast, volume: 0.72, rate: 1.22, pool: 2 },
|
||||
|
||||
// —— 道具 ——
|
||||
insulin: { src: SRC.sparkle, volume: 0.5, rate: 1.15, pool: 2 },
|
||||
fiber: { src: SRC.swoosh, volume: 0.48, rate: 1.32, pool: 2 },
|
||||
meal: { src: SRC.stinger, volume: 0.42, rate: 1.35, pool: 1 },
|
||||
reshuffle: { src: SRC.swoosh, volume: 0.46, rate: 0.72, pool: 2 },
|
||||
|
||||
// —— 反馈 ——
|
||||
score: { src: SRC.tap, volume: 0.28, rate: 1.38, pool: 2 },
|
||||
goalTick: { src: SRC.chime, volume: 0.36, rate: 1.45, pool: 2 },
|
||||
meterWarn: { src: SRC.buzz, volume: 0.5, rate: 1.0, pool: 2 },
|
||||
meterDanger: { src: SRC.buzz, volume: 0.58, rate: 0.78, pool: 2 },
|
||||
meterStable: { src: SRC.pop, volume: 0.24, rate: 1.05, pool: 1 },
|
||||
|
||||
win: { src: SRC.fanfare, volume: 0.66, rate: 1.0, pool: 1 },
|
||||
winStinger: { src: SRC.stinger, volume: 0.38, rate: 1.5, pool: 1 },
|
||||
lose: { src: SRC.buzz, volume: 0.52, rate: 0.68, pool: 1 },
|
||||
|
||||
// 兼容旧名
|
||||
match: { src: SRC.chime, volume: 0.48, rate: 1.0, pool: 4 },
|
||||
combo: { src: SRC.fanfare, volume: 0.56, rate: 1.1, pool: 3 },
|
||||
heal: { src: SRC.pop, volume: 0.44, rate: 1.18, pool: 2 },
|
||||
boost: { src: SRC.sparkle, volume: 0.52, rate: 1.0, pool: 2 },
|
||||
invalid: { src: SRC.buzz, volume: 0.4, rate: 1.15, pool: 2 },
|
||||
danger: { src: SRC.blast, volume: 0.58, rate: 0.95, pool: 2 }
|
||||
}
|
||||
|
||||
class SfxPool {
|
||||
constructor(src, size, volume, rate = 1) {
|
||||
this.src = src
|
||||
this.size = size
|
||||
this.volume = volume
|
||||
this.rate = rate
|
||||
this.list = []
|
||||
this.cursor = 0
|
||||
this.warmedUp = false
|
||||
}
|
||||
|
||||
create() {
|
||||
for (let i = 0; i < this.size; i++) {
|
||||
const ctx = uni.createInnerAudioContext()
|
||||
ctx.src = this.src
|
||||
ctx.obeyMuteSwitch = false
|
||||
ctx.autoplay = false
|
||||
ctx.volume = this.volume
|
||||
try {
|
||||
ctx.playbackRate = this.rate
|
||||
} catch (_) {}
|
||||
this.list.push(ctx)
|
||||
}
|
||||
}
|
||||
|
||||
warmUp() {
|
||||
if (this.warmedUp) return
|
||||
if (!this.list.length) this.create()
|
||||
this.list.forEach((ctx) => {
|
||||
try {
|
||||
ctx.volume = 0
|
||||
ctx.play()
|
||||
setTimeout(() => {
|
||||
try {
|
||||
ctx.stop()
|
||||
ctx.volume = this.volume
|
||||
} catch (_) {}
|
||||
}, 60)
|
||||
} catch (_) {}
|
||||
})
|
||||
this.warmedUp = true
|
||||
}
|
||||
|
||||
play(scale = 1, rateMul = 1) {
|
||||
if (!this.list.length) this.create()
|
||||
const ctx = this.list[this.cursor % this.list.length]
|
||||
this.cursor += 1
|
||||
const vol = Math.min(1, this.volume * scale)
|
||||
const rate = Math.min(2, Math.max(0.5, this.rate * rateMul))
|
||||
try {
|
||||
ctx.volume = vol
|
||||
try {
|
||||
ctx.playbackRate = rate
|
||||
} catch (_) {}
|
||||
ctx.stop()
|
||||
ctx.seek(0)
|
||||
ctx.play()
|
||||
} catch (_) {
|
||||
try {
|
||||
ctx.play()
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.list.forEach((ctx) => {
|
||||
try {
|
||||
ctx.stop()
|
||||
ctx.destroy()
|
||||
} catch (_) {}
|
||||
})
|
||||
this.list = []
|
||||
this.warmedUp = false
|
||||
}
|
||||
}
|
||||
|
||||
function dominantGi(tiles = []) {
|
||||
const cnt = { low: 0, mid: 0, high: 0 }
|
||||
tiles.forEach((t) => {
|
||||
const g = t?.type?.gi
|
||||
if (g && cnt[g] !== undefined) cnt[g] += 1
|
||||
})
|
||||
let best = 'mid'
|
||||
let max = 0
|
||||
Object.entries(cnt).forEach(([k, v]) => {
|
||||
if (v > max) {
|
||||
max = v
|
||||
best = k
|
||||
}
|
||||
})
|
||||
return best
|
||||
}
|
||||
|
||||
export function useGameSfx() {
|
||||
const enabled = ref(true)
|
||||
const pools = {}
|
||||
|
||||
try {
|
||||
const stored = uni.getStorageSync(STORAGE_KEY)
|
||||
if (stored === false || stored === '0' || stored === 0) {
|
||||
enabled.value = false
|
||||
}
|
||||
} catch (_) {}
|
||||
|
||||
function ensureAudioOption() {
|
||||
// #ifdef MP-WEIXIN
|
||||
try {
|
||||
uni.setInnerAudioOption({
|
||||
obeyMuteSwitch: false,
|
||||
mixWithOther: true
|
||||
})
|
||||
} catch (_) {}
|
||||
// #endif
|
||||
}
|
||||
|
||||
function getPool(name) {
|
||||
const cfg = SFX[name]
|
||||
if (!cfg) return null
|
||||
if (!pools[name]) {
|
||||
pools[name] = new SfxPool(cfg.src, cfg.pool, cfg.volume, cfg.rate ?? 1)
|
||||
}
|
||||
return pools[name]
|
||||
}
|
||||
|
||||
function warmUp() {
|
||||
if (!enabled.value) return
|
||||
ensureAudioOption()
|
||||
Object.keys(SFX).forEach((name) => {
|
||||
getPool(name)?.warmUp()
|
||||
})
|
||||
}
|
||||
|
||||
function play(name, scale = 1, rateMul = 1) {
|
||||
if (!enabled.value) return
|
||||
getPool(name)?.play(scale, rateMul)
|
||||
}
|
||||
|
||||
function playLayer(primary, secondary, delayMs = 70, secScale = 0.6) {
|
||||
play(primary)
|
||||
if (secondary) {
|
||||
setTimeout(() => play(secondary, secScale), delayMs)
|
||||
}
|
||||
}
|
||||
|
||||
function playMatch({ matchCount = 3, chain = 0, tiles = [] } = {}) {
|
||||
if (!enabled.value) return
|
||||
const giTrack = (() => {
|
||||
const gi = dominantGi(tiles)
|
||||
if (gi === 'low') return 'matchLowGi'
|
||||
if (gi === 'high') return 'matchHighGi'
|
||||
return 'matchMidGi'
|
||||
})()
|
||||
|
||||
if (chain >= 3) {
|
||||
playLayer('comboMega', giTrack, 90, 0.55)
|
||||
return
|
||||
}
|
||||
if (chain === 2) {
|
||||
playLayer('combo3', giTrack, 80, 0.5)
|
||||
return
|
||||
}
|
||||
if (chain === 1) {
|
||||
playLayer('combo2', giTrack, 70, 0.45)
|
||||
return
|
||||
}
|
||||
|
||||
if (matchCount >= 5) {
|
||||
playLayer('match5', 'matchHighGi', 85, 0.5)
|
||||
} else if (matchCount >= 4) {
|
||||
playLayer('match4', giTrack, 65, 0.48)
|
||||
} else {
|
||||
play(giTrack, 1, 1)
|
||||
setTimeout(() => play('match3', 0.85), 40)
|
||||
}
|
||||
}
|
||||
|
||||
function playDrop(count = 1) {
|
||||
if (!enabled.value || count <= 0) return
|
||||
const name = count >= 4 ? 'drop' : 'dropLight'
|
||||
play(name, Math.min(1.2, 0.85 + count * 0.04), count >= 6 ? 0.9 : 1)
|
||||
}
|
||||
|
||||
function playMeter(delta, level) {
|
||||
if (!enabled.value) return
|
||||
if (level > 70) play('meterDanger', 1 + (level - 70) * 0.02)
|
||||
else if (level < 30) play('meterWarn', 0.9, 0.95)
|
||||
else if (delta > 8) play('meterWarn', 0.75)
|
||||
else if (delta < -5) play('meterStable', 1.1)
|
||||
}
|
||||
|
||||
function toggleEnabled() {
|
||||
enabled.value = !enabled.value
|
||||
try {
|
||||
uni.setStorageSync(STORAGE_KEY, enabled.value ? '1' : '0')
|
||||
} catch (_) {}
|
||||
if (enabled.value) {
|
||||
warmUp()
|
||||
play('select')
|
||||
}
|
||||
}
|
||||
|
||||
function destroyAll() {
|
||||
Object.keys(pools).forEach((key) => {
|
||||
pools[key]?.destroy()
|
||||
delete pools[key]
|
||||
})
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
destroyAll()
|
||||
})
|
||||
|
||||
return {
|
||||
enabled,
|
||||
play,
|
||||
playLayer,
|
||||
playMatch,
|
||||
playDrop,
|
||||
playMeter,
|
||||
warmUp,
|
||||
toggleEnabled,
|
||||
destroyAll
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,654 @@
|
||||
/**
|
||||
* 棋盘食材 · 仿真插画 SVG（渐变 + 高光 + 阴影，开心消消乐式 2.5D）
|
||||
*/
|
||||
import { svgToDataUrl } from '../utils/svgDataUrl.js'
|
||||
|
||||
function gid(key, suffix) {
|
||||
return `f-${String(key).replace(/[^a-z0-9]/gi, '')}-${suffix}`
|
||||
}
|
||||
|
||||
function wrap(key, body) {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">${body}</svg>`
|
||||
}
|
||||
|
||||
function shadow(key) {
|
||||
const id = gid(key, 'sh')
|
||||
return `<filter id="${id}"><feDropShadow dx="0" dy="2.5" stdDeviation="2.2" flood-color="#1a1a2e" flood-opacity="0.28"/></filter>`
|
||||
}
|
||||
|
||||
function shine(x, y, rx, ry) {
|
||||
return `<ellipse cx="${x}" cy="${y}" rx="${rx}" ry="${ry}" fill="#fff" opacity="0.38"/>`
|
||||
}
|
||||
|
||||
/** 圆形水果 */
|
||||
function artRound(key, base, dark, light, extra = '') {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs>
|
||||
<radialGradient id="${g}" cx="36%" cy="30%" r="68%">
|
||||
<stop offset="0%" stop-color="${light}"/>
|
||||
<stop offset="55%" stop-color="${base}"/>
|
||||
<stop offset="100%" stop-color="${dark}"/>
|
||||
</radialGradient>
|
||||
${shadow(key)}
|
||||
</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<ellipse cx="32" cy="36" rx="21" ry="23" fill="url(#${g})"/>
|
||||
${shine(24, 28, 7, 5)}
|
||||
<path d="M32 13 Q35 9 37 15" stroke="#5d4037" stroke-width="2" fill="none" stroke-linecap="round"/>
|
||||
<ellipse cx="38" cy="15" rx="5.5" ry="3" fill="#66bb6a" transform="rotate(28 38 15)"/>
|
||||
${extra}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 叶菜 */
|
||||
function artLeafy(key, light, mid, dark) {
|
||||
const g1 = gid(key, 'g1')
|
||||
const g2 = gid(key, 'g2')
|
||||
return wrap(key, `
|
||||
<defs>
|
||||
<linearGradient id="${g1}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="${light}"/><stop offset="100%" stop-color="${mid}"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="${g2}" x1="0%" y1="100%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="${mid}"/><stop offset="100%" stop-color="${dark}"/>
|
||||
</linearGradient>
|
||||
${shadow(key)}
|
||||
</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<path d="M32 8 C18 18 14 34 20 48 C24 54 32 56 32 56 C32 56 40 54 44 48 C50 34 46 18 32 8Z" fill="url(#${g1})"/>
|
||||
<path d="M32 14 C26 22 24 32 28 42 C30 46 32 48 32 48 C32 48 34 46 36 42 C40 32 38 22 32 14Z" fill="url(#${g2})" opacity="0.85"/>
|
||||
${shine(26, 24, 6, 8)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 西兰花 */
|
||||
function artBroccoli(key) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs>
|
||||
<radialGradient id="${g}" cx="50%" cy="40%" r="55%">
|
||||
<stop offset="0%" stop-color="#7cb342"/><stop offset="100%" stop-color="#33691e"/>
|
||||
</radialGradient>
|
||||
${shadow(key)}
|
||||
</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<rect x="28" y="38" width="8" height="16" rx="3" fill="#558b2f"/>
|
||||
<circle cx="22" cy="28" r="9" fill="url(#${g})"/><circle cx="32" cy="22" r="10" fill="url(#${g})"/>
|
||||
<circle cx="42" cy="28" r="9" fill="url(#${g})"/><circle cx="32" cy="32" r="8" fill="#689f38"/>
|
||||
${shine(28, 20, 5, 4)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 长条（黄瓜/香蕉/玉米） */
|
||||
function artLong(key, base, dark, light, type = 'cucumber') {
|
||||
const g = gid(key, 'g')
|
||||
if (type === 'banana') {
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="${light}"/><stop offset="100%" stop-color="${dark}"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<path d="M18 46 Q14 30 28 14 Q38 8 46 16 Q52 24 44 38 Q36 52 22 50 Q16 48 18 46Z" fill="url(#${g})"/>
|
||||
<path d="M24 42 Q20 32 30 20" stroke="${dark}" stroke-width="1.2" fill="none" opacity="0.5"/>
|
||||
${shine(30, 26, 5, 3)}
|
||||
</g>`)
|
||||
}
|
||||
if (type === 'corn') {
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="${light}"/><stop offset="100%" stop-color="${base}"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<ellipse cx="32" cy="34" rx="14" ry="22" fill="url(#${g})"/>
|
||||
<g fill="${dark}" opacity="0.55">${Array.from({ length: 5 }, (_, r) =>
|
||||
Array.from({ length: 4 }, (_, c) =>
|
||||
`<circle cx="${22 + c * 5}" cy="${20 + r * 5}" r="1.2"/>`
|
||||
).join('')
|
||||
).join('')}</g>
|
||||
<path d="M32 10 L34 18 M32 10 L30 18" stroke="#558b2f" stroke-width="2" stroke-linecap="round"/>
|
||||
${shine(26, 26, 5, 8)}
|
||||
</g>`)
|
||||
}
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="${light}"/><stop offset="100%" stop-color="${dark}"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<ellipse cx="32" cy="32" rx="10" ry="24" fill="url(#${g})" transform="rotate(-12 32 32)"/>
|
||||
<ellipse cx="28" cy="22" rx="3" ry="5" fill="#fff" opacity="0.25" transform="rotate(-12 28 22)"/>
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 茄子 */
|
||||
function artEggplant(key) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="20%" y1="0%" x2="80%" y2="100%">
|
||||
<stop offset="0%" stop-color="#9575cd"/><stop offset="100%" stop-color="#4527a0"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<ellipse cx="32" cy="38" rx="13" ry="20" fill="url(#${g})"/>
|
||||
<path d="M32 18 Q34 12 32 8 Q30 12 32 18" fill="#558b2f"/>
|
||||
${shine(26, 32, 5, 7)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 番茄 */
|
||||
function artTomato(key) {
|
||||
return artRound(key, '#e53935', '#b71c1c', '#ef5350',
|
||||
'<path d="M24 16 Q32 12 40 16" stroke="#2e7d32" stroke-width="2.5" fill="none" stroke-linecap="round"/>')
|
||||
}
|
||||
|
||||
/** 甜椒 */
|
||||
function artPepper(key, color, dark) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="30%" y1="0%" x2="70%" y2="100%">
|
||||
<stop offset="0%" stop-color="${color}"/><stop offset="100%" stop-color="${dark}"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<path d="M32 10 Q26 14 24 24 Q22 38 28 48 Q32 54 36 48 Q42 38 40 24 Q38 14 32 10Z" fill="url(#${g})"/>
|
||||
<path d="M30 12 Q32 8 34 12" stroke="#33691e" stroke-width="2" fill="none"/>
|
||||
${shine(28, 26, 5, 6)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 洋葱 */
|
||||
function artOnion(key) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><radialGradient id="${g}" cx="45%" cy="35%" r="60%">
|
||||
<stop offset="0%" stop-color="#ffe0b2"/><stop offset="100%" stop-color="#bc8f5a"/>
|
||||
</radialGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<ellipse cx="32" cy="36" rx="18" ry="20" fill="url(#${g})"/>
|
||||
<path d="M32 16 Q28 22 32 28 Q36 22 32 16" fill="#d7ccc8"/>
|
||||
${shine(24, 30, 6, 5)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 葡萄串 */
|
||||
function artGrapes(key) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><radialGradient id="${g}" cx="40%" cy="30%" r="65%">
|
||||
<stop offset="0%" stop-color="#ba68c8"/><stop offset="100%" stop-color="#6a1b9a"/>
|
||||
</radialGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<path d="M32 10 L32 18" stroke="#558b2f" stroke-width="2"/>
|
||||
<ellipse cx="32" cy="22" rx="4" ry="4.5" fill="url(#${g})"/>
|
||||
<ellipse cx="26" cy="28" rx="4" ry="4.5" fill="url(#${g})"/><ellipse cx="38" cy="28" rx="4" ry="4.5" fill="url(#${g})"/>
|
||||
<ellipse cx="22" cy="34" rx="4" ry="4.5" fill="url(#${g})"/><ellipse cx="32" cy="34" rx="4" ry="4.5" fill="url(#${g})"/><ellipse cx="42" cy="34" rx="4" ry="4.5" fill="url(#${g})"/>
|
||||
<ellipse cx="28" cy="40" rx="4" ry="4.5" fill="url(#${g})"/><ellipse cx="36" cy="40" rx="4" ry="4.5" fill="url(#${g})"/>
|
||||
${shine(28, 24, 3, 2)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 樱桃 */
|
||||
function artCherry(key) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><radialGradient id="${g}" cx="35%" cy="30%" r="70%">
|
||||
<stop offset="0%" stop-color="#f06292"/><stop offset="100%" stop-color="#880e4f"/>
|
||||
</radialGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<path d="M32 12 Q24 18 22 26 M32 12 Q40 18 42 26" stroke="#558b2f" stroke-width="2" fill="none"/>
|
||||
<circle cx="22" cy="32" r="9" fill="url(#${g})"/><circle cx="42" cy="32" r="9" fill="url(#${g})"/>
|
||||
${shine(19, 29, 3, 2)}${shine(39, 29, 3, 2)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 草莓 */
|
||||
function artStrawberry(key) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="50%" y1="0%" x2="50%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ef5350"/><stop offset="100%" stop-color="#c62828"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<path d="M32 14 Q18 28 22 46 Q26 54 32 56 Q38 54 42 46 Q46 28 32 14Z" fill="url(#${g})"/>
|
||||
<path d="M22 16 Q32 10 42 16 Q32 20 22 16Z" fill="#43a047"/>
|
||||
${shine(26, 28, 4, 6)}
|
||||
<g fill="#ffeb3b" opacity="0.85">${[28, 34, 38, 30, 36].map((x, i) =>
|
||||
`<circle cx="${x}" cy="${32 + (i % 3) * 5}" r="1.1"/>`
|
||||
).join('')}</g>
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 豆类 */
|
||||
function artBeans(key) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#d7ccc8"/><stop offset="100%" stop-color="#8d6e63"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<ellipse cx="24" cy="32" rx="9" ry="12" fill="url(#${g})" transform="rotate(-20 24 32)"/>
|
||||
<ellipse cx="36" cy="30" rx="9" ry="12" fill="url(#${g})" transform="rotate(15 36 30)"/>
|
||||
<ellipse cx="32" cy="42" rx="9" ry="12" fill="url(#${g})" transform="rotate(-5 32 42)"/>
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 饮品杯 */
|
||||
function artCup(key, liquid, cup = '#eceff1', type = 'glass') {
|
||||
const g = gid(key, 'g')
|
||||
if (type === 'bottle') {
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="${liquid}"/><stop offset="100%" stop-color="${cup}"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<rect x="24" y="14" width="16" height="6" rx="2" fill="#b0bec5"/>
|
||||
<path d="M22 20 L24 52 Q32 56 40 52 L42 20Z" fill="url(#${g})"/>
|
||||
${shine(28, 30, 4, 10)}
|
||||
</g>`)
|
||||
}
|
||||
if (type === 'wine') {
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="100%" x2="0%" y2="0%">
|
||||
<stop offset="0%" stop-color="#4a0e16"/><stop offset="100%" stop-color="${liquid}"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<path d="M28 18 L26 38 Q32 46 38 38 L36 18Z" fill="url(#${g})"/>
|
||||
<rect x="30" y="38" width="4" height="12" fill="#cfd8dc"/>
|
||||
<ellipse cx="32" cy="52" rx="8" ry="2" fill="#cfd8dc"/>
|
||||
</g>`)
|
||||
}
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="${liquid}"/><stop offset="100%" stop-color="${cup}"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<path d="M18 24 L20 48 Q32 54 44 48 L46 24Z" fill="#eceff1" stroke="#b0bec5" stroke-width="1"/>
|
||||
<path d="M20 28 L22 46 Q32 50 42 46 L44 28Z" fill="url(#${g})"/>
|
||||
${shine(26, 32, 4, 8)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 蘑菇 */
|
||||
function artMushroom(key) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><radialGradient id="${g}" cx="40%" cy="35%" r="65%">
|
||||
<stop offset="0%" stop-color="#a1887f"/><stop offset="100%" stop-color="#5d4037"/>
|
||||
</radialGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<rect x="28" y="34" width="8" height="16" rx="3" fill="#efebe9"/>
|
||||
<ellipse cx="32" cy="30" rx="18" ry="14" fill="url(#${g})"/>
|
||||
<ellipse cx="24" cy="26" rx="3" ry="2" fill="#efebe9" opacity="0.7"/>
|
||||
<ellipse cx="36" cy="24" rx="2.5" ry="1.8" fill="#efebe9" opacity="0.7"/>
|
||||
${shine(24, 24, 6, 4)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 芹菜 */
|
||||
function artCelery(key) {
|
||||
return artLeafy(key, '#aed581', '#7cb342', '#558b2f')
|
||||
}
|
||||
|
||||
/** 四季豆 */
|
||||
function artGreenBean(key) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#9ccc65"/><stop offset="100%" stop-color="#33691e"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<ellipse cx="26" cy="32" rx="5" ry="18" fill="url(#${g})" transform="rotate(-15 26 32)"/>
|
||||
<ellipse cx="38" cy="34" rx="5" ry="18" fill="url(#${g})" transform="rotate(12 38 34)"/>
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 饭碗 */
|
||||
function artRiceBowl(key, rice, bowl = '#e0e0e0', dark = '#bdbdbd') {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="${rice}"/><stop offset="100%" stop-color="${dark}"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<path d="M12 36 Q32 58 52 36 L48 48 Q32 56 16 48Z" fill="${bowl}"/>
|
||||
<ellipse cx="32" cy="36" rx="20" ry="8" fill="url(#${g})"/>
|
||||
${shine(24, 34, 6, 3)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 薯类 */
|
||||
function artRoot(key, base, dark, light) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><radialGradient id="${g}" cx="40%" cy="35%" r="65%">
|
||||
<stop offset="0%" stop-color="${light}"/><stop offset="100%" stop-color="${dark}"/>
|
||||
</radialGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<ellipse cx="32" cy="36" rx="16" ry="20" fill="url(#${g})"/>
|
||||
<path d="M22 28 Q32 22 42 28" stroke="${base}" stroke-width="1.5" fill="none" opacity="0.4"/>
|
||||
${shine(24, 30, 5, 6)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 肉类 */
|
||||
function artMeat(key, base, dark, type = 'steak') {
|
||||
const g = gid(key, 'g')
|
||||
if (type === 'chicken') {
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="${base}"/><stop offset="100%" stop-color="${dark}"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<ellipse cx="30" cy="38" rx="14" ry="16" fill="url(#${g})"/>
|
||||
<ellipse cx="38" cy="28" rx="8" ry="10" fill="url(#${g})"/>
|
||||
<circle cx="42" cy="24" r="3" fill="#efebe9"/>
|
||||
${shine(26, 32, 5, 6)}
|
||||
</g>`)
|
||||
}
|
||||
if (type === 'fish') {
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="${base}"/><stop offset="100%" stop-color="${dark}"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<ellipse cx="32" cy="34" rx="20" ry="12" fill="url(#${g})"/>
|
||||
<path d="M52 34 L60 28 L60 40Z" fill="${dark}"/>
|
||||
<circle cx="22" cy="32" r="2.5" fill="#fff"/>
|
||||
${shine(28, 30, 6, 4)}
|
||||
</g>`)
|
||||
}
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="${base}"/><stop offset="100%" stop-color="${dark}"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<path d="M16 40 Q20 22 36 20 Q50 20 48 38 Q46 50 32 52 Q18 52 16 40Z" fill="url(#${g})"/>
|
||||
<ellipse cx="28" cy="32" rx="4" ry="3" fill="#efebe9" opacity="0.5"/>
|
||||
${shine(26, 28, 6, 4)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 虾/蟹 */
|
||||
function artSeafood(key, type = 'shrimp') {
|
||||
const g = gid(key, 'g')
|
||||
if (type === 'crab') {
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ff7043"/><stop offset="100%" stop-color="#bf360c"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<ellipse cx="32" cy="36" rx="14" ry="12" fill="url(#${g})"/>
|
||||
<circle cx="28" cy="32" r="2" fill="#fff"/><circle cx="36" cy="32" r="2" fill="#fff"/>
|
||||
<path d="M18 30 L10 24 M18 38 L10 44 M46 30 L54 24 M46 38 L54 44" stroke="#bf360c" stroke-width="2.5" stroke-linecap="round"/>
|
||||
</g>`)
|
||||
}
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ff8a65"/><stop offset="100%" stop-color="#e64a19"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<path d="M16 40 Q28 16 48 28 Q42 36 38 44 Q28 52 16 40Z" fill="url(#${g})"/>
|
||||
${shine(30, 28, 5, 4)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 菠萝 */
|
||||
function artPineapple(key) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffca28"/><stop offset="100%" stop-color="#f57f17"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<ellipse cx="32" cy="38" rx="16" ry="18" fill="url(#${g})"/>
|
||||
<g stroke="#e65100" stroke-width="1" opacity="0.45">${[-8, 0, 8].map(o =>
|
||||
`<line x1="${24 + o}" y1="24" x2="${24 + o}" y2="52"/>`
|
||||
).join('')}</g>
|
||||
<path d="M24 18 L32 8 L40 18" fill="#43a047"/>
|
||||
${shine(26, 32, 5, 6)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 奇异果 */
|
||||
function artKiwi(key) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><radialGradient id="${g}" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#dce775"/><stop offset="60%" stop-color="#9ccc65"/><stop offset="100%" stop-color="#558b2f"/>
|
||||
</radialGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<circle cx="32" cy="34" r="18" fill="#8d6e63"/>
|
||||
<circle cx="32" cy="34" r="14" fill="url(#${g})"/>
|
||||
<circle cx="32" cy="34" r="4" fill="#fff" opacity="0.5"/>
|
||||
${shine(26, 28, 4, 3)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 蜜瓜 */
|
||||
function artMelon(key) {
|
||||
return artRound(key, '#aed581', '#689f38', '#c5e1a5', '')
|
||||
}
|
||||
|
||||
/** 蜂蜜 */
|
||||
function artHoney(key) {
|
||||
return artCup(key, '#ffb300', '#ff8f00', 'bottle')
|
||||
}
|
||||
|
||||
/** 面包类 */
|
||||
function artBread(key, base, dark, type = 'loaf') {
|
||||
const g = gid(key, 'g')
|
||||
if (type === 'donut') {
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="${base}"/><stop offset="100%" stop-color="${dark}"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<circle cx="32" cy="34" r="18" fill="url(#${g})"/>
|
||||
<circle cx="32" cy="34" r="7" fill="#fff5f5"/>
|
||||
<path d="M20 28 Q32 18 44 28" stroke="#f48fb1" stroke-width="4" fill="none" stroke-linecap="round"/>
|
||||
${shine(24, 28, 5, 4)}
|
||||
</g>`)
|
||||
}
|
||||
if (type === 'mantou') {
|
||||
return wrap(key, `
|
||||
<defs><radialGradient id="${g}" cx="40%" cy="30%" r="70%">
|
||||
<stop offset="0%" stop-color="${base}"/><stop offset="100%" stop-color="${dark}"/>
|
||||
</radialGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<ellipse cx="32" cy="38" rx="16" ry="14" fill="url(#${g})"/>
|
||||
<path d="M18 34 Q32 26 46 34" stroke="${dark}" stroke-width="1" fill="none" opacity="0.3"/>
|
||||
${shine(24, 32, 6, 4)}
|
||||
</g>`)
|
||||
}
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="${base}"/><stop offset="100%" stop-color="${dark}"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<rect x="14" y="22" width="36" height="28" rx="8" fill="url(#${g})"/>
|
||||
${shine(22, 28, 8, 5)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 面条 */
|
||||
function artNoodle(key, soup = '#d7ccc8') {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="${soup}"/><stop offset="100%" stop-color="#a1887f"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<ellipse cx="32" cy="42" rx="20" ry="10" fill="#eceff1"/>
|
||||
<ellipse cx="32" cy="38" rx="18" ry="8" fill="url(#${g})"/>
|
||||
<path d="M20 36 Q26 32 32 36 Q38 40 44 36" stroke="#ffe082" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||
<path d="M22 40 Q30 44 38 40" stroke="#ffe082" stroke-width="2" fill="none" stroke-linecap="round"/>
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 南瓜 */
|
||||
function artPumpkin(key) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><radialGradient id="${g}" cx="40%" cy="35%" r="65%">
|
||||
<stop offset="0%" stop-color="#ffb74d"/><stop offset="100%" stop-color="#e65100"/>
|
||||
</radialGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<ellipse cx="24" cy="36" rx="10" ry="16" fill="url(#${g})"/>
|
||||
<ellipse cx="32" cy="34" rx="11" ry="18" fill="url(#${g})"/>
|
||||
<ellipse cx="40" cy="36" rx="10" ry="16" fill="url(#${g})"/>
|
||||
<path d="M32 16 Q34 10 32 8" stroke="#558b2f" stroke-width="2.5" fill="none"/>
|
||||
${shine(26, 28, 5, 6)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 薯条 */
|
||||
function artFries(key) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffe082"/><stop offset="100%" stop-color="#f9a825"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<path d="M18 48 L22 24 L46 24 L50 48Z" fill="#ef5350"/>
|
||||
${[26, 32, 38, 44].map(x => `<rect x="${x}" y="18" width="4" height="22" rx="2" fill="url(#${g})"/>`).join('')}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 西瓜 */
|
||||
function artWatermelon(key) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ef5350"/><stop offset="100%" stop-color="#c62828"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<path d="M12 40 Q32 8 52 40 Q32 56 12 40Z" fill="#2e7d32"/>
|
||||
<path d="M16 40 Q32 14 48 40 Q32 52 16 40Z" fill="url(#${g})"/>
|
||||
${[24, 32, 40].map(x => `<circle cx="${x}" cy="36" r="1.2" fill="#212121"/>`).join('')}
|
||||
${shine(24, 30, 4, 3)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 糖果 */
|
||||
function artCandy(key, base, dark, type = 'lollipop') {
|
||||
const g = gid(key, 'g')
|
||||
if (type === 'wrap') {
|
||||
return wrap(key, `
|
||||
<defs><linearGradient id="${g}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="${base}"/><stop offset="100%" stop-color="${dark}"/>
|
||||
</linearGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<rect x="20" y="22" width="24" height="20" rx="4" fill="url(#${g})"/>
|
||||
<path d="M20 26 L16 30 L20 34 M44 26 L48 30 L44 34" stroke="${dark}" stroke-width="2" fill="none"/>
|
||||
</g>`)
|
||||
}
|
||||
return wrap(key, `
|
||||
<defs><radialGradient id="${g}" cx="35%" cy="30%" r="70%">
|
||||
<stop offset="0%" stop-color="${base}"/><stop offset="100%" stop-color="${dark}"/>
|
||||
</radialGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<circle cx="32" cy="28" r="14" fill="url(#${g})"/>
|
||||
<rect x="30" y="40" width="4" height="14" rx="2" fill="#eceff1"/>
|
||||
${shine(26, 24, 4, 3)}
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 糯米团 */
|
||||
function artDango(key) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><radialGradient id="${g}" cx="40%" cy="30%" r="70%">
|
||||
<stop offset="0%" stop-color="#f8bbd0"/><stop offset="100%" stop-color="#ec407a"/>
|
||||
</radialGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<circle cx="22" cy="36" r="8" fill="#fff"/>
|
||||
<circle cx="32" cy="32" r="8" fill="url(#${g})"/>
|
||||
<circle cx="42" cy="36" r="8" fill="#fff"/>
|
||||
<rect x="14" y="44" width="36" height="3" rx="1.5" fill="#8d6e63"/>
|
||||
</g>`)
|
||||
}
|
||||
|
||||
/** 爆米花 */
|
||||
function artPopcorn(key) {
|
||||
const g = gid(key, 'g')
|
||||
return wrap(key, `
|
||||
<defs><radialGradient id="${g}" cx="40%" cy="30%" r="70%">
|
||||
<stop offset="0%" stop-color="#fff9c4"/><stop offset="100%" stop-color="#fff176"/>
|
||||
</radialGradient>${shadow(key)}</defs>
|
||||
<g filter="url(#${gid(key, 'sh')})">
|
||||
<path d="M16 48 L20 36 L48 36 L52 48Z" fill="#ef5350"/>
|
||||
<circle cx="24" cy="30" r="7" fill="url(#${g})"/><circle cx="34" cy="24" r="8" fill="url(#${g})"/>
|
||||
<circle cx="44" cy="30" r="7" fill="url(#${g})"/><circle cx="32" cy="32" r="6" fill="url(#${g})"/>
|
||||
</g>`)
|
||||
}
|
||||
|
||||
const FOOD_ART = {
|
||||
lettuce: () => artLeafy('lettuce', '#c5e1a5', '#81c784', '#388e3c'),
|
||||
broccoli: () => artBroccoli('broccoli'),
|
||||
apple: () => artRound('apple', '#e53935', '#b71c1c', '#ef5350'),
|
||||
cucumber: () => artLong('cucumber', '#66bb6a', '#2e7d32', '#a5d6a7'),
|
||||
eggplant: () => artEggplant('eggplant'),
|
||||
tomato: () => artTomato('tomato'),
|
||||
pepper: () => artPepper('pepper', '#43a047', '#1b5e20'),
|
||||
onion: () => artOnion('onion'),
|
||||
pear: () => artRound('pear', '#c0ca33', '#827717', '#dce775', ''),
|
||||
orange: () => artRound('orange', '#fb8c00', '#e65100', '#ffb74d'),
|
||||
peach: () => artRound('peach', '#ff8a65', '#e64a19', '#ffab91'),
|
||||
cherry: () => artCherry('cherry'),
|
||||
grape: () => artGrapes('grape'),
|
||||
strawberry: () => artStrawberry('strawberry'),
|
||||
soybean: () => artBeans('soybean'),
|
||||
milk: () => artCup('milk', '#eceff1', '#b0bec5'),
|
||||
tea: () => artCup('tea', '#a1887f', '#6d4c41'),
|
||||
mushroom: () => artMushroom('mushroom'),
|
||||
celery: () => artCelery('celery'),
|
||||
greenBean: () => artGreenBean('greenBean'),
|
||||
brownRice: () => artRiceBowl('brownRice', '#bcaaa4', '#8d6e63', '#6d4c41'),
|
||||
sweetPotato: () => artRoot('sweetPotato', '#c75b39', '#8d2600', '#e57373'),
|
||||
taro: () => artRoot('taro', '#b39ddb', '#5e35b1', '#d1c4e9'),
|
||||
fish: () => artMeat('fish', '#4fc3f7', '#0277bd', 'fish'),
|
||||
chicken: () => artMeat('chicken', '#ffb74d', '#e65100', 'chicken'),
|
||||
beef: () => artMeat('beef', '#c0504d', '#7f0000', 'steak'),
|
||||
leanMeat: () => artMeat('leanMeat', '#b5654d', '#8d4000', 'steak'),
|
||||
shrimp: () => artSeafood('shrimp', 'shrimp'),
|
||||
crab: () => artSeafood('crab', 'crab'),
|
||||
banana: () => artLong('banana', '#fdd835', '#f9a825', '#fff176', 'banana'),
|
||||
mango: () => artRound('mango', '#ffb300', '#ff6f00', '#ffca28'),
|
||||
pineapple: () => artPineapple('pineapple'),
|
||||
kiwi: () => artKiwi('kiwi'),
|
||||
melon: () => artMelon('melon'),
|
||||
honey: () => artHoney('honey'),
|
||||
wine: () => artCup('wine', '#9b2c3b', '#4a0e16', 'wine'),
|
||||
beer: () => artCup('beer', '#ffb300', '#ff8f00'),
|
||||
coffee: () => artCup('coffee', '#6f4e37', '#3e2723'),
|
||||
corn: () => artLong('corn', '#f9c513', '#f57f17', '#fff176', 'corn'),
|
||||
udon: () => artNoodle('udon', '#d9b88f'),
|
||||
whiteRice: () => artRiceBowl('whiteRice', '#f5f5f5', '#eeeeee', '#bdbdbd'),
|
||||
whiteBread: () => artBread('whiteBread', '#d9a85c', '#a1887f', 'loaf'),
|
||||
mantou: () => artBread('mantou', '#ece0c8', '#bcaaa4', 'mantou'),
|
||||
youtiao: () => artBread('youtiao', '#d4943f', '#a1660a', 'loaf'),
|
||||
donut: () => artBread('donut', '#e87fb0', '#ad1457', 'donut'),
|
||||
popcorn: () => artPopcorn('popcorn'),
|
||||
ramen: () => artNoodle('ramen', '#e0a96d'),
|
||||
pumpkin: () => artPumpkin('pumpkin'),
|
||||
bakedPotato: () => artFries('bakedPotato'),
|
||||
watermelon: () => artWatermelon('watermelon'),
|
||||
sugar: () => artCandy('sugar', '#ff79b0', '#c2185b', 'lollipop'),
|
||||
maltose: () => artCandy('maltose', '#ffa726', '#e65100', 'wrap'),
|
||||
soda: () => artCup('soda', '#c62828', '#880e0e', 'bottle'),
|
||||
orangeJuice: () => artCup('orangeJuice', '#ff9f1c', '#e65100', 'bottle'),
|
||||
stickyRice: () => artDango('stickyRice')
|
||||
}
|
||||
|
||||
const imgCache = {}
|
||||
|
||||
/** 获取食材插画 data URL（带缓存） */
|
||||
export function getFoodImg(key) {
|
||||
if (imgCache[key]) return imgCache[key]
|
||||
const builder = FOOD_ART[key]
|
||||
if (!builder) return ''
|
||||
imgCache[key] = svgToDataUrl(builder())
|
||||
return imgCache[key]
|
||||
}
|
||||
|
||||
export function warmUpFoodImgs(keys) {
|
||||
keys.forEach((k) => getFoodImg(k))
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* 食材图标 URL（Twemoji PNG，小程序 / H5 通用）
|
||||
* 微信小程序 <image> 不支持 SVG data URL，必须用 https PNG
|
||||
*/
|
||||
const TWEMOJI_BASE = 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72'
|
||||
|
||||
/** emoji → Twemoji PNG 地址 */
|
||||
export function emojiToTwemojiUrl(emoji) {
|
||||
if (!emoji) return ''
|
||||
const parts = []
|
||||
for (let i = 0; i < emoji.length;) {
|
||||
const cp = emoji.codePointAt(i)
|
||||
if (!cp) break
|
||||
parts.push(cp.toString(16))
|
||||
i += cp > 0xffff ? 2 : 1
|
||||
}
|
||||
return `${TWEMOJI_BASE}/${parts.join('-')}.png`
|
||||
}
|
||||
|
||||
const imgCache = {}
|
||||
|
||||
export function getFoodImgUrl(emoji) {
|
||||
if (!emoji) return ''
|
||||
if (imgCache[emoji]) return imgCache[emoji]
|
||||
const url = emojiToTwemojiUrl(emoji)
|
||||
imgCache[emoji] = url
|
||||
return url
|
||||
}
|
||||
|
||||
/** 预加载本局食材图标（小程序提前拉取，减少首屏空白） */
|
||||
export function warmUpFoodImgs(foods) {
|
||||
const list = Array.isArray(foods) ? foods : []
|
||||
list.forEach((f) => {
|
||||
const icon = typeof f === 'string' ? f : f?.icon
|
||||
const url = getFoodImgUrl(icon)
|
||||
if (!url) return
|
||||
// #ifdef MP-WEIXIN
|
||||
try {
|
||||
uni.getImageInfo({ src: url, fail: () => {} })
|
||||
} catch (_) {}
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
try {
|
||||
const img = new Image()
|
||||
img.src = url
|
||||
} catch (_) {}
|
||||
// #endif
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
/**
|
||||
* 全量食材库：key 用于消除匹配，img 为 Twemoji PNG（小程序可用）
|
||||
*/
|
||||
import { getFoodImgUrl } from './gameFoodImg.js'
|
||||
|
||||
export const GI_LABEL = { low: '低血糖', mid: '中血糖', high: '高血糖' }
|
||||
|
||||
/** 若实际食用时的升糖幅度（教育提示用，正值=升糖） */
|
||||
export function getEatVal(food) {
|
||||
if (food.eatVal != null) return food.eatVal
|
||||
if (food.gi === 'high') return Math.abs(food.val)
|
||||
if (food.gi === 'mid') return Math.max(1, food.val)
|
||||
return Math.max(1, Math.abs(food.val))
|
||||
}
|
||||
|
||||
/** 从餐盘消除该食物后的血糖变化（负值=控糖有益） */
|
||||
export function getClearVal(food) {
|
||||
if (food.clearVal != null) return food.clearVal
|
||||
const eat = getEatVal(food)
|
||||
if (food.gi === 'high') return -Math.max(8, Math.round(eat * 0.5))
|
||||
if (food.gi === 'mid') return -1
|
||||
return 0
|
||||
}
|
||||
|
||||
/** 点击食材时的升糖说明文案 */
|
||||
export function formatEatLabel(food) {
|
||||
if (food.gi === 'low') return '升糖低'
|
||||
return `若食用 +${getEatVal(food)}`
|
||||
}
|
||||
|
||||
const RAW_FOODS = [
|
||||
// 低 GI
|
||||
{ key: 'lettuce', icon: '🥬', name: '生菜', gi: 'low', val: -3, color: '#8BC34A' },
|
||||
{ key: 'broccoli', icon: '🥦', name: '西兰花', gi: 'low', val: -3, color: '#4E8A3A' },
|
||||
{ key: 'apple', icon: '🍎', name: '苹果', gi: 'low', val: -2, color: '#E53935' },
|
||||
{ key: 'cucumber', icon: '🥒', name: '黄瓜', gi: 'low', val: -4, color: '#66A82F' },
|
||||
{ key: 'eggplant', icon: '🍆', name: '茄子', gi: 'low', val: -3, color: '#7E57C2' },
|
||||
{ key: 'tomato', icon: '🍅', name: '番茄', gi: 'low', val: -2, color: '#EF5350' },
|
||||
{ key: 'pepper', icon: '🫑', name: '青椒', gi: 'low', val: -3, color: '#43A047' },
|
||||
{ key: 'onion', icon: '🧅', name: '洋葱', gi: 'low', val: -2, color: '#CDA06B' },
|
||||
{ key: 'pear', icon: '🍐', name: '雪梨', gi: 'low', val: -2, color: '#C0CA33' },
|
||||
{ key: 'orange', icon: '🍊', name: '橙子', gi: 'low', val: -2, color: '#FB8C00' },
|
||||
{ key: 'peach', icon: '🍑', name: '桃子', gi: 'low', val: -2, color: '#FF8A65' },
|
||||
{ key: 'cherry', icon: '🍒', name: '樱桃', gi: 'low', val: -2, color: '#C2185B' },
|
||||
{ key: 'grape', icon: '🍇', name: '葡萄', gi: 'low', val: -1, color: '#8E24AA' },
|
||||
{ key: 'strawberry', icon: '🍓', name: '草莓', gi: 'low', val: -2, color: '#EC407A' },
|
||||
{ key: 'soybean', icon: '🫘', name: '黄豆', gi: 'low', val: -3, color: '#C9A063' },
|
||||
{ key: 'milk', icon: '🥛', name: '牛奶', gi: 'low', val: -2, color: '#B0BEC5' },
|
||||
{ key: 'tea', icon: '🍵', name: '红茶', gi: 'low', val: -1, color: '#A1573B' },
|
||||
{ key: 'mushroom', icon: '🍄', name: '香菇', gi: 'low', val: -3, color: '#8D6E63' },
|
||||
{ key: 'celery', icon: '🌿', name: '芹菜', gi: 'low', val: -4, color: '#7CB342' },
|
||||
{ key: 'greenBean', icon: '🫛', name: '四季豆', gi: 'low', val: -3, color: '#689F38' },
|
||||
|
||||
// 中 GI
|
||||
{ key: 'brownRice', icon: '🍙', name: '糙米饭', gi: 'mid', val: 4, color: '#C9A26B' },
|
||||
{ key: 'sweetPotato', icon: '🍠', name: '番薯', gi: 'mid', val: 5, color: '#C75B39' },
|
||||
{ key: 'taro', icon: '🥔', name: '芋头', gi: 'mid', val: 5, color: '#B39DDB' },
|
||||
{ key: 'fish', icon: '🐟', name: '鱼肉', gi: 'mid', val: 2, color: '#4FA3C7' },
|
||||
{ key: 'chicken', icon: '🍗', name: '鸡肉', gi: 'mid', val: 3, color: '#D6A15A' },
|
||||
{ key: 'beef', icon: '🥩', name: '牛肉', gi: 'mid', val: 3, color: '#C0504D' },
|
||||
{ key: 'leanMeat', icon: '🍖', name: '瘦肉', gi: 'mid', val: 3, color: '#B5654D' },
|
||||
{ key: 'shrimp', icon: '🦐', name: '虾仁', gi: 'mid', val: 2, color: '#FF7043' },
|
||||
{ key: 'crab', icon: '🦀', name: '螃蟹', gi: 'mid', val: 2, color: '#F4623A' },
|
||||
{ key: 'banana', icon: '🍌', name: '香蕉', gi: 'mid', val: 6, color: '#FDD835' },
|
||||
{ key: 'mango', icon: '🥭', name: '芒果', gi: 'mid', val: 6, color: '#FFB300' },
|
||||
{ key: 'pineapple', icon: '🍍', name: '菠萝', gi: 'mid', val: 6, color: '#FBC02D' },
|
||||
{ key: 'kiwi', icon: '🥝', name: '奇异果', gi: 'mid', val: 4, color: '#9CCC65' },
|
||||
{ key: 'melon', icon: '🍈', name: '哈密瓜', gi: 'mid', val: 6, color: '#AED581' },
|
||||
{ key: 'honey', icon: '🍯', name: '蜂蜜', gi: 'mid', val: 6, color: '#F9A825' },
|
||||
{ key: 'wine', icon: '🍷', name: '红酒', gi: 'mid', val: 4, color: '#9B2C3B' },
|
||||
{ key: 'beer', icon: '🍺', name: '啤酒', gi: 'mid', val: 5, color: '#E0A83E' },
|
||||
{ key: 'coffee', icon: '☕', name: '咖啡', gi: 'mid', val: 2, color: '#6F4E37' },
|
||||
{ key: 'corn', icon: '🌽', name: '玉米', gi: 'mid', val: 5, color: '#F9C513' },
|
||||
{ key: 'udon', icon: '🍲', name: '乌冬面', gi: 'mid', val: 5, color: '#D9B88F' },
|
||||
|
||||
// 高 GI
|
||||
{ key: 'whiteRice', icon: '🍚', name: '白米饭', gi: 'high', val: 18, color: '#E0E0E0' },
|
||||
{ key: 'whiteBread', icon: '🍞', name: '白面包', gi: 'high', val: 16, color: '#D9A85C' },
|
||||
{ key: 'mantou', icon: '🥯', name: '馒头', gi: 'high', val: 17, color: '#ECE0C8' },
|
||||
{ key: 'youtiao', icon: '🥖', name: '油条', gi: 'high', val: 20, color: '#D4943F' },
|
||||
{ key: 'donut', icon: '🍩', name: '甜甜圈', gi: 'high', val: 22, color: '#E87FB0' },
|
||||
{ key: 'popcorn', icon: '🍿', name: '爆米花', gi: 'high', val: 18, color: '#F5E6B3' },
|
||||
{ key: 'ramen', icon: '🍜', name: '拉面', gi: 'high', val: 17, color: '#E0A96D' },
|
||||
{ key: 'pumpkin', icon: '🎃', name: '南瓜', gi: 'high', val: 15, color: '#EF6C00' },
|
||||
{ key: 'bakedPotato', icon: '🍟', name: '焗薯', gi: 'high', val: 20, color: '#F2C14E' },
|
||||
{ key: 'watermelon', icon: '🍉', name: '西瓜', gi: 'high', val: 16, color: '#F0506A' },
|
||||
{ key: 'sugar', icon: '🍭', name: '砂糖', gi: 'high', val: 25, color: '#FF79B0' },
|
||||
{ key: 'maltose', icon: '🍬', name: '麦芽糖', gi: 'high', val: 24, color: '#FFA726' },
|
||||
{ key: 'soda', icon: '🥤', name: '汽水', gi: 'high', val: 25, color: '#C62828' },
|
||||
{ key: 'orangeJuice', icon: '🧃', name: '柳橙汁', gi: 'high', val: 22, color: '#FF9F1C' },
|
||||
{ key: 'stickyRice', icon: '🍡', name: '糯米饭', gi: 'high', val: 19, color: '#F2A7B8' }
|
||||
]
|
||||
|
||||
export const FOOD_LIBRARY = RAW_FOODS.map((f, i) => {
|
||||
const eatVal = getEatVal(f)
|
||||
const clearVal = getClearVal({ ...f, eatVal })
|
||||
return {
|
||||
id: i + 1,
|
||||
...f,
|
||||
eatVal,
|
||||
clearVal,
|
||||
giLabel: GI_LABEL[f.gi],
|
||||
get img() {
|
||||
return getFoodImgUrl(f.icon)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/** 按 key 查找食材（目标栏等用） */
|
||||
export function getFoodByKey(key) {
|
||||
return FOOD_LIBRARY.find((f) => f.key === key) || null
|
||||
}
|
||||
|
||||
/** 为棋盘 tile 使用的 plain 对象（img 预计算，避免 getter 在响应式里反复触发） */
|
||||
export function cloneFoodType(food) {
|
||||
return {
|
||||
id: food.id,
|
||||
key: food.key,
|
||||
icon: food.icon,
|
||||
name: food.name,
|
||||
gi: food.gi,
|
||||
giLabel: food.giLabel,
|
||||
val: food.val,
|
||||
color: food.color,
|
||||
img: getFoodImgUrl(food.icon)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* 关卡配置：难度随关卡递增，驱动“再闯一关”动力
|
||||
*/
|
||||
export function getLevelConfig(levelId) {
|
||||
const lv = Math.max(1, Math.min(999, Number(levelId) || 1))
|
||||
const tier = Math.floor((lv - 1) / 5)
|
||||
|
||||
return {
|
||||
id: lv,
|
||||
moves: Math.max(14, 26 - tier * 2 - (lv % 3)),
|
||||
goalTargets: [8 + tier * 2 + (lv % 2), 10 + tier * 2 + Math.floor(lv / 4)],
|
||||
scoreTarget: 2800 + lv * 450,
|
||||
startGlucose: 50,
|
||||
/** 餐后消化倒计时（秒）：归零时按棋盘上剩余食物升糖 */
|
||||
digestIntervalSec: Math.max(5, 10 - tier),
|
||||
digestMultiplier: 1 + tier * 0.12,
|
||||
boosters: {
|
||||
insulin: Math.max(1, 3 - Math.floor(tier / 2)),
|
||||
fiber: tier >= 3 ? 0 : 1,
|
||||
meal: Math.max(2, 5 - tier)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 根据本局表现计算 1~3 星 */
|
||||
export function calcLevelStars({ movesLeft, glucoseLevel, score, levelConfig }) {
|
||||
let stars = 1
|
||||
const stable = glucoseLevel >= 30 && glucoseLevel <= 70
|
||||
if (stable && movesLeft >= 2) stars = 2
|
||||
if (stars >= 2 && score >= (levelConfig?.scoreTarget ?? 3000) && movesLeft >= 4) stars = 3
|
||||
return stars
|
||||
}
|
||||
@@ -0,0 +1,596 @@
|
||||
<!DOCTYPE html><html class="light" lang="zh-CN"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>Daily Care - Health Dashboard</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"secondary-fixed": "#d9e6dd",
|
||||
"surface-container": "#e8f0e9",
|
||||
"surface-dim": "#d4dcd5",
|
||||
"surface-variant": "#dde4dd",
|
||||
"error-container": "#ffdad6",
|
||||
"inverse-surface": "#2b322d",
|
||||
"secondary": "#55615a",
|
||||
"primary": "#006c49",
|
||||
"on-secondary-fixed": "#131e19",
|
||||
"surface-bright": "#f4fbf4",
|
||||
"on-tertiary-container": "#711419",
|
||||
"on-primary-fixed-variant": "#005236",
|
||||
"outline-variant": "#bbcabf",
|
||||
"primary-container": "#10b981",
|
||||
"surface": "#f4fbf4",
|
||||
"on-tertiary-fixed-variant": "#842225",
|
||||
"tertiary-fixed-dim": "#ffb3af",
|
||||
"tertiary-fixed": "#ffdad7",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-highest": "#dde4dd",
|
||||
"primary-fixed": "#6ffbbe",
|
||||
"on-primary-container": "#00422b",
|
||||
"secondary-fixed-dim": "#bdcac1",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-primary-fixed": "#002113",
|
||||
"on-error-container": "#93000a",
|
||||
"tertiary-container": "#fc7c78",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-primary": "#4edea3",
|
||||
"inverse-on-surface": "#ebf3eb",
|
||||
"on-secondary-container": "#5b6760",
|
||||
"surface-container-high": "#e3eae3",
|
||||
"surface-container-low": "#eef6ee",
|
||||
"on-secondary-fixed-variant": "#3e4943",
|
||||
"outline": "#6c7a71",
|
||||
"secondary-container": "#d9e6dd",
|
||||
"on-primary": "#ffffff",
|
||||
"on-surface": "#161d19",
|
||||
"on-background": "#161d19",
|
||||
"tertiary": "#a43a3a",
|
||||
"primary-fixed-dim": "#4edea3",
|
||||
"on-secondary": "#ffffff",
|
||||
"background": "#f4fbf4",
|
||||
"on-surface-variant": "#3c4a42",
|
||||
"surface-tint": "#006c49",
|
||||
"on-tertiary-fixed": "#410005"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"2xl": "1rem",
|
||||
"3xl": "1.5rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"card-padding": "20px",
|
||||
"section-margin": "32px",
|
||||
"inline-gap": "12px",
|
||||
"stack-gap": "16px",
|
||||
"container-margin": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-md": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"body-lg": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"display-lg": ["Manrope"],
|
||||
"body-md": ["Manrope"],
|
||||
"label-md": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"headline-lg-mobile": ["22px", {"lineHeight": "28px", "fontWeight": "700"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "500"}],
|
||||
"headline-lg": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
||||
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "800"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Manrope', sans-serif; -webkit-tap-highlight-color: transparent; }
|
||||
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; display: inline-block; vertical-align: middle; }
|
||||
.ambient-shadow { box-shadow: 0 20px 30px -10px rgba(0, 108, 73, 0.08); }
|
||||
.active-scale:active { transform: scale(0.98); transition: all 0.2s ease; }
|
||||
.hide-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
/* Watering Animation Styles */
|
||||
@keyframes fall {
|
||||
0% { transform: translateY(-20px); opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
100% { transform: translateY(40px); opacity: 0; }
|
||||
}
|
||||
.droplet {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 10px;
|
||||
background: #3b82f6;
|
||||
border-radius: 50%;
|
||||
animation: fall 0.6s linear infinite;
|
||||
}
|
||||
@keyframes pulse-growth {
|
||||
0% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(78, 222, 163, 0)); }
|
||||
50% { transform: scale(1.15); filter: drop-shadow(0 0 15px rgba(78, 222, 163, 0.6)); }
|
||||
100% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(78, 222, 163, 0)); }
|
||||
}
|
||||
.growth-pulse {
|
||||
animation: pulse-growth 0.8s ease-out;
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { opacity: 0; transform: scale(0) rotate(0deg); }
|
||||
50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
|
||||
100% { opacity: 0; transform: scale(0) rotate(360deg); }
|
||||
}
|
||||
.shimmer-particle {
|
||||
position: absolute;
|
||||
color: #4edea3;
|
||||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
animation: shimmer 1s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Blood Sugar Decrease Animation */
|
||||
@keyframes float-up-fade {
|
||||
0% { transform: translateY(20px); opacity: 0; }
|
||||
20% { opacity: 1; }
|
||||
80% { opacity: 1; }
|
||||
100% { transform: translateY(-100px); opacity: 0; }
|
||||
}
|
||||
.sugar-decrease-text {
|
||||
position: fixed;
|
||||
color: #10b981;
|
||||
font-weight: 800;
|
||||
font-size: 24px;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
text-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
|
||||
animation: float-up-fade 2s ease-out forwards;
|
||||
}
|
||||
@keyframes fall-arrow {
|
||||
0% { transform: translateY(-50vh) scale(0.5); opacity: 0; }
|
||||
50% { opacity: 0.8; }
|
||||
100% { transform: translateY(110vh) scale(1.2); opacity: 0; }
|
||||
}
|
||||
.sugar-particle {
|
||||
position: fixed;
|
||||
color: #10b981;
|
||||
pointer-events: none;
|
||||
z-index: 90;
|
||||
animation: fall-arrow 1.5s linear forwards;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background min-h-screen pb-24">
|
||||
<!-- Top App Bar -->
|
||||
<header class="bg-primary docked full-width top-0 h-48 flex items-end pb-6 px-5 fixed left-0 right-0 z-40">
|
||||
<div class="flex justify-between items-center w-full">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full border-2 border-on-primary overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="A professional studio portrait" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCXIPbeivladmw0-SmLno2vkwVvsObW2D5HUtodItlBnxdhFF8TvZdQYrTt14QCk3n5VXXIpdk3cuWTJHXJgDXd_clQyjLsb477e5h2313zh76yRVns01Q5pLpM-2_RbheRcUioLvObwJtIPJbkDcbkNA61-LyBnbStRcPoh6YOvNHSHjUUR_nDJpPm18ga87ggphbFWF-pt7lRF027swmyitUeVF7HXQDfcG7Mq7E0pqsbhyA7jKxtzmbN-HLh7GIrhc6LOAUaXiX9">
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-on-primary font-bold text-headline-lg-mobile leading-tight">Daily Care</h1>
|
||||
<p class="text-on-primary/80 text-body-md">吕帅</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="bg-on-primary/10 hover:bg-on-primary/20 text-on-primary rounded-full px-4 py-1.5 flex items-center gap-2 active-scale transition-all">
|
||||
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">bloodtype</span>
|
||||
<span class="text-label-md">血糖</span>
|
||||
</button>
|
||||
<button class="bg-on-primary/10 hover:bg-on-primary/20 text-on-primary w-10 h-10 rounded-full flex items-center justify-center active-scale transition-all">
|
||||
<span class="material-symbols-outlined text-[20px]">refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-52 px-container-margin space-y-6">
|
||||
<!-- Toggle Switch -->
|
||||
<div class="bg-surface-container-high rounded-full p-1 flex items-center">
|
||||
<button class="flex-1 bg-primary text-on-primary rounded-full py-2 text-label-md font-bold shadow-md transition-all">最近 7 天</button>
|
||||
<button class="flex-1 text-on-surface-variant py-2 text-label-md font-bold transition-all">最近 30 天</button>
|
||||
</div>
|
||||
<!-- Health Calendar -->
|
||||
<section class="bg-surface-container-lowest rounded-3xl p-card-padding ambient-shadow">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h2 class="text-headline-md font-headline-md text-on-surface">健康日历</h2>
|
||||
<p class="text-body-md text-outline">2026年5月 · 已记录 3 / 7 天</p>
|
||||
</div>
|
||||
<button class="text-primary"><span class="material-symbols-outlined">chevron_right</span></button>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-1 text-center mb-4">
|
||||
<span class="text-label-md text-outline">一</span>
|
||||
<span class="text-label-md text-outline">二</span>
|
||||
<span class="text-label-md text-outline">三</span>
|
||||
<span class="text-label-md text-outline">四</span>
|
||||
<span class="text-label-md text-outline">五</span>
|
||||
<span class="text-label-md text-outline">六</span>
|
||||
<span class="text-label-md text-tertiary">日</span>
|
||||
<span class="py-2 text-body-md text-outline/30">18</span>
|
||||
<span class="py-2 text-body-md text-outline/30">19</span>
|
||||
<span class="py-2 text-body-md text-outline/30">20</span>
|
||||
<span class="py-2 text-body-md text-outline/30">21</span>
|
||||
<span class="py-2 text-body-md text-outline/30">22</span>
|
||||
<div class="py-2 relative"><span class="text-body-md font-bold text-on-surface">23</span></div>
|
||||
<div class="py-2 relative bg-primary-container/10 rounded-lg">
|
||||
<span class="text-body-md font-bold text-primary">24</span>
|
||||
<span class="absolute bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-primary rounded-full"></span>
|
||||
</div>
|
||||
<div class="py-2 relative bg-primary-container/10 rounded-lg">
|
||||
<span class="text-body-md font-bold text-primary">25</span>
|
||||
<span class="absolute bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-primary rounded-full"></span>
|
||||
</div>
|
||||
<div class="py-2 relative bg-primary-container/10 rounded-lg">
|
||||
<span class="text-body-md font-bold text-primary">26</span>
|
||||
<span class="absolute bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-primary rounded-full"></span>
|
||||
</div>
|
||||
<span class="py-2 text-body-md text-on-surface">27</span>
|
||||
<span class="py-2 text-body-md text-on-surface">28</span>
|
||||
<div class="py-2 relative bg-tertiary-container rounded-lg">
|
||||
<span class="text-body-md font-bold text-on-tertiary">29</span>
|
||||
</div>
|
||||
<span class="py-2 text-body-md text-outline/40">30</span>
|
||||
<span class="py-2 text-body-md text-outline/40">31</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between border-t border-outline-variant/30 pt-4 mt-2">
|
||||
<span class="text-body-md text-outline">今日还没有记录</span>
|
||||
<button class="bg-primary text-on-primary px-6 py-3 rounded-2xl text-label-md font-bold active-scale transition-all flex items-center gap-2">去记血糖</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Blood Sugar Details Section -->
|
||||
<section class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-headline-md font-headline-md text-on-surface">血糖明细</h3>
|
||||
<span class="text-body-md text-outline">共 3 天</span>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-surface-container-lowest rounded-3xl p-card-padding ambient-shadow">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<span class="text-headline-md font-bold">05-26</span>
|
||||
<span class="text-body-md text-outline">周二</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="bg-background/50 border border-outline-variant/20 rounded-2xl p-4 flex justify-between items-center">
|
||||
<span class="text-body-md text-outline">空腹</span>
|
||||
<div class="text-right">
|
||||
<span class="text-headline-lg font-extrabold text-error">10.4</span>
|
||||
<span class="text-label-md text-outline ml-1">mmol/L</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-background/50 border border-outline-variant/20 rounded-2xl p-4 flex justify-between items-center">
|
||||
<span class="text-body-md text-outline">餐后</span>
|
||||
<span class="text-headline-md font-bold text-outline-variant">—— <small class="text-label-md">mmol/L</small></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest rounded-3xl p-card-padding ambient-shadow">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<span class="text-headline-md font-bold">05-25</span>
|
||||
<span class="text-body-md text-outline">周一</span>
|
||||
</div>
|
||||
<div class="bg-background/50 border border-outline-variant/20 rounded-2xl p-4 flex justify-between items-center">
|
||||
<span class="text-body-md text-outline">空腹</span>
|
||||
<div class="text-right">
|
||||
<span class="text-headline-lg font-extrabold text-error">10.2</span>
|
||||
<span class="text-label-md text-outline ml-1">mmol/L</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Reward Section: 稳糖乐园 -->
|
||||
<section class="bg-surface-container-lowest rounded-3xl p-card-padding ambient-shadow overflow-hidden relative" id="sugar-paradise">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<h3 class="text-headline-md font-headline-md text-on-surface">稳糖乐园</h3>
|
||||
<p class="text-body-md text-outline">用健康打卡浇灌你的稳糖树</p>
|
||||
</div>
|
||||
<div class="bg-primary/10 rounded-xl px-3 py-1 text-center">
|
||||
<span class="block text-headline-lg font-extrabold text-primary" id="total-points">110</span>
|
||||
<span class="text-[10px] text-primary/70 font-bold">稳糖积分</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mini Quick Actions -->
|
||||
<div class="grid grid-cols-4 gap-2 mb-8">
|
||||
<button class="bg-surface-container-low p-3 rounded-2xl flex flex-col items-center gap-1 active-scale transition-all">
|
||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">bloodtype</span>
|
||||
<span class="text-label-md text-on-surface">血糖</span>
|
||||
</button>
|
||||
<button class="bg-surface-container-low p-3 rounded-2xl flex flex-col items-center gap-1 active-scale transition-all">
|
||||
<span class="material-symbols-outlined text-primary">monitoring</span>
|
||||
<span class="text-label-md text-on-surface">血压</span>
|
||||
</button>
|
||||
<button class="bg-surface-container-low p-3 rounded-2xl flex flex-col items-center gap-1 active-scale transition-all">
|
||||
<span class="material-symbols-outlined text-primary">restaurant</span>
|
||||
<span class="text-label-md text-on-surface">饮食</span>
|
||||
</button>
|
||||
<button class="bg-surface-container-low p-3 rounded-2xl flex flex-col items-center gap-1 active-scale transition-all">
|
||||
<span class="material-symbols-outlined text-primary">exercise</span>
|
||||
<span class="text-label-md text-on-surface">运动</span>
|
||||
</button>
|
||||
</div>
|
||||
<h4 class="text-label-md font-bold text-on-surface mb-3">今日控糖任务</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full border-2 border-primary flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[16px] text-primary" style="font-variation-settings: 'wght' 700;">check</span>
|
||||
</div>
|
||||
<span class="text-body-md text-on-surface">测血糖血压</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-label-md text-primary font-bold">+10积分</span>
|
||||
<span class="text-outline text-label-md font-bold italic">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full border-2 border-outline-variant/30 flex items-center justify-center">
|
||||
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
|
||||
</div>
|
||||
<span class="text-body-md text-on-surface">记今日饮食</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-label-md text-primary font-bold">+10积分</span>
|
||||
<button class="bg-on-surface text-surface rounded-full px-4 py-1 text-label-md font-bold active-scale transition-all">去记录</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Optimized Level System & Gamification -->
|
||||
<div class="mt-8 bg-gradient-to-br from-primary/5 to-primary/20 rounded-3xl p-6 border border-primary/10 relative overflow-hidden">
|
||||
<!-- Level Indicator Header -->
|
||||
<div class="flex justify-between items-end mb-6">
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-primary text-on-primary text-[10px] px-2 py-0.5 rounded-full font-extrabold" id="level-label">Lv.4</span>
|
||||
<span class="text-body-lg font-extrabold text-primary" id="stage-name">枝繁叶茂</span>
|
||||
</div>
|
||||
<p class="text-[11px] text-primary/60">还差 <span class="font-bold">15 XP</span> 升级至 Lv.4</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-label-md font-bold text-primary" id="xp-text">5/50 XP</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Progress Bar -->
|
||||
<div class="w-full h-2.5 bg-white/50 rounded-full mb-8 overflow-hidden backdrop-blur-sm border border-white/20">
|
||||
<div class="h-full bg-gradient-to-r from-primary to-primary-container rounded-full transition-all duration-500 shadow-inner" id="xp-progress" style="width: 10%;"></div>
|
||||
</div>
|
||||
<!-- Plant Growth Display -->
|
||||
<div class="flex items-center justify-center py-8 relative min-h-[160px]">
|
||||
<!-- Watering Animation Container -->
|
||||
<div class="absolute top-0 left-0 w-full h-full pointer-events-none z-10" id="rain-container"></div>
|
||||
<!-- Visual Stage Indicator Background -->
|
||||
<div class="absolute inset-0 flex items-center justify-center opacity-10 pointer-events-none">
|
||||
<span class="text-[120px] material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">eco</span>
|
||||
</div>
|
||||
<!-- Current Plant State -->
|
||||
<div class="relative z-20 transition-all duration-300" id="plant-container">
|
||||
<span class="text-7xl drop-shadow-2xl filter block" id="plant-emoji">🪴</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Watering Action -->
|
||||
<div class="relative z-30">
|
||||
<button class="w-full bg-primary text-on-primary py-4 rounded-2xl text-body-lg font-bold flex items-center justify-center gap-3 shadow-lg active:scale-95 transition-all active:bg-primary-container group" id="water-btn">
|
||||
<span class="material-symbols-outlined text-[24px] transition-transform group-active:-rotate-12 group-hover:scale-110">opacity</span>
|
||||
给小树浇水
|
||||
</button>
|
||||
<p class="text-[11px] text-center text-outline mt-3 italic">浇水可消耗 5 积分，获得 10 XP</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Social Interaction -->
|
||||
<section class="bg-surface-container-lowest rounded-3xl p-card-padding ambient-shadow flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-tertiary-container/20 rounded-2xl flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-tertiary" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-body-md font-bold text-on-surface">邀请家人点赞</h4>
|
||||
<p class="text-[12px] text-outline">分享战报给家人，邀请他们为您点赞鼓励</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline">chevron_right</span>
|
||||
</section>
|
||||
<!-- Status Tip -->
|
||||
<div class="flex items-start gap-3 px-2">
|
||||
<span class="material-symbols-outlined text-primary-container text-[20px]">chat_bubble</span>
|
||||
<div>
|
||||
<p class="text-body-md text-on-surface">先完成血糖记录，<span class="text-primary font-bold">今日第一格就亮起来</span>。</p>
|
||||
<button class="text-outline text-label-md hover:text-primary transition-colors">轻触换一句鼓励 ›</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Care List Horizontal -->
|
||||
<div class="flex items-center gap-3 overflow-x-auto hide-scrollbar -mx-container-margin px-container-margin pb-2">
|
||||
<div class="shrink-0 flex items-center gap-2 bg-white px-3 py-2 rounded-xl shadow-sm border border-outline-variant/20">
|
||||
<span class="text-label-md text-outline">就诊卡</span>
|
||||
<span class="text-label-md font-extrabold text-on-surface">10 张</span>
|
||||
</div>
|
||||
<div class="shrink-0 flex items-center gap-2 bg-primary text-on-primary px-3 py-2 rounded-xl shadow-md">
|
||||
<span class="text-label-md font-bold">吕帅</span>
|
||||
<span class="text-[10px] bg-white/20 rounded px-1">23岁</span>
|
||||
</div>
|
||||
<div class="shrink-0 flex items-center gap-2 bg-surface-container-high text-on-surface-variant px-3 py-2 rounded-xl border border-outline-variant/30">
|
||||
<span class="text-label-md font-bold">霍爱玲</span>
|
||||
<span class="text-[10px] text-outline">57岁</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer Note -->
|
||||
<footer class="mt-8 text-center px-container-margin pb-12">
|
||||
<p class="text-[11px] text-outline-variant/60">数据每日同步 · 阈值仅作参考，请遵医嘱</p>
|
||||
</footer>
|
||||
<!-- Navigation Bar -->
|
||||
|
||||
<script>
|
||||
// State Management
|
||||
let currentXP = 35;
|
||||
let currentLevel = 3;
|
||||
let totalPoints = 120;
|
||||
const maxLevel = 10;
|
||||
const xpPerLevel = 50;
|
||||
|
||||
const stageNames = [
|
||||
"种子眠", "破土而出", "茁壮成长", "枝繁叶茂", "初绽花蕾",
|
||||
"繁花似锦", "硕果初步", "丰收在望", "参天大树", "森林守护"
|
||||
];
|
||||
|
||||
const plantEmojis = [
|
||||
"🫘", "🌱", "🌿", "🪴", "🎍",
|
||||
"🌸", "🍒", "🍎", "🌳", "🌲"
|
||||
];
|
||||
|
||||
// DOM Elements
|
||||
const waterBtn = document.getElementById('water-btn');
|
||||
const rainContainer = document.getElementById('rain-container');
|
||||
const plantContainer = document.getElementById('plant-container');
|
||||
const plantEmoji = document.getElementById('plant-emoji');
|
||||
const xpProgress = document.getElementById('xp-progress');
|
||||
const xpText = document.getElementById('xp-text');
|
||||
const levelLabel = document.getElementById('level-label');
|
||||
const stageNameLabel = document.getElementById('stage-name');
|
||||
const totalPointsLabel = document.getElementById('total-points');
|
||||
|
||||
// Watering Animation Logic
|
||||
function createRain() {
|
||||
for (let i = 0; i < 15; i++) {
|
||||
const droplet = document.createElement('div');
|
||||
droplet.className = 'droplet';
|
||||
droplet.style.left = `${Math.random() * 100}%`;
|
||||
droplet.style.animationDelay = `${Math.random() * 0.4}s`;
|
||||
rainContainer.appendChild(droplet);
|
||||
|
||||
// Cleanup
|
||||
setTimeout(() => droplet.remove(), 600);
|
||||
}
|
||||
}
|
||||
|
||||
function triggerGrowthPulse() {
|
||||
plantContainer.classList.add('growth-pulse');
|
||||
setTimeout(() => {
|
||||
plantContainer.classList.remove('growth-pulse');
|
||||
}, 800);
|
||||
}
|
||||
|
||||
function createSparkles() {
|
||||
for (let i = 0; i < 12; i++) {
|
||||
const sparkle = document.createElement('span');
|
||||
sparkle.className = 'material-symbols-outlined shimmer-particle';
|
||||
sparkle.textContent = 'sparkles';
|
||||
sparkle.style.left = `${40 + (Math.random() - 0.5) * 40}%`;
|
||||
sparkle.style.top = `${40 + (Math.random() - 0.5) * 40}%`;
|
||||
sparkle.style.animationDuration = `${0.6 + Math.random() * 0.4}s`;
|
||||
plantContainer.appendChild(sparkle);
|
||||
|
||||
setTimeout(() => sparkle.remove(), 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function triggerSugarDecreaseEffect() {
|
||||
// 1. Floating Text
|
||||
const floatingText = document.createElement('div');
|
||||
floatingText.className = 'sugar-decrease-text';
|
||||
floatingText.textContent = '-0.5 mmol/L';
|
||||
|
||||
// Randomize spawn position near the plant
|
||||
const rect = plantContainer.getBoundingClientRect();
|
||||
floatingText.style.left = `${rect.left + rect.width / 2}px`;
|
||||
floatingText.style.top = `${rect.top}px`;
|
||||
|
||||
document.body.appendChild(floatingText);
|
||||
setTimeout(() => floatingText.remove(), 2000);
|
||||
|
||||
// 2. Full-screen Downward Particles
|
||||
for (let i = 0; i < 20; i++) {
|
||||
setTimeout(() => {
|
||||
const particle = document.createElement('div');
|
||||
particle.className = 'sugar-particle text-primary-container';
|
||||
// Mix arrows and symbols
|
||||
particle.innerHTML = Math.random() > 0.5 ? '<span class="material-symbols-outlined">south</span>' : '▼';
|
||||
particle.style.left = `${Math.random() * 100}vw`;
|
||||
particle.style.fontSize = `${16 + Math.random() * 16}px`;
|
||||
particle.style.opacity = '0';
|
||||
|
||||
document.body.appendChild(particle);
|
||||
setTimeout(() => particle.remove(), 1500);
|
||||
}, i * 50);
|
||||
}
|
||||
}
|
||||
|
||||
function updateDisplay() {
|
||||
const progress = (currentXP / xpPerLevel) * 100;
|
||||
xpProgress.style.width = `${progress}%`;
|
||||
xpText.textContent = `${currentXP}/${xpPerLevel} XP`;
|
||||
levelLabel.textContent = `Lv.${currentLevel}`;
|
||||
stageNameLabel.textContent = stageNames[currentLevel - 1];
|
||||
plantEmoji.textContent = plantEmojis[currentLevel - 1];
|
||||
totalPointsLabel.textContent = totalPoints;
|
||||
}
|
||||
|
||||
// Action Logic
|
||||
waterBtn.addEventListener('click', () => {
|
||||
if (totalPoints < 5) {
|
||||
alert("积分不足，快去完成任务领积分吧！");
|
||||
return;
|
||||
}
|
||||
|
||||
// Lock button briefly
|
||||
waterBtn.disabled = true;
|
||||
waterBtn.classList.add('opacity-50');
|
||||
|
||||
// 1. Consume Points
|
||||
totalPoints -= 5;
|
||||
|
||||
// 2. Trigger Animations
|
||||
createRain();
|
||||
|
||||
setTimeout(() => {
|
||||
triggerGrowthPulse();
|
||||
createSparkles();
|
||||
triggerSugarDecreaseEffect(); // New Effect
|
||||
|
||||
// 3. Update State
|
||||
currentXP += 10;
|
||||
if (currentXP >= xpPerLevel && currentLevel < maxLevel) {
|
||||
currentXP -= xpPerLevel;
|
||||
currentLevel++;
|
||||
}
|
||||
|
||||
updateDisplay();
|
||||
|
||||
// Unlock button
|
||||
waterBtn.disabled = false;
|
||||
waterBtn.classList.remove('opacity-50');
|
||||
}, 600);
|
||||
});
|
||||
|
||||
// Initialize
|
||||
updateDisplay();
|
||||
|
||||
// Simple button micro-interactions for others
|
||||
document.querySelectorAll('button:not(#water-btn)').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
if(!btn.classList.contains('cursor-not-allowed')) {
|
||||
// Interaction logic
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -52,12 +52,27 @@
|
||||
<text>录入今日血糖</text>
|
||||
</view>
|
||||
|
||||
<view class="st-game-entry" @click="goGamePage">
|
||||
<view class="st-game-entry-icon">
|
||||
<TongjiIcon name="activity" size="md" color="#006c49" />
|
||||
</view>
|
||||
<view class="st-game-entry-body">
|
||||
<text class="st-game-entry-title">糖分突袭</text>
|
||||
<text class="st-game-entry-sub">消除棋盘食物，边玩边学控糖</text>
|
||||
</view>
|
||||
<TongjiIcon name="chevron-right" size="sm" color="#64748b" />
|
||||
</view>
|
||||
|
||||
<!-- 2. 血糖趋势 -->
|
||||
<view v-if="diagnosisId" class="st-chart-card">
|
||||
<view class="st-chart-head">
|
||||
<view>
|
||||
<text class="st-chart-title">血糖趋势</text>
|
||||
<text class="st-chart-sub">{{ rangeText }} · mmol/L</text>
|
||||
<view class="st-chart-more" @click="goRecordsPage">
|
||||
<text class="st-chart-more-text">查看更多记录</text>
|
||||
<TongjiIcon name="chevron-right" size="sm" color="#006c49" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="st-chart-legend">
|
||||
<view
|
||||
@@ -1290,6 +1305,18 @@ function onRefresh() {
|
||||
fetchAll()
|
||||
}
|
||||
|
||||
async function goRecordsPage() {
|
||||
if (!diagnosisId.value) {
|
||||
const ok = await ensureCanRecordGlucose()
|
||||
if (!ok || !diagnosisId.value) return
|
||||
}
|
||||
const q = [
|
||||
`diagnosis_id=${diagnosisId.value}`,
|
||||
patientId.value ? `patient_id=${patientId.value}` : ''
|
||||
].filter(Boolean).join('&')
|
||||
uni.navigateTo({ url: `/tongji/pages/more?${q}` })
|
||||
}
|
||||
|
||||
async function goMorePage() {
|
||||
if (!diagnosisId.value) {
|
||||
const ok = await ensureCanRecordGlucose()
|
||||
@@ -1298,6 +1325,15 @@ async function goMorePage() {
|
||||
uni.navigateTo({ url: '/tongji/pages/more' })
|
||||
}
|
||||
|
||||
function goGamePage() {
|
||||
uni.navigateTo({
|
||||
url: '/tongji/pages/game',
|
||||
fail() {
|
||||
uni.showToast({ title: '暂时无法打开游戏', icon: 'none' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function navToUser() {
|
||||
uni.switchTab({ url: '/pages/user/user' })
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -3,7 +3,7 @@
|
||||
* 设计 token 与 stitch-weekly.html tailwind.config 一一对应
|
||||
*/
|
||||
|
||||
.weekly-page {
|
||||
.stitch-vitalmint {
|
||||
--primary: #006c49;
|
||||
--on-primary: #ffffff;
|
||||
--on-primary-fixed-variant: #005236;
|
||||
@@ -29,6 +29,8 @@
|
||||
--error-container: #ffdad6;
|
||||
--tertiary: #a43a3a;
|
||||
--tertiary-container: #fc7c78;
|
||||
--on-tertiary: #ffffff;
|
||||
--on-tertiary-container: #711419;
|
||||
|
||||
--st-container-margin: 40rpx;
|
||||
--st-section-gap: 64rpx;
|
||||
@@ -39,7 +41,9 @@
|
||||
--st-radius-xl: 24rpx;
|
||||
--st-radius-lg: 16rpx;
|
||||
--st-shadow-ambient: 0 20rpx 60rpx -20rpx rgba(0, 108, 73, 0.08);
|
||||
}
|
||||
|
||||
.weekly-page.stitch-vitalmint {
|
||||
min-height: 100vh;
|
||||
background: var(--surface);
|
||||
color: var(--on-surface);
|
||||
|
||||
@@ -139,6 +139,59 @@
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* 糖分突袭游戏入口 */
|
||||
.weekly-page .st-game-entry {
|
||||
width: 100%;
|
||||
margin-top: 24rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
border-radius: var(--st-radius-2xl);
|
||||
background: var(--surface-container-lowest);
|
||||
border: 1rpx solid rgba(0, 108, 73, 0.14);
|
||||
box-shadow: var(--st-shadow-ambient);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.weekly-page .st-game-entry:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.weekly-page .st-game-entry-icon {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(0, 108, 73, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.weekly-page .st-game-entry-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
.weekly-page .st-game-entry-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: var(--on-surface);
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.weekly-page .st-game-entry-sub {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: var(--on-surface-variant, #64748b);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* ===== Chart card — rounded-3xl ===== */
|
||||
.weekly-page .st-chart-card {
|
||||
padding: 40rpx;
|
||||
@@ -150,7 +203,7 @@
|
||||
|
||||
.weekly-page .st-chart-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
@@ -170,6 +223,23 @@
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-more {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-more-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-more:active {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-legend {
|
||||
display: flex;
|
||||
gap: var(--st-inline-gap);
|
||||
|
||||
@@ -623,7 +623,42 @@ class TcmController extends BaseApiController
|
||||
];
|
||||
|
||||
if ($existing) {
|
||||
$payload['id'] = $existing['id'];
|
||||
// 分表单项更新时保留未提交字段，避免血糖/血压互相覆盖
|
||||
$keepDecimal = function ($new, string $oldKey) use ($parseDecimal, $existing) {
|
||||
if ($new !== null) {
|
||||
return $new;
|
||||
}
|
||||
return $parseDecimal($existing[$oldKey] ?? null);
|
||||
};
|
||||
$keepInt = function ($new, string $oldKey) use ($parseInt, $existing) {
|
||||
if ($new !== null) {
|
||||
return $new;
|
||||
}
|
||||
return $parseInt($existing[$oldKey] ?? null);
|
||||
};
|
||||
$fasting = $keepDecimal($fasting, 'fasting_blood_sugar');
|
||||
$postprandial = $keepDecimal($postprandial, 'postprandial_blood_sugar');
|
||||
$other = $keepDecimal($other, 'other_blood_sugar');
|
||||
$systolic = $keepInt($systolic, 'systolic_pressure');
|
||||
$diastolic = $keepInt($diastolic, 'diastolic_pressure');
|
||||
if ($remark === '') {
|
||||
$remark = trim((string) ($existing['remark'] ?? ''));
|
||||
}
|
||||
|
||||
$payload = [
|
||||
'diagnosis_id' => $diagnosisId,
|
||||
'patient_id' => (int) $diagnosis['patient_id'],
|
||||
'record_date' => $todayStart,
|
||||
'record_time' => date('H:i'),
|
||||
'fasting_blood_sugar' => $fasting,
|
||||
'postprandial_blood_sugar' => $postprandial,
|
||||
'other_blood_sugar' => $other,
|
||||
'systolic_pressure' => $systolic,
|
||||
'diastolic_pressure' => $diastolic,
|
||||
'remark' => $remark,
|
||||
'source' => 1,
|
||||
'id' => $existing['id'],
|
||||
];
|
||||
BloodRecord::update($payload);
|
||||
return $this->success('已更新今日记录', ['id' => $existing['id']]);
|
||||
}
|
||||
|
||||
@@ -16,9 +16,10 @@ class DailyGamifyLogic
|
||||
|
||||
/** @var array<string,array{name:string,points:int}> */
|
||||
protected static array $taskDefs = [
|
||||
'blood' => ['name' => '测血糖血压', 'points' => 10],
|
||||
'diet' => ['name' => '记今日饮食', 'points' => 10],
|
||||
'exercise' => ['name' => '记今日运动', 'points' => 10],
|
||||
'glucose' => ['name' => '测血糖', 'points' => 10],
|
||||
'bp' => ['name' => '测血压', 'points' => 10],
|
||||
'diet' => ['name' => '饮食', 'points' => 10],
|
||||
'exercise' => ['name' => '运动', 'points' => 10],
|
||||
];
|
||||
|
||||
public static function getError(): string
|
||||
@@ -83,12 +84,13 @@ class DailyGamifyLogic
|
||||
->where('record_date', '<=', $end)
|
||||
->find();
|
||||
|
||||
$bloodDone = false;
|
||||
$glucoseDone = false;
|
||||
$bpDone = false;
|
||||
if ($blood) {
|
||||
$bloodDone = self::hasValue($blood['fasting_blood_sugar'] ?? null)
|
||||
$glucoseDone = self::hasValue($blood['fasting_blood_sugar'] ?? null)
|
||||
|| self::hasValue($blood['postprandial_blood_sugar'] ?? null)
|
||||
|| self::hasValue($blood['other_blood_sugar'] ?? null)
|
||||
|| self::hasValue($blood['systolic_pressure'] ?? null)
|
||||
|| self::hasValue($blood['other_blood_sugar'] ?? null);
|
||||
$bpDone = self::hasValue($blood['systolic_pressure'] ?? null)
|
||||
|| self::hasValue($blood['diastolic_pressure'] ?? null);
|
||||
}
|
||||
|
||||
@@ -118,7 +120,8 @@ class DailyGamifyLogic
|
||||
}
|
||||
|
||||
return [
|
||||
'blood' => $bloodDone,
|
||||
'glucose' => $glucoseDone,
|
||||
'bp' => $bpDone,
|
||||
'diet' => $dietDone,
|
||||
'exercise' => $exerciseDone,
|
||||
];
|
||||
@@ -141,13 +144,36 @@ class DailyGamifyLogic
|
||||
'name' => $def['name'],
|
||||
'points' => $def['points'],
|
||||
'completed' => !empty($completion[$id]),
|
||||
'claimed' => !empty($awards[$id]),
|
||||
'claimed' => self::isTaskClaimed($id, $awards, $completion),
|
||||
];
|
||||
}
|
||||
|
||||
return $list;
|
||||
}
|
||||
|
||||
/**
|
||||
* 任务是否已领取（兼容旧版 blood 合并任务）
|
||||
*
|
||||
* @param array<string,bool> $awards
|
||||
* @param array<string,bool> $completion
|
||||
*/
|
||||
protected static function isTaskClaimed(string $id, array $awards, array $completion = []): bool
|
||||
{
|
||||
if (!empty($awards[$id])) {
|
||||
return true;
|
||||
}
|
||||
// 旧版 blood 一次性领取：对应分项当日已有记录则视为已领，避免拆分后重复领奖/轮换引导
|
||||
if (!empty($awards['blood'])) {
|
||||
if ($id === 'glucose' && !empty($completion['glucose'])) {
|
||||
return true;
|
||||
}
|
||||
if ($id === 'bp' && !empty($completion['bp'])) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/** 与前端 tongji/utils/treeLevels.js 保持一致 */
|
||||
protected const TREE_MAX_LEVEL = 9;
|
||||
protected const TREE_XP_PER_LEVEL = 50;
|
||||
|
||||
Reference in New Issue
Block a user