dark
/
pro
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

app打包UI修改

main
cs 2 months ago
parent
f8f1319e2d
commit
815f558e03
3 changed files with 303 additions and 84 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 379
      src/pages/app/package/index.tsx
  2. 4
      src/service/app/package.ts
  3. 4
      src/types/app/package.d.ts

379
src/pages/app/package/index.tsx
View File

@ -1,11 +1,11 @@
import { useTranslation } from '@/i18n.ts'
import { Button, Form, Popconfirm, Divider, Space, Tooltip, Badge } from 'antd'
import { useAtom, useAtomValue } from 'jotai'
import {useTranslation} from '@/i18n.ts'
import {Button, Form, Popconfirm, Divider, Space, Tooltip, Badge} from 'antd'
import {useAtom, useAtomValue} from 'jotai'
import {
deleteAppPackageAtom,
saveOrUpdateAppPackageAtom, appPackageAtom, appPackagesAtom, appPackageSearchAtom, packageAppAtom,
} from '@/store/app/package'
import { useEffect, useMemo, useState } from 'react'
import {useEffect, useMemo, useState} from 'react'
import Action from '@/components/action/Action.tsx'
import {
BetaSchemaForm,
@ -13,199 +13,407 @@ import {
ProFormColumnsType,
} from '@ant-design/pro-components'
import ListPageLayout from '@/layout/ListPageLayout.tsx'
import { useStyle } from './style'
import { FilterOutlined } from '@ant-design/icons'
import { getValueCount, unSetColumnRules } from '@/utils'
import { Table as ProTable } from '@/components/table'
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";
const i18nPrefix = 'appPackages.list'
const AppPackage = () => {
const { styles, cx } = useStyle()
const { t } = useTranslation()
const [ form ] = Form.useForm()
const [ filterForm ] = Form.useForm()
const { mutate: saveOrUpdate, isPending: isSubmitting, isSuccess } = useAtomValue(saveOrUpdateAppPackageAtom)
const [ search, setSearch ] = useAtom(appPackageSearchAtom)
const [ currentAppPackage, setAppPackage ] = useAtom(appPackageAtom)
const { data, isFetching, isLoading, refetch } = useAtomValue(appPackagesAtom)
const { mutate: deleteAppPackage, isPending: isDeleting } = useAtomValue(deleteAppPackageAtom)
const { mutate: packageApp, isPending: packageing } = useAtomValue(packageAppAtom)
const [ open, setOpen ] = useState(false)
const [ openFilter, setFilterOpen ] = useState(false)
const [ searchKey, setSearchKey ] = useState(search?.title)
const {styles, cx} = useStyle()
const {t} = useTranslation()
const [form] = Form.useForm()
const [filterForm] = Form.useForm()
const {mutate: saveOrUpdate, isPending: isSubmitting, isSuccess} = useAtomValue(saveOrUpdateAppPackageAtom)
const [search, setSearch] = useAtom(appPackageSearchAtom)
const [currentAppPackage, setAppPackage] = useAtom(appPackageAtom)
const {data, isFetching, isLoading, refetch} = useAtomValue(appPackagesAtom)
const {mutate: deleteAppPackage, isPending: isDeleting} = useAtomValue(deleteAppPackageAtom)
const {mutate: packageApp, isPending: packageing} = useAtomValue(packageAppAtom)
const [open, setOpen] = useState(false)
const [openFilter, setFilterOpen] = useState(false)
const [searchKey, setSearchKey] = useState(search?.title)
const [trafficEnabled, setTrafficEnabled] = useState(false);
const [, dialog, openDialog] = useDialog({
title: '提示',
children: <div>您还未购买流量套餐！</div>,
okText: '去购买',
onOk: () => {
const columns = useMemo(() => {
}
})
const handleTrafficSwitchClick = async () => {
const data = await aPPServ.check()
setTrafficEnabled(data.data.success)
if (!data.data.success) {
openDialog()
}
};
const drawerColumns = useMemo(() => {
return [
{
title: 'ID',
dataIndex: 'id',
hideInTable: true,
hideInSearch: true,
formItemProps: { hidden: true }
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) => {
@ -218,7 +426,7 @@ const AppPackage = () => {
dataIndex: 'uid',
hideInTable: true,
hideInSearch: true,
formItemProps: { hidden: true }
formItemProps: {hidden: true}
},
{
@ -230,7 +438,7 @@ const AppPackage = () => {
<Action key="package"
as={'a'}
loading={packageing}
disabled={![ 0, 4 ].includes(record.status) || packageing}
disabled={![0, 4].includes(record.status) || packageing}
onClick={() => {
packageApp(record)
}}
@ -257,20 +465,20 @@ const AppPackage = () => {
]
}
] as ProColumns[]
}, [ isDeleting, currentAppPackage, search ])
}, [isDeleting, currentAppPackage, search])
useEffect(() => {
setSearchKey(search?.title)
filterForm.setFieldsValue(search)
}, [ search ])
}, [search])
useEffect(() => {
if (isSuccess) {
setOpen(false)
}
}, [ isSuccess ])
}, [isSuccess])
return (
<ListPageLayout className={styles.container}>
@ -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}
@ -412,7 +620,7 @@ const AppPackage = () => {
},
render: (props,) => {
return (
<div style={{ textAlign: 'right' }}>
<div style={{textAlign: 'right'}}>
<Space>
<Button onClick={() => {
props.reset()
@ -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>
)
}

4
src/service/app/package.ts
View File

@ -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

4
src/types/app/package.d.ts
View File

@ -22,4 +22,8 @@ export namespace APP {
x_86: number;
uid: number;
}
export interface IAppBoolRes{
success: boolean;
}
}
Write Preview
Loading…
Cancel
Save