app打包优化

src/components/action/Action.tsx

@@ -10,7 +10,8 @@ const Action = ({ title, as, children, ...props }: ActionProps) => {
     const { styles } = useStyle()
 
     const isLink = as === 'a' || props.type === 'link'
-  const Comp = isLink ? 'a' : Button
+    //fixme 如果外部同时设置 as={'a'} disabled={true} ，这里a标签会置灰，但是仍可点击，为什么不直接用Button？
+    const Comp = isLink ? 'a' : Button
     return (
             <span className={styles.container}>
                 <Comp {...props}

src/pages/app/package/index.tsx

@@ -17,7 +17,6 @@ import {useStyle} from './style'
 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";
 
@@ -46,7 +45,7 @@ const AppPackage = () => {
     children: <div>您还未购买流量套餐！</div>,
     okText: '去购买',
     onOk: () => {
-        //todo 跳转应用插件市场
+      //todo 跳转应用插件市场
     }
   })
 
@@ -152,9 +151,8 @@ const AppPackage = () => {
           allowClear: false
         },
         render: (_text, record) => {
-          //0未处理  1队列中 2打包中 3打包成功 4打包失败
           return <Badge status={[record.os] as any}
-                        text={['Android', 'Windows'][record.status]}/>
+                        text={['Android', 'Windows'][record.os]}/>
         },
         formItemProps: {
           rules: [
@@ -177,14 +175,6 @@ const AppPackage = () => {
         }
       },
       {
-        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',
@@ -305,31 +295,38 @@ const AppPackage = () => {
         formItemProps: {hidden: true}
       },
       {
-        title: t(`${i18nPrefix}.columns.package_name`, '包名'),
-        dataIndex: 'package_name',
+        title: t(`${i18nPrefix}.columns.app_name`, '应用名'),
+        dataIndex: 'app_name',
         formItemProps: {
           rules: [
             {
               required: true,
-              message: t('message.required', '包名必填')
+              message: t('message.required', '应用名必填')
             }
           ]
         }
       },
-
       {
-        title: t(`${i18nPrefix}.columns.app_name`, '应用名'),
-        dataIndex: 'app_name',
+        title: t(`${i18nPrefix}.columns.pkgStatus`, '打包状态'),
+        dataIndex: 'pkgStatus.status',
+        render: (_text, record) => {
+          return <Badge
+                  status={['default', 'processing', 'processing', 'success', 'error'][record.pkgStatus.status] as any}
+                  text={['处理中', '队列中', '打包中', '打包成功', '打包失败'][record.pkgStatus.status]}/>
+        }
+      },
+      {
+        title: t(`${i18nPrefix}.columns.package_name`, '包名'),
+        dataIndex: 'package_name',
         formItemProps: {
           rules: [
             {
               required: true,
-              message: t('message.required', '应用名必填')
+              message: t('message.required', '包名必填')
             }
           ]
         }
       },
-
       {
         title: t(`${i18nPrefix}.columns.app_icon`, '应用图标'),
         dataIndex: 'app_icon',
@@ -374,11 +371,18 @@ const AppPackage = () => {
           ]
         },
         render: (_text, record) => {
-          //0未处理  1队列中 2打包中 3打包成功 4打包失败
           return <Badge status={[record.os] as any}
-                        text={['Android', 'Windows'][record.status]}/>
+                        text={['Android', 'Windows'][record.os]}/>
+        }
+      },
+      {
+        title: t(`${i18nPrefix}.columns.enable_traffic`, '是否已启用流量加速'),
+        dataIndex: 'enable_traffic',
+        render: (_text, record) => {
+          return <div>{['否', '是'][record.enable_traffic]}</div>
         }
       },
+
       {
         title: t(`${i18nPrefix}.columns.splash_url`, '启动图'),
         dataIndex: 'splash_url',
@@ -413,15 +417,6 @@ const AppPackage = () => {
         dataIndex: 'key_pwd',
       },
       {
-        title: t(`${i18nPrefix}.columns.x_86`, '是否支持32位'),
-        dataIndex: 'x_86',
-        valueType: 'switch',
-        render: (_text, record) => {
-          return <Switch checked={record.x_86 === 1} size={'small'}/>
-        }
-      },
-
-      {
         title: t(`${i18nPrefix}.columns.uid`, 'uid'),
         dataIndex: 'uid',
         hideInTable: true,
@@ -433,16 +428,25 @@ const AppPackage = () => {
         title: t(`${i18nPrefix}.columns.option`, '操作'),
         key: 'option',
         valueType: 'option',
+        tooltip: '打包预计5分钟左右，需要刷新网页',
         fixed: 'right',
         render: (_, record) => [
           <Action key="package"
                   as={'a'}
                   loading={packageing}
-                  disabled={![0, 4].includes(record.status) || packageing}
+                  disabled={[1, 2].includes(record.pkgStatus.status) || packageing}
                   onClick={() => {
                     packageApp(record)
                   }}
-          >{t('actions.package', '应用打包')}</Action>,
+          >{t('actions.package', '打包')}</Action>,
+          <Divider type={'vertical'}/>,
+          <Action key="download"
+                  as={'a'}
+                  type={'link'}
+                  target={'_blank'}
+                  href={record.pkgStatus.app_url}
+                  disabled={!record.pkgStatus.app_url}
+          >{t('actions.download', '下载')}</Action>,
           <Divider type={'vertical'}/>,
           <Action key="edit"
                   as={'a'}

src/service/app/package.ts

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

src/store/app/package.ts

@@ -33,7 +33,17 @@ export const appPackagesAtom = atomWithQuery((get) => {
   return {
     queryKey: [ 'appPackages', get(appPackageSearchAtom) ],
     queryFn: async ({ queryKey: [ , params ] }) => {
-      return await aPPServ.list(params as SearchParams)
+      const list = await aPPServ.list(params as SearchParams)
+
+      // 获取打包状态
+      await Promise.all(
+              list.data.rows?.map(async (row) => {
+                const pkgStatus = await aPPServ.getPkgStatus({ id: row.id })
+                row.pkgStatus = pkgStatus.data
+                return row
+              })
+      )
+      return list
     },
     select: res => {
       const data = res.data
@@ -97,7 +107,7 @@ export const packageAppAtom = atomWithMutation((get) => {
       return await aPPServ.package({ id: data.id })
     },
     onSuccess: (res) => {
-      message.success('message.packageSuccess')
+      message.success('打包预计5分钟左右，请稍候刷新网页查看')
       //更新列表
       get(queryClientAtom).invalidateQueries({ queryKey: [ 'appPackages', get(appPackageSearchAtom) ] })
       return res

src/types/app/package.d.ts

@@ -21,9 +21,27 @@ export namespace APP {
     message: string;
     x_86: number;
     uid: number;
+    pkgStatus: IAppPkgStatus
   }
 
-  export interface IAppBoolRes{
+  /**
+   * Bool类型返回结果
+   */
+  export interface IAppBoolRes {
     success: boolean;
   }
+
+  /**
+   * 打包状态
+   */
+  export interface IAppPkgStatus {
+    id: number;
+    status: number;  // 0未处理  1队列中  2打包中 3打包成功 4打包失败
+    message: string;
+    start_time: string;
+    end_time: string;
+    app_url: string;
+    position: number;
+    total: number;
+  }
 }