Home Explore Help
Register Sign In
xinkui
Repositories Public Activity

xinkui pushed to main at Benita/Bit_Wise_World

  • b824cb7d3b Merge branch 'web3_transection'
  • e05c57cd5a Merge branch 'main' of http://47.76.177.38:48976/Benita/Bit_Wise_World
  • 697abe4ebc 12/7完成工作 1.修复 K 线图向左滑动加载历史数据时，连接处出现重复 K 线的问题。 2.优化行情页面 WebSocket 与 HTTP 数据的拼接逻辑，解决图表闪烁。 3.完成 K 线图组件 (KLineChart) 的代码重构与清理。 4.移动端交易页面 UI 开发：基于 Vue 3 + Composition API，完成了加密货币交易币币页面的高保真还原。 严格遵循 375px 移动端设计规范，实现了头部导航、左侧盘口（Order Book）、右侧交易表单及底部当前委托的布局。 5.深度图动画性能优化（重点）：针对盘口深度条的高频刷新需求，重构了动画实现方案。 弃用消耗 CPU 的 width 属性动画，改用 transform: scaleX 配合 will-change 属性。 启用了 GPU 硬件加速，避免了浏览器重排（Reflow），确保在数据频繁跳动时的动画流畅度。 6.交互与视觉细节调整：实现了特殊的“从左向右”深度条延伸动画效果。 7.优化了头部双行布局结构（币种信息与行情数据分离）。 8.完成了底部委托单卡片及空状态样式的开发。
  • 26d5fd0ef9 1
  • feee125672 修i18n
  • View comparison for these 7 commits »

8 months ago

xinkui pushed to web3_transection at Benita/Bit_Wise_World

  • 697abe4ebc 12/7完成工作 1.修复 K 线图向左滑动加载历史数据时，连接处出现重复 K 线的问题。 2.优化行情页面 WebSocket 与 HTTP 数据的拼接逻辑，解决图表闪烁。 3.完成 K 线图组件 (KLineChart) 的代码重构与清理。 4.移动端交易页面 UI 开发：基于 Vue 3 + Composition API，完成了加密货币交易币币页面的高保真还原。 严格遵循 375px 移动端设计规范，实现了头部导航、左侧盘口（Order Book）、右侧交易表单及底部当前委托的布局。 5.深度图动画性能优化（重点）：针对盘口深度条的高频刷新需求，重构了动画实现方案。 弃用消耗 CPU 的 width 属性动画，改用 transform: scaleX 配合 will-change 属性。 启用了 GPU 硬件加速，避免了浏览器重排（Reflow），确保在数据频繁跳动时的动画流畅度。 6.交互与视觉细节调整：实现了特殊的“从左向右”深度条延伸动画效果。 7.优化了头部双行布局结构（币种信息与行情数据分离）。 8.完成了底部委托单卡片及空状态样式的开发。

8 months ago

xinkui pushed to web3_transection at Benita/Bit_Wise_World

8 months ago

xinkui pushed to web3_transection at Benita/Bit_Wise_World

8 months ago

xinkui pushed to web3_transection at Benita/Bit_Wise_World

  • 8a7ab2c37b 实现了k线指标和主图副图1 通用用能添加语言切换路由

8 months ago

xinkui pushed to main at Benita/Bit_Wise_World

8 months ago

xinkui pushed to web3_transection at Benita/Bit_Wise_World

8 months ago

xinkui pushed to web3_transection at Benita/Bit_Wise_World

  • b08f6f636b Reapply "12/4完成工作" This reverts commit fcac748180b57dde761bf9a17cca0c9a26621cff.

8 months ago

xinkui pushed to web3_transection at Benita/Bit_Wise_World

  • d0668dd2fd Revert "11111" This reverts commit 9c2526bc874e18ab675815b3526c4effafbf0764.

8 months ago

xinkui pushed to web3_transection at Benita/Bit_Wise_World

8 months ago

xinkui pushed to web3_transection at Benita/Bit_Wise_World

  • fcac748180 Revert "12/4完成工作" This reverts commit 9d3abdcd7347448c189d62d97326444c9e97d49a.
  • fb31850663 Merge remote-tracking branch 'origin/main' into web3_transection
  • 79823a2159 今日工作12.6 页面美化 1，电费充值 2，电费设置 3，云算力-套餐详情 4，我的算力-我的订单 5，提现 6，我的资产-交易历史 7，划转历史 8，个人中心 页面增加Tab选项动画 1，我的算力 2，申购赎回 3，个人中心 4，我的资产-交易历史 实现功能 1，用户中心所有路由添加 2，初步研究钱包登录，明天实现
  • View comparison for these 3 commits »

8 months ago

xinkui pushed to main at Benita/Bit_Wise_World

8 months ago

xinkui pushed to web3_transection at Benita/Bit_Wise_World

  • 9c2526bc87 11111
  • ba3d19938f Merge branch 'main' into web3_transection # Conflicts: # vue.config.js
  • 47d8511c4d 今日工作12.5 页面增加Tab选项动画 1，消息通知 2，OTC-C2C交易 3，OTC-订单列表 4，ICO 页面美化 1，行情详情 2，贷款-提交信息 实现功能 1，解决行情详情-切换币种弹窗，弹窗显示bug问题 2，熟悉行情模块代码 3，行情委托挂单功能实现 4，行情最新成交功能实现 5，数据监视，做到实时更新
  • 3a1f44dda2 Merge branch 'main' into jiahao
  • 19f7d20e33 以下页面增加Tab选项动画 1，消息通知
  • View comparison for these 20 commits »

8 months ago

xinkui pushed to web3_transection at Benita/Bit_Wise_World

8 months ago

xinkui pushed to main at Benita/Bit_Wise_World

  • 9d3abdcd73 12/4完成工作 1. 重构行情模块 UI 还原与适配 基于 Vue 3 Composition API 完成了行情列表页面的组件开发，严格还原设计稿（375px 基准）。 实现了顶部 Tab 栏（自选/币币/合约/秒合约）的切换交互与动画效果。 完成了列表项的复杂布局：包含币种图标/名称组合、SVG 迷你走势图、最新价及涨跌幅按钮的自适应排列。 优化了表头排序图标（小三角堆叠）和底部“没有更多了”提示样式的细节。 2. 核心业务逻辑实现（分页与筛选） 设计并实现了 “后端分页 + 前端触底加载” 的标准长列表方案，解决了大数据量下的性能问题。 实现了 Tab 切换时的状态管理：自动重置列表数据、页码，并重新请求对应类型的接口。 对接了真实的 TradingPair 后端接口，完成了字段映射（symbol, current_price, trend 等）及数据清洗。 3. WebSocket 实时行情接入 开发了生产级的 WebSocket 客户端逻辑，支持 ws://.../?symbol=... 动态传参连接。 实现了 增量订阅机制：加载新分页数据后，自动更新连接以订阅新币种的实时价格。 实现了 价格与涨跌幅的实时推送更新，支持红涨绿跌的动态样式切换。 4. 稳定性与体验优化 心跳保活：增加了 15s 定时心跳（Ping），防止连接因长时间空闲被断开。 智能重连：实现了非正常断开后的自动重连机制，以及页面从后台切回前台（visibilitychange）时的连接自愈逻辑。 资源管理：优化了 Tab 切换和组件销毁时的资源清理（断开旧 Socket、清除定时器），防止内存泄漏。 🛠 技术细节与难点解决 SVG 迷你图生成：采用前端算法根据涨跌幅动态生成 SVG 面积图（Area Chart），在不请求历史 K 线数据的情况下保证了视觉丰富度。 图标降级策略：实现了 后端 Logo URL -> 本地 SVG -> 首字母占位 的三级显示策略，确保图标始终可用。 Socket 连接复用：设计了单例 Socket 引用模式，切换 Tab 时采用“断旧连新”策略，有效节省了带宽资源。

8 months ago

xinkui pushed to main at Benita/Bit_Wise_World

8 months ago

xinkui pushed to main at Benita/Bit_Wise_World

  • 6f88579108 1
  • 55f2c962b7 Merge branch 'web3_transection'
  • fed4d0ee88 今日工作：1 K线图核心组件封装 2 WebSocket 实时数据流对接 K线最基础的功能已实现 时间戳判断自动生成下一根 K 线（支持 1m/1h/1d 等多周期）等
  • c61dc542de 1. 热门币种列表（HotCoin）核心功能开发 【实时数据】WebSocket 核心链路打通： 完成了前端与行情 WebSocket 服务的对接，实现了从 HTTP 静态列表到 WS 实时数据的平滑切换。 【数据处理】数据动态适配与渲染： 实现了动态生成订阅参数逻辑（自动聚合列表币种，转换为后端要求的 BTCUSDT,ETHUSDT 格式）。 完成了 Ticker 数据映射，实现了价格跳动和涨跌幅颜色的实时更新（涨绿/跌红）。 2. 前端基础建设与工程化配置 【SVG 方案】图标组件化改造： 解决了 Vue 3 + Webpack 环境下 SVG 加载失真及控制难题。舍弃了 img 标签引入方式，通过配置 Loader 将 SVG 转换为 Vue 组件，实现了图标无损缩放及 CSS 变色控制。 【网络层】Axios 封装与跨域处理： 完成了 request.js 的统一封装，集成了 Token 携带及全局错误处理拦截器。 配置 vue.config.js 开发环境代理（Proxy），解决了本地开发调用后端接口时的跨域（CORS）及 404 路径重写问题。 3. 稳定性与健壮性优化（重点攻克） WebSocket 连接治理： 修复连接死循环： 排查并修复了因参数格式（大小写/分隔符）错误导致后端断开，进而触发前端无限重连的 Bug。 优化重连机制： 重构了断线重连逻辑，增加了对正常关闭（Code 1000）的拦截，防止组件销毁后仍在后台重连。 心跳保活： 实现了标准的 Ping/Pong 心跳检测，防止连接因长时间空闲被 Nginx 断开。 资源释放： 优化了组件生命周期管理，确保在 onUnmounted 时正确销毁 Socket 实例及清除所有定时器，防止内存泄漏。
  • 428a2516fb Stop tracking update.js
  • View comparison for these 5 commits »

8 months ago

xinkui pushed to web3_transection at Benita/Bit_Wise_World

  • fed4d0ee88 今日工作：1 K线图核心组件封装 2 WebSocket 实时数据流对接 K线最基础的功能已实现 时间戳判断自动生成下一根 K 线（支持 1m/1h/1d 等多周期）等

8 months ago

xinkui pushed to web3_transection at Benita/Bit_Wise_World

  • c61dc542de 1. 热门币种列表（HotCoin）核心功能开发 【实时数据】WebSocket 核心链路打通： 完成了前端与行情 WebSocket 服务的对接，实现了从 HTTP 静态列表到 WS 实时数据的平滑切换。 【数据处理】数据动态适配与渲染： 实现了动态生成订阅参数逻辑（自动聚合列表币种，转换为后端要求的 BTCUSDT,ETHUSDT 格式）。 完成了 Ticker 数据映射，实现了价格跳动和涨跌幅颜色的实时更新（涨绿/跌红）。 2. 前端基础建设与工程化配置 【SVG 方案】图标组件化改造： 解决了 Vue 3 + Webpack 环境下 SVG 加载失真及控制难题。舍弃了 img 标签引入方式，通过配置 Loader 将 SVG 转换为 Vue 组件，实现了图标无损缩放及 CSS 变色控制。 【网络层】Axios 封装与跨域处理： 完成了 request.js 的统一封装，集成了 Token 携带及全局错误处理拦截器。 配置 vue.config.js 开发环境代理（Proxy），解决了本地开发调用后端接口时的跨域（CORS）及 404 路径重写问题。 3. 稳定性与健壮性优化（重点攻克） WebSocket 连接治理： 修复连接死循环： 排查并修复了因参数格式（大小写/分隔符）错误导致后端断开，进而触发前端无限重连的 Bug。 优化重连机制： 重构了断线重连逻辑，增加了对正常关闭（Code 1000）的拦截，防止组件销毁后仍在后台重连。 心跳保活： 实现了标准的 Ping/Pong 心跳检测，防止连接因长时间空闲被 Nginx 断开。 资源释放： 优化了组件生命周期管理，确保在 onUnmounted 时正确销毁 Socket 实例及清除所有定时器，防止内存泄漏。

8 months ago

xinkui pushed to web3_transection at Benita/Bit_Wise_World

8 months ago