@abtnode/ux 1.17.8-beta-20260106-113136-b3c09e14 → 1.17.8-beta-20260108-120904-21cb5fb6

package/lib/blocklet/aigne-config/components/credit.js

@@ -2,12 +2,14 @@
 import { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Skeleton, Box, Typography, Tooltip, keyframes } from '@mui/material';
+import { useCreation } from 'ahooks';
 import { Icon } from '@iconify/react';
 import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+// eslint-disable-next-line import/no-unresolved
+import { formatNumber } from '@blocklet/aigne-hub/utils/util';
 import CachedIcon from '@mui/icons-material/Cached';
 import { withQuery } from 'ufo';
 import { CardWrapper, ButtonWrapper } from './basic';
-import { formatAmount } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function CreditCard({
   loading = false,
@@ -35,14 +37,20 @@ export default function CreditCard({
   const isDeficit = useMemo(() => {
     return Number(credit?.creditBalance?.balance) <= 0 && Number(credit?.creditBalance?.pendingCredit) > 0;
   }, [credit]);
-  if (!credit && !loading) {
-    return null;
-  }
   const {
     creditBalance,
     profileLink = '',
-    paymentLink = ''
+    paymentLink = '',
+    creditPrefix = ''
   } = credit || {};
+  const creditValue = useCreation(() => {
+    const formattedBalance = formatNumber(creditBalance?.balance ?? 0);
+    const displayValue = creditPrefix ? `${creditPrefix} ${formattedBalance}` : formattedBalance;
+    return isDeficit ? `- ${displayValue}` : displayValue;
+  }, [isDeficit, creditPrefix, creditBalance?.balance]);
+  if (!credit && !loading) {
+    return null;
+  }
   return /*#__PURE__*/_jsx(CardWrapper, {
     children: loading ? /*#__PURE__*/_jsxs(Box, {
       sx: {
@@ -117,9 +125,7 @@ export default function CreditCard({
           sx: {
             color: !isSelfHost && isDeficit ? 'error.main' : 'text.primary'
           },
-          children: [/*#__PURE__*/_jsx("span", {
-            children: isSelfHost ? t('setting.aigne.infinite') : isDeficit ? `- ${formatAmount(creditBalance?.pendingCredit)}` : formatAmount(creditBalance.balance)
-          }), !isSelfHost ? /*#__PURE__*/_jsx(Tooltip, {
+          children: [isSelfHost ? t('setting.aigne.infinite') : creditValue, !isSelfHost ? /*#__PURE__*/_jsx(Tooltip, {
             title: t('common.refresh'),
             children: /*#__PURE__*/_jsx(CachedIcon, {
               sx: {

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;
+};