LCUI

README

<p align="center">
  <a href="http://lcui.org/">
    <img src="https://lcui.org/img/logo.png" alt="logo" 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://github.com/lc-soft/LCUI/workflows/C%2FC%2B%2B%20CI/badge.svg"></a>
    <a href="https://codecov.io/gh/lc-soft/LCUI"><img src="https://codecov.io/gh/lc-soft/LCUI/branch/develop/graph/badge.svg" /></a>
    <img src="https://img.shields.io/github/repo-size/lc-soft/LCUI.svg" alt="Repo size">
    <img src="https://img.shields.io/github/languages/code-size/lc-soft/LCUI.svg" alt="Code size">
  </p>
</p>

## 介绍

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

**LC** 源自作者名字首字母，设计之初的目的是为了方便作者开发一些小项目和积累开发经验，不过遗憾的是作者并没有因此在 C/C++ 高手众多的就业环境下获得足够竞争优势，于是只能从事 Web 前端开发工作，也正是因为如此，LCUI 现在的发展方向偏向于融合 Web 前端领域的技术。

### 主要特性

- **跨平台：** 支持 Windows、Linux。
- **全自绘组件：** 组件在多个平台中都能保持一致的外观和行为。
- **DPI 感知：** 在高分辨率的屏幕内自动缩放界面以保持清晰的显示效果。
- **自带 CSS 引擎：** 支持使用 CSS 来定义用户界面的样式和布局，对于有网页开发经验的人比较容易上手。
- **提供现代化的开发工具：** 该工具允许你使用 [TypeScript](https://lcui-dev.github.io/docs/guide/typescript) 语言搭配 JSX 语法、 React 库以及其它 Web 前端技术来编写用户界面。

### 开发体验预览

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

![preview](https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/342c0977d50cae169bb7ec3f.png)

- **类 React 组件开发方式：** 用 TypeScript 语言编写界面配置文件，结合 TypeScript 的语言优势、JSX 语法特性和 LCUI React 库，你能够以简洁的代码描述界面结构、资源依赖、组件状态、数据绑定以及事件绑定。
- **多种样式编写方式：** [Tailwind CSS](https://tailwindcss.com/)、[CSS Modules](https://github.com/css-modules/css-modules)、[Sass](https://sass-lang.com/)、全局 CSS。
- **基于目录的路由定义方式：** 以文件目录的形式组织应用的各个页面，每个页面对应一个目录，目录的路径即是该页面的路由。借助内置的应用路由器，你可以轻松地实现页面之间的切换和导航，无需手动配置路由规则。
- **友好且现代的图标库：** 图标源自 [fluentui-system-icons](https://github.com/microsoft/fluentui-system-icons) 库，针对 LCUI 的特性做了部分定制，用法相似。
- **命令行开发工具：** 运行 `lcui build` 命令预处理 app 目录内的配置文件，然后生成相应的 C 源码和资源文件。

### 架构

LCUI 建立在各种库的基础之上：

- [lib/yutil](https://gitee.com/lc-soft/LCUI/blob/develop/lib/yutil): 实用工具库，提供常用的数据结构和函数。
- [lib/pandagl](https://gitee.com/lc-soft/LCUI/blob/develop/lib/pandagl): PandaGL (Panda Graphics Library) 图形库，提供字体管理、文字排版、图片读写、图形处理和渲染能力。
- [lib/css](https://gitee.com/lc-soft/LCUI/blob/develop/lib/css): CSS 解析器和选择引擎，提供 CSS 解析和选择能力。
- [lib/ptk](https://gitee.com/lc-soft/LCUI/blob/develop/lib/ptk): 平台库（**P**ing **T**ai **K**u），提供跨平台统一的系统相关 API，包括消息循环、窗口管理、定时器、工作线程、输入法等。
- [lib/thread](https://gitee.com/lc-soft/LCUI/blob/develop/lib/thread): 线程库，提供跨平台的多线程能力。
- [lib/router](https://gitee.com/lc-soft/LCUI/blob/develop/lib/ui-router): 路由管理器，提供路由映射和导航能力。
- [lib/worker](https://gitee.com/lc-soft/LCUI/blob/develop/lib/worker): 工作线程库，提供基础的工作线程管理和异步任务管理能力。
- [lib/ui](https://gitee.com/lc-soft/LCUI/blob/develop/lib/ui): UI 核心库，提供 UI 组件管理、事件队列、样式计算、绘制等 UI 必要能力。
- [lib/ui-xml](https://gitee.com/lc-soft/LCUI/blob/develop/lib/anchor): XML 解析库，提供从 XML 文件内容创建 UI 的能力。
- [lib/ui-cursor](https://gitee.com/lc-soft/LCUI/blob/develop/lib/ui-cursor): 光标，提供光标绘制能力。
- [lib/ui-server](https://gitee.com/lc-soft/LCUI/blob/develop/lib/ui-server): UI 服务器，提供将 UI 组件映射至系统窗口的能力。

LCUI 的核心源码位于 `src/` 目录，划分为以下几个功能模块：

- **app:** 应用的生命周期、事件 和 UI 管理。
- **fonts:** 默认字体设置。
- **settings:** 全局设置，提供部分功能的开关和参数设置。
- **ui:** UI 和窗口管理。
- **widgets:** 预置的组件。
- **worker:** 异步任务管理。

## 快速体验

在开始前你需要在你的计算机上安装以下软件：

- [Git](https://git-scm.com/download/)：版本管理工具，用于下载示例项目源码。
- [XMake](https://xmake.io/#/zh-cn/?id=%e5%ae%89%e8%a3%85)：C/C++ 构建工具，用于构建项目。
- [Node.js](https://nodejs.org/): JavaScript 运行环境，用于运行 LCUI 的命令行开发工具。

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

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

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

之后按照命令输出的提示继续操作。

## 文档

- [在线文档](https://lcui-dev.github.io/docs/next/guides/base/)
- [意见征集稿（RFC）](https://lcui-dev.github.io/docs/next/rfcs/)
- [更新日志](https://gitee.com/lc-soft/LCUI/blob/develop/CHANGELOG.zh-cn.md)
- [贡献指南](https://gitee.com/lc-soft/LCUI/blob/develop/.github/CONTRIBUTING.md)

### 教程

<table>
  <thead>
    <tr>
      <th width="140">标题</th>
      <th>预览</th>
      <th>简介</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="https://lcui-dev.github.io/docs/tutorials/kantu">图像查看器</a>
      </td>
      <td><img src="https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/3420b6f4def02cbef48d1c73.jpg" alt="kantu" /></td>
      <td>基于 LCUI 库开发一个图像查看器程序，用 Web 技术为其构建图形界面，用 C 语言实现界面交互逻辑和各项功能，深入发掘 LCUI 在 UI 方面的特性和开发技巧。</td>
    </tr>
    <tr>
      <td>
        <a href="https://lcui-dev.github.io/docs/tutorials/todolist">待办清单</a>
      </td>
      <td><img src="https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/6cab2921b48477f59c4f04ad.jpg" alt="kantu" /></td>
      <td>学习 LCUI 的基本概念和用法，以及如何使用它构建界面，并实现状态管理、界面更新和交互。</td>
    </tr>
    <tr>
      <td>
        <a href="https://lcui-dev.github.io/docs/tutorials/render-fabric">渲染布料动画</a>
      </td>
      <td><img src="https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/7352c75ee4e8cb87c11c9c9a.jpg" alt="kantu" /></td>
      <td>参照现有的布料模拟程序的 JavaScript 源码，以 C 语言重新编写，并采用 cairo 图形库进行布料渲染，再运用 LCUI 实现布料动画的播放和交互。</td>
    </tr>
    <tr>
      <td>
        <a href="https://lcui-dev.github.io/docs/2.x/tutorial/browser">浏览器</a>
        <b>(已过时)</b>
      </td>
      <td><img src="https://web-code-img.oss-cn-shanghai.aliyuncs.com/readme/e98a845a3b8dc4e6e8f6d373.jpg" alt="browser" /></td>
      <td>参照网页浏览器，用 LCUI 实现与之类似的界面结构、布局、样式和多标签管理功能，并运用 LCUI 路由管理功能实现多标签页的状态管理和导航，以及一个简单的文件浏览页面。</td>
    </tr>
  </tbody>
</table>

## 路线图

以下是未来可推进的事项：

- LCUI
  - 改进 API 设计。
  - 改进 CSS 引擎，增加支持 `inherit`、`!important`。
  - 添加 [SDL](https://www.libsdl.org/) 后端，代替 lib/ptk 库。
  - 适配其它开源图形库，以获得更好的渲染性能。
  - i18n 多语言支持。
  - 优化内存占用。
  - 优化性能。
- 命令行工具
  - `lcui build --watch`：持续监听文件变更并自动重新构建。
  - `lcui dev-server`：与 webpack-dev-server 类似，将 LCUI 应用构建为网站以便开发者在浏览器中预览界面。
  - 添加构建缓存，仅重新构建有更改的文件。
- React 组件库：参考一些 web 前端组件库（例如：[radix](https://www.radix-ui.com/)、[shadcn/ui](https://ui.shad