业务和功能介绍
业务背景
KeyPanel 是服务于证券交易全流程的各类数值与凭证输入。
证券交易对输入的要求远高于普通表单：价格必须精确到 2 位小数，委托数量必须是 100 股的整数倍，资金与交易密码必须绕过第三方输入法以规避键盘记录风险，且买入、卖出需通过红蓝配色强化操作语义。系统原生键盘在这些维度上均无法满足——它只能事后校验再报错，无法提供场景化按键，也无法保证输入安全与视觉一致性。KeyPanel 正是为解决这些业务痛点而设计。
覆盖业务场景
系统共 7 套键盘模板，覆盖全站全部输入场景：
交易登录（type 1/2）：数字与字母双键盘，支持 123/ABC 标签页切换，数字键可乱序，用于账号与密码输入。
股票代码搜索（type 3）：顶部提供 600/601/000/002/300 常用代码前缀，支持 ABC 键切换字母键盘。
下单交易（type 4/5）：价格键盘提供 00 补位键便于快速输入整数价位；数量键盘左侧集成「全仓 / 半仓 / 1/3仓 / 1/4仓」快捷仓位键。
银证转账（type 6/7）：金额键盘采用内联模式嵌入页面流；密码键盘去除小数点，专用于资金密码与银行密码录入。
核心功能
输入精度前置拦截。支持最大长度、重复小数点拦截、小数位超限自动截断（非四舍五入），非法字符在输入阶段即被拒绝，而非事后弹错。
场景化快捷按键。仓位比例键、代码前缀键、00 补位键、ABC/123 键盘切换键，均为证券业务专属。
安全与合规。密码输入全程走自绘键盘，不触发系统输入法；登录类键盘支持数字键随机乱序，防范窥屏与按键记录。
主题适配。内置明暗双主题共 26 组色值，业务侧可通过 themeOverride 覆盖确认键颜色，实现买入红、卖出蓝的语义化配色。
完整交互体验。提供按键放大气泡、键盘滑入滑出动画、点击外部自动关闭、position: fixed 浮层输入框避让、确定键 Promise loading 防重复提交，以及可点击定位的光标。
双挂载模式。支持全局弹出（命令式 API，脱离文档流挂载至 body）与内联嵌入（声明式，占据页面流）两种方式，适配不同页面布局。
KeyPanel 是服务于证券交易全流程的各类数值与凭证输入。
证券交易对输入的要求远高于普通表单：价格必须精确到 2 位小数，委托数量必须是 100 股的整数倍，资金与交易密码必须绕过第三方输入法以规避键盘记录风险，且买入、卖出需通过红蓝配色强化操作语义。系统原生键盘在这些维度上均无法满足——它只能事后校验再报错，无法提供场景化按键，也无法保证输入安全与视觉一致性。KeyPanel 正是为解决这些业务痛点而设计。
覆盖业务场景
系统共 7 套键盘模板，覆盖全站全部输入场景：
交易登录（type 1/2）：数字与字母双键盘，支持 123/ABC 标签页切换，数字键可乱序，用于账号与密码输入。
股票代码搜索（type 3）：顶部提供 600/601/000/002/300 常用代码前缀，支持 ABC 键切换字母键盘。
下单交易（type 4/5）：价格键盘提供 00 补位键便于快速输入整数价位；数量键盘左侧集成「全仓 / 半仓 / 1/3仓 / 1/4仓」快捷仓位键。
银证转账（type 6/7）：金额键盘采用内联模式嵌入页面流；密码键盘去除小数点，专用于资金密码与银行密码录入。
核心功能
输入精度前置拦截。支持最大长度、重复小数点拦截、小数位超限自动截断（非四舍五入），非法字符在输入阶段即被拒绝，而非事后弹错。
场景化快捷按键。仓位比例键、代码前缀键、00 补位键、ABC/123 键盘切换键，均为证券业务专属。
安全与合规。密码输入全程走自绘键盘，不触发系统输入法；登录类键盘支持数字键随机乱序，防范窥屏与按键记录。
主题适配。内置明暗双主题共 26 组色值，业务侧可通过 themeOverride 覆盖确认键颜色，实现买入红、卖出蓝的语义化配色。
完整交互体验。提供按键放大气泡、键盘滑入滑出动画、点击外部自动关闭、position: fixed 浮层输入框避让、确定键 Promise loading 防重复提交，以及可点击定位的光标。
双挂载模式。支持全局弹出（命令式 API，脱离文档流挂载至 body）与内联嵌入（声明式，占据页面流）两种方式，适配不同页面布局。
项目实现
业务层 通过 KeyInput 接入，提供 kb-type、themeOverride、业务回调
输入控件层 KeyInput.vue 模拟输入框、光标定位、键盘避让、值管理
调度层 global-keyboard.js 命令式 API，负责实例化、挂载到 body、事件桥接、生命周期
渲染层 KeyPanel.vue 纯渲染引擎，读取模板渲染按键，统一动作分发
数据层 keypanel-templates.js 7 套键盘模板的纯配置数据
输入控件层 KeyInput.vue 模拟输入框、光标定位、键盘避让、值管理
调度层 global-keyboard.js 命令式 API，负责实例化、挂载到 body、事件桥接、生命周期
渲染层 KeyPanel.vue 纯渲染引擎，读取模板渲染按键，统一动作分发
数据层 keypanel-templates.js 7 套键盘模板的纯配置数据
示例图片视频
相似推荐
Java 应用集群迁移与 Elasticsearch 数据同步
一、背景与目标
客户因业务调整，需要将现有生产环境的网站服务及数据完整迁移至新服务器。涉及约 10 个 Java 网络应用程序及配套的搜索、消息队列服务。目标是在保证数据完整性的前提下，实现业务的平滑割接，确保迁移后服务可正常访问。
二、功能模块
1.全量服务迁移： 涵盖 Elasticsearch 7.8.0 搜索引擎、Nginx 反向代理、RabbitMQ 消息队列及 Redis 缓存服务的部署与配置还原。
2.Java 应用部署： 迁移并配置 10 个左右的 Java 后端应用，恢复其 JVM 参数及配置文件。
3.数据一致性保障： 执行数据库与索引数据的导出导入操作，确保新旧环境数据一致。
CentOS7 Docker 基础运行环境搭建与组件部署
客户需要在单台 CentOS 7 服务器上快速构建一套标准化的后端开发与运行环境。目标是替代繁琐的手动安装过程，通过容器化技术统一部署 MySQL、MongoDB、Redis、Kafka、Zookeeper、MinIO 等中间件，并预置 GoLang 开发环境，确保环境的一致性和可移植性。
功能模块：
1.中间件容器化： 集成 MySQL 5.7+、MongoDB 6.0+、Redis 7.0+、Kafka 及 Zookeeper 等核心组件，通过 Docker Compose 进行统一编排启动。
2.对象存储服务： 部署 MinIO 对象存储，用于非结构化数据的存储测试。
3.环境初始化： 编写初始化脚本，自动完成各组件的用户名密码配置（如 mysql/mongodb/redis/minio 统一认证），并安装 GoLang 1.18 及 Git 工具链，交付即可用的基础镜像环境。
MyDiary
海外版 Android 应用独立开发实践，基于 Kotlin + Jetpack Compose + MVVM 架构，覆盖音乐播放器与隐私日记两款产品。音乐播放器支持本地音频扫描、后台播放、通知/媒体会话控制、播放队列、进度控制、循环模式及状态持久化；隐私日记支持富文本编辑、图片/表情/标签、多字体主题、时间线浏览、本地密码锁、云同步备份恢复与数据导出，注重海外用户隐私合规、流畅交互与数据安全保障。负责需求分析、UI/UX、架构设计、音视频/数据存储/同步模块实现及持续迭代。
半熟类社交平台
重逢的创建初衷是提供一个平台，为用户维护个人的半熟社交人际关系，辅助用户整合非日常交流好友资源，以此为用户提供可能需要的人际关系价值。项目的主要通过iOS和Android两个主流平台APP提供服务，后端通过ECS中PHP提供平台服务，并通过Python提供一定的数据分析服务。
求职投递管理平台
当前大学生求职海投过程中，经常出现投递企业过多、面试进度混乱、遗忘跟进简历状态等问题，缺少轻量化的进度跟踪工具。本求职投递管理系统以此为背景立项，目标是打造一款浏览器本地存储的求职台账工具。系统包含投递记录管理、待办事项提醒、进度数据看板、求职漏斗统计、数据导出备份五大核心模块。用户可以新增、检索、筛选所有投递记录，实时查看投递、笔试、面试、offer 全流程状态；首页看板可视化展示投递总量、面试数量与回应率，临近面试任务自动提醒，所有数据保存在浏览器本地，无需后端服务器，保障个人求职隐私安全。
帮助文档
Copyright @ 2021-2024 程聚宝 | 浙ICP备2021014372号
人工客服