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

feat: chat bubble glass-blue/right + gray/left + margins; soft keyboard overlay (box moves up, keys at bottom)

Browse Source
This commit is contained in:
jiangchen
2026-09-01 22:55:40 +08:00
parent 66d364f6ff
commit 903e302b59
1 changed files with 125 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index/index.ux
+125 -8
View File
@@ -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>