<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[ridgeui的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/ridgeui</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; ridgeui]]></copyright><item><title><![CDATA[【RidgeUI AI+系列】在线剪贴板]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/149541970</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/149541970</guid><author>ridgeui</author><pubDate>Thu, 24 Jul 2025 10:37:21 +0800</pubDate><description><![CDATA[摘要 本文介绍了一款基于JavaScript的在线剪贴板工具开发过程，通过代码实现了高效的文本片段管理功能。工具核心包括：从剪贴板添加内容、复制文本到剪贴板、删除/清空项目、导入导出数据等功能。采用localStorage本地存储确保数据持久化，并集成通知系统提升用户体验。该工具支持文本片段的快速存取，解决了传统文本文件管理的低效问题，代码结构清晰，功能完整，可直接应用于实际开发场景。]]></description><category></category></item><item><title><![CDATA[【RidgeUI AI+系列】图片批量压缩器]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/149227717</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/149227717</guid><author>ridgeui</author><pubDate>Fri, 11 Jul 2025 15:38:34 +0800</pubDate><description><![CDATA[本文介绍了一款图片批量处理工具的开发过程，重点实现了两种图片缩放模式：按比例缩放和按尺寸缩放。系统通过JavaScript代码实现了图片信息提取、批量处理等功能，支持用户选择不同压缩模式（固定比例或固定尺寸），并提供了详细的配置参数设置。工具核心包括文件信息读取、尺寸调整计算和压缩质量控制，最终生成处理后的图片文件列表，满足用户批量处理图片的需求。]]></description><category></category></item><item><title><![CDATA[【RidgeUI AI+系列】猜密码游戏]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/149117544</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/149117544</guid><author>ridgeui</author><pubDate>Wed, 09 Jul 2025 16:27:31 +0800</pubDate><description><![CDATA[这是一款4位数字密码破解游戏，玩家需在5次尝试内猜出系统随机生成的不重复4位密码。游戏提供数字输入界面和回退/解锁功能，每次猜测后系统会反馈每位数字的三种状态：正确位置、包含但位置不对、不包含。游戏界面包含输入显示和历史记录，使用不同颜色区分结果状态。开发者通过JavaScript类实现游戏逻辑，包括密码生成、输入验证、结果分析和游戏状态管理，并优化了用户输入体验。游戏结束后可立即重启，支持计时和多轮游玩。]]></description><category></category></item><item><title><![CDATA[【RidgeUI AI+系列】中文重复统计器]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/148926630</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/148926630</guid><author>ridgeui</author><pubDate>Fri, 27 Jun 2025 15:53:05 +0800</pubDate><description><![CDATA[中文重复统计器开发摘要 本文介绍了一个中文重复文本统计工具的开发过程。该工具通过滑动窗口算法检测输入文本中的重复内容，并高亮显示结果。开发中遇到的主要挑战是中文分词问题，传统基于空格的英文分词方法不适用于中文。通过多次优化，最终采用将中文标点替换为空格的方法，结合滑动窗口算法，实现了较为准确的中文重复统计功能。工具还附带统计换行符、符号和字符数量的功能。开发过程展示了处理中文文本的特殊性，以及通过迭代改进算法解决实际问题的思路。]]></description><category></category></item><item><title><![CDATA[【RidgeUI AI+系列】密码生成器]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/148897529</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/148897529</guid><author>ridgeui</author><pubDate>Wed, 25 Jun 2025 14:36:20 +0800</pubDate><description><![CDATA[文章摘要： 本文介绍了如何使用AI辅助开发一个随机密码生成器web应用。通过定义页面脚本框架结构（state状态和actions动作），AI自动补全了密码生成逻辑并扩展了配置项。开发过程分为：1)编写核心密码生成脚本；2)添加UI控件与状态绑定；3)实现复制功能；4)人工优化界面布局。最终成果（https://ridgeui.com/npm/ridge-password/）展示了AI代码生成与人类设计协作的高效开发模式，其中AI负责逻辑实现，人类专注界面优化，充分发挥各自优势。]]></description><category></category></item><item><title><![CDATA[RidgUI弹性容器详解 【RidgeUI 页面设计系列】]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/145329499</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/145329499</guid><author>ridgeui</author><pubDate>Mon, 26 May 2025 13:27:22 +0800</pubDate><description><![CDATA[本文详细解析RidgeUI弹性容器在网页布局中的应用。弹性容器支持横向/纵向排列、多维度对齐、换行间隔等CSS Flexbox特性，子组件可配置固定/弹性尺寸与交叉填充。通过典型案例展示布局技巧：网站布局采用顶部固定+内容弹性1；变长列表需避免固定高度；万年历应对行数波动需设置自动高度。特别强调内容溢出时容器自动生成滚动条，以及嵌套弹性容器带来的布局灵活性。建议开发者根据具体内容特性和显示需求，组合使用尺寸配置实现最优布局效果。]]></description><category></category></item><item><title><![CDATA[Ridge页面设计系列：反应速度测试]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/146505798</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/146505798</guid><author>ridgeui</author><pubDate>Wed, 26 Mar 2025 10:18:54 +0800</pubDate><description><![CDATA[这个页面相对简单，当然我们也可以自由发挥定义每个场景的内容。另外还可以基于等级给出评语等，这个留给大家实现。]]></description><category></category></item><item><title><![CDATA[RidgeUI页面脚本开发系列:反应速度测试页面]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/146493950</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/146493950</guid><author>ridgeui</author><pubDate>Tue, 25 Mar 2025 15:14:35 +0800</pubDate><description><![CDATA[大家好，欢迎学习ridgeui页面脚本开发系列:反应速度测试页面脚本开发反应速度测试是个很简单的应用，开始时显示红色屏幕内容，当变为绿色时，用户以最快速度点击页面，进而测算出反应时间。这个页面主体脚本只有30行，可以说很简单，但我们还是要注意以下2点：1、定义不同的场景，通过用户点击或者自动计时等方式，进行场景间切换2、注意了页面要求，例如从中也更加理解像请求下一帧、鼠标点击与按下区别等，理解html中的相关特性最后附上完整代码。应用和代码可通过ridgeui官网下载和查看。]]></description><category></category></item><item><title><![CDATA[Ridge页面设计系列：照片中的中国诗词]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/146466760</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/146466760</guid><author>ridgeui</author><pubDate>Mon, 24 Mar 2025 13:39:03 +0800</pubDate><description><![CDATA[这是最终运行效果,当选择图片时,会显示图片匹配的古诗词，同时切换中国色还会更换诗词这其中,页面脚本是预先编写好的,如果有兴趣可以查看对应脚本的教程RidgeUI页面脚本开发系列:获取照片中的中国诗词。前面配置过程，我们综合使用了多层容器、弹性容器对页面组件放置进行了调整， 对文字、字体和颜色进行了微调，最终完成了可适用于所有屏幕设备的界面。]]></description><category></category></item><item><title><![CDATA[RidgeUI页面脚本开发系列:获取照片中的中国诗词]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/146423705</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/146423705</guid><author>ridgeui</author><pubDate>Fri, 21 Mar 2025 16:36:05 +0800</pubDate><description><![CDATA[本文聚焦于 RidgeUI 页面脚本开发中 “获取照片中的中国诗词” 功能的实现。从初始想法出发，阐述利用色彩空间知识，通过提取图片主要颜色并匹配中国色及古诗词以达 “照片中的中国诗词效果” 的构思。经需求分析，确定了先获取图片颜色、再转换为中国色并查找对应古诗词的流程。介绍了基础实现部分，包括颜色提取模块选择、数据准备、颜色匹配策略及完整方法实现。最后展示了 Ridge 页面脚本编写过程，为后续页面设计奠定基础。最后 访问可以查看到这个应用,]]></description><category></category></item><item><title><![CDATA[RidgeUI脚本开发系列：编写天气预报脚本库]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/146153571</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/146153571</guid><author>ridgeui</author><pubDate>Mon, 10 Mar 2025 14:12:02 +0800</pubDate><description><![CDATA[本文是 RidgeUI 脚本开发系列中关于编写天气预报脚本库的内容。天气预报页面主要功能包括显示区域、天气、温湿度等，脚本目标先实现显示天气。获取天气数据通过国外 open-meteo 网站免费 API，其接口需经纬度，可借助 china-regions-lat 库根据地址获取。获取数据后要格式化，将天气代码、风力风向描述转换。脚本库主体命名 WeatherForcast，引入相关库，设置状态和方法获取、转换数据。还实现了切换位置功能，将地区和位置存本地缓存。最后完成较完整天气预报程序，可在ridgeui.]]></description><category></category></item><item><title><![CDATA[RidgeUI页面脚本开发系列:“计算器”页面脚本开发]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/145881358</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/145881358</guid><author>ridgeui</author><pubDate>Wed, 26 Feb 2025 16:08:01 +0800</pubDate><description><![CDATA[我们首先看看计算器。虽然大家日常经常会使用它，但是真要实现它，还需要进行一些分析从交互分析来看，需要提供一个方法来处理每个按键按下事件。同时提供2个页面状态，显示根据按键的动作，更新计算结果行和计算式行的内容为此，我们可以生成以下程序结构。]]></description><category></category></item><item><title><![CDATA[十分钟学习编写Ridge页面脚本]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/145755738</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/145755738</guid><author>ridgeui</author><pubDate>Thu, 20 Feb 2025 15:46:12 +0800</pubDate><description><![CDATA[页面脚本是驱动页面响应用户交互和进行变化的核心，也是一个页面内在业务逻辑的承载。]]></description><category></category></item><item><title><![CDATA[“锐制设计” 页面脚本开发教程（一）编写 Hello World]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/145554211</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/145554211</guid><author>ridgeui</author><pubDate>Mon, 10 Feb 2025 17:12:35 +0800</pubDate><description><![CDATA[本系列教程将会带你了解开发Ridge页面脚本库。页面脚本是驱动页面响应用户交互和进行变化的核心，也是一个页面内在业务逻辑的承载。同时，脚本库是一个可以独立开发和验证的单元。]]></description><category></category></item><item><title><![CDATA[RidgeUI开发入门教程（九）：页面即组件]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/145334261</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/145334261</guid><author>ridgeui</author><pubDate>Wed, 29 Jan 2025 18:15:00 +0800</pubDate><description><![CDATA[当前端应用或页面越来越复杂时，会同时存在2个问题更重要的是，在上述2种情况下，当我修改了这部分相同的内容，很可能我要在不同页面修改多次。]]></description><category></category></item><item><title><![CDATA[RidgeUI开发入门教程（七）切换容器：在一个区域显示不同内容]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/145334058</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/145334058</guid><author>ridgeui</author><pubDate>Wed, 29 Jan 2025 03:15:00 +0800</pubDate><description><![CDATA[在页面设计中，同样一个位置，往往因为用户的当前数据、或响应用户操作而展示不同内容。这时就需要切换容器来实现：切换容器允许有多个下层组件，通过动态修改容器的“当前“属性而决定显示哪个下层组件。]]></description><category></category></item><item><title><![CDATA[RidgeUI开发入门教程（六）列表容器：配置重复显示的内容]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/145333814</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/145333814</guid><author>ridgeui</author><pubDate>Tue, 28 Jan 2025 06:00:00 +0800</pubDate><description><![CDATA[在常见的用户界面中，重复的列表是我们经常见到的。像电子邮件、新闻、唱片专辑列表、积分榜等重复显示的场景，都需要借助列表容器来实现。]]></description><category></category></item><item><title><![CDATA[RidgeUI开发入门教程（五）配置组件的样式]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/145333783</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/145333783</guid><author>ridgeui</author><pubDate>Mon, 27 Jan 2025 06:00:00 +0800</pubDate><description><![CDATA[一些情况下，我们希望能更灵活的设置组件呈现的样式，例如加个底边、调整文字样式、设置组件的动画效果等。为此，很多组件也提供了样式属性可供配置，选择了某个样式组件就会更改显示形态。当然在此之前，需要在应用安装提供样式的组件库。本文介绍了几个组件库内置样式的样例。未来你可以按需安装更多组件库来实现更丰富的样式。]]></description><category></category></item><item><title><![CDATA[RidgeUI开发入门教程（四）进行表单验证]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/145333765</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/145333765</guid><author>ridgeui</author><pubDate>Sun, 26 Jan 2025 08:45:00 +0800</pubDate><description><![CDATA[本章节，我们结合前面学习的布局和数据连接，完成一个表单的填写及验证。]]></description><category></category></item><item><title><![CDATA[RidgeUI开发入门教程（三）布局容器]]></title><link>https://blog.youkuaiyun.com/ridgeui/article/details/145333712</link><guid>https://blog.youkuaiyun.com/ridgeui/article/details/145333712</guid><author>ridgeui</author><pubDate>Sun, 26 Jan 2025 02:15:00 +0800</pubDate><description><![CDATA[本章节，我们将学习使用容器进行页面布局。在之前章节，组件都是放置到页面的绝对位置，它的坐标是固定的，这样带来2个问题Ridge提供了容器概念:可以将组件放到一个父组件中，父组件对子组件进行布局的控制和统一的操作。]]></description><category></category></item></channel></rss>