@abtnode/ux 1.17.8-beta-20260106-113136-b3c09e14 → 1.17.8-beta-20260108-021819-e099f0ca

package/lib/blocklet/authentication/auth-text/action-item.js

@@ -0,0 +1,272 @@
+import { Accordion, AccordionDetails, AccordionSummary, Box, Chip, IconButton, Stack, TextField, Typography } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import AddIcon from '@mui/icons-material/Add';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import PropTypes from 'prop-types';
+import { defaultActions, requiredLanguages, isValidActionName, getSortedLanguages, getLanguageLabel } from './constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function ActionNameEditor({
+  value = '',
+  onChange = () => {},
+  onBlur = () => {},
+  onKeyDown = () => {},
+  isDuplicate = false
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const isInvalid = value && !isValidActionName(value);
+  let helperText = '';
+  if (isInvalid) {
+    helperText = t('authentication.didConnect.actionNameError');
+  } else if (isDuplicate) {
+    helperText = t('authentication.didConnect.actionNameDuplicate');
+  }
+  return /*#__PURE__*/_jsx(TextField, {
+    value: value,
+    onChange: onChange,
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    onClick: e => e.stopPropagation(),
+    size: "small",
+    variant: "standard",
+    autoFocus: true,
+    placeholder: "action-name",
+    helperText: helperText,
+    error: isInvalid || isDuplicate,
+    sx: {
+      '& .MuiInputBase-input': {
+        py: 0,
+        fontSize: 14,
+        fontWeight: 500
+      }
+    }
+  });
+}
+ActionNameEditor.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  isDuplicate: PropTypes.bool
+};
+function LanguageChip({
+  langCode,
+  isSelected = false,
+  canDelete = false,
+  onSelect = () => {},
+  onDelete = () => {}
+}) {
+  return /*#__PURE__*/_jsx(Chip, {
+    label: getLanguageLabel(langCode),
+    onClick: onSelect,
+    onDelete: canDelete ? onDelete : undefined,
+    size: "small",
+    sx: {
+      bgcolor: isSelected ? 'primary.main' : 'grey.100',
+      color: isSelected ? 'primary.contrastText' : 'text.primary',
+      '&:hover': {
+        bgcolor: isSelected ? 'primary.dark' : 'grey.200'
+      },
+      '& .MuiChip-deleteIcon': {
+        color: isSelected ? 'primary.contrastText' : 'text.secondary',
+        '&:hover': {
+          color: isSelected ? 'primary.contrastText' : 'error.main'
+        }
+      }
+    }
+  });
+}
+LanguageChip.propTypes = {
+  langCode: PropTypes.string.isRequired,
+  isSelected: PropTypes.bool,
+  canDelete: PropTypes.bool,
+  onSelect: PropTypes.func,
+  onDelete: PropTypes.func
+};
+export default function ActionItem({
+  actionKey,
+  actionData = {},
+  expanded = false,
+  selectedLang = '',
+  editing = {},
+  onChange = {}
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const canEdit = !defaultActions.includes(actionKey);
+  const langs = getSortedLanguages(Object.keys(actionData));
+  const langData = actionData[selectedLang] || {};
+  const isEditing = editing?.actionKey === actionKey;
+  const isDuplicate = editing?.name && editing.name !== actionKey && editing.allActions?.[editing.name];
+  return /*#__PURE__*/_jsxs(Accordion, {
+    expanded: expanded,
+    onChange: (_, isExpanded) => onChange.accordion(isExpanded),
+    elevation: 0,
+    sx: {
+      border: '1px solid',
+      borderColor: 'grey.200',
+      borderRadius: '8px !important',
+      '&:before': {
+        display: 'none'
+      },
+      '&.Mui-expanded': {
+        margin: 0
+      }
+    },
+    children: [/*#__PURE__*/_jsxs(AccordionSummary, {
+      expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
+      sx: {
+        minHeight: 48,
+        '& .MuiAccordionSummary-content': {
+          alignItems: 'center',
+          gap: 1
+        }
+      },
+      children: [isEditing ? /*#__PURE__*/_jsx(ActionNameEditor, {
+        value: editing.name,
+        onChange: onChange.editingName,
+        onBlur: onChange.finishEditing,
+        onKeyDown: onChange.editingKeyDown,
+        isDuplicate: isDuplicate
+      }) : /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.5,
+          '&:hover .edit-icon': {
+            opacity: 1
+          }
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontWeight: 500
+          },
+          children: actionKey
+        }), canEdit && /*#__PURE__*/_jsx(IconButton, {
+          className: "edit-icon",
+          size: "small",
+          onClick: onChange.startEditing,
+          sx: {
+            p: 0.25,
+            opacity: 0,
+            transition: 'opacity 0.2s',
+            color: 'text.secondary',
+            '&:hover': {
+              color: 'primary.main',
+              bgcolor: 'transparent'
+            }
+          },
+          children: /*#__PURE__*/_jsx(EditOutlinedIcon, {
+            sx: {
+              fontSize: 16
+            }
+          })
+        })]
+      }), canEdit && /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        onClick: onChange.delete,
+        sx: {
+          ml: 'auto',
+          mr: 1,
+          p: 0.5,
+          color: 'error.main',
+          '&:hover': {
+            bgcolor: 'error.lighter'
+          }
+        },
+        children: /*#__PURE__*/_jsx(DeleteOutlineIcon, {
+          sx: {
+            fontSize: 20
+          }
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(AccordionDetails, {
+      sx: {
+        pt: 0
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          gap: 1,
+          mb: 2
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          color: "text.secondary",
+          sx: {
+            flexShrink: 0
+          },
+          children: "Languages:"
+        }), langs.map(langCode => /*#__PURE__*/_jsx(LanguageChip, {
+          langCode: langCode,
+          isSelected: selectedLang === langCode,
+          canDelete: !requiredLanguages.includes(langCode),
+          onSelect: () => onChange.language(langCode),
+          onDelete: e => onChange.deleteLanguage(langCode, e)
+        }, langCode)), /*#__PURE__*/_jsx(Chip, {
+          label: `${t('common.add')}`,
+          onClick: onChange.addLanguage,
+          size: "small",
+          variant: "outlined",
+          icon: /*#__PURE__*/_jsx(AddIcon, {
+            sx: {
+              fontSize: 16
+            }
+          }),
+          sx: {
+            borderStyle: 'dashed',
+            '&:hover': {
+              bgcolor: 'action.hover'
+            }
+          }
+        })]
+      }), /*#__PURE__*/_jsxs(Stack, {
+        spacing: 2,
+        children: [/*#__PURE__*/_jsx(TextField, {
+          label: "Title",
+          value: langData.title || '',
+          onChange: e => onChange.field('title', e.target.value),
+          fullWidth: true,
+          size: "small"
+        }), /*#__PURE__*/_jsx(TextField, {
+          label: "Scan",
+          value: langData.scan || '',
+          onChange: e => onChange.field('scan', e.target.value),
+          fullWidth: true,
+          size: "small",
+          multiline: true,
+          minRows: 2
+        })]
+      })]
+    })]
+  });
+}
+ActionItem.propTypes = {
+  actionKey: PropTypes.string.isRequired,
+  actionData: PropTypes.object,
+  expanded: PropTypes.bool,
+  selectedLang: PropTypes.string,
+  editing: PropTypes.shape({
+    actionKey: PropTypes.string,
+    name: PropTypes.string,
+    allActions: PropTypes.object
+  }),
+  onChange: PropTypes.shape({
+    accordion: PropTypes.func,
+    language: PropTypes.func,
+    field: PropTypes.func,
+    startEditing: PropTypes.func,
+    editingName: PropTypes.func,
+    finishEditing: PropTypes.func,
+    editingKeyDown: PropTypes.func,
+    delete: PropTypes.func,
+    addLanguage: PropTypes.func,
+    deleteLanguage: PropTypes.func
+  })
+};

package/lib/blocklet/authentication/auth-text/add-language-dialog.js

@@ -0,0 +1,67 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, MenuItem, Select, Typography } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import PropTypes from 'prop-types';
+import { baseLanguages } from '@blocklet/constant';
+import { getLanguageLabel } from './constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function AddLanguageDialog({
+  open,
+  onClose,
+  existingLanguages,
+  selectedLanguage,
+  onLanguageChange,
+  onAdd
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const availableLanguages = baseLanguages.filter(lang => !existingLanguages.includes(lang.code));
+  return /*#__PURE__*/_jsxs(Dialog, {
+    open: open,
+    onClose: onClose,
+    maxWidth: "xs",
+    fullWidth: true,
+    children: [/*#__PURE__*/_jsx(DialogTitle, {
+      children: t('authentication.didConnect.addLanguage')
+    }), /*#__PURE__*/_jsx(DialogContent, {
+      children: /*#__PURE__*/_jsx(FormControl, {
+        fullWidth: true,
+        sx: {
+          mt: 1
+        },
+        children: /*#__PURE__*/_jsx(Select, {
+          value: selectedLanguage,
+          onChange: e => onLanguageChange(e.target.value),
+          displayEmpty: true,
+          size: "small",
+          renderValue: value => value ? getLanguageLabel(value) : /*#__PURE__*/_jsx(Typography, {
+            color: "text.secondary",
+            children: t('authentication.didConnect.selectLanguage')
+          }),
+          children: availableLanguages.map(lang => /*#__PURE__*/_jsx(MenuItem, {
+            value: lang.code,
+            children: lang.name
+          }, lang.code))
+        })
+      })
+    }), /*#__PURE__*/_jsxs(DialogActions, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: onClose,
+        children: t('common.cancel')
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: onAdd,
+        variant: "contained",
+        disabled: !selectedLanguage,
+        children: t('common.add')
+      })]
+    })]
+  });
+}
+AddLanguageDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  existingLanguages: PropTypes.array.isRequired,
+  selectedLanguage: PropTypes.string.isRequired,
+  onLanguageChange: PropTypes.func.isRequired,
+  onAdd: PropTypes.func.isRequired
+};

package/lib/blocklet/authentication/auth-text/constants.js

@@ -0,0 +1,74 @@
+import { baseLanguages } from '@blocklet/constant';
+export const defaultConfig = {
+  login: {
+    en: {
+      title: 'Login',
+      scan: 'Login with one of the following methods',
+      confirm: 'Confirm connection in your DID Wallet',
+      success: 'Successfully logged in'
+    },
+    zh: {
+      title: '登录',
+      scan: '请使用下面的方式完成登录',
+      confirm: '在 DID Wallet 中确认连接',
+      success: '登录成功'
+    }
+  },
+  'switch-profile': {
+    en: {
+      title: 'Switch Profile',
+      scan: 'Use DID Wallet to switch profile',
+      confirm: 'Select profile in your DID Wallet',
+      success: 'Profile updated'
+    },
+    zh: {
+      title: '切换个人信息',
+      scan: '请使用 DID Wallet 来切换个人信息',
+      confirm: '在 DID Wallet 中选择个人信息',
+      success: '个人信息已经更新'
+    }
+  },
+  'switch-passport': {
+    en: {
+      title: 'Switch Passport',
+      scan: 'Use DID Wallet to switch passport',
+      confirm: 'Select passport in your DID Wallet',
+      success: 'Passport and session updated'
+    },
+    zh: {
+      title: '切换通行证',
+      scan: '请使用 DID Wallet 来切换通行证',
+      confirm: '在 DID Wallet 中选择通行证',
+      success: '通行证和会话已经更新'
+    }
+  }
+};
+export const configTemplate = {
+  en: {
+    title: '',
+    scan: '',
+    confirm: '',
+    success: ''
+  },
+  zh: {
+    title: '',
+    scan: '',
+    confirm: '',
+    success: ''
+  }
+};
+export const defaultAction = 'new-action';
+export const defaultActions = Object.keys(defaultConfig);
+export const requiredLanguages = ['zh', 'en'];
+export const isValidActionName = name => /^[a-z][a-z-]*$/.test(name);
+export const getSortedLanguages = langs => {
+  const sorted = [];
+  if (langs.includes('zh')) sorted.push('zh');
+  if (langs.includes('en')) sorted.push('en');
+  langs.filter(lang => !requiredLanguages.includes(lang)).forEach(lang => sorted.push(lang));
+  return sorted;
+};
+export const getLanguageLabel = code => {
+  const lang = baseLanguages.find(l => l.code === code);
+  return lang ? lang.name : code;
+};

package/lib/blocklet/authentication/auth-text/visual-mode.js

@@ -0,0 +1,277 @@
+import { Box, Button, Stack, Typography } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import SaveIcon from '@mui/icons-material/Save';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useMemoizedFn } from 'ahooks';
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { defaultConfig, configTemplate, defaultAction, defaultActions, isValidActionName } from './constants';
+import ActionItem from './action-item';
+import AddLanguageDialog from './add-language-dialog';
+
+// TODO: 先禁用添加新的 action
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const disabledAddAction = true;
+export default function AuthTextVisualMode({
+  open = false,
+  onClose = () => {},
+  onSave = () => {},
+  initialConfig = null
+}) {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const [actions, setActions] = useState({});
+  const [expandedAction, setExpandedAction] = useState('login');
+  const [selectedLanguages, setSelectedLanguages] = useState({});
+  const [addLanguageOpen, setAddLanguageOpen] = useState(false);
+  const [addLanguageAction, setAddLanguageAction] = useState('');
+  const [newLanguage, setNewLanguage] = useState('');
+  const [editingAction, setEditingAction] = useState(null);
+  const [editingName, setEditingName] = useState('');
+  const currentLocale = locale || 'en';
+  useEffect(() => {
+    if (!open) return;
+    const parsedDialogs = initialConfig || defaultConfig;
+    setActions(parsedDialogs);
+    const dialogKeys = Object.keys(parsedDialogs);
+    setExpandedAction(dialogKeys[0] || 'login');
+    const initialSelected = {};
+    dialogKeys.forEach(key => {
+      const langs = Object.keys(parsedDialogs[key] || {});
+      initialSelected[key] = langs.includes(currentLocale) ? currentLocale : langs[0] || 'en';
+    });
+    setSelectedLanguages(initialSelected);
+    setEditingAction(null);
+  }, [open, initialConfig, currentLocale]);
+  const isActionEmpty = useMemoizedFn(actionData => {
+    if (!actionData) return true;
+    return Object.values(actionData).every(langData => !langData?.title?.trim() && !langData?.scan?.trim());
+  });
+  const canAddNewAction = useMemoizedFn(() => {
+    const hasEmpty = Object.keys(actions).some(key => !defaultActions.includes(key) && isActionEmpty(actions[key]));
+    return !hasEmpty && !actions[defaultAction];
+  });
+  const handleAddAction = useMemoizedFn(() => {
+    if (!canAddNewAction()) return;
+    setActions(prev => ({
+      ...prev,
+      [defaultAction]: configTemplate
+    }));
+    setExpandedAction(defaultAction);
+    setSelectedLanguages(prev => ({
+      ...prev,
+      [defaultAction]: currentLocale
+    }));
+    setEditingAction(defaultAction);
+    setEditingName(defaultAction);
+  });
+  const handleEditingNameChange = useMemoizedFn(e => {
+    const {
+      value
+    } = e.target;
+    if (value === '' || /^[a-z-]*$/.test(value)) {
+      setEditingName(value);
+    }
+  });
+  const handleFinishEditing = useMemoizedFn(() => {
+    const newName = editingName.trim();
+    if (!newName || !isValidActionName(newName) || newName !== editingAction && actions[newName]) {
+      setEditingAction(null);
+      return;
+    }
+    if (newName !== editingAction) {
+      const newActions = {};
+      Object.keys(actions).forEach(key => {
+        newActions[key === editingAction ? newName : key] = actions[key];
+      });
+      setActions(newActions);
+      if (expandedAction === editingAction) setExpandedAction(newName);
+      if (selectedLanguages[editingAction]) {
+        setSelectedLanguages(prev => {
+          const updated = {
+            ...prev,
+            [newName]: prev[editingAction]
+          };
+          delete updated[editingAction];
+          return updated;
+        });
+      }
+    }
+    setEditingAction(null);
+  });
+  const handleEditingKeyDown = useMemoizedFn(e => {
+    if (e.key === 'Enter') handleFinishEditing();else if (e.key === 'Escape') setEditingAction(null);
+  });
+  const handleDeleteAction = useMemoizedFn((actionKey, e) => {
+    e.stopPropagation();
+    const newActions = {
+      ...actions
+    };
+    delete newActions[actionKey];
+    setActions(newActions);
+    if (expandedAction === actionKey) {
+      setExpandedAction(Object.keys(newActions)[0] || false);
+    }
+  });
+  const handleAddLanguage = useMemoizedFn(() => {
+    if (!newLanguage || !addLanguageAction) return;
+    setActions(prev => ({
+      ...prev,
+      [addLanguageAction]: {
+        ...prev[addLanguageAction],
+        [newLanguage]: {
+          title: '',
+          scan: '',
+          confirm: '',
+          success: ''
+        }
+      }
+    }));
+    setSelectedLanguages(prev => ({
+      ...prev,
+      [addLanguageAction]: newLanguage
+    }));
+    setAddLanguageOpen(false);
+  });
+  const handleDeleteLanguage = useMemoizedFn((actionKey, langCode, e) => {
+    e.stopPropagation();
+    const actionData = actions[actionKey];
+    const langs = Object.keys(actionData || {});
+    if (langs.length <= 1) return;
+    const newActionData = {
+      ...actionData
+    };
+    delete newActionData[langCode];
+    setActions(prev => ({
+      ...prev,
+      [actionKey]: newActionData
+    }));
+    if (selectedLanguages[actionKey] === langCode) {
+      setSelectedLanguages(prev => ({
+        ...prev,
+        [actionKey]: Object.keys(newActionData)[0] || 'en'
+      }));
+    }
+  });
+  const handleSave = useMemoizedFn(() => {
+    onSave(JSON.stringify(actions));
+    onClose();
+  });
+  const addEnabled = canAddNewAction();
+  const dialogActions = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: onClose,
+      variant: "outlined",
+      children: t('common.cancel')
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: handleSave,
+      variant: "contained",
+      startIcon: /*#__PURE__*/_jsx(SaveIcon, {}),
+      children: t('common.confirm')
+    })]
+  });
+  return /*#__PURE__*/_jsxs(Dialog, {
+    open: open,
+    onClose: onClose,
+    maxWidth: "md",
+    fullWidth: true,
+    title: t('authentication.didConnect.configDialogTitle'),
+    actions: dialogActions,
+    children: [/*#__PURE__*/_jsxs(Stack, {
+      spacing: 1.5,
+      children: [Object.keys(actions).map(actionKey => {
+        const actionData = actions[actionKey] || {};
+        const langs = Object.keys(actionData);
+        const selectedLang = selectedLanguages[actionKey] || langs[0] || 'en';
+        return /*#__PURE__*/_jsx(ActionItem, {
+          actionKey: actionKey,
+          actionData: actionData,
+          expanded: expandedAction === actionKey,
+          selectedLang: selectedLang,
+          editing: {
+            actionKey: editingAction,
+            name: editingName,
+            allActions: actions
+          },
+          onChange: {
+            accordion: isExpanded => setExpandedAction(isExpanded ? actionKey : false),
+            language: langCode => setSelectedLanguages(prev => ({
+              ...prev,
+              [actionKey]: langCode
+            })),
+            field: (field, value) => setActions(prev => ({
+              ...prev,
+              [actionKey]: {
+                ...prev[actionKey],
+                [selectedLang]: {
+                  ...prev[actionKey]?.[selectedLang],
+                  [field]: value
+                }
+              }
+            })),
+            startEditing: e => {
+              e.stopPropagation();
+              setEditingAction(actionKey);
+              setEditingName(actionKey);
+            },
+            editingName: handleEditingNameChange,
+            finishEditing: handleFinishEditing,
+            editingKeyDown: handleEditingKeyDown,
+            delete: e => handleDeleteAction(actionKey, e),
+            addLanguage: e => {
+              e.stopPropagation();
+              setAddLanguageAction(actionKey);
+              setNewLanguage('');
+              setAddLanguageOpen(true);
+            },
+            deleteLanguage: (langCode, e) => handleDeleteLanguage(actionKey, langCode, e)
+          }
+        }, actionKey);
+      }), !disabledAddAction && /*#__PURE__*/_jsxs(Box, {
+        onClick: addEnabled ? handleAddAction : undefined,
+        sx: {
+          border: '2px dashed',
+          borderColor: addEnabled ? 'grey.300' : 'grey.200',
+          borderRadius: 2,
+          py: 1.5,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: addEnabled ? 'pointer' : 'not-allowed',
+          color: addEnabled ? 'text.secondary' : 'text.disabled',
+          transition: 'all 0.2s',
+          ...(addEnabled && {
+            '&:hover': {
+              borderColor: 'primary.main',
+              color: 'primary.main',
+              bgcolor: 'primary.lighter'
+            }
+          })
+        },
+        children: [/*#__PURE__*/_jsx(AddIcon, {
+          sx: {
+            mr: 0.5
+          }
+        }), /*#__PURE__*/_jsx(Typography, {
+          children: t('authentication.didConnect.addNewAction')
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(AddLanguageDialog, {
+      open: addLanguageOpen,
+      onClose: () => setAddLanguageOpen(false),
+      existingLanguages: Object.keys(actions[addLanguageAction] || {}),
+      selectedLanguage: newLanguage,
+      onLanguageChange: setNewLanguage,
+      onAdd: handleAddLanguage
+    })]
+  });
+}
+AuthTextVisualMode.propTypes = {
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+  onSave: PropTypes.func,
+  initialConfig: PropTypes.object
+};