123

manifest.json

@@ -10,7 +10,10 @@
   "features": [
     {
       "name": "blueos.app.appmanager.router"
-    },{ "name": "blueos.window.prompt" }
+    },
+    {
+      "name": "blueos.window.prompt"
+    }
   ],
   "deviceTypeList": [
     "watch",
@@ -33,4 +36,4 @@
   "display": {
     "backgroundColor": "#000000"
   }
-}
+}

pages/Demo/index.ux

@@ -1,91 +1,76 @@
 <template>
 <div class="container">
-    <swiper class="container-swiper" index="{{ sindex }} " vertical="true" loop="false" onchange="changeSwiper">
-        <div class="container-col">
-            <div class="text-container">
-                <text>输入法demo</text>
-                <text class="text-content">{{inputWords}}_</text>
-            </div>
-            <div class="container-row">
-                <input type="button" value="返回" class="func-button" onclick="cancelInput"></input>
-                <input type="button" value="确定" class="func-button" onclick="finishInput"></input>
-                <input type="button" value="退格" class="func-button" onclick="wordsBackspace"></input>
-            </div>
-            <text>上滑输入文字</text>
+  <div class="container-col">
+    <text class="letters-display">{{ letters }}</text>
+    <text class="words-preview">{{ words }}</text>
+    <div class="container-row-candidate">
+      <input type="button" value="<" class="candidate-word-button" onclick="wordsPageBack"></input>
+        <input type="button" value="{{ currentWords[0]||'' }}" class="candidate-word-button" 
+                onclick="selectInput(currentWords[0])"></input>
+        <input type="button" value="{{ currentWords[1]||'' }}" class="candidate-word-button"
+                onclick="selectInput(currentWords[1])"></input>
+        <input type="button" value="{{ currentWords[2]||'' }}" class="candidate-word-button"
+                onclick="selectInput(currentWords[2])"></input>
+        <input type="button" value="{{ currentWords[3] ||''}}" class="candidate-word-button"
+                onclick="selectInput(currentWords[3])"></input>
+        <input type="button" value="{{ currentWords[4] ||''}}" class="candidate-word-button"
+                onclick="selectInput(currentWords[4])"></input>
+        <input type="button" value=">" class="candidate-word-button" onclick="wordsPageForward"></input>
+    </div>
+    <!-- 滑动键盘区域 -->
+    <!-- 第一行 -->
+    <div class="keyboard-row-scroll">
+        <div class="keyboard-row" for="{{row1Letters}}">
+            <input 
+                type="button" 
+                class="input-button"
+                value="{{$item}}"
+                onclick="input($item)"
+                
+            />
         </div>
-        <div class="container-col">
-            <text class="letters-display">{{ letters }}</text>
-            <text class="words-preview">{{ words }}</text>
-            <div class="container-row-candidate">
-              <input type="button" value="<" class="candidate-word-button" onclick="wordsPageBack"></input>
-                <input type="button" value="{{ currentWords[0]||'' }}" class="candidate-word-button" 
-                       onclick="selectInput(currentWords[0])"></input>
-                <input type="button" value="{{ currentWords[1]||'' }}" class="candidate-word-button"
-                       onclick="selectInput(currentWords[1])"></input>
-                <input type="button" value="{{ currentWords[2]||'' }}" class="candidate-word-button"
-                       onclick="selectInput(currentWords[2])"></input>
-                <input type="button" value="{{ currentWords[3] ||''}}" class="candidate-word-button"
-                       onclick="selectInput(currentWords[3])"></input>
-                <input type="button" value="{{ currentWords[4] ||''}}" class="candidate-word-button"
-                       onclick="selectInput(currentWords[4])"></input>
-                <input type="button" value=">" class="candidate-word-button" onclick="wordsPageForward"></input>
-            </div>
-            <!-- 滑动键盘区域 -->
-        <!-- 第一行 -->
-        <scroll class="keyboard-row-scroll" scroll-x="true">
-            <div class="keyboard-row" for="{{row1Letters}}">
-                <input 
-                    type="button" 
-                    class="input-button"
-                    value="{{$item}}"
-                    onclick="input($item)"
-                    
-                />
-            </div>
-        </scroll>
+    </div>
 
-        <!-- 第二行 -->
-        <scroll class="keyboard-row-scroll" scroll-x="true">
-            <div class="keyboard-row" for="{{row2Letters}}">
-                <input 
-                    type="button" 
-                    class="input-button"
-                    value="{{$item}}"
-                    onclick="input($item)"
-                />
-            </div>
-        </scroll>
-
-        <!-- 第三行 -->
-        <scroll class="keyboard-row-scroll" scroll-x="true">
-            <div class="keyboard-row" for="{{row3Letters}}">
-                <input 
-                    type="button" 
-                    class="input-button"
-                    value="{{$item}}"
-                    onclick="input($item)"
-                />
-            </div>
-        </scroll>
-           
-            <div class="function-row">
-            <input type="button" value="中" class="mode-button" onclick="changeToCn"></input>
-            <input type="button" value="英" class="mode-button" onclick="changeToEn"></input>
-            <input type="button" value="符" class="mode-button" onclick="changeToSymbol"></input>
-            <input type="button" value="空格" class="space-button" onclick="input(' ')"></input>
-            <input type="button" value="←" class="backspace-button" onclick="backspace"></input>
-        </div>
+    <!-- 第二行 -->
+    <div class="keyboard-row-scroll">
+      <div class="keyboard-row" for="{{row2Letters}}">
+        <input 
+            type="button" 
+            class="input-button"
+            value="{{$item}}"
+            onclick="input($item)"
+            
+        />
       </div>
-    </swiper>
+    </div>
+
+    <!-- 第三行 -->
+    <div class="keyboard-row-scroll">
+      <div class="keyboard-row" for="{{row3Letters}}">
+        <input 
+            type="button" 
+            class="input-button"
+            value="{{$item}}"
+            onclick="input($item)"
+            
+        />
+      </div>
+    </div>
+        
+    <div class="function-row">
+      <input type="button" value="中" class="mode-button" onclick="changeToCn"/>
+      <input type="button" value="英" class="mode-button" onclick="changeToEn"/>
+      <input type="button" value="符" class="mode-button" onclick="changeToSymbol"/>
+      <input type="button" value="空格" class="space-button" onclick="input(' ')"/>
+      <input type="button" value="←" class="backspace-button" onclick="backspace"/>
+    </div>
+  </div>
 </div>
 </template>
 
 <script>
-import router from '@blueos.app.appmanager.router';
-import prompt from '@blueos.window.prompt';
 export default {
   data: {
-    fromPage: "",       //转跳输入法前的页面的Uri
     fromPageData: null,  //转跳输入法前的页面的要保存的数据（转跳页面时传过来一个对象，输入完成后传回去）
     letters: "",        //键盘页输入的拼音
     words: "　　　　",    //键盘页中，提供编辑框后8个字符的预览
@@ -93,6 +78,7 @@ export default {
     sindex: 0,          //键盘滑动位置，实现从候选页返回时可以返回到原页面
     mode: "cn",         //输入模式标记，中文cn，英文en，符号数字标记
     caps: -1,           //大小写标记
+    symbolToggle:-1,
     row1Letters: ["Q","W","E","R","T","Y","U","I","O","P"],
     row2Letters: ["A","S","D","F","G","H","J","K","L"],
     row3Letters: ["Z","X","C","V","B","N","M"],
@@ -108,9 +94,18 @@ export default {
         row3: ["z", "x", "c", "v", "b", "n", "m"]
       },
       sy: {
-        row1: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
-        row2: ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")",","],
-        row3: ["-", "_", "+", "=", "{", "}", "[", "]", "|", "\\","。"]
+        // 默认符号组（较少的符号，保持布局一致）
+        default: {
+          row1: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
+          row2: ["!", "@", "#", "%", "&", "*", "(", ")", ","],
+          row3: ["_", "=", "{", "}", "[", "]", "。"]
+        },
+        // 补充符号组（额外的符号）
+        alternate: {
+          row1: ["~", "`", "©", "®", "±", "÷", "×", "/", "\\", "∞"],
+          row2: ["♥", "♦", "♣", "♠", "•", "$", "|", "^", "-"],
+          row3: ["¿", "¡", "∑", "∏", "π", "Ω", "∆"]
+        }
       }
     },
     currentWords: [],    // 当前显示的候选词
@@ -143,12 +138,31 @@ export default {
 
     this.currentWords = candidates.slice(this.wordsPageIndex, this.wordsPageIndex + 5);
   },
-  changeToSymbol() {
+changeToSymbol() {
+  // 如果当前已经是符号模式，则切换符号组
+  if (this.mode === 'sy') {
+    // 切换开关状态
+    this.symbolToggle = !this.symbolToggle;
+    if (this.symbolToggle) {
+      // 切换到备用符号组
+      this.row1Letters = this.keyboardModes.sy.alternate.row1;
+      this.row2Letters = this.keyboardModes.sy.alternate.row2;
+      this.row3Letters = this.keyboardModes.sy.alternate.row3;
+    } else {
+      // 切换回默认符号组
+      this.row1Letters = this.keyboardModes.sy.default.row1;
+      this.row2Letters = this.keyboardModes.sy.default.row2;
+      this.row3Letters = this.keyboardModes.sy.default.row3;
+    }
+  } else {
+    // 不是符号模式时，切换到符号模式，默认使用默认符号组
     this.mode = 'sy';
-        this.row1Letters = this.keyboardModes.sy.row1;
-        this.row2Letters = this.keyboardModes.sy.row2;
-        this.row3Letters = this.keyboardModes.sy.row3;
-  },
+    this.symbolToggle = false;  // 重置切换标志
+    this.row1Letters = this.keyboardModes.sy.default.row1;
+    this.row2Letters = this.keyboardModes.sy.default.row2;
+    this.row3Letters = this.keyboardModes.sy.default.row3;
+  }
+},
   changeToEn() {
     if (this.mode === 'en') {
       this.caps = this.caps === 1 ? -1 : 1;
@@ -245,29 +259,6 @@ export default {
   jumpToCandidate() {
     this.sindex = 1;
   },
-  finishInput() {
-    prompt.showToast({
-      message: '输入完成，此处可以storage保存或params然后跳转到你的页面',
-    })
-    /*
-    var that = this;
-    router.replace({
-      uri: that.fromPage,
-      params: {
-        fromPageData: that.fromPageData,
-        inputWords: that.inputWords,
-      },
-    });*/
-  },
-  cancelInput() {
-    var that = this;
-    router.replace({
-      uri: that.fromPage,
-      params: {
-        fromPageData: that.fromPageData,
-      },
-    });
-  },
   touchMove(e) { // swipe处理事件
     if (e.direction == "right") { // 右滑退出
       this.cancel_input()
@@ -279,184 +270,188 @@ export default {
 
 <style>
 .container {
-    flex-direction: column;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    left: 0px;
-    top: 0px;
-    width: 466px;
-    height: 100%;
-    background-color: #000000;
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 466px;
+  height: 100%;
+  background-color: #000000;
 }
 .keyboard-row-scroll {
-    width: 466px;
-    height: 60px;
-    margin: 5px 0;
+  width: 466px;
+  height: 60px;
+  margin: 5px 0;
 }
 .keyboard-row {
-    flex-direction: row;
-    height: 60px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  width: 466px; /* 固定总宽度 */
+  height: 60px;
+}
+.input-button {
+  width: 100%;
+  height: 60px;
+  margin: 0 3px;
+  font-size: 24px;
+  border-radius: 5px;
+  background-color: #444;
+  color: white;
 }
 .text-container {
-    flex-direction: column;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    left: 0px;
-    top: 0px;
-    width: 320px;
-    height: 260px;
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 320px;
+  height: 260px;
 }
 
 .text-content {
-    font-size: 30px;
-    text-align: left;
-    width: 322px;
-    height: 270px;
+  font-size: 30px;
+  text-align: left;
+  width: 322px;
+  height: 270px;
 }
 
 .candidate-word {
-    font-size: 30px;
-    text-align: center;
-    width: 100px;
-    height: 55px;
-    justify-content: center;
+  font-size: 30px;
+  text-align: center;
+  width: 100px;
+  height: 55px;
+  justify-content: center;
 }
 
 
-.input-button {
-    width: 70px;
-    height: 60px;
-    min-width: 60px;
-    margin: 0 3px;
-    font-size: 24px;
-    border-radius: 5px;
-    background-color: #444;
-    color: white;
-}
+
 .function-row {
-    flex-direction: row;
-    justify-content: space-between;
-    width: 466px;
-    margin-top: 10px;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 466px;
+  margin-top: 10px;
 }
 .mode-button {
-    width: 80px;
-    height: 60px;
-    background-color: #666;
-    border-radius: 30px;
+  width: 80px;
+  height: 60px;
+  background-color: #666;
+  border-radius: 30px;
 }
 
 .space-button {
-    margin: 0 5px;
-    height: 60px;
-    color: #f0f8ff;
-    background-color: #9f83fb;
+  margin: 0 5px;
+  height: 60px;
+  color: #f0f8ff;
+  background-color: #9f83fb;
+  border-radius: 25px; /* 新增圆角 */
 }
 .active-mode {
-    background-color: #2196F3;
-    color: white;
+  background-color: #2196F3;
+  color: white;
 }
 .backspace-button {
-    width: 80px;
-    height: 60px;
-    background-color: #f44336;
-    border-radius: 30px;
+  width: 80px;
+  height: 60px;
+  background-color: #f44336;
+  border-radius: 30px;
 }
 
 .func-button {
-    width: 90px;
-    height: 50px;
-    background-color: #323232;
-    margin: 0px 5px 0px 5px;
-    font-size: 30px;
-    border-radius: 15px; /* 新增圆角 */
-    color: #f0f8ff;
+  width: 90px;
+  height: 50px;
+  background-color: #323232;
+  margin: 0px 5px 0px 5px;
+  font-size: 30px;
+  border-radius: 15px; /* 新增圆角 */
+  color: #f0f8ff;
 }
 
 .pinyin-button {
-    width: 380px;
-    height: 40px;
-    background-color: rgb(65, 105, 225);
-    margin: 0px 5px 0px 5px;
-    font-size: 30px;
-    border-radius: 30px; /* 新增圆角 */
-    color: #f0f8ff;
+  width: 380px;
+  height: 40px;
+  background-color: rgb(65, 105, 225);
+  margin: 0px 5px 0px 5px;
+  font-size: 30px;
+  border-radius: 30px; /* 新增圆角 */
+  color: #f0f8ff;
 }
 
 .container-row {
-    flex-direction: row;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    left: 0px;
-    top: 0px;
-    width: 454px;
-    height: 65px;
+  flex-direction: row;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 65px;
 }
 
 .container-row-candidate {
-    flex-direction: row;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    left: 0px;
-    top: 0px;
-    width: 466px;
-    height: 65px;
+  flex-direction: row;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 466px;
+  height: 65px;
 }
 
 .container-col {
-    flex-direction: column;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    left: 0px;
-    top: 0px;
-    width: 454px;
-    height: 454px;
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 466px;
+  height: 100%;
 }
 
 .container-col-candidate {
-    flex-direction: column;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    left: 0px;
-    top: 0px;
-    width: 454px;
-    height: 65px;
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 65px;
 }
 
 .container-swiper {
-    left: 0px;
-    top: 0px;
-    width: 454px;
-    height: 500px;
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 500px;
 }
 /* 新增候选词样式 */
 .candidate-word-button {
-    width: 55px;
-    height: 60px;
-    background-color: rgba(50,50,50,0.9);
-    margin: 5px;
-    border-radius: 10px;
-    font-size: 30px;
-    color: #fff;
+  width: 55px;
+  height: 60px;
+  background-color: rgba(50,50,50,0.9);
+  margin: 5px;
+  border-radius: 10px;
+  font-size: 30px;
+  color: #fff;
 }
 text {
-    color: #f0f8ff;
+  color: #f0f8ff;
 }
 .letters-display {
-    font-size: 20px;
-    height: 30px;
-    margin-bottom: 3px;
+  font-size: 20px;
+  height: 30px;
+  margin-bottom: 3px;
 }
 
 .words-preview {
-    font-size: 35px;
-    height: 50px;
-    margin-bottom: 15px;
+  font-size: 35px;
+  height: 50px;
+  margin-bottom: 15px;
 }
 </style>