为调试界面添加键盘

8 months ago · 4a5b75532e
2 changed files with 256 additions and 2 deletions
--- a/html/debug/index.html
+++ b/html/debug/index.html
@ -16,7 +16,7 @@
  <script src="./dayjs/plugin/quarterOfYear.js"></script>
  <script src="./ant-design-vue/antd.min.js"></script>
  <link href="./ant-design-vue/reset.min.css" rel="stylesheet">
-</head>
+  <script src="./virtual-keyboard.js"></script>
 </head>

 <body>
@ -44,7 +44,8 @@
                <a-select-option v-for="enumValue in item.paramInfoMap[param].enumValues" :key="enumValue"
                  :value="enumValue">{{enumValue}}</a-select-option>
              </a-select>
-              <a-input v-else v-model:value="item.values[param]" :placeholder="param" />
+              <!-- 点击输入框后弹出键盘 -->
+              <a-input v-else v-model:value="item.values[param]" :placeholder="param" @click="showKeyboard(item.values, param)"></a-input>
            </div>
            <a-button style="margin-left:5px;" @click="actionActionExecute(item)">执行</a-button>
          </div>
@ -92,6 +93,8 @@
          return this.actions.map(i => ({ key: i.key, label: i.key }));
        }
      },
+      mounted() {
+      },
      methods: {
        // connect
        actionConnect() {
@ -130,6 +133,23 @@
          this.logs = [];
        },

+        showKeyboard(values, param) {
+          const inputElement = document.querySelector(`input[placeholder="${param}"]`);
+          if (inputElement) {
+            VirtualKeyboard.show(inputElement);
+            this.updateDisplayContainer(inputElement);
+          }
+        },
+
+        updateDisplayContainer(inputElement) {
+          const displayContainer = document.querySelector('.virtual-keyboard-display');
+          if (displayContainer) {
+            inputElement.addEventListener('input', () => {
+              displayContainer.textContent = inputElement.value;
+            });
+          }
+        },
+
        // action list reload
        actionListReload(response) {
          let data = response.rely;
--- a/html/debug/virtual-keyboard.js
+++ b/html/debug/virtual-keyboard.js
@ -0,0 +1,234 @@
+class VirtualKeyboard {
+    static show(inputElement) {
+        // Create the virtual keyboard container
+        const keyboardContainer = document.createElement('div');
+        keyboardContainer.classList.add('virtual-keyboard');
+        document.body.appendChild(keyboardContainer);
+
+        // Create the display container for input characters
+        const displayContainer = document.createElement('div');
+        displayContainer.classList.add('virtual-keyboard-display');
+        document.body.appendChild(displayContainer);
+
+        // Create the text display box above the number keys
+        const textDisplayBox = document.createElement('div');
+        textDisplayBox.classList.add('virtual-keyboard-text-display');
+        textDisplayBox.style.height = '40px'; // Initialize height
+        textDisplayBox.textContent = inputElement.value; // Initialize content
+        keyboardContainer.appendChild(textDisplayBox);
+
+        // Define the keys for the virtual keyboard
+        const keyLayout = [
+            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'Backspace'],
+            ['Tab', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'Del'],
+            ['CapsLock', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'Enter'],
+            ['Shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'Shift'],
+            ['Space']
+        ];
+
+        let isShift = false;
+        let isCapsLock = false;
+
+        // Create buttons for each key
+        keyLayout.forEach(row => {
+            const rowContainer = document.createElement('div');
+            rowContainer.classList.add('virtual-keyboard-row');
+            row.forEach(key => {
+                const keyButton = document.createElement('button');
+                keyButton.textContent = key;
+                keyButton.classList.add(`key-${key.toLowerCase()}`);
+                keyButton.addEventListener('mousedown', (event) => {
+                    event.preventDefault(); // Prevent losing focus from the input element
+                    keyButton.classList.add('active'); // Add active class on mousedown
+                    if (key === 'Backspace') {
+                        inputElement.value = inputElement.value.slice(0, -1);
+                    } else if (key === 'Del') {
+                        inputElement.value = '';
+                    } else if (key === 'Tab') {
+                        inputElement.value += '\t';
+                    } else if (key === 'Space') {
+                        inputElement.value += ' ';
+                    } else if (key === 'Enter') {
+                        document.body.removeChild(keyboardContainer);
+                        document.body.removeChild(displayContainer);
+                    } else if (key === 'Shift') {
+                        // isShift = !isShift;
+                        // this.toggleShift(keyButton, isShift);
+                    } else if (key === 'CapsLock') {
+                        isCapsLock = !isCapsLock;
+                        this.toggleCapsLock(keyButton, isCapsLock);
+                    } else {
+                        inputElement.value += isCapsLock ? key.toUpperCase() : key.toLowerCase();
+                    }
+                    inputElement.dispatchEvent(new Event('input')); // Trigger input event to update Vue binding
+                    displayContainer.textContent = inputElement.value; // Update display container with input value
+                    textDisplayBox.textContent = inputElement.value; // Update text display box with input value
+                });
+                keyButton.addEventListener('mouseup', () => {
+                        keyButton.classList.remove('active'); // Remove active class on mouseup
+                        keyButton.style.background = '#fff'; // Reset background immediately
+                });
+                keyButton.addEventListener('mouseleave', () => {
+                        keyButton.classList.remove('active'); // Remove active class if mouse leaves the button
+                        keyButton.style.background = '#fff'; // Reset background immediately
+                });
+                rowContainer.appendChild(keyButton);
+            });
+            keyboardContainer.appendChild(rowContainer);
+        });
+
+        // Position the keyboard at the bottom of the screen
+        keyboardContainer.style.position = 'fixed';
+        keyboardContainer.style.bottom = '0';
+        keyboardContainer.style.left = '50%';
+        keyboardContainer.style.transform = 'translateX(-50%)';
+        keyboardContainer.style.width = '100%';
+        keyboardContainer.style.maxWidth = '800px';
+        keyboardContainer.style.margin = '0 auto';
+        keyboardContainer.style.border = '1px solid #999';
+
+        // Position the display container above the keyboard
+        displayContainer.style.position = 'fixed';
+        displayContainer.style.bottom = 'calc(100% + 10px)';
+        displayContainer.style.left = '50%';
+        displayContainer.style.transform = 'translateX(-50%)';
+        displayContainer.style.width = '100%';
+        displayContainer.style.maxWidth = '800px';
+        displayContainer.style.textAlign = 'center';
+        displayContainer.style.padding = '10px';
+        displayContainer.style.background = '#f0f0f0';
+        displayContainer.style.borderTop = '1px solid #999';
+        displayContainer.style.boxShadow = '0 -2px 10px rgba(0, 0, 0, 0.1)';
+        displayContainer.style.zIndex = '1000';
+
+        // Style the text display box
+        textDisplayBox.style.width = '100%';
+        textDisplayBox.style.padding = '10px';
+        textDisplayBox.style.background = '#e0e0e0';
+        textDisplayBox.style.textAlign = 'center';
+        textDisplayBox.style.fontSize = '18px';
+        textDisplayBox.style.marginBottom = '10px';
+
+        // Hide the keyboard and display container when the input loses focus
+        inputElement.addEventListener('blur', () => {
+            setTimeout(() => {
+                if (document.activeElement !== inputElement) {
+                    document.body.removeChild(keyboardContainer);
+                    document.body.removeChild(displayContainer);
+                }
+            }, 30);
+        });
+    }
+
+    static toggleShift(button, isShift) {
+        button.classList.toggle('active', isShift);
+    }
+
+    static toggleCapsLock(button, isCapsLock) {
+        const keys = document.querySelectorAll('.virtual-keyboard button');
+        keys.forEach(key => {
+            if (key.textContent.length === 1 && key.textContent.match(/[a-z]/i)) {
+                key.textContent = isCapsLock ? key.textContent.toUpperCase() : key.textContent.toLowerCase();
+            }
+        });
+    }
+}
+
+// Add some basic styles for the virtual keyboard
+const style = document.createElement('style');
+style.textContent = `
+  .virtual-keyboard {
+    display: flex;
+    flex-direction: column;
+    background: #f0f0f0;
+    padding: 10px;
+    border-top: 1px solid #999;
+    border: 1px solid #999;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  .virtual-keyboard-row {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 5px;
+  }
+  .virtual-keyboard button {
+    margin: 5px;
+    padding: 15px;
+    font-size: 18px;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+    background: #fff;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    transition: background 0.3s, box-shadow 0.3s;
+    flex: 1 1 8%;
+    max-width: 60px;
+  }
+  .virtual-keyboard button:hover {
+    background: #e0e0e0;
+  }
+  .virtual-keyboard button:active {
+    background: #d0d0d0;
+    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
+  }
+  .virtual-keyboard button.active {
+    background: #d0d0d0;
+  }
+  .virtual-keyboard .key-backspace {
+    flex: 1 1 10%;
+    max-width: 100px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .virtual-keyboard .key-enter {
+    flex: 1 1 10%;
+    max-width: 100px;
+  }
+  .virtual-keyboard .key-shift {
+    flex: 1 1 15%;
+    max-width: 150px;
+  }
+  .virtual-keyboard .key-capslock,
+  .virtual-keyboard .key-tab,
+  .virtual-keyboard .key-del {
+    flex: 1 1 10%;
+    max-width: 100px;
+  }
+  .virtual-keyboard .key-space {
+    flex: 1 1 60%;
+    max-width: 400px;
+  }
+  .virtual-keyboard-display {
+    font-size: 24px;
+    color: #333;
+  }
+  .virtual-keyboard-text-display {
+    width: 100%;
+    padding: 10px;
+    background: #e0e0e0;
+    text-align: center;
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+  .virtual-keyboard-row:first-child {
+    justify-content: space-between;
+  }
+  .virtual-keyboard-row:nth-child(2) {
+    justify-content: space-between;
+  }
+  .virtual-keyboard-row:nth-child(3) {
+    justify-content: space-between;
+  }
+  .virtual-keyboard-row:nth-child(4) {
+    justify-content: space-between;
+  }
+  .virtual-keyboard-row:nth-child(5) {
+    justify-content: center;
+  }
+`;
+document.head.appendChild(style);