feat: keyboard zh/en switch (common chars grid) + tap blank to close

src/pages/index/index.ux

@@ -120,31 +120,35 @@
       <div class="dot {{currentIndex == 3 ? 'dot-active' : ''}}"></div>
     </div>
 
-    <!-- 软键盘弹层：输入框上移、键盘贴底 -->
+    <!-- 软键盘弹层：点空白收起；中/英切换；汉字为常用字（非预置句） -->
+    <div class="kb-backdrop" if="{{showKeyboard}}" onclick="kbClose"></div>
     <div class="keyboard" if="{{showKeyboard}}">
       <div class="kb-input">
         <text class="kb-text">{{inputText}}</text>
       </div>
       <div class="kb-keys">
-        <div class="kb-row">
+        <!-- 英文模式 -->
+        <div class="kb-row" if="{{kbMode === 'en'}}">
           <text class="kb-key" onclick="kbKey('q')">q</text><text class="kb-key" onclick="kbKey('w')">w</text><text class="kb-key" onclick="kbKey('e')">e</text><text class="kb-key" onclick="kbKey('r')">r</text><text class="kb-key" onclick="kbKey('t')">t</text><text class="kb-key" onclick="kbKey('y')">y</text><text class="kb-key" onclick="kbKey('u')">u</text><text class="kb-key" onclick="kbKey('i')">i</text><text class="kb-key" onclick="kbKey('o')">o</text><text class="kb-key" onclick="kbKey('p')">p</text>
         </div>
-        <div class="kb-row">
+        <div class="kb-row" if="{{kbMode === 'en'}}">
           <text class="kb-key" onclick="kbKey('a')">a</text><text class="kb-key" onclick="kbKey('s')">s</text><text class="kb-key" onclick="kbKey('d')">d</text><text class="kb-key" onclick="kbKey('f')">f</text><text class="kb-key" onclick="kbKey('g')">g</text><text class="kb-key" onclick="kbKey('h')">h</text><text class="kb-key" onclick="kbKey('j')">j</text><text class="kb-key" onclick="kbKey('k')">k</text><text class="kb-key" onclick="kbKey('l')">l</text>
         </div>
-        <div class="kb-row">
+        <div class="kb-row" if="{{kbMode === 'en'}}">
           <text class="kb-key" onclick="kbKey('z')">z</text><text class="kb-key" onclick="kbKey('x')">x</text><text class="kb-key" onclick="kbKey('c')">c</text><text class="kb-key" onclick="kbKey('v')">v</text><text class="kb-key" onclick="kbKey('b')">b</text><text class="kb-key" onclick="kbKey('n')">n</text><text class="kb-key" onclick="kbKey('m')">m</text>
         </div>
-        <div class="kb-row">
+        <div class="kb-row" if="{{kbMode === 'en'}}">
           <text class="kb-key" onclick="kbKey('1')">1</text><text class="kb-key" onclick="kbKey('2')">2</text><text class="kb-key" onclick="kbKey('3')">3</text><text class="kb-key" onclick="kbKey('4')">4</text><text class="kb-key" onclick="kbKey('5')">5</text><text class="kb-key" onclick="kbKey('6')">6</text><text class="kb-key" onclick="kbKey('7')">7</text><text class="kb-key" onclick="kbKey('8')">8</text><text class="kb-key" onclick="kbKey('9')">9</text><text class="kb-key" onclick="kbKey('0')">0</text>
         </div>
-        <div class="kb-row">
+        <!-- 中文常用字模式 -->
-          <text class="kb-key kb-phrase" onclick="kbPhrase('帮我看看任务')">帮我看看任务</text>
+        <div class="kb-row" if="{{kbMode === 'zh'}}">
-          <text class="kb-key kb-phrase" onclick="kbPhrase('总结一下')">总结一下</text>
+          <text class="kb-key kb-char" onclick="kbChar('一')">一</text><text class="kb-key kb-char" onclick="kbChar('的')">的</text><text class="kb-key kb-char" onclick="kbChar('是')">是</text><text class="kb-key kb-char" onclick="kbChar('了')">了</text><text class="kb-key kb-char" onclick="kbChar('我')">我</text><text class="kb-key kb-char" onclick="kbChar('不')">不</text><text class="kb-key kb-char" onclick="kbChar('人')">人</text><text class="kb-key kb-char" onclick="kbChar('在')">在</text><text class="kb-key kb-char" onclick="kbChar('他')">他</text><text class="kb-key kb-char" onclick="kbChar('有')">有</text>
-          <text class="kb-key kb-phrase" onclick="kbPhrase('停止')">停止</text>
+        </div>
-          <text class="kb-key kb-phrase" onclick="kbPhrase('继续')">继续</text>
+        <div class="kb-row" if="{{kbMode === 'zh'}}">
+          <text class="kb-key kb-char" onclick="kbChar('这')">这</text><text class="kb-key kb-char" onclick="kbChar('中')">中</text><text class="kb-key kb-char" onclick="kbChar('大')">大</text><text class="kb-key kb-char" onclick="kbChar('为')">为</text><text class="kb-key kb-char" onclick="kbChar('上')">上</text><text class="kb-key kb-char" onclick="kbChar('国')">国</text><text class="kb-key kb-char" onclick="kbChar('个')">个</text><text class="kb-key kb-char" onclick="kbChar('到')">到</text><text class="kb-key kb-char" onclick="kbChar('说')">说</text><text class="kb-key kb-char" onclick="kbChar('们')">们</text>
         </div>
         <div class="kb-row">
+          <text class="kb-key kb-fn" onclick="kbToggleZh">{{kbMode === 'en' ? '中' : 'Abc'}}</text>
           <text class="kb-key kb-fn" onclick="kbSpace">空格</text>
           <text class="kb-key kb-fn" onclick="kbBack">退格</text>
           <text class="kb-key kb-fn" onclick="kbClose">收起</text>
@@ -281,6 +285,7 @@ export default {
     serverValue: 'ws://127.0.0.1:8787',
     showFontPicker: false,
     showKeyboard: false,
+    kbMode: 'en',
     showOptionPicker: false,
     pickerTitle: '',
     pickerOptions: [],
@@ -394,6 +399,14 @@ export default {
     this.inputText = (this.inputText + ph).slice(0, 80)
   },
 
+  kbChar(ch) {
+    this.inputText = (this.inputText + ch).slice(0, 80)
+  },
+
+  kbToggleZh() {
+    this.kbMode = this.kbMode === 'en' ? 'zh' : 'en'
+  },
+
   kbSpace() {
     this.inputText = (this.inputText + ' ').slice(0, 80)
   },
@@ -1032,11 +1045,21 @@ export default {
   font-size: 17px;
 }
 
+.kb-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.35);
+}
+
 .kb-keys {
   width: 100%;
   flex-direction: column;
 }
 
+
 .kb-row {
   width: 100%;
   flex-direction: row;
@@ -1061,6 +1084,11 @@ export default {
   width: 64px;
 }
 
+.kb-char {
+  width: 30px;
+  font-size: 16px;
+}
+
 .kb-phrase {
   width: auto;
   min-width: 56px;
@@ -1072,19 +1100,43 @@ export default {
   color: #08131f;
 }
 
+.new-session {
+  width: 100%;
+  height: 42px;
+  margin-top: 6px;
+  margin-bottom: 8px;
+  border-radius: 21px;
+  background-color: rgba(51,180,255,0.16);
+  border: 1px solid rgba(120,200,255,0.28);
+  color: #e6f0ff;
+  font-size: 16px;
+}
+
+.page-title.small {
+  font-size: 16px;
+  color: #9db3d8;
+  margin-top: 6px;
+  margin-bottom: 2px;
+}
+
+.ws-group {
+  width: 100%;
+  flex-direction: column;
+}
+
 .ws-name {
   color: #9db3d8;
-  font-size: 15px;
+  font-size: 16px;
   font-weight: bold;
-  margin-top: 10px;
+  margin-top: 8px;
   margin-bottom: 4px;
 }
 
 .sel-conv {
   width: 100%;
-  min-height: 40px;
+  min-height: 42px;
   flex-direction: row;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
   padding: 6px 10px;
   border-radius: 10px;
@@ -1092,8 +1144,19 @@ export default {
   margin-bottom: 6px;
 }
 
-.sel-conv text {
+.sel-title {
   color: #e6f0ff;
   font-size: 16px;
+  flex: 1;
+}
+
+.sel-time {
+  color: #8895ad;
+  font-size: 13px;
+}
+
+.sel-active {
+  background-color: rgba(51,180,255,0.22);
+  border: 1px solid #33b4ff;
 }
 </style>