LCUI

<p align="center"> <a href="http://lcui.org/"> <img src="https://lcui.lc-soft.io/static/images/lcui-logo-lg.png" alt="" width=72 height=72> </a> <h3 align="center">LCUI</h3> <p align="center"> 用于构建用户界面的C语言库 </p> <p align="center"> <a href="https://github.com/lc-soft/LCUI/actions"><img alt="GitHub Actions" src="https://yellow-cdn.veclightyear.com/0a4dffa0/63272c5b-fa89-4cd0-8e94-82b71b5c2742.svg"></a> <a href="https://codecov.io/gh/lc-soft/LCUI"><img src="https://yellow-cdn.veclightyear.com/0a4dffa0/d7e46586-6dee-49cd-bf90-b2a72e72fd16.svg" /></a> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/0b98789e-80ab-4059-a359-3e1a814968df.svg" alt="仓库大小"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/c43ceda1-8b43-47bd-9971-5276d660c80d.svg" alt="代码大小"> </p> </p>

简介

中文版说明文档

LCUI 是一个用 C 语言编写的用于构建图形用户界面的库。它的目标是探索和实践开发用户界面的新方式，特点是体积小、易于使用，并提供便捷的开发工具，帮助开发者快速创建带有图形用户界面的桌面应用程序。

LC 源自作者名字的首字母。该库最初是为了帮助作者开发小项目和获取开发经验而设计的。然而，作者在充满 C/C++ 专家的就业市场中并未获得竞争优势，因此不得不从事 Web 前端开发工作。因此，LCUI 现在倾向于整合来自 Web 前端领域的技术。

主要特性

跨平台： 支持 Windows 和 Linux。
完全自绘组件： 组件在多个平台上保持一致的外观和行为。
内置 CSS 引擎： 支持使用 CSS 定义用户界面的样式和布局，使具有 Web 开发经验的人更容易上手。
提供现代开发工具： 这些工具允许你使用 TypeScript 语言配合 JSX 语法、React 库以及其他 Web 前端技术来编写用户界面。

功能概览

你可以从以下截图了解 LCUI 应用程序的开发体验：

React 风格的组件开发： 使用 TypeScript 编写 UI 配置文件。结合 TypeScript、JSX 语法和 LCUI React 库的优势，你可以简洁地描述界面结构、资源依赖、组件状态、数据绑定和事件绑定。
多种样式表编写方式： Tailwind CSS、CSS Modules、Sass 和全局 CSS。
基于文件系统的路由： 以目录形式组织应用程序页面，每个页面对应一个目录。目录的路径作为该页面的路由。借助内置的应用程序路由器，你可以轻松实现页面切换和导航，无需手动配置路由。
用户友好且现代的图标库： 图标来源于 fluentui-system-icons 库，经过部分定制以适应 LCUI 的特性，提供类似的使用模式。
命令行开发工具： 运行 lcui build 命令可预处理应用程序目录内的配置文件，然后生成相应的 C 源代码和资源文件。

架构

随着时间的推移，LCUI 已经建立在各种库的基础之上：

lib/yutil：提供常用数据结构和函数的实用工具库。
lib/pandagl：PandaGL（Panda Graphics Library），提供字体管理、文本布局、图像 I/O、图形处理和渲染功能。
lib/css：CSS 解析器和选择器引擎，提供 CSS 解析和选择功能。
lib/platform：平台库，提供跨平台统一的系统相关API，包括消息循环、窗口管理、输入法等。
lib/thread：线程库，提供跨平台的多线程能力。
lib/timer：定时器库，提供定期执行任务的能力。
lib/ui：UI核心库，提供UI组件管理、事件队列、样式计算、绘制等基本UI能力。
lib/ui-xml：XML解析库，提供从XML文件内容创建UI的能力。
lib/ui-cursor：光标库，提供光标绘制能力。
lib/ui-server：UI服务器，提供将UI组件映射到系统窗口的能力。
lib/ui-router：路由管理器，提供路由映射和导航能力。
lib/ui-widgets：预定义基础组件库，提供文本、按钮、滚动条等基本UI组件。
lib/worker：工作线程库，提供简单的工作线程通信和管理能力。

快速开始

在开始之前，你需要在电脑上安装以下软件：

Git：版本控制工具，用于下载示例项目的源代码。
XMake：构建工具，用于构建项目。
Node.js：JavaScript运行时环境，用于运行LCUI命令行开发工具。

然后，在命令行窗口中运行以下命令：

# 安装LCUI命令行开发工具
npm install -g @lcui/cli

# 创建LCUI应用项目
lcui create my-lcui-app

之后按照命令提供的提示进行操作。

文档

教程

待办事项列表：学习LCUI的基本概念和用法，以及如何使用它构建界面并实现状态管理、界面更新和交互。
渲染布料动画：将现有布料模拟程序的JavaScript源代码改写成C语言，并使用cairo图形库进行布料渲染。然后应用LCUI来实现布料动画播放和交互。
浏览器：参考网页浏览器，使用LCUI实现类似的界面结构、布局、样式和多标签页管理功能。利用LCUI的路由管理功能实现多标签页的页面状态管理和导航，以及简单的文件浏览页面。（此教程已过时，欢迎贡献更新）

参考资料

LCUI和相关项目的一些功能受到其他开源项目的启发。你可以参考它们的文档来了解基本概念和用法。

DirectXTK：步进定时器的源代码参考。
Vue Router：路由管理器的参考。一些功能也参考了Vue Router的源代码。
Next.js：路由定义方法的参考。

路线图

以下是即将进行的项目：

LCUI
- 改进API设计。
- 增强CSS引擎，支持inherit、!important和转义字符。
- 添加SDL后端以替代lib/platform库。
- 适配其他开源图形库以提高渲染性能。
命令行工具
- lcui build --watch：持续监视文件变化并自动重新构建。
- lcui dev-server：类似webpack-dev-server，将LCUI应用构建为网站，供开发者在浏览器中预览界面。
- 添加构建缓存，只重新构建已更改的文件。
React组件库：参考一些Web前端组件库（如radix、shadcn/ui），开发适用于LCUI应用的TypeScript + React组件库，复用LC Design组件库中的组件。
文档
- 教程
意见征询（RFC）

贡献

认为 LCUI 更新太慢？有很多方式可以为 LCUI 做出贡献。

提交 bug 并帮助我们验证修复是否已经生效。
在 issues 页面分享一些有关 GUI 开发的有趣想法。
在源代码中搜索 FIXME 注释并尝试修复它们。
在 IssueHunt 上为你感兴趣的问题提供资金，以吸引其他开发者参与贡献。
审查源代码变更。
贡献 bug 修复。

LCUI 采用了 Contributor Covenant 定义的行为准则。这份文档在许多开源社区中被广泛使用，我们认为它很好地阐述了我们的价值观。更多信息请参见行为准则。

常见问题

这是一个浏览器内核吗？或者是像 Electron 那样集成了浏览器环境的开发库？

不是，你可以将它视为一个应用了一些 Web 技术的传统 GUI 开发库。

既然支持使用 TypeScript 语言，为什么我不使用 Electron 呢？

是的，如果你有 Web 开发经验并愿意学习 Electron，那么 Electron 显然是最佳选择。

考虑到 LCUI 当前的能力，它主要适合满足作者的个人需求和开发简单的工具。

为什么我应该选择 LCUI 而不是其他 GUI 库/框架？

我们建议你优先考虑其他 GUI 库/框架。

CSS 支持情况如何？

以下是支持的 CSS 特性列表。打勾的表示已支持（但不意味着完全支持）。未列出的属性默认不支持。

<details> <summary>CSS 特性覆盖范围</summary>

at 规则
- @font-face
- @keyframes
- @media
关键字
- !important
选择器
- *
- type
- #id
- .class
- :hover
- :focus
- :active
- :first-child
- :last-child
- [attr="value"]
- :not()
- :nth-child()
- parent > child
- a ~ b
- ::after
- ::before
- ...
单位
- px
- dp
- sp
- pt
- %
- rem
- vh
- vw
属性
- top, right, bottom, left
- width, height
- visibility
- display
  - none
  - inline-block
  - block
  - flex
  - inline-flex
  - inline
  - grid
  - table
  - table-cell
  - table-row
  - table-column
  - ...
- position
  - static
  - relative
  - absolute
  - fixed
- box-sizing
  - border-box
  - content-box
- border
- border-radius
- background-color
- background-image
- background-position
- background-cover
- background
- pointer-events
- font-face
- font-family
- font-size
- font-style
- flex
- flex-shrink
- flex-grow
- flex-basis
- flex-wrap
- flex-direction
- justify-content
  - flex-start
  - center
  - flex-end
- align-items
  - flex-start
  - center
  - flex-end
  - stretch
- float
- transition
- transform
- ...