From 52a224e070aebe873ba3c5d053948144f973ac38 Mon Sep 17 00:00:00 2001
From: jiangchen <1703935164@qq.com>
Date: Tue, 1 Sep 2026 22:25:16 +0800
Subject: [PATCH] feat: font-size setting with slider popup; text/rows/inputs
 scale adaptively

---
 src/pages/index/index.ux | 134 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 117 insertions(+), 17 deletions(-)

diff --git a/src/pages/index/index.ux b/src/pages/index/index.ux
index 8e0f0fc..2cb4ded 100644
--- a/src/pages/index/index.ux
+++ b/src/pages/index/index.ux
@@ -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>