app打包UI修改

src/pages/app/package/index.tsx

@@ -18,6 +18,8 @@ import { FilterOutlined } from '@ant-design/icons'
 import {getValueCount, unSetColumnRules} from '@/utils'
 import {Table as ProTable} from '@/components/table'
 import Switch from '@/components/switch'
+import aPPServ from "@/service/app/package.ts";
+import {useDialog} from "@/components/dialog";
 
 const i18nPrefix = 'appPackages.list'
 
@@ -37,8 +39,26 @@ const AppPackage = () => {
   const [open, setOpen] = useState(false)
   const [openFilter, setFilterOpen] = useState(false)
   const [searchKey, setSearchKey] = useState(search?.title)
+  const [trafficEnabled, setTrafficEnabled] = useState(false);
 
-  const columns = useMemo(() => {
+  const [, dialog, openDialog] = useDialog({
+    title: '提示',
+    children: <div>您还未购买流量套餐！</div>,
+    okText: '去购买',
+    onOk: () => {
+
+    }
+  })
+
+  const handleTrafficSwitchClick = async () => {
+    const data = await aPPServ.check()
+    setTrafficEnabled(data.data.success)
+    if (!data.data.success) {
+      openDialog()
+    }
+  };
+
+  const drawerColumns = useMemo(() => {
     return [
       {
         title: 'ID',
@@ -48,164 +68,352 @@ const AppPackage = () => {
         formItemProps: {hidden: true}
       },
       {
-        title: t(`${i18nPrefix}.columns.package_name`, '包名'),
-        dataIndex: 'package_name',
+        title: t(`${i18nPrefix}.columns.app_name`, '应用名称'),
+        dataIndex: 'app_name',
+        valueType: 'text',
+        fieldProps: {
+          maxLength: 10,
+          showCount: true,
+        },
         formItemProps: {
+          tooltip: '手机端建议不超过6个字',
           rules: [
             {
               required: true,
-              message: t('message.required', '包名必填')
+              message: t('message.required', '应用名称必填')
             }
           ]
         }
       },
-
       {
-        title: t(`${i18nPrefix}.columns.app_name`, '应用名'),
-        dataIndex: 'app_name',
+        title: t(`${i18nPrefix}.columns.package_name`, '包名'),
+        dataIndex: 'package_name',
+        valueType: 'text',
+        fieldProps: {
+          placeholder: '例: com.baidu.app',
+          maxLength: 20,
+          showCount: true,
+        },
         formItemProps: {
           rules: [
             {
               required: true,
-              message: t('message.required', '应用名必填')
+              message: t('message.required', '包名必填')
             }
           ]
         }
       },
-
       {
-        title: t(`${i18nPrefix}.columns.app_icon`, '应用图标'),
+        title: t(`${i18nPrefix}.columns.app_icon`, '应用图标链接'),
         dataIndex: 'app_icon',
+        valueType: 'input',
         formItemProps: {
+          tooltip: '建议图标最大尺寸512x512，格式png，Win应用可以直接用favicon.ico链接',
           rules: [
             {
               required: true,
               message: t('message.required', '应用图标必填')
+            },
+            {
+              pattern: /^(http|https):\/\/[^\s$.?#].[^\s]*$/,
+              message: t('message.invalidUrl', '请输入有效的URL')
             }
           ]
         }
       },
-
       {
-        title: t(`${i18nPrefix}.columns.web_url`, '主页地址'),
+        title: t(`${i18nPrefix}.columns.web_url`, '应用主页链接'),
         dataIndex: 'web_url',
+        valueType: 'input',
         formItemProps: {
+          tooltip: '填自己网站的链接',
           rules: [
             {
               required: true,
-              message: t('message.required', '主页地址必填')
+              message: t('message.required', '应用主页链接必填')
+            },
+            {
+              pattern: /^(http|https):\/\/[^\s$.?#].[^\s]*$/,
+              message: t('message.invalidUrl', '请输入有效的URL')
             }
           ]
         }
       },
-
       {
-        title: t(`${i18nPrefix}.columns.splash_url`, '启动图'),
-        dataIndex: 'splash_url',
+        title: t(`${i18nPrefix}.columns.os`, '目标系统'),
+        dataIndex: 'os',
+        valueType: 'select',
+        fieldProps: {
+          options: [
+            {label: 'Android', value: 0},
+            {label: 'Windows', value: 1}
+          ],
+          defaultValue: 0,
+          allowClear: false
+        },
+        render: (_text, record) => {
+          //0未处理  1队列中 2打包中 3打包成功 4打包失败
+          return <Badge status={[record.os] as any}
+                        text={['Android', 'Windows'][record.status]}/>
         },
-
-      {
-        title: t(`${i18nPrefix}.columns.conf`, '配置地址'),
-        dataIndex: 'conf',
         formItemProps: {
           rules: [
             {
               required: true,
-              message: t('message.required', '配置地址必填')
             }
           ]
         }
       },
-
       {
-        title: t(`${i18nPrefix}.columns.jks_url`, '签名文件地址'),
+        title: t(`${i18nPrefix}.columns.enable_traffic`, '是否启用流量加速功能'),
+        dataIndex: 'enable_traffic',
+        valueType: 'switch',
+        fieldProps: {
+          onClick: handleTrafficSwitchClick,
+          checked: trafficEnabled
+        },
+        formItemProps: {
+          tooltip: '防屏蔽功能，需先购买流量套餐',
+        }
+      },
+      {
+        title: t(`${i18nPrefix}.columns.x_86`, '是否支持32位操作系统'),
+        dataIndex: 'x_86',
+        valueType: 'switch',
+        formItemProps: {
+          tooltip: 'Android则是arm-v7a',
+        }
+      },
+      {
+        title: t(`${i18nPrefix}.columns.splash_url`, 'Android启动页图片链接'),
+        dataIndex: 'splash_url',
+        valueType: 'input',
+        formItemProps: {
+          tooltip: '启动页的图片，只支持Android',
+          rules: [
+            {
+              pattern: /^(http|https):\/\/[^\s$.?#].[^\s]*$/,
+              message: t('message.invalidUrl', '请输入有效的URL')
+            }
+          ]
+        }
+      },
+      {
+        title: t(`${i18nPrefix}.columns.splash_color`, 'Android主题色'),
+        dataIndex: 'splash_color',
+        valueType: 'color',
+        formItemProps: {
+          tooltip: '建议选择启动页图片的底色，效果更美观，只支持Android',
+        }
+      },
+      {
+        title: t(`${i18nPrefix}.columns.jks_url`, 'Android签名文件链接'),
         dataIndex: 'jks_url',
+        valueType: 'input',
         formItemProps: {
+          tooltip: 'jks签名文件url，不填则使用默认的签名',
           rules: [
             {
-              required: true,
-              message: t('message.required', '签名文件地址必填')
+              pattern: /^(http|https):\/\/[^\s$.?#].[^\s]*$/,
+              message: t('message.invalidUrl', '请输入有效的URL')
             }
           ]
         }
       },
-
       {
-        title: t(`${i18nPrefix}.columns.app_url`, '应用地址'),
-        dataIndex: 'app_url',
+        title: t(`${i18nPrefix}.columns.store_pwd`, 'Android签名文件密码'),
+        dataIndex: 'store_pwd',
+        valueType: 'password',
+        formItemProps: {
+          tooltip: '如果自定义jks签名文件，此项必填',
+          rules: [
+            {
+              validator: (_, value, callback) => {
+                form.validateFields(['jks_url'])
+                        .then(() => {
+                          const jksUrl = form.getFieldValue('jks_url');
+                          if (jksUrl && !value) {
+                            callback(t('message.required', '密码必填'));
+                          } else {
+                            callback();
+                          }
+                        })
+                        .catch(() => callback());
+              }
+            }
+          ]
+        }
       },
-
       {
-        title: t(`${i18nPrefix}.columns.splash_color`, 'App背景色'),
-        dataIndex: 'splash_color',
+        title: t(`${i18nPrefix}.columns.key_alias`, 'Android密钥别名'),
+        dataIndex: 'key_alias',
+        valueType: 'input',
+        formItemProps: {
+          tooltip: '如果自定义jks签名文件，此项必填',
+          rules: [
+            {
+              validator: (_, value, callback) => {
+                form.validateFields(['jks_url'])
+                        .then(() => {
+                          const jksUrl = form.getFieldValue('jks_url');
+                          if (jksUrl && !value) {
+                            callback(t('message.required', '别名必填'));
+                          } else {
+                            callback();
+                          }
+                        })
+                        .catch(() => callback());
+              }
+            }
+          ]
+        }
+      },
+      {
+        title: t(`${i18nPrefix}.columns.key_pwd`, 'Android密钥密码'),
+        dataIndex: 'key_pwd',
+        valueType: 'password',
+        formItemProps: {
+          tooltip: '如果自定义jks签名文件，此项必填',
+          rules: [
+            {
+              validator: (_, value, callback) => {
+                form.validateFields(['jks_url'])
+                        .then(() => {
+                          const jksUrl = form.getFieldValue('jks_url');
+                          if (jksUrl && !value) {
+                            callback(t('message.required', '密码必填'));
+                          } else {
+                            callback();
+                          }
+                        })
+                        .catch(() => callback());
+              }
+            }
+          ]
+        }
       },
+    ] as ProColumns[]
+  }, [isDeleting, currentAppPackage, search])
 
+  const columns = useMemo(() => {
+    return [
       {
-        title: t(`${i18nPrefix}.columns.key_alias`, 'key别名'),
-        dataIndex: 'key_alias',
+        title: 'ID',
+        dataIndex: 'id',
+        hideInTable: true,
+        hideInSearch: true,
+        formItemProps: {hidden: true}
+      },
+      {
+        title: t(`${i18nPrefix}.columns.package_name`, '包名'),
+        dataIndex: 'package_name',
         formItemProps: {
           rules: [
             {
               required: true,
-              message: t('message.required', 'key别名必填')
+              message: t('message.required', '包名必填')
             }
           ]
         }
       },
 
       {
-        title: t(`${i18nPrefix}.columns.store_pwd`, 'jks密码'),
-        dataIndex: 'store_pwd',
+        title: t(`${i18nPrefix}.columns.app_name`, '应用名'),
+        dataIndex: 'app_name',
         formItemProps: {
           rules: [
             {
               required: true,
-              message: t('message.required', 'jks密码必填')
+              message: t('message.required', '应用名必填')
             }
           ]
         }
       },
 
       {
-        title: t(`${i18nPrefix}.columns.key_pwd`, 'key密码'),
-        dataIndex: 'key_pwd',
+        title: t(`${i18nPrefix}.columns.app_icon`, '应用图标'),
+        dataIndex: 'app_icon',
         formItemProps: {
           rules: [
             {
               required: true,
-              message: t('message.required', 'key密码必填')
+              message: t('message.required', '应用图标必填')
             }
           ]
         }
       },
 
       {
-        title: t(`${i18nPrefix}.columns.status`, '状态'),
-        dataIndex: 'status',
+        title: t(`${i18nPrefix}.columns.web_url`, '主页地址'),
+        dataIndex: 'web_url',
+        formItemProps: {
+          rules: [
+            {
+              required: true,
+              message: t('message.required', '主页地址必填')
+            }
+          ]
+        }
+      },
+      {
+        title: t(`${i18nPrefix}.columns.os`, '目标系统'),
+        dataIndex: 'os',
         valueType: 'select',
         fieldProps: {
           options: [
-            { label: '未处理', value: 0 },
-            { label: '队列中', value: 1 },
-            { label: '打包中', value: 2 },
-            { label: '打包成功', value: 3 },
-            { label: '打包失败', value: 4 },
+            {label: 'Android', value: 0},
+            {label: 'Windows', value: 1}
+          ]
+        },
+        formItemProps: {
+          rules: [
+            {
+              required: true,
+              message: t('message.required', 'key密码必填')
+            }
           ]
         },
         render: (_text, record) => {
           //0未处理  1队列中 2打包中 3打包成功 4打包失败
-          return <Badge status={[ 'default', 'processing', 'processing', 'success', 'error' ][record.status] as any}
-                        text={[ '处理', '队列中', '打包中', '打包成功', '打包失败' ][record.status]}/>
+          return <Badge status={[record.os] as any}
+                        text={['Android', 'Windows'][record.status]}/>
         }
       },
+      {
+        title: t(`${i18nPrefix}.columns.splash_url`, '启动图'),
+        dataIndex: 'splash_url',
+      },
+      {
+        title: t(`${i18nPrefix}.columns.jks_url`, '签名文件地址'),
+        dataIndex: 'jks_url',
+      },
 
       {
-        title: t(`${i18nPrefix}.columns.message`, '打包信息'),
-        dataIndex: 'message',
+        title: t(`${i18nPrefix}.columns.app_url`, '应用地址'),
+        dataIndex: 'app_url',
+      },
+
+      {
+        title: t(`${i18nPrefix}.columns.splash_color`, 'App背景色'),
+        dataIndex: 'splash_color',
+      },
+
+      {
+        title: t(`${i18nPrefix}.columns.key_alias`, 'key别名'),
+        dataIndex: 'key_alias',
       },
 
       {
-        title: t(`${i18nPrefix}.columns.x_86`, '32位'),
+        title: t(`${i18nPrefix}.columns.store_pwd`, 'jks密码'),
+        dataIndex: 'store_pwd',
+      },
+
+      {
+        title: t(`${i18nPrefix}.columns.key_pwd`, 'key密码'),
+        dataIndex: 'key_pwd',
+      },
+      {
+        title: t(`${i18nPrefix}.columns.x_86`, '是否支持32位'),
         dataIndex: 'x_86',
         valueType: 'switch',
         render: (_text, record) => {
@@ -378,13 +586,13 @@ const AppPackage = () => {
                       setOpen(open)
                     }}
                     loading={isSubmitting}
-                    onValuesChange={(values) => {
+                    onValuesChange={() => {
 
                     }}
                     onFinish={async (values) => {
                       saveOrUpdate(values)
                     }}
-                    columns={columns as ProFormColumnsType[]}/>
+                    columns={drawerColumns as ProFormColumnsType[]}/>
             <BetaSchemaForm
                     title={t(`${i18nPrefix}.filter.title`, '应用打包高级查询')}
                     grid={true}
@@ -429,7 +637,7 @@ const AppPackage = () => {
                       },
 
                     }}
-                    onValuesChange={(values) => {
+                    onValuesChange={() => {
 
                     }}
 
@@ -445,6 +653,9 @@ const AppPackage = () => {
 
                     }}
                     columns={unSetColumnRules(columns.filter(item => !item.hideInSearch)) as ProFormColumnsType[]}/>
+            {
+              dialog
+            }
           </ListPageLayout>
   )
 }

src/service/app/package.ts

@@ -20,6 +20,10 @@ const appPackage = {
   package: async (params: any) => {
     return await request.post<IPageResult<APP.IAppPackage>>(`/package/package`, { ...params })
   },
+
+  check: async () => {
+    return await request.get<APP.IAppBoolRes>(`/package/traffic/check`)
+  },
 }
 
 export default appPackage

src/types/app/package.d.ts

@@ -22,4 +22,8 @@ export namespace APP {
     x_86: number;
     uid: number;
   }
+
+  export interface IAppBoolRes{
+    success: boolean;
+  }
 }