Jun 的个人文集：记录前端工程、AI 工具、Agent 实践与安静生活。https://blog.ipage.fun/https://blog.ipage.fun/posts/adapting-browser-translation-to-real-web-pages/https://blog.ipage.fun/posts/adapting-browser-translation-to-real-web-pages/浏览器翻译插件在测试页面里跑通并不难，麻烦的是它要长期面对 SPA 路由、动态加载、复杂布局、站点样式和局部失败。上线以后，我更多时间花在让它稳定适配真实网页，而不是继续堆翻译功能。Mon, 22 Jun 2026 13:12:00 GMThttps://blog.ipage.fun/posts/contextual-llm-word-lookup-fallback/https://blog.ipage.fun/posts/contextual-llm-word-lookup-fallback/Parallel Translate 里有些词不是普通单词，而是品牌、银行、产品名或缩写。直接让 LLM 接管所有未命中查词会变慢也会变脏，我最后把它限制成只在用户主动查词、有上下文时触发的语境化兜底。Thu, 18 Jun 2026 02:36:00 GMThttps://blog.ipage.fun/posts/making-word-lookup-fast-before-making-it-rich/https://blog.ipage.fun/posts/making-word-lookup-fast-before-making-it-rich/在 Parallel Translate 里，主动查词最重要的是先让用户看到可用结果。后来我把查词接口从同步等待外部富化，改成先返回词库结果，再把音频、例句和补充释义放到后台慢慢补齐。Sun, 14 Jun 2026 12:24:00 GMThttps://blog.ipage.fun/posts/why-selection-translation-panel-is-hard/https://blog.ipage.fun/posts/why-selection-translation-panel-is-hard/划词翻译看起来只是选中文字后弹出一个小面板，真正难的是选区解释、浮层定位、样式隔离、词典与 AI 编排、发音播放和生词状态同步。一个小面板背后，其实是一套横跨页面、扩展和后台服务的交互系统。Thu, 11 Jun 2026 02:00:00 GMThttps://blog.ipage.fun/posts/electron-nextjs-zero-change-packaging/https://blog.ipage.fun/posts/electron-nextjs-zero-change-packaging/StockTracker 之前是一个纯 Web 服务，想着 Electron 易于分发，尝试把它打包成桌面客户端。本文记录整个过程中 Next.js 代码零改动的架构设计、踩过的坑和最终方案。Sat, 30 May 2026 02:00:00 GMThttps://blog.ipage.fun/posts/governing-ai-translation-requests-in-a-browser-extension/https://blog.ipage.fun/posts/governing-ai-translation-requests-in-a-browser-extension/在双语阅读扩展里，翻译请求如果由页面脚本随手发送，很快会变慢、变贵、难以恢复。我在 Parallel Translate 中如何把缓存、批处理、多 Provider 与页面渲染拆开处理。Fri, 29 May 2026 02:00:00 GMThttps://blog.ipage.fun/posts/building-a-bilingual-reading-view-inside-web-pages/https://blog.ipage.fun/posts/building-a-bilingual-reading-view-inside-web-pages/我最近在做一个双语阅读浏览器扩展。真正棘手的并不是把一句英文交给翻译服务，而是在不破坏原网页的前提下，找到正文、按需翻译、保留交互，并且随时还原页面。Wed, 27 May 2026 02:00:00 GMThttps://blog.ipage.fun/posts/sqlite-as-the-core-of-a-local-first-investment-system/https://blog.ipage.fun/posts/sqlite-as-the-core-of-a-local-first-investment-system/在 StockTracker 里，我没有把 SQLite 当成一个简陋的本地缓存，而是把它作为个人投资账本和 AI 工作流状态的本地数据底座。这篇文章从持久化方案对比讲到 SQLite 的机制和取舍。Mon, 18 May 2026 12:00:00 GMThttps://blog.ipage.fun/posts/why-javascript-number-is-not-enough-for-investment-accounting/https://blog.ipage.fun/posts/why-javascript-number-is-not-enough-for-investment-accounting/JavaScript 的 number 很方便，但它表达的是二进制浮点数，不是金融系统需要的十进制语义。这篇文章从 0.1 + 0.2 讲到手续费、每股成本、FIFO 成本队列和 big.js 选型。Sun, 17 May 2026 12:00:00 GMThttps://blog.ipage.fun/posts/how-ai-chat-streaming-works/https://blog.ipage.fun/posts/how-ai-chat-streaming-works/很多 AI 对话产品看起来像是在一个字一个字地打出来，背后通常不是 WebSocket，而是基于 text/event-stream 或 ReadableStream 的 HTTP 流式响应。这篇文章拆解 SSE、Content-Type 和前端增量渲染的实现细节。Sun, 10 May 2026 13:00:00 GMThttps://blog.ipage.fun/posts/the-hard-part-of-ai-chat-is-workflow-state/https://blog.ipage.fun/posts/the-hard-part-of-ai-chat-is-workflow-state/在 StockTracker 里做 AI 对话之后，我越来越觉得真正难的不是把模型接进聊天框，而是让一次提问、一次澄清、一次分析和一段历史都能成为可继续推进的工作流状态。Fri, 08 May 2026 12:00:00 GMThttps://blog.ipage.fun/posts/making-ai-investment-analysis-reliable-starts-with-accounting/https://blog.ipage.fun/posts/making-ai-investment-analysis-reliable-starts-with-accounting/在 StockTracker 里，我越来越意识到 AI 投研体验的底座不是提示词，而是可审计的交易账本、成本口径、手续费规则和行情有效性。Tue, 05 May 2026 12:00:00 GMThttps://blog.ipage.fun/posts/building-a-local-first-investment-agent/https://blog.ipage.fun/posts/building-a-local-first-investment-agent/StockTracker 的 AI Agent 不是通用聊天机器人，而是围绕本地持仓数据工作的投研助手。这篇文章拆解它的设计思路、核心链路和一些取舍。Thu, 30 Apr 2026 12:00:00 GMThttps://blog.ipage.fun/posts/dont-give-away-memory-ownership-when-building-agents/https://blog.ipage.fun/posts/dont-give-away-memory-ownership-when-building-agents/很多 Agent 产品把“记忆”当成体验卖点，但从工程和产品角度看，我越来越觉得记忆所有权才是真正的核心。Sun, 19 Apr 2026 11:40:00 GMThttps://blog.ipage.fun/posts/what-i-care-about-when-using-claude-code-for-large-migrations/https://blog.ipage.fun/posts/what-i-care-about-when-using-claude-code-for-large-migrations/大模型确实能显著加速复杂项目迁移，但真正决定结果的，往往不是模型本身，而是分工、文档和约束。Thu, 09 Apr 2026 13:10:00 GMThttps://blog.ipage.fun/posts/thinking-matters-more-than-speed-in-the-ai-era/https://blog.ipage.fun/posts/thinking-matters-more-than-speed-in-the-ai-era/在 AI 把“快速得到答案”变成默认体验之后，我反而越来越在意慢思考、深阅读和独立判断能力。Sat, 28 Mar 2026 12:30:00 GMThttps://blog.ipage.fun/posts/react-state-management-libraries-comparison/https://blog.ipage.fun/posts/react-state-management-libraries-comparison/状态管理库没有绝对最优，尤其在大型 To B 项目里，真正需要比较的是状态类型、更新模型、性能边界、团队协作成本以及它是否适合当前业务规模。Fri, 18 Apr 2025 02:00:00 GMThttps://blog.ipage.fun/posts/migrating-client-state-from-mobx-to-zustand/https://blog.ipage.fun/posts/migrating-client-state-from-mobx-to-zustand/MobX 和 Zustand 都能管理 React 客户端状态，但在大状态量、高频更新和复杂页面协作场景下，它们的性能模型和维护成本差异会被明显放大。Fri, 21 Mar 2025 12:38:00 GMThttps://blog.ipage.fun/posts/react-source-code-inspector/https://blog.ipage.fun/posts/react-source-code-inspector/介绍 react-dev-inspector 的使用方式和实现原理，以及如何支持云开发机的源码跳转。Sat, 15 Jun 2024 02:00:00 GMThttps://blog.ipage.fun/posts/react-query-data-consistency-in-project-management/https://blog.ipage.fun/posts/react-query-data-consistency-in-project-management/To B 项目管理页面通常共享列表、详情和成员数据，使用 React Query 时需要设计稳定查询键、失效策略与更新后的同步路径。Fri, 17 May 2024 12:26:00 GMThttps://blog.ipage.fun/posts/dynamic-form-field-dependencies-and-state-evaluation/https://blog.ipage.fun/posts/dynamic-form-field-dependencies-and-state-evaluation/动态表单支持条件必填、条件有效、条件可见和条件默认值后，字段依赖会形成关系图；只有区分状态推导与值写入，才能避免循环计算。Fri, 20 Oct 2023 12:28:00 GMThttps://blog.ipage.fun/posts/schema-driven-dynamic-form-rendering/https://blog.ipage.fun/posts/schema-driven-dynamic-form-rendering/企业级项目中表单字段与页面编排都会变化，将 schema 与 layout 拆成两层配置，可以分别管理业务数据和界面结构。Fri, 14 Jul 2023 12:34:00 GMThttps://blog.ipage.fun/posts/marketing-platform-tracking-design/https://blog.ipage.fun/posts/marketing-platform-tracking-design/营销页面的价值在于转化，而转化的前提是有数据。本文从埋点协议、组件级埋点、采集链路、曝光监听、批量上报到数据落盘，完整介绍营销平台的埋点设计方案。Fri, 18 Nov 2022 02:00:00 GMThttps://blog.ipage.fun/posts/h5-and-lynx-ad-page-rendering/https://blog.ipage.fun/posts/h5-and-lynx-ad-page-rendering/客户端广告页既需要 H5 的灵活性，也可以借助 Lynx 的 view、text、image 等元素构建原生渲染页面，并配合资源下发改善首屏体验。Fri, 23 Sep 2022 12:28:00 GMThttps://blog.ipage.fun/posts/low-code-event-datasource-expression-workflow/https://blog.ipage.fun/posts/low-code-event-datasource-expression-workflow/营销页面不是静态拼图，按钮点击、表单提交、接口请求、数据绑定和条件表达式共同构成了低代码平台的运行逻辑。Fri, 19 Aug 2022 02:00:00 GMThttps://blog.ipage.fun/posts/low-code-page-publishing-and-performance/https://blog.ipage.fun/posts/low-code-page-publishing-and-performance/低代码营销平台发布的关键不是生成页面文件，而是让页面 DSL、组件资源、数据请求和缓存策略共同支撑秒级生效与稳定访问。Fri, 17 Jun 2022 02:00:00 GMThttps://blog.ipage.fun/posts/low-code-renderer-edit-preview-runtime/https://blog.ipage.fun/posts/low-code-renderer-edit-preview-runtime/同一份低代码 DSL 在编辑器、预览和线上生产环境中有完全不同的渲染目标，因此 Renderer 不能只有一个形态。Fri, 15 Apr 2022 02:00:00 GMThttps://blog.ipage.fun/posts/ice-ad-management-console/https://blog.ipage.fun/posts/ice-ad-management-console/广告后台需要同时管理投放计划、素材、时间、状态和查询条件，基于 React 与阿里飞冰 ICE 可以建立更稳定的页面组织方式。Fri, 18 Mar 2022 12:24:00 GMThttps://blog.ipage.fun/posts/low-code-dsl-is-the-real-product-boundary/https://blog.ipage.fun/posts/low-code-dsl-is-the-real-product-boundary/低代码营销平台后期能否扩展，关键不在编辑器界面多漂亮，而在 DSL 是否能稳定描述页面结构、组件属性、事件、数据绑定、权限和版本。Fri, 18 Feb 2022 02:00:00 GMThttps://blog.ipage.fun/posts/low-code-drag-engine-and-config-schema/https://blog.ipage.fun/posts/low-code-drag-engine-and-config-schema/低代码编辑器的核心不是简单拖动 DOM，而是围绕组件树、拖拽命中、属性 schema、数据源配置和组件通信建立一套稳定的编辑协议。Fri, 21 Jan 2022 02:00:00 GMThttps://blog.ipage.fun/posts/low-code-marketing-platform-architecture/https://blog.ipage.fun/posts/low-code-marketing-platform-architecture/一个营销低代码平台不能只看编辑器界面，还要从组件体系、渲染容器、配置协议、开发调试和运行时边界一起设计。Fri, 19 Nov 2021 02:00:00 GMThttps://blog.ipage.fun/posts/mini-program-startup-performance-optimization/https://blog.ipage.fun/posts/mini-program-startup-performance-optimization/小程序首次加载慢通常不是单点问题，需要从主包体积、分包策略、图片资源、首屏数据和渲染节奏共同优化。Fri, 17 Sep 2021 12:32:00 GMThttps://blog.ipage.fun/posts/mini-program-virtual-list-rendering/https://blog.ipage.fun/posts/mini-program-virtual-list-rendering/长列表优化的核心不是重复渲染全部数据，而是依据滚动位置只维护可视区域附近的节点，并保留正确的列表空间。Fri, 21 May 2021 12:18:00 GMThttps://blog.ipage.fun/posts/mini-program-rich-text-article-rendering/https://blog.ipage.fun/posts/mini-program-rich-text-article-rendering/资讯详情页需要把 HTML 内容转换为小程序能够展示的节点结构，并继续支持正文图片、图集预览与异常内容降级。Fri, 18 Sep 2020 12:36:00 GMThttps://blog.ipage.fun/posts/mini-program-car-360-view-with-image-frames/https://blog.ipage.fun/posts/mini-program-car-360-view-with-image-frames/在小程序中使用一组环绕拍摄的车型图片，根据手指横向拖动切换当前帧，可以用可控成本实现接近 360 度转动的展示效果。Fri, 24 Apr 2020 12:24:00 GMThttps://blog.ipage.fun/posts/js-bridge-sdk-version-compatibility/https://blog.ipage.fun/posts/js-bridge-sdk-version-compatibility/JS Bridge 库真正难维护的地方是版本兼容：H5 发布快，客户端发布慢，SDK 必须在能力探测、降级、灰度和协议演进上提供稳定边界。Fri, 15 Nov 2019 02:00:00 GMThttps://blog.ipage.fun/posts/migrating-mini-program-from-wepy-to-taro/https://blog.ipage.fun/posts/migrating-mini-program-from-wepy-to-taro/当业务页面越来越多时，小程序框架迁移不只是替换语法，更重要的是统一 React 技术栈、组件边界和长期维护方式。Fri, 16 Aug 2019 12:30:00 GMThttps://blog.ipage.fun/posts/js-bridge-protocol-design/https://blog.ipage.fun/posts/js-bridge-protocol-design/JS Bridge 协议决定了 H5 和客户端如何描述方法、参数、回调、错误、事件和权限，它比具体通信方式更影响长期可维护性。Fri, 22 Mar 2019 02:00:00 GMThttps://blog.ipage.fun/posts/js-bridge-webview-communication-principles/https://blog.ipage.fun/posts/js-bridge-webview-communication-principles/JS Bridge 的本质是在 WebView 和客户端之间建立一层受控通信通道，让 H5 能调用客户端能力，也让客户端能把结果回传给页面。Fri, 14 Sep 2018 02:00:00 GMThttps://blog.ipage.fun/posts/react-mobile-pages-state-and-interaction/https://blog.ipage.fun/posts/react-mobile-pages-state-and-interaction/移动端页面包含列表、筛选、弹层、滚动和异步请求，使用 React 时需要先区分数据状态、界面状态与交互状态。Fri, 22 Jun 2018 12:20:00 GMThttps://blog.ipage.fun/posts/node-pm2-video-crawler-task-queue/https://blog.ipage.fun/posts/node-pm2-video-crawler-task-queue/用 Node.js 和 Chrome Headless 做视频抓取时，真正需要设计的是任务队列、进程模型、失败重试、下载流水线和多进程并发控制。Fri, 18 Aug 2017 02:00:00 GMThttps://blog.ipage.fun/posts/applications-of-my-macbook-pro/https://blog.ipage.fun/posts/applications-of-my-macbook-pro/分享我在 MacBook Pro 上常用的一些效率工具，覆盖编辑器、版本控制和日常实用软件。Mon, 10 Jul 2017 12:48:19 GMThttps://blog.ipage.fun/posts/wechat-qq-share-summary/https://blog.ipage.fun/posts/wechat-qq-share-summary/记录在微信和 QQ 中做二次分享时的接入思路、封装方式和注意事项。Mon, 19 Jun 2017 12:26:20 GMThttps://blog.ipage.fun/posts/chrome-headless-exploration/https://blog.ipage.fun/posts/chrome-headless-exploration/视频资源提链不能只靠普通 HTTP 请求，很多页面需要真实浏览器执行脚本、等待异步加载、监听网络请求，Chrome Headless 正好补上了这部分能力。Fri, 09 Jun 2017 09:31:20 GMThttps://blog.ipage.fun/posts/whats-new-in-devtools-chrome-59/https://blog.ipage.fun/posts/whats-new-in-devtools-chrome-59/梳理 Chrome 59 DevTools 的几个实用更新，包括 Coverage、整页截图和 async/await 调试。Wed, 07 Jun 2017 03:34:54 GMThttps://blog.ipage.fun/posts/fiil-diva-pro/https://blog.ipage.fun/posts/fiil-diva-pro/入手 FIIL Diva Pro 的简单开箱与体验，聊聊蓝牙、降噪和日常使用感受。Fri, 02 Jun 2017 06:10:22 GMThttps://blog.ipage.fun/posts/android-tieba-profile-self-and-visitor-mode/https://blog.ipage.fun/posts/android-tieba-profile-self-and-visitor-mode/贴吧 Android 客户端个人中心存在主态与客态差异，同一页面在不同身份、关系与权限下需要合理组织数据、视图和交互状态。Mon, 14 Nov 2016 12:36:00 GMThttps://blog.ipage.fun/posts/android-tieba-doodle-emoticon-in-reply/https://blog.ipage.fun/posts/android-tieba-doodle-emoticon-in-reply/在贴吧 Android 客户端的回帖场景中增加涂鸦表情能力，需要处理触摸绘制、笔迹建模、撤销重做、图片导出与发帖上传链路。Tue, 18 Oct 2016 12:28:00 GMThttps://blog.ipage.fun/posts/android-activity-state-restoration/https://blog.ipage.fun/posts/android-activity-state-restoration/记录 Activity 因屏幕旋转被重建时的状态保存方法，区分界面临时状态与需要持久化的数据。Fri, 02 Sep 2016 11:36:00 GMThttps://blog.ipage.fun/posts/android-four-components-notes/https://blog.ipage.fun/posts/android-four-components-notes/从页面跳转、后台任务、系统事件和跨应用数据访问四个场景出发，整理 Activity、Service、BroadcastReceiver 与 ContentProvider 的职责和协作方式。Mon, 08 Aug 2016 12:16:00 GMThttps://blog.ipage.fun/posts/android-handler-looper-message-queue/https://blog.ipage.fun/posts/android-handler-looper-message-queue/从更新 UI 的常见需求出发，理解 Android 中 Handler、Looper 和 MessageQueue 如何协作，以及如何避免延迟消息造成的内存泄漏。Mon, 18 Jul 2016 12:42:00 GMThttps://blog.ipage.fun/posts/android-round-progress-bar/https://blog.ipage.fun/posts/android-round-progress-bar/一个基于 Canvas 实现 Android 圆环进度条的简洁方案，包含画笔设置、圆角线帽与起始角度处理。Mon, 13 Jun 2016 08:39:38 GMThttps://blog.ipage.fun/posts/android-custom-view-measure-and-draw/https://blog.ipage.fun/posts/android-custom-view-measure-and-draw/梳理 Android 自定义 View 中 onMeasure、onSizeChanged 与 onDraw 的职责，并用一个简单的圆点视图理解尺寸与绘制的关系。Mon, 09 May 2016 13:18:00 GMThttps://blog.ipage.fun/posts/android-opengl-dev-tips/https://blog.ipage.fun/posts/android-opengl-dev-tips/记录 Android OpenGL 纹理在部分机型显示异常时，通过将位图尺寸调整到 2 的幂来解决贴图失败的问题。Tue, 05 Apr 2016 08:26:04 GMThttps://blog.ipage.fun/posts/php-bigpipe-module-communication-and-streaming/https://blog.ipage.fun/posts/php-bigpipe-module-communication-and-streaming/在 PHP 输出动态页面的场景下，整理 BigPipe 如何发送页面骨架与 Pagelet，以及前端如何处理模块到达、依赖和通信。Fri, 18 Sep 2015 12:40:00 GMThttps://blog.ipage.fun/posts/bigpipe-pagelet-progressive-rendering-notes/https://blog.ipage.fun/posts/bigpipe-pagelet-progressive-rendering-notes/BigPipe 通过将复杂页面拆成独立 Pagelet，让服务端生成内容与浏览器渲染同时推进，从而更早展示用户最关心的区域。Fri, 21 Aug 2015 12:12:00 GMThttps://blog.ipage.fun/posts/angularjs-ad-management-console-practice/https://blog.ipage.fun/posts/angularjs-ad-management-console-practice/广告配置类后台页面包含筛选、投放时间、素材选择与状态操作，本文整理使用 AngularJS 1.x 组织列表、表单、服务和可复用指令的实践。Tue, 28 Jul 2015 12:24:00 GMThttps://blog.ipage.fun/posts/php-codeigniter-remove-index-php/https://blog.ipage.fun/posts/php-codeigniter-remove-index-php/整理在 Apache 环境下为 CodeIgniter 去掉 URL 中 index.php 的几种常见配置方式。Mon, 10 Feb 2014 08:36:34 GMT