@centralgo/cgo-ui

v1.0.1

Published

a month ago

Central Go 前端视觉库 — Web Components (Lit)

0High
0Medium
0Low

ryansi

nokiaimul

@centralgo/cgo-ui

Central Go 前端视觉组件库 — 基于 Lit 的 Web Components 方案

这是一个现代、轻量、高内聚的前端视觉组件库。内置 23 个语义化组件、自适应明暗主题引擎、以及统一图标库。

在最新版本中，全局颜色与主题变量已自动内联并动态注入。仅需引入一个 JS 文件，即可在任何页面（零 CSS 引入）开箱即用。

🚀 快速接入

方式 1：通过 CDN 引入（纯 HTML / 静态页面推荐）

直接在您的 HTML 文件 </body> 前引入一行 JS 即可。无需引入任何 CSS：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CGoUI 极简接入演示</title>
</head>
<body>
    <!-- 1. 直接像原生 HTML 标签一样使用组件 -->
    <cgo-theme-toggle></cgo-theme-toggle>
    <cgo-button variant="primary" icon="save">保存</cgo-button>
    <cgo-line-badge line="1">1号线</cgo-line-badge>
    <cgo-captcha></cgo-captcha>

    <!-- 2. 引入 CDN 核心 bundle 脚本即可（组件将自动注册，样式自动注入） -->
    <script type="module" src="https://cdn.jsdelivr.net/npm/@centralgo/cgo-ui/dist/cgo-ui.js"></script>
</body>
</html>

方式 2：作为 NPM 依赖安装（React / Vue / Vite 等现代工程推荐）

在您的前端工程根目录中安装：

npm install @centralgo/cgo-ui

然后在您的入口文件（如 main.js 或 index.js）中引入注册与初始化：

// 注册所有的 Web Components 并且安装全局 CGO API 和初始化主题引擎
import '@centralgo/cgo-ui/register';

🧩 已注册 WebComponent (共 23 个)

| 组件名 | 标签 | 说明 | |:---|:---|:---| | 主题切换 | <cgo-theme-toggle> | 点击切换明暗主题 / 长按 800ms 恢复系统设置 | | 按钮 | <cgo-button> | 支持 6 种变体、4 档尺寸、自定义图标、加载态、胶囊形 | | 图标 | <cgo-icon> | 内置 95 个 SVG 图标，随 currentColor 自动变色 | | 徽标 | <cgo-badge> | 提供 6 种语义色 + 5 个子系统品牌自适应色 | | 表单输入 | <cgo-input> | 支持 label、占位符、提示与错误状态 | | 卡片 | <cgo-card> | 提供标准、玻璃态、信息卡、危险区 4 种视觉变体 | | 表格 | <cgo-table> | 表格组件 | | 媒体查看器 | <cgo-media-viewer> | 点阵背景预览区 + 操作栏 | | 悬浮窗 | <cgo-floating-window> | 可拖拽、贴边磁吸、折叠/关闭 | | 管理台选择 | <cgo-admin-select> | 权限状态单选下拉 | | 偏好设置项 | <cgo-preference-item> | 管理台列表行 | | 线路色 | <cgo-line-badge> | 28 条北京地铁线路色胶囊 | | 等级卡 | <cgo-level-card> | 常旅客 4 级渐变卡 | | 加载器 | <cgo-spinner> | 3 档尺寸环形加载 | | Toast | <cgo-toast> | 底部居中悬浮提示（推荐使用命令式 API） | | 工具提示 | <cgo-tooltip> | 悬停气泡提示 | | 菜单按钮 | <cgo-dropdown> | 触发器+菜单，互斥展开 | | 弹窗 | <cgo-modal> | 遮罩 + 居中（移动端自动变为底部抽屉） | | 选项卡 | <cgo-tabs> / <cgo-tab> | 标签页面板 | | 头像 | <cgo-avatar> | 图片/首字母圆形头像 | | 聊天气泡 | <cgo-chat-bubble> | AI 对话 user/bot 风格气泡 | | 验证码 | <cgo-captcha> | 纯前端 SVG 随机数学计算题 | | 工具栏下拉 | <cgo-toolbar-select> | 用于面板内部的下拉选择（子项：<cgo-toolbar-option>） |

🌓 明暗主题切换

组件库内建主题引擎，与组件 <cgo-theme-toggle> 自动绑定：

主题通过 localStorage 自动持久化，Key 格式为 {toolname}_app-theme。
支持 iframe 跨窗口主题自动同步（通过 postMessage 广播）。
支持 ?embed=vitool-hide 隐藏 Header 等内嵌模式。
您可以随时通过全局 window.ToolTheme 进行手动控制。

🍞 全局 Toast 通知 API

组件库提供了快捷命令式的 Toast 提示接口：

// 在任意位置直接调用，组件库会自动在页面最上方挂载容器并展示
CGO.showToast('保存成功', 'success');         // 绿色成功
CGO.showToast('操作失败，请重试', 'error');   // 红色错误
CGO.showToast('请注意：参数未保存', 'warning'); // 黄色警告
CGO.showToast('已复制到剪贴板');              // 默认深色提示
CGO.showToast('消息', 'info', 5000);          // 自定义显示时长 5s

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@centralgo/cgo-ui

🚀 快速接入

方式 1：通过 CDN 引入（纯 HTML / 静态页面推荐）

方式 2：作为 NPM 依赖安装（React / Vue / Vite 等现代工程推荐）

🧩 已注册 WebComponent (共 23 个)

🌓 明暗主题切换

🍞 全局 Toast 通知 API

📄 开源协议