payment-kit 1.18.18 → 1.18.19

package/src/pages/admin/products/products/detail.tsx

@@ -11,7 +11,6 @@ import {
   Button,
   CircularProgress,
   Divider,
-  Grid,
   Stack,
   Tooltip,
   Typography,
@@ -25,6 +24,7 @@ import Copyable from '../../../../components/copyable';
 import EventList from '../../../../components/event/list';
 import InfoMetric from '../../../../components/info-metric';
 import InfoRow from '../../../../components/info-row';
+import InfoRowGroup from '../../../../components/info-row-group';
 import MetadataEditor from '../../../../components/metadata/editor';
 import MetadataList from '../../../../components/metadata/list';
 import ProductActions from '../../../../components/product/actions';
@@ -39,9 +39,6 @@ const getProduct = (id: string): Promise<TProductExpanded> => {
   return api.get(`/api/products/${id}`).then((res) => res.data);
 };
 
-const InfoDirection = 'column';
-const InfoAlignItems = 'flex-start';
-
 export default function ProductDetail(props: { id: string }) {
   const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
@@ -212,6 +209,7 @@ export default function ProductDetail(props: { id: string }) {
               },
             }}>
             <InfoMetric label={t('common.id')} value={<Copyable text={props.id} style={{ marginLeft: 4 }} />} divider />
+            <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
           </Stack>
         </Box>
         <Divider />
@@ -246,7 +244,7 @@ export default function ProductDetail(props: { id: string }) {
           },
         }}>
         <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
-          <Box className="section">
+          <Box className="section" sx={{ containerType: 'inline-size' }}>
             <SectionHeader title={t('admin.details')}>
               <Button
                 variant="text"
@@ -257,83 +255,56 @@ export default function ProductDetail(props: { id: string }) {
                 {t('common.edit')}
               </Button>
             </SectionHeader>
-            <Grid className="section-body" container>
-              <Grid
-                item
-                xs={12}
-                sx={{
-                  display: 'grid',
-                  gridTemplateColumns: {
-                    xs: 'repeat(1, 1fr)',
-                    sm: 'repeat(1, 1fr)',
-                    md: 'repeat(2, 1fr)',
-                    lg: 'repeat(3, 1fr)',
+            <InfoRowGroup
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: {
+                  xs: 'repeat(1, 1fr)',
+                  xl: 'repeat(2, 1fr)',
+                },
+                '@container (min-width: 1000px)': {
+                  gridTemplateColumns: 'repeat(2, 1fr)',
+                },
+                '.info-row-wrapper': {
+                  gap: 1,
+                  flexDirection: {
+                    xs: 'column',
+                    xl: 'row',
                   },
-                  gap: {
-                    xs: 0,
-                    md: 2,
+                  alignItems: {
+                    xs: 'flex-start',
+                    xl: 'center',
                   },
-                }}>
-                <InfoRow
-                  label={t('admin.product.name.label')}
-                  value={data.name}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-                <InfoRow
-                  label={t('admin.product.description.label')}
-                  value={data.description}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-                <InfoRow
-                  label={t('admin.product.statement_descriptor.label')}
-                  value={data.statement_descriptor}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-                <InfoRow
-                  label={t('admin.product.unit_label.label')}
-                  value={data.unit_label}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-                <InfoRow
-                  label={t('admin.product.features.label')}
-                  value={data.features.map((x) => x.name).join(',')}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-                <InfoRow
-                  label={t('common.createdAt')}
-                  value={formatTime(data.created_at)}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-                <InfoRow
-                  label={t('common.updatedAt')}
-                  value={formatTime(data.updated_at)}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-                <InfoRow
-                  label={t('admin.product.image.label')}
-                  value={
-                    data.images.length ? (
-                      <Avatar
-                        src={data.images[0]}
-                        alt={data.name}
-                        variant="square"
-                        sx={{ width: '160px', height: '160px' }}
-                      />
-                    ) : (
-                      t('empty.image')
-                    )
-                  }
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-              </Grid>
+                  '@container (min-width: 1000px)': {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                  },
+                },
+              }}>
+              <InfoRow label={t('admin.product.name.label')} value={data.name} />
+
+              <InfoRow label={t('admin.product.description.label')} value={data.description} />
+              <InfoRow label={t('admin.product.statement_descriptor.label')} value={data.statement_descriptor} />
+              <InfoRow label={t('admin.product.unit_label.label')} value={data.unit_label} />
+              <InfoRow label={t('admin.product.features.label')} value={data.features.map((x) => x.name).join(',')} />
+              <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+              <InfoRow
+                label={t('admin.product.image.label')}
+                value={
+                  data.images.length ? (
+                    <Avatar
+                      src={data.images[0]}
+                      alt={data.name}
+                      variant="square"
+                      sx={{ width: '160px', height: '160px' }}
+                    />
+                  ) : (
+                    <Typography variant="body2" color="text.lighter">
+                      {t('empty.image')}
+                    </Typography>
+                  )
+                }
+              />
               {state.editing.product && (
                 <EditProduct
                   product={data}
@@ -342,7 +313,7 @@ export default function ProductDetail(props: { id: string }) {
                   onCancel={() => setState((prev) => ({ editing: { ...prev.editing, product: false } }))}
                 />
               )}
-            </Grid>
+            </InfoRowGroup>
           </Box>
           <Divider />
           <Box className="section">

package/src/pages/customer/index.tsx

@@ -78,11 +78,7 @@ const CurrencyCard = memo(
     const method = settings?.paymentMethods?.find((m) => m.id === currency.payment_method_id);
     const { t } = useLocaleContext();
     const safeData = data || {};
-    const value = formatBNStr(safeData[currency?.id], currency?.decimal, 6, false);
-    const hideTypes = ['stake', 'refund', 'due'];
-    if (hideTypes.includes(type) && (!safeData[currency?.id] || safeData[currency?.id] === '0')) {
-      return null;
-    }
+    const value = formatBNStr(safeData[currency?.id], currency?.decimal, 6, true);
 
     const handleCardClick = () => {
       if (type === 'balance' && currency?.id) {
@@ -95,7 +91,11 @@ const CurrencyCard = memo(
         sx={{
           transition: 'all 0.2s ease-in-out',
           position: 'relative',
-          borderRight: '1px solid var(--stroke-border-base, #EFF1F5)',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          containerType: 'inline-size',
         }}>
         <Typography
           variant="body1"
@@ -126,8 +126,20 @@ const CurrencyCard = memo(
                 '&:hover': {
                   color: 'text.link',
                 },
+                '.recharge-title': {
+                  '@container (max-width: 230px)': {
+                    display: 'none',
+                  },
+                  '@container (min-width: 231px)': {
+                    display: 'inline-block',
+                  },
+                },
               }}>
               <AddOutlined fontSize="small" />
+
+              <Typography variant="body2" className="recharge-title">
+                {t('customer.recharge.title')}
+              </Typography>
             </Box>
           </Tooltip>
         )}
@@ -156,11 +168,73 @@ function SummaryCardSkeleton() {
   );
 }
 
+function isSummaryEmpty(summary: any, id: string) {
+  const summaryKeys = ['balance', 'paid', 'stake', 'refund', 'due'];
+  return summaryKeys.every((key) => !summary?.[key]?.[id] || summary?.[key]?.[id] === '0');
+}
+
+// 定义卡片类型
+type CardType = 'balance' | 'spent' | 'stake' | 'refund' | 'due';
+
+// 定义一个统一的卡片配置
+const CARD_CONFIG: Record<CardType, { key: keyof typeof summaryKeyMap; alwaysShow?: boolean }> = {
+  balance: { key: 'token', alwaysShow: true },
+  spent: { key: 'paid', alwaysShow: true },
+  stake: { key: 'stake' },
+  refund: { key: 'refund' },
+  due: { key: 'due' },
+} as const;
+
+// 映射 summary 中的键名
+const summaryKeyMap = {
+  token: 'token',
+  paid: 'paid',
+  stake: 'stake',
+  refund: 'refund',
+  due: 'due',
+} as const;
+
+// 优化后的计算函数
+const getCardVisibility = (currency: any, data: any) => {
+  return Object.entries(CARD_CONFIG).reduce(
+    (acc, [type, config]) => {
+      const summaryKey = config.key;
+      const isVisible =
+        config.alwaysShow ||
+        (data?.summary?.[summaryKey]?.[currency.id] && data?.summary?.[summaryKey]?.[currency.id] !== '0');
+
+      if (isVisible) {
+        acc.visibleCards.push(type as CardType);
+      }
+      return acc;
+    },
+    { visibleCards: [] as CardType[] }
+  );
+};
+
+// 计算最大卡片数量
+const calculateMaxCardCount = (currencies: any[], data: any) => {
+  return currencies.reduce((maxCount, currency) => {
+    const { visibleCards } = getCardVisibility(currency, data);
+    return Math.max(maxCount, visibleCards.length);
+  }, 0);
+};
+
+const getCardIcon = (type: CardType) => {
+  const iconMap = {
+    balance: <AccountBalanceWalletOutlined color="success" fontSize="small" />,
+    spent: <CreditCardOutlined color="warning" fontSize="small" />,
+    stake: <AccountBalanceOutlined fontSize="small" color="info" />,
+    refund: <AssignmentReturnOutlined fontSize="small" sx={{ color: 'var(--tags-tag-purple-icon, #7c3aed)' }} />,
+    due: <InfoOutlined fontSize="small" color="error" />,
+  };
+  return iconMap[type];
+};
+
 export default function CustomerHome() {
   const { t } = useLocaleContext();
   const { events } = useSessionContext();
   const { settings } = usePaymentContext();
-  const [currency, setCurrency] = useState(settings?.baseCurrency);
   const [subscriptionLoading, setSubscriptionLoading] = useState(false);
   const currencies = flatten(
     settings.paymentMethods?.map((method) =>
@@ -250,10 +324,6 @@ export default function CustomerHome() {
       setSubscriptionLoading(false);
     }, 300);
   };
-  const handleCurrencyChange = (e: SelectChangeEvent) => {
-    const newCurrency = currencies.find((c) => c.id === e.target.value) || settings?.baseCurrency;
-    setCurrency(newCurrency);
-  };
 
   const SubscriptionCard =
     loadingCard || !hasSubscriptions ? null : (
@@ -308,6 +378,14 @@ export default function CustomerHome() {
       </Box>
     );
 
+  const maxCardCount = calculateMaxCardCount(currencies, data);
+
+  const responsiveColumns = {
+    xs: Math.min(2, maxCardCount),
+    sm: Math.min(3, maxCardCount),
+    md: maxCardCount,
+  };
+
   const SummaryCard = loadingCard ? (
     <SummaryCardSkeleton />
   ) : (
@@ -316,104 +394,101 @@ export default function CustomerHome() {
         <>
           <Box className="section-header">
             <Typography variant="h3">{t('admin.customer.summary.stats')}</Typography>
-            <FormControl
-              sx={{
-                '.MuiInputBase-root': {
-                  background: 'none',
-                  border: 'none',
-                },
-                '.MuiOutlinedInput-notchedOutline': {
-                  border: 'none',
-                },
-              }}>
-              <Select
-                value={currency?.id}
-                onChange={handleCurrencyChange}
-                displayEmpty
-                IconComponent={ExpandMore}
-                inputProps={{ 'aria-label': 'Without label' }}>
-                {currencies.map((c) => (
-                  <MenuItem key={c.id} value={c.id}>
-                    <Box alignItems="center" display="flex" gap={1}>
-                      <Avatar src={c?.logo} alt={c?.symbol} sx={{ width: 18, height: 18 }} />
-                      <Typography
-                        variant="h5"
-                        component="div"
-                        sx={{ fontSize: '16px', color: 'text.primary', fontWeight: '500' }}>
-                        {c?.symbol}
-                      </Typography>
-                      <Typography sx={{ fontSize: 12 }} color="text.lighter">
-                        {c?.methodName}
-                      </Typography>
-                    </Box>
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
           </Box>
-          <Stack
-            className="section-body"
-            flexDirection="row"
-            sx={{
-              gap: 3,
-              mt: 1.5,
-              flexWrap: 'wrap',
-              position: 'relative',
-              '>div': {
-                flex: '1',
-                '@media (max-width: 1100px)': {
-                  flex: '0 0 calc(50% - 12px)',
-                  maxWidth: 'calc(50% - 12px)',
-                },
-              },
-              '&::after': {
-                content: '""',
-                position: 'absolute',
-                right: 0,
-                top: 0,
-                bottom: 0,
-                width: '1px',
-                backgroundColor: 'background.paper',
-                zIndex: 1,
-              },
-            }}>
-            <CurrencyCard
-              label={t('admin.customer.summary.balance')}
-              data={data?.summary?.token || emptyObject}
-              currency={currency}
-              type="balance"
-              icon={<AccountBalanceWalletOutlined color="success" fontSize="small" />}
-            />
-            <CurrencyCard
-              label={t('admin.customer.summary.spent')}
-              data={data?.summary?.paid || emptyObject}
-              currency={currency}
-              type="spent"
-              icon={<CreditCardOutlined color="warning" fontSize="small" />}
-            />
-            <CurrencyCard
-              label={t('admin.customer.summary.stake')}
-              data={data?.summary?.stake || emptyObject}
-              currency={currency}
-              type="stake"
-              icon={<AccountBalanceOutlined fontSize="small" color="info" />}
-            />
-            <CurrencyCard
-              label={t('admin.customer.summary.refund')}
-              data={data?.summary?.refund || emptyObject}
-              currency={currency}
-              type="refund"
-              icon={
-                <AssignmentReturnOutlined fontSize="small" sx={{ color: 'var(--tags-tag-purple-icon, #7c3aed)' }} />
-              }
-            />
-            <CurrencyCard
-              label={t('admin.customer.summary.due')}
-              data={data?.summary?.due || emptyObject}
-              currency={currency}
-              type="due"
-              icon={<InfoOutlined fontSize="small" color="error" />}
-            />
+          <Stack gap={2} mt={2}>
+            {currencies.map((c) => {
+              return isSummaryEmpty(data?.summary, c.id) && c.id !== settings.baseCurrency.id ? null : (
+                <Stack
+                  key={c.id}
+                  sx={{
+                    pb: 2,
+                    borderBottom: '1px solid var(--stroke-border-base, #EFF1F5)',
+                    '&:last-child': { borderBottom: 'none', pb: 0 },
+                  }}>
+                  <Box alignItems="center" display="flex" gap={1}>
+                    <Avatar src={c?.logo} alt={c?.symbol} sx={{ width: 18, height: 18 }} />
+                    <Typography
+                      variant="h5"
+                      component="div"
+                      sx={{ fontSize: '16px', color: 'text.primary', fontWeight: '500' }}>
+                      {c?.symbol}
+                    </Typography>
+                    <Typography sx={{ fontSize: 12 }} color="text.lighter">
+                      {c?.methodName}
+                    </Typography>
+                  </Box>
+                  <Stack
+                    className="section-body"
+                    flexDirection="row"
+                    sx={{
+                      gap: 3,
+                      mt: 1.5,
+                      flexWrap: 'wrap',
+                      position: 'relative',
+                      display: 'grid',
+                      gridTemplateColumns: {
+                        xs: `repeat(${responsiveColumns.xs}, 1fr)`,
+                        sm: `repeat(${responsiveColumns.sm}, 1fr)`,
+                        md: `repeat(${responsiveColumns.md}, 1fr)`,
+                      },
+                      '&::after': {
+                        content: '""',
+                        position: 'absolute',
+                        right: 0,
+                        top: 0,
+                        bottom: 0,
+                        width: '1px',
+                        backgroundColor: 'background.paper',
+                        zIndex: 1,
+                      },
+                    }}>
+                    {/* 使用配置渲染卡片 */}
+                    {Object.entries(CARD_CONFIG).map(([type, config]) => {
+                      const summaryKey = config.key;
+                      const isVisible =
+                        config.alwaysShow ||
+                        (data?.summary?.[summaryKey]?.[c.id] && data?.summary?.[summaryKey]?.[c.id] !== '0');
+
+                      if (!isVisible) return null;
+
+                      return (
+                        <Box
+                          key={`card-${c.id}-${type}`}
+                          className="card-item"
+                          sx={{
+                            position: 'relative',
+                            '&::after': {
+                              content: '""',
+                              position: 'absolute',
+                              right: 0,
+                              top: 0,
+                              bottom: 0,
+                              width: '1px',
+                              backgroundColor: 'var(--stroke-border-base, #EFF1F5)',
+                              zIndex: 1,
+                            },
+
+                            '&:has(+ .placeholder)::after': {
+                              display: 'none',
+                            },
+                            '&:last-child::after': {
+                              display: 'none',
+                            },
+                          }}>
+                          <CurrencyCard
+                            label={t(`admin.customer.summary.${type}`)}
+                            data={data?.summary?.[summaryKey] || emptyObject}
+                            currency={c}
+                            type={type as CardType}
+                            icon={getCardIcon(type as CardType)}
+                          />
+                        </Box>
+                      );
+                    })}
+                  </Stack>
+                </Stack>
+              );
+            })}
           </Stack>
         </>
       )}