feat: 应用市场配置

dist/_umi_route_preload_helper.06bc73b6.js → dist/_umi_route_preload_helper.c181a182.js

@@ -1 +1 @@
-!function(){"use strict";var t="/".replace(/([^/])$/,"$1/"),e=location.pathname,n=e.startsWith(t)&&decodeURI("/".concat(e.slice(t.length)));if(n){var a=document,c=a.head,r=a.createElement.bind(a),i=function(t,e,n){var a,c=e.r[t]||(null===(a=Object.entries(e.r).find((function(e){var n=e[0];return new RegExp("^".concat(n.replace(/\/:[^/]+/g,"/[^/]+").replace("/*","/.+"),"$")).test(t)})))||void 0===a?void 0:a[1]);return null==c?void 0:c.map((function(t){var a=e.f[t][1],c=e.f[t][0];return{type:c.split(".").pop(),url:"".concat(n.publicPath).concat(c),attrs:[["data-".concat(e.b),"".concat(e.p,":").concat(a)]]}}))}(n,{"p":"ant-design-pro","b":"webpack","f":[["51.a2ea1b3b.async.js",51],["134.6fc81d91.async.js",134],["169.57647c7d.async.js",169],["p__Welcome.61596037.async.js",185],["p__MoneyManagement.185eb84a.async.js",190],["247.3fe8fb10.async.js",247],["t__plugin-layout__Layout.6cae69f5.chunk.css",301],["t__plugin-layout__Layout.4594a64b.async.js",301],["p__User__Login__index.9d3ab92e.async.js",366],["p__DeviceOwnerApp.ec53e5c4.async.js",371],["390.41467286.async.js",390],["393.38316f72.async.js",393],["397.fb5f72c1.async.js",397],["p__SuperAdmin.0754b3a9.async.js",455],["531.4c68f902.async.js",531],["539.49b7b156.async.js",539],["p__AdvRecordListV2.56bcbbaa.async.js",542],["p__Bind.b6ee068f.async.js",557],["559.016bfdbb.async.js",559],["p__404.0c100574.async.js",571],["635.20e45f05.async.js",635],["p__App__AppManagement.f547622b.async.js",731],["p__AdminManagement.5e2368b3.async.js",816],["822.4ba8fa04.async.js",822],["841.614ef4c0.async.js",841],["p__AdvRecordList.8e5ef22c.async.js",857],["p__UserManagement.b4bfbf1d.async.js",903],["905.6e225d1b.async.js",905],["930.fca7adbf.async.js",930]],"r":{"/*":[19,27],"/":[1,6,7,18,20,27],"/welcome":[1,2,3,11,18,28,6,7,20,27],"/super":[0,1,2,5,13,14,15,23,27,28,6,7,18,20],"/adminList":[0,2,22,23,1,6,7,18,20,27],"/bind":[1,2,11,12,17,18,28,6,7,20,27],"/appList":[0,1,2,5,12,14,15,21,23,27,28,6,7,18,20],"/advList/:code":[0,1,2,14,15,18,23,24,25,27,28,6,7,20],"/advListV2/:code":[0,1,2,14,15,16,18,23,24,27,28,6,7,20],"/user/:code":[0,1,2,14,15,23,26,27,28,6,7,18,20],"/money/:code":[0,1,2,4,14,15,23,27,28,6,7,18,20],"/app/:code":[0,1,2,9,14,15,18,23,24,27,28,6,7,20],"/user/login":[1,2,8,14,23]}},{publicPath:"/"});null==i||i.forEach((function(t){var e,n=t.type,a=t.url;if("js"===n)(e=r("script")).src=a,e.async=!0;else{if("css"!==n)return;(e=r("link")).href=a,e.rel="preload",e.as="style"}t.attrs.forEach((function(t){e.setAttribute(t[0],t[1]||"")})),c.appendChild(e)}))}}();
+!function(){"use strict";var t="/".replace(/([^/])$/,"$1/"),e=location.pathname,n=e.startsWith(t)&&decodeURI("/".concat(e.slice(t.length)));if(n){var a=document,c=a.head,r=a.createElement.bind(a),i=function(t,e,n){var a,c=e.r[t]||(null===(a=Object.entries(e.r).find((function(e){var n=e[0];return new RegExp("^".concat(n.replace(/\/:[^/]+/g,"/[^/]+").replace("/*","/.+"),"$")).test(t)})))||void 0===a?void 0:a[1]);return null==c?void 0:c.map((function(t){var a=e.f[t][1],c=e.f[t][0];return{type:c.split(".").pop(),url:"".concat(n.publicPath).concat(c),attrs:[["data-".concat(e.b),"".concat(e.p,":").concat(a)]]}}))}(n,{"p":"ant-design-pro","b":"webpack","f":[["51.a2ea1b3b.async.js",51],["134.6fc81d91.async.js",134],["169.57647c7d.async.js",169],["p__Welcome.61596037.async.js",185],["p__MoneyManagement.60ec3db9.async.js",190],["247.3fe8fb10.async.js",247],["t__plugin-layout__Layout.6cae69f5.chunk.css",301],["t__plugin-layout__Layout.4594a64b.async.js",301],["p__User__Login__index.9d3ab92e.async.js",366],["p__DeviceOwnerApp.ec53e5c4.async.js",371],["390.41467286.async.js",390],["393.38316f72.async.js",393],["397.fb5f72c1.async.js",397],["p__SuperAdmin.fe6b99ac.async.js",455],["531.4c68f902.async.js",531],["539.49b7b156.async.js",539],["p__AdvRecordListV2.ced10464.async.js",542],["p__Bind.b6ee068f.async.js",557],["559.016bfdbb.async.js",559],["p__404.0c100574.async.js",571],["635.20e45f05.async.js",635],["p__App__AppManagement.5e21b4b7.async.js",731],["p__AdminManagement.5e2368b3.async.js",816],["822.4ba8fa04.async.js",822],["841.614ef4c0.async.js",841],["p__AdvRecordList.8e5ef22c.async.js",857],["p__UserManagement.c0a8d03f.async.js",903],["905.6e225d1b.async.js",905],["930.fca7adbf.async.js",930]],"r":{"/*":[19,27],"/":[1,6,7,18,20,27],"/welcome":[1,2,3,11,18,28,6,7,20,27],"/super":[0,1,2,5,13,14,15,23,27,28,6,7,18,20],"/adminList":[0,2,22,23,1,6,7,18,20,27],"/bind":[1,2,11,12,17,18,28,6,7,20,27],"/appList":[0,1,2,5,12,14,15,21,23,27,28,6,7,18,20],"/advList/:code":[0,1,2,14,15,18,23,24,25,27,28,6,7,20],"/advListV2/:code":[0,1,2,14,15,16,18,23,24,27,28,6,7,20],"/user/:code":[0,1,2,14,15,23,26,27,28,6,7,18,20],"/money/:code":[0,1,2,4,14,15,23,27,28,6,7,18,20],"/app/:code":[0,1,2,9,14,15,18,23,24,27,28,6,7,20],"/user/login":[1,2,8,14,23]}},{publicPath:"/"});null==i||i.forEach((function(t){var e,n=t.type,a=t.url;if("js"===n)(e=r("script")).src=a,e.async=!0;else{if("css"!==n)return;(e=r("link")).href=a,e.rel="preload",e.as="style"}t.attrs.forEach((function(t){e.setAttribute(t[0],t[1]||"")})),c.appendChild(e)}))}}();

dist/index.html

@@ -7,10 +7,10 @@
 <title>Ant Design Pro</title>
 <link rel="stylesheet" href="/umi.1ca9308c.css">
 <script async src="/scripts/loading.js"></script>
-<script src="/_umi_route_preload_helper.06bc73b6.js"></script>
+<script src="/_umi_route_preload_helper.c181a182.js"></script>
 </head>
 <body>
 <div id="root"></div>
-<script src="/umi.f7dc60c9.js"></script>
+<script src="/umi.107712be.js"></script>
 </body>
 </html>

src/pages/App/AppBasicConfigForm.tsx

@@ -1,8 +1,9 @@
-import { Form, Input, Modal, Select } from 'antd';
+import { Form, Input, Modal, Select, UploadFile } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { getBasicConfig, saveBasicConfig } from '../../services/matrix/matrixAppConfigController';
-import { channelList } from '../../utils/commonUtil';
+import { channelList, formatByte } from '../../utils/commonUtil';
 import OSSUpload from '../OSSUpload';
+import OSSUploadMultiple from '../OSSUploadMultiple';
 
 export type AppBasicConfigFormProps = {
   onCancel: () => void;
@@ -61,7 +62,7 @@ const AppBasicConfigForm: React.FC<AppBasicConfigFormProps> = (props) => {
         <Form.Item label="应用名" name="name">
           <Input />
         </Form.Item>
-        <Form.Item label="应用图片" name="img">
+        <Form.Item label="应用icon" name="img">
           <Input.Group compact>
             <Form.Item name="img" noStyle>
               <Input />
@@ -79,8 +80,8 @@ const AppBasicConfigForm: React.FC<AppBasicConfigFormProps> = (props) => {
               <Input />
             </Form.Item>
             <OSSUpload
-              onUploadSuccess={(url: string) => {
-                form.setFieldsValue({ url: url });
+              onUploadSuccess={(url: string, file: File) => {
+                form.setFieldsValue({ url: url, fileSize: formatByte(file.size) });
               }}
             />
           </Input.Group>
@@ -99,6 +100,36 @@ const AppBasicConfigForm: React.FC<AppBasicConfigFormProps> = (props) => {
         <Form.Item label="渠道" name="channel">
           <Select disabled={editing} options={channelList()}></Select>
         </Form.Item>
+        <Form.Item label="app大小" name="fileSize">
+          <Input disabled />
+        </Form.Item>
+        <Form.Item label="app下载次数" name="downloadTimes">
+          <Input disabled />
+        </Form.Item>
+        <Form.Item label="所属公司" name="author">
+          <Input />
+        </Form.Item>
+        <Form.Item label="app包名" name="packageName">
+          <Input />
+        </Form.Item>
+        <Form.Item label="app简介" name="desc">
+          <Input.TextArea />
+        </Form.Item>
+        <Form.Item label="应用截图" name="images">
+          <OSSUploadMultiple
+            value={[]}
+            onChange={(fileList: UploadFile[]) => {
+              const fileUrls = fileList
+                .filter((item) => item.url)
+                .map((item) => item.url)
+                .filter(Boolean) as string[];
+              form.setFieldsValue({ images: fileUrls });
+              console.log(fileUrls);
+            }}
+          />
+
+          <label style={{ color: 'gray' }}>可多选，不传默认会使用之前的旧数据</label>
+        </Form.Item>
       </Form>
     </Modal>
   );

src/pages/OSSUpload.tsx

@@ -1,18 +1,19 @@
 import { toMD5 } from '@/utils/encryptUtil';
 import { InboxOutlined } from '@ant-design/icons';
 import OSS from 'ali-oss';
-import { Button, message, Upload, UploadProps } from 'antd';
+import { Button, message, Upload, UploadFile, UploadProps } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { getSts } from '../services/matrix/admin';
 
 interface OSSUploadProps {
-  onUploadSuccess?: (fileUrl: string) => void;
+  onUploadSuccess?: (fileUrl: string, file: File) => void;
   onUploadError?: (error: any) => void;
 }
 
 const OSSUpload: React.FC<OSSUploadProps> = ({ onUploadSuccess, onUploadError }) => {
   const [uploading, setUploading] = useState(false);
   const [ossClient, setOssClient] = useState<OSS | null>(null);
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
 
   useEffect(() => {
     async function initOssClient() {
@@ -48,7 +49,13 @@ const OSSUpload: React.FC<OSSUploadProps> = ({ onUploadSuccess, onUploadError })
     const { file } = options;
     if (file instanceof File) {
       setUploading(true);
-
+      setFileList([
+        {
+          uid: file.uid,
+          name: file.name,
+          status: 'uploading',
+        },
+      ]);
       try {
         const md5 = await toMD5(file);
         const fileName = `matrix/${md5}.${file.name.split('.').pop()}`;
@@ -60,9 +67,17 @@ const OSSUpload: React.FC<OSSUploadProps> = ({ onUploadSuccess, onUploadError })
         const fileUrl = `https://apks.bzgames.cn/${fileName}`;
 
         if (onUploadSuccess) {
-          onUploadSuccess(fileUrl);
+          onUploadSuccess(fileUrl, file);
         }
         setUploading(false);
+        setFileList([
+          {
+            uid: file.uid,
+            name: file.name,
+            status: 'done',
+            url: fileUrl,
+          },
+        ]);
       } catch (error) {
         message.error('文件上传失败');
         if (onUploadError) {
@@ -77,7 +92,7 @@ const OSSUpload: React.FC<OSSUploadProps> = ({ onUploadSuccess, onUploadError })
   };
 
   return (
-    <Upload showUploadList={false} customRequest={handleUpload} disabled={uploading || !ossClient}>
+    <Upload fileList={fileList} customRequest={handleUpload} disabled={uploading || !ossClient}>
       <Button style={{ marginTop: 10 }} type="primary" icon={<InboxOutlined />}>
         选择文件
       </Button>

src/pages/OSSUploadMultiple.tsx

@@ -0,0 +1,110 @@
+import { toMD5 } from '@/utils/encryptUtil';
+import { InboxOutlined } from '@ant-design/icons';
+import OSS from 'ali-oss';
+import { Button, message, Upload, UploadFile, UploadProps } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { getSts } from '../services/matrix/admin';
+
+interface OSSUploadMultipleProps {
+  value?: UploadFile[];
+  onChange?: (fileList: UploadFile[]) => void;
+}
+
+const OSSUploadMultiple: React.FC<OSSUploadMultipleProps> = ({ value, onChange }) => {
+  const [uploading, setUploading] = useState(false);
+  const [ossClient, setOssClient] = useState<OSS | null>(null);
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
+
+  useEffect(() => {
+    if (value) {
+      setFileList(value);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    async function initOssClient() {
+      try {
+        const stsResponse = await getSts(); // 假设你有一个 getSTS 函数可以获取 STS 凭证
+        if (
+          !stsResponse.data ||
+          !stsResponse.data.accessKeySecret ||
+          !stsResponse.data.accessKeyId
+        ) {
+          message.error('初始化失败，请稍后再试');
+          return;
+        }
+        const client = new OSS({
+          region: 'oss-cn-beijing',
+          accessKeyId: stsResponse.data.accessKeyId,
+          accessKeySecret: stsResponse.data.accessKeySecret,
+          stsToken: stsResponse.data.securityToken,
+          bucket: stsResponse.data.bucket,
+        });
+        setOssClient(client);
+      } catch (error) {
+        message.error('初始化 OSS 客户端失败');
+      }
+    }
+    initOssClient();
+  }, []);
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(fileList);
+    }
+  }, [fileList]);
+
+  const handleUpload: UploadProps['customRequest'] = async (options) => {
+    const { file } = options;
+    if (file instanceof File) {
+      setUploading(true);
+      try {
+        const md5 = await toMD5(file);
+        const fileName = `matrix/${md5}.${file.name.split('.').pop()}`;
+        await ossClient?.put(fileName, file, {
+          headers: {
+            'Content-Type': file.type,
+          },
+        });
+        const fileUrl = `https://apks.bzgames.cn/${fileName}`;
+        setUploading(false);
+        setFileList((prevFileList) => [
+          ...prevFileList,
+          {
+            uid: file.uid,
+            name: file.name,
+            status: 'done',
+            url: fileUrl,
+          },
+        ]);
+      } catch (error) {
+        message.error('文件上传失败');
+      } finally {
+        setUploading(false);
+      }
+    } else {
+      message.error('上传文件类型错误');
+    }
+  };
+
+  const onRemove = (file: UploadFile) => {
+    const files = (fileList || []).filter((v) => v.url !== file.url);
+    setFileList(files);
+  };
+
+  return (
+    <Upload
+      multiple
+      fileList={fileList}
+      onRemove={onRemove}
+      customRequest={handleUpload}
+      disabled={uploading || !ossClient}
+    >
+      <Button style={{ marginTop: 10 }} type="primary" icon={<InboxOutlined />}>
+        选择文件
+      </Button>
+    </Upload>
+  );
+};
+
+export default OSSUploadMultiple;

src/services/matrix/typings.d.ts

@@ -36,6 +36,12 @@ declare namespace API {
   };
 
   type AppBasicConfig = {
+    packageName?: string;
+    author?: string;
+    fileSize?: string;
+    desc?: string;
+    images?: string[];
+    downloadTimes?: number;
     id?: number;
     code?: string;
     secret?: string;
@@ -202,6 +208,8 @@ declare namespace API {
     aliPay?: string;
     wx?: string;
     normalConfig?: string;
+    marketConfig?: string;
+    updatedAt?: string;
   };
 
   type MatrixAppBo = {

src/utils/commonUtil.ts

@@ -56,4 +56,17 @@ const prefixInteger = (num: number, length: number) => {
   return str.padStart(length, '0');
 };
 
-export { channelList, envMsg, moneyStatus, prefixInteger, timestamp2Num };
+const formatByte = (num: number) => {
+  let n = num;
+  if (n < 1024) {
+    return n + ' B';
+  }
+  n = parseFloat((n / 1024).toFixed(2));
+  if (n < 1024) {
+    return n + ' KB';
+  }
+  n = parseFloat((n / 1024).toFixed(2));
+  return n + ' MB';
+};
+
+export { channelList, envMsg, formatByte, moneyStatus, prefixInteger, timestamp2Num };