@baishuyun/ai-design 2.0.37 → 2.1.0-alpha.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.
- package/.storybook/main.ts +31 -31
- package/.storybook/preview.ts +16 -16
- package/CHANGELOG.md +512 -492
- package/components.json +22 -22
- package/package.json +9 -6
- package/scripts/strip-layers.cjs +41 -41
- package/src/components/abs-fullscreen-gradient-bg.tsx +35 -35
- package/src/components/agent-helper/agent-category-select-menu/index.tsx +57 -57
- package/src/components/agent-helper/agent-entry-card/index.tsx +94 -94
- package/src/components/agent-helper/agent-helper-card/index.tsx +179 -179
- package/src/components/agent-helper/agent-helper-card-list/index.tsx +59 -59
- package/src/components/agent-helper/agent-helper-main-layout/index.tsx +60 -60
- package/src/components/agent-helper/agent-sort-select/index.tsx +89 -89
- package/src/components/agent-helper/agent-tag/index.tsx +29 -29
- package/src/components/agent-helper/app-select/index.tsx +559 -559
- package/src/components/agent-helper/condition-group/index.tsx +75 -75
- package/src/components/agent-helper/condition-input/index.tsx +233 -233
- package/src/components/agent-helper/condition-item/index.tsx +237 -237
- package/src/components/agent-helper/condition-quantifier-select/index.tsx +142 -142
- package/src/components/agent-helper/condition-trigger-description/index.tsx +49 -49
- package/src/components/agent-helper/date-picker/calendar-panel.tsx +164 -164
- package/src/components/agent-helper/date-picker/date-input.tsx +91 -91
- package/src/components/agent-helper/date-picker/date-picker.tsx +327 -327
- package/src/components/agent-helper/date-picker/footer-panel.tsx +44 -44
- package/src/components/agent-helper/date-picker/index.ts +3 -3
- package/src/components/agent-helper/date-picker/month-panel.tsx +82 -82
- package/src/components/agent-helper/date-picker/time-panel.tsx +146 -146
- package/src/components/agent-helper/date-picker/types.ts +37 -37
- package/src/components/agent-helper/date-picker/utils.ts +121 -121
- package/src/components/agent-helper/date-picker/year-panel.tsx +86 -86
- package/src/components/agent-helper/exec-log-filter/index.tsx +232 -232
- package/src/components/agent-helper/field-edit-preference-select/index.tsx +291 -291
- package/src/components/agent-helper/field-select/index.tsx +466 -466
- package/src/components/agent-helper/field-value-input/china-address-data.ts +4117 -4117
- package/src/components/agent-helper/field-value-input/display.tsx +71 -71
- package/src/components/agent-helper/field-value-input/icons.tsx +38 -38
- package/src/components/agent-helper/field-value-input/index.tsx +144 -144
- package/src/components/agent-helper/field-value-input/inputs.tsx +247 -247
- package/src/components/agent-helper/field-value-input/picker-inputs.tsx +1141 -1141
- package/src/components/agent-helper/flow-node-action-trigger-select/index.tsx +57 -57
- package/src/components/agent-helper/form-action-trigger-select/index.tsx +60 -60
- package/src/components/agent-helper/form-divider/index.tsx +44 -44
- package/src/components/agent-helper/form-select/index.tsx +732 -732
- package/src/components/agent-helper/monthdays-select/index.tsx +378 -378
- package/src/components/agent-helper/offset-preference-select/index.tsx +268 -268
- package/src/components/agent-helper/offset-type-select/index.tsx +66 -66
- package/src/components/agent-helper/offset-unit-select/index.tsx +54 -54
- package/src/components/agent-helper/placeholder-card/index.tsx +75 -75
- package/src/components/agent-helper/prompt-input/index.tsx +646 -640
- package/src/components/agent-helper/relational-operator-select/index.tsx +179 -179
- package/src/components/agent-helper/repeat-by-type-select/index.tsx +53 -53
- package/src/components/agent-helper/repeat-preference-select/index.tsx +162 -162
- package/src/components/agent-helper/repeat-preference-type-select/index.tsx +58 -58
- package/src/components/agent-helper/search-input/index.tsx +35 -35
- package/src/components/agent-helper/table/index.tsx +114 -114
- package/src/components/agent-helper/trigger-select/index.tsx +121 -121
- package/src/components/agent-helper/trigger-time-preference-select/index.tsx +189 -189
- package/src/components/agent-helper/trigger-time-source-type-select/index.tsx +53 -53
- package/src/components/agent-helper/weekdays-select/index.tsx +230 -230
- package/src/components/agent-scroll-selector.tsx +193 -193
- package/src/components/agent-select.tsx +154 -154
- package/src/components/attachment-part-group.tsx +35 -35
- package/src/components/attachment-part.tsx +296 -296
- package/src/components/attachments-previewer.tsx +272 -272
- package/src/components/base-button.tsx +49 -49
- package/src/components/border-animation.tsx +107 -107
- package/src/components/border-color-animation.tsx +66 -66
- package/src/components/bot-avatar-name.tsx +36 -36
- package/src/components/bot-icon.tsx +23 -23
- package/src/components/bs-entry-select/app-group-folder.tsx +61 -61
- package/src/components/bs-entry-select/bs-entry-select.tsx +296 -296
- package/src/components/bs-entry-select/build-tree.ts +265 -265
- package/src/components/bs-entry-select/entry-item.tsx +45 -45
- package/src/components/bs-entry-select/entry-popover.tsx +99 -99
- package/src/components/bs-entry-select/index.ts +7 -7
- package/src/components/bs-entry-select/other-app-section.tsx +96 -96
- package/src/components/bs-entry-select/scroll-slider.tsx +872 -872
- package/src/components/bs-entry-select/search-input.tsx +4 -4
- package/src/components/bs-entry-select/tree-item-node.tsx +84 -84
- package/src/components/bs-entry-select/types.ts +46 -46
- package/src/components/bs-icons.tsx +1362 -1362
- package/src/components/card-field.tsx +23 -23
- package/src/components/card.tsx +36 -36
- package/src/components/chat-area-header.tsx +65 -65
- package/src/components/check-card.tsx +77 -77
- package/src/components/circle-checker.tsx +66 -66
- package/src/components/collapsible-txt-msg.tsx +75 -75
- package/src/components/collapsible.tsx +9 -9
- package/src/components/confirm-dialog.tsx +139 -139
- package/src/components/date-range-picker.tsx +91 -91
- package/src/components/fake-bot-msg.tsx +51 -51
- package/src/components/field-checker-list-msg.tsx +146 -146
- package/src/components/field-checker.tsx +185 -185
- package/src/components/field-icon.tsx +13 -13
- package/src/components/field-value-checker.tsx +116 -116
- package/src/components/fields-design-info-table.tsx +160 -160
- package/src/components/fields-generating-indicator.tsx +95 -95
- package/src/components/fields-portal.tsx +18 -18
- package/src/components/fields-previewer.tsx +216 -216
- package/src/components/font-icon.tsx +65 -65
- package/src/components/form-info-editor.tsx +263 -263
- package/src/components/formula-tag.tsx +32 -32
- package/src/components/generate-animation.tsx +56 -56
- package/src/components/icon-btn.tsx +43 -43
- package/src/components/icon-card.tsx +67 -67
- package/src/components/icons/calendar-icon.tsx +5 -5
- package/src/components/icons/clear-all-icon.tsx +5 -5
- package/src/components/icons/empty-agent-icon.tsx +93 -93
- package/src/components/icons/empty-table-icon.tsx +104 -104
- package/src/components/icons/grids-icon.tsx +5 -5
- package/src/components/img-part.tsx +27 -27
- package/src/components/legacy-slot.tsx +110 -110
- package/src/components/line-checker.tsx +168 -168
- package/src/components/linear-gradient-border-btn.tsx +48 -48
- package/src/components/linear-gradient-color-bg-animation.tsx +103 -103
- package/src/components/memoized-markdown.tsx +32 -32
- package/src/components/message-content.tsx +21 -21
- package/src/components/number-part.tsx +46 -46
- package/src/components/office-container.tsx +289 -265
- package/src/components/option-item.tsx +27 -27
- package/src/components/output-config-editor.tsx +478 -478
- package/src/components/previewer-header.tsx +270 -270
- package/src/components/primary-confirm-btn.tsx +58 -58
- package/src/components/primary-entry-btn.tsx +48 -48
- package/src/components/radio-card.tsx +63 -63
- package/src/components/scroll-to-bottom-btn.tsx +28 -28
- package/src/components/split-line.tsx +9 -9
- package/src/components/square-checker.tsx +87 -87
- package/src/components/subform-fields-value-checker.tsx +184 -184
- package/src/components/tab-radio-group.tsx +83 -83
- package/src/components/tooltip.tsx +53 -53
- package/src/components/ui/button.tsx +51 -51
- package/src/components/ui/calendar.tsx +57 -57
- package/src/components/ui/dialog.tsx +104 -104
- package/src/components/ui/drawer.tsx +279 -279
- package/src/components/ui/form.tsx +202 -202
- package/src/components/ui/icons.tsx +1267 -1267
- package/src/components/ui/input.tsx +28 -28
- package/src/components/ui/label.tsx +30 -30
- package/src/components/ui/popover.tsx +85 -85
- package/src/components/ui/select.tsx +236 -236
- package/src/components/ui/spinner.tsx +17 -17
- package/src/components/ui/switch.tsx +33 -33
- package/src/components/ui/tabs.tsx +62 -62
- package/src/components/ui/textarea.tsx +28 -28
- package/src/components/ui/tooltip.tsx +53 -53
- package/src/components/user-txt-msg-bubble.tsx +47 -47
- package/src/components/warning-msg.tsx +27 -27
- package/src/const/ui.ts +119 -119
- package/src/css.d.ts +4 -4
- package/src/hooks/use-column-appear.ts +78 -78
- package/src/hooks/use-portal-container.ts +27 -27
- package/src/hooks/use-resizable-width.ts +129 -129
- package/src/hooks/use-select-popover-position.ts +74 -74
- package/src/hooks/use-shadow.ts +127 -127
- package/src/index.ts +226 -226
- package/src/lib/utils.ts +138 -138
- package/src/stories/AbsFullscreenGradientBg.stories.tsx +36 -36
- package/src/stories/AgentCategorySelectMenu.stories.tsx +33 -33
- package/src/stories/AgentEntryCard.stories.tsx +90 -90
- package/src/stories/AgentHelperCard.stories.tsx +105 -105
- package/src/stories/AgentHelperCardList.stories.tsx +120 -120
- package/src/stories/AgentHelperMainLayout.stories.tsx +71 -71
- package/src/stories/AgentScrollSelector.stories.tsx +95 -95
- package/src/stories/AgentSelect.stories.tsx +134 -134
- package/src/stories/AgentTag.stories.tsx +44 -44
- package/src/stories/AppSelect.stories.tsx +250 -250
- package/src/stories/AttachmentPart.stories.tsx +122 -122
- package/src/stories/AttachmentPartGroup.stories.tsx +152 -152
- package/src/stories/AttachmentsPreviewer.stories.tsx +306 -306
- package/src/stories/BaseButton.stories.tsx +33 -33
- package/src/stories/BorderAnimation.stories.tsx +116 -116
- package/src/stories/BorderColorAnimation.stories.tsx +63 -63
- package/src/stories/BotAvatarAndName.stories.ts +24 -24
- package/src/stories/BotIcon.stories.ts +22 -22
- package/src/stories/BsConditionInput.stories.tsx +460 -460
- package/src/stories/BsEntrySelect.stories.tsx +343 -343
- package/src/stories/BsTooltip.stories.tsx +32 -32
- package/src/stories/Card.stories.tsx +28 -28
- package/src/stories/CardField.stories.tsx +87 -87
- package/src/stories/ChatAreaHeader.stories.ts +26 -26
- package/src/stories/CheckCard.stories.tsx +114 -114
- package/src/stories/CircleChecker.stories.tsx +89 -89
- package/src/stories/CollapsibleTextMsg.stories.ts +44 -44
- package/src/stories/ConditionGroup.stories.tsx +216 -216
- package/src/stories/ConditionInput.stories.tsx +502 -502
- package/src/stories/ConditionItem.stories.tsx +163 -163
- package/src/stories/ConditonQuantifierSelect.stories.tsx +54 -54
- package/src/stories/ConditonTriggerDescription.stories.tsx +61 -61
- package/src/stories/ConfirmDialog.stories.tsx +123 -123
- package/src/stories/DataTable.stories.tsx +191 -191
- package/src/stories/DatePicker.stories.tsx +174 -174
- package/src/stories/ExecLogFilter.stories.tsx +145 -145
- package/src/stories/FakeBotMsg.stories.tsx +36 -36
- package/src/stories/FieldEditPreferenceSelect.stories.tsx +161 -161
- package/src/stories/FieldSelect.stories.tsx +228 -228
- package/src/stories/FieldValueInput.stories.tsx +442 -442
- package/src/stories/FlowNodeActionTriggerSelect.stories.tsx +80 -80
- package/src/stories/Form.stories.tsx +302 -302
- package/src/stories/FormActionTriggerSelect.stories.tsx +80 -80
- package/src/stories/FormDivider.stories.tsx +31 -31
- package/src/stories/FormInfoEditor.stories.tsx +173 -173
- package/src/stories/FormSelect.stories.tsx +222 -222
- package/src/stories/FormulaTag.stories.tsx +68 -68
- package/src/stories/GenerateAnimation.stories.ts +20 -20
- package/src/stories/IconBtn.stories.tsx +32 -32
- package/src/stories/IconCard.stories.tsx +35 -35
- package/src/stories/IconLib.tsx +45 -45
- package/src/stories/Icons.stories.ts +22 -22
- package/src/stories/ImgMsgPart.stories.tsx +42 -42
- package/src/stories/Input.stories.tsx +102 -102
- package/src/stories/Label.stories.tsx +66 -66
- package/src/stories/LegacySlot.stories.tsx +56 -56
- package/src/stories/LineChecker.stories.tsx +133 -133
- package/src/stories/LinearGradientBorderBtn.stories.tsx +86 -86
- package/src/stories/LinearGradientColorBgAnimation.stories.tsx +60 -60
- package/src/stories/MemoizedMarkdown.stories.tsx +102 -102
- package/src/stories/MessageContent.stories.tsx +36 -36
- package/src/stories/MonthdaysSelect.stories.tsx +78 -78
- package/src/stories/NumbersMsgPart.stories.tsx +42 -42
- package/src/stories/OfficeContainer.stories.tsx +287 -287
- package/src/stories/OffsetPreferenceSelect.stories.tsx +118 -118
- package/src/stories/OffsetTypeSelect.stories.tsx +75 -75
- package/src/stories/OffsetUnitSelect.stories.tsx +61 -61
- package/src/stories/OptionItem.stories.tsx +77 -77
- package/src/stories/OutputConfigEditor.stories.tsx +96 -96
- package/src/stories/PlaceholderCard.stories.tsx +35 -35
- package/src/stories/PreviewerHeader.stories.tsx +91 -91
- package/src/stories/PrimaryConfirmBtn.stories.tsx +60 -60
- package/src/stories/PrimaryEntryBtn.stories.tsx +74 -74
- package/src/stories/PromptInput.stories.tsx +228 -228
- package/src/stories/RadioCard.stories.tsx +103 -103
- package/src/stories/RelationalOperatorSelect.stories.tsx +61 -61
- package/src/stories/RepeatByTypeSelect.stories.tsx +58 -58
- package/src/stories/RepeatPreferenceSelect.stories.tsx +107 -107
- package/src/stories/RepeatPreferenceTypeSelect.stories.tsx +58 -58
- package/src/stories/ScrollToBottom.stories.tsx +24 -24
- package/src/stories/SearchInput.stories.tsx +50 -50
- package/src/stories/Select.stories.tsx +128 -128
- package/src/stories/SplitLine.stories.tsx +40 -40
- package/src/stories/SquareChecker.stories.tsx +96 -96
- package/src/stories/TabRadioGroup.stories.tsx +84 -84
- package/src/stories/Textarea.stories.tsx +67 -67
- package/src/stories/TriggerSelect.stories.tsx +48 -48
- package/src/stories/TriggerTimePreferenceSelect.stories.tsx +106 -106
- package/src/stories/TriggerTimeSourceTypeSelect.stories.tsx +68 -68
- package/src/stories/UserTextMsgBubble.stories.ts +24 -24
- package/src/stories/WarningMessage.stories.tsx +23 -23
- package/src/stories/WeekdaysSelect.stories.tsx +66 -66
- package/src/stories/assets/demo.css +539 -539
- package/src/stories/assets/demo_index.html +7988 -7988
- package/src/stories/assets/iconfont.css +1377 -1377
- package/src/stories/assets/iconfont.json +2382 -2382
- package/src/stories/assets/iconfont.svg +697 -697
- package/src/stories/collapsible.stories.tsx +47 -47
- package/src/stories/drawer.stories.tsx +196 -196
- package/src/stories/field-checker-list-msg.stories.tsx +95 -95
- package/src/stories/field-checker.stories.tsx +117 -117
- package/src/stories/field-icon.stories.tsx +70 -70
- package/src/stories/field-value-checker.stories.tsx +113 -113
- package/src/stories/fields-design-info-table.stories.tsx +203 -203
- package/src/stories/fields-generating.stories.tsx +41 -41
- package/src/stories/fields-previewer.stories.tsx +77 -77
- package/src/stories/subform-fields-value-checker.stories.tsx +98 -98
- package/src/style.css +226 -226
- package/src/types.ts +8 -8
- package/style.css +3652 -3652
- package/tsconfig.json +13 -13
- package/vite.config.ts +44 -44
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
|
|
3
|
-
import { Label } from '../components/ui/label';
|
|
4
|
-
import { Input } from '../components/ui/input';
|
|
5
|
-
|
|
6
|
-
const meta = {
|
|
7
|
-
title: 'AI Office/Label',
|
|
8
|
-
component: Label,
|
|
9
|
-
tags: ['autodocs'],
|
|
10
|
-
parameters: { layout: 'centered' },
|
|
11
|
-
args: {},
|
|
12
|
-
} satisfies Meta<typeof Label>;
|
|
13
|
-
|
|
14
|
-
export default meta;
|
|
15
|
-
type Story = StoryObj<typeof meta>;
|
|
16
|
-
|
|
17
|
-
export const Default: Story = {
|
|
18
|
-
args: {
|
|
19
|
-
children: '名称',
|
|
20
|
-
},
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
export const Required: Story = {
|
|
24
|
-
args: {
|
|
25
|
-
children: '应用范围',
|
|
26
|
-
required: true,
|
|
27
|
-
},
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export const WithInput: Story = {
|
|
31
|
-
args: {
|
|
32
|
-
htmlFor: 'demo-input',
|
|
33
|
-
},
|
|
34
|
-
render: (args) => (
|
|
35
|
-
<div className="flex flex-col gap-[6px]">
|
|
36
|
-
<Label {...args}>名称</Label>
|
|
37
|
-
<Input id={args.htmlFor} placeholder="请输入名称" />
|
|
38
|
-
</div>
|
|
39
|
-
),
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
export const RequiredWithInput: Story = {
|
|
43
|
-
args: {
|
|
44
|
-
htmlFor: 'demo-required-input',
|
|
45
|
-
},
|
|
46
|
-
render: (args) => (
|
|
47
|
-
<div className="flex flex-col gap-[6px]">
|
|
48
|
-
<Label {...args} required>
|
|
49
|
-
应用范围
|
|
50
|
-
</Label>
|
|
51
|
-
<Input id={args.htmlFor} placeholder="请选择应用范围" />
|
|
52
|
-
</div>
|
|
53
|
-
),
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
export const DisabledWithInput: Story = {
|
|
57
|
-
args: {
|
|
58
|
-
htmlFor: 'disabled-input',
|
|
59
|
-
},
|
|
60
|
-
render: (args) => (
|
|
61
|
-
<div className="flex flex-col gap-[6px]">
|
|
62
|
-
<Label {...args}>名称</Label>
|
|
63
|
-
<Input id={args.htmlFor} defaultValue="不可编辑" disabled />
|
|
64
|
-
</div>
|
|
65
|
-
),
|
|
66
|
-
};
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
|
|
3
|
+
import { Label } from '../components/ui/label';
|
|
4
|
+
import { Input } from '../components/ui/input';
|
|
5
|
+
|
|
6
|
+
const meta = {
|
|
7
|
+
title: 'AI Office/Label',
|
|
8
|
+
component: Label,
|
|
9
|
+
tags: ['autodocs'],
|
|
10
|
+
parameters: { layout: 'centered' },
|
|
11
|
+
args: {},
|
|
12
|
+
} satisfies Meta<typeof Label>;
|
|
13
|
+
|
|
14
|
+
export default meta;
|
|
15
|
+
type Story = StoryObj<typeof meta>;
|
|
16
|
+
|
|
17
|
+
export const Default: Story = {
|
|
18
|
+
args: {
|
|
19
|
+
children: '名称',
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export const Required: Story = {
|
|
24
|
+
args: {
|
|
25
|
+
children: '应用范围',
|
|
26
|
+
required: true,
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export const WithInput: Story = {
|
|
31
|
+
args: {
|
|
32
|
+
htmlFor: 'demo-input',
|
|
33
|
+
},
|
|
34
|
+
render: (args) => (
|
|
35
|
+
<div className="flex flex-col gap-[6px]">
|
|
36
|
+
<Label {...args}>名称</Label>
|
|
37
|
+
<Input id={args.htmlFor} placeholder="请输入名称" />
|
|
38
|
+
</div>
|
|
39
|
+
),
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export const RequiredWithInput: Story = {
|
|
43
|
+
args: {
|
|
44
|
+
htmlFor: 'demo-required-input',
|
|
45
|
+
},
|
|
46
|
+
render: (args) => (
|
|
47
|
+
<div className="flex flex-col gap-[6px]">
|
|
48
|
+
<Label {...args} required>
|
|
49
|
+
应用范围
|
|
50
|
+
</Label>
|
|
51
|
+
<Input id={args.htmlFor} placeholder="请选择应用范围" />
|
|
52
|
+
</div>
|
|
53
|
+
),
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
export const DisabledWithInput: Story = {
|
|
57
|
+
args: {
|
|
58
|
+
htmlFor: 'disabled-input',
|
|
59
|
+
},
|
|
60
|
+
render: (args) => (
|
|
61
|
+
<div className="flex flex-col gap-[6px]">
|
|
62
|
+
<Label {...args}>名称</Label>
|
|
63
|
+
<Input id={args.htmlFor} defaultValue="不可编辑" disabled />
|
|
64
|
+
</div>
|
|
65
|
+
),
|
|
66
|
+
};
|
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { LegacySlot } from '../components/legacy-slot';
|
|
3
|
-
|
|
4
|
-
const meta = {
|
|
5
|
-
title: 'AI Office/LegacySlot',
|
|
6
|
-
component: LegacySlot,
|
|
7
|
-
tags: ['autodocs'],
|
|
8
|
-
parameters: {
|
|
9
|
-
layout: 'centered',
|
|
10
|
-
},
|
|
11
|
-
} satisfies Meta<typeof LegacySlot>;
|
|
12
|
-
|
|
13
|
-
export default meta;
|
|
14
|
-
|
|
15
|
-
type Story = StoryObj<typeof meta>;
|
|
16
|
-
|
|
17
|
-
export const Default: Story = {
|
|
18
|
-
args: {
|
|
19
|
-
renderLegacy: (container: HTMLElement, props: Record<string, any>) => {
|
|
20
|
-
container.innerHTML = `<div style="padding:16px;border:1px solid #ccc;border-radius:8px;">Hello from legacy renderer. Props: ${JSON.stringify(props)}</div>`;
|
|
21
|
-
return () => {
|
|
22
|
-
container.innerHTML = '';
|
|
23
|
-
};
|
|
24
|
-
},
|
|
25
|
-
props: { message: 'Hello World' },
|
|
26
|
-
shadow: false,
|
|
27
|
-
},
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export const WithShadow: Story = {
|
|
31
|
-
args: {
|
|
32
|
-
renderLegacy: (container: HTMLElement) => {
|
|
33
|
-
container.innerHTML = '<div style="padding:16px;background:#f0f0f0;border-radius:8px;">Rendered inside Shadow DOM</div>';
|
|
34
|
-
return () => {
|
|
35
|
-
container.innerHTML = '';
|
|
36
|
-
};
|
|
37
|
-
},
|
|
38
|
-
props: {},
|
|
39
|
-
shadow: true,
|
|
40
|
-
withHostStyles: true,
|
|
41
|
-
},
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export const WithInjectedStyles: Story = {
|
|
45
|
-
args: {
|
|
46
|
-
renderLegacy: (container: HTMLElement) => {
|
|
47
|
-
container.innerHTML = '<div class="legacy-content">Styled via injected CSS</div>';
|
|
48
|
-
return () => {
|
|
49
|
-
container.innerHTML = '';
|
|
50
|
-
};
|
|
51
|
-
},
|
|
52
|
-
props: {},
|
|
53
|
-
shadow: true,
|
|
54
|
-
injectedStyles: '.legacy-content { color: #2563eb; font-size: 18px; font-weight: bold; padding: 16px; }',
|
|
55
|
-
},
|
|
56
|
-
};
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { LegacySlot } from '../components/legacy-slot';
|
|
3
|
+
|
|
4
|
+
const meta = {
|
|
5
|
+
title: 'AI Office/LegacySlot',
|
|
6
|
+
component: LegacySlot,
|
|
7
|
+
tags: ['autodocs'],
|
|
8
|
+
parameters: {
|
|
9
|
+
layout: 'centered',
|
|
10
|
+
},
|
|
11
|
+
} satisfies Meta<typeof LegacySlot>;
|
|
12
|
+
|
|
13
|
+
export default meta;
|
|
14
|
+
|
|
15
|
+
type Story = StoryObj<typeof meta>;
|
|
16
|
+
|
|
17
|
+
export const Default: Story = {
|
|
18
|
+
args: {
|
|
19
|
+
renderLegacy: (container: HTMLElement, props: Record<string, any>) => {
|
|
20
|
+
container.innerHTML = `<div style="padding:16px;border:1px solid #ccc;border-radius:8px;">Hello from legacy renderer. Props: ${JSON.stringify(props)}</div>`;
|
|
21
|
+
return () => {
|
|
22
|
+
container.innerHTML = '';
|
|
23
|
+
};
|
|
24
|
+
},
|
|
25
|
+
props: { message: 'Hello World' },
|
|
26
|
+
shadow: false,
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export const WithShadow: Story = {
|
|
31
|
+
args: {
|
|
32
|
+
renderLegacy: (container: HTMLElement) => {
|
|
33
|
+
container.innerHTML = '<div style="padding:16px;background:#f0f0f0;border-radius:8px;">Rendered inside Shadow DOM</div>';
|
|
34
|
+
return () => {
|
|
35
|
+
container.innerHTML = '';
|
|
36
|
+
};
|
|
37
|
+
},
|
|
38
|
+
props: {},
|
|
39
|
+
shadow: true,
|
|
40
|
+
withHostStyles: true,
|
|
41
|
+
},
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export const WithInjectedStyles: Story = {
|
|
45
|
+
args: {
|
|
46
|
+
renderLegacy: (container: HTMLElement) => {
|
|
47
|
+
container.innerHTML = '<div class="legacy-content">Styled via injected CSS</div>';
|
|
48
|
+
return () => {
|
|
49
|
+
container.innerHTML = '';
|
|
50
|
+
};
|
|
51
|
+
},
|
|
52
|
+
props: {},
|
|
53
|
+
shadow: true,
|
|
54
|
+
injectedStyles: '.legacy-content { color: #2563eb; font-size: 18px; font-weight: bold; padding: 16px; }',
|
|
55
|
+
},
|
|
56
|
+
};
|
|
@@ -1,134 +1,134 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
2
|
-
|
|
3
|
-
import { LineChecker } from "../components/line-checker";
|
|
4
|
-
import { TextIcon as FileTextIcon } from "../components/bs-icons";
|
|
5
|
-
|
|
6
|
-
const meta = {
|
|
7
|
-
title: "Example/Chat/LineChecker",
|
|
8
|
-
component: LineChecker,
|
|
9
|
-
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
10
|
-
tags: ["autodocs"],
|
|
11
|
-
parameters: {
|
|
12
|
-
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
|
13
|
-
layout: "centered",
|
|
14
|
-
},
|
|
15
|
-
args: {},
|
|
16
|
-
} satisfies Meta<typeof LineChecker>;
|
|
17
|
-
|
|
18
|
-
export default meta;
|
|
19
|
-
type Story = StoryObj<typeof meta>;
|
|
20
|
-
|
|
21
|
-
export const Default: Story = {
|
|
22
|
-
args: {
|
|
23
|
-
title: "供应商名称",
|
|
24
|
-
style: {
|
|
25
|
-
width: '400px',
|
|
26
|
-
},
|
|
27
|
-
shortDesc: "单行文本",
|
|
28
|
-
},
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
export const WithIcon: Story = {
|
|
32
|
-
args: {
|
|
33
|
-
title: "供应商名称",
|
|
34
|
-
shortDesc: "单行文本",
|
|
35
|
-
icon: <FileTextIcon />,
|
|
36
|
-
style: {
|
|
37
|
-
width: '400px',
|
|
38
|
-
},
|
|
39
|
-
},
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
export const LongTitle: Story = {
|
|
43
|
-
args: {
|
|
44
|
-
title: "供应商名称活动结束回复具体时间空间环境这是一个很长的标题会被截断",
|
|
45
|
-
shortDesc: "单行文本",
|
|
46
|
-
style: {
|
|
47
|
-
width: '400px',
|
|
48
|
-
},
|
|
49
|
-
icon: <FileTextIcon />,
|
|
50
|
-
},
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
export const Checked: Story = {
|
|
54
|
-
args: {
|
|
55
|
-
title: "供应商名称",
|
|
56
|
-
shortDesc: "单行文本",
|
|
57
|
-
icon: <FileTextIcon />,
|
|
58
|
-
defaultChecked: true,
|
|
59
|
-
},
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
export const Disabled: Story = {
|
|
63
|
-
args: {
|
|
64
|
-
title: "供应商名称",
|
|
65
|
-
shortDesc: "单行文本",
|
|
66
|
-
icon: <FileTextIcon />,
|
|
67
|
-
disabled: true,
|
|
68
|
-
style: {
|
|
69
|
-
width: '400px',
|
|
70
|
-
},
|
|
71
|
-
},
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
export const DisabledChecked: Story = {
|
|
75
|
-
args: {
|
|
76
|
-
title: "供应商名称",
|
|
77
|
-
shortDesc: "单行文本",
|
|
78
|
-
icon: <FileTextIcon />,
|
|
79
|
-
defaultChecked: true,
|
|
80
|
-
disabled: true,
|
|
81
|
-
style: {
|
|
82
|
-
width: '400px',
|
|
83
|
-
},
|
|
84
|
-
},
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
export const NoShortDesc: Story = {
|
|
88
|
-
args: {
|
|
89
|
-
title: "供应商名称",
|
|
90
|
-
icon: <FileTextIcon />,
|
|
91
|
-
style: {
|
|
92
|
-
width: '400px',
|
|
93
|
-
},
|
|
94
|
-
},
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
export const NoIcon: Story = {
|
|
98
|
-
args: {
|
|
99
|
-
title: "供应商名称",
|
|
100
|
-
shortDesc: "单行文本",
|
|
101
|
-
style: {
|
|
102
|
-
width: '400px',
|
|
103
|
-
},
|
|
104
|
-
},
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
export const MinimalVariant: Story = {
|
|
108
|
-
args: {
|
|
109
|
-
title: "简单选项",
|
|
110
|
-
},
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
export const WithExtraNodes: Story = {
|
|
115
|
-
args: {
|
|
116
|
-
title: "供应商名称",
|
|
117
|
-
shortDesc: "单行文本",
|
|
118
|
-
icon: <FileTextIcon />,
|
|
119
|
-
style: {
|
|
120
|
-
width: '400px',
|
|
121
|
-
},
|
|
122
|
-
extra: (
|
|
123
|
-
<div>
|
|
124
|
-
HELLO WORLD
|
|
125
|
-
HELLO WORLD
|
|
126
|
-
HELLO WORLD
|
|
127
|
-
HELLO WORLD
|
|
128
|
-
HELLO WORLD
|
|
129
|
-
HELLO WORLD
|
|
130
|
-
HELLO WORLD
|
|
131
|
-
</div>
|
|
132
|
-
)
|
|
133
|
-
},
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
2
|
+
|
|
3
|
+
import { LineChecker } from "../components/line-checker";
|
|
4
|
+
import { TextIcon as FileTextIcon } from "../components/bs-icons";
|
|
5
|
+
|
|
6
|
+
const meta = {
|
|
7
|
+
title: "Example/Chat/LineChecker",
|
|
8
|
+
component: LineChecker,
|
|
9
|
+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
10
|
+
tags: ["autodocs"],
|
|
11
|
+
parameters: {
|
|
12
|
+
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
|
13
|
+
layout: "centered",
|
|
14
|
+
},
|
|
15
|
+
args: {},
|
|
16
|
+
} satisfies Meta<typeof LineChecker>;
|
|
17
|
+
|
|
18
|
+
export default meta;
|
|
19
|
+
type Story = StoryObj<typeof meta>;
|
|
20
|
+
|
|
21
|
+
export const Default: Story = {
|
|
22
|
+
args: {
|
|
23
|
+
title: "供应商名称",
|
|
24
|
+
style: {
|
|
25
|
+
width: '400px',
|
|
26
|
+
},
|
|
27
|
+
shortDesc: "单行文本",
|
|
28
|
+
},
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export const WithIcon: Story = {
|
|
32
|
+
args: {
|
|
33
|
+
title: "供应商名称",
|
|
34
|
+
shortDesc: "单行文本",
|
|
35
|
+
icon: <FileTextIcon />,
|
|
36
|
+
style: {
|
|
37
|
+
width: '400px',
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export const LongTitle: Story = {
|
|
43
|
+
args: {
|
|
44
|
+
title: "供应商名称活动结束回复具体时间空间环境这是一个很长的标题会被截断",
|
|
45
|
+
shortDesc: "单行文本",
|
|
46
|
+
style: {
|
|
47
|
+
width: '400px',
|
|
48
|
+
},
|
|
49
|
+
icon: <FileTextIcon />,
|
|
50
|
+
},
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
export const Checked: Story = {
|
|
54
|
+
args: {
|
|
55
|
+
title: "供应商名称",
|
|
56
|
+
shortDesc: "单行文本",
|
|
57
|
+
icon: <FileTextIcon />,
|
|
58
|
+
defaultChecked: true,
|
|
59
|
+
},
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
export const Disabled: Story = {
|
|
63
|
+
args: {
|
|
64
|
+
title: "供应商名称",
|
|
65
|
+
shortDesc: "单行文本",
|
|
66
|
+
icon: <FileTextIcon />,
|
|
67
|
+
disabled: true,
|
|
68
|
+
style: {
|
|
69
|
+
width: '400px',
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
export const DisabledChecked: Story = {
|
|
75
|
+
args: {
|
|
76
|
+
title: "供应商名称",
|
|
77
|
+
shortDesc: "单行文本",
|
|
78
|
+
icon: <FileTextIcon />,
|
|
79
|
+
defaultChecked: true,
|
|
80
|
+
disabled: true,
|
|
81
|
+
style: {
|
|
82
|
+
width: '400px',
|
|
83
|
+
},
|
|
84
|
+
},
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
export const NoShortDesc: Story = {
|
|
88
|
+
args: {
|
|
89
|
+
title: "供应商名称",
|
|
90
|
+
icon: <FileTextIcon />,
|
|
91
|
+
style: {
|
|
92
|
+
width: '400px',
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
export const NoIcon: Story = {
|
|
98
|
+
args: {
|
|
99
|
+
title: "供应商名称",
|
|
100
|
+
shortDesc: "单行文本",
|
|
101
|
+
style: {
|
|
102
|
+
width: '400px',
|
|
103
|
+
},
|
|
104
|
+
},
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
export const MinimalVariant: Story = {
|
|
108
|
+
args: {
|
|
109
|
+
title: "简单选项",
|
|
110
|
+
},
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
export const WithExtraNodes: Story = {
|
|
115
|
+
args: {
|
|
116
|
+
title: "供应商名称",
|
|
117
|
+
shortDesc: "单行文本",
|
|
118
|
+
icon: <FileTextIcon />,
|
|
119
|
+
style: {
|
|
120
|
+
width: '400px',
|
|
121
|
+
},
|
|
122
|
+
extra: (
|
|
123
|
+
<div>
|
|
124
|
+
HELLO WORLD
|
|
125
|
+
HELLO WORLD
|
|
126
|
+
HELLO WORLD
|
|
127
|
+
HELLO WORLD
|
|
128
|
+
HELLO WORLD
|
|
129
|
+
HELLO WORLD
|
|
130
|
+
HELLO WORLD
|
|
131
|
+
</div>
|
|
132
|
+
)
|
|
133
|
+
},
|
|
134
134
|
};
|
|
@@ -1,86 +1,86 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
2
|
-
|
|
3
|
-
import { LinearGradientBorderBtn } from "../components/linear-gradient-border-btn";
|
|
4
|
-
import { LetterAIcon } from "../components/bs-icons";
|
|
5
|
-
|
|
6
|
-
const meta = {
|
|
7
|
-
title: "Example/Button/LinearGradientBorderBtn",
|
|
8
|
-
component: LinearGradientBorderBtn,
|
|
9
|
-
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
10
|
-
tags: ["autodocs"],
|
|
11
|
-
parameters: {
|
|
12
|
-
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
|
13
|
-
layout: "centered",
|
|
14
|
-
},
|
|
15
|
-
args: {},
|
|
16
|
-
} satisfies Meta<typeof LinearGradientBorderBtn>;
|
|
17
|
-
|
|
18
|
-
export default meta;
|
|
19
|
-
type Story = StoryObj<typeof meta>;
|
|
20
|
-
|
|
21
|
-
export const Default: Story = {
|
|
22
|
-
args: {
|
|
23
|
-
children: "搭建供应商评估表",
|
|
24
|
-
},
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
export const ShortText: Story = {
|
|
28
|
-
args: {
|
|
29
|
-
children: "确认",
|
|
30
|
-
},
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
export const LongText: Story = {
|
|
34
|
-
args: {
|
|
35
|
-
children: "创建新的供应商管理表单并提交审核",
|
|
36
|
-
},
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
export const Disabled: Story = {
|
|
40
|
-
args: {
|
|
41
|
-
children: "搭建供应商评估表",
|
|
42
|
-
disabled: true,
|
|
43
|
-
},
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
export const WithClickHandler: Story = {
|
|
47
|
-
args: {
|
|
48
|
-
children: "点击我",
|
|
49
|
-
onClick: () => alert("按钮被点击了!"),
|
|
50
|
-
},
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
export const CustomClassName: Story = {
|
|
54
|
-
args: {
|
|
55
|
-
children: "自定义样式",
|
|
56
|
-
className: "w-[200px]",
|
|
57
|
-
},
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
export const MultipleButtons: Story = {
|
|
61
|
-
render: () => (
|
|
62
|
-
<div className="flex gap-2">
|
|
63
|
-
<LinearGradientBorderBtn>取消</LinearGradientBorderBtn>
|
|
64
|
-
<LinearGradientBorderBtn>确定</LinearGradientBorderBtn>
|
|
65
|
-
<LinearGradientBorderBtn>提交</LinearGradientBorderBtn>
|
|
66
|
-
</div>
|
|
67
|
-
),
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
export const WithIcon: Story = {
|
|
71
|
-
args: {
|
|
72
|
-
children: (
|
|
73
|
-
<div className="flex items-center gap-1">
|
|
74
|
-
<LetterAIcon />
|
|
75
|
-
<span>添加表单</span>
|
|
76
|
-
</div>
|
|
77
|
-
),
|
|
78
|
-
},
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
export const FixedWidth: Story = {
|
|
82
|
-
args: {
|
|
83
|
-
children: "固定宽度按钮",
|
|
84
|
-
className: "w-[160px]",
|
|
85
|
-
},
|
|
86
|
-
};
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
2
|
+
|
|
3
|
+
import { LinearGradientBorderBtn } from "../components/linear-gradient-border-btn";
|
|
4
|
+
import { LetterAIcon } from "../components/bs-icons";
|
|
5
|
+
|
|
6
|
+
const meta = {
|
|
7
|
+
title: "Example/Button/LinearGradientBorderBtn",
|
|
8
|
+
component: LinearGradientBorderBtn,
|
|
9
|
+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
10
|
+
tags: ["autodocs"],
|
|
11
|
+
parameters: {
|
|
12
|
+
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
|
13
|
+
layout: "centered",
|
|
14
|
+
},
|
|
15
|
+
args: {},
|
|
16
|
+
} satisfies Meta<typeof LinearGradientBorderBtn>;
|
|
17
|
+
|
|
18
|
+
export default meta;
|
|
19
|
+
type Story = StoryObj<typeof meta>;
|
|
20
|
+
|
|
21
|
+
export const Default: Story = {
|
|
22
|
+
args: {
|
|
23
|
+
children: "搭建供应商评估表",
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export const ShortText: Story = {
|
|
28
|
+
args: {
|
|
29
|
+
children: "确认",
|
|
30
|
+
},
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export const LongText: Story = {
|
|
34
|
+
args: {
|
|
35
|
+
children: "创建新的供应商管理表单并提交审核",
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export const Disabled: Story = {
|
|
40
|
+
args: {
|
|
41
|
+
children: "搭建供应商评估表",
|
|
42
|
+
disabled: true,
|
|
43
|
+
},
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export const WithClickHandler: Story = {
|
|
47
|
+
args: {
|
|
48
|
+
children: "点击我",
|
|
49
|
+
onClick: () => alert("按钮被点击了!"),
|
|
50
|
+
},
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
export const CustomClassName: Story = {
|
|
54
|
+
args: {
|
|
55
|
+
children: "自定义样式",
|
|
56
|
+
className: "w-[200px]",
|
|
57
|
+
},
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export const MultipleButtons: Story = {
|
|
61
|
+
render: () => (
|
|
62
|
+
<div className="flex gap-2">
|
|
63
|
+
<LinearGradientBorderBtn>取消</LinearGradientBorderBtn>
|
|
64
|
+
<LinearGradientBorderBtn>确定</LinearGradientBorderBtn>
|
|
65
|
+
<LinearGradientBorderBtn>提交</LinearGradientBorderBtn>
|
|
66
|
+
</div>
|
|
67
|
+
),
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
export const WithIcon: Story = {
|
|
71
|
+
args: {
|
|
72
|
+
children: (
|
|
73
|
+
<div className="flex items-center gap-1">
|
|
74
|
+
<LetterAIcon />
|
|
75
|
+
<span>添加表单</span>
|
|
76
|
+
</div>
|
|
77
|
+
),
|
|
78
|
+
},
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
export const FixedWidth: Story = {
|
|
82
|
+
args: {
|
|
83
|
+
children: "固定宽度按钮",
|
|
84
|
+
className: "w-[160px]",
|
|
85
|
+
},
|
|
86
|
+
};
|