wgt-web-ui

💡 提示: 在 GitHub、GitLab 等支持 Markdown 的平台上，代码块右上角会显示复制按钮，点击即可复制代码。

发布流程

1、设置 npm 发布仓库地址为 Nexus 的地址

  npm set http://172.30.10.160:8081/nexus/repository/wgt/

2、运行 npm 打包，最终引用的文件为 dist 文件夹

  npm run build

3、 发布包整体

  npm publish --registry http://172.30.10.160:8081/nexus/repository/wgt/

wgt-web-ui 库安装方法

npm install wgt-web-ui --registry http://172.30.10.160:8081/nexus/repository/npm-group

或者

npm install wgt-web-ui

组件库引入方式说明

组件支持按需进行引入，但是打包后的 css 文件分离打包的 需要单独引入每个组件的 css 样式。

// 按需引入多个组件
import { PcGameCard, MobileGameInfo } from "wgt-web-ui";
import "wgt-web-ui/PcGameCard/style.css";
import "wgt-web-ui/MobileGameInfo/style.css";

// 也可以单独引入某个组件
import MobileGameInfo from "wgt-web-ui/MobileGameInfo";
import "wgt-web-ui/MobileGameInfo/style.css";

对应组件样式

手机端游戏详情页面 玩游戏区域组件 具体使用方法到 https://gitlab.yeahmobi.com/wgt/wgt-web-ui/-/tree/main/src/lib/mobile 项目地址下进行各个样式查看文档

名称： MobileGameInfo

组件样式图片：

组件项目目录地址： /src/lib/mobile/game-info

名称： MobileGameInfo1

组件样式图片：

组件项目目录地址： /src/lib/mobile/game-info-1

名称： MobileGameInfo2

组件样式图片：

组件项目目录地址： /src/lib/mobile/game-info-2

名称： MobileGameInfo3

组件样式图片：

组件项目目录地址： /src/lib/mobile/game-info-3

名称： MobileGameInfo4

组件样式图片：

组件项目目录地址： /src/lib/mobile/game-info-4

名称： MobileGameInfo5

组件样式图片：

组件项目目录地址： /src/lib/mobile/game-info-5

名称： MobileGameInfo6

组件样式图片：

组件项目目录地址： /src/lib/mobile/game-info-6

名称： MobileGameInfo7

组件样式图片：

组件项目目录地址： /src/lib/mobile/game-info-7

名称： PcFooter1

footer组件样式图片：

组件项目目录地址： /src/components/pc-footer-1

名称： PcFooter2

footer组件样式图片：

组件项目目录地址： /src/components/pc-footer-2

名称： MobileFooter1

footer组件样式图片：

组件项目目录地址： /src/components/mobile-footer-1

名称： MobileFooter2

footer组件样式图片：

组件项目目录地址： /src/components/mobile-footer-2

loading组件

GameCard 组件

| 参数名 | 类型 | 必填 | 默认值 | 说明 | | ---------------- | ------------------------------ | ---- | ------- | --------------------------------------------------------------------------------------------------------------------------------- | | size | string | number | 否 | small | 卡片尺寸类型。支持 'small'、'large'、'oversized'、'search'、'search-big' 或自定义像素值。用于确定图片清晰度与展示比例。 | | style | React.CSSProperties | 否 | — | 传入自定义样式对象，将直接应用于卡片最外层 `` 容器，可用于覆盖默认样式。 | | campaign | string | 否 | — | 埋点字段：标识卡片的来源位置（如 'homepage'、'search'、'category'）。 | | index | number | 否 | — | 当前卡片在列表中的索引位置，用于埋点追踪与调试。 | | **type** |string | 否 |'' | 卡片类型。支持'topic'等特殊样式，当为'topic'时使用原始 icon 不进行裁剪。 | | **useVideo** |boolean | 否 |false | 是否启用视频预览功能（hover 时自动播放）。移动端会自动禁用此功能。 | | **game** | [IGame](#接口定义-igame) | ✅ | — | 游戏数据对象，包含卡片展示所需的基础字段。 | | **callback** | (gamePath: string) => any | 否 | — | 点击卡片时触发的回调函数，参数为游戏路径 path。 | | **seoEnvMap** | [IEnvMap](#接口定义-ienvmap) | ✅ | — | SEO 环境配置对象，用于提供资源域名、系统信息、语言等上下文环境。 | | **gameCardName** | string | 否 | — | 附加样式类名，用于页面级定制样式覆盖。 | | **CategoryHref** |string` | 否 | — | 自定义跳转链接。若存在此参数，则优先跳转该地址，而非默认游戏路径。 |