diff --git a/src/pages/index/index.ux b/src/pages/index/index.ux index 5c2dafa..a1a4231 100644 --- a/src/pages/index/index.ux +++ b/src/pages/index/index.ux @@ -17,17 +17,13 @@
- +
- DeepSeek 余额 - ¥{{bubbleBalance}} - 今日已用 ¥{{bubbleUsage}} - {{peakLabel}} - {{bubbleText}} + {{bubbleText}}
- + {{peakLabel}} 余额 {{balance}} 今日 {{todayTokens}} tokens · 预估 ¥{{todayCost}} @@ -94,22 +90,24 @@ export default { todayCost: '--', bubbleVisible: false, bubbleText: '', - bubbleBalance: '--', - bubbleUsage: '--', - tapAnim: false, + bubbleIndex: 0, + mascotSX: 1, + mascotSY: 1, settings: { serverUrl: 'ws://127.0.0.1:8787', userId: '', token: '' }, connText: '手机/手表未连接', - lines: [ + bubblePresets: [ '我算得比你快,但没你可爱。', - '余额在跳,我也在跳,别慌。', + '上轮消耗 ¥0.08,钱包还撑得住。', '峰时了,省着点用哦~', '谷时来了,冲就完事!', '今天也要一起聪明地偷懒。', - '点我一下,解压一下。' + '点我一下,解压一下。', + '上轮余额 ¥12.34,别浪~', + '思考中…其实是发呆。' ] }, @@ -152,18 +150,21 @@ export default { }, onTap() { - // Q 弹:先上下压缩,再平滑回弹;回弹时放音效 - this.tapAnim = true + // Q 弹:压扁 -> 回弹过冲 -> 回正(多帧驱动,不依赖 CSS transition) const self = this - setTimeout(() => { self.tapAnim = false }, 150) - setTimeout(() => { playDuckSound() }, 150) + this.mascotSX = 1.00 + this.mascotSY = 1.00 + setTimeout(() => { self.mascotSX = 1.06; self.mascotSY = 0.84 }, 0) + setTimeout(() => { self.mascotSX = 0.98; self.mascotSY = 1.06 }, 60) + setTimeout(() => { self.mascotSX = 1.00; self.mascotSY = 1.00 }, 120) + // 回弹时播鸭叫 + setTimeout(() => { playDuckSound() }, 120) - const idx = Math.floor(Math.random() * this.lines.length) - const mode = this.isPeak ? '当前是峰时,钱包瑟瑟发抖' : '当前是谷时,薅羊毛好时机' - this.bubbleText = this.lines[idx] + ' | ' + mode - this.bubbleBalance = this.balance - this.bubbleUsage = this.todayCost - this.bubbleVisible = !this.bubbleVisible + // 轮播趣味/上轮消耗信息 + const idx = this.bubbleIndex % this.bubblePresets.length + this.bubbleIndex += 1 + this.bubbleText = this.bubblePresets[idx] + this.bubbleVisible = true }, selectSession(index) { @@ -267,10 +268,6 @@ export default { transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1); } -.mascot-tap { - transform: scale(1.05, 0.86); -} - .peak { font-size: 22px; font-weight: bold; @@ -300,46 +297,12 @@ export default { background-color: #ffffff; } -.bubble-title { - color: #5b6b8c; - font-size: 13px; - text-align: center; -} - -.bubble-balance { +.bubble-text { color: #1c2c47; - font-size: 28px; - font-weight: bold; + font-size: 15px; text-align: center; } -.bubble-usage { - color: #5b6b8c; - font-size: 12px; - text-align: center; -} - -.bubble-mode { - font-size: 13px; - font-weight: bold; - text-align: center; -} - -.bubble-mode-peak { - color: #ff5b5b; -} - -.bubble-mode-off { - color: #1f9e5a; -} - -.bubble-fun { - color: #1c2c47; - font-size: 12px; - text-align: center; - margin-top: 4px; -} - .setting-label { color: #8fa4c9; font-size: 14px;