123

添加多个符号
修复间隔问题
2025-04-27 19:31:39 +08:00 · 2025-04-27 19:30:32 +08:00 · 2025-04-27 19:07:59 +08:00 · 2025-04-27 19:04:16 +08:00 · 2025-04-27 18:22:37 +08:00 · 2025-04-27 18:17:03 +08:00
3 changed files with 231 additions and 269 deletions
--- a/README.md
+++ b/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)  | 实在是团队开发好帮手，推荐 ✓ |
--- a/manifest.json
+++ b/manifest.json
@@ -10,7 +10,10 @@
  "features": [
    {
      "name": "blueos.app.appmanager.router"
-    },{ "name": "blueos.window.prompt" }
+    },
+    {
+      "name": "blueos.window.prompt"
+    }
  ],
  "deviceTypeList": [
    "watch",
--- a/pages/Demo/index.ux
+++ b/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>

-                />
-            </div>
-        </scroll>
+    <!-- 第二行 -->
+    <div class="keyboard-row-scroll">
+      <div class="keyboard-row" for="{{row2Letters}}">
+        <input 
+            type="button" 
+            class="input-button"
+            value="{{$item}}"
+            onclick="input($item)"
            
-        <!-- 第二行 -->
-        <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>
-    </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>
Author	SHA1	Message	Date
chorblack	ebeed05f76	123	2025-04-27 19:31:39 +08:00
chorblack	babb1fc3b6	添加多个符号	2025-04-27 19:30:32 +08:00
chorblack	f25164e2e0	修复间隔问题	2025-04-27 19:07:59 +08:00
chorblack	a26d2f7d66	没啥变化	2025-04-27 19:04:16 +08:00
chorblack	cec8718629	优化键盘	2025-04-27 18:22:37 +08:00
chorblack	598410dd67	弹出式	2025-04-27 18:17:03 +08:00
chorblack	2a87eca8e4	模块化准备	2025-04-26 23:01:14 +08:00
chorblack	a18a07be71	...	2025-04-26 22:59:40 +08:00
chorblack	36e25fa8a9	模块化准备	2025-04-26 22:58:47 +08:00
chorblack	4e80d6236c	Merge branch 'main' of git.chorblack.top:admin/keypan	2025-04-26 22:53:01 +08:00
chorblack	515ea8665c	修改显示bug	2025-04-26 22:52:58 +08:00