fix(输入法): 消除RTOS和Android文字键盘间距

2026-11-14 17:38:11 +08:00
@@ -2,7 +2,9 @@

 **蟹蟹输入 RTOS适配改版**：基于CrabKeyboard的独立改版，RTOS适配代码采用[MIT协议](./LICENSE)，允许商用、修改及再分发，须保留版权与许可。上游与第三方署名见[NOTICE.md](./NOTICE.md)。公开源码：<https://git2.sydxky.cn/sydxky/crab-input-rtos>；免注册[匿名反馈](https://git2.sydxky.cn/feedback/sydxky/crab-input-rtos)。

-独立应用 `com.sydxky.rtos.inputmethod`，版本 `1.2.0 / 10200`。基于 [CrabKeyboard](https://github.com/crabPangXie/crabKeyboard) 的 MIT 全量词库和拼音前缀消费方式，重写为 Glyphix `.ux` 页面；不依赖 HarmonyOS HML、Android 输入法服务、DOM 或网络。
+独立应用 `com.sydxky.rtos.inputmethod`，版本 `1.2.2 / 10202`。基于 [CrabKeyboard](https://github.com/crabPangXie/crabKeyboard) 的 MIT 全量词库和拼音前缀消费方式，重写为 Glyphix `.ux` 页面；不依赖 HarmonyOS HML、Android 输入法服务、DOM 或网络。
+
+1.2.2 修复文字与键盘之间的多余空隙，圆屏按键上移后同步检查安全边界；本版验证范围见[间距修复验收](./VALIDATION_1.2.2.md)。

 1.2.0 完整候选重做为 **4×4 网格**：单字每页16个，2～4字词组占两格，长词占整行并可增加行高；保持原有顺序，最后一页可达，不显示候选拼音。圆/方普通及QuickApp四配置已通过84项原生操作、84项布局及48个视觉状态，见[验收记录](./VALIDATION_1.2.0.md)。同源新增[Android应用内键盘组件](../android/README.md)，独立包名、无需联网，接入应用的输入框自动弹出，保持系统默认输入法。

@@ -0,0 +1,11 @@
+# 蟹蟹输入 RTOS 1.2.2 间距修复
+
+2026-11-14，包名 `com.sydxky.rtos.inputmethod`，版本 `1.2.2 / 10202`。
+
+键盘主体从纵向居中改为紧接文字与编码区排列，完整候选从上方开始排列。保留可见的中文/符号候选栏；英文、数字模式不预留候选栏，也不把剩余高度分配到文字与键盘之间。圆屏按键区宽度由376调到368逻辑像素，避免上移后英文首排边角越出圆形安全边界；工具页按钮减少1逻辑像素高度，消除末排在父容器内的轻微裁切。
+
+使用厂商 `gx v0.10.1 / 3ed38835`、8192 KiB内存。44项引擎与32项UX脚本断言通过，圆/方普通及QuickApp四配置构建通过。当前普通圆屏和方屏共24个原生视觉状态通过，包括九宫、全拼、14键、英文、数字、两组符号、候选与工具页；新增控件树间距检查，英文/数字编码区到按键区实际为0像素。逐层父容器裁切、圆屏安全边界与背景边缘检查通过。
+
+QuickApp原生视觉检查遇到已有其他应用占用Inspector端口，未接管或终止其他进程；本次不将四配置构建等同于四配置全部原生验收。没有重跑1.2.0的84项原生交互测试，历史结果不冒充本版验收。
+
+RTOS真机、长期性能/功耗与平台审核未验收。Android独立记录见其 `VALIDATION_1.2.2.md`。
@@ -14,7 +14,7 @@ if(fs.existsSync(oldMeta)){
  if(!current.includes(name)&&fs.existsSync(old))fs.unlinkSync(old)
 }
 }
-for(const relative of ['keyboard/index.ux','common/ime-engine.js','common/ime-lifecycle.js','assets/ime-dict','assets/ime-icons']){
+for(const relative of ['keyboard/index.ux','common/ime-engine.js','common/ime-lifecycle.js','common/ime-theme.js','assets/ime-dict','assets/ime-icons']){
 const destination=path.join(target,'src',relative);fs.mkdirSync(path.dirname(destination),{recursive:true});fs.cpSync(path.join(app,'src',relative),destination,{recursive:true})
 }
 const license=path.join(target,'src/assets/crab-keyboard-license.txt')
@@ -0,0 +1,23 @@
+// Shared app/keyboard colors. Dark colors match Android Wrist Star Chat.
+export function normalizeTheme(value) { return value === 'blackgreen' ? 'blackgreen' : 'bluewhite' }
+export function themeStyles(value) {
+  const dark = normalizeTheme(value) === 'blackgreen'
+  const c = dark
+    ? {bg:'#000000',card:'#1C1C1E',raised:'#2C2C2E',text:'#F2F7FA',muted:'#B3B3B8',dim:'#A0A0A7',accent:'#00C777',user:'#0E5C44',line:'#3C3C40',danger:'#FF6978'}
+    : {bg:'#ECEEF2',card:'#FFFFFF',raised:'#F8F9FB',text:'#20232B',muted:'#737984',dim:'#737984',accent:'#2867D9',user:'#2867D9',line:'#D9DDE4',danger:'#B5424C'}
+  const ink='color:'+c.text+';',muted='color:'+c.muted+';'
+  return {
+    surface:'background-color:'+c.bg+';'+ink,
+    card:'background-color:'+c.card+';'+ink,
+    raised:'background-color:'+c.raised+';'+ink,
+    ink,muted,dim:'color:'+c.dim+';',accent:'color:'+c.accent+';',
+    primary:'background-color:'+c.accent+';color:'+(dark?'#000000':'#FFFFFF')+';',
+    secondary:'background-color:'+c.card+';color:'+c.accent+';',
+    user:'background-color:'+c.user+';color:#FFFFFF;',white:'color:#FFFFFF;',
+    input:'background-color:'+c.card+';'+ink+'border-bottom:2px solid '+c.line+';',
+    plain:'background-color:transparent;'+ink,
+    icon:'background-color:'+(dark?c.accent:'transparent')+';',
+    danger:'background-color:'+c.card+';color:'+c.danger+';',
+    selection:'background-color:'+c.raised+';border-bottom:2px solid '+c.accent+';'+ink
+  }
+}
@@ -1,34 +1,34 @@
 <template>
-  <div class="ime-surface">
-  <div class="ime">
-    <div class="top"><button id="ime-cancel" class="cancel icon-button" on:click="cancel"><image class="icon" src="/assets/ime-icons/close-line.png" /></button><p class="title">{{title}}</p><p class="count">{{count}} 字</p></div>
-    <button class="preview" on:click="showTools">{{count ? display : '输入文字…'}}</button>
-    <div if="panel !== 'candidates'" class="composition"><p class="spelling">{{compositionDisplay || modeLabel}}</p><p class="hint">{{hint}}</p></div>
+  <div class="ime-surface" :style="themeStyles.surface">
+  <div class="ime" :style="themeStyles.surface">
+    <div class="top"><button id="ime-cancel" class="cancel icon-button" :style="themeStyles.icon" on:click="cancel"><image class="icon" src="/assets/ime-icons/close-line.png" /></button><p class="title" :style="themeStyles.muted">{{titleLabel}}</p><p class="count" :style="themeStyles.dim">{{count}} 字</p></div>
+    <button id="ime-preview" class="preview" :style="themeStyles.card" on:click="showTools">{{count ? display : '输入文字…'}}</button>
+    <div if="panel !== 'candidates'" id="ime-composition" class="composition"><p class="spelling" :style="themeStyles.accent">{{compositionDisplay || modeLabel}}</p><p class="hint" :style="themeStyles.dim">{{hint}}</p></div>

    <div if="panel === 'keys'" class="body">
-      <div if="mode === 't9' || mode === 'py' || mode === '14' || mode === 'sym' || inputType === 'url'" class="candidates"><button for="item in bar" class="candidate" on:click="choose(item)">{{item.word}}</button><button if="!composition &amp;&amp; inputType === 'url'" class="candidate" on:click="insert('https://')">https://</button><button if="!composition &amp;&amp; inputType === 'url'" class="candidate" on:click="insert('.com')">.com</button><button if="mode === 'sym'" class="candidate" on:click="symbols">下一组符号 {{symbolPage+1}}/2</button><p if="!total &amp;&amp; !busy &amp;&amp; mode !== 'sym' &amp;&amp; inputType !== 'url'" class="candidate-placeholder">{{secret ? '私密输入' : '选择候选词'}}</p><button if="mode !== 'sym' &amp;&amp; total" id="ime-expand" class="more icon-button" on:click="expand"><image class="icon" src="/assets/ime-icons/arrow-down-s-line.png" /></button></div>
-      <div class="keypad">
-        <div for="row in layoutRows" class="keyrow" :style="row.style"><button for="key in row.keys" class="key" :style="keyStyle" on:click="press(key.value)"><p class="key-label" :style="labelStyle">{{key.label}}</p><p if="key.sub" class="key-sub">{{key.sub}}</p></button></div>
+      <div if="mode === 't9' || mode === 'py' || mode === '14' || mode === 'sym' || inputType === 'url'" id="ime-candidate-strip" class="candidates" :style="themeStyles.raised"><button for="item in bar" class="candidate" :style="themeStyles.plain" on:click="choose(item)">{{item.word}}</button><button if="!composition &amp;&amp; inputType === 'url'" class="candidate" :style="themeStyles.plain" on:click="insert('https://')">https://</button><button if="!composition &amp;&amp; inputType === 'url'" class="candidate" :style="themeStyles.plain" on:click="insert('.com')">.com</button><button if="mode === 'sym'" class="candidate" :style="themeStyles.plain" on:click="symbols">下一组符号 {{symbolPage+1}}/2</button><p if="!total &amp;&amp; !busy &amp;&amp; mode !== 'sym' &amp;&amp; inputType !== 'url'" class="candidate-placeholder" :style="themeStyles.dim">{{secret ? '私密输入' : '选择候选词'}}</p><button if="mode !== 'sym' &amp;&amp; total" id="ime-expand" class="more icon-button" :style="themeStyles.icon" on:click="expand"><image class="icon" src="/assets/ime-icons/arrow-down-s-line.png" /></button></div>
+      <div id="ime-keypad" class="keypad">
+        <div for="row in layoutRows" class="keyrow" :style="row.style"><button for="key in row.keys" class="key" :style="keyStyle" on:click="press(key.value)"><p class="key-label" :style="labelStyle">{{key.label}}</p><p if="key.sub" class="key-sub" :style="themeStyles.dim">{{key.sub}}</p></button></div>
      </div>
-      <div class="modes"><button id="ime-chinese" on:click="chinese">{{mode === 't9' ? '26键' : '九宫'}}</button><button id="ime-14" :style="mode === '14' ? 'color:#2867D9' : ''" on:click="fourteen">14键</button><button on:click="english">{{upper ? 'ABC' : 'abc'}}</button><button on:click="numbers">123</button><button on:click="symbols">符号</button><button id="ime-tools" class="icon-button" on:click="showTools"><image class="icon small-icon" src="/assets/ime-icons/edit-2-line.png" /></button></div>
-      <div class="bottom"><button id="ime-space" on:click="space">空格</button><button id="ime-delete" class="delete icon-button" on:touchstart="startDelete" on:touchend="endDelete"><image class="icon" src="/assets/ime-icons/delete-back-2-line.png" /></button><button id="ime-finish" class="done icon-button" on:click="finish"><image class="icon" src="/assets/ime-icons/check-line.png" /></button></div>
+      <div class="modes"><button id="ime-chinese" :style="themeStyles.plain" on:click="chinese">{{mode === 't9' ? '26键' : '九宫'}}</button><button id="ime-14" :style="mode === '14' ? themeStyles.accent : themeStyles.muted" on:click="fourteen">14键</button><button :style="themeStyles.card" on:click="english">{{upper ? 'ABC' : 'abc'}}</button><button :style="themeStyles.card" on:click="numbers">123</button><button :style="themeStyles.card" on:click="symbols">符号</button><button id="ime-tools" class="icon-button" :style="themeStyles.icon" on:click="showTools"><image class="icon small-icon" src="/assets/ime-icons/edit-2-line.png" /></button></div>
+      <div class="bottom"><button id="ime-space" :style="themeStyles.card" on:click="space">空格</button><button id="ime-delete" class="delete icon-button" :style="themeStyles.icon" on:touchstart="startDelete" on:touchend="endDelete"><image class="icon" src="/assets/ime-icons/delete-back-2-line.png" /></button><button id="ime-finish" class="done icon-button" :style="themeStyles.primary" on:click="finish"><image class="icon" src="/assets/ime-icons/check-line.png" /></button></div>
    </div>

    <div if="panel === 'candidates'" class="body expanded">
-      <p class="page-info">完整候选 · {{total}} 项 · {{candidatePage + 1}}/{{pageCount}}</p>
-      <div class="full-list"><div for="row in candidateRows" class="candidate-grid-row" :style="row.style"><button for="entry in row.items" class="full-candidate" :style="entry.style" on:click="choose(entry.item)"><p class="word" :style="entry.labelStyle">{{entry.item.word}}</p></button></div><p if="total === 0" class="empty">{{busy ? '正在查词…' : '继续输入后查看候选'}}</p></div>
-      <div class="pager"><button id="ime-page-prev" class="icon-button" on:click="previousPage"><image class="icon" src="/assets/ime-icons/arrow-left-s-line.png" /></button><button id="ime-page-next" class="icon-button" on:click="nextPage"><image class="icon" src="/assets/ime-icons/arrow-right-s-line.png" /></button></div>
-      <div class="bottom"><button id="ime-back" class="icon-button" on:click="closePanel"><image class="icon" src="/assets/ime-icons/keyboard-box-line.png" /></button><button id="ime-delete" class="delete icon-button" on:click="backspace"><image class="icon" src="/assets/ime-icons/delete-back-2-line.png" /></button><button id="ime-finish" class="done icon-button" on:click="finish"><image class="icon" src="/assets/ime-icons/check-line.png" /></button></div>
+      <p class="page-info" :style="themeStyles.dim">完整候选 · {{total}} 项 · {{candidatePage + 1}}/{{pageCount}}</p>
+      <div class="full-list"><div for="row in candidateRows" class="candidate-grid-row" :style="row.style"><button for="entry in row.items" class="full-candidate" :style="entry.style" on:click="choose(entry.item)"><p class="word" :style="entry.labelStyle">{{entry.item.word}}</p></button></div><p if="total === 0" class="empty" :style="themeStyles.dim">{{busy ? '正在查词…' : '继续输入后查看候选'}}</p></div>
+      <div class="pager"><button id="ime-page-prev" class="icon-button" :style="themeStyles.icon" on:click="previousPage"><image class="icon" src="/assets/ime-icons/arrow-left-s-line.png" /></button><button id="ime-page-next" class="icon-button" :style="themeStyles.icon" on:click="nextPage"><image class="icon" src="/assets/ime-icons/arrow-right-s-line.png" /></button></div>
+      <div class="bottom"><button id="ime-back" class="icon-button" :style="themeStyles.icon" on:click="closePanel"><image class="icon" src="/assets/ime-icons/keyboard-box-line.png" /></button><button id="ime-delete" class="delete icon-button" :style="themeStyles.icon" on:click="backspace"><image class="icon" src="/assets/ime-icons/delete-back-2-line.png" /></button><button id="ime-finish" class="done icon-button" :style="themeStyles.primary" on:click="finish"><image class="icon" src="/assets/ime-icons/check-line.png" /></button></div>
    </div>

    <div if="panel === 'tools'" class="body tools">
-      <p class="page-info">{{secret ? '私密输入 · 不学习、不保存' : '光标编辑 · 输入仅保留在本机'}}</p>
-      <div class="toolrow"><button on:click="cursorLeft">← 左移</button><button on:click="cursorRight">右移 →</button></div>
-      <div class="toolrow"><button on:click="cursorStart">到开头</button><button on:click="cursorEnd">到末尾</button></div>
-      <div class="toolrow"><button on:click="newline">换行</button><button on:click="rawInput">拼音上屏</button></div>
-      <div class="toolrow"><button on:click="toggleLearning">{{learning ? '学习：开' : '学习：关'}}</button><button on:click="clearPreferences">清除学习</button></div>
-      <div class="toolrow"><button class="danger" on:click="clearText">{{clearArmed ? '确认清空' : '清空全文'}}</button><button on:click="backspace">删除一字</button></div>
-      <div class="bottom"><button id="ime-back" class="icon-button" on:click="closePanel"><image class="icon" src="/assets/ime-icons/keyboard-box-line.png" /></button><button id="ime-finish" class="done icon-button" on:click="finish"><image class="icon" src="/assets/ime-icons/check-line.png" /></button></div>
+      <p class="page-info" :style="themeStyles.dim">{{secret ? '私密输入 · 不学习、不保存' : '光标编辑 · 输入仅保留在本机'}}</p>
+      <div class="toolrow"><button :style="themeStyles.card" on:click="cursorLeft">← 左移</button><button :style="themeStyles.card" on:click="cursorRight">右移 →</button></div>
+      <div class="toolrow"><button :style="themeStyles.card" on:click="cursorStart">到开头</button><button :style="themeStyles.card" on:click="cursorEnd">到末尾</button></div>
+      <div class="toolrow"><button :style="themeStyles.card" on:click="newline">换行</button><button :style="themeStyles.card" on:click="rawInput">拼音上屏</button></div>
+      <div class="toolrow"><button :style="themeStyles.card" on:click="toggleLearning">{{learning ? '学习：开' : '学习：关'}}</button><button :style="themeStyles.card" on:click="clearPreferences">清除学习</button></div>
+      <div class="toolrow"><button class="danger" :style="themeStyles.danger" on:click="clearText">{{clearArmed ? '确认清空' : '清空全文'}}</button><button :style="themeStyles.card" on:click="backspace">删除一字</button></div>
+      <div class="bottom"><button id="ime-back" class="icon-button" :style="themeStyles.icon" on:click="closePanel"><image class="icon" src="/assets/ime-icons/keyboard-box-line.png" /></button><button id="ime-finish" class="done icon-button" :style="themeStyles.primary" on:click="finish"><image class="icon" src="/assets/ime-icons/check-line.png" /></button></div>
    </div>
  </div>
  </div>
@@ -39,31 +39,33 @@
  p{margin:0;color:#20232B;font-size:.62rem}button{padding:0;margin:3px;border-radius:12px;color:#20232B;background-color:#FFFFFF;font-size:.65rem;flex-shrink:0}button:active{background-color:#D7E5FF}
  .icon-button{display:flex;align-items:center;justify-content:center}.icon{width:24px;height:24px;object-fit:contain}.small-icon{width:20px;height:20px}
  .top,.composition,.candidates,.keyrow,.modes,.bottom,.pager,.toolrow{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0}
-  .top{height:27px}.cancel{width:44px;height:27px;background-color:transparent;color:#2867D9;font-size:.53rem}.title{flex:1;text-align:center;font-size:.55rem;color:#737984}.count{width:44px;font-size:.4rem;text-align:right;color:#9297A1}
+  .top{height:27px}.cancel{width:44px;height:27px;background-color:transparent;color:#2867D9;font-size:.53rem}.title{flex:1;text-align:center;font-size:.5rem;color:#737984}.count{width:44px;font-size:.4rem;text-align:right;color:#9297A1}
  .preview{height:43px;margin:7px 7px 3px;padding:0 14px;background-color:#FFFFFF;text-align:left;font-size:.82rem;color:#20232B;border-radius:13px}
  .composition{height:24px;padding:0 12px}.spelling{flex:1;color:#2867D9;font-size:.55rem}.hint{color:#8B909A;font-size:.38rem;text-align:right}
-  .body,.keypad,.full-list{display:flex;flex-direction:column;align-items:stretch;min-height:0}.body{flex:1;justify-content:center}.keypad{flex-shrink:0}
+  .body,.keypad,.full-list{display:flex;flex-direction:column;align-items:stretch;min-height:0}.body{flex:1;justify-content:flex-start}.keypad{flex-shrink:0}
  .candidates{height:42px;margin:0 4px 4px;background-color:#F8F9FB;border-radius:12px}.candidate{flex:1;min-width:45px;height:36px;background-color:transparent;color:#20232B;font-size:.78rem}.candidate-placeholder{flex:1;text-align:center;color:#A4A9B2;font-size:.45rem}.more{width:46px;height:36px;background-color:transparent;font-size:.5rem;color:#2867D9}
  .keyrow{align-items:stretch;align-self:center;width:100%}.key{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;height:52px;min-width:0;background-color:#FFFFFF;border-radius:12px}.key-label{font-size:.88rem;color:#22252E}.key-sub{font-size:.35rem;color:#9DA2AD;margin-top:1px}
  .modes{height:36px;margin-top:3px}.modes button{flex:1;height:31px;background-color:transparent;font-size:.53rem;color:#636A77}
  .bottom{height:41px;margin-top:2px}.bottom button{flex:1;height:37px;font-size:.6rem;background-color:#FFFFFF}.bottom .done{background-color:#2867D9;color:#FFFFFF}.bottom .delete{background-color:#D9DDE4;color:#515866}
-  .page-info{text-align:center;color:#8B919D;font-size:.45rem;margin:5px 0;flex-shrink:0}.full-list{flex:1;justify-content:center}.candidate-grid-row{display:flex;flex-direction:row;align-self:flex-start;align-items:stretch;flex-shrink:0}.full-candidate{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;margin:2px;padding:2px 4px;background-color:#FFFFFF;border-radius:10px}.word{width:100%;text-align:center;font-size:25px;color:#22252E}.empty{margin:15px 8px;color:#9299A5;text-align:center}
+  .page-info{text-align:center;color:#8B919D;font-size:.45rem;margin:5px 0;flex-shrink:0}.full-list{flex:1;justify-content:flex-start}.candidate-grid-row{display:flex;flex-direction:row;align-self:flex-start;align-items:stretch;flex-shrink:0}.full-candidate{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;margin:2px;padding:2px 4px;background-color:#FFFFFF;border-radius:10px}.word{width:100%;text-align:center;font-size:25px;color:#22252E}.empty{margin:15px 8px;color:#9299A5;text-align:center}
  .pager{height:38px}.pager button{flex:1;height:34px;background-color:transparent;color:#2867D9;font-size:.55rem}.toolrow button{flex:1;height:40px;font-size:.57rem}.tools{justify-content:center}.tools .danger{color:#C85656}.tools .bottom{margin-top:8px}
-  @media (shape:circle){.ime{padding:30px 8px}.top{align-self:center;width:186px;height:24px}.cancel{height:24px}.preview{align-self:center;width:280px;height:32px;margin-top:5px}.composition{align-self:center;width:300px;height:19px}.candidates{align-self:center;width:352px;height:38px}.candidate{height:34px}.more{height:34px}.keypad{align-self:center;width:376px}.key{height:49px}.modes{align-self:center;width:286px;height:33px}.modes button{height:29px}.bottom{align-self:center;width:200px;height:38px}.bottom button{height:34px}.full-list{align-self:center;width:340px}.pager{align-self:center;width:276px}.toolrow{align-self:center;width:300px}.toolrow button{height:35px}.tools .page-info{align-self:center;width:280px}.tools .bottom{margin-top:4px}}
+  @media (shape:circle){.ime{padding:30px 8px}.top{align-self:center;width:186px;height:24px}.cancel{height:24px}.preview{align-self:center;width:280px;height:32px;margin-top:5px}.composition{align-self:center;width:300px;height:23px}.candidates{align-self:center;width:352px;height:38px}.candidate{height:34px}.more{height:34px}.keypad{align-self:center;width:368px}.key{height:49px}.modes{align-self:center;width:286px;height:33px}.modes button{height:29px}.bottom{align-self:center;width:200px;height:38px}.bottom button{height:34px}.full-list{align-self:center;width:340px}.pager{align-self:center;width:276px}.toolrow{align-self:center;width:300px}.toolrow button{height:34px}.tools .page-info{align-self:center;width:280px}.tools .bottom{margin-top:4px}}
 </style>
 <script>
  import file from '@system.file'
  import storage from '@system.storage'
  import router from '@system.router'
+  import {normalizeTheme, themeStyles as stylesForTheme} from '../common/ime-theme.js'
  import {createDictionary,chars,candidatePages,edit,erase,preview,learn,sanitizePreferences,KEY14_GROUPS,display14} from '../common/ime-engine.js'

  const LETTERS=['qwertyuiop','asdfghjkl','zxcvbnm']
  const SYMBOLS=['!"#$%&',"'()*+,",'-./:;<','=>?@[\\',']^_`{|','}~，。？！']
  function keys(rows){return rows.map(row=>Array.from(row).map(value=>({label:value,value:value,sub:''})))}
  export default {
-    data:{initial:'',title:'蟹蟹输入',inputType:'text',maxLength:2048,allowNewline:true,secret:false,text:'',cursor:0,composition:'',compositionDisplay:'',display:'│',count:0,limit:2048,mode:'t9',modeLabel:'九宫拼音',upper:false,symbolPage:0,panel:'keys',keyRows:[],layoutRows:[],keyStyle:'',labelStyle:'',bar:[],visibleCandidates:[],candidateRows:[],total:0,candidatePage:0,pageCount:1,busy:false,hint:'离线全量词库',learning:false,clearArmed:false},
+    data:{titleLabel:'蟹蟹输入',inputTheme:'bluewhite',themeStyles:stylesForTheme('bluewhite'),initial:'',title:'蟹蟹输入',inputType:'text',maxLength:2048,allowNewline:true,secret:false,text:'',cursor:0,composition:'',compositionDisplay:'',display:'│',count:0,limit:2048,mode:'t9',modeLabel:'九宫拼音',upper:false,symbolPage:0,panel:'keys',keyRows:[],layoutRows:[],keyStyle:'',labelStyle:'',bar:[],visibleCandidates:[],candidateRows:[],total:0,candidatePage:0,pageCount:1,busy:false,hint:'离线全量词库',learning:false,clearArmed:false},
    dictionary:null,preferences:{},allCandidates:[],pages:[],active:true,life:null,requestId:0,lookupTimer:null,repeatTimer:null,repeatDelay:null,result:null,original:'',
    onInit(){
+      this.titleLabel=chars(this.title).slice(0,4).join('')+(chars(this.title).length>4?'…':'');this.inputTheme=normalizeTheme(this.inputTheme);this.themeStyles=stylesForTheme(this.inputTheme)
      this.life={active:true,id:0};this.secret=!!this.secret||this.inputType==='password'
      this.limit=Math.floor(Math.max(1,Math.min(4096,Number(this.maxLength)||2048)))
      this.text=chars(this.initial).slice(0,this.limit).join('');this.original=this.text;this.cursor=chars(this.text).length
@@ -84,9 +86,9 @@
      else if(this.mode==='sym')this.keyRows=keys(SYMBOLS.slice(this.symbolPage*3,this.symbolPage*3+3))
      else if(this.mode==='14'){const all=KEY14_GROUPS.map((group,index)=>({label:group.toUpperCase(),value:'0123456789abcd'[index],sub:''}));this.keyRows=[all.slice(0,5),all.slice(5,10),all.slice(10)]}
      else this.keyRows=keys(LETTERS.map(row=>this.upper&&this.mode==='en'?row.toUpperCase():row))
-      this.keyStyle='height:'+(this.keyRows.length<=3?'49':this.keyRows.length===4?'38':this.keyRows.length===5?'28':'22')+'px'
+      this.keyStyle='height:'+(this.keyRows.length<=3?'49':this.keyRows.length===4?'38':this.keyRows.length===5?'28':'22')+'px;'+this.themeStyles.card
      const qwerty=this.mode==='py'||this.mode==='en'
-      this.labelStyle=qwerty?'font-size:22px':this.mode==='14'?'font-size:24px':''
+      this.labelStyle=(qwerty?'font-size:22px;':this.mode==='14'?'font-size:24px;':'')+this.themeStyles.ink
      this.layoutRows=this.keyRows.map((row,index)=>({keys:row,style:'width:'+(qwerty?['100','94','84'][index]:index===this.keyRows.length-1?'91':'100')+'%'}))
      this.modeLabel={t9:'九宫拼音',py:'26键全拼 · v 代表 ü','14':'14键拼音',en:this.upper?'英文大写':'英文小写',num:'数字',sym:'符号 · '+(this.symbolPage+1)+'/2'}[this.mode]
      this.compositionDisplay=this.mode==='14'?display14(this.composition):this.composition
@@ -118,7 +120,7 @@
      }catch(error){if(life.active&&id===life.id)this.hint='词库暂不可用，可切换英文输入'}
      finally{if(life.active&&id===life.id)this.busy=false}
    },
-    pageCandidates(){const rows=this.pages[this.candidatePage]||[];this.visibleCandidates=[];this.candidateRows=rows.map(row=>({style:'height:'+(row.units*43)+'px;width:'+(row.slots*25)+'%',items:row.items.map(entry=>{this.visibleCandidates.push(entry.item);return {item:entry.item,style:'flex:'+entry.span+';height:'+(row.units*43-4)+'px',labelStyle:'font-size:'+(entry.span===1?25:entry.span===2?23:20)+'px'}})}))},
+    pageCandidates(){const rows=this.pages[this.candidatePage]||[];this.visibleCandidates=[];this.candidateRows=rows.map(row=>({style:'height:'+(row.units*43)+'px;width:'+(row.slots*25)+'%',items:row.items.map(entry=>{this.visibleCandidates.push(entry.item);return {item:entry.item,style:'flex:'+entry.span+';height:'+(row.units*43-4)+'px;'+this.themeStyles.card,labelStyle:'font-size:'+(entry.span===1?25:entry.span===2?23:20)+'px;'+this.themeStyles.ink}})}))},
    choose(item){
      if(this.busy||!this.composition||!this.allCandidates.some(x=>x.word===item.word&&x.pinyin===item.pinyin&&x.consume===item.consume))return
      if(chars(this.text).length+chars(item.word).length>this.limit){this.hint='剩余空间不足，未截断候选词';return}
@@ -2,9 +2,21 @@
  "package": "com.sydxky.rtos.inputmethod",
  "name": "蟹蟹输入",
  "icon": "/assets/icon.png",
-  "versionName": "1.2.0",
-  "versionCode": 10200,
+  "versionName": "1.2.2",
+  "versionCode": 10202,
  "features": [],
-  "router": {"entry": "main", "pages": {"main": {"component": "index"}, "keyboard": {"component": "index"}}},
-  "config": {"designWidth": 410}
+  "router": {
+    "entry": "main",
+    "pages": {
+      "main": {
+        "component": "index"
+      },
+      "keyboard": {
+        "component": "index"
+      }
+    }
+  },
+  "config": {
+    "designWidth": 410
+  }
 }
@@ -2,6 +2,7 @@ import fs from 'node:fs'
 import vm from 'node:vm'
 import assert from 'node:assert/strict'
 import * as engine from '../src/common/ime-engine.js'
+import {normalizeTheme,themeStyles as stylesForTheme} from '../src/common/ime-theme.js'
 const ux=fs.readFileSync(new URL('../src/keyboard/index.ux',import.meta.url),'utf8')
 const source=ux.match(/<script>([\s\S]*?)<\/script>/)[1].replace(/^\s*import .+$/gm,'').replace('export default','module.exports=')
 let count=0
@@ -9,7 +10,7 @@ const closed=[],store=new Map(),timers=new Map();let nextTimer=1,storageFails=fa
 function check(ok,label){assert.ok(ok,label);count++}
 function page(params={}){
 const module={exports:{}}
- vm.runInNewContext(source,{module,console,...engine,router:{close(p,r){closed.push(r)}},storage:{get:k=>store.get(k),set:(k,v)=>{if(storageFails)throw Error('storage full');store.set(k,v)},delete:k=>store.delete(k)},file:{readText:async({uri})=>fs.readFileSync(new URL('../src'+uri,import.meta.url),'utf8')},setTimeout:fn=>{const id=nextTimer++;timers.set(id,fn);return id},clearTimeout:id=>timers.delete(id),setInterval:fn=>{const id=nextTimer++;timers.set(id,fn);return id},clearInterval:id=>timers.delete(id)})
+ vm.runInNewContext(source,{module,console,...engine,normalizeTheme,stylesForTheme,router:{close(p,r){closed.push(r)}},storage:{get:k=>store.get(k),set:(k,v)=>{if(storageFails)throw Error('storage full');store.set(k,v)},delete:k=>store.delete(k)},file:{readText:async({uri})=>fs.readFileSync(new URL('../src'+uri,import.meta.url),'utf8')},setTimeout:fn=>{const id=nextTimer++;timers.set(id,fn);return id},clearTimeout:id=>timers.delete(id),setInterval:fn=>{const id=nextTimer++;timers.set(id,fn);return id},clearInterval:id=>timers.delete(id)})
 const p={...module.exports,...JSON.parse(JSON.stringify(module.exports.data)),...params};delete p.data;p.onInit();return p
 }
 let p=page();check(p.mode==='t9'&&!p.learning,'T9 large keys, learning opt-in')
@@ -17,12 +17,13 @@ def inspect(path,profile):
    visible_pages(frame['widgets'])
    page=pages[-1]
    circle=profile.startswith('round');width=466 if circle else 390;height=466 if circle else 450
-    failures=[];buttons=[];icons=[]
+    failures=[];buttons=[];icons=[];regions={}
    def visit(node,ancestors=(),px=0,py=0,visible=True):
        g=node['geometry'];x=px+g['x'];y=py+g['y'];w=g['w'];h=g['h']
        visible=visible and node.get('visible',True)
        if not visible:return
        box=[x,y,w,h];kind=node['class'];identifier=node.get('id','')
+        if identifier in ['ime-preview','ime-composition','ime-keypad','ime-candidate-strip']:regions[identifier]=box
        if kind in ['Button','ImageBox','Label']:
            for ancestor in ancestors:
                ax,ay,aw,ah=ancestor['box']
@@ -36,4 +37,12 @@ def inspect(path,profile):
            (buttons if kind=='Button'else icons).append(record)
        for child in node.get('children',[]):visit(child,ancestors+({'class':kind,'id':identifier,'box':box},),x,y,visible)
    visit(page)
-    return {'page':page.get('id'),'buttons':len(buttons),'icons':len(icons),'max_button_radius':round(max([b['radius']or 0 for b in buttons],default=0),2),'failures':failures,'passed':not failures}
+    gaps={}
+    if 'ime-composition' in regions and 'ime-keypad' in regions:
+        compose=regions['ime-composition'];keys=regions['ime-keypad']
+        gap=keys[1]-compose[1]-compose[3];gaps['composition_to_keys']=gap
+        # Account for the actual visible strip; direct entry may leave at most
+        # one rounding pixel, never an unused candidate-sized band.
+        maximum=(48 if circle else 53)if 'ime-candidate-strip' in regions else 1
+        if gap < -1 or gap > maximum:failures.append({'reason':'extra gap before keyboard','gap':gap,'maximum':maximum})
+    return {'page':page.get('id'),'buttons':len(buttons),'icons':len(icons),'gaps':gaps,'max_button_radius':round(max([b['radius']or 0 for b in buttons],default=0),2),'failures':failures,'passed':not failures}