From 903e302b591baf383930cb50941b87bf96352529 Mon Sep 17 00:00:00 2001
From: jiangchen <1703935164@qq.com>
Date: Tue, 1 Sep 2026 22:55:40 +0800
Subject: [PATCH] feat: chat bubble glass-blue/right + gray/left + margins;
 soft keyboard overlay (box moves up, keys at bottom)

---
 src/pages/index/index.ux | 133 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 125 insertions(+), 8 deletions(-)

diff --git a/src/pages/index/index.ux b/src/pages/index/index.ux
index db9ff50..de05b38 100644
--- a/src/pages/index/index.ux
+++ b/src/pages/index/index.ux
@@ -38,7 +38,7 @@
 
         <!-- 底部输入栏 -->
         <div class="input-bar">
-          <input class="input-field" type="text" value="{{inputText}}" placeholder="说点什么…" onchange="onInputChange" />
+          <input class="input-field" type="text" value="{{inputText}}" placeholder="说点什么…" onclick="openInput" />
           <input class="input-send" type="button" value="输入" onclick="openInput" />
         </div>
       </div>
@@ -103,6 +103,30 @@
       <div class="dot {{currentIndex == 2 ? 'dot-active' : ''}}"></div>
     </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">
+          <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">
+          <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">
+          <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">
+          <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>
+          <text class="kb-key kb-fn kb-send" onclick="kbSend">发送</text>
+        </div>
+      </div>
+    </div>
+
     <!-- 选项选择弹窗 -->
     <div class="popup" if="{{showOptionPicker}}">
       <div class="popup-box">
@@ -218,6 +242,7 @@ export default {
     serverIdx: 0,
     serverValue: 'ws://127.0.0.1:8787',
     showFontPicker: false,
+    showKeyboard: false,
     showOptionPicker: false,
     pickerTitle: '',
     pickerOptions: [],
@@ -294,8 +319,31 @@ export default {
   },
 
   openInput() {
-    // 占位：后续调用官方输入法组件
+    this.showKeyboard = true
+  },
+
+  kbKey(ch) {
+    this.inputText = (this.inputText + ch).slice(0, 80)
+  },
+
+  kbSpace() {
+    this.inputText = (this.inputText + ' ').slice(0, 80)
+  },
+
+  kbBack() {
+    this.inputText = this.inputText.slice(0, -1)
+  },
+
+  kbClose() {
+    this.showKeyboard = false
+  },
+
+  kbSend() {
+    if (this.inputText.trim().length > 0) {
+      bridge.sendText(this.inputText.trim())
+    }
     this.inputText = ''
+    this.showKeyboard = false
   },
 
   onInputChange(e) {
@@ -609,6 +657,7 @@ export default {
   flex: 1;
   width: 100%;
   flex-direction: column;
+  align-items: flex-start;
 }
 
 .chat-img {
@@ -619,20 +668,26 @@ export default {
 }
 
 .chat-msg {
-  width: 100%;
+  width: auto;
+  max-width: 84%;
   flex-direction: column;
   margin-bottom: 6px;
-  padding: 7px 9px;
-  border-radius: 10px;
+  padding: 7px 10px;
+  border-radius: 12px;
 }
 
 .msg-user {
-  background-color: rgba(51, 180, 255, 0.18);
-  border: 1px solid rgba(120, 200, 255, 0.28);
+  align-self: flex-end;
+  margin-right: 12px;
+  background-color: rgba(51, 180, 255, 0.20);
+  border: 1px solid rgba(120, 200, 255, 0.30);
 }
 
 .msg-assistant {
-  background-color: rgba(22, 34, 56, 0.58);
+  align-self: flex-start;
+  margin-left: 12px;
+  margin-right: 12px;
+  background-color: rgba(58, 62, 70, 0.55);
   border: 1px solid rgba(255, 255, 255, 0.10);
 }
 
@@ -869,4 +924,66 @@ export default {
   background-color: rgba(51,180,255,0.22);
   border-color: #33b4ff;
 }
+
+/* ===== 软键盘 ===== */
+.keyboard {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  flex-direction: column;
+  background-color: rgba(11, 18, 32, 0.97);
+  border-top: 1px solid rgba(255,255,255,0.14);
+  padding: 10px;
+}
+
+.kb-input {
+  width: 100%;
+  min-height: 48px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  background-color: #152238;
+  margin-bottom: 10px;
+  padding: 6px;
+}
+
+.kb-text {
+  color: #e6f0ff;
+  font-size: 17px;
+}
+
+.kb-keys {
+  width: 100%;
+  flex-direction: column;
+}
+
+.kb-row {
+  width: 100%;
+  flex-direction: row;
+  justify-content: center;
+  margin-bottom: 6px;
+}
+
+.kb-key {
+  width: 34px;
+  height: 40px;
+  margin: 0 2px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  background-color: #1c2c47;
+  color: #e6f0ff;
+  font-size: 16px;
+  text-align: center;
+}
+
+.kb-fn {
+  width: 64px;
+}
+
+.kb-send {
+  background-color: #33b4ff;
+  color: #08131f;
+}
 </style>