feat: settings options open a chooser popup (select + confirm) instead of instant cycle

src/pages/index/index.ux

@@ -103,6 +103,20 @@
       <div class="dot {{currentIndex == 2 ? 'dot-active' : ''}}"></div>
     </div>
 
+    <!-- 选项选择弹窗 -->
+    <div class="popup" if="{{showOptionPicker}}">
+      <div class="popup-box">
+        <text class="popup-title">{{pickerTitle}}</text>
+        <div class="picker-option {{pickerIndex === 0 ? 'picker-active' : ''}}" if="{{pickerOptions[0]}}" onclick="pick0"><text>{{pickerOptions[0]}}</text></div>
+        <div class="picker-option {{pickerIndex === 1 ? 'picker-active' : ''}}" if="{{pickerOptions[1]}}" onclick="pick1"><text>{{pickerOptions[1]}}</text></div>
+        <div class="picker-option {{pickerIndex === 2 ? 'picker-active' : ''}}" if="{{pickerOptions[2]}}" onclick="pick2"><text>{{pickerOptions[2]}}</text></div>
+        <div class="picker-option {{pickerIndex === 3 ? 'picker-active' : ''}}" if="{{pickerOptions[3]}}" onclick="pick3"><text>{{pickerOptions[3]}}</text></div>
+        <div class="popup-actions">
+          <input class="popup-btn" type="button" value="确定" onclick="applyPicker" />
+        </div>
+      </div>
+    </div>
+
     <!-- 字体大小弹窗 -->
     <div class="popup" if="{{showFontPicker}}">
       <div class="popup-box">
@@ -204,6 +218,11 @@ export default {
     serverIdx: 0,
     serverValue: 'ws://127.0.0.1:8787',
     showFontPicker: false,
+    showOptionPicker: false,
+    pickerTitle: '',
+    pickerOptions: [],
+    pickerIndex: 0,
+    pickerTarget: '',
     fontValue: 18,
     fontLevel: 1,
     fontLabel: '中',
@@ -283,13 +302,37 @@ export default {
     this.inputText = e && e.value || ''
   },
 
-  toggleModel() { this.modelIdx = (this.modelIdx + 1) % this.modelOptions.length; this.modelValue = this.modelOptions[this.modelIdx] },
+  toggleModel() { this.openPicker('model') },
-  toggleProvider() { this.providerIdx = (this.providerIdx + 1) % this.providerOptions.length; this.providerValue = this.providerOptions[this.providerIdx] },
+  toggleProvider() { this.openPicker('provider') },
-  toggleReason() { this.reasonIdx = (this.reasonIdx + 1) % this.reasonOptions.length; this.reasonValue = this.reasonOptions[this.reasonIdx] },
+  toggleReason() { this.openPicker('reason') },
-  togglePerm() { this.permIdx = (this.permIdx + 1) % this.permOptions.length; this.permValue = this.permOptions[this.permIdx] },
+  togglePerm() { this.openPicker('perm') },
-  toggleDialog() { this.dialogIdx = (this.dialogIdx + 1) % this.dialogOptions.length; this.dialogModeValue = this.dialogOptions[this.dialogIdx] },
+  toggleDialog() { this.openPicker('dialog') },
-  toggleWatchConn() { this.connIdx = (this.connIdx + 1) % this.connOptions.length; this.watchConnValue = this.connOptions[this.connIdx] },
+  toggleWatchConn() { this.openPicker('conn') },
-  toggleServer() { this.serverIdx = (this.serverIdx + 1) % this.serverOptions.length; this.serverValue = this.serverOptions[this.serverIdx] },
+  toggleServer() { this.openPicker('server') },
+
+  openPicker(target) {
+    const titles = { model:'模型', provider:'提供方', reason:'推理强度', perm:'权限模式', dialog:'对话模式', conn:'手环连接', server:'服务器' }
+    const values = { model:'modelValue', provider:'providerValue', reason:'reasonValue', perm:'permValue', dialog:'dialogModeValue', conn:'watchConnValue', server:'serverValue' }
+    this.pickerTitle = titles[target] || '选择'
+    this.pickerTarget = target
+    this.pickerOptions = this[target + 'Options']
+    this.pickerIndex = this[target + 'Idx'] || 0
+    this.showOptionPicker = true
+  },
+
+  pick0() { this.pickerIndex = 0 },
+  pick1() { this.pickerIndex = 1 },
+  pick2() { this.pickerIndex = 2 },
+  pick3() { this.pickerIndex = 3 },
+
+  applyPicker() {
+    const t = this.pickerTarget
+    if (!t) return this.showOptionPicker = false
+    const values = { model:'modelValue', provider:'providerValue', reason:'reasonValue', perm:'permValue', dialog:'dialogModeValue', conn:'watchConnValue', server:'serverValue' }
+    this[t + 'Idx'] = this.pickerIndex
+    this[values[t]] = this.pickerOptions[this.pickerIndex]
+    this.showOptionPicker = false
+  },
 
   openFontPicker() {
     this.showFontPicker = true
@@ -804,4 +847,26 @@ export default {
   font-size: 17px;
   text-align: center;
 }
+
+.picker-option {
+  width: 260px;
+  min-height: 40px;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 6px;
+  padding: 6px 10px;
+  border-radius: 10px;
+  background-color: #152238;
+  border: 1px solid rgba(255,255,255,0.10);
+}
+
+.picker-option text {
+  color: #dbe8ff;
+  font-size: 16px;
+}
+
+.picker-active {
+  background-color: rgba(51,180,255,0.22);
+  border-color: #33b4ff;
+}
 </style>