feat: single-mascot main page — no buttons, tap bubble + bounce + peak/off-peak pricing, balance/usage
This commit is contained in:
+82
-246
@@ -1,138 +1,74 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<swiper class="swiper" index="{{currentIndex}}" indicator="false" loop="false"
|
||||
previousmargin="14px" nextmargin="14px" onchange="onSwipeChange">
|
||||
<!-- 左页：会话 -->
|
||||
<div class="page-item left-page">
|
||||
<text class="page-title">会话</text>
|
||||
<div class="session-list">
|
||||
<div class="session-row" for="{{sessions}}" onclick="selectSession($index)">
|
||||
<text class="session-title">{{$item.title}}</text>
|
||||
<text class="session-dot" if="{{$item.running}}">●</text>
|
||||
</div>
|
||||
</div>
|
||||
<text class="page-hint" if="{{!sessions.length}}">暂无会话</text>
|
||||
</div>
|
||||
<!-- 吉祥物：唯一主体，点击互动 -->
|
||||
<image class="mascot {{tapAnim ? 'mascot-bounce' : ''}}" src="/common/dsniang.png" onclick="onTap" />
|
||||
|
||||
<!-- 中页：主页 / 吉祥物 -->
|
||||
<div class="page-item center-page">
|
||||
<image class="mascot" src="/common/dsniang.png" onclick="openDetail" />
|
||||
<text class="status-text">{{statusText}}</text>
|
||||
<text class="session-hint">{{activeTitle}}</text>
|
||||
<div class="center-actions">
|
||||
<input class="btn" type="button" value="输入" onclick="openInput" />
|
||||
<input class="btn btn-ghost" type="button" value="详情" onclick="openDetail" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 峰谷实时指示（绿色谷时 / 红色峰时） -->
|
||||
<text class="peak {{isPeak ? 'peak-red' : 'peak-green'}}">{{peakLabel}}</text>
|
||||
|
||||
<!-- 右页：设置 -->
|
||||
<div class="page-item right-page">
|
||||
<text class="page-title">设置</text>
|
||||
<text class="setting-label">服务器</text>
|
||||
<input class="setting-input" type="text" value="{{settings.serverUrl}}" onchange="onServerChange" />
|
||||
<text class="setting-label">用户ID</text>
|
||||
<input class="setting-input" type="text" value="{{settings.userId}}" onchange="onUserChange" />
|
||||
<text class="setting-label">Token</text>
|
||||
<input class="setting-input" type="text" value="{{settings.token}}" onchange="onTokenChange" />
|
||||
<text class="conn-text">{{connText}}</text>
|
||||
<input class="btn" type="button" value="连接状态" onclick="refreshConn" />
|
||||
<input class="btn btn-ghost" type="button" value="更多设置" onclick="openSettings" />
|
||||
</div>
|
||||
</swiper>
|
||||
<!-- Token 使用统计 / 余额 -->
|
||||
<text class="stats">余额 {{balance}}</text>
|
||||
<text class="stats">今日 {{todayTokens}} tokens · 预估 ¥{{todayCost}}</text>
|
||||
|
||||
<div class="dots">
|
||||
<div class="dot {{currentIndex == 0 ? 'dot-active' : ''}}"></div>
|
||||
<div class="dot {{currentIndex == 1 ? 'dot-active' : ''}}"></div>
|
||||
<div class="dot {{currentIndex == 2 ? 'dot-active' : ''}}"></div>
|
||||
<!-- 点击吉祥物弹出的“对话小框”（类 DSH 挂件气泡） -->
|
||||
<div class="bubble" if="{{bubbleVisible}}">
|
||||
<text class="bubble-text">{{bubbleText}}</text>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import router from '@system.router'
|
||||
import bridge from '../../common/bridge.js'
|
||||
|
||||
export default {
|
||||
private: {
|
||||
currentIndex: 1,
|
||||
sessions: [],
|
||||
statusText: '加载中…',
|
||||
activeTitle: 'DSHWatch 初始化中…',
|
||||
settings: {
|
||||
serverUrl: 'ws://127.0.0.1:8787',
|
||||
userId: '',
|
||||
token: ''
|
||||
},
|
||||
connText: '正在连接…'
|
||||
isPeak: false,
|
||||
peakLabel: '谷时 · 半价',
|
||||
balance: '--',
|
||||
todayTokens: '--',
|
||||
todayCost: '--',
|
||||
bubbleVisible: false,
|
||||
bubbleText: '',
|
||||
tapAnim: false,
|
||||
lines: [
|
||||
'我算得比你快，但没你可爱。',
|
||||
'余额在跳，我也在跳，别慌。',
|
||||
'峰时了，省着点用哦～',
|
||||
'谷时来了，冲就完事！',
|
||||
'今天也要一起聪明地偷懒。',
|
||||
'点我一下，解压一下。'
|
||||
]
|
||||
},
|
||||
|
||||
onInit() {
|
||||
// 空壳：仅预留
|
||||
this.refreshPeak()
|
||||
},
|
||||
|
||||
onReady() {
|
||||
this._unsub = bridge.subscribe({
|
||||
status: (s) => {
|
||||
this.statusText = s
|
||||
this.connText = s
|
||||
},
|
||||
message: (msg) => {
|
||||
this.handleBridgeMessage(msg)
|
||||
}
|
||||
})
|
||||
bridge.refreshConn()
|
||||
// 后续接服务器时在这里拉余额/用量
|
||||
},
|
||||
|
||||
onDestroy() {
|
||||
if (this._unsub) this._unsub()
|
||||
refreshPeak() {
|
||||
// 用北京时间计算峰谷；周六/周日全天谷时
|
||||
const now = Date.now()
|
||||
const d = new Date(now + 8 * 3600 * 1000)
|
||||
const day = d.getUTCDay() // 0=Sun
|
||||
const hour = d.getUTCHours()
|
||||
const isWeekend = day === 0 || day === 6
|
||||
const inPeak = !isWeekend && ((hour >= 9 && hour < 12) || (hour >= 14 && hour < 18))
|
||||
this.isPeak = inPeak
|
||||
this.peakLabel = inPeak ? '峰时 · 全价' : '谷时 · 半价'
|
||||
},
|
||||
|
||||
onSwipeChange(e) {
|
||||
if (e && typeof e.index === 'number') {
|
||||
this.currentIndex = e.index
|
||||
}
|
||||
},
|
||||
onTap() {
|
||||
// Q 弹互动
|
||||
this.tapAnim = true
|
||||
const self = this
|
||||
setTimeout(() => { self.tapAnim = false }, 400)
|
||||
|
||||
goTo(index) {
|
||||
// index 属性绑定已驱动 swiper 切换；此处主要同步 data
|
||||
this.currentIndex = index
|
||||
},
|
||||
|
||||
selectSession(index) {
|
||||
const item = this.sessions[index]
|
||||
if (item) {
|
||||
this.activeTitle = '会话 ' + item.title
|
||||
this.goTo(1)
|
||||
}
|
||||
},
|
||||
|
||||
openDetail() {
|
||||
router.push({ uri: '/pages/detail' })
|
||||
},
|
||||
|
||||
openInput() {
|
||||
router.push({ uri: '/pages/input' })
|
||||
},
|
||||
|
||||
openSettings() {
|
||||
router.push({ uri: '/pages/settings' })
|
||||
},
|
||||
|
||||
onServerChange(e) { this.settings.serverUrl = e && e.value || '' },
|
||||
onUserChange(e) { this.settings.userId = e && e.value || '' },
|
||||
onTokenChange(e) { this.settings.token = e && e.value || '' },
|
||||
|
||||
refreshConn() {
|
||||
bridge.refreshConn()
|
||||
},
|
||||
|
||||
handleBridgeMessage(msg) {
|
||||
// 空壳：按 PROTOCOL.md 处理手机下发的 status/event 等
|
||||
if (msg && msg.type === 'status' && msg.payload) {
|
||||
this.statusText = msg.payload.statusText || this.statusText
|
||||
this.activeTitle = msg.payload.activeTitle || this.activeTitle
|
||||
if (msg.payload.sessions) this.sessions = msg.payload.sessions
|
||||
}
|
||||
// 对话小框：显示一句幽默文案 + 峰谷信息
|
||||
const idx = Math.floor(Math.random() * this.lines.length)
|
||||
const mode = this.isPeak ? '当前是峰时，钱包瑟瑟发抖' : '当前是谷时，薅羊毛好时机'
|
||||
this.bubbleText = this.lines[idx] + ' ｜ ' + mode
|
||||
this.bubbleVisible = !this.bubbleVisible
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -142,154 +78,54 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #0b1220;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
indicator-size: 0px;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.left-page,
|
||||
.right-page {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.center-page {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
color: #e6f0ff;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.page-hint {
|
||||
color: #6b7a99;
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.session-list {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.session-row {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
background-color: #152238;
|
||||
}
|
||||
|
||||
.session-title {
|
||||
color: #dbe8ff;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.session-dot {
|
||||
color: #33b4ff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mascot {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: #e6f0ff;
|
||||
.mascot-bounce {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.peak {
|
||||
font-size: 18px;
|
||||
margin-top: 14px;
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.session-hint {
|
||||
color: #7d8fb0;
|
||||
.peak-green {
|
||||
color: #3ddc84;
|
||||
}
|
||||
|
||||
.peak-red {
|
||||
color: #ff5b5b;
|
||||
}
|
||||
|
||||
.stats {
|
||||
color: #9fb0d0;
|
||||
font-size: 14px;
|
||||
margin-top: 4px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.center-actions {
|
||||
flex-direction: row;
|
||||
margin-top: 18px;
|
||||
gap: 12px;
|
||||
.bubble {
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
left: 50%;
|
||||
margin-left: -110px;
|
||||
width: 220px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 14px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: #33b4ff;
|
||||
color: #08131f;
|
||||
font-size: 16px;
|
||||
.bubble-text {
|
||||
color: #0b1220;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background-color: #1c2c47;
|
||||
color: #dbe8ff;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
color: #8fa4c9;
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.setting-input {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
border-radius: 8px;
|
||||
background-color: #152238;
|
||||
color: #e6f0ff;
|
||||
font-size: 15px;
|
||||
padding: 0 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.conn-text {
|
||||
color: #6b7a99;
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.dots {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 14px;
|
||||
margin-top: 4px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
.dot-active {
|
||||
width: 22px;
|
||||
border-radius: 4px;
|
||||
background-color: #33b4ff;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user