From e2d53abcabafb4045e0e2c1cfb139f65943d572b Mon Sep 17 00:00:00 2001
From: nili <nili@baicizhan.com>
Date: Tue, 2 Jul 2024 10:20:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B1=95=E7=A4=BA=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E5=88=97=E8=A1=A8=20&=20oss=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0apk=E4=BF=9D=E6=8C=81url=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/User/LocalAppList.tsx | 144 ++++++++++++++++++++++++++++++++
 1 file changed, 144 insertions(+)
 create mode 100644 src/pages/User/LocalAppList.tsx

diff --git a/src/pages/User/LocalAppList.tsx b/src/pages/User/LocalAppList.tsx
new file mode 100644
index 0000000..729f230
--- /dev/null
+++ b/src/pages/User/LocalAppList.tsx
@@ -0,0 +1,144 @@
+import { SearchOutlined } from '@ant-design/icons';
+import { ProColumns, ProTable } from '@ant-design/pro-components';
+import { Button, Input, Modal, Space } from 'antd';
+import { useEffect, useState } from 'react';
+
+import { evilAppList } from '@/services/matrix/superAdmin';
+
+export type LocalAppListProps = {
+  data: API.UserBo;
+  onClose: () => void;
+};
+
+interface LocalApp {
+  appName?: string;
+  packageName?: string;
+  evil: boolean;
+}
+
+const LocalAppList: React.FC<LocalAppListProps> = (props) => {
+  const [appArr, setAppArr] = useState<LocalApp[]>();
+  const [filteredAppArr, setFilteredAppArr] = useState<LocalApp[]>();
+
+  const columns: ProColumns<LocalApp>[] = [
+    {
+      title: '应用名',
+      dataIndex: 'appName',
+      ellipsis: true,
+      hideInSearch: true,
+      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
+        <div style={{ padding: 8 }}>
+          <Input
+            placeholder="搜索应用"
+            value={selectedKeys[0]}
+            onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+            onPressEnter={() => confirm()}
+            style={{ marginBottom: 8, display: 'block' }}
+          />
+          <Space>
+            <Button onClick={() => confirm()} type="primary">
+              搜索
+            </Button>
+            <Button onClick={() => clearFilters && clearFilters()} type="link">
+              清除
+            </Button>
+          </Space>
+        </div>
+      ),
+      onFilter: (value, record) => {
+        if (typeof value === 'string' && typeof record?.appName === 'string') {
+          return record.appName.includes(value);
+        }
+        return false;
+      },
+      filterIcon: (filtered) => (
+        <SearchOutlined
+          style={{ color: filtered ? '#1890ff' : undefined }}
+          onPointerOverCapture={undefined}
+          onPointerMoveCapture={undefined}
+        />
+      ),
+    },
+    {
+      title: '应用包名',
+      dataIndex: 'packageName',
+      hideInSearch: true,
+      ellipsis: true,
+      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
+        <div style={{ padding: 8 }}>
+          <Input
+            placeholder="搜索包名"
+            value={selectedKeys[0]}
+            onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+            onPressEnter={() => confirm()}
+            style={{ marginBottom: 8, display: 'block' }}
+          />
+          <Space>
+            <Button onClick={() => confirm()} type="primary">
+              搜索
+            </Button>
+            <Button onClick={() => clearFilters && clearFilters()} type="link">
+              清除
+            </Button>
+          </Space>
+        </div>
+      ),
+      onFilter: (value, record) => {
+        if (typeof value === 'string' && typeof record?.packageName === 'string') {
+          return record.packageName.includes(value);
+        }
+        return false;
+      },
+      filterIcon: (filtered) => (
+        <SearchOutlined
+          style={{ color: filtered ? '#1890ff' : undefined }}
+          onPointerOverCapture={undefined}
+          onPointerMoveCapture={undefined}
+        />
+      ),
+    },
+  ];
+
+  const fetchApp = async () => {
+    const res = await evilAppList();
+    if (res.data) {
+      let common: LocalApp[] = [];
+      let remain: LocalApp[] = [];
+      props.data.localAppList?.forEach((x) => {
+        if (res.data?.some((y) => y.packageName === x.packageName)) {
+          common.push({ ...x, evil: true });
+        } else {
+          remain.push({ ...x, evil: false });
+        }
+      });
+      setAppArr([...common, ...remain]);
+      setFilteredAppArr([...common, ...remain]);
+    }
+  };
+
+  useEffect(() => {
+    fetchApp();
+  }, []);
+
+  return (
+    <Modal style={{ width: 600 }} onCancel={props.onClose} visible={true} footer={[]}>
+      <ProTable
+        onRow={(record) => {
+          return {
+            style: {
+              backgroundColor: record.evil ? 'red' : 'transparent',
+            },
+          };
+        }}
+        search={false}
+        onReset={() => {
+          setFilteredAppArr(appArr);
+        }}
+        columns={columns}
+        dataSource={filteredAppArr}
+      />
+    </Modal>
+  );
+};
+
+export default LocalAppList;