@pisell/materials 3.3.86 → 3.3.87
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/build/lowcode/assets-daily.json +11 -11
- package/build/lowcode/assets-dev.json +2 -2
- package/build/lowcode/assets-prod.json +11 -11
- package/build/lowcode/meta.js +1 -1
- package/build/lowcode/render/default/view.js +1 -1
- package/build/lowcode/view.js +1 -1
- package/es/components/PisellProcedure/PisellProcedure.stories.d.ts +163 -0
- package/es/components/PisellProcedure/index.d.ts +5 -0
- package/es/components/PisellSteps/PisellSteps.d.ts +14 -0
- package/es/components/dataSourceComponents/dataSourceForm/utils.d.ts +1 -1
- package/es/components/dataSourceComponents/dataSourceTable/hooks/useDataSourceKey.d.ts +1 -0
- package/es/components/dataSourceComponents/dataSourceTable/hooks/useDrawerState.d.ts +1 -0
- package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableQuery.d.ts +1 -0
- package/es/components/dataSourceComponents/fields/Input.Subdomain/index.d.ts +1 -1
- package/es/components/dataSourceComponents/fields/Select/index.d.ts +1 -1
- package/es/components/dataSourceComponents/fields/Translation/BaseTranslation.d.ts +5 -0
- package/es/components/dataSourceComponents/fields/Translation/type.d.ts +21 -0
- package/es/components/dataSourceComponents/fields/index.d.ts +7 -6
- package/es/components/pisellDataSourceContainer/hooks/useDataSourceKey.d.ts +1 -0
- package/es/components/pisellLookup/components/LookupTrigger.d.ts +3 -0
- package/es/components/pisellWalletPassCard/index.js +1 -1
- package/es/components/table/Table/fields/select/index.d.ts +1 -0
- package/es/components/table/Table/fields/treeSelect/index.d.ts +1 -0
- package/es/components/table/Table/utils.d.ts +1 -1
- package/lib/components/PisellProcedure/PisellProcedure.stories.d.ts +163 -0
- package/lib/components/PisellProcedure/index.d.ts +5 -0
- package/lib/components/PisellSteps/PisellSteps.d.ts +14 -0
- package/lib/components/dataSourceComponents/dataSourceForm/utils.d.ts +1 -1
- package/lib/components/dataSourceComponents/dataSourceTable/hooks/useDataSourceKey.d.ts +1 -0
- package/lib/components/dataSourceComponents/dataSourceTable/hooks/useDrawerState.d.ts +1 -0
- package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableQuery.d.ts +1 -0
- package/lib/components/dataSourceComponents/fields/Input.Subdomain/index.d.ts +1 -1
- package/lib/components/dataSourceComponents/fields/Select/index.d.ts +1 -1
- package/lib/components/dataSourceComponents/fields/Translation/BaseTranslation.d.ts +5 -0
- package/lib/components/dataSourceComponents/fields/Translation/type.d.ts +21 -0
- package/lib/components/dataSourceComponents/fields/index.d.ts +7 -6
- package/lib/components/pisellDataSourceContainer/hooks/useDataSourceKey.d.ts +1 -0
- package/lib/components/pisellLookup/components/LookupTrigger.d.ts +3 -0
- package/lib/components/pisellWalletPassCard/index.js +9 -2
- package/lib/components/table/Table/fields/select/index.d.ts +1 -0
- package/lib/components/table/Table/fields/treeSelect/index.d.ts +1 -0
- package/lib/components/table/Table/utils.d.ts +1 -1
- package/lowcode/auto-resize-text/meta.ts +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import PisellProcedure from './PisellProcedure';
|
|
3
|
+
/**
|
|
4
|
+
* PisellProcedure 流程容器组件
|
|
5
|
+
*
|
|
6
|
+
* 用于管理多步骤流程的复合容器组件,基于 PisellLayout 实现三段式布局
|
|
7
|
+
* 包含头部区域(步骤条)、主体区域(内容区+信息区)、底部区域(操作按钮)
|
|
8
|
+
*/
|
|
9
|
+
declare const meta: Meta<typeof PisellProcedure>;
|
|
10
|
+
export default meta;
|
|
11
|
+
declare type Story = StoryObj<typeof PisellProcedure>;
|
|
12
|
+
/**
|
|
13
|
+
* 基础用法
|
|
14
|
+
* @description 默认流程容器,包含头部、主体、底部三个区域
|
|
15
|
+
*/
|
|
16
|
+
export declare const Default: Story;
|
|
17
|
+
/**
|
|
18
|
+
* 页面模式
|
|
19
|
+
* @description 默认模式,支持响应式和移动端适配
|
|
20
|
+
*/
|
|
21
|
+
export declare const PageMode: Story;
|
|
22
|
+
/**
|
|
23
|
+
* 弹窗模式
|
|
24
|
+
* @description 用于弹窗场景,不应用移动端适配
|
|
25
|
+
*/
|
|
26
|
+
export declare const ModalMode: Story;
|
|
27
|
+
/**
|
|
28
|
+
* 步骤控制
|
|
29
|
+
* @description 使用 onStepsChange 监听步骤变化
|
|
30
|
+
*/
|
|
31
|
+
export declare const StepControl: Story;
|
|
32
|
+
/**
|
|
33
|
+
* 步骤拦截
|
|
34
|
+
* @description 通过 onNext/onPrev 返回 false 阻止步骤切换
|
|
35
|
+
*/
|
|
36
|
+
export declare const StepIntercept: Story;
|
|
37
|
+
/**
|
|
38
|
+
* 无侧边栏
|
|
39
|
+
*/
|
|
40
|
+
export declare const WithoutSidebar: Story;
|
|
41
|
+
/**
|
|
42
|
+
* 无头部
|
|
43
|
+
*/
|
|
44
|
+
export declare const WithoutHeader: Story;
|
|
45
|
+
/**
|
|
46
|
+
* 无底部
|
|
47
|
+
*/
|
|
48
|
+
export declare const WithoutFooter: Story;
|
|
49
|
+
/**
|
|
50
|
+
* 最小配置
|
|
51
|
+
* @description 仅显示主体内容
|
|
52
|
+
*/
|
|
53
|
+
export declare const MinimalConfig: Story;
|
|
54
|
+
/**
|
|
55
|
+
* 头部插槽顺序 - 默认
|
|
56
|
+
* @description left 在左,right 在右
|
|
57
|
+
*/
|
|
58
|
+
export declare const HeaderSlotDefault: Story;
|
|
59
|
+
/**
|
|
60
|
+
* 头部插槽顺序 - 反转
|
|
61
|
+
* @description left 在右,right 在左
|
|
62
|
+
*/
|
|
63
|
+
export declare const HeaderSlotReverse: Story;
|
|
64
|
+
/**
|
|
65
|
+
* 隐藏步骤条
|
|
66
|
+
* @description 仅显示头部插槽,不显示步骤条
|
|
67
|
+
*/
|
|
68
|
+
export declare const HideSteps: Story;
|
|
69
|
+
/**
|
|
70
|
+
* 第一步显示返回按钮
|
|
71
|
+
* @description 通过 showBackOnFirstStep 控制
|
|
72
|
+
*/
|
|
73
|
+
export declare const ShowBackOnFirstStep: Story;
|
|
74
|
+
/**
|
|
75
|
+
* 返回确认弹窗
|
|
76
|
+
* @description 点击返回时弹出确认弹窗
|
|
77
|
+
*/
|
|
78
|
+
export declare const BackConfirmModal: Story;
|
|
79
|
+
/**
|
|
80
|
+
* 关闭确认弹窗
|
|
81
|
+
* @description 点击关闭时弹出确认弹窗
|
|
82
|
+
*/
|
|
83
|
+
export declare const CloseConfirmModal: Story;
|
|
84
|
+
/**
|
|
85
|
+
* 主体布局 - 比例布局
|
|
86
|
+
* @description 使用比例分配内容区和侧边栏宽度
|
|
87
|
+
*/
|
|
88
|
+
export declare const BodyRatioLayout: Story;
|
|
89
|
+
/**
|
|
90
|
+
* 主体布局 - 固定宽度
|
|
91
|
+
* @description 侧边栏使用固定宽度
|
|
92
|
+
*/
|
|
93
|
+
export declare const BodyFixedLayout: Story;
|
|
94
|
+
/**
|
|
95
|
+
* 主体布局 - 垂直布局
|
|
96
|
+
* @description 内容区和侧边栏上下排列
|
|
97
|
+
*/
|
|
98
|
+
export declare const BodyVerticalLayout: Story;
|
|
99
|
+
/**
|
|
100
|
+
* 主体布局 - 内容顺序反转
|
|
101
|
+
* @description 侧边栏在左/上,内容区在右/下
|
|
102
|
+
*/
|
|
103
|
+
export declare const BodyContentOrderReverse: Story;
|
|
104
|
+
/**
|
|
105
|
+
* 底部位置 - 悬浮在侧边栏
|
|
106
|
+
* @description 默认位置,底部悬浮在侧边栏区域
|
|
107
|
+
*/
|
|
108
|
+
export declare const FooterFloatSidebar: Story;
|
|
109
|
+
/**
|
|
110
|
+
* 底部位置 - 固定在整体底部
|
|
111
|
+
*/
|
|
112
|
+
export declare const FooterFixedBottom: Story;
|
|
113
|
+
/**
|
|
114
|
+
* 底部位置 - 悬浮在整体区域
|
|
115
|
+
* @description 移动端默认使用此模式
|
|
116
|
+
*/
|
|
117
|
+
export declare const FooterFloatAll: Story;
|
|
118
|
+
/**
|
|
119
|
+
* 底部位置 - 悬浮在内容区
|
|
120
|
+
*/
|
|
121
|
+
export declare const FooterFloatContent: Story;
|
|
122
|
+
/**
|
|
123
|
+
* 底部位置 - 内嵌在内容区底部
|
|
124
|
+
*/
|
|
125
|
+
export declare const FooterFixedContentBottom: Story;
|
|
126
|
+
/**
|
|
127
|
+
* 底部位置 - 内嵌在侧边栏底部
|
|
128
|
+
*/
|
|
129
|
+
export declare const FooterFixedSidebarBottom: Story;
|
|
130
|
+
/**
|
|
131
|
+
* 移动端总结按钮
|
|
132
|
+
* @description 移动端显示总结按钮,点击可查看侧边栏内容
|
|
133
|
+
*/
|
|
134
|
+
export declare const MobileSummaryButton: Story;
|
|
135
|
+
/**
|
|
136
|
+
* 溢出收纳功能
|
|
137
|
+
* @description 当宽度不足时,按钮会被收纳到 More 菜单中
|
|
138
|
+
*/
|
|
139
|
+
export declare const OverflowActions: Story;
|
|
140
|
+
/**
|
|
141
|
+
* 禁用溢出收纳
|
|
142
|
+
* @description 不启用溢出收纳,按钮会换行显示
|
|
143
|
+
*/
|
|
144
|
+
export declare const DisableOverflow: Story;
|
|
145
|
+
/**
|
|
146
|
+
* 完整示例 - 购物流程
|
|
147
|
+
* @description 模拟真实的购物流程
|
|
148
|
+
*/
|
|
149
|
+
export declare const ShoppingFlow: Story;
|
|
150
|
+
/**
|
|
151
|
+
* 完整示例 - 注册流程
|
|
152
|
+
* @description 模拟用户注册流程
|
|
153
|
+
*/
|
|
154
|
+
export declare const RegistrationFlow: Story;
|
|
155
|
+
/**
|
|
156
|
+
* 完整示例 - 表单向导
|
|
157
|
+
* @description 多步表单向导
|
|
158
|
+
*/
|
|
159
|
+
export declare const FormWizard: Story;
|
|
160
|
+
/**
|
|
161
|
+
* 交互测试 - 组件渲染
|
|
162
|
+
*/
|
|
163
|
+
export declare const InteractionTest: Story;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* PisellProcedure 组件导出
|
|
3
|
+
*/
|
|
4
|
+
export { default } from './PisellProcedure';
|
|
5
|
+
export type { PisellProcedureProps, PisellProcedureRef, ProcedureHeaderProps, ProcedureBodyProps, ProcedureFooterProps, FooterPositionMode, BackConfirmModalConfig, BodyLayoutMode, BodyLayoutRatio, BodyDirection, StepItem, StepChangeResult, } from './types';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './PisellSteps.less';
|
|
3
|
+
import type { PisellStepsProps } from './types';
|
|
4
|
+
/**
|
|
5
|
+
* PisellSteps 步骤条组件
|
|
6
|
+
*
|
|
7
|
+
* 基于 Ant Design Steps 组件进行二次封装和增强
|
|
8
|
+
* 支持多种展示样式、布局方式和丰富的交互功能
|
|
9
|
+
*
|
|
10
|
+
* @author Pisell Team
|
|
11
|
+
* @version 1.0.0
|
|
12
|
+
*/
|
|
13
|
+
declare const PisellSteps: React.FC<PisellStepsProps>;
|
|
14
|
+
export default PisellSteps;
|
|
@@ -44,7 +44,7 @@ export declare const withDataSource: <P extends unknown>(WrappedComponent: React
|
|
|
44
44
|
}) => React.JSX.Element;
|
|
45
45
|
export declare const withOptions: <P extends unknown>(WrappedComponent: React.ComponentType<P>) => (props: P & {
|
|
46
46
|
options?: any;
|
|
47
|
-
optionSourceType?: "default" | "
|
|
47
|
+
optionSourceType?: "default" | "api" | "custom" | undefined;
|
|
48
48
|
labelField: string;
|
|
49
49
|
valueField: string;
|
|
50
50
|
extraParams?: Record<string, any> | undefined;
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
declare const Subdomain: React.FC<import("antd").InputProps & {
|
|
3
3
|
onChange: (value: string) => void;
|
|
4
4
|
onBlur?: ((e: React.FocusEvent<HTMLInputElement, Element>) => void) | undefined;
|
|
5
|
-
rootDomain: "
|
|
5
|
+
rootDomain: "saas" | "custom" | "xzero";
|
|
6
6
|
customDomain?: string | undefined;
|
|
7
7
|
value?: string | undefined;
|
|
8
8
|
tenantId: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
declare const SelectWithDataSource: (props: import("antd").SelectProps<any, import("antd/es/select").DefaultOptionType> & import("../../dataSourceForm/utils").WithModeProps & import("../../dataSourceForm/utils").WithFormItemProps & {
|
|
3
3
|
options?: any;
|
|
4
|
-
optionSourceType?: "default" | "
|
|
4
|
+
optionSourceType?: "default" | "api" | "custom" | undefined;
|
|
5
5
|
labelField: string;
|
|
6
6
|
valueField: string;
|
|
7
7
|
extraParams?: Record<string, any> | undefined;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ModeType } from "../../dataSourceForm/type";
|
|
3
|
+
export interface TranslationValue {
|
|
4
|
+
en: string;
|
|
5
|
+
'zh-CN': string;
|
|
6
|
+
'zh-HK': string;
|
|
7
|
+
'ja': string;
|
|
8
|
+
'pt': string;
|
|
9
|
+
original: string;
|
|
10
|
+
}
|
|
11
|
+
export interface TranslationProps {
|
|
12
|
+
renderMode: ModeType;
|
|
13
|
+
value?: TranslationValue;
|
|
14
|
+
onChange?: (value: TranslationValue) => void;
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
placeholder?: string;
|
|
17
|
+
className?: string;
|
|
18
|
+
type?: 'text' | 'textarea';
|
|
19
|
+
maxLength?: number;
|
|
20
|
+
inputStyle?: React.CSSProperties;
|
|
21
|
+
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
declare const formFieldMap: {
|
|
2
3
|
FormItemCheckbox: import("react").FC<{}> & {
|
|
3
4
|
Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
|
|
@@ -19,7 +20,7 @@ declare const formFieldMap: {
|
|
|
19
20
|
Subdomain: import("react").FC<import("antd").InputProps & {
|
|
20
21
|
onChange: (value: string) => void;
|
|
21
22
|
onBlur?: ((e: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
|
|
22
|
-
rootDomain: "
|
|
23
|
+
rootDomain: "saas" | "custom" | "xzero";
|
|
23
24
|
customDomain?: string | undefined;
|
|
24
25
|
value?: string | undefined;
|
|
25
26
|
tenantId: string;
|
|
@@ -34,7 +35,7 @@ declare const formFieldMap: {
|
|
|
34
35
|
};
|
|
35
36
|
FormItemSelect: (props: import("antd").SelectProps<any, import("antd/es/select").DefaultOptionType> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps & {
|
|
36
37
|
options?: any;
|
|
37
|
-
optionSourceType?: "default" | "
|
|
38
|
+
optionSourceType?: "default" | "api" | "custom" | undefined;
|
|
38
39
|
labelField: string;
|
|
39
40
|
valueField: string;
|
|
40
41
|
extraParams?: Record<string, any> | undefined;
|
|
@@ -60,7 +61,7 @@ declare const formFieldMap: {
|
|
|
60
61
|
FormItemTranslation: import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
|
|
61
62
|
FormItemIconSelect: import("react").FC<import("./IconSelect/type").IconSelectProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
|
|
62
63
|
};
|
|
63
|
-
declare const getFieldComponent: (fieldComponent: string) => (import("react").FC<{}> & {
|
|
64
|
+
declare const getFieldComponent: (fieldComponent: string) => import("react").FC<import("./Upload/type").UploadProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | (import("react").FC<{}> & {
|
|
64
65
|
Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
|
|
65
66
|
} & {
|
|
66
67
|
Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
|
|
@@ -77,7 +78,7 @@ declare const getFieldComponent: (fieldComponent: string) => (import("react").FC
|
|
|
77
78
|
Subdomain: import("react").FC<import("antd").InputProps & {
|
|
78
79
|
onChange: (value: string) => void;
|
|
79
80
|
onBlur?: ((e: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
|
|
80
|
-
rootDomain: "
|
|
81
|
+
rootDomain: "saas" | "custom" | "xzero";
|
|
81
82
|
customDomain?: string | undefined;
|
|
82
83
|
value?: string | undefined;
|
|
83
84
|
tenantId: string;
|
|
@@ -90,7 +91,7 @@ declare const getFieldComponent: (fieldComponent: string) => (import("react").FC
|
|
|
90
91
|
Group: import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps>;
|
|
91
92
|
}) | ((props: import("antd").SelectProps<any, import("antd/es/select").DefaultOptionType> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps & {
|
|
92
93
|
options?: any;
|
|
93
|
-
optionSourceType?: "default" | "
|
|
94
|
+
optionSourceType?: "default" | "api" | "custom" | undefined;
|
|
94
95
|
labelField: string;
|
|
95
96
|
valueField: string;
|
|
96
97
|
extraParams?: Record<string, any> | undefined;
|
|
@@ -99,5 +100,5 @@ declare const getFieldComponent: (fieldComponent: string) => (import("react").FC
|
|
|
99
100
|
extraParams?: Record<string, any> | undefined;
|
|
100
101
|
}) => import("react").JSX.Element) | import("react").FC<any> | import("react").FC<import("./TimePicker/type").TimePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Input.Phone/WithMode").PhoneInputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Input.Mobile/WithMode").PhoneInputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & {
|
|
101
102
|
onChange: (value: string) => void;
|
|
102
|
-
} & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<import("./DateRangePicker/type").DateRangePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./
|
|
103
|
+
} & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<import("./DateRangePicker/type").DateRangePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./IconSelect/type").IconSelectProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
|
|
103
104
|
export { getFieldComponent, formFieldMap };
|
|
@@ -546,7 +546,7 @@ var PisellWalletPassCard = function PisellWalletPassCard(props) {
|
|
|
546
546
|
fontSize: 20,
|
|
547
547
|
color: 'var(--Primary-600, #7F56D9)'
|
|
548
548
|
}
|
|
549
|
-
}))),
|
|
549
|
+
}))), disabled && disabledReason && showDisabledReason && /*#__PURE__*/React.createElement("div", {
|
|
550
550
|
className: "pisell-card-warn-message"
|
|
551
551
|
}, /*#__PURE__*/React.createElement(Iconfont, {
|
|
552
552
|
className: "pisell-card-icon",
|
|
@@ -155,7 +155,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
|
|
|
155
155
|
sort?: SortType | undefined;
|
|
156
156
|
mode: "" | "localStorage" | "remote";
|
|
157
157
|
currentViewMode: ModeType;
|
|
158
|
-
}) => ("
|
|
158
|
+
}) => ("view_mode" | "filter_setting" | "group_by" | "order_by" | "column_setting" | "gallery_setting" | "filters")[];
|
|
159
159
|
export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
|
|
160
160
|
export declare const stringify: (obj: Record<string, any>) => string;
|
|
161
161
|
export {};
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import PisellProcedure from './PisellProcedure';
|
|
3
|
+
/**
|
|
4
|
+
* PisellProcedure 流程容器组件
|
|
5
|
+
*
|
|
6
|
+
* 用于管理多步骤流程的复合容器组件,基于 PisellLayout 实现三段式布局
|
|
7
|
+
* 包含头部区域(步骤条)、主体区域(内容区+信息区)、底部区域(操作按钮)
|
|
8
|
+
*/
|
|
9
|
+
declare const meta: Meta<typeof PisellProcedure>;
|
|
10
|
+
export default meta;
|
|
11
|
+
declare type Story = StoryObj<typeof PisellProcedure>;
|
|
12
|
+
/**
|
|
13
|
+
* 基础用法
|
|
14
|
+
* @description 默认流程容器,包含头部、主体、底部三个区域
|
|
15
|
+
*/
|
|
16
|
+
export declare const Default: Story;
|
|
17
|
+
/**
|
|
18
|
+
* 页面模式
|
|
19
|
+
* @description 默认模式,支持响应式和移动端适配
|
|
20
|
+
*/
|
|
21
|
+
export declare const PageMode: Story;
|
|
22
|
+
/**
|
|
23
|
+
* 弹窗模式
|
|
24
|
+
* @description 用于弹窗场景,不应用移动端适配
|
|
25
|
+
*/
|
|
26
|
+
export declare const ModalMode: Story;
|
|
27
|
+
/**
|
|
28
|
+
* 步骤控制
|
|
29
|
+
* @description 使用 onStepsChange 监听步骤变化
|
|
30
|
+
*/
|
|
31
|
+
export declare const StepControl: Story;
|
|
32
|
+
/**
|
|
33
|
+
* 步骤拦截
|
|
34
|
+
* @description 通过 onNext/onPrev 返回 false 阻止步骤切换
|
|
35
|
+
*/
|
|
36
|
+
export declare const StepIntercept: Story;
|
|
37
|
+
/**
|
|
38
|
+
* 无侧边栏
|
|
39
|
+
*/
|
|
40
|
+
export declare const WithoutSidebar: Story;
|
|
41
|
+
/**
|
|
42
|
+
* 无头部
|
|
43
|
+
*/
|
|
44
|
+
export declare const WithoutHeader: Story;
|
|
45
|
+
/**
|
|
46
|
+
* 无底部
|
|
47
|
+
*/
|
|
48
|
+
export declare const WithoutFooter: Story;
|
|
49
|
+
/**
|
|
50
|
+
* 最小配置
|
|
51
|
+
* @description 仅显示主体内容
|
|
52
|
+
*/
|
|
53
|
+
export declare const MinimalConfig: Story;
|
|
54
|
+
/**
|
|
55
|
+
* 头部插槽顺序 - 默认
|
|
56
|
+
* @description left 在左,right 在右
|
|
57
|
+
*/
|
|
58
|
+
export declare const HeaderSlotDefault: Story;
|
|
59
|
+
/**
|
|
60
|
+
* 头部插槽顺序 - 反转
|
|
61
|
+
* @description left 在右,right 在左
|
|
62
|
+
*/
|
|
63
|
+
export declare const HeaderSlotReverse: Story;
|
|
64
|
+
/**
|
|
65
|
+
* 隐藏步骤条
|
|
66
|
+
* @description 仅显示头部插槽,不显示步骤条
|
|
67
|
+
*/
|
|
68
|
+
export declare const HideSteps: Story;
|
|
69
|
+
/**
|
|
70
|
+
* 第一步显示返回按钮
|
|
71
|
+
* @description 通过 showBackOnFirstStep 控制
|
|
72
|
+
*/
|
|
73
|
+
export declare const ShowBackOnFirstStep: Story;
|
|
74
|
+
/**
|
|
75
|
+
* 返回确认弹窗
|
|
76
|
+
* @description 点击返回时弹出确认弹窗
|
|
77
|
+
*/
|
|
78
|
+
export declare const BackConfirmModal: Story;
|
|
79
|
+
/**
|
|
80
|
+
* 关闭确认弹窗
|
|
81
|
+
* @description 点击关闭时弹出确认弹窗
|
|
82
|
+
*/
|
|
83
|
+
export declare const CloseConfirmModal: Story;
|
|
84
|
+
/**
|
|
85
|
+
* 主体布局 - 比例布局
|
|
86
|
+
* @description 使用比例分配内容区和侧边栏宽度
|
|
87
|
+
*/
|
|
88
|
+
export declare const BodyRatioLayout: Story;
|
|
89
|
+
/**
|
|
90
|
+
* 主体布局 - 固定宽度
|
|
91
|
+
* @description 侧边栏使用固定宽度
|
|
92
|
+
*/
|
|
93
|
+
export declare const BodyFixedLayout: Story;
|
|
94
|
+
/**
|
|
95
|
+
* 主体布局 - 垂直布局
|
|
96
|
+
* @description 内容区和侧边栏上下排列
|
|
97
|
+
*/
|
|
98
|
+
export declare const BodyVerticalLayout: Story;
|
|
99
|
+
/**
|
|
100
|
+
* 主体布局 - 内容顺序反转
|
|
101
|
+
* @description 侧边栏在左/上,内容区在右/下
|
|
102
|
+
*/
|
|
103
|
+
export declare const BodyContentOrderReverse: Story;
|
|
104
|
+
/**
|
|
105
|
+
* 底部位置 - 悬浮在侧边栏
|
|
106
|
+
* @description 默认位置,底部悬浮在侧边栏区域
|
|
107
|
+
*/
|
|
108
|
+
export declare const FooterFloatSidebar: Story;
|
|
109
|
+
/**
|
|
110
|
+
* 底部位置 - 固定在整体底部
|
|
111
|
+
*/
|
|
112
|
+
export declare const FooterFixedBottom: Story;
|
|
113
|
+
/**
|
|
114
|
+
* 底部位置 - 悬浮在整体区域
|
|
115
|
+
* @description 移动端默认使用此模式
|
|
116
|
+
*/
|
|
117
|
+
export declare const FooterFloatAll: Story;
|
|
118
|
+
/**
|
|
119
|
+
* 底部位置 - 悬浮在内容区
|
|
120
|
+
*/
|
|
121
|
+
export declare const FooterFloatContent: Story;
|
|
122
|
+
/**
|
|
123
|
+
* 底部位置 - 内嵌在内容区底部
|
|
124
|
+
*/
|
|
125
|
+
export declare const FooterFixedContentBottom: Story;
|
|
126
|
+
/**
|
|
127
|
+
* 底部位置 - 内嵌在侧边栏底部
|
|
128
|
+
*/
|
|
129
|
+
export declare const FooterFixedSidebarBottom: Story;
|
|
130
|
+
/**
|
|
131
|
+
* 移动端总结按钮
|
|
132
|
+
* @description 移动端显示总结按钮,点击可查看侧边栏内容
|
|
133
|
+
*/
|
|
134
|
+
export declare const MobileSummaryButton: Story;
|
|
135
|
+
/**
|
|
136
|
+
* 溢出收纳功能
|
|
137
|
+
* @description 当宽度不足时,按钮会被收纳到 More 菜单中
|
|
138
|
+
*/
|
|
139
|
+
export declare const OverflowActions: Story;
|
|
140
|
+
/**
|
|
141
|
+
* 禁用溢出收纳
|
|
142
|
+
* @description 不启用溢出收纳,按钮会换行显示
|
|
143
|
+
*/
|
|
144
|
+
export declare const DisableOverflow: Story;
|
|
145
|
+
/**
|
|
146
|
+
* 完整示例 - 购物流程
|
|
147
|
+
* @description 模拟真实的购物流程
|
|
148
|
+
*/
|
|
149
|
+
export declare const ShoppingFlow: Story;
|
|
150
|
+
/**
|
|
151
|
+
* 完整示例 - 注册流程
|
|
152
|
+
* @description 模拟用户注册流程
|
|
153
|
+
*/
|
|
154
|
+
export declare const RegistrationFlow: Story;
|
|
155
|
+
/**
|
|
156
|
+
* 完整示例 - 表单向导
|
|
157
|
+
* @description 多步表单向导
|
|
158
|
+
*/
|
|
159
|
+
export declare const FormWizard: Story;
|
|
160
|
+
/**
|
|
161
|
+
* 交互测试 - 组件渲染
|
|
162
|
+
*/
|
|
163
|
+
export declare const InteractionTest: Story;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* PisellProcedure 组件导出
|
|
3
|
+
*/
|
|
4
|
+
export { default } from './PisellProcedure';
|
|
5
|
+
export type { PisellProcedureProps, PisellProcedureRef, ProcedureHeaderProps, ProcedureBodyProps, ProcedureFooterProps, FooterPositionMode, BackConfirmModalConfig, BodyLayoutMode, BodyLayoutRatio, BodyDirection, StepItem, StepChangeResult, } from './types';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './PisellSteps.less';
|
|
3
|
+
import type { PisellStepsProps } from './types';
|
|
4
|
+
/**
|
|
5
|
+
* PisellSteps 步骤条组件
|
|
6
|
+
*
|
|
7
|
+
* 基于 Ant Design Steps 组件进行二次封装和增强
|
|
8
|
+
* 支持多种展示样式、布局方式和丰富的交互功能
|
|
9
|
+
*
|
|
10
|
+
* @author Pisell Team
|
|
11
|
+
* @version 1.0.0
|
|
12
|
+
*/
|
|
13
|
+
declare const PisellSteps: React.FC<PisellStepsProps>;
|
|
14
|
+
export default PisellSteps;
|
|
@@ -44,7 +44,7 @@ export declare const withDataSource: <P extends unknown>(WrappedComponent: React
|
|
|
44
44
|
}) => React.JSX.Element;
|
|
45
45
|
export declare const withOptions: <P extends unknown>(WrappedComponent: React.ComponentType<P>) => (props: P & {
|
|
46
46
|
options?: any;
|
|
47
|
-
optionSourceType?: "default" | "
|
|
47
|
+
optionSourceType?: "default" | "api" | "custom" | undefined;
|
|
48
48
|
labelField: string;
|
|
49
49
|
valueField: string;
|
|
50
50
|
extraParams?: Record<string, any> | undefined;
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
declare const Subdomain: React.FC<import("antd").InputProps & {
|
|
3
3
|
onChange: (value: string) => void;
|
|
4
4
|
onBlur?: ((e: React.FocusEvent<HTMLInputElement, Element>) => void) | undefined;
|
|
5
|
-
rootDomain: "
|
|
5
|
+
rootDomain: "saas" | "custom" | "xzero";
|
|
6
6
|
customDomain?: string | undefined;
|
|
7
7
|
value?: string | undefined;
|
|
8
8
|
tenantId: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
declare const SelectWithDataSource: (props: import("antd").SelectProps<any, import("antd/es/select").DefaultOptionType> & import("../../dataSourceForm/utils").WithModeProps & import("../../dataSourceForm/utils").WithFormItemProps & {
|
|
3
3
|
options?: any;
|
|
4
|
-
optionSourceType?: "default" | "
|
|
4
|
+
optionSourceType?: "default" | "api" | "custom" | undefined;
|
|
5
5
|
labelField: string;
|
|
6
6
|
valueField: string;
|
|
7
7
|
extraParams?: Record<string, any> | undefined;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ModeType } from "../../dataSourceForm/type";
|
|
3
|
+
export interface TranslationValue {
|
|
4
|
+
en: string;
|
|
5
|
+
'zh-CN': string;
|
|
6
|
+
'zh-HK': string;
|
|
7
|
+
'ja': string;
|
|
8
|
+
'pt': string;
|
|
9
|
+
original: string;
|
|
10
|
+
}
|
|
11
|
+
export interface TranslationProps {
|
|
12
|
+
renderMode: ModeType;
|
|
13
|
+
value?: TranslationValue;
|
|
14
|
+
onChange?: (value: TranslationValue) => void;
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
placeholder?: string;
|
|
17
|
+
className?: string;
|
|
18
|
+
type?: 'text' | 'textarea';
|
|
19
|
+
maxLength?: number;
|
|
20
|
+
inputStyle?: React.CSSProperties;
|
|
21
|
+
}
|