设计系统前端开发工具UI组件【免费下载链接】LonaA tool for defining design systems and using them to generate cross-platform UI code, Sketch files, and other artifacts.项目地址https://gitcode.com/gh_mirrors/lo/Lona点击查看免费下载导读LonaViewer 是 Lona 仓库中用于「运行 Lona 测试组件」的宿主应用工程包含 iOS、macOS 与 Web 三套实现。本指南围绕 examples/LonaViewer/README.md 展开完整说明如何搭建环境、用编译器生成各端测试组件、启动三端应用以及如何借助 Applitools 与 Cypress 对生成代码做视觉回归Visual Regression测试。读完本文你将掌握 Lona 生成代码从「编译输出」到「三端可视化验证」的完整闭环并能在自己的设计系统工作流中复用这套验证方法。一、LonaViewer 是什么为测试组件而生的三端宿主应用Lona 的核心能力是从.component等设计系统文件生成跨平台 UI 代码。生成结果是否「正确」不能只靠人工肉眼抽查更需要一套可反复运行的宿主应用来承载、渲染并对比生成出来的组件。examples/LonaViewer正是为此而设。README 开篇即点明它的定位This directory contains the apps used for running Lonas test components.从目录结构看它包含四个子工程examples/LonaViewer子工程平台 / 技术栈作用iOS/UIKitiOS 宿主 App表格列出全部测试组件点击进入详情页渲染MacOS/AppKitmacOS 宿主 App通过NSBox容器预览生成视图iOSUITests/XCTest EyesImagesApplitools对 iOS App 做逐组件截图与视觉对比web/ReactCreate React App CypressWeb 端渲染与视觉回归测试配套文件还包括LonaViewer.xcodeproj/LonaViewer.xcworkspaceXcode 工程、PodfileCocoaPods 依赖用于引入 Applitools Eyes SDK等。三套工程共享同一批由编译器生成的测试组件只是宿主框架不同这正是「一次定义、多端生成、多端验证」理念的落地体现。二、生成测试组件先从 compiler 产出各端代码LonaViewer 本身不包含手写的测试组件源码它渲染的视图全部来自编译器对examples/test工作区的编译产物。因此在启动任何一端之前必须先执行编译与拷贝步骤。2.1 编译器侧的 snapshot 脚本在 compiler/core/package.json 中snapshotWebViewer与snapshotWebViewer:watch两条脚本专门服务于 Web 端 ViewersnapshotWebViewer: yarn snapshotJsDom cp -R ../../examples/generated/test/react-dom/ ../../examples/LonaViewer/web/src/generated, snapshotWebViewer:watch: nodemon --exec \yarn snapshotWebViewer\其执行过程分两步运行snapshotJsDom调用编译器 CLI 把examples/test工作区编译为 React DOM 代码并输出到examples/generated/test/react-dom用cp -R把该目录整体拷贝到examples/LonaViewer/web/src/generated使 Web 应用能直接import生成组件。snapshotJsDom对应的底层编译命令是node src/main.bs.js workspace js ../../examples/test ../../examples/generated/test/react-dom --frameworkreactdom --styleFrameworkstyledcomponents --noGenerateBannerMessage --legacyTokens同理Swift 侧iOS 与 macOS 共用生成逻辑由snapshotSwift、snapshotAppkit生成examples/generated/test/swift与examples/generated/test/appkitnode src/main.bs.js workspace swift ../../examples/test ../../examples/generated/test/swift --generateCollectionView --noGenerateBannerMessage --legacyTokens node src/main.bs.js workspace swift ../../examples/test ../../examples/generated/test/appkit --frameworkappkit --noGenerateBannerMessage --legacyTokens这些脚本的关键参数说明如下均以 compiler/core/package.json 实际内容为准参数取值含义--frameworkreactdom/reactnative/reactsketchapp/appkit目标 UI 框架Swift 默认生成 UIKit 代码appkit则生成 AppKit 代码--styleFrameworkstyledcomponentsReact DOM 目标下的样式方案--generateCollectionView—为 Swift 目标额外生成 Collection View 容器代码对应 Viewer 中的LonaCollectionView--noGenerateBannerMessage—关闭生成文件头部的横幅注释--legacyTokens—使用旧版 token 处理逻辑当前快照脚本均启用2.2 与测试工作区的关系测试组件本体位于 examples/test/components覆盖布局PrimaryAxis.component、SecondaryAxis.component、FixedParentFitChild.component等、逻辑If.component、Assign.component、Optionals.component、样式BorderStyleTest.component、ShadowsTest.component、OpacityTest.component、可交互性Button.component、PressableRootView.component、AccessibilityTest.component以及资源与矢量LocalAsset.component、VectorAsset.component、ImageCropping.component等类别。这些.component文件经编译器产出 Swift / AppKit / React DOM 代码后再被 LonaViewer 三端工程引用构成了完整的「定义 → 生成 → 渲染 → 验证」链路。三、iOS 宿主工程表格导航 详情渲染iOS 端是一个标准的 UIKit 导航式应用核心文件包括examples/LonaViewer/iOS/ViewSelectionVC.swift主列表页UITableView列出全部Generated用例点击后 push 到详情页examples/LonaViewer/iOS/DetailVC.swift详情页把选中用例的view与constraints挂到控制器视图上examples/LonaViewer/iOS/Generated.swift以enum形式枚举所有测试用例并提供view与constraints两个计算属性examples/LonaViewer/iOS/LayoutExtension.swift声明式 Auto Layout 辅助扩展。3.1 Generated 枚举用例注册表Generated.swift用enum Generated: String为每个测试用例定义了一个「显示名」映射例如case accessibilityTest Accessibility Test case vectorLogicActive Vector Logic - Active case boxModelConditionalSmall Box Model Conditional Small case inlineVariantTest Inline Variant TestallValues()返回完整用例列表驱动表格行数与列表文案。该文件与 macOS 版 examples/LonaViewer/MacOS/Generated.swift 结构一致macOS 版不含 Collection View、Accessibility 等 iOS 专属用例列表略有差异。3.2 view 与 constraints把参数化用例实例化view计算属性负责用特定参数实例化生成组件例如case .button: var count 0 let button Button(label: Tapped \(count), secondary: false) button.onTap { count 1 button.label Tapped \(count) } return button case .ifEnabled: return If(enabled: true) case .ifDisabled: return If(enabled: false) case .inlineVariantTest: return InlineVariantTest(type: .error)这里既演示了「同一组件不同参数」If(enabled: true/false)、BoxModelConditional(margin: 4, size: 60)与BoxModelConditional(margin: 20, size: 120)也演示了如何挂接生成组件的回调闭包如Button.onTap让静态生成代码也能展示交互行为。constraints计算属性则按用例返回 Auto Layout 约束数组通过LayoutExtension.swift中定义的equal(...)、constant(...)辅助函数简化写法extension UIView { func addSubview(_ child: UIView, constraints: [Constraint]) { addSubview(child) child.translatesAutoresizingMaskIntoConstraints false NSLayoutConstraint.activate(constraints.map { $0(child, self) }) } }例如详情页加载生成视图的调用DetailVC.swiftview.addSubview(_generated.view, constraints: _generated.constraints)从源码结构看Viewer 之所以需要手动补约束是因为生成组件默认只提供自身布局宿主容器需按用例如是否希望拉伸撑满、是否贴顶贴左决定其在屏幕上的摆放方式。四、macOS 宿主工程NSBox 预览容器macOS 端采用 AppKit入口为 examples/LonaViewer/MacOS/ViewSelectionVc.swiftfunc tableViewSelectionDidChange(_ notification: Notification) { guard let tv notification.object as? NSTableView else { return } containerBox.contentView?.subviews.forEach { $0.removeFromSuperview() } let noRowSelected -1 guard tv.selectedRow ! noRowSelected else { return } let generated Generated.allValues()[tv.selectedRow] containerBox.addSubview(generated.view, constraints: generated.constraints) }要点说明表格选中变化时先清空containerBoxNSBox旧内容再按selectedRow取出Generated用例并注入视图Generated.view在 AppKit 下返回类型为NSBox见 MacOS/Generated.swift因此生成组件的根容器可直接作为NSView子视图挂载选中行为与 iOS 端「点击跳转」不同macOS 端是「选中即预览」更适合桌面端的快速切换浏览。五、iOS 视觉回归测试Applitools XCTest5.1 环境准备test.env 与 API KeyREADME 给出了 iOS 端运行视觉 UI 测试的前提Youll need to make a fileiOSUITests/test.envcontaining your (free) applitools API key:APPLITOOLS_API_KEY...即在 examples/LonaViewer/iOSUITests 目录下创建test.env填入 Applitools 提供的免费API Key。iOSUITests工程通过 CocoaPods 引入EyesImagesApplitools 的图片比对 SDK相关依赖声明位于 examples/LonaViewer/Podfile。5.2 测试流程解析iOSUITests.swift 中的testExample()完整展示了视觉回归流程从 bundle 读取test.env并用正则解析出APPLITOOLS_API_KEYenv(contents:property:)函数实现初始化Eyes实例并设置apiKey遍历XCUIApplication().tables.cells的每一个单元格cell.tap()进入详情页等待导航栏标题出现后截取全屏截图裁掉顶部导航栏区域CGRect(x: 0, y: 90, ...)注释说明原因是模拟器无法模拟时间、导航栏时钟会引入无效 diff通过eyes.check(withTag: label, andSettings: Target.image(croppedImage))提交比对返回列表最后eyes.close()收尾。该测试把「用例注册表Generated枚举」直接当作测试用例清单使用——表格有多少行就自动截多少张图新增测试组件时无需修改测试代码这是这套方案可扩展性的关键设计。六、Web 端React 应用与 Cypress 视觉测试6.1 启动与开发模式examples/LonaViewer/web/README.md 说明了 Web 端用法Before running, make sure to generate the Lona workspace by runningyarn snapshotWebVieweroryarn snapshotWebViewer:watchwithin thecompiler/coredirectory.启动步骤为在compiler/core目录执行yarn snapshotWebViewer或带:watch的监听版生成并拷贝 React DOM 组件到web/src/generated进入examples/LonaViewer/web执行npm start浏览器打开http://localhost:3000查看应用。Web 端基于 Create React App 脚手架package.json位于 examples/LonaViewer/web/package.json具备开发模式热重载页面修改自动刷新与 lint 错误控制台提示等标准能力。6.2 生成的 React 组件如何被使用Web 端的主入口 examples/LonaViewer/web/src/App.js 直接import编译产物import AccessibilityTest from ./generated/interactivity/AccessibilityTest; import AccessibilityVisibility from ./generated/interactivity/AccessibilityVisibility; import AccessibilityNested from ./generated/interactivity/AccessibilityNested;App.js把三个可访问性用例串联成一条焦点循环链外层焦点陷阱元素处理 Tab 键AccessibilityNested失焦后把焦点交给AccessibilityTest再交给AccessibilityVisibility末尾再用陷阱元素把 Tab 循环导回起点。isChecked/checkboxValue由 React 组件状态统一驱动演示了生成组件与宿主状态管理的联动方式。6.3 Cypress 视觉回归Web 端视觉测试位于 examples/LonaViewer/web/cypress/integration/visual-test/home-test.spec.js同样使用 Applitoolscy.eyesOpen/cy.eyesClose/cy.eyesCheckWindow并通过checkEyes工具函数以.App选择器区域做截图比对export function checkEyes(testName) { cy.eyesCheckWindow({ tag: testName, sizeMode: selector, selector: .App }); }测试覆盖两个场景默认首页与「勾选 checkbox 后的选中态首页」浏览器环境固定为 1024×768 的 Chrome见 examples/LonaViewer/web/cypress/utils.js。由于 Web 与 iOS 共用同一个 Applitools API KeyREADME 明确说明 you can use the same API key一套账号即可同时管理两端的视觉基线。七、整体工作流与复用建议把以上环节串起来LonaViewer 的完整验证闭环为examples/test 工作区.component 等设计系统文件 │ compilerworkspace 子命令 各 target/framework 参数 ▼ examples/generated/test/{react-dom, swift, appkit} 生成代码 │ snapshotWebViewer 拷贝 / Xcode 引用 / React import ▼ iOS / macOS / Web 三端 LonaViewer 应用 │ XCTestEyesImages / CypresseyesCheckWindow ▼ Applitools 视觉基线比对输出回归结果在你自己的项目中复用这套方案时可以遵循以下要点用例即注册表像Generated枚举那样把测试组件与参数显式登记视觉测试即可自动遍历全部用例无需为每个组件单独写测试宿主与生成物解耦Viewer 只负责「摆放 交互接线」渲染内容全部来自编译产物保证测试对象与真实生成代码一致参数化覆盖对同一组件准备多组参数启用/禁用、大小、变体在宿主端静态注册即可扩大覆盖率而无需改动生成逻辑同一视觉基线服务多端iOS 与 Web 共享 Applitools API Key便于跨端对比同一设计在不同平台上的渲染一致性。延伸阅读测试工作区组件定义examples/test/components生成产物样例examples/generated/test/react-dom、examples/generated/test/swift、examples/generated/test/appkit编译器快照脚本与参数compiler/core/package.jsonWeb 端独立说明examples/LonaViewer/web/README.md赞分享设计系统前端开发工具UI组件【免费下载链接】LonaA tool for defining design systems and using them to generate cross-platform UI code, Sketch files, and other artifacts.项目地址https://gitcode.com/gh_mirrors/lo/Lona点击查看免费下载相关推荐web-frameworks跨平台测试Linux vs macOS结果一致性验证web frameworks跨平台测试Linux vs macOS结果一致性验证 在Web开发中框架性能测试结果的可靠性直接影响技术选型。本文通过对比Lin性能测试开发工具后端InsightFace 人脸识别实战三步搭好实验室人脸门禁系统附可运行代码InsightFace 人脸识别实战三步搭好实验室人脸门禁系统附可运行代码 InsightFace 是一个具备 SOTA业界最优2D/3D 人脸分析能人工智能计算机视觉深度学习Feast Web UI体验可视化特征管理平台Feast Web UI体验可视化特征管理平台 引言告别命令行拥抱可视化特征管理 在机器学习项目开发中特征管理Feature Management一MLOps后端数据工程上一篇ElastiFlow故障排除与性能监控常见问题解决方案与优化技巧下一篇Responder代码架构解析深入理解服务器与投毒器模块设计创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考