@blocklet/ui-react 3.0.38 → 3.0.41

package/src/common/wizard-modal.jsx

@@ -1,12 +1,17 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Box, CircularProgress, Dialog, useMediaQuery, useTheme } from '@mui/material';
+import { Box, CircularProgress, Dialog, Typography, useMediaQuery, useTheme } from '@mui/material';
 import PropTypes from 'prop-types';
 import { useEffect, useRef, useState } from 'react';
 import { joinURL, withQuery } from 'ufo';
 
 const DEFAULT_WIZARD_PATH = '/.well-known/service/wizard/bind-account';
 
-export default function WizardModal({ onFinished = () => {}, show = false, onChangeVisible = () => {} }) {
+export default function WizardModal({
+  onFinished = () => {},
+  show = false,
+  onChangeVisible = () => {},
+  loadingText = '',
+}) {
   const [open, setOpen] = useState(show);
   const [loaded, setLoaded] = useState(false);
   const [currentUrl, setCurrentUrl] = useState(() => {
@@ -169,7 +174,10 @@ export default function WizardModal({ onFinished = () => {}, show = false, onCha
             alignItems: 'center',
             bgcolor: 'background.paper',
           }}>
-          <CircularProgress />
+          <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column', gap: 1 }}>
+            <CircularProgress />
+            {typeof loadingText === 'string' ? <Typography variant="body1">{loadingText}</Typography> : loadingText}
+          </Box>
         </Box>
       )}
     </Dialog>
@@ -180,4 +188,5 @@ WizardModal.propTypes = {
   onFinished: PropTypes.func,
   show: PropTypes.bool,
   onChangeVisible: PropTypes.func,
+  loadingText: PropTypes.node,
 };

package/src/common/wizard-example.md

@@ -1,168 +0,0 @@
-# WizardModal 使用示例
-
-WizardModal 是一个自动弹窗的 iframe 组件，用于在页面加载时显示向导界面。
-
-## 基本用法
-
-### 在 Header 组件中使用
-
-```jsx
-import { Header } from '@arcblock/blocklet-ui-react';
-
-function App() {
-  return (
-    <Header
-      meta={blockletMeta}
-      // 默认不显示 wizard 按钮，设置为 true 启用
-      showWizard={true}
-    />
-  );
-}
-```
-
-### 默认行为
-
-```jsx
-// 默认不显示 wizard 按钮
-<Header meta={blockletMeta} />
-
-// 显示 wizard 按钮
-<Header meta={blockletMeta} showWizard={true} />
-```
-
-### 重置向导状态
-
-```javascript
-// 清除已完成标记，下次刷新页面时会重新显示向导
-localStorage.removeItem('wizard-completed');
-window.location.reload();
-```
-
-### 启用向导
-
-```jsx
-<Header
-  meta={blockletMeta}
-  showWizard={true} // 设置为 true 显示向导按钮
-/>
-```
-
-### 自定义向导 URL
-
-```jsx
-<Header
-  meta={blockletMeta}
-  wizardUrl="/.well-known/service/wizard/custom-setup"
-  onWizardFinished={(data) => {
-    console.log('自定义向导完成:', data);
-  }}
-/>
-```
-
-### 使用外部 URL
-
-```jsx
-<Header
-  meta={blockletMeta}
-  wizardUrl="https://external-wizard.example.com/setup"
-  onWizardFinished={(data) => {
-    console.log('外部向导完成:', data);
-  }}
-/>
-```
-
-## 直接使用 WizardModal 组件
-
-```jsx
-import { WizardModal } from '@arcblock/blocklet-ui-react/lib/common/wizard-modal';
-
-function MyComponent() {
-  const [showWizard, setShowWizard] = useState(false);
-
-  return (
-    <div>
-      <button onClick={() => setShowWizard(true)}>打开向导</button>
-
-      <WizardModal
-        open={showWizard}
-        wizardUrl="/.well-known/service/wizard/bind-account"
-        onFinished={(data) => {
-          console.log('向导完成:', data);
-          setShowWizard(false);
-        }}
-      />
-    </div>
-  );
-}
-```
-
-## 向导页面消息通信
-
-向导页面可以通过 postMessage 与父页面通信：
-
-### 向导页面发送消息
-
-```javascript
-// 通知父页面向导已加载完成
-window.parent.postMessage(
-  {
-    type: 'wizard.loaded',
-  },
-  window.location.origin
-);
-
-// 通知父页面向导已完成
-window.parent.postMessage(
-  {
-    type: 'wizard.finished',
-    data: { success: true, result: 'setup-complete' },
-  },
-  window.location.origin
-);
-
-// 通知父页面关闭向导
-window.parent.postMessage(
-  {
-    type: 'wizard.close',
-  },
-  window.location.origin
-);
-```
-
-## Props 说明
-
-### Header 组件新增 Props
-
-| 属性       | 类型    | 默认值 | 说明             |
-| ---------- | ------- | ------ | ---------------- |
-| showWizard | boolean | false  | 是否显示向导按钮 |
-
-### WizardModal 组件 Props
-
-| 属性            | 类型     | 默认值    | 说明                                 |
-| --------------- | -------- | --------- | ------------------------------------ |
-| show            | boolean  | false     | 控制弹窗显示状态                     |
-| onFinished      | function | undefined | 向导完成回调函数                     |
-| onChangeVisible | function | undefined | 弹窗显示状态变化回调                 |
-| onClose         | function | undefined | 弹窗关闭回调（isCompleted: boolean） |
-
-## 新增功能特性
-
-### 1. 智能提示系统
-
-- 点击遮罩关闭时显示 tooltip 提示："想要再次打开 wizard 可以点击这里"
-- Tooltip 显示 5 秒后自动消失
-- 完成向导后不显示 tooltip
-- 按钮在提示期间有闪烁动画效果
-
-### 2. URL 状态保存
-
-- 关闭 wizard 时自动保存当前 iframe 的 URL 到 localStorage
-- 下次打开时直接加载上次的位置，继续之前的进度
-- 完成向导后重置为默认 URL
-
-### 3. 交互优化
-
-- 点击遮罩或 ESC 键可以关闭弹窗
-- 关闭时会保存当前进度
-- 完成后自动清理临时状态