payment-kit 1.20.5 → 1.20.6

package/src/locales/zh.tsx

@@ -39,6 +39,7 @@ export default flat({
     advancedFeatures: '高级功能',
     quickStarts: '快速入门',
     copy: '复制',
+    copied: '已复制',
     copySuccess: '复制成功',
     copyFailed: '复制失败',
     copyTip: '请手动复制',
@@ -97,6 +98,13 @@ export default flat({
     overview: '总览',
     payments: '支付管理',
     connections: '连接',
+    back: '返回',
+    actions: '操作',
+    create: '创建',
+    creating: '创建中...',
+    save: '保存',
+    saving: '保存中...',
+    cancel: '取消',
     paymentLinks: '支付链接',
     paymentMethods: '支付方式',
     customers: '客户管理',
@@ -104,6 +112,7 @@ export default flat({
     coupons: '优惠券',
     pricing: '定价',
     pricingTables: '定价表',
+    vendors: '供应商',
     billing: '订阅和账单',
     invoices: '账单',
     subscriptions: '订阅',
@@ -392,6 +401,25 @@ export default flat({
         credit: 'Credit',
         good: '商品',
       },
+      vendorConfig: {
+        title: '供应商配置',
+        add: '添加供应商',
+        empty: '未配置供应商。点击"添加供应商"来配置供应商服务。',
+        vendor: '供应商',
+        vendorRequired: '供应商是必填项',
+        productCode: '产品代码',
+        productCodeRequired: '产品代码是必填项',
+        commissionType: '分成类型',
+        commissionRate: '分成比例',
+        commissionRateRequired: '分成比例是必填项',
+        commissionRateMin: '分成比例必须大于或等于0',
+        commissionRateMax: '分成比例不能超过100%',
+        amount: '固定金额',
+        noVendor: '无供应商可选',
+        amountRequired: '固定金额是必填项',
+        totalCommission: '总分成比例：{total}%',
+        totalCommissionExceeded: '总分成比例超过100%：{total}%',
+      },
     },
     price: {
       name: '价格',
@@ -813,6 +841,67 @@ export default flat({
         success: '账单作废成功',
       },
     },
+    vendor: {
+      create: '创建供应商',
+      edit: '编辑供应商',
+      delete: '删除供应商',
+      save: '保存供应商',
+      saved: '供应商保存成功',
+      test: '测试',
+      testConnection: '测试连接',
+      testSuccess: '连接测试成功',
+      testAfterSave: '供应商保存成功。您可以测试连接以验证配置是否正确。',
+      testToEnable: '供应商保存成功。请测试连接以启用供应商。',
+      enabled: '已启用',
+      disabled: '未启用',
+      addressCheckFailed: '地址检测失败，启用状态下无法保存',
+      updateSuccess: '供应商更新成功',
+      testFailed: '连接测试失败 (状态码: {status})',
+      testError: '连接测试失败 - 网络错误',
+      vendorKeyInvalid: '供应商类型只能包含小写字母、数字和下划线',
+      deleteTitle: '删除供应商',
+      deleteContent: '确定要删除供应商 "{name}" 吗？此操作无法撤销。',
+      deleteTip: '确定要删除供应商 "{name}" 吗？此操作无法撤销。',
+      activate: '激活供应商',
+      activateTip: '确定要激活供应商 "{name}" 吗？',
+      deactivate: '停用供应商',
+      deactivateTip: '确定要停用供应商 "{name}" 吗？',
+      name: '供应商名称',
+      nameRequired: '供应商名称是必填项',
+      vendorKey: '供应商类型',
+      vendorKeyRequired: '供应商类型是必填项',
+      vendorKeyHelp: '供应商的唯一标识符（如：launcher、did_names）',
+      description: '描述',
+      appUrl: '应用地址',
+      appUrlRequired: '应用地址是必填项',
+      appUrlInvalid: '请输入以http://或https://开头的有效URL',
+      appUrlHelp: '供应商应用的基础URL',
+      webhookPath: 'Webhook路径',
+      webhookPathInvalid: '请输入以/开头的有效路径',
+      webhookPathHelp: '可选的webhook回调路径（如：/webhooks/status）',
+      blockletMetaUrl: 'Blocklet元数据URL',
+      blockletMetaUrlRequired: 'Blocklet元数据URL是必填项',
+      blockletMetaUrlInvalid: '请输入有效的URL，以http://或https://开头',
+      blockletMetaUrlHelp: '必填的blocklet元数据URL，用于获取应用信息',
+      commission: '分成',
+      commissionRate: '分成比例',
+      commissionRateRequired: '分成比例是必填项',
+      commissionRateMin: '分成比例必须大于或等于0',
+      commissionRateMax: '分成比例过高',
+      commissionType: '分成类型',
+      commissionRateHelp: '分成比例，以百分比形式',
+      commissionAmountHelp: '固定分成金额',
+      percentage: '百分比',
+      fixedAmount: '固定金额',
+      active: '启用',
+      inactive: '禁用',
+      basicInfo: '基本信息',
+      apiConfig: 'API配置',
+      commissionConfig: '分成配置',
+      status: '状态',
+      servicePublicKey: '服务公钥',
+      servicePublicKeyDescription: '用于供应商通信认证',
+    },
     subscription: {
       view: '查看订阅',
       name: '订阅',

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

@@ -13,12 +13,14 @@ const PaymentLinkCreate = React.lazy(() => import('./links/create'));
 const PaymentLinkDetail = React.lazy(() => import('./links/detail'));
 const PricingTableCreate = React.lazy(() => import('./pricing-tables/create'));
 const PricingTableDetail = React.lazy(() => import('./pricing-tables/detail'));
+const VendorCreate = React.lazy(() => import('./vendors/create'));
 
 const pages = {
   products: React.lazy(() => import('./products')),
   links: React.lazy(() => import('./links')),
   'pricing-tables': React.lazy(() => import('./pricing-tables')),
   passports: React.lazy(() => import('./passports')),
+  vendors: React.lazy(() => import('./vendors')),
   // coupons: React.lazy(() => import('./coupons')),
 };
 
@@ -47,11 +49,17 @@ export default function Products() {
 
   // @ts-ignore
   const TabComponent = pages[page] || pages.products;
+
+  if (page.startsWith('pv_')) {
+    // 供应商详情页面暂时跳转到列表
+    return <TabComponent />;
+  }
   const tabs = [
     { label: t('admin.products'), value: 'products' },
     { label: t('admin.paymentLinks'), value: 'links' },
     { label: t('admin.pricingTables'), value: 'pricing-tables' },
     { label: t('admin.passports'), value: 'passports' },
+    { label: t('admin.vendors'), value: 'vendors' },
     // { label: t('admin.coupons'), value: 'coupons' },
   ];
 
@@ -62,6 +70,8 @@ export default function Products() {
     extra = <PaymentLinkCreate />;
   } else if (page === 'pricing-tables') {
     extra = <PricingTableCreate />;
+  } else if (page === 'vendors') {
+    extra = <VendorCreate open={createProduct} onClose={() => setCreateProduct(false)} />;
   }
 
   return (
@@ -105,7 +115,7 @@ export default function Products() {
             },
           }}
         />
-        <Box> {extra}</Box>
+        <Box>{extra}</Box>
       </Stack>
       {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
     </>

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

@@ -37,7 +37,7 @@ import { formatProductPrice, goBackOrFallback } from '../../../../libs/util';
 import PricesList from '../prices/list';
 
 const getProduct = (id: string): Promise<TProductExpanded> => {
-  return api.get(`/api/products/${id}`).then((res) => res.data);
+  return api.get(`/api/products/${id}`).then((res: any) => res.data);
 };
 
 export default function ProductDetail(props: { id: string }) {
@@ -77,7 +77,7 @@ export default function ProductDetail(props: { id: string }) {
   const createProductUpdater = (key: string) => async (updates: TProduct) => {
     try {
       setState((prev) => ({ loading: { ...prev.loading, [key]: true } }));
-      await api.put(`/api/products/${props.id}`, updates).then((res) => res.data);
+      await api.put(`/api/products/${props.id}`, updates).then((res: any) => res.data);
       Toast.success(t('common.saved'));
       dispatch('product.updated');
       runAsync();
@@ -389,6 +389,83 @@ export default function ProductDetail(props: { id: string }) {
             </Box>
           </Box>
           <Divider />
+          {/* 供应商配置展示 */}
+          {data.type === 'service' && (
+            <>
+              <Box className="section">
+                <SectionHeader title={t('admin.product.vendorConfig.title')}>
+                  <Button
+                    variant="text"
+                    color="inherit"
+                    size="small"
+                    sx={{ color: 'text.link' }}
+                    onClick={() => setState((prev) => ({ editing: { ...prev.editing, product: true } }))}>
+                    {t('common.edit')}
+                  </Button>
+                </SectionHeader>
+                <Box className="section-body">
+                  {data.vendor_config && data.vendor_config.length > 0 ? (
+                    <Stack spacing={2}>
+                      {/* 总分成比例信息 */}
+                      {(() => {
+                        const totalPercentage = data.vendor_config
+                          .filter((v: any) => v.commission_type === 'percentage')
+                          .reduce((sum: number, v: any) => sum + (v.commission_rate || 0), 0);
+
+                        return (
+                          <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
+                            {t('admin.product.vendorConfig.totalCommission', {
+                              total: totalPercentage.toFixed(0),
+                            })}
+                          </Typography>
+                        );
+                      })()}
+                      {data.vendor_config.map((vendor: any) => (
+                        <Box
+                          key={`vendor-${vendor.vendor_id}`}
+                          sx={{
+                            p: 2,
+                            border: '1px solid',
+                            borderColor: 'divider',
+                            borderRadius: 1,
+                            backgroundColor: 'background.paper',
+                          }}>
+                          <Stack direction="row" justifyContent="space-between" alignItems="center">
+                            <Box>
+                              <Typography variant="body1" sx={{ color: 'text.primary', fontWeight: 500 }}>
+                                {vendor.name || vendor.vendor_key || vendor.vendor_id}
+                              </Typography>
+                              {vendor.description && (
+                                <Typography variant="body2" sx={{ color: 'text.secondary', mt: 0.5 }}>
+                                  {vendor.description}
+                                </Typography>
+                              )}
+                            </Box>
+                            <Stack direction="row" spacing={3} alignItems="center">
+                              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                                {vendor.commission_type === 'percentage'
+                                  ? t('admin.vendor.percentage')
+                                  : t('admin.vendor.fixedAmount')}
+                              </Typography>
+                              <Typography variant="body1" sx={{ color: 'text.primary', fontWeight: 600 }}>
+                                {vendor.commission_rate}
+                                {vendor.commission_type === 'percentage' ? '%' : ''}
+                              </Typography>
+                            </Stack>
+                          </Stack>
+                        </Box>
+                      ))}
+                    </Stack>
+                  ) : (
+                    <Typography variant="body2" sx={{ color: 'text.secondary', textAlign: 'center', py: 2 }}>
+                      {t('admin.product.vendorConfig.empty')}
+                    </Typography>
+                  )}
+                </Box>
+              </Box>
+              <Divider />
+            </>
+          )}
           <Box className="section">
             <SectionHeader title={t('admin.events.title')} />
             <Box className="section-body">

package/src/pages/admin/products/vendors/create.tsx

@@ -0,0 +1,418 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { api, formatError } from '@blocklet/payment-react';
+import { AddOutlined } from '@mui/icons-material';
+import {
+  Button,
+  CircularProgress,
+  Stack,
+  TextField,
+  FormControlLabel,
+  Switch,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+} from '@mui/material';
+import { useState } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { dispatch } from 'use-bus';
+
+import { joinURL, withQuery } from 'ufo';
+import DrawerForm from '../../../../components/drawer-form';
+import { formatProxyUrl } from '../../../../libs/util';
+
+interface Vendor {
+  id: string;
+  vendor_key: string;
+  name: string;
+  description: string;
+  app_url: string;
+  webhook_path: string;
+  default_commission_rate: number;
+  default_commission_type: 'percentage' | 'fixed_amount';
+  status: 'active' | 'inactive';
+  order_create_params: Record<string, any>;
+  metadata: Record<string, any>;
+  created_at: string;
+  updated_at: string;
+}
+
+interface VendorCreateProps {
+  open?: boolean;
+  onClose?: () => void;
+  onSubmit?: () => void;
+  vendorData?: Vendor;
+}
+
+interface VendorFormData {
+  vendor_key: string;
+  name: string;
+  description: string;
+  app_url: string;
+  webhook_path: string;
+  blocklet_meta_url: string;
+  default_commission_rate: number;
+  default_commission_type: 'percentage' | 'fixed_amount';
+  status: 'active' | 'inactive';
+  order_create_params: Record<string, any>;
+  metadata: Record<string, any>;
+  app_pid?: string;
+  app_logo?: string;
+}
+
+export default function VendorCreate({
+  open = true,
+  onClose = () => {},
+  onSubmit: onSubmitCallback = () => {},
+  vendorData = undefined,
+}: VendorCreateProps) {
+  const { t } = useLocaleContext();
+  const [loading, setLoading] = useState(false);
+
+  const isEditMode = !!vendorData;
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors, isValid },
+    watch,
+  } = useForm<VendorFormData>({
+    mode: 'onChange',
+    defaultValues: vendorData
+      ? {
+          ...vendorData,
+          default_commission_rate: vendorData.default_commission_rate,
+          blocklet_meta_url: vendorData.metadata?.blockletMetaUrl || '',
+        }
+      : {
+          vendor_key: '',
+          name: '',
+          description: '',
+          app_url: '',
+          webhook_path: '',
+          blocklet_meta_url: '',
+          default_commission_rate: 80,
+          default_commission_type: 'percentage',
+          status: 'inactive',
+          order_create_params: {},
+          metadata: {},
+          app_pid: '',
+          app_logo: '',
+        },
+  });
+
+  const watchedValues = watch();
+
+  const isPercentage = watchedValues.default_commission_type === 'percentage';
+
+  const validateUrl = (url: string) => {
+    if (!url) return t('admin.vendor.appUrlRequired');
+    try {
+      // eslint-disable-next-line no-new
+      new URL(url);
+      return true;
+    } catch {
+      return t('admin.vendor.appUrlInvalid');
+    }
+  };
+
+  const validateWebhookPath = (path: string) => {
+    if (!path) return true;
+    if (!path.startsWith('/')) {
+      return t('admin.vendor.webhookPathInvalid');
+    }
+    return true;
+  };
+
+  const validateBlockletMetaUrl = (url: string) => {
+    if (!url) return t('admin.vendor.blockletMetaUrlRequired'); // 必填字段
+    try {
+      // eslint-disable-next-line no-new
+      new URL(url);
+      return true;
+    } catch {
+      return t('admin.vendor.blockletMetaUrlInvalid');
+    }
+  };
+
+  const onSubmit = async (data: VendorFormData) => {
+    try {
+      setLoading(true);
+
+      // 轻量级校验：检查URL格式
+      try {
+        // eslint-disable-next-line no-new
+        new URL(data.app_url);
+      } catch {
+        Toast.error(t('admin.vendor.appUrlInvalid'));
+        setLoading(false);
+        return;
+      }
+
+      // 准备提交数据，将 blocklet_meta_url 放入 metadata
+      const { blocklet_meta_url: blockletMetaUrl, ...restData } = data;
+      const submitData = {
+        ...restData,
+        metadata: {
+          ...data.metadata,
+          ...(blockletMetaUrl && { blockletMetaUrl }),
+        },
+      };
+
+      // 如果状态为启用，则检测应用地址可用性
+      if (submitData.status === 'active') {
+        try {
+          const response = await fetch(
+            formatProxyUrl(withQuery(joinURL(submitData.app_url, '__blocklet__.js'), { type: 'json' })),
+            {
+              method: 'GET',
+              headers: { 'Content-Type': 'application/json' },
+            }
+          );
+
+          if (!response.ok) {
+            Toast.error(t('admin.vendor.addressCheckFailed'));
+            setLoading(false);
+            return;
+          }
+
+          // 从响应中获取appPid和appLogo
+          const blockletInfo = await response.json();
+          if (blockletInfo) {
+            submitData.app_pid = blockletInfo.pid || blockletInfo.appPid;
+            submitData.app_logo = blockletInfo.logo || blockletInfo.appLogo;
+          }
+        } catch (error) {
+          Toast.error(t('admin.vendor.addressCheckFailed'));
+          setLoading(false);
+          return;
+        }
+      }
+
+      if (isEditMode && vendorData) {
+        // 编辑模式：更新供应商
+        await api.put(`/api/vendors/${vendorData.id}`, submitData);
+        Toast.success(t('admin.vendor.updateSuccess'));
+        dispatch('vendor.updated');
+      } else {
+        // 创建模式：新建供应商
+        await api.post('/api/vendors', submitData);
+        Toast.success(t('admin.vendor.saved'));
+        dispatch('vendor.created');
+      }
+
+      reset();
+      dispatch('drawer.submitted');
+      if (onSubmitCallback) {
+        onSubmitCallback();
+      }
+      if (onClose) {
+        onClose();
+      }
+    } catch (error) {
+      console.error('Failed to create vendor:', error);
+      Toast.error(formatError(error));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    reset();
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  return (
+    <DrawerForm
+      icon={isEditMode ? null : <AddOutlined />}
+      text={isEditMode ? t('admin.vendor.edit') : t('admin.vendor.create')}
+      open={open}
+      onClose={handleClose}
+      width={800}
+      addons={
+        <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)} disabled={loading || !isValid}>
+          {loading && <CircularProgress size="small" sx={{ mr: 1 }} />}
+          {isEditMode ? t('admin.save') : t('admin.vendor.save')}
+        </Button>
+      }>
+      <Stack spacing={3}>
+        <Stack direction="row" spacing={2}>
+          <Controller
+            name="vendor_key"
+            control={control}
+            rules={{
+              required: t('admin.vendor.vendorKeyRequired'),
+              pattern: {
+                value: /^[a-z0-9_]+$/,
+                message: t('admin.vendor.vendorKeyInvalid'),
+              },
+            }}
+            render={({ field }) => (
+              <TextField
+                {...field}
+                label={t('admin.vendor.vendorKey')}
+                required
+                fullWidth
+                disabled={isEditMode}
+                error={!!errors.vendor_key}
+                helperText={errors.vendor_key?.message || t('admin.vendor.vendorKeyHelp')}
+              />
+            )}
+          />
+          <Controller
+            name="name"
+            control={control}
+            rules={{
+              required: t('admin.vendor.nameRequired'),
+            }}
+            render={({ field }) => (
+              <TextField
+                {...field}
+                label={t('admin.vendor.name')}
+                required
+                fullWidth
+                error={!!errors.name}
+                helperText={errors.name?.message}
+              />
+            )}
+          />
+        </Stack>
+
+        <Controller
+          name="description"
+          control={control}
+          render={({ field }) => (
+            <TextField {...field} label={t('admin.vendor.description')} multiline rows={3} fullWidth />
+          )}
+        />
+
+        <Controller
+          name="app_url"
+          control={control}
+          rules={{
+            required: t('admin.vendor.appUrlRequired'),
+            validate: validateUrl,
+          }}
+          render={({ field }) => (
+            <TextField
+              {...field}
+              label={t('admin.vendor.appUrl')}
+              required
+              fullWidth
+              error={!!errors.app_url}
+              helperText={errors.app_url?.message || t('admin.vendor.appUrlHelp')}
+            />
+          )}
+        />
+
+        <Controller
+          name="webhook_path"
+          control={control}
+          rules={{
+            validate: validateWebhookPath,
+          }}
+          render={({ field }) => (
+            <TextField
+              {...field}
+              label={t('admin.vendor.webhookPath')}
+              fullWidth
+              error={!!errors.webhook_path}
+              helperText={errors.webhook_path?.message || t('admin.vendor.webhookPathHelp')}
+            />
+          )}
+        />
+
+        <Controller
+          name="blocklet_meta_url"
+          control={control}
+          rules={{
+            required: t('admin.vendor.blockletMetaUrlRequired'),
+            validate: validateBlockletMetaUrl,
+          }}
+          render={({ field }) => (
+            <TextField
+              {...field}
+              label={t('admin.vendor.blockletMetaUrl')}
+              required
+              fullWidth
+              error={!!errors.blocklet_meta_url}
+              helperText={errors.blocklet_meta_url?.message || t('admin.vendor.blockletMetaUrlHelp')}
+            />
+          )}
+        />
+
+        <Stack direction="row" spacing={0} sx={{ width: '30%' }}>
+          {/* 分成类型 - 隐藏，固定为比例分成 */}
+          <Controller
+            name="default_commission_type"
+            control={control}
+            render={({ field }) => (
+              <FormControl fullWidth sx={{ display: 'none' }}>
+                <InputLabel>{t('admin.vendor.commissionType')}</InputLabel>
+                <Select {...field} label={t('admin.vendor.commissionType')}>
+                  <MenuItem value="percentage">{t('admin.vendor.percentage')}</MenuItem>
+                  <MenuItem value="fixed_amount">{t('admin.vendor.fixedAmount')}</MenuItem>
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Controller
+            name="default_commission_rate"
+            control={control}
+            rules={{
+              required: t('admin.vendor.commissionRateRequired'),
+              min: {
+                value: 0,
+                message: t('admin.vendor.commissionRateMin'),
+              },
+              max: {
+                value: isPercentage ? 100 : 999999,
+                message: t('admin.vendor.commissionRateMax'),
+              },
+            }}
+            render={({ field }) => (
+              <TextField
+                {...field}
+                label={`${t('admin.vendor.commissionRate')} ${isPercentage ? '(%)' : ''}`}
+                type="number"
+                required
+                fullWidth
+                placeholder="20"
+                error={!!errors.default_commission_rate}
+                helperText={
+                  errors.default_commission_rate?.message ||
+                  (isPercentage ? t('admin.vendor.commissionRateHelp') : t('admin.vendor.commissionAmountHelp'))
+                }
+                inputProps={{
+                  min: 0,
+                  max: isPercentage ? 100 : 999999,
+                  step: isPercentage ? 10 : 1,
+                }}
+              />
+            )}
+          />
+        </Stack>
+
+        <Controller
+          name="status"
+          control={control}
+          render={({ field }) => (
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={field.value === 'active'}
+                  onChange={(e) => field.onChange(e.target.checked ? 'active' : 'inactive')}
+                />
+              }
+              label={watchedValues.status === 'active' ? t('admin.vendor.enabled') : t('admin.vendor.disabled')}
+            />
+          )}
+        />
+      </Stack>
+    </DrawerForm>
+  );
+}