键盘快捷键设置录入
效果图:

代码:
import React, {useContext, useEffect, useRef} from 'react'
import {message} from "antd";
import lodash from "lodash";
import {StateContext} from '../../index.tsx'
import {useUpdateEffect} from "ahooks";
import './index.less'const funcKeys = ['control','shift','alt']
const fCodes = ['f1','f2','f3','f4','f5','f6','f7','f8','f9','f10','f11','f12']
const aCodes = ['q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n','m'
].map((v:any) => 'key' + v)
let downCount = 0
let strArr: string[] = []const placeholder = 'ctrl/shift/alt+a-z,F1-F12'const Shortcut = () => {const {shortcut,} = useContext<any>(StateContext)const refSearch = useRef<any>(null)const refOrderLink = useRef<any>(null)const refCanteen = useRef<any>(null)const refOrderMark = useRef<any>(null)const refSubmit = useRef<any>(null)const refReset = useRef<any>(null)const refCreate = useRef<any>(null)const relationArr:any = [[refSearch, 'search'],[refOrderLink, 'orderLink'],[refCanteen, 'canteen'],[refOrderMark, 'orderMark'],[refSubmit, 'submit'],[refReset, 'reset'],[refCreate, 'create']]useUpdateEffect(() => {relationArr.forEach((v:any) => {if ( shortcut[v[1]] ) {v[0].current.value = shortcut[v[1]]}})}, [shortcut]);const onKeyDown = (e: any) => {let {key, code} = ekey = key.toLowerCase()code = code.toLowerCase()// 判定是否是有效值if (funcKeys.includes(key) || aCodes.includes(code) || fCodes.includes(code)) {} else {return}// 判定是否已经包含if (strArr.includes(key) || strArr.includes(code)) {return}// 如果是初次按下,需要重置str的值if (downCount === 0) {strArr = []}// 记录按键if (funcKeys.includes(key)) {strArr.push(key)}if (aCodes.includes(code)) {strArr.push(code)}if (fCodes.includes(code)) {strArr.push(code)}downCount++e.target.value = strArr.map(v => v.replace('key', '')).join('+')}const onKeyUp = (e: any) => {downCount--if (downCount <= 0) {downCount = 0strArr = []}}// 验证快捷键设置:1 不能重复,2 至少包含一个功能键 + 字母键 3 f1-f12不用包含功能键const checkValidateData = () => {const tmpArr = []for (let i=0; i<relationArr.length; i++) {const item = relationArr[i]if (item[0].current.value) {if (fCodes.includes(item[0].current.value)) {} else {const tArr2 = item[0].current.value.split('+').sort()let hasFunc = false // 包含功能键let hasCode = false // 包含字母键tArr2.forEach((v2:any) => {if (funcKeys.includes(v2)) {hasFunc = true} else if (aCodes.includes('key' + v2)) {hasCode = true}})if (hasFunc && hasCode) {tmpArr.push(tArr2.toString())} else {item[0].current.value = ''message.warn(`快捷键规则:${placeholder}`)return false}}}}// 检查是否重复if (tmpArr.length !== lodash.uniq(tmpArr).length) {message.warn('快捷键重复')return false}return true}const onFocus = (e: any) => {const val = e.target.value// @ts-ignoreval && window.electronAPI && window.electronAPI.changeShortcut({tp: 'delete',val})}const onBlur = () => {const rOk = checkValidateData()// if (!rOk) return;// 保存数据到storeconst tmpObj: any = {}relationArr.forEach((item: any) => {tmpObj[item[1]] = item[0].current.value})// @ts-ignorewindow.electronAPI && window.electronAPI.changeShortcut({tp: 'create',val: tmpObj})}return <div className={'page-config page-shortcut'}><ul><li><span>搜索订单:</span><inputref={refSearch}readOnlyplaceholder={placeholder}onKeyDown={onKeyDown}onKeyUp={onKeyUp}onFocus={onFocus}onBlur={onBlur}/></li><li><span>订单号或选店链接:</span><inputref={refOrderLink}readOnlyplaceholder={placeholder}onKeyDown={onKeyDown}onKeyUp={onKeyUp}onFocus={onFocus}onBlur={onBlur}/></li><li><span>餐厅代码:</span><inputref={refCanteen}readOnlyplaceholder={placeholder}onKeyDown={onKeyDown}onKeyUp={onKeyUp}onFocus={onFocus}onBlur={onBlur}/></li><li><span>订单备注(可空):</span><inputref={refOrderMark}readOnlyplaceholder={placeholder}onKeyDown={onKeyDown}onKeyUp={onKeyUp}onFocus={onFocus}onBlur={onBlur}/></li><li><span>提交:</span><inputref={refSubmit}readOnlyplaceholder={placeholder}onKeyDown={onKeyDown}onKeyUp={onKeyUp}onFocus={onFocus}onBlur={onBlur}/></li><li><span>清空:</span><inputref={refReset}readOnlyplaceholder={placeholder}onKeyDown={onKeyDown}onKeyUp={onKeyUp}onFocus={onFocus}onBlur={onBlur}/></li><li><span>创建:</span><inputref={refCreate}readOnlyplaceholder={placeholder}onKeyDown={onKeyDown}onKeyUp={onKeyUp}onFocus={onFocus}onBlur={onBlur}/></li></ul></div>
}Shortcut.displayName = 'Shortcut'
export default Shortcut
主要onKeyDown和onKeyUp方法的处理,见代码
相关文章:
键盘快捷键设置录入
效果图: 代码: import React, {useContext, useEffect, useRef} from react import {message} from "antd"; import lodash from "lodash"; import {StateContext} from ../../index.tsx import {useUpdateEffect} from "ahoo…...
刷题Day49|647. 回文子串、516.最长回文子序列
647. 回文子串 647. 回文子串 - 力扣(LeetCode) 思路:递推公式的含义是[i, j]内的子串是否为回文子串(bolean[][])。一共两种情况:s[i] s[j],i和j相差1以外就得判断中间包含的的字符串是否为回文了&…...
关于transformers库验证时不进入compute_metrics方法的一些坑
生成式任务输入就是标签 transformers在进入compute_metrics前会有一个判断,源码如下: # 版本 transformers4.41.2 # 在trainer.py 的 3842 行 # Metrics! if (self.compute_metrics is not Noneand all_preds is not Noneand all_labels is not Nonea…...
苹果提出RLAIF:轻量级语言模型编写代码
获取本文论文原文PDF,请在公众号【AI论文解读】留言:论文解读 代码生成一直是一个充满挑战的领域。随着大型语言模型(LLM)的出现,我们见证了在自然语言理解和生成方面的显著进步。然而,当涉及到代码生成&a…...
[leetcode] shortest-subarray-with-sum-at-least-k 和至少为 K 的最短子数组
. - 力扣(LeetCode) class Solution { public:int shortestSubarray(vector<int>& nums, int k) {int n nums.size();vector<long> preSumArr(n 1);for (int i 0; i < n; i) {preSumArr[i 1] preSumArr[i] nums[i];}int res n…...
专业140+总分420+天津大学815信号与系统考研经验天大电子信息与通信工程,真题,大纲,参考书。
顺利上岸天津大学,专业课815信号与系统140,总分420,总结一些自己的复习经历,希望对于报考天大的同学有些许帮助,少走弯路,顺利上岸。专业课: 815信号与系统:指定教材吴大正…...
前端如何取消接口调用
🧑💻 写在开头 点赞 收藏 学会🤣🤣🤣 1. xmlHttpRequest是如何取消请求的? 实例化的XMLHttpRequest对象上也有abort方法 const xhr new XMLHttpRequest(); xhr.addEventListener(load, function(e)…...
k8s 容器环境下的镜像如何转换为docker 使用
在无法连接registry 的环境中,想要把 crictl 中的镜像给docker 使用,应该怎么处理? 其实容器镜像是通用的,crictl 和ctr 以及docker 镜像是可以互相使用的,因为docker 在1.10版本之后遵从了OCI。所以crictl 环境下的镜…...
FreeRTOS 队列
队列是一种任务到任务、任务到中断、中断到任务数据交流的一种机制。在队列中可以存 储数量有限、大小固定的多个数据,队列中的每一个数据叫做队列项目,队列能够存储队列项 目的最大数量称为队列的长度,在创建队列的时候,就需要指…...
如何识别图片文字转化为文本?5个软件帮助你快速提取图片文字
如何识别图片文字转化为文本?5个软件帮助你快速提取图片文字 将图片中的文字提取为文本是一项非常有用的技能,特别是当你需要处理大量扫描文档、截图或其他图片时。以下是五款能够帮助你快速提取图片文字的软件: 迅捷文字识别 这是一款非…...
Flink SQL kafka连接器
版本说明 Flink和kafka的版本号有一定的匹配关系,操作成功的版本: Flink1.17.1kafka_2.12-3.3.1 添加kafka连接器依赖 将flink-sql-connector-kafka-1.17.1.jar上传到flink的lib目录下 下载flink-sql-connector-kafka连接器jar包 https://mvnreposi…...
glm-4 联网搜索 api 测试
今天测试了一下 glm-4 的联网搜索 web_search tool 调用,发现了 web_search 的网页检索返回结果中几个比较诡异的事情,特此记录: 有些检索结果没有 icon、link、media 字段,但从内容上看确实是联网搜索出来的结果,不知…...
Java毕业设计 基于SSM vue图书管理系统小程序 微信小程序
Java毕业设计 基于SSM vue图书管理系统小程序 微信小程序 SSM 图书管理系统小程序 功能介绍 用户 登录 注册 首页 图片轮播 图书信息推荐 图书详情 赞 踩 评论 收藏 系统公告 公告详情 用户信息修改 我的待还 图书归还 催还提醒 我的收藏管理 意见反馈 管理员 登录 个人中心…...
bert训练的一些技巧(rand() < self.skipgram_prb)
rand() < self.skip_gram_prb) 是一个条件表达式,用来判断是否进行skip-gram掩码操作。这种掩码操作通常用于自然语言处理中的数据增强,通过概率决定是否应用skip-gram掩码。下面是对这个表达式的详细解释: 解释 rand(): rand() 是一个随…...
pandas修改时间索引报错处理
import pandas as pd import numpy as np import osdfpd.DataFrame(index[a,b,c],data{序列:[1,2,3]}) df.rename(index{a:a1},inplaceTrue) print(df) print(df.index.dtype)df1pd.DataFrame(index[2024-01-01,2024-01-02,2024-01-03],data{序列:[1,2,3]}) df1.rename(index{2…...
Nginx Bla~Bla~
root 和 alias指令都用于指定服务器上的文件系统路径,但它们在用法和行为上有一些不同 root指令通常用于在Nginx配置中定义一个目录,该目录将作为请求的根目录。 server { location /static/ {root /var/www; 请求 /static/index.html 将映射到 /v…...
java awt和swing介绍
Java AWT(Abstract Window Toolkit)和 Swing 是用于创建图形用户界面(GUI)的 Java API。 AWT AWT 是 Java 最初的平台依赖的窗口图形界面工具包,它提供了一组基本的 GUI 组件、窗口管理、事件处理等。AWT 组件是重量…...
奇怪的错误记录
https://github.com/meta-llama/llama3/issues/80 读模型没问题,推理时出现: RuntimeError: “triu_tril_cuda_template” not implemented for ‘BFloat16’ ———————————————— 事发原因 我尝试了解transformers的AutoProcessor时&a…...
来啦,经典传说大变身牛郎织女后代逗趣日常
《落凡尘:星宿大冒险》来啦! 经典传说大变身,牛郎织女后代金风, 上演一出“星际小侦探”的逗趣日常! 想象一下,二十八星宿那些傲娇的星星们, 居然能“离家出走”,还差点把天给掀了…...
【uniapp-ios】App端与webview端相互通信的方法以及注意事项
前言 在开发中,使用uniapp开发的项目开发效率是极高的,使用一套代码就能够同时在多端上线,像笔者之前写过的使用Flutter端和webview端之间的相互通信方法和问题,这种方式本质上实际上是h5和h5之间的通信,网上有非常多…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议(EPSFD 2025)将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会,EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...
大语言模型如何处理长文本?常用文本分割技术详解
为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket(服务端和客户端都要)2. 绑定本地地址和端口&#x…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...
go 里面的指针
指针 在 Go 中,指针(pointer)是一个变量的内存地址,就像 C 语言那样: a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10,通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...
论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving
地址:LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂,正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...
