返回首页
最新
# TelUI
TelUI 是一个基于 Electron 的 UI 框架，打包了一些可重用的前端基本组件——颜色工具、排版助手和基本结构样式——使您能够以最小的设置原型化简单的桌面 UI 设计。
## 特性
- 内置 Electron 运行器 (`npm start`)，可即时提供 `index.html` 的桌面预览。
- 令牌化样式层：`color.css`、`font.css` 和 `header.css` 使展示规则相互独立，易于重组。
- 集成 Google Fonts（Funnel Display），以及可选的实用类，如 `.arial`。
- 在 `icons/` 下提供可直接使用的图标资源，以帮助说明加载和状态。
## 快速开始
```bash
npm install
npm start
```
应用程序启动一个 800×600 的 Electron 窗口，加载 `index.html`。修改任何 CSS 或 HTML 文件后，重新启动（或重新加载）以查看更改。
## 项目结构
```text
index.js # Electron 启动文件
index.html # 使用 TelUI 样式的演示画布
font.css # 排版工具和 Google Fonts 导入
color.css # 颜色令牌（例如 gentleblue、brightblue、gray/grey、green）
header.css # 头部容器的结构调整
icons/ # 共享的位图 / gif 资源（例如 loading.gif）
package.json # 依赖和 npm 脚本
```
## 使用工具
1. 在您的 HTML 入口点中引用所需的样式：
```html
<link rel="stylesheet" href="font.css">
<link rel="stylesheet" href="color.css">
<link rel="stylesheet" href="header.css">
```
2. 应用提供的类或自定义元素标签：
```html
<header class="gentleblue">
<h1 class="funneldisplay">TelUI</h1>
</header>
<p class="arial">原型文本在这里。</p>
```
`font.css` 提供了 `.funneldisplay` 和 `.arial`。颜色令牌（`gentleblue`、`brightblue`、`gray`、`grey`、`green`）可以用作元素选择器，或者如果您更喜欢 `.gentleblue` 语法，也可以转换为类。
3. 通过指向资源目录重用图标：
```html
<img src="icons/loading.gif" alt="加载指示器">
```
## 扩展 TelUI
- 通过更新相应的 CSS 文件添加新的颜色令牌或排版助手；保持选择器声明性并按类别组织。
- 对于额外的 Electron 行为（菜单、预加载脚本、IPC），扩展 `index.js`，同时保持以 UI 为中心的文件与框架无关。
- 当作为可分发应用程序发布时，配置 `electron-builder` 或您喜欢的打包工具；当前设置故意保持简约。
## 许可证
除非在单个文件中另有说明，TelUI 在 MIT 许可证下分发。请在重新分发 TelUI 或衍生作品时包含许可证文本。
网址：
https://github.com/eotter-beep/telui/blob/main