123

README.md

@@ -1,36 +0,0 @@
-# 手表示例模版
-
-## 文件结构
-
-```
-├── sign                # 存储 rpk 包签名模块(须自行生成);
-│   ├── certificate.pem # 证书文件
-│   └── private.pem     # 私钥文件
-└── src
-│   ├── assets          # 公用的资源(images/styles/字体...)
-│   │   ├──images       # 存储 png/jpg/svg 等公共图片资源
-│   │   └──styles       # 存放 less/css/sass 等公共样式资源
-│   ├── pages           # 统一存放项目页面级代码
-│   ├── app.ux          # 应用程序代码的入口文件
-│   ├── manifest.json   # 配置蓝河应用基本信息
-│   └── components      # 存放蓝河应用组件
-└── package.json        # 定义项目需要的各种模块及配置信息
-```
-
-### 模版说明
-
-- `Demo` 页面：示例页面；
-- `DemoDetail`页面：详情页面；
-
-## 如何使用
-
--  **内置样式处理方案**；「蓝河应用」支持 `sass` 的预编译；这里采取 [dart sass](https://sass-lang.com/documentation) 方案，并内置了部分变量，以及常用混合方法，使得可以轻松开启样式编写、复用、修改等；
--  **添加新增页面命令脚本**；如果需要新建页面，只需运行：`yarn gen YourPageName` ，当然，也可以根据需要，自行定定制模板：*/command/gen/template.ux*；
--  **集成 [Prettier](https://prettier.io/)**；在检测代码中潜在问题的同时，统一团队代码规范、风格（`js`，`less`，`scss`等），从而促使写出高质量代码，以提升工作效率(尤其针对团队开发)；
-
-## 内置命令
-
-|  命令 | 描述  | 备注 |
-|---|---|---|
-| `yarn gen `  | 新增「蓝河应用」页面 | 助你高效生成页面，模版可自定义，推荐 ✓|
-| `yarn prettier`  | 一键美化代码(js/css/less/ux)  | 实在是团队开发好帮手，推荐 ✓ |

manifest.json

@@ -10,7 +10,10 @@
   "features": [
     {
       "name": "blueos.app.appmanager.router"
-    },{ "name": "blueos.window.prompt" }
+    },
+    {
+      "name": "blueos.window.prompt"
+    }
   ],
   "deviceTypeList": [
     "watch",

pages/Demo/index.ux

@@ -1,38 +1,25 @@
 <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>
   <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" 
+        <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"
+        <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"
+        <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"
+        <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"
+        <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-scroll">
         <div class="keyboard-row" for="{{row1Letters}}">
             <input 
                 type="button" 
@@ -42,50 +29,48 @@
                 
             />
         </div>
-        </scroll>
+    </div>
 
     <!-- 第二行 -->
-        <scroll class="keyboard-row-scroll" scroll-x="true">
+    <div class="keyboard-row-scroll">
       <div class="keyboard-row" for="{{row2Letters}}">
         <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-scroll">
       <div class="keyboard-row" for="{{row3Letters}}">
         <input 
             type="button" 
             class="input-button"
             value="{{$item}}"
             onclick="input($item)"
+            
         />
       </div>
-        </scroll>
+    </div>
         
     <div class="function-row">
-            <input type="button" value="中" class="mode-button" onclick="changeToCn"></input>
+      <input type="button" value="中" class="mode-button" onclick="changeToCn"/>
-            <input type="button" value="英" class="mode-button" onclick="changeToEn"></input>
+      <input type="button" value="英" class="mode-button" onclick="changeToEn"/>
-            <input type="button" value="符" class="mode-button" onclick="changeToSymbol"></input>
+      <input type="button" value="符" class="mode-button" onclick="changeToSymbol"/>
-            <input type="button" value="空格" class="space-button" onclick="input(' ')"></input>
+      <input type="button" value="空格" class="space-button" onclick="input(' ')"/>
-            <input type="button" value="←" class="backspace-button" onclick="backspace"></input>
+      <input type="button" value="←" class="backspace-button" onclick="backspace"/>
     </div>
   </div>
-    </swiper>
 </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: {
+        // 默认符号组（较少的符号，保持布局一致）
+        default: {
           row1: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
-        row2: ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")",","],
+          row2: ["!", "@", "#", "%", "&", "*", "(", ")", ","],
-        row3: ["-", "_", "+", "=", "{", "}", "[", "]", "|", "\\","。"]
+          row3: ["_", "=", "{", "}", "[", "]", "。"]
+        },
+        // 补充符号组（额外的符号）
+        alternate: {
+          row1: ["~", "`", "©", "®", "±", "÷", "×", "/", "\\", "∞"],
+          row2: ["♥", "♦", "♣", "♠", "•", "$", "|", "^", "-"],
+          row3: ["¿", "¡", "∑", "∏", "π", "Ω", "∆"]
+        }
       }
     },
     currentWords: [],    // 当前显示的候选词
@@ -144,10 +139,29 @@ export default {
     this.currentWords = candidates.slice(this.wordsPageIndex, this.wordsPageIndex + 5);
   },
 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.symbolToggle = false;  // 重置切换标志
-        this.row2Letters = this.keyboardModes.sy.row2;
+    this.row1Letters = this.keyboardModes.sy.default.row1;
-        this.row3Letters = this.keyboardModes.sy.row3;
+    this.row2Letters = this.keyboardModes.sy.default.row2;
+    this.row3Letters = this.keyboardModes.sy.default.row3;
+  }
 },
   changeToEn() {
     if (this.mode === 'en') {
@@ -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()
@@ -295,9 +286,21 @@ export default {
   margin: 5px 0;
 }
 .keyboard-row {
+  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;
@@ -325,16 +328,7 @@ export default {
 }
 
 
-.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;
@@ -353,6 +347,7 @@ export default {
   height: 60px;
   color: #f0f8ff;
   background-color: #9f83fb;
+  border-radius: 25px; /* 新增圆角 */
 }
 .active-mode {
   background-color: #2196F3;
@@ -414,8 +409,8 @@ export default {
   align-items: center;
   left: 0px;
   top: 0px;
-    width: 454px;
+  width: 466px;
-    height: 454px;
+  height: 100%;
 }
 
 .container-col-candidate {