@gup-fe/js-sdk 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +113 -0
  2. package/dist/index.d.ts +196 -0
  3. package/dist/js-sdk.js +25790 -0
  4. package/dist/js-sdk.umd.js +89 -0
  5. package/package.json +62 -0
package/README.md ADDED
@@ -0,0 +1,113 @@
1
+ # @gup-fe/js-sdk
2
+
3
+ 这是一个现代化的、基于 React 构建的统一登录与交互 SDK。无论您使用的是纯 HTML 页面还是基于 React/Vue 的现代前端工程，都可以轻松接入。
4
+
5
+ ## 特性
6
+
7
+ - ⚡️ **开箱即用**: 内置样式自动动态注入，无需繁琐地手动引入 CSS 文件。
8
+ - ⚛️ **原生 React 支持**: 提供了一系列可复用的 React 组件（`Login`, `MobileLogin`, `UidLogin` 等），可深度嵌入您的 React 组件树中。
9
+ - 🌍 **通用兼容**: 提供 ES Modules 格式供现代构建工具（Vite, Webpack 等）进行 Tree-shaking 优化，同时提供 UMD 格式供传统 `<script>` 标签直接无缝接入。
10
+
11
+ ## 安装
12
+
13
+ 如果您的项目使用了构建工具，请通过 npm/yarn/pnpm 安装：
14
+
15
+ ```bash
16
+ npm install @gup-fe/js-sdk
17
+ # 或者
18
+ pnpm add @gup-fe/js-sdk
19
+ ```
20
+
21
+ ## 快速上手
22
+
23
+ ### 方式一：命令式调用（推荐，适用于任意框架）
24
+
25
+ 这是最通用的接入方式。无论您的业务逻辑写在 Vue、原生 JS 还是普通 HTML 中，只要调用 `login()`，SDK 就会自动在 `document.body` 中动态挂载登录弹窗。
26
+
27
+ ```javascript
28
+ import { login } from '@gup-fe/js-sdk';
29
+
30
+ // 一键调出登录弹窗
31
+ login({
32
+ gameId: '5242',
33
+ // loginTypes: ['phone', 'uid'] // 可选：指定开启哪些登录方式
34
+ });
35
+ ```
36
+
37
+ ### 方式二：声明式调用（适用于 React 项目）
38
+
39
+ 如果您使用的是 React，想要更好地控制弹窗的显隐和生命周期，可以直接引入 `Login` 组件。
40
+
41
+ ```tsx
42
+ import { useState } from 'react';
43
+ import { Login } from '@gup-fe/js-sdk';
44
+
45
+ function App() {
46
+ const [isOpen, setIsOpen] = useState(false);
47
+
48
+ return (
49
+ <div>
50
+ <button onClick={() => setIsOpen(true)}>点击登录</button>
51
+
52
+ {/* 渲染 SDK 提供的组件 */}
53
+ <Login
54
+ open={isOpen}
55
+ gameId="5242"
56
+ onClose={() => setIsOpen(false)}
57
+ />
58
+ </div>
59
+ );
60
+ }
61
+ ```
62
+
63
+ ### 方式三：无构建工具接入（传统 HTML 页面 / CDN）
64
+
65
+ 通过传统的 `<script>` 标签引入 UMD 格式的构建产物。加载后，SDK 会自动将方法挂载到浏览器的全局变量 `window.SDK` 上。
66
+
67
+ *(注：请在实际发布后，将路径中的版本号替换为您上传的真实版本)*
68
+
69
+ ```html
70
+ <!DOCTYPE html>
71
+ <html>
72
+ <head>
73
+ <meta charset="utf-8">
74
+ <title>JS SDK Demo</title>
75
+ </head>
76
+ <body>
77
+ <!-- 引入 UMD 产物 -->
78
+ <script src="https://unpkg.com/@gup-fe/js-sdk@2.0.0/dist/js-sdk.umd.js"></script>
79
+
80
+ <script>
81
+ // 直接使用全局变量 SDK 调用
82
+ SDK.login({
83
+ gameId: '5242'
84
+ });
85
+ </script>
86
+ </body>
87
+ </html>
88
+ ```
89
+
90
+ ## 关于样式 (CSS) 的说明
91
+
92
+ 为了提供最佳的开发者体验，本 SDK 在构建打包时已经**将 CSS 样式转换并内联打包到了 JS 中**。
93
+ 这意味着，当您执行 `login()` 或渲染 `<Login />` 组件时，SDK 内部会自动将相关的 `<style>` 标签注入到文档的 `<head>` 中。
94
+ **您不需要、也不应该尝试手动去 `import '@gup-fe/js-sdk/dist/xxx.css'`。** 所有的 UI 都会“开箱即用”地完美呈现。
95
+
96
+ ## API 参考
97
+
98
+ ### `login(options)`
99
+
100
+ 触发并显示登录组件的核心方法。
101
+
102
+ | 参数名 | 类型 | 必填 | 默认值 | 说明 |
103
+ | ------------ | -------------- | ---- | ------ | ---------------------------------------- |
104
+ | `gameId` | `string` | **是** | - | 当前业务/游戏的唯一标识 ID |
105
+ | `loginTypes` | `LoginTypes[]` | 否 | - | 支持的登录方式列表，例如 `['phone', 'uid']` |
106
+
107
+ ### 导出的核心组件与配置
108
+ 对于有高度定制化需求的业务方，SDK 同样暴露了以下底层组件：
109
+ - `Login`：完整的登录弹窗业务组件。
110
+ - `MobileLogin`：仅含“手机号验证码”界面的登录组件。
111
+ - `UidLogin`：仅含“账号密码”界面的登录组件。
112
+ - `ConfigProvider`：SDK 全局上下文配置组件。
113
+ - `LOGIN_TYPES`：登录方式相关的类型常量。
package/dist/index.d.ts ADDED
@@ -0,0 +1,196 @@
1
+ import { default as default_2 } from 'react';
2
+ import { JSX } from 'react/jsx-runtime';
3
+ import * as React_2 from 'react';
4
+
5
+ declare interface AutoLoginConfig {
6
+ enabled: boolean;
7
+ days?: number;
8
+ }
9
+
10
+ declare interface ConfigContextType {
11
+ gameId: string;
12
+ autoLoginConfig: AutoLoginConfig;
13
+ sceneId?: number;
14
+ loginTypes?: LoginTypes[];
15
+ styleVars?: StyleVars;
16
+ currentLoginType?: LoginTypes;
17
+ defaultLoginType?: LoginTypes;
18
+ setCurrentLoginType: (newLoginType: LoginTypes) => void;
19
+ onUidLoginSuccess?: (data: any) => void;
20
+ onPhoneLoginSuccess?: ((data: PhoneLoginResponse) => void) | ((data: PhoneLoginResponse) => Promise<void>);
21
+ onAccountLoginSuccess?: (data: PhoneLoginResponse) => void;
22
+ closeable?: boolean;
23
+ uidLoginConfig?: {
24
+ uidGetterImageClassName?: string;
25
+ mailCodeGetterImageClassName?: string;
26
+ uidMailExtraParams?: Record<string, unknown>;
27
+ };
28
+ mobileLoginConfig?: {
29
+ smsType?: 'register' | 'relation-channel' | 'bind-mobile' | 'bind-device';
30
+ buttonText?: string;
31
+ buttonClassName?: string;
32
+ };
33
+ isShowGiantLogo: boolean;
34
+ setIsShowGiantLogo: (value: boolean) => void;
35
+ }
36
+
37
+ export declare function ConfigProvider({ children, value }: ConfigProviderProps): JSX.Element;
38
+
39
+ declare interface ConfigProviderProps {
40
+ children: default_2.ReactNode;
41
+ value: Omit<ConfigContextType, 'autoLoginConfig' | 'setCurrentLoginType' | 'setIsShowGiantLogo' | 'isShowGiantLogo'> & {
42
+ autoLoginConfig?: AutoLoginConfig;
43
+ };
44
+ }
45
+
46
+ export declare function Login({ open, onOpenChange, sceneId, onPhoneLoginSuccess, onAccountLoginSuccess, onUidLoginSuccess, closeable, mountToaster, toastConfigs, ...props }: Props): JSX.Element;
47
+
48
+ export declare function login({ loginTypes, gameId }: {
49
+ loginTypes?: LoginTypes[];
50
+ gameId: string;
51
+ }): void;
52
+
53
+ export declare const LOGIN_TYPES: {
54
+ readonly ROLE_ID: "roleid";
55
+ readonly GIANT: "giant";
56
+ readonly MOBILE: "mobile";
57
+ readonly WECHAT: "wx";
58
+ readonly QQ: "qq";
59
+ readonly APPLE: "apple";
60
+ };
61
+
62
+ export declare interface LoginOptions {
63
+ onSuccess?: (user: UserInfo) => void;
64
+ onError?: (error: Error) => void;
65
+ onClose?: () => void;
66
+ title?: string;
67
+ logo?: string;
68
+ }
69
+
70
+ declare type LoginTypes = typeof LOGIN_TYPES[keyof typeof LOGIN_TYPES];
71
+
72
+ export declare function MobileLogin(): JSX.Element;
73
+
74
+ export declare interface PassAccount {
75
+ type: number;
76
+ uid: string;
77
+ account_type: number;
78
+ mobile: string;
79
+ view_name: string;
80
+ }
81
+
82
+ export declare interface PhoneLoginResponse {
83
+ account: {
84
+ account_type: number;
85
+ mobile: string;
86
+ type: number;
87
+ uid: string;
88
+ view_name: string;
89
+ };
90
+ channel_info: {
91
+ code: number;
92
+ sign: string;
93
+ token: string;
94
+ gaplaySign: string;
95
+ entity: {
96
+ account: string;
97
+ account_type: number;
98
+ openid: string;
99
+ time: number;
100
+ type: number;
101
+ };
102
+ extra_data: {
103
+ appunid: string;
104
+ createtime: number;
105
+ encrypted: string;
106
+ is_bind_mobile: 0 | 1;
107
+ is_reg: 0 | 1;
108
+ lastlogintime: number;
109
+ mkey: string;
110
+ mobile: string;
111
+ nationcode: string;
112
+ original_type: number;
113
+ };
114
+ };
115
+ token: string;
116
+ }
117
+
118
+ declare interface Props extends Omit<ConfigContextType, 'setCurrentLoginType' | 'setIsShowGiantLogo' | 'isShowGiantLogo' | 'autoLoginConfig'> {
119
+ open?: boolean;
120
+ onOpenChange?: (open: boolean) => void;
121
+ onPhoneLoginSuccess?: (data: PhoneLoginResponse) => void;
122
+ onAccountLoginSuccess?: (data: PhoneLoginResponse) => void;
123
+ sceneId?: number;
124
+ onUidLoginSuccess?: (data: any) => void;
125
+ autoLoginConfig?: AutoLoginConfig;
126
+ closeable?: boolean;
127
+ mountToaster?: boolean;
128
+ toastConfigs?: ToastConfigs;
129
+ }
130
+
131
+ export declare const SDK: {
132
+ login: typeof login;
133
+ };
134
+
135
+ declare interface StyleVars {
136
+ '--primary-color'?: string;
137
+ '--icon-color'?: string;
138
+ '--input-border-color'?: string;
139
+ '--input-label-color'?: string;
140
+ '--input-bg-color'?: string;
141
+ }
142
+
143
+ declare interface ToastConfigs {
144
+ className?: string;
145
+ style?: React_2.CSSProperties;
146
+ viewportClassName?: string;
147
+ timeout?: number;
148
+ }
149
+
150
+ export declare function UidLogin({ onUidLoginSuccess: onUidLoginSuccessProp, customSendUidMailCaptcha, customValidateUidMailCaptcha, }?: {
151
+ onUidLoginSuccess?: (response: any) => void;
152
+ customSendUidMailCaptcha?: (arg: {
153
+ gameId: string;
154
+ accountId: string;
155
+ }) => Promise<any>;
156
+ customValidateUidMailCaptcha?: (arg: {
157
+ gameId: string;
158
+ accountId: string;
159
+ captcha: string;
160
+ expireInDays?: number;
161
+ sceneId?: number;
162
+ }) => Promise<any>;
163
+ }): JSX.Element;
164
+
165
+ export declare interface UserInfo {
166
+ id: string;
167
+ email: string;
168
+ name?: string;
169
+ }
170
+
171
+ export declare interface UserInfoV2 {
172
+ $version: 'v2';
173
+ account?: PassAccount;
174
+ channelId: number;
175
+ username: string;
176
+ gaplaySign?: string;
177
+ char?: {
178
+ CHARID: string;
179
+ NAME: string;
180
+ GAMEPOINT: number;
181
+ VIPLEVEL: number;
182
+ } & Record<string, string | number>;
183
+ zone: {
184
+ zoneid: string;
185
+ zonename: string;
186
+ area: string;
187
+ } | undefined;
188
+ game_id: string;
189
+ openid: string;
190
+ xToken?: string;
191
+ loginByRoleMail: boolean;
192
+ saveTime: number;
193
+ extraState: Record<string, unknown>;
194
+ }
195
+
196
+ export { }