@yoka-ui/ui 1.0.4 → 1.0.6
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.
- package/@Docs-yoka/exports.generated.md +68 -63
- package/README.md +44 -15
- package/dist/es/business/AiChat/index.js.map +1 -1
- package/dist/es/business/AiChat/intentRecognizer.js.map +1 -1
- package/dist/es/business/AiChat/navigationManager.js +6 -6
- package/dist/es/business/AiChat/navigationManager.js.map +2 -2
- package/dist/es/business/DrawerPageInfo/index.js +2 -2
- package/dist/es/business/DrawerPageInfo/index.js.map +2 -2
- package/dist/es/business/Editor/index.d.ts +1 -1
- package/dist/es/business/Editor/index.js.map +2 -2
- package/dist/es/business/Empty/index.js +1 -1
- package/dist/es/business/Empty/index.js.map +1 -1
- package/dist/es/business/ModCommonFilter/components/PopoverContent/Category.js +2 -2
- package/dist/es/business/ModCommonFilter/components/PopoverContent/Category.js.map +2 -2
- package/dist/es/business/ModCommonFilter/components/PopoverContent/Content.js +3 -3
- package/dist/es/business/ModCommonFilter/components/PopoverContent/Content.js.map +2 -2
- package/dist/es/business/ModCommonFilter/components/PopoverContent/Selected.js +2 -2
- package/dist/es/business/ModCommonFilter/components/PopoverContent/Selected.js.map +2 -2
- package/dist/es/business/ModCommonFilter/index.d.ts +1 -1
- package/dist/es/business/ModCommonFilter/index.js.map +2 -2
- package/dist/es/business/YkLoginModule/SmsLoginForm.d.ts +25 -0
- package/dist/es/business/YkLoginModule/SmsLoginForm.js +178 -0
- package/dist/es/business/YkLoginModule/SmsLoginForm.js.map +7 -0
- package/dist/es/business/YkLoginModule/index.d.ts +48 -0
- package/dist/es/business/YkLoginModule/index.js +198 -0
- package/dist/es/business/YkLoginModule/index.js.map +7 -0
- package/dist/es/business/YkLoginModule/styles.module.less +169 -0
- package/dist/es/business/YkPorjectSelect/index.d.ts +1 -1
- package/dist/es/business/YkPorjectSelect/index.js +2 -2
- package/dist/es/business/YkPorjectSelect/index.js.map +2 -2
- package/dist/es/business/YkSqlEdit/code-mirror-custom.module.less +154 -0
- package/dist/es/business/YkSqlEdit/index.d.ts +20 -0
- package/dist/es/business/YkSqlEdit/index.js +180 -0
- package/dist/es/business/YkSqlEdit/index.js.map +7 -0
- package/dist/es/business/YkSqlEdit/sql-language.d.ts +11 -0
- package/dist/es/business/YkSqlEdit/sql-language.js +1460 -0
- package/dist/es/business/YkSqlEdit/sql-language.js.map +7 -0
- package/dist/es/components/DebounceInput/index.js.map +2 -2
- package/dist/es/components/MultipleSelect/index.d.ts +14 -0
- package/dist/es/components/MultipleSelect/index.js +1 -1
- package/dist/es/components/MultipleSelect/index.js.map +2 -2
- package/dist/es/components/RefreshButton/index.js.map +2 -2
- package/dist/es/components/SearchWithHistory/index.js +1 -1
- package/dist/es/components/SearchWithHistory/index.js.map +2 -2
- package/dist/es/components/TextWithToolTip/index.d.ts +1 -1
- package/dist/es/components/TextWithToolTip/index.js.map +2 -2
- package/dist/es/components/TreeTransfer/components/TreeTransferPanel/index.d.ts +1 -24
- package/dist/es/components/TreeTransfer/components/TreeTransferPanel/index.js +2 -2
- package/dist/es/components/TreeTransfer/components/TreeTransferPanel/index.js.map +2 -2
- package/dist/es/components/TreeTransfer/index.d.ts +1 -24
- package/dist/es/components/TreeTransfer/index.js +8 -8
- package/dist/es/components/TreeTransfer/index.js.map +2 -2
- package/dist/es/components/TreeTransfer/utils/index.d.ts +1 -1
- package/dist/es/components/TreeTransfer/utils/index.js.map +2 -2
- package/dist/es/components/YkDateRangePicker/index.d.ts +1 -1
- package/dist/es/components/YkDateRangePicker/index.js +1 -1
- package/dist/es/components/YkDateRangePicker/index.js.map +2 -2
- package/dist/es/components/YkDateRangePicker/index.module.less +2 -1
- package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.d.ts +1 -1
- package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.js +3 -2
- package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.js.map +2 -2
- package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSRange.d.ts +1 -1
- package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSRange.js +60 -9
- package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSRange.js.map +3 -3
- package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSSelect.d.ts +1 -1
- package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSSelect.js.map +2 -2
- package/dist/es/components/YkRangeDateWithVS/index.d.ts +4 -4
- package/dist/es/components/YkRangeDateWithVS/index.js +2 -3
- package/dist/es/components/YkRangeDateWithVS/index.js.map +2 -2
- package/dist/es/components/YkRangeDateWithVS/index.module.less +23 -4
- package/dist/es/components/YkRangeTimeWithRecent/index.d.ts +1 -18
- package/dist/es/components/YkRangeTimeWithRecent/index.js +27 -7
- package/dist/es/components/YkRangeTimeWithRecent/index.js.map +2 -2
- package/dist/es/creative/ArcCheckbox/index.d.ts +12 -0
- package/dist/es/creative/ArcCheckbox/index.js +49 -0
- package/dist/es/creative/ArcCheckbox/index.js.map +7 -0
- package/dist/es/creative/ArcCheckbox/index.module.less +102 -0
- package/dist/es/creative/ButtonRadioWithInfo/index.js.map +1 -1
- package/dist/es/creative/ButtonWithProgress/index.d.ts +1 -1
- package/dist/es/creative/ButtonWithProgress/index.js.map +2 -2
- package/dist/es/creative/GlassSegmentedRadio/index.d.ts +24 -0
- package/dist/es/creative/GlassSegmentedRadio/index.js +75 -0
- package/dist/es/creative/GlassSegmentedRadio/index.js.map +7 -0
- package/dist/es/creative/GlassSegmentedRadio/index.module.less +241 -0
- package/dist/es/index.d.ts +32 -26
- package/dist/es/index.js +90 -82
- package/dist/es/index.js.map +2 -2
- package/dist/es/index.less +5 -1
- package/dist/es/layout/FlexGrid/index.d.ts +1 -1
- package/dist/es/layout/FlexGrid/index.js.map +2 -2
- package/dist/es/layout/YkContainer/index.js.map +1 -1
- package/dist/es/layout/YkDrawer/index.d.ts +1 -1
- package/dist/es/layout/YkDrawer/index.js +2 -1
- package/dist/es/layout/YkDrawer/index.js.map +2 -2
- package/dist/es/ui/LabelSelect/demo.js +1 -1
- package/dist/es/ui/LabelSelect/demo.js.map +2 -2
- package/dist/es/ui/LabelSelect/index.d.ts +1 -1
- package/dist/es/ui/LabelSelect/index.js +1 -1
- package/dist/es/ui/LabelSelect/index.js.map +2 -2
- package/dist/es/ui/LogicOperator/index.d.ts +1 -1
- package/dist/es/ui/LogicOperator/index.js.map +2 -2
- package/dist/es/ui/YkButton/index.d.ts +1 -1
- package/dist/es/ui/YkButton/index.js.map +2 -2
- package/dist/es/ui/YkCard/index.d.ts +1 -1
- package/dist/es/ui/YkCard/index.js +1 -1
- package/dist/es/ui/YkCard/index.js.map +2 -2
- package/dist/es/ui/YkCheckbox/index.d.ts +1 -1
- package/dist/es/ui/YkCheckbox/index.js.map +2 -2
- package/dist/es/ui/YkDescriptions/index.d.ts +1 -1
- package/dist/es/ui/YkDescriptions/index.js.map +2 -2
- package/dist/es/ui/YkPagination/index.d.ts +1 -1
- package/dist/es/ui/YkPagination/index.js.map +2 -2
- package/dist/es/ui/YkRadio/index.d.ts +1 -1
- package/dist/es/ui/YkRadio/index.js.map +2 -2
- package/dist/es/ui/YkSegmented/index.d.ts +1 -1
- package/dist/es/ui/YkSegmented/index.js.map +2 -2
- package/dist/es/ui/YkSelect/index.d.ts +1 -1
- package/dist/es/ui/YkSelect/index.js.map +2 -2
- package/dist/es/ui/YkSpin/index.d.ts +1 -1
- package/dist/es/ui/YkSpin/index.js.map +2 -2
- package/dist/es/ui/YkStatistic/index.d.ts +1 -1
- package/dist/es/ui/YkStatistic/index.js.map +2 -2
- package/dist/es/ui/YkSwitch/index.d.ts +1 -1
- package/dist/es/ui/YkSwitch/index.js.map +2 -2
- package/dist/es/ui/YkTabs/index.d.ts +1 -1
- package/dist/es/ui/YkTabs/index.js.map +2 -2
- package/dist/es/ui/YkTooltip/index.d.ts +1 -1
- package/dist/es/ui/YkTooltip/index.js.map +2 -2
- package/dist/es/utils/styleUtils.js.map +2 -2
- package/dist/es/utils/ykStorybookDoc.js +1 -1
- package/dist/es/utils/ykStorybookDoc.js.map +1 -1
- package/dist/lib/business/AiChat/index.js.map +1 -1
- package/dist/lib/business/AiChat/intentRecognizer.js.map +1 -1
- package/dist/lib/business/AiChat/navigationManager.js +6 -6
- package/dist/lib/business/AiChat/navigationManager.js.map +2 -2
- package/dist/lib/business/DrawerPageInfo/index.js +1 -1
- package/dist/lib/business/DrawerPageInfo/index.js.map +2 -2
- package/dist/lib/business/Editor/index.d.ts +1 -1
- package/dist/lib/business/Editor/index.js.map +2 -2
- package/dist/lib/business/Empty/index.js +1 -1
- package/dist/lib/business/Empty/index.js.map +1 -1
- package/dist/lib/business/ModCommonFilter/components/PopoverContent/Category.js +3 -3
- package/dist/lib/business/ModCommonFilter/components/PopoverContent/Category.js.map +2 -2
- package/dist/lib/business/ModCommonFilter/components/PopoverContent/Content.js +4 -4
- package/dist/lib/business/ModCommonFilter/components/PopoverContent/Content.js.map +2 -2
- package/dist/lib/business/ModCommonFilter/components/PopoverContent/Selected.js +3 -3
- package/dist/lib/business/ModCommonFilter/components/PopoverContent/Selected.js.map +2 -2
- package/dist/lib/business/ModCommonFilter/index.d.ts +1 -1
- package/dist/lib/business/ModCommonFilter/index.js.map +2 -2
- package/dist/lib/business/YkLoginModule/SmsLoginForm.d.ts +25 -0
- package/dist/lib/business/YkLoginModule/SmsLoginForm.js +171 -0
- package/dist/lib/business/YkLoginModule/SmsLoginForm.js.map +7 -0
- package/dist/lib/business/YkLoginModule/index.d.ts +48 -0
- package/dist/lib/business/YkLoginModule/index.js +206 -0
- package/dist/lib/business/YkLoginModule/index.js.map +7 -0
- package/dist/lib/business/YkLoginModule/styles.module.less +169 -0
- package/dist/lib/business/YkPorjectSelect/index.d.ts +1 -1
- package/dist/lib/business/YkPorjectSelect/index.js +3 -3
- package/dist/lib/business/YkPorjectSelect/index.js.map +2 -2
- package/dist/lib/business/YkSqlEdit/code-mirror-custom.module.less +154 -0
- package/dist/lib/business/YkSqlEdit/index.d.ts +20 -0
- package/dist/lib/business/YkSqlEdit/index.js +202 -0
- package/dist/lib/business/YkSqlEdit/index.js.map +7 -0
- package/dist/lib/business/YkSqlEdit/sql-language.d.ts +11 -0
- package/dist/lib/business/YkSqlEdit/sql-language.js +1493 -0
- package/dist/lib/business/YkSqlEdit/sql-language.js.map +7 -0
- package/dist/lib/components/DebounceInput/index.js.map +2 -2
- package/dist/lib/components/MultipleSelect/index.d.ts +14 -0
- package/dist/lib/components/MultipleSelect/index.js +1 -1
- package/dist/lib/components/MultipleSelect/index.js.map +2 -2
- package/dist/lib/components/RefreshButton/index.js.map +2 -2
- package/dist/lib/components/SearchWithHistory/index.js +1 -1
- package/dist/lib/components/SearchWithHistory/index.js.map +2 -2
- package/dist/lib/components/TextWithToolTip/index.d.ts +1 -1
- package/dist/lib/components/TextWithToolTip/index.js.map +2 -2
- package/dist/lib/components/TreeTransfer/components/TreeTransferPanel/index.d.ts +1 -24
- package/dist/lib/components/TreeTransfer/components/TreeTransferPanel/index.js +2 -2
- package/dist/lib/components/TreeTransfer/components/TreeTransferPanel/index.js.map +2 -2
- package/dist/lib/components/TreeTransfer/index.d.ts +1 -24
- package/dist/lib/components/TreeTransfer/index.js +3 -3
- package/dist/lib/components/TreeTransfer/index.js.map +2 -2
- package/dist/lib/components/TreeTransfer/utils/index.d.ts +1 -1
- package/dist/lib/components/TreeTransfer/utils/index.js.map +2 -2
- package/dist/lib/components/YkDateRangePicker/index.d.ts +1 -1
- package/dist/lib/components/YkDateRangePicker/index.js +1 -1
- package/dist/lib/components/YkDateRangePicker/index.js.map +2 -2
- package/dist/lib/components/YkDateRangePicker/index.module.less +2 -1
- package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.d.ts +1 -1
- package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.js +3 -2
- package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.js.map +2 -2
- package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSRange.d.ts +1 -1
- package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSRange.js +59 -8
- package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSRange.js.map +3 -3
- package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSSelect.d.ts +1 -1
- package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSSelect.js.map +2 -2
- package/dist/lib/components/YkRangeDateWithVS/index.d.ts +4 -4
- package/dist/lib/components/YkRangeDateWithVS/index.js +4 -5
- package/dist/lib/components/YkRangeDateWithVS/index.js.map +3 -3
- package/dist/lib/components/YkRangeDateWithVS/index.module.less +23 -4
- package/dist/lib/components/YkRangeTimeWithRecent/index.d.ts +1 -18
- package/dist/lib/components/YkRangeTimeWithRecent/index.js +27 -7
- package/dist/lib/components/YkRangeTimeWithRecent/index.js.map +2 -2
- package/dist/lib/creative/ArcCheckbox/index.d.ts +12 -0
- package/dist/lib/creative/ArcCheckbox/index.js +50 -0
- package/dist/lib/creative/ArcCheckbox/index.js.map +7 -0
- package/dist/lib/creative/ArcCheckbox/index.module.less +102 -0
- package/dist/lib/creative/ButtonRadioWithInfo/index.js.map +1 -1
- package/dist/lib/creative/ButtonWithProgress/index.d.ts +1 -1
- package/dist/lib/creative/ButtonWithProgress/index.js.map +2 -2
- package/dist/lib/creative/GlassSegmentedRadio/index.d.ts +24 -0
- package/dist/lib/creative/GlassSegmentedRadio/index.js +78 -0
- package/dist/lib/creative/GlassSegmentedRadio/index.js.map +7 -0
- package/dist/lib/creative/GlassSegmentedRadio/index.module.less +241 -0
- package/dist/lib/index.d.ts +32 -26
- package/dist/lib/index.js +37 -25
- package/dist/lib/index.js.map +2 -2
- package/dist/lib/index.less +5 -1
- package/dist/lib/layout/FlexGrid/index.d.ts +1 -1
- package/dist/lib/layout/FlexGrid/index.js.map +2 -2
- package/dist/lib/layout/YkContainer/index.js.map +1 -1
- package/dist/lib/layout/YkDrawer/index.d.ts +1 -1
- package/dist/lib/layout/YkDrawer/index.js +2 -1
- package/dist/lib/layout/YkDrawer/index.js.map +2 -2
- package/dist/lib/ui/LabelSelect/demo.js +1 -1
- package/dist/lib/ui/LabelSelect/demo.js.map +2 -2
- package/dist/lib/ui/LabelSelect/index.d.ts +1 -1
- package/dist/lib/ui/LabelSelect/index.js +1 -1
- package/dist/lib/ui/LabelSelect/index.js.map +2 -2
- package/dist/lib/ui/LogicOperator/index.d.ts +1 -1
- package/dist/lib/ui/LogicOperator/index.js.map +2 -2
- package/dist/lib/ui/YkButton/index.d.ts +1 -1
- package/dist/lib/ui/YkButton/index.js.map +2 -2
- package/dist/lib/ui/YkCard/index.d.ts +1 -1
- package/dist/lib/ui/YkCard/index.js.map +2 -2
- package/dist/lib/ui/YkCheckbox/index.d.ts +1 -1
- package/dist/lib/ui/YkCheckbox/index.js.map +2 -2
- package/dist/lib/ui/YkDescriptions/index.d.ts +1 -1
- package/dist/lib/ui/YkDescriptions/index.js.map +2 -2
- package/dist/lib/ui/YkPagination/index.d.ts +1 -1
- package/dist/lib/ui/YkPagination/index.js.map +2 -2
- package/dist/lib/ui/YkRadio/index.d.ts +1 -1
- package/dist/lib/ui/YkRadio/index.js.map +2 -2
- package/dist/lib/ui/YkSegmented/index.d.ts +1 -1
- package/dist/lib/ui/YkSegmented/index.js.map +2 -2
- package/dist/lib/ui/YkSelect/index.d.ts +1 -1
- package/dist/lib/ui/YkSelect/index.js.map +2 -2
- package/dist/lib/ui/YkSpin/index.d.ts +1 -1
- package/dist/lib/ui/YkSpin/index.js.map +2 -2
- package/dist/lib/ui/YkStatistic/index.d.ts +1 -1
- package/dist/lib/ui/YkStatistic/index.js.map +2 -2
- package/dist/lib/ui/YkSwitch/index.d.ts +1 -1
- package/dist/lib/ui/YkSwitch/index.js.map +2 -2
- package/dist/lib/ui/YkTabs/index.d.ts +1 -1
- package/dist/lib/ui/YkTabs/index.js.map +2 -2
- package/dist/lib/ui/YkTooltip/index.d.ts +1 -1
- package/dist/lib/ui/YkTooltip/index.js.map +2 -2
- package/dist/lib/utils/styleUtils.js.map +2 -2
- package/dist/lib/utils/ykStorybookDoc.js +1 -1
- package/dist/lib/utils/ykStorybookDoc.js.map +1 -1
- package/package.json +43 -45
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type SmsLoginFormApi } from './SmsLoginForm';
|
|
3
|
+
export type LoginType = 'qrcode' | 'sms';
|
|
4
|
+
export type LoginTabItem = {
|
|
5
|
+
key: LoginType;
|
|
6
|
+
label: React.ReactNode;
|
|
7
|
+
};
|
|
8
|
+
export type QrcodeApi = {
|
|
9
|
+
getQrcode: () => Promise<{
|
|
10
|
+
qrcode: string;
|
|
11
|
+
url: string;
|
|
12
|
+
}>;
|
|
13
|
+
scanLogin: (qrcode: string) => Promise<{
|
|
14
|
+
code: number;
|
|
15
|
+
data?: {
|
|
16
|
+
status?: number;
|
|
17
|
+
msg?: string;
|
|
18
|
+
};
|
|
19
|
+
}>;
|
|
20
|
+
};
|
|
21
|
+
export type LoginModuleProps = {
|
|
22
|
+
title: React.ReactNode;
|
|
23
|
+
tabs: LoginTabItem[];
|
|
24
|
+
defaultLoginType: LoginType;
|
|
25
|
+
containerStyle?: React.CSSProperties;
|
|
26
|
+
actions?: React.ReactNode | ((loginType: LoginType) => React.ReactNode);
|
|
27
|
+
className?: string;
|
|
28
|
+
formClassName?: string;
|
|
29
|
+
tabsClassName?: string;
|
|
30
|
+
inputClassName?: string;
|
|
31
|
+
qrcodeClassName?: string;
|
|
32
|
+
qrcodeBoxClassName?: string;
|
|
33
|
+
onFinish: (values: Record<string, unknown>) => Promise<void>;
|
|
34
|
+
qrcode?: {
|
|
35
|
+
api: QrcodeApi;
|
|
36
|
+
icon: string;
|
|
37
|
+
iconSize?: number;
|
|
38
|
+
size?: number;
|
|
39
|
+
wrapStyle?: React.CSSProperties;
|
|
40
|
+
onSuccess: () => void | Promise<void>;
|
|
41
|
+
};
|
|
42
|
+
sms?: {
|
|
43
|
+
api: SmsLoginFormApi;
|
|
44
|
+
appKey: string;
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
declare const LoginModule: React.FC<LoginModuleProps>;
|
|
48
|
+
export default LoginModule;
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
var __async = (__this, __arguments, generator) => {
|
|
2
|
+
return new Promise((resolve, reject) => {
|
|
3
|
+
var fulfilled = (value) => {
|
|
4
|
+
try {
|
|
5
|
+
step(generator.next(value));
|
|
6
|
+
} catch (e) {
|
|
7
|
+
reject(e);
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
var rejected = (value) => {
|
|
11
|
+
try {
|
|
12
|
+
step(generator.throw(value));
|
|
13
|
+
} catch (e) {
|
|
14
|
+
reject(e);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
18
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
// src/business/YkLoginModule/index.tsx
|
|
23
|
+
import { LoginForm } from "@ant-design/pro-form";
|
|
24
|
+
import { Flex, message, QRCode, Tabs } from "antd";
|
|
25
|
+
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
26
|
+
import SmsLoginForm from "./SmsLoginForm";
|
|
27
|
+
import styles from "./styles.module.less";
|
|
28
|
+
var DEFAULT_QRCODE_WRAP_STYLE = {
|
|
29
|
+
padding: 10,
|
|
30
|
+
display: "flex",
|
|
31
|
+
justifyContent: "center"
|
|
32
|
+
};
|
|
33
|
+
var LoginModule = (props) => {
|
|
34
|
+
var _a, _b, _c;
|
|
35
|
+
const {
|
|
36
|
+
title,
|
|
37
|
+
tabs,
|
|
38
|
+
defaultLoginType,
|
|
39
|
+
containerStyle,
|
|
40
|
+
actions,
|
|
41
|
+
onFinish,
|
|
42
|
+
qrcode,
|
|
43
|
+
className = styles.root,
|
|
44
|
+
formClassName = styles.form,
|
|
45
|
+
tabsClassName = styles.tabs,
|
|
46
|
+
inputClassName,
|
|
47
|
+
qrcodeClassName = styles.qrcode,
|
|
48
|
+
qrcodeBoxClassName = styles.qrcodeBox,
|
|
49
|
+
sms
|
|
50
|
+
} = props;
|
|
51
|
+
const [loginType, setLoginType] = useState(defaultLoginType);
|
|
52
|
+
const [qrcodeStatus, setQrcodeStatus] = useState("active");
|
|
53
|
+
const [qrcodeUrl, setQrcodeUrl] = useState("-");
|
|
54
|
+
const [qrcodeValue, setQrcodeValue] = useState("");
|
|
55
|
+
const pollIntervalRef = useRef(null);
|
|
56
|
+
const pollTimeoutRef = useRef(null);
|
|
57
|
+
const shouldShowSubmitter = loginType !== "qrcode";
|
|
58
|
+
const resolvedActions = useMemo(() => {
|
|
59
|
+
if (!actions)
|
|
60
|
+
return void 0;
|
|
61
|
+
return typeof actions === "function" ? actions(loginType) : actions;
|
|
62
|
+
}, [actions, loginType]);
|
|
63
|
+
const safeClearTimers = useCallback(() => {
|
|
64
|
+
if (pollIntervalRef.current)
|
|
65
|
+
clearInterval(pollIntervalRef.current);
|
|
66
|
+
if (pollTimeoutRef.current)
|
|
67
|
+
clearTimeout(pollTimeoutRef.current);
|
|
68
|
+
pollIntervalRef.current = null;
|
|
69
|
+
pollTimeoutRef.current = null;
|
|
70
|
+
}, []);
|
|
71
|
+
const handleQrcodeRefresh = useCallback(() => __async(void 0, null, function* () {
|
|
72
|
+
if (!qrcode)
|
|
73
|
+
return;
|
|
74
|
+
setQrcodeStatus("loading");
|
|
75
|
+
try {
|
|
76
|
+
const res = yield qrcode.api.getQrcode();
|
|
77
|
+
setQrcodeUrl(res.url);
|
|
78
|
+
setQrcodeValue(res.qrcode);
|
|
79
|
+
setQrcodeStatus("active");
|
|
80
|
+
} catch (e) {
|
|
81
|
+
setQrcodeStatus("expired");
|
|
82
|
+
message.error("获取二维码失败,请稍后重试");
|
|
83
|
+
}
|
|
84
|
+
}), [qrcode]);
|
|
85
|
+
const enabledTabKeys = useMemo(() => new Set(tabs.map((t) => t.key)), [tabs]);
|
|
86
|
+
useEffect(() => {
|
|
87
|
+
var _a2;
|
|
88
|
+
if (enabledTabKeys.has(defaultLoginType)) {
|
|
89
|
+
setLoginType(defaultLoginType);
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
92
|
+
const fallback = (_a2 = tabs[0]) == null ? void 0 : _a2.key;
|
|
93
|
+
if (fallback)
|
|
94
|
+
setLoginType(fallback);
|
|
95
|
+
}, [defaultLoginType, enabledTabKeys, tabs]);
|
|
96
|
+
useEffect(() => {
|
|
97
|
+
var _a2;
|
|
98
|
+
if (enabledTabKeys.has(loginType))
|
|
99
|
+
return;
|
|
100
|
+
const fallback = (_a2 = tabs[0]) == null ? void 0 : _a2.key;
|
|
101
|
+
if (fallback)
|
|
102
|
+
setLoginType(fallback);
|
|
103
|
+
}, [enabledTabKeys, loginType, tabs]);
|
|
104
|
+
useEffect(() => {
|
|
105
|
+
safeClearTimers();
|
|
106
|
+
if (loginType !== "qrcode") {
|
|
107
|
+
setQrcodeStatus("expired");
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
if (!qrcode) {
|
|
111
|
+
setQrcodeStatus("expired");
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
void handleQrcodeRefresh();
|
|
115
|
+
return safeClearTimers;
|
|
116
|
+
}, [handleQrcodeRefresh, loginType, qrcode, safeClearTimers]);
|
|
117
|
+
useEffect(() => {
|
|
118
|
+
safeClearTimers();
|
|
119
|
+
if (!qrcode)
|
|
120
|
+
return;
|
|
121
|
+
if (loginType !== "qrcode")
|
|
122
|
+
return;
|
|
123
|
+
if (qrcodeStatus !== "active")
|
|
124
|
+
return;
|
|
125
|
+
if (!qrcodeValue)
|
|
126
|
+
return;
|
|
127
|
+
pollIntervalRef.current = setInterval(() => {
|
|
128
|
+
void qrcode.api.scanLogin(qrcodeValue).then((res) => {
|
|
129
|
+
var _a2, _b2, _c2;
|
|
130
|
+
if (res.code !== 200)
|
|
131
|
+
return;
|
|
132
|
+
const status = (_a2 = res.data) == null ? void 0 : _a2.status;
|
|
133
|
+
const msg = (_c2 = (_b2 = res.data) == null ? void 0 : _b2.msg) != null ? _c2 : "扫码遇到问题,稍后重试";
|
|
134
|
+
if (status === -1)
|
|
135
|
+
return;
|
|
136
|
+
if (status !== 1) {
|
|
137
|
+
safeClearTimers();
|
|
138
|
+
setQrcodeStatus("expired");
|
|
139
|
+
message.error(msg, 3);
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
142
|
+
safeClearTimers();
|
|
143
|
+
void qrcode.onSuccess();
|
|
144
|
+
}).catch(() => {
|
|
145
|
+
});
|
|
146
|
+
}, 1e3);
|
|
147
|
+
pollTimeoutRef.current = setTimeout(() => {
|
|
148
|
+
setQrcodeStatus("expired");
|
|
149
|
+
safeClearTimers();
|
|
150
|
+
}, 3e4);
|
|
151
|
+
return safeClearTimers;
|
|
152
|
+
}, [loginType, qrcode, qrcodeStatus, qrcodeValue, safeClearTimers]);
|
|
153
|
+
const tabItems = useMemo(() => tabs.map((t) => ({ key: t.key, label: t.label })), [tabs]);
|
|
154
|
+
return /* @__PURE__ */ React.createElement("div", { className, style: { maxWidth: "500px" } }, /* @__PURE__ */ React.createElement(
|
|
155
|
+
LoginForm,
|
|
156
|
+
{
|
|
157
|
+
className: formClassName,
|
|
158
|
+
onFinish: (values) => __async(void 0, null, function* () {
|
|
159
|
+
yield onFinish(values);
|
|
160
|
+
}),
|
|
161
|
+
title: typeof title === "string" ? /* @__PURE__ */ React.createElement("div", { className: styles.title }, title) : title,
|
|
162
|
+
containerStyle,
|
|
163
|
+
submitter: shouldShowSubmitter ? void 0 : false,
|
|
164
|
+
actions: resolvedActions
|
|
165
|
+
},
|
|
166
|
+
/* @__PURE__ */ React.createElement(
|
|
167
|
+
Tabs,
|
|
168
|
+
{
|
|
169
|
+
className: tabsClassName,
|
|
170
|
+
centered: true,
|
|
171
|
+
activeKey: loginType,
|
|
172
|
+
onChange: (activeKey) => {
|
|
173
|
+
const next = activeKey;
|
|
174
|
+
setLoginType(next);
|
|
175
|
+
},
|
|
176
|
+
items: tabItems
|
|
177
|
+
}
|
|
178
|
+
),
|
|
179
|
+
enabledTabKeys.has("qrcode") && loginType === "qrcode" && qrcode && /* @__PURE__ */ React.createElement("div", { style: (_a = qrcode.wrapStyle) != null ? _a : DEFAULT_QRCODE_WRAP_STYLE }, /* @__PURE__ */ React.createElement("div", { className: qrcodeBoxClassName }, /* @__PURE__ */ React.createElement(Flex, { justify: "center", align: "center" }, /* @__PURE__ */ React.createElement("i", { className: "iconfont icon-saoyisao", style: { color: "#999999", marginRight: 10, fontSize: 14 } }), "请使用", /* @__PURE__ */ React.createElement("span", { style: { color: "#0A6BFD" } }, "小闪扫码"), "登录"), /* @__PURE__ */ React.createElement(
|
|
180
|
+
QRCode,
|
|
181
|
+
{
|
|
182
|
+
icon: qrcode.icon,
|
|
183
|
+
iconSize: (_b = qrcode.iconSize) != null ? _b : 50,
|
|
184
|
+
className: qrcodeClassName,
|
|
185
|
+
size: (_c = qrcode.size) != null ? _c : 240,
|
|
186
|
+
value: qrcodeUrl,
|
|
187
|
+
status: qrcodeStatus,
|
|
188
|
+
onRefresh: handleQrcodeRefresh
|
|
189
|
+
}
|
|
190
|
+
))),
|
|
191
|
+
enabledTabKeys.has("sms") && loginType === "sms" && sms && /* @__PURE__ */ React.createElement(SmsLoginForm, { inputClassName: inputClassName != null ? inputClassName : "", api: sms.api, appKey: sms.appKey })
|
|
192
|
+
));
|
|
193
|
+
};
|
|
194
|
+
var YkLoginModule_default = LoginModule;
|
|
195
|
+
export {
|
|
196
|
+
YkLoginModule_default as default
|
|
197
|
+
};
|
|
198
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/business/YkLoginModule/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import { LoginForm } from '@ant-design/pro-form';\nimport { Flex, message, QRCode, Tabs } from 'antd';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport SmsLoginForm, { type SmsLoginFormApi } from './SmsLoginForm';\nimport styles from './styles.module.less';\n\nexport type LoginType = 'qrcode' | 'sms';\n\nexport type LoginTabItem = {\n key: LoginType;\n label: React.ReactNode;\n};\n\nexport type QrcodeApi = {\n getQrcode: () => Promise<{ qrcode: string; url: string }>;\n scanLogin: (qrcode: string) => Promise<{\n code: number;\n data?: {\n status?: number;\n msg?: string;\n };\n }>;\n};\n\nexport type LoginModuleProps = {\n title: React.ReactNode;\n tabs: LoginTabItem[];\n defaultLoginType: LoginType;\n containerStyle?: React.CSSProperties;\n actions?: React.ReactNode | ((loginType: LoginType) => React.ReactNode);\n className?: string;\n formClassName?: string;\n tabsClassName?: string;\n inputClassName?: string;\n qrcodeClassName?: string;\n qrcodeBoxClassName?: string;\n\n onFinish: (values: Record<string, unknown>) => Promise<void>;\n\n qrcode?: {\n api: QrcodeApi;\n icon: string;\n iconSize?: number;\n size?: number;\n wrapStyle?: React.CSSProperties;\n onSuccess: () => void | Promise<void>;\n };\n\n sms?: {\n api: SmsLoginFormApi;\n appKey: string;\n };\n};\n\nconst DEFAULT_QRCODE_WRAP_STYLE: React.CSSProperties = {\n padding: 10,\n display: 'flex',\n justifyContent: 'center',\n};\n\nconst LoginModule: React.FC<LoginModuleProps> = (props) => {\n const {\n title,\n tabs,\n defaultLoginType,\n containerStyle,\n actions,\n onFinish,\n qrcode,\n className = styles.root,\n formClassName = styles.form,\n tabsClassName = styles.tabs,\n inputClassName,\n qrcodeClassName = styles.qrcode,\n qrcodeBoxClassName = styles.qrcodeBox,\n sms,\n } = props;\n\n const [loginType, setLoginType] = useState<LoginType>(defaultLoginType);\n\n const [qrcodeStatus, setQrcodeStatus] = useState<'active' | 'expired' | 'loading'>('active');\n const [qrcodeUrl, setQrcodeUrl] = useState<string>('-');\n const [qrcodeValue, setQrcodeValue] = useState<string>('');\n const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n const pollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const shouldShowSubmitter = loginType !== 'qrcode';\n\n const resolvedActions = useMemo(() => {\n if (!actions) return undefined;\n return typeof actions === 'function' ? actions(loginType) : actions;\n }, [actions, loginType]);\n\n const safeClearTimers = useCallback(() => {\n if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);\n if (pollTimeoutRef.current) clearTimeout(pollTimeoutRef.current);\n pollIntervalRef.current = null;\n pollTimeoutRef.current = null;\n }, []);\n\n const handleQrcodeRefresh = useCallback(async () => {\n if (!qrcode) return;\n setQrcodeStatus('loading');\n try {\n const res = await qrcode.api.getQrcode();\n setQrcodeUrl(res.url);\n setQrcodeValue(res.qrcode);\n setQrcodeStatus('active');\n } catch {\n setQrcodeStatus('expired');\n message.error('获取二维码失败,请稍后重试');\n }\n }, [qrcode]);\n\n const enabledTabKeys = useMemo(() => new Set(tabs.map((t) => t.key)), [tabs]);\n\n useEffect(() => {\n if (enabledTabKeys.has(defaultLoginType)) {\n setLoginType(defaultLoginType);\n return;\n }\n const fallback = tabs[0]?.key;\n if (fallback) setLoginType(fallback);\n }, [defaultLoginType, enabledTabKeys, tabs]);\n\n useEffect(() => {\n if (enabledTabKeys.has(loginType)) return;\n const fallback = tabs[0]?.key;\n if (fallback) setLoginType(fallback);\n }, [enabledTabKeys, loginType, tabs]);\n\n // 切到扫码登录时刷新二维码;离开扫码登录时停止轮询并标记过期\n useEffect(() => {\n safeClearTimers();\n if (loginType !== 'qrcode') {\n setQrcodeStatus('expired');\n return;\n }\n if (!qrcode) {\n setQrcodeStatus('expired');\n return;\n }\n void handleQrcodeRefresh();\n return safeClearTimers;\n }, [handleQrcodeRefresh, loginType, qrcode, safeClearTimers]);\n\n // 扫码轮询:仅在二维码“激活 + 有值 + 在扫码 Tab”时启动\n useEffect(() => {\n safeClearTimers();\n if (!qrcode) return;\n if (loginType !== 'qrcode') return;\n if (qrcodeStatus !== 'active') return;\n if (!qrcodeValue) return;\n\n pollIntervalRef.current = setInterval(() => {\n void qrcode.api\n .scanLogin(qrcodeValue)\n .then((res) => {\n if (res.code !== 200) return;\n\n const status = res.data?.status;\n const msg = res.data?.msg ?? '扫码遇到问题,稍后重试';\n\n if (status === -1) return;\n if (status !== 1) {\n safeClearTimers();\n setQrcodeStatus('expired');\n message.error(msg, 3);\n return;\n }\n safeClearTimers();\n void qrcode.onSuccess();\n })\n .catch(() => {\n // 忽略轮询中的偶发网络错误,保持继续轮询直到超时/成功\n });\n }, 1000);\n\n pollTimeoutRef.current = setTimeout(() => {\n setQrcodeStatus('expired');\n safeClearTimers();\n }, 30000);\n\n return safeClearTimers;\n }, [loginType, qrcode, qrcodeStatus, qrcodeValue, safeClearTimers]);\n\n const tabItems = useMemo(() => tabs.map((t) => ({ key: t.key, label: t.label })), [tabs]);\n\n return (\n <div className={className} style={{ maxWidth: '500px' }}>\n <LoginForm\n className={formClassName}\n onFinish={async (values) => {\n await onFinish(values);\n }}\n title={typeof title === 'string' ? <div className={styles.title}>{title}</div> : title}\n containerStyle={containerStyle}\n submitter={shouldShowSubmitter ? undefined : (false as const)}\n actions={resolvedActions}\n >\n <Tabs\n className={tabsClassName}\n centered\n activeKey={loginType}\n onChange={(activeKey) => {\n const next = activeKey as LoginType;\n setLoginType(next);\n }}\n items={tabItems}\n />\n\n {enabledTabKeys.has('qrcode') && loginType === 'qrcode' && qrcode && (\n <div style={qrcode.wrapStyle ?? DEFAULT_QRCODE_WRAP_STYLE}>\n <div className={qrcodeBoxClassName}>\n <Flex justify='center' align='center'>\n <i className='iconfont icon-saoyisao' style={{ color: '#999999', marginRight: 10, fontSize: 14 }}></i>\n 请使用<span style={{ color: '#0A6BFD' }}>小闪扫码</span>登录\n </Flex>\n <QRCode\n icon={qrcode.icon}\n iconSize={qrcode.iconSize ?? 50}\n className={qrcodeClassName}\n size={qrcode.size ?? 240}\n value={qrcodeUrl}\n status={qrcodeStatus}\n onRefresh={handleQrcodeRefresh}\n />\n </div>\n </div>\n )}\n\n {enabledTabKeys.has('sms') && loginType === 'sms' && sms && (\n <SmsLoginForm inputClassName={inputClassName ?? ''} api={sms.api} appKey={sms.appKey} />\n )}\n </LoginForm>\n </div>\n );\n};\n\nexport default LoginModule;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["_a", "_b", "_c"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
.root {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex: 1;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
|
|
7
|
+
:global {
|
|
8
|
+
@media (max-width: 768px) {
|
|
9
|
+
.ant-pro-form-login-container {
|
|
10
|
+
padding: 20px !important;
|
|
11
|
+
padding-inline: 0;
|
|
12
|
+
padding-block: 0;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.ant-pro-form-login-container {
|
|
17
|
+
border: 1px solid #ececec;
|
|
18
|
+
border-radius: 12px;
|
|
19
|
+
background: #ffffff;
|
|
20
|
+
|
|
21
|
+
.ant-pro-form-login-top {
|
|
22
|
+
margin-bottom: 54px;
|
|
23
|
+
|
|
24
|
+
.ant-pro-form-login-header {
|
|
25
|
+
justify-content: flex-start;
|
|
26
|
+
height: 33px;
|
|
27
|
+
line-height: 33px;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.ant-pro-form-login-main {
|
|
32
|
+
width: 100% !important;
|
|
33
|
+
max-width: 500px !important;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@media (max-width: 768px) {
|
|
37
|
+
.ant-pro-form-login-main {
|
|
38
|
+
width: 100% !important;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.ant-form-item-control-input {
|
|
42
|
+
.ant-input-affix-wrapper {
|
|
43
|
+
width: 100% !important;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.ant-pro-form-login-main-other {
|
|
49
|
+
margin-top: 0;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.title {
|
|
56
|
+
height: 33px;
|
|
57
|
+
color: #333333;
|
|
58
|
+
font-weight: 600;
|
|
59
|
+
font-size: 24px;
|
|
60
|
+
line-height: 33px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.tabs {
|
|
64
|
+
:global {
|
|
65
|
+
.ant-tabs-nav {
|
|
66
|
+
margin: 0 0 30px 0;
|
|
67
|
+
|
|
68
|
+
.ant-tabs-nav-wrap {
|
|
69
|
+
justify-content: left;
|
|
70
|
+
border-bottom: 1px solid #eeeeee;
|
|
71
|
+
|
|
72
|
+
.ant-tabs-nav-list {
|
|
73
|
+
.ant-tabs-tab {
|
|
74
|
+
padding: 0 0 15px 0;
|
|
75
|
+
|
|
76
|
+
.ant-tabs-tab-btn {
|
|
77
|
+
color: #666666;
|
|
78
|
+
font-weight: 400;
|
|
79
|
+
font-size: 18px;
|
|
80
|
+
line-height: 25px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&.ant-tabs-tab-active {
|
|
84
|
+
.ant-tabs-tab-btn {
|
|
85
|
+
color: #333333;
|
|
86
|
+
font-weight: 600;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.form {
|
|
97
|
+
:global {
|
|
98
|
+
width: 100%;
|
|
99
|
+
|
|
100
|
+
.ant-form-item {
|
|
101
|
+
margin-bottom: 20px;
|
|
102
|
+
|
|
103
|
+
.ant-form-item-row {
|
|
104
|
+
.ant-form-item-explain-error {
|
|
105
|
+
font-size: 12px;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.ant-form-item-control-input {
|
|
109
|
+
.ant-input-affix-wrapper {
|
|
110
|
+
width: 100%;
|
|
111
|
+
height: 50px;
|
|
112
|
+
background: #fcfcfc;
|
|
113
|
+
border: 1px solid #ececec;
|
|
114
|
+
border-radius: 4px;
|
|
115
|
+
|
|
116
|
+
.ant-input-prefix {
|
|
117
|
+
margin-right: 15px;
|
|
118
|
+
color: #666;
|
|
119
|
+
font-size: 20px;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
input {
|
|
123
|
+
background: #fcfcfc;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.ant-btn-primary {
|
|
131
|
+
width: 100%;
|
|
132
|
+
height: 50px;
|
|
133
|
+
margin-top: 37px;
|
|
134
|
+
margin-bottom: 46px;
|
|
135
|
+
padding: 0;
|
|
136
|
+
color: #ffffff;
|
|
137
|
+
font-weight: 600;
|
|
138
|
+
font-size: 18px;
|
|
139
|
+
line-height: 50px;
|
|
140
|
+
background: linear-gradient(131deg, #1d93ff 0%, #0a6bfd 100%);
|
|
141
|
+
border-radius: 4px;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.actions {
|
|
147
|
+
color: #666666;
|
|
148
|
+
font-weight: 400;
|
|
149
|
+
font-size: 14px;
|
|
150
|
+
line-height: 25px;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.qrcodeBox {
|
|
154
|
+
padding: 20px 24px;
|
|
155
|
+
border: 1px solid #ececec;
|
|
156
|
+
border-radius: 12px;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.qrcode {
|
|
160
|
+
:global {
|
|
161
|
+
border: none !important;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.captchaBtn {
|
|
166
|
+
padding: 0;
|
|
167
|
+
color: #0a6bfd;
|
|
168
|
+
}
|
|
169
|
+
|
|
@@ -51,12 +51,12 @@ var __async = (__this, __arguments, generator) => {
|
|
|
51
51
|
};
|
|
52
52
|
|
|
53
53
|
// src/business/YkPorjectSelect/index.tsx
|
|
54
|
-
import TextWithTooltip from "../../components/TextWithToolTip";
|
|
55
54
|
import { SearchOutlined } from "@ant-design/icons";
|
|
56
55
|
import { ConfigProvider, Empty, Flex, Input, Popover, Rate, Tabs, Tooltip } from "antd";
|
|
57
56
|
import classNames from "classnames";
|
|
58
57
|
import React, { useEffect, useMemo, useRef, useState } from "react";
|
|
59
|
-
import { Scrollbars } from "react-custom-scrollbars";
|
|
58
|
+
import { Scrollbars } from "react-custom-scrollbars-2";
|
|
59
|
+
import TextWithTooltip from "../../components/TextWithToolTip";
|
|
60
60
|
import iconProductDefault from "./icon-product.png";
|
|
61
61
|
import styles from "./index.module.less";
|
|
62
62
|
var YkPorjectSelect = ({ value, options, onChange, followedCallback, slot, customShow }) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/business/YkPorjectSelect/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import TextWithTooltip from '@/components/TextWithToolTip';\nimport { SearchOutlined } from '@ant-design/icons';\nimport type { InputRef } from 'antd';\nimport { ConfigProvider, Empty, Flex, Input, Popover, Rate, Tabs, Tooltip } from 'antd';\nimport classNames from 'classnames';\nimport React, { FC, useEffect, useMemo, useRef, useState } from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars';\nimport iconProductDefault from './icon-product.png';\nimport styles from './index.module.less';\n\n/** 项目选项项 */\ntype OptionItem = {\n /** 项目名称 */\n label: string;\n /** 项目 ID */\n value: string | number;\n /** 项目图标 URL */\n icon: string;\n /** 是否已关注 */\n followed?: boolean;\n /** 关注排序索引 */\n follow_index?: number;\n /** 是否最近访问 */\n recent_visit?: boolean;\n /** 是否已关服 */\n closed?: boolean;\n};\n\n/** 项目选择器 Props */\ntype PageTypes = {\n /** 当前选中的项目 ID */\n value: string | number;\n /** 项目选项列表 */\n options: OptionItem[];\n /** 选中项目变化时的回调 */\n onChange: (value: string | number) => void;\n /** 关注/取消关注时的回调 */\n followedCallback?: (item: OptionItem, bool: boolean) => void;\n /** 弹层内自定义插槽,渲染在搜索框下方、关注项目上方 */\n slot?: React.ReactNode;\n /** 自定义触发元素,替代默认的「图标+名称+下拉箭头」展示 */\n customShow?: React.ReactNode;\n};\n\n/**\n * 项目选择器\n *\n * 支持搜索、关注/取消关注(最多6个)、在营/关服切换。\n * 弹层展开时自动聚焦搜索框,使用 preventScroll 避免页面滚动。\n *\n * @example\n * ```tsx\n * <YkPorjectSelect\n * value={projectId}\n * options={options}\n * onChange={setProjectId}\n * followedCallback={(item, followed) => api.follow(item.value, followed)}\n * />\n * ```\n */\nconst YkPorjectSelect: FC<PageTypes> = ({ value, options, onChange, followedCallback, slot, customShow }) => {\n const [open, setOpen] = useState(false);\n const [status, setStatus] = useState<string>('1');\n const [searchKey, setSearchKey] = useState('');\n const [pageHeight, setPageHeight] = useState<number>(1000);\n const [localOptions, setLocalOptions] = useState<OptionItem[]>(options);\n const searchInputRef = useRef<InputRef>(null);\n\n useEffect(() => {\n setLocalOptions(options);\n }, [options]);\n\n /** 弹层展开时聚焦搜索框,使用 preventScroll 避免浏览器滚动到顶部;延迟等待 Popover 内容挂载 */\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout> | undefined;\n if (open) {\n timer = setTimeout(() => {\n searchInputRef.current?.input?.focus({ preventScroll: true });\n }, 0);\n }\n return () => {\n if (timer !== undefined) {\n clearTimeout(timer);\n }\n };\n }, [open]);\n\n /** 在营/关服数量统计 */\n const stateCount = useMemo(() => {\n return localOptions.reduce(\n (acc, item) => {\n const statusClosed = item.closed ? 2 : 1;\n if (!acc[statusClosed]) {\n acc[statusClosed] = 0;\n }\n acc[statusClosed] += 1;\n return acc;\n },\n {} as { [key: string]: number },\n );\n }, [localOptions]);\n\n /** 在营/关服 Tab 配置 */\n const tabs = [\n { key: '1', label: `在营(${stateCount['1'] || 0})` },\n { key: '2', label: `关服(${stateCount['2'] || 0})` },\n ];\n\n /** 当前选中的项目(用于展示图标与名称) */\n const activeItem = useMemo(() => {\n return localOptions.find((item) => item.value === value);\n }, [localOptions, value]);\n\n /** 已关注的项目列表(顶部展示、用于计算关注数限制) */\n const followedOptions = useMemo(() => {\n return localOptions.filter((item) => item.followed);\n }, [localOptions]);\n\n // 切换在营/关服\n const handleTabChange = (tabKey: string) => {\n setStatus(tabKey);\n };\n\n // 点击关注或取消关注\n const handleStarChange = async (item: OptionItem, val: number) => {\n void followedCallback?.(item, val === 1);\n setLocalOptions((prev) =>\n prev.map((p) => {\n if (p.value === item.value) {\n return { ...p, followed: val === 1 };\n }\n return p;\n }),\n );\n };\n\n const handleResize = () => {\n const height = window.innerHeight;\n setPageHeight(height);\n };\n\n useEffect(() => {\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n /** 渲染单个项目行(名称、ID、关注星标) */\n const renderItem = (item: OptionItem) => {\n const isDisabled = !item.followed && followedOptions.length >= 6;\n return (\n <Flex justify='space-between' align='center'>\n <span className={styles.contentItemSpan} onClick={() => onChange(item.value)}>\n <img className={styles.contentItemSpanIcon} src={item?.icon ? item.icon : iconProductDefault} />\n <div className={styles.contentItemSpanDev}>\n <div className={styles.contentItemSpanProName}>\n <TextWithTooltip\n text={item.label}\n width='100%'\n maxWidth={175}\n arrow={true}\n color='#fff'\n styles={{ body: { color: '#333' } }}\n ></TextWithTooltip>\n {item.recent_visit ? <span className={styles.recentVisit}>最近访问</span> : null}\n </div>\n <div className={styles.contentItemSpanProId}>ID: {item.value}</div>\n </div>\n </span>\n <Tooltip\n title={isDisabled ? '最多关注6个项目' : item.followed ? '取消关注' : '关注'}\n color='#fff'\n placement='right'\n styles={{ body: { color: '#333' } }}\n >\n <label\n className={classNames(styles.contentItemStar, isDisabled && styles.contentItemStarDisabled)}\n onClick={() => {\n if (isDisabled) {\n return;\n }\n void handleStarChange(item, item.followed ? 0 : 1);\n }}\n >\n <ConfigProvider\n theme={{\n components: {\n Rate: {\n starBg: '#dcdbdb',\n },\n },\n }}\n >\n <Rate\n style={{\n fontSize: 14,\n color: isDisabled ? 'rgba(0, 0, 0, 0.06)' : '#FFB401',\n opacity: item.followed || followedOptions.length === 0 ? 1 : 0,\n }}\n value={item.followed ? 1 : 0}\n count={1}\n />\n </ConfigProvider>\n </label>\n </Tooltip>\n </Flex>\n );\n };\n\n /** 弹层内容:搜索、slot、关注区、Tab、项目列表 */\n const content = (\n <div className={styles.ykPorjectSelectContent}>\n <div className={styles.ykPorjectSelectHeader}>\n <Input\n ref={searchInputRef}\n className={styles.ykPorjectSelectSearchInput}\n prefix={<SearchOutlined style={{ color: '#999', marginRight: '10px' }} />}\n value={searchKey}\n onChange={(e) => setSearchKey(e.target.value)}\n allowClear\n placeholder='请输入项目ID/名称'\n />\n </div>\n {slot && <div className={styles.ykPorjectSelectSoltContainer}>{slot}</div>}\n <div className={styles.ykPorjectSelectFollowed}>\n <div className={styles.contentHeader}>关注项目</div>\n <div className={styles.ykPorjectSelectFollowedList}>\n {followedOptions.map((item) => (\n <Tooltip\n key={item.value}\n title={\n <>\n <div style={{ fontSize: 14, color: '#555555' }}>{item.label}</div>\n <div style={{ fontSize: 12, color: '#999' }}>ID: {item.value}</div>\n </>\n }\n color='#fff'\n placement='bottomLeft'\n styles={{ body: { color: '#333' } }}\n >\n <div key={item.value} className={styles.ykPorjectSelectFollowedItem}>\n <img className={styles.ykPorjectSelectFollowedItemIcon} src={item.icon} alt={item.label} />\n <div className={styles.closeIcon} onClick={() => void handleStarChange(item, 0)} />\n </div>\n </Tooltip>\n ))}\n </div>\n </div>\n <Tabs\n className={styles.ykPorjectSelectProductPanelTabs}\n centered\n onChange={handleTabChange}\n activeKey={status}\n items={tabs}\n ></Tabs>\n {localOptions.length === 0 ? (\n <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />\n ) : (\n <div className={styles.ykPorjectSelectListSection}>\n <div className={styles.contentHeader}>全部项目</div>\n <Scrollbars\n className={styles.ykPorjectSelectScrollBarsBox}\n autoHeight\n autoHide\n autoHeightMax={Math.min(450, pageHeight - 310)}\n renderThumbVertical={({ style, ...props }) => (\n <div {...props} style={{ ...style, background: '#EEEEEE', borderRadius: 3, width: 6 }} />\n )}\n >\n {localOptions\n .sort((a, b) => (b.recent_visit ? 1 : 0) - (a.recent_visit ? 1 : 0))\n .map((item) => (\n <div\n key={item.value}\n className={classNames(styles.contentItem, item.value === value ? styles.contentItemActive : '')}\n >\n {renderItem(item)}\n </div>\n ))}\n </Scrollbars>\n </div>\n )}\n </div>\n );\n\n return (\n <Popover\n className={styles.ykPorjectSelect}\n styles={{ body: { borderRadius: 4, padding: 0 } }}\n content={content}\n placement='bottom'\n trigger='click'\n open={open}\n onOpenChange={setOpen}\n getPopupContainer={(triggerNode: HTMLElement) => triggerNode.parentNode as HTMLElement}\n autoAdjustOverflow={false}\n >\n {customShow ? (\n customShow\n ) : (\n <div className={styles.ykPorjectSelectShow}>\n <img className={styles.ykPorjectSelectShowIcon} src={activeItem?.icon} alt={activeItem?.label} />\n <span className={styles.ykPorjectSelectShowText}>{activeItem?.label}</span>\n <i className='iconfont icon-xiala' />\n </div>\n )}\n </Popover>\n );\n};\n\nexport default YkPorjectSelect;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
4
|
+
"sourcesContent": ["import { SearchOutlined } from '@ant-design/icons';\nimport type { InputRef } from 'antd';\nimport { ConfigProvider, Empty, Flex, Input, Popover, Rate, Tabs, Tooltip } from 'antd';\nimport classNames from 'classnames';\nimport React, { type FC, useEffect, useMemo, useRef, useState } from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars-2';\nimport TextWithTooltip from '@/components/TextWithToolTip';\nimport iconProductDefault from './icon-product.png';\nimport styles from './index.module.less';\n\n/** 项目选项项 */\ntype OptionItem = {\n /** 项目名称 */\n label: string;\n /** 项目 ID */\n value: string | number;\n /** 项目图标 URL */\n icon: string;\n /** 是否已关注 */\n followed?: boolean;\n /** 关注排序索引 */\n follow_index?: number;\n /** 是否最近访问 */\n recent_visit?: boolean;\n /** 是否已关服 */\n closed?: boolean;\n};\n\n/** 项目选择器 Props */\ntype PageTypes = {\n /** 当前选中的项目 ID */\n value: string | number;\n /** 项目选项列表 */\n options: OptionItem[];\n /** 选中项目变化时的回调 */\n onChange: (value: string | number) => void;\n /** 关注/取消关注时的回调 */\n followedCallback?: (item: OptionItem, bool: boolean) => void;\n /** 弹层内自定义插槽,渲染在搜索框下方、关注项目上方 */\n slot?: React.ReactNode;\n /** 自定义触发元素,替代默认的「图标+名称+下拉箭头」展示 */\n customShow?: React.ReactNode;\n};\n\n/**\n * 项目选择器\n *\n * 支持搜索、关注/取消关注(最多6个)、在营/关服切换。\n * 弹层展开时自动聚焦搜索框,使用 preventScroll 避免页面滚动。\n *\n * @example\n * ```tsx\n * <YkPorjectSelect\n * value={projectId}\n * options={options}\n * onChange={setProjectId}\n * followedCallback={(item, followed) => api.follow(item.value, followed)}\n * />\n * ```\n */\nconst YkPorjectSelect: FC<PageTypes> = ({ value, options, onChange, followedCallback, slot, customShow }) => {\n const [open, setOpen] = useState(false);\n const [status, setStatus] = useState<string>('1');\n const [searchKey, setSearchKey] = useState('');\n const [pageHeight, setPageHeight] = useState<number>(1000);\n const [localOptions, setLocalOptions] = useState<OptionItem[]>(options);\n const searchInputRef = useRef<InputRef>(null);\n\n useEffect(() => {\n setLocalOptions(options);\n }, [options]);\n\n /** 弹层展开时聚焦搜索框,使用 preventScroll 避免浏览器滚动到顶部;延迟等待 Popover 内容挂载 */\n useEffect(() => {\n let timer: ReturnType<typeof setTimeout> | undefined;\n if (open) {\n timer = setTimeout(() => {\n searchInputRef.current?.input?.focus({ preventScroll: true });\n }, 0);\n }\n return () => {\n if (timer !== undefined) {\n clearTimeout(timer);\n }\n };\n }, [open]);\n\n /** 在营/关服数量统计 */\n const stateCount = useMemo(() => {\n return localOptions.reduce(\n (acc, item) => {\n const statusClosed = item.closed ? 2 : 1;\n if (!acc[statusClosed]) {\n acc[statusClosed] = 0;\n }\n acc[statusClosed] += 1;\n return acc;\n },\n {} as { [key: string]: number },\n );\n }, [localOptions]);\n\n /** 在营/关服 Tab 配置 */\n const tabs = [\n { key: '1', label: `在营(${stateCount['1'] || 0})` },\n { key: '2', label: `关服(${stateCount['2'] || 0})` },\n ];\n\n /** 当前选中的项目(用于展示图标与名称) */\n const activeItem = useMemo(() => {\n return localOptions.find((item) => item.value === value);\n }, [localOptions, value]);\n\n /** 已关注的项目列表(顶部展示、用于计算关注数限制) */\n const followedOptions = useMemo(() => {\n return localOptions.filter((item) => item.followed);\n }, [localOptions]);\n\n // 切换在营/关服\n const handleTabChange = (tabKey: string) => {\n setStatus(tabKey);\n };\n\n // 点击关注或取消关注\n const handleStarChange = async (item: OptionItem, val: number) => {\n void followedCallback?.(item, val === 1);\n setLocalOptions((prev) =>\n prev.map((p) => {\n if (p.value === item.value) {\n return { ...p, followed: val === 1 };\n }\n return p;\n }),\n );\n };\n\n const handleResize = () => {\n const height = window.innerHeight;\n setPageHeight(height);\n };\n\n useEffect(() => {\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n /** 渲染单个项目行(名称、ID、关注星标) */\n const renderItem = (item: OptionItem) => {\n const isDisabled = !item.followed && followedOptions.length >= 6;\n return (\n <Flex justify='space-between' align='center'>\n <span className={styles.contentItemSpan} onClick={() => onChange(item.value)}>\n <img className={styles.contentItemSpanIcon} src={item?.icon ? item.icon : iconProductDefault} />\n <div className={styles.contentItemSpanDev}>\n <div className={styles.contentItemSpanProName}>\n <TextWithTooltip\n text={item.label}\n width='100%'\n maxWidth={175}\n arrow={true}\n color='#fff'\n styles={{ body: { color: '#333' } }}\n ></TextWithTooltip>\n {item.recent_visit ? <span className={styles.recentVisit}>最近访问</span> : null}\n </div>\n <div className={styles.contentItemSpanProId}>ID: {item.value}</div>\n </div>\n </span>\n <Tooltip\n title={isDisabled ? '最多关注6个项目' : item.followed ? '取消关注' : '关注'}\n color='#fff'\n placement='right'\n styles={{ body: { color: '#333' } }}\n >\n <label\n className={classNames(styles.contentItemStar, isDisabled && styles.contentItemStarDisabled)}\n onClick={() => {\n if (isDisabled) {\n return;\n }\n void handleStarChange(item, item.followed ? 0 : 1);\n }}\n >\n <ConfigProvider\n theme={{\n components: {\n Rate: {\n starBg: '#dcdbdb',\n },\n },\n }}\n >\n <Rate\n style={{\n fontSize: 14,\n color: isDisabled ? 'rgba(0, 0, 0, 0.06)' : '#FFB401',\n opacity: item.followed || followedOptions.length === 0 ? 1 : 0,\n }}\n value={item.followed ? 1 : 0}\n count={1}\n />\n </ConfigProvider>\n </label>\n </Tooltip>\n </Flex>\n );\n };\n\n /** 弹层内容:搜索、slot、关注区、Tab、项目列表 */\n const content = (\n <div className={styles.ykPorjectSelectContent}>\n <div className={styles.ykPorjectSelectHeader}>\n <Input\n ref={searchInputRef}\n className={styles.ykPorjectSelectSearchInput}\n prefix={<SearchOutlined style={{ color: '#999', marginRight: '10px' }} />}\n value={searchKey}\n onChange={(e) => setSearchKey(e.target.value)}\n allowClear\n placeholder='请输入项目ID/名称'\n />\n </div>\n {slot && <div className={styles.ykPorjectSelectSoltContainer}>{slot}</div>}\n <div className={styles.ykPorjectSelectFollowed}>\n <div className={styles.contentHeader}>关注项目</div>\n <div className={styles.ykPorjectSelectFollowedList}>\n {followedOptions.map((item) => (\n <Tooltip\n key={item.value}\n title={\n <>\n <div style={{ fontSize: 14, color: '#555555' }}>{item.label}</div>\n <div style={{ fontSize: 12, color: '#999' }}>ID: {item.value}</div>\n </>\n }\n color='#fff'\n placement='bottomLeft'\n styles={{ body: { color: '#333' } }}\n >\n <div key={item.value} className={styles.ykPorjectSelectFollowedItem}>\n <img className={styles.ykPorjectSelectFollowedItemIcon} src={item.icon} alt={item.label} />\n <div className={styles.closeIcon} onClick={() => void handleStarChange(item, 0)} />\n </div>\n </Tooltip>\n ))}\n </div>\n </div>\n <Tabs\n className={styles.ykPorjectSelectProductPanelTabs}\n centered\n onChange={handleTabChange}\n activeKey={status}\n items={tabs}\n ></Tabs>\n {localOptions.length === 0 ? (\n <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />\n ) : (\n <div className={styles.ykPorjectSelectListSection}>\n <div className={styles.contentHeader}>全部项目</div>\n <Scrollbars\n className={styles.ykPorjectSelectScrollBarsBox}\n autoHeight\n autoHide\n autoHeightMax={Math.min(450, pageHeight - 310)}\n renderThumbVertical={({ style, ...props }) => (\n <div {...props} style={{ ...style, background: '#EEEEEE', borderRadius: 3, width: 6 }} />\n )}\n >\n {localOptions\n .sort((a, b) => (b.recent_visit ? 1 : 0) - (a.recent_visit ? 1 : 0))\n .map((item) => (\n <div\n key={item.value}\n className={classNames(styles.contentItem, item.value === value ? styles.contentItemActive : '')}\n >\n {renderItem(item)}\n </div>\n ))}\n </Scrollbars>\n </div>\n )}\n </div>\n );\n\n return (\n <Popover\n className={styles.ykPorjectSelect}\n styles={{ body: { borderRadius: 4, padding: 0 } }}\n content={content}\n placement='bottom'\n trigger='click'\n open={open}\n onOpenChange={setOpen}\n getPopupContainer={(triggerNode: HTMLElement) => triggerNode.parentNode as HTMLElement}\n autoAdjustOverflow={false}\n >\n {customShow ? (\n customShow\n ) : (\n <div className={styles.ykPorjectSelectShow}>\n <img className={styles.ykPorjectSelectShowIcon} src={activeItem?.icon} alt={activeItem?.label} />\n <span className={styles.ykPorjectSelectShowText}>{activeItem?.label}</span>\n <i className='iconfont icon-xiala' />\n </div>\n )}\n </Popover>\n );\n};\n\nexport default YkPorjectSelect;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|