gamesir-magic-ui

v0.1.21

Published

5 months ago

![Logo](https://xiaoji.com/uploads/20250427/82572411dc4d8c4f53be903e2317d789.png)

0High
0Medium
0Low

jeevsong

Logo

盖世小鸡特效组件库 (Gamesir Magic UI Components Library)

简体中文 | English

简体中文

项目介绍

欢迎来到盖世小鸡特效组件库！这是一个由盖世游戏项目组精心设计和开发的前端组件库。我们致力于提供一系列高性能、富有创意且易于使用的特效组件，旨在为您的 Web 应用增添独特的视觉魅力和用户体验。本组件库注重细节，优化性能，确保在各种设备和场景下都能流畅运行。

必要信息

安装/获取组件库

目前组件库尚未发布到公共注册表。您可以通过以下方式获取：

# 占位符：如果组件库发布到 npm 或 yarn，将在此处提供安装命令
# npm install gamesir-magic-ui
# yarn add gamesir-magic-ui

运行示例或预览页面

克隆本项目后，您可以通过以下命令运行示例或预览页面：

npm install
npm run dev

组件使用方法

GlowingCard 组件

GlowingCard 是一个带有动态辉光边框效果的卡片组件，当鼠标悬停在其上时，辉光会以动画形式出现和消失，为您的内容区域提供吸引人的视觉焦点。默认情况下，它会填充其父容器的整个空间（w-full h-full），您也可以通过 className 自定义其尺寸。

GlowingCard 示例

动画行为更新：

--rim-angle 动画：鼠标离开时，--rim-angle 动画现在使用 linear 缓动函数，确保动画平滑过渡。
动态过渡：opacity 和 --rim-angle 的过渡效果会根据鼠标进入 (isEntering) 或离开 (isLeaving) 状态进行动态调整，提供更自然的用户体验。

导入和使用：

import React from 'react';
import { GlowingCard } from './src/components/GlowingCard'; // 请根据实际路径调整

const MyComponent = () => {
  return (
    <div style={{ width: '300px', height: '200px' }} className="mt-10">
      <GlowingCard className="rounded-2xl" borderRadius="1rem">
        <div style={{ padding: '20px', color: 'white' }}>
          <h2>这是我的卡片标题</h2>
          <p>卡片内容放这里。</p>
        </div>
      </GlowingCard>
    </div>
  );
};

export default MyComponent;

IGlowingCardProps 接口属性： ⚙️

NetworkSpeedVisualizer 组件

NetworkSpeedVisualizer 是一个用于可视化网络速度的动态柱状图组件。它能够实时展示网络速度的变化，通过柱子的高度和透明度来直观地反映速度的波动。柱子从左到右，透明度逐渐提高（越靠左越暗），模拟信号逐渐增强的视觉效果。

NetworkSpeedVisualizer 示例

导入和使用：

import React, { useState, useEffect } => from 'react';
import NetworkSpeedVisualizer from './src/components/NetworkSpeedVisualizer'; // 请根据实际路径调整

const MyNetworkMonitor = () => {
  const [speed, setSpeed] = useState<number>(0);

  useEffect(() => {
    const interval = setInterval(() => {
      // 模拟随机的网络速度，范围 0-10000 kbps
      setSpeed(Math.floor(Math.random() * 10000));
    }, 500); // 每 500ms 更新一次

    return () => clearInterval(interval);
  }, []);

  return (
    <div style={{ width: '400px', height: '150px', backgroundColor: '#333' }}>
      <NetworkSpeedVisualizer speed={speed} maxSpeed={10000} />
    </div>
  );
};

export default MyNetworkMonitor;

NetworkSpeedVisualizerProps 接口属性： ⚙️

LightScanEffect 组件

LightScanEffect 是一个用于创建动态扫描光效的组件。它通过控制背景图和两个光效图片的动画，模拟出光线扫描的视觉效果，常用于加载、等待或高亮提示。

LightScanEffect 示例

导入和使用：

import React from 'react';
import { LightScanEffect } from './src/components/LightScanEffect'; // 请根据实际路径调整
import backgroundImage from './src/assets/background_grid.svg';
import lightEffect1Image from './src/assets/light_effect1.png';
import lightEffect2Image from './src/assets/light_effect2.png';

const MyScanComponent = () => {
  return (
    <div style={{ width: '300px', height: '200px', border: '1px solid gray' }}>
      <LightScanEffect
        backgroundImage={backgroundImage}
        lightEffect1Image={lightEffect1Image}
        lightEffect2Image={lightEffect2Image}
        duration={5} // 动画时长5秒
      />
    </div>
  );
};

export default MyScanComponent;

ILightScanEffectProps 接口属性： ⚙️

LightScanEffect Component

LightScanEffect is a component used to create dynamic scanning light effects. It simulates a light scanning visual effect by animating a background image and two light effect images, commonly used for loading, waiting, or highlighting prompts.

LightScanEffect Example

Import and Usage:

import React from 'react';
import { LightScanEffect } from './src/components/LightScanEffect'; // Adjust path as needed
import backgroundImage from './src/assets/background_grid.svg';
import lightEffect1Image from './src/assets/light_effect1.png';
import lightEffect2Image from './src/assets/light_effect2.png';

const MyScanComponent = () => {
  return (
    <div style={{ width: '300px', height: '200px', border: '1px solid gray' }}>
      <LightScanEffect
        backgroundImage={backgroundImage}
        lightEffect1Image={lightEffect1Image}
        lightEffect2Image={lightEffect2Image}
        duration={5} // Animation duration in seconds
      />
    </div>
  );
};

export default MyScanComponent;

ILightScanEffectProps Interface Properties: ⚙️

PhoneNumberInput 组件

PhoneNumberInput 是一个用于输入电话号码的复合组件，它结合了区号选择和手机号码输入框。

PhoneNumberInput 示例

功能

区号选择: 用户可以通过下拉菜单选择国家或地区的区号。
手机号码输入: 提供一个输入框供用户输入手机号码。
受控组件: 通过 value 和 onChange 属性管理组件状态。

属性 (Props)

PlayerReview 组件

PlayerReview 是一个用于展示玩家评分的组件，它能根据传入的分数显示不同的星级和背景颜色，直观地反映玩家评价。

IPlayerReviewProps 接口属性： ⚙️

| 属性名 | 类型 | 默认值 | 描述 | | :------- | :----- | :------ | :----------- | | score | number | 无 | 玩家评分，范围 0-100，必需属性。 |

SvgGlassTag 组件

SvgGlassTag 是一个基于 SVG 实现的 Tag 标签组件，具有渐变边框效果，支持内容自适应。它使用 SVG 的 path 元素绘制边框，并利用渐变实现独特的视觉效果。

ISvgGlassTagProps 接口属性： ⚙️

| 属性名 | 类型 | 默认值 | 描述 | | :------- | :----- | :------ | :----------- | | children | React.ReactNode | 无 | Tag 内部渲染的 React 元素。 |

使用示例

import React from "react";
import { PhoneNumberInput } from "./src/components/PhoneNumberInput"; // 导入组件

const App = () => {
  const [phoneInfo, setPhoneInfo] = React.useState({
    areaCode: "86", // 默认区号
    phoneNumber: ""
  });

  const availableCountries = [
    { name: "中国", code: "86" },
    { name: "美国", code: "1" },
    { name: "加拿大", code: "1" },
    // ...更多国家和区号
  ];

  return (
    <div>
      <h1>联系信息</h1>
      <PhoneNumberInput
        areaCodes={availableCountries}
        value={phoneInfo}
        onChange={setPhoneInfo}
        placeholder="请输入您的手机号码"
        activeColor="#4CAF50"
        hoverColor="#8BC34A"
      />
      <p>当前的手机号码: {phoneInfo.areaCode} {phoneInfo.phoneNumber}</p>
    </div>
  );
};

export default App;
## 🌟 Features

-   **High-Performance Animations**: Utilizes the `motion` library for smooth, responsive animation effects.
-   **Highly Customizable**: Easily adjust component styles and behaviors via `props`.
-   **Out-of-the-Box**: Provides plug-and-play components for quick integration into your projects.
-   **TypeScript Support**: Offers full type definitions for an enhanced development experience.

## 🚀 Development

This project uses `Vite` as the build tool and `React` as the frontend framework.

### Environment Setup

Ensure `Node.js` (recommended v16+) and `pnpm` (or `npm`/`yarn`) are installed in your development environment.

```bash
# Recommended to use pnpm
npm install -g pnpm

Local Development

Clone the repository:

git clone https://github.com/your-username/gamesir-magic-ui.git
cd gamesir-magic-ui

Install dependencies:

pnpm install
# Or npm install / yarn install

Start the development server:
```
pnpm run dev
# Or npm run dev / yarn dev
```
This will start a local development server, usually at http://localhost:5173.

Building the Project

pnpm run build
# Or npm run build / yarn build

The built files will be output to the dist directory.

🤝 Contributing

We warmly welcome contributions from the community! If you have any ideas, suggestions, or find bugs, feel free to contact us through:

Submitting an Issue
Submitting a Pull Request

Before submitting a PR, please ensure your code adheres to project guidelines and passes all tests.

📜 License

This project is open-sourced under the MIT License.

Made with ❤️ by Gamesir Gamehub Project Team

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

盖世小鸡特效组件库 (Gamesir Magic UI Components Library)

简体中文

项目介绍

必要信息

安装/获取组件库

运行示例或预览页面

组件使用方法

GlowingCard 组件

NetworkSpeedVisualizer 组件

LightScanEffect 组件

LightScanEffect Component

PhoneNumberInput 组件

功能

属性 (Props)

PlayerReview 组件

SvgGlassTag 组件

使用示例

Local Development

Building the Project

🤝 Contributing

📜 License