最新

# 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">Prototype copy goes here.</p> ``` `font.css` 暴露了 `.funneldisplay` 和 `.arial`。颜色标记（`gentleblue`、`brightblue`、`gray`、`grey`、`green`）既可以用作元素选择器，也可以转换为类（如果您更喜欢 `.gentleblue` 语法）。 3. 通过指向资源目录来重用图标： ```html <img src="icons/loading.gif" alt="Loading indicator"> ``` ## 扩展 TelUI * 通过更新相应的 CSS 文件来添加新的颜色标记或排版助手；保持选择器声明性和按类别组织。 * 对于额外的 Electron 行为（菜单、预加载脚本、IPC），扩展 `index.js`，同时保持 UI 导向的文件与框架无关。 * 当作为可分发的应用程序发布时，配置 `electron-builder` 或您喜欢的打包程序；当前的设置是有意为之的。 ## 许可证 除非在单个文件中另有说明，否则 TelUI 在 MIT 许可证下分发。在重新分发 TelUI 或衍生作品时，请包含许可证文本。 URL: https://github.com/eotter-beep/telui/blob/main