业务和功能介绍
业务背景
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 套键盘模板的纯配置数据
示例图片视频
相似推荐
CPU机器人
本方案打造的生动数字人，硬件门槛极低：最低仅需 1 核 CPU、2GB 内存即可流畅运行，完全无需 GPU 加速，让普通办公电脑也能轻松承载。它凭借轻量高效的算法，在低配环境下依然能呈现鲜活自然的交互效果。同时支持 Windows 与 macOS 双平台，兼容广泛，便于用户跨系统使用。整体结构高度可移植，可快速部署到不同设备与场景，实现灵活迁移，是兼顾性能与成本的高性价比选择。
社交app
户外活动社交 APP 包含用户端与发布端两大端口。平台支持活动创建发布，可设置多场次供用户选择报名，接入微信、支付宝完成线上支付。内置社群 IM 聊天功能，方便参与者实时沟通；同时提供帖子动态、用户关注体系，搭配消息推送能力，及时通知报名、活动及互动信息。产品打通户外爱好者从查找活动、挑选场次、付费报名，到线上交流、内容分享、建立社交联系的完整闭环，一站式满足户外人群的活动参与与社交需求
博客个人作品-沫沫博客
一个已上线运行的内容博客平台，支持多用户注册、内容创作、分类管理与互动沉淀。项目由我独立设计、开发并部署上线，目前线上稳定运行，架构可直接复用于企业内容管理、社区、后台管理系统等场景。
【核心功能模块】
用户模块：注册、登录（JWT 无状态鉴权 + BCrypt 密码加密）、退出登录、个人中心（昵称与头像维护、修改密码、头像文件上传）。
内容模块：文章的发布、编辑、删除、分页浏览与详情查看；分类的增删改查；文章浏览量统计。
互动模块：评论（查看/发布/删除）、点赞、收藏，以及“我的文章”“我的收藏”列表。
系统支撑：统一响应格式与全局异常处理、登录失败锁定、接口限流、Swagger 在线接口文档。
【业务流程】 用户注册或登录后，由服务端签发 JWT 令牌，前端保存并随每次请求携带 → 在首页分页浏览文章列表、按分类筛选 → 进入详情页阅读（浏览量自动 +1，可点赞、收藏、评论）→ 在创作页撰写文章并选择分类发布 → 在个人中心管理自己的文章、收藏与账号资料。
【交付说明】 项目提供完整接口文档（Swagger / Apifox 可直接导入），配置按 dev/prod 多环境拆分，本地开发与线上部署互不干扰，支持替换 jar 包快速迭代上线，便于后续二次开发与长期维护。
语聊社交 APP
一款面向国内市场的语聊社交APP，包含IM通讯、语音房间、礼物打赏等核心功能。后端采用Java实现业务逻辑，后台管理系统基于Vue，投放与监控体系由Python独立开发。
我的职责：
负责整套服务器的日常运维、故障排查与容量规划，保障生产环境稳定运行
维护Java后端服务（Spring Boot）
维护Vue后台管理系统
维护Python投放监控脚本
维护jenkins的CI&CD
云音乐播放器-云音乐播放器
这是一款深度融合云技术的智能音乐播放器，它彻底打破了本地存储的限制。只需一个账号，你收藏的所有歌曲、创建的歌单以及播放记录都会实时同步到云端，让你在手机、电脑和平板间无缝切换，随时随地续播。它依托强大的算法，能根据你的听歌习惯精准推荐可能喜欢的冷门佳作或热门新歌。配合无损音质与沉浸式的界面设计，它不仅是播放工具，更是懂你品味的私人音乐管家
帮助文档
Copyright @ 2021-2024 程聚宝 | 浙ICP备2021014372号
人工客服