jiangchen/DSHWatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: font-size setting with slider popup; text/rows/inputs scale adaptively

Browse Source
This commit is contained in:
jiangchen
2026-09-01 22:25:16 +08:00
parent c85beaa1cb
commit 52a224e070
1 changed files with 117 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index/index.ux
+117 -17
View File
@@ -24,8 +24,8 @@
<div class="think-chip" if="{{$item.think}}" onclick="toggleThink($index)">
<text>💭 思考…</text>
</div>
<text class="think-text" if="{{$item.showThink}}">{{$item.think}}</text>
<text class="chat-text">{{$item.collapsed ? $item.preview : $item.text}}</text>
<text class="think-text fl{{fontLevel}}" if="{{$item.showThink}}">{{$item.think}}</text>
<text class="chat-text fl{{fontLevel}}">{{$item.collapsed ? $item.preview : $item.text}}</text>
<text class="expand-chip" if="{{$item.collapsed}}" onclick="toggleCollapse($index)">展开 ▾</text>
<text class="expand-chip" if="{{!$item.collapsed}}" onclick="toggleCollapse($index)">收起 ▴</text>
<div class="approve-box" if="{{$item.kind === 'approval'}}">
@@ -60,13 +60,13 @@
<div class="page-item right-page">
<text class="page-title">设置</text>
<div class="setting-row" for="{{settingsList}}" onclick="toggleSetting($index)">
<text class="setting-label">{{$item.label}}</text>
<text class="setting-value">{{$item.value}}</text>
<text class="setting-label fl{{fontLevel}}">{{$item.label}}</text>
<text class="setting-value fl{{fontLevel}}">{{$item.value}}</text>
</div>
<text class="section-title">手表端设置</text>
<text class="section-title fl{{fontLevel}}">手表端设置</text>
<div class="setting-row" for="{{watchSettings}}" onclick="toggleSetting($index)">
<text class="setting-label">{{$item.label}}</text>
<text class="setting-value">{{$item.value}}</text>
<text class="setting-label fl{{fontLevel}}">{{$item.label}}</text>
<text class="setting-value fl{{fontLevel}}">{{$item.value}}</text>
</div>
<text class="conn-text">{{connText}}</text>
</div>
@@ -77,6 +77,18 @@
<div class="dot {{currentIndex == 1 ? 'dot-active' : ''}}"></div>
<div class="dot {{currentIndex == 2 ? 'dot-active' : ''}}"></div>
</div>
<!-- 字体大小弹窗 -->
<div class="popup" if="{{showFontPicker}}">
<div class="popup-box">
<text class="popup-title">字体大小</text>
<slider class="font-slider" min="14" max="22" step="2" value="{{fontValue}}" onchange="onFontChange" />
<text class="popup-value">{{fontLabel}}</text>
<div class="popup-actions">
<input class="popup-btn" type="button" value="确定" onclick="confirmFont" />
</div>
</div>
</div>
</div>
</template>
@@ -150,8 +162,13 @@ export default {
watchSettings: [
{ label:'手环连接', value:'未连接（占位）' },
{ label:'服务器', value:'ws://127.0.0.1:8787' },
{ label:'用户ID', value:'--' }
{ label:'用户ID', value:'--' },
{ label:'字体大小', value:'中' }
],
showFontPicker: false,
fontValue: 18,
fontLevel: 1,
fontLabel: '中',
bubblePresets: [
'我算得比你快，但没你可爱。',
'上轮消耗 ¥0.08，钱包还撑得住。',
@@ -231,9 +248,30 @@ export default {
toggleSetting(index) {
const all = [...this.settingsList, ...this.watchSettings]
const row = all[index]
if (row && row.label === '字体大小') { this.openFontPicker(); return }
if (row) row.value += ' ·'
},
openFontPicker() {
this.showFontPicker = true
this.fontValue = 18
},
onFontChange(e) {
if (e && typeof e.value === 'number') {
this.fontValue = e.value
}
const lv = Math.round((this.fontValue - 14) / 4)
this.fontLevel = Math.max(0, Math.min(2, lv))
this.fontLabel = ['小', '中', '大'][this.fontLevel]
},
confirmFont() {
this.showFontPicker = false
const row = this.watchSettings.find((r) => r.label === '字体大小')
if (row) row.value = this.fontLabel
},
refreshPeak() {
// 用北京时间计算峰谷；周六/周日全天谷时
const now = Date.now()
@@ -567,21 +605,23 @@ export default {
.input-field {
flex: 1;
height: 36px;
min-height: 38px;
height: auto;
border-radius: 8px;
background-color: #152238;
color: #e6f0ff;
font-size: 14px;
padding: 0 8px;
font-size: 15px;
padding: 6px 8px;
}
.input-send {
width: 64px;
height: 36px;
border-radius: 18px;
width: 72px;
min-height: 38px;
height: auto;
border-radius: 19px;
background-color: #33b4ff;
color: #08131f;
font-size: 15px;
font-size: 16px;
text-align: center;
}
@@ -618,11 +658,12 @@ export default {
/* ===== 右页：设置 ===== */
.setting-row {
width: 100%;
height: 44px;
min-height: 44px;
height: auto;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 10px;
padding: 6px 10px;
border-radius: 10px;
background-color: #152238;
margin-bottom: 6px;
@@ -645,4 +686,63 @@ export default {
margin-top: 10px;
margin-bottom: 6px;
}
/* ===== 字体等级（随字号滑块变化） ===== */
.fl0 { font-size: 15px; line-height: 21px; }
.fl1 { font-size: 17px; line-height: 25px; }
.fl2 { font-size: 19px; line-height: 28px; }
/* ===== 字体大小弹窗 ===== */
.popup {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
}
.popup-box {
width: 300px;
min-height: 180px;
flex-direction: column;
align-items: center;
padding: 20px;
border-radius: 18px;
background-color: #0f1a2c;
border: 1px solid rgba(255, 255, 255, 0.14);
}
.popup-title {
color: #e6f0ff;
font-size: 20px;
font-weight: bold;
}
.font-slider {
width: 240px;
margin-top: 14px;
}
.popup-value {
color: #33b4ff;
font-size: 18px;
margin-top: 10px;
}
.popup-actions {
margin-top: 14px;
}
.popup-btn {
width: 120px;
height: 42px;
border-radius: 21px;
background-color: #33b4ff;
color: #08131f;
font-size: 17px;
text-align: center;
}
</style>