myshell-react-lib 0.1.0

package/src/stories/GridSwiper.stories.tsx

@@ -0,0 +1,1407 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Swiper } from '../components/swiper/index';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/数据展示/Swiper-轮播图',
+  component: Swiper,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+    nextjs: {
+      appDirectory: true, // 如果组件里有用到router next/navigation，则需要设置此配置
+    },
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: {
+    component: (args) => {
+      return <div {...args} showChat={true} />;
+    },
+    className: 'h-[314px]',
+    swiperType: 'grid',
+    dataList: [
+      {
+        subCardNormal: {
+          baseSubCard: {
+            clickJumpUrl: '',
+            clickJumpSchema: '',
+            hoverButton: {
+              title: '立即体验',
+              jumpUrl: 'robot-workshop/widget/1744008029948350464',
+              jumpMobileUrl: 'robot-workshop/widget/1744008029948350464',
+              jumpSchema: '',
+            },
+          },
+          widgetSummary: {
+            id: '1744008029948350464',
+            name: 'Victor',
+            description:
+              'Victor is the CEO of the Loveland Financial Group, and manages investments and financial concerns.',
+            logoUrl:
+              'https://d6phagtfbtco7.cloudfront.net/tts-image/public-v4/Victor.png',
+            backgroundImageUrl: '',
+            tags: [
+              {
+                id: '1742987206466736128',
+                label: '复合组件',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/widget/icon/20240105/block/blue.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742986547088592896',
+                orderScore: '0',
+                extra: {
+                  isShowHover: true,
+                  hoverText:
+                    '复合组件：为基础模型加工后产生的资产类组件或基于基础模型加工后的其他组件，可直接应用在BOT上的组件，包括Prompt，Voice，Avatar，二维码生成等',
+                },
+              },
+              {
+                id: '1742195173967794176',
+                label: 'TTS',
+                iconUrl: '',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1719340128612346721',
+                orderScore: '1001600',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+              {
+                id: '1742969307777732608',
+                label: '英语',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/bot/tag/20231127/1719341865775403008.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742195173967794176',
+                orderScore: '0',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+            ],
+            status: 'STATUS_PUBLIC',
+            displaySellPrice: false,
+            sellPrice: '0',
+            chatPanelType: 'BOT_CHAT_PANEL_TYPE_IM',
+            imPanelChatConfig: {
+              supportedEmbedTypes: [],
+              embedNumberLimit: 0,
+              supportedSlashCommand: null,
+              embedNumberMinimum: 0,
+            },
+            imComponent: null,
+            energyPerChat: 1,
+            hasUnlocked: false,
+            chatCallerType: 'WIDGET_CHAT_CALLER_TYPE_VOICE',
+            baseSubCard: null,
+            needShowUnlock: false,
+            pinned: false,
+            membershipChatConfig: {
+              supportedMembershipTypes: [],
+              isLockByMembershipType: false,
+            },
+            author: {
+              id: '4191412',
+              name: 'MyShell',
+              email: '',
+              nameTag: '#7642',
+              avatar: 'avatar/60f6e978f1554ffc9c3c34bb3f68f8ad.png',
+              publicAddress: '',
+              isNftAvatar: false,
+              description: '',
+              backgroundUrl: '',
+              followedCount: 0,
+              fansCount: 1353,
+              followStatus: 'NOT_FOLLOWED',
+              userSource: 'USER_SOURCE_UNSPECIFIED',
+              membershipInfo: {
+                type: 'TYPE_GENESIS_WITH_GENESIS_CARD',
+                premiumInfo: null,
+                privateBotLimit: 0,
+                publicBotLimit: 0,
+                levelInfo: null,
+              },
+              currentSeasonInfo: null,
+              lastSeasonInfo: null,
+              userCreatedAt: '0',
+            },
+            voiceDetail: {
+              ttsId: '3912',
+              sampleUrl: '',
+              languageId: '1',
+              languageName: 'English',
+            },
+            settings: [],
+            showCopyProConfig: true,
+          },
+          title: 'Victor',
+          subTitle:
+            'Victor is the CEO of the Loveland Financial Group, and manages investments and financial concerns.',
+          imageUrl: 'tts-image/public-v4/Victor.png',
+        },
+      },
+      {
+        subCardNormal: {
+          baseSubCard: {
+            clickJumpUrl: '',
+            clickJumpSchema: '',
+            hoverButton: {
+              title: '立即体验',
+              jumpUrl: 'robot-workshop/widget/1744006901076594688',
+              jumpMobileUrl: 'robot-workshop/widget/1744006901076594688',
+              jumpSchema: '',
+            },
+          },
+          widgetSummary: {
+            id: '1744006901076594688',
+            name: '诺拉',
+            description: 'I love dominant assertive men!',
+            logoUrl:
+              'https://d6phagtfbtco7.cloudfront.net/tts-image/public-v1/17.png',
+            backgroundImageUrl: '',
+            tags: [
+              {
+                id: '1742987206466736128',
+                label: '复合组件',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/widget/icon/20240105/block/blue.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742986547088592896',
+                orderScore: '0',
+                extra: {
+                  isShowHover: true,
+                  hoverText:
+                    '复合组件：为基础模型加工后产生的资产类组件或基于基础模型加工后的其他组件，可直接应用在BOT上的组件，包括Prompt，Voice，Avatar，二维码生成等',
+                },
+              },
+              {
+                id: '1742195173967794176',
+                label: 'TTS',
+                iconUrl: '',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1719340128612346721',
+                orderScore: '1001600',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+              {
+                id: '1742969748653608960',
+                label: '中文',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/bot/tag/20231127/1719341882581979136.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742195173967794176',
+                orderScore: '0',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+            ],
+            status: 'STATUS_PUBLIC',
+            displaySellPrice: false,
+            sellPrice: '0',
+            chatPanelType: 'BOT_CHAT_PANEL_TYPE_IM',
+            imPanelChatConfig: {
+              supportedEmbedTypes: [],
+              embedNumberLimit: 0,
+              supportedSlashCommand: null,
+              embedNumberMinimum: 0,
+            },
+            imComponent: null,
+            energyPerChat: 1,
+            hasUnlocked: false,
+            chatCallerType: 'WIDGET_CHAT_CALLER_TYPE_VOICE',
+            baseSubCard: null,
+            needShowUnlock: false,
+            pinned: false,
+            membershipChatConfig: {
+              supportedMembershipTypes: [],
+              isLockByMembershipType: false,
+            },
+            author: {
+              id: '4191412',
+              name: 'MyShell',
+              email: '',
+              nameTag: '#7642',
+              avatar: 'avatar/60f6e978f1554ffc9c3c34bb3f68f8ad.png',
+              publicAddress: '',
+              isNftAvatar: false,
+              description: '',
+              backgroundUrl: '',
+              followedCount: 0,
+              fansCount: 1353,
+              followStatus: 'NOT_FOLLOWED',
+              userSource: 'USER_SOURCE_UNSPECIFIED',
+              membershipInfo: {
+                type: 'TYPE_GENESIS_WITH_GENESIS_CARD',
+                premiumInfo: null,
+                privateBotLimit: 0,
+                publicBotLimit: 0,
+                levelInfo: null,
+              },
+              currentSeasonInfo: null,
+              lastSeasonInfo: null,
+              userCreatedAt: '0',
+            },
+            voiceDetail: {
+              ttsId: '24',
+              sampleUrl: '',
+              languageId: '3',
+              languageName: 'Chinese',
+            },
+            settings: [],
+            showCopyProConfig: true,
+          },
+          title: '诺拉',
+          subTitle: 'I love dominant assertive men!',
+          imageUrl: 'tts-image/public-v1/17.png',
+        },
+      },
+      {
+        subCardNormal: {
+          baseSubCard: {
+            clickJumpUrl: '',
+            clickJumpSchema: '',
+            hoverButton: {
+              title: '立即体验',
+              jumpUrl: 'robot-workshop/widget/1744713390946783232',
+              jumpMobileUrl: 'robot-workshop/widget/1744713390946783232',
+              jumpSchema: '',
+            },
+          },
+          widgetSummary: {
+            id: '1744713390946783232',
+            name: 'Nurse Naomi',
+            description: 'a deep sexy female voice',
+            logoUrl:
+              'https://www.myshellstatic.com/cdn-cgi/image/quality=40,format=webp/image/bot/voice_logo/29858/20240113/4cdac7071b3b435a9a26d57acb5b968c.png',
+            backgroundImageUrl: '',
+            tags: [
+              {
+                id: '1742987206466736128',
+                label: '复合组件',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/widget/icon/20240105/block/blue.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742986547088592896',
+                orderScore: '0',
+                extra: {
+                  isShowHover: true,
+                  hoverText:
+                    '复合组件：为基础模型加工后产生的资产类组件或基于基础模型加工后的其他组件，可直接应用在BOT上的组件，包括Prompt，Voice，Avatar，二维码生成等',
+                },
+              },
+              {
+                id: '1742195173967794176',
+                label: 'TTS',
+                iconUrl: '',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1719340128612346721',
+                orderScore: '1001600',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+              {
+                id: '1742969307777732608',
+                label: '英语',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/bot/tag/20231127/1719341865775403008.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742195173967794176',
+                orderScore: '0',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+            ],
+            status: 'STATUS_PUBLIC',
+            displaySellPrice: false,
+            sellPrice: '0',
+            chatPanelType: 'BOT_CHAT_PANEL_TYPE_IM',
+            imPanelChatConfig: {
+              supportedEmbedTypes: [],
+              embedNumberLimit: 0,
+              supportedSlashCommand: null,
+              embedNumberMinimum: 0,
+            },
+            imComponent: null,
+            energyPerChat: 1,
+            hasUnlocked: false,
+            chatCallerType: 'WIDGET_CHAT_CALLER_TYPE_VOICE',
+            baseSubCard: null,
+            needShowUnlock: false,
+            pinned: false,
+            membershipChatConfig: {
+              supportedMembershipTypes: [],
+              isLockByMembershipType: false,
+            },
+            author: {
+              id: '29858',
+              name: 'df1bd05c3f224e65899d8be994aa806c',
+              email: '',
+              nameTag: '#4777',
+              avatar: 'default_avatars/Group6.png',
+              publicAddress: '',
+              isNftAvatar: false,
+              description: '',
+              backgroundUrl: '',
+              followedCount: 0,
+              fansCount: 41,
+              followStatus: 'NOT_FOLLOWED',
+              userSource: 'USER_SOURCE_UNSPECIFIED',
+              membershipInfo: {
+                type: 'TYPE_GENESIS_WITH_GENESIS_CARD',
+                premiumInfo: null,
+                privateBotLimit: 0,
+                publicBotLimit: 0,
+                levelInfo: null,
+              },
+              currentSeasonInfo: null,
+              lastSeasonInfo: null,
+              userCreatedAt: '0',
+            },
+            voiceDetail: {
+              ttsId: '34439',
+              sampleUrl:
+                'https://www.myshellstatic.com/audio/bot/voice_sample_audio/29858/20231030/031e830d1b9841dbac05b35c48637667.mp3',
+              languageId: '1',
+              languageName: 'English',
+            },
+            settings: [],
+            showCopyProConfig: true,
+          },
+          title: 'Nurse Naomi',
+          subTitle: 'a deep sexy female voice',
+          imageUrl:
+            'image/bot/voice_logo/29858/20240113/4cdac7071b3b435a9a26d57acb5b968c.png',
+        },
+      },
+      {
+        subCardNormal: {
+          baseSubCard: {
+            clickJumpUrl: '',
+            clickJumpSchema: '',
+            hoverButton: {
+              title: '立即体验',
+              jumpUrl: 'robot-workshop/widget/1743159010695057408',
+              jumpMobileUrl: 'robot-workshop/widget/1743159010695057408',
+              jumpSchema: '',
+            },
+          },
+          widgetSummary: {
+            id: '1743159010695057408',
+            name: 'Samantha',
+            description:
+              'A gentle and natural female voice, the classic choice.',
+            logoUrl:
+              'https://d6phagtfbtco7.cloudfront.net/tts-image/public-v1/1.png',
+            backgroundImageUrl: '',
+            tags: [
+              {
+                id: '1742987206466736128',
+                label: '复合组件',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/widget/icon/20240105/block/blue.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742986547088592896',
+                orderScore: '0',
+                extra: {
+                  isShowHover: true,
+                  hoverText:
+                    '复合组件：为基础模型加工后产生的资产类组件或基于基础模型加工后的其他组件，可直接应用在BOT上的组件，包括Prompt，Voice，Avatar，二维码生成等',
+                },
+              },
+              {
+                id: '1742195173967794176',
+                label: 'TTS',
+                iconUrl: '',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1719340128612346721',
+                orderScore: '1001600',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+              {
+                id: '1742969307777732608',
+                label: '英语',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/bot/tag/20231127/1719341865775403008.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742195173967794176',
+                orderScore: '0',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+            ],
+            status: 'STATUS_PUBLIC',
+            displaySellPrice: false,
+            sellPrice: '0',
+            chatPanelType: 'BOT_CHAT_PANEL_TYPE_IM',
+            imPanelChatConfig: {
+              supportedEmbedTypes: [],
+              embedNumberLimit: 0,
+              supportedSlashCommand: null,
+              embedNumberMinimum: 0,
+            },
+            imComponent: null,
+            energyPerChat: 1,
+            hasUnlocked: false,
+            chatCallerType: 'WIDGET_CHAT_CALLER_TYPE_VOICE',
+            baseSubCard: null,
+            needShowUnlock: false,
+            pinned: false,
+            membershipChatConfig: {
+              supportedMembershipTypes: [],
+              isLockByMembershipType: false,
+            },
+            author: {
+              id: '4191412',
+              name: 'MyShell',
+              email: '',
+              nameTag: '#7642',
+              avatar: 'avatar/60f6e978f1554ffc9c3c34bb3f68f8ad.png',
+              publicAddress: '',
+              isNftAvatar: false,
+              description: '',
+              backgroundUrl: '',
+              followedCount: 0,
+              fansCount: 1353,
+              followStatus: 'NOT_FOLLOWED',
+              userSource: 'USER_SOURCE_UNSPECIFIED',
+              membershipInfo: {
+                type: 'TYPE_GENESIS_WITH_GENESIS_CARD',
+                premiumInfo: null,
+                privateBotLimit: 0,
+                publicBotLimit: 0,
+                levelInfo: null,
+              },
+              currentSeasonInfo: null,
+              lastSeasonInfo: null,
+              userCreatedAt: '0',
+            },
+            voiceDetail: {
+              ttsId: '1',
+              sampleUrl: '',
+              languageId: '1',
+              languageName: 'English',
+            },
+            settings: [],
+            showCopyProConfig: true,
+          },
+          title: 'Samantha',
+          subTitle: 'A gentle and natural female voice, the classic choice.',
+          imageUrl: 'tts-image/public-v1/1.png',
+        },
+      },
+      {
+        subCardNormal: {
+          baseSubCard: {
+            clickJumpUrl: '',
+            clickJumpSchema: '',
+            hoverButton: {
+              title: '立即体验',
+              jumpUrl: 'robot-workshop/widget/1744008009190739968',
+              jumpMobileUrl: 'robot-workshop/widget/1744008009190739968',
+              jumpSchema: '',
+            },
+          },
+          widgetSummary: {
+            id: '1744008009190739968',
+            name: '周棋洛',
+            description:
+              'A popular superstar and idol known for his charming looks, his irresistible smile, and having been in many concerts and shows.',
+            logoUrl:
+              'https://d6phagtfbtco7.cloudfront.net/tts-image/public-v4/zhouqiluo.png',
+            backgroundImageUrl: '',
+            tags: [
+              {
+                id: '1742987206466736128',
+                label: '复合组件',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/widget/icon/20240105/block/blue.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742986547088592896',
+                orderScore: '0',
+                extra: {
+                  isShowHover: true,
+                  hoverText:
+                    '复合组件：为基础模型加工后产生的资产类组件或基于基础模型加工后的其他组件，可直接应用在BOT上的组件，包括Prompt，Voice，Avatar，二维码生成等',
+                },
+              },
+              {
+                id: '1742195173967794176',
+                label: 'TTS',
+                iconUrl: '',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1719340128612346721',
+                orderScore: '1001600',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+              {
+                id: '1742969748653608960',
+                label: '中文',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/bot/tag/20231127/1719341882581979136.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742195173967794176',
+                orderScore: '0',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+            ],
+            status: 'STATUS_PUBLIC',
+            displaySellPrice: false,
+            sellPrice: '0',
+            chatPanelType: 'BOT_CHAT_PANEL_TYPE_IM',
+            imPanelChatConfig: {
+              supportedEmbedTypes: [],
+              embedNumberLimit: 0,
+              supportedSlashCommand: null,
+              embedNumberMinimum: 0,
+            },
+            imComponent: null,
+            energyPerChat: 1,
+            hasUnlocked: false,
+            chatCallerType: 'WIDGET_CHAT_CALLER_TYPE_VOICE',
+            baseSubCard: null,
+            needShowUnlock: false,
+            pinned: false,
+            membershipChatConfig: {
+              supportedMembershipTypes: [],
+              isLockByMembershipType: false,
+            },
+            author: {
+              id: '4191412',
+              name: 'MyShell',
+              email: '',
+              nameTag: '#7642',
+              avatar: 'avatar/60f6e978f1554ffc9c3c34bb3f68f8ad.png',
+              publicAddress: '',
+              isNftAvatar: false,
+              description: '',
+              backgroundUrl: '',
+              followedCount: 0,
+              fansCount: 1353,
+              followStatus: 'NOT_FOLLOWED',
+              userSource: 'USER_SOURCE_UNSPECIFIED',
+              membershipInfo: {
+                type: 'TYPE_GENESIS_WITH_GENESIS_CARD',
+                premiumInfo: null,
+                privateBotLimit: 0,
+                publicBotLimit: 0,
+                levelInfo: null,
+              },
+              currentSeasonInfo: null,
+              lastSeasonInfo: null,
+              userCreatedAt: '0',
+            },
+            voiceDetail: {
+              ttsId: '3911',
+              sampleUrl: '',
+              languageId: '3',
+              languageName: 'Chinese',
+            },
+            settings: [],
+            showCopyProConfig: true,
+          },
+          title: '周棋洛',
+          subTitle:
+            'A popular superstar and idol known for his charming looks, his irresistible smile, and having been in many concerts and shows.',
+          imageUrl: 'tts-image/public-v4/zhouqiluo.png',
+        },
+      },
+      {
+        subCardNormal: {
+          baseSubCard: {
+            clickJumpUrl: '',
+            clickJumpSchema: '',
+            hoverButton: {
+              title: '立即体验',
+              jumpUrl: 'robot-workshop/widget/1744712704246943744',
+              jumpMobileUrl: 'robot-workshop/widget/1744712704246943744',
+              jumpSchema: '',
+            },
+          },
+          widgetSummary: {
+            id: '1744712704246943744',
+            name: 'Your Girlfriend',
+            description:
+              'Your girlfriend has lost all her memory - her name, age, background, habits, personality, and everything else, EXCEPT for her LOVE for you.',
+            logoUrl:
+              'https://www.myshellstatic.com/cdn-cgi/image/quality=40,format=webp/image/bot/voice_logo/48810/20240111/4e38d80d35c84a17af9153c43a0f8518.png',
+            backgroundImageUrl: '',
+            tags: [
+              {
+                id: '1742987206466736128',
+                label: '复合组件',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/widget/icon/20240105/block/blue.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742986547088592896',
+                orderScore: '0',
+                extra: {
+                  isShowHover: true,
+                  hoverText:
+                    '复合组件：为基础模型加工后产生的资产类组件或基于基础模型加工后的其他组件，可直接应用在BOT上的组件，包括Prompt，Voice，Avatar，二维码生成等',
+                },
+              },
+              {
+                id: '1742195173967794176',
+                label: 'TTS',
+                iconUrl: '',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1719340128612346721',
+                orderScore: '1001600',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+              {
+                id: '1742969307777732608',
+                label: '英语',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/bot/tag/20231127/1719341865775403008.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742195173967794176',
+                orderScore: '0',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+            ],
+            status: 'STATUS_PUBLIC',
+            displaySellPrice: false,
+            sellPrice: '0',
+            chatPanelType: 'BOT_CHAT_PANEL_TYPE_IM',
+            imPanelChatConfig: {
+              supportedEmbedTypes: [],
+              embedNumberLimit: 0,
+              supportedSlashCommand: null,
+              embedNumberMinimum: 0,
+            },
+            imComponent: null,
+            energyPerChat: 1,
+            hasUnlocked: false,
+            chatCallerType: 'WIDGET_CHAT_CALLER_TYPE_VOICE',
+            baseSubCard: null,
+            needShowUnlock: false,
+            pinned: false,
+            membershipChatConfig: {
+              supportedMembershipTypes: [],
+              isLockByMembershipType: false,
+            },
+            author: {
+              id: '48810',
+              name: 'Kaiser',
+              email: '',
+              nameTag: '#6626',
+              avatar: 'avatar/16a0b74e2ace439bbce9e0c7e077b64e.png',
+              publicAddress: '',
+              isNftAvatar: false,
+              description: '',
+              backgroundUrl: '',
+              followedCount: 0,
+              fansCount: 26,
+              followStatus: 'NOT_FOLLOWED',
+              userSource: 'USER_SOURCE_UNSPECIFIED',
+              membershipInfo: {
+                type: 'TYPE_GENESIS_WITH_GENESIS_CARD',
+                premiumInfo: null,
+                privateBotLimit: 0,
+                publicBotLimit: 0,
+                levelInfo: null,
+              },
+              currentSeasonInfo: null,
+              lastSeasonInfo: null,
+              userCreatedAt: '0',
+            },
+            voiceDetail: {
+              ttsId: '2887',
+              sampleUrl:
+                'https://d6phagtfbtco7.cloudfront.net/tts-user-sample/a679ddc3c02543dd9c0a46d76010c5a1.mp3',
+              languageId: '1',
+              languageName: 'English',
+            },
+            settings: [],
+            showCopyProConfig: true,
+          },
+          title: 'Your Girlfriend',
+          subTitle:
+            'Your girlfriend has lost all her memory - her name, age, background, habits, personality, and everything else, EXCEPT for her LOVE for you.',
+          imageUrl:
+            'image/bot/voice_logo/48810/20240111/4e38d80d35c84a17af9153c43a0f8518.png',
+        },
+      },
+      {
+        subCardNormal: {
+          baseSubCard: {
+            clickJumpUrl: '',
+            clickJumpSchema: '',
+            hoverButton: {
+              title: '立即体验',
+              jumpUrl: 'robot-workshop/widget/1743159666025697280',
+              jumpMobileUrl: 'robot-workshop/widget/1743159666025697280',
+              jumpSchema: '',
+            },
+          },
+          widgetSummary: {
+            id: '1743159666025697280',
+            name: 'Sherlock',
+            description:
+              'My name is Sherlock Holmes. It is my business to know what other people do not know.',
+            logoUrl:
+              'https://d6phagtfbtco7.cloudfront.net/tts-image/public-v1/2.png',
+            backgroundImageUrl: '',
+            tags: [
+              {
+                id: '1742987206466736128',
+                label: '复合组件',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/widget/icon/20240105/block/blue.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742986547088592896',
+                orderScore: '0',
+                extra: {
+                  isShowHover: true,
+                  hoverText:
+                    '复合组件：为基础模型加工后产生的资产类组件或基于基础模型加工后的其他组件，可直接应用在BOT上的组件，包括Prompt，Voice，Avatar，二维码生成等',
+                },
+              },
+              {
+                id: '1742195173967794176',
+                label: 'TTS',
+                iconUrl: '',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1719340128612346721',
+                orderScore: '1001600',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+              {
+                id: '1742969307777732608',
+                label: '英语',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/bot/tag/20231127/1719341865775403008.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742195173967794176',
+                orderScore: '0',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+            ],
+            status: 'STATUS_PUBLIC',
+            displaySellPrice: false,
+            sellPrice: '0',
+            chatPanelType: 'BOT_CHAT_PANEL_TYPE_IM',
+            imPanelChatConfig: {
+              supportedEmbedTypes: [],
+              embedNumberLimit: 0,
+              supportedSlashCommand: null,
+              embedNumberMinimum: 0,
+            },
+            imComponent: null,
+            energyPerChat: 1,
+            hasUnlocked: false,
+            chatCallerType: 'WIDGET_CHAT_CALLER_TYPE_VOICE',
+            baseSubCard: null,
+            needShowUnlock: false,
+            pinned: false,
+            membershipChatConfig: {
+              supportedMembershipTypes: [],
+              isLockByMembershipType: false,
+            },
+            author: {
+              id: '4191412',
+              name: 'MyShell',
+              email: '',
+              nameTag: '#7642',
+              avatar: 'avatar/60f6e978f1554ffc9c3c34bb3f68f8ad.png',
+              publicAddress: '',
+              isNftAvatar: false,
+              description: '',
+              backgroundUrl: '',
+              followedCount: 0,
+              fansCount: 1353,
+              followStatus: 'NOT_FOLLOWED',
+              userSource: 'USER_SOURCE_UNSPECIFIED',
+              membershipInfo: {
+                type: 'TYPE_GENESIS_WITH_GENESIS_CARD',
+                premiumInfo: null,
+                privateBotLimit: 0,
+                publicBotLimit: 0,
+                levelInfo: null,
+              },
+              currentSeasonInfo: null,
+              lastSeasonInfo: null,
+              userCreatedAt: '0',
+            },
+            voiceDetail: {
+              ttsId: '2',
+              sampleUrl: '',
+              languageId: '1',
+              languageName: 'English',
+            },
+            settings: [],
+            showCopyProConfig: true,
+          },
+          title: 'Sherlock',
+          subTitle:
+            'My name is Sherlock Holmes. It is my business to know what other people do not know.',
+          imageUrl: 'tts-image/public-v1/2.png',
+        },
+      },
+      {
+        subCardNormal: {
+          baseSubCard: {
+            clickJumpUrl: '',
+            clickJumpSchema: '',
+            hoverButton: {
+              title: '立即体验',
+              jumpUrl: 'robot-workshop/widget/1744007633909583872',
+              jumpMobileUrl: 'robot-workshop/widget/1744007633909583872',
+              jumpSchema: '',
+            },
+          },
+          widgetSummary: {
+            id: '1744007633909583872',
+            name: 'voix douce féminine',
+            description:
+              'Indulge in the gentle and soothing voice of our feminine whisper.',
+            logoUrl:
+              'https://d6phagtfbtco7.cloudfront.net/tts-image/public-v2/fr_02.png',
+            backgroundImageUrl: '',
+            tags: [
+              {
+                id: '1742987206466736128',
+                label: '复合组件',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/widget/icon/20240105/block/blue.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742986547088592896',
+                orderScore: '0',
+                extra: {
+                  isShowHover: true,
+                  hoverText:
+                    '复合组件：为基础模型加工后产生的资产类组件或基于基础模型加工后的其他组件，可直接应用在BOT上的组件，包括Prompt，Voice，Avatar，二维码生成等',
+                },
+              },
+              {
+                id: '1742195173967794176',
+                label: 'TTS',
+                iconUrl: '',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1719340128612346721',
+                orderScore: '1001600',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+              {
+                id: '1742969843952390144',
+                label: '法语',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/bot/tag/20231127/1719341903578664960.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742195173967794176',
+                orderScore: '0',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+            ],
+            status: 'STATUS_PUBLIC',
+            displaySellPrice: false,
+            sellPrice: '0',
+            chatPanelType: 'BOT_CHAT_PANEL_TYPE_IM',
+            imPanelChatConfig: {
+              supportedEmbedTypes: [],
+              embedNumberLimit: 0,
+              supportedSlashCommand: null,
+              embedNumberMinimum: 0,
+            },
+            imComponent: null,
+            energyPerChat: 1,
+            hasUnlocked: false,
+            chatCallerType: 'WIDGET_CHAT_CALLER_TYPE_VOICE',
+            baseSubCard: null,
+            needShowUnlock: false,
+            pinned: false,
+            membershipChatConfig: {
+              supportedMembershipTypes: [],
+              isLockByMembershipType: false,
+            },
+            author: {
+              id: '4191412',
+              name: 'MyShell',
+              email: '',
+              nameTag: '#7642',
+              avatar: 'avatar/60f6e978f1554ffc9c3c34bb3f68f8ad.png',
+              publicAddress: '',
+              isNftAvatar: false,
+              description: '',
+              backgroundUrl: '',
+              followedCount: 0,
+              fansCount: 1353,
+              followStatus: 'NOT_FOLLOWED',
+              userSource: 'USER_SOURCE_UNSPECIFIED',
+              membershipInfo: {
+                type: 'TYPE_GENESIS_WITH_GENESIS_CARD',
+                premiumInfo: null,
+                privateBotLimit: 0,
+                publicBotLimit: 0,
+                levelInfo: null,
+              },
+              currentSeasonInfo: null,
+              lastSeasonInfo: null,
+              userCreatedAt: '0',
+            },
+            voiceDetail: {
+              ttsId: '2744',
+              sampleUrl: '',
+              languageId: '4',
+              languageName: 'French',
+            },
+            settings: [],
+            showCopyProConfig: true,
+          },
+          title: 'voix douce féminine',
+          subTitle:
+            'Indulge in the gentle and soothing voice of our feminine whisper.',
+          imageUrl: 'tts-image/public-v2/fr_02.png',
+        },
+      },
+      {
+        subCardNormal: {
+          baseSubCard: {
+            clickJumpUrl: '',
+            clickJumpSchema: '',
+            hoverButton: {
+              title: '立即体验',
+              jumpUrl: 'robot-workshop/widget/1744007592708935680',
+              jumpMobileUrl: 'robot-workshop/widget/1744007592708935680',
+              jumpSchema: '',
+            },
+          },
+          widgetSummary: {
+            id: '1744007592708935680',
+            name: 'Nora',
+            description:
+              'I am here to help you upgrade your red hot pocket rockets. And believe me handsome, upgrade whatever tickles your fancy.',
+            logoUrl:
+              'https://d6phagtfbtco7.cloudfront.net/tts-image/public-v3/51.png',
+            backgroundImageUrl: '',
+            tags: [
+              {
+                id: '1742987206466736128',
+                label: '复合组件',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/widget/icon/20240105/block/blue.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742986547088592896',
+                orderScore: '0',
+                extra: {
+                  isShowHover: true,
+                  hoverText:
+                    '复合组件：为基础模型加工后产生的资产类组件或基于基础模型加工后的其他组件，可直接应用在BOT上的组件，包括Prompt，Voice，Avatar，二维码生成等',
+                },
+              },
+              {
+                id: '1742195173967794176',
+                label: 'TTS',
+                iconUrl: '',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1719340128612346721',
+                orderScore: '1001600',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+              {
+                id: '1742969307777732608',
+                label: '英语',
+                iconUrl:
+                  'https://www.myshellstatic.com/image/bot/tag/20231127/1719341865775403008.png',
+                labelColors: {
+                  light: '',
+                  dark: '',
+                },
+                backgroundColors: {
+                  light: '',
+                  dark: '',
+                },
+                isComingSoon: false,
+                childTags: [],
+                parentId: '1742195173967794176',
+                orderScore: '0',
+                extra: {
+                  isShowHover: false,
+                  hoverText: '',
+                },
+              },
+            ],
+            status: 'STATUS_PUBLIC',
+            displaySellPrice: false,
+            sellPrice: '0',
+            chatPanelType: 'BOT_CHAT_PANEL_TYPE_IM',
+            imPanelChatConfig: {
+              supportedEmbedTypes: [],
+              embedNumberLimit: 0,
+              supportedSlashCommand: null,
+              embedNumberMinimum: 0,
+            },
+            imComponent: null,
+            energyPerChat: 1,
+            hasUnlocked: false,
+            chatCallerType: 'WIDGET_CHAT_CALLER_TYPE_VOICE',
+            baseSubCard: null,
+            needShowUnlock: false,
+            pinned: false,
+            membershipChatConfig: {
+              supportedMembershipTypes: [],
+              isLockByMembershipType: false,
+            },
+            author: {
+              id: '4191412',
+              name: 'MyShell',
+              email: '',
+              nameTag: '#7642',
+              avatar: 'avatar/60f6e978f1554ffc9c3c34bb3f68f8ad.png',
+              publicAddress: '',
+              isNftAvatar: false,
+              description: '',
+              backgroundUrl: '',
+              followedCount: 0,
+              fansCount: 1353,
+              followStatus: 'NOT_FOLLOWED',
+              userSource: 'USER_SOURCE_UNSPECIFIED',
+              membershipInfo: {
+                type: 'TYPE_GENESIS_WITH_GENESIS_CARD',
+                premiumInfo: null,
+                privateBotLimit: 0,
+                publicBotLimit: 0,
+                levelInfo: null,
+              },
+              currentSeasonInfo: null,
+              lastSeasonInfo: null,
+              userCreatedAt: '0',
+            },
+            voiceDetail: {
+              ttsId: '2735',
+              sampleUrl: '',
+              languageId: '1',
+              languageName: 'English',
+            },
+            settings: [],
+            showCopyProConfig: true,
+          },
+          title: 'Nora',
+          subTitle:
+            'I am here to help you upgrade your red hot pocket rockets. And believe me handsome, upgrade whatever tickles your fancy.',
+          imageUrl: 'tts-image/public-v3/51.png',
+        },
+      },
+    ].map((item) => {
+      const summary = item.subCardNormal?.widgetSummary;
+      return {
+        title: summary.name,
+        description: summary.description,
+        logoUrl: summary.logoUrl,
+        authorName: summary.author.name,
+        authorNameTag: summary.author.nameTag,
+        id: summary.id,
+        clickUrl: `/robot-workshop/widget/${summary.id}`,
+        type: 'Widget',
+        // buttonTitle: 'Chat',
+        // buttonUrl: `/robot-workshop/widget/${summary.id}`
+      };
+    }),
+  },
+  argTypes: {
+    // 定义size为select类型的控件
+  },
+} satisfies Meta<typeof Swiper>;
+
+export default meta;
+// export const Default: StoryObj<typeof meta> = {
+//   // 这里不需要设置 args，因为它会继承 meta 中的 args
+// };
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const GridDemo: Story = {
+  args: {
+    ...meta.args, // 继承默认参数
+  },
+  render: (args) => {
+    return (
+      <div className="w-[70vw] px-3 rounded-md">
+        <Swiper {...args} />
+      </div>
+    );
+  },
+};