骨量

src/components/BTable.tsx

@@ -1,4 +1,4 @@
-import { PaginationProps, Table } from "antd";
+import { Pagination, PaginationProps, Table } from "antd";
 import { useState } from "react";
 const BTable = (props: any) => {
   const { store, dataSource } = props;
@@ -24,21 +24,27 @@ const BTable = (props: any) => {
     });
   };
   return (
-    <Table
-      pagination={{
-        size: "small",
-        total: store.total,
-        defaultCurrent: 1,
-        pageSize: 20,
-        showSizeChanger: true,
-        onShowSizeChange: onShowSizeChange,
-        onChange: onChange,
-      }}
-      rowSelection={rowSelection}
-      columns={props.columns}
-      dataSource={dataSource}
-      
-    />
+    <>
+      <Table
+        style={{height:"100%",overflow:"auto"}}
+        pagination={false}
+        loading={store.listStatus}
+        rowSelection={rowSelection}
+        columns={props.columns}
+        dataSource={dataSource}
+      />
+     <div style={{textAlign:"right",padding:"10px"}}>
+     <Pagination 
+        size="small"  
+        defaultCurrent={1} 
+        pageSize={20} 
+        showSizeChanger={true} 
+        total={store.total}
+        onShowSizeChange= {onShowSizeChange}
+        onChange={onChange}
+      />
+     </div>
+    </>
   );
 };
 

src/components/form/simple_form.tsx

@@ -6,7 +6,6 @@ import AliUpload from "../aliUpload";
 const { TextArea } = Input;
 const SimpleForm = (props: SimpleFormData) => {
   const [form] = Form.useForm();
-  const { RangePicker } = DatePicker;
   const onFinish = (values: any) => {
     props.onFinish(values);
   };
@@ -21,9 +20,10 @@ const SimpleForm = (props: SimpleFormData) => {
       name={props.formName}
       ref={props.formRef}
       form={form}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 8 }}
+      layout="horizontal"
       initialValues={{ menubar: true }}
-      labelCol={{ span: props.colProps }}
-      wrapperCol={{ span: 16 }}
       onFinish={onFinish}
       autoComplete="on"
     >
@@ -36,6 +36,7 @@ const SimpleForm = (props: SimpleFormData) => {
                 label={v.label}
                 name={v.name}
                 rules={v.rules}
+                
               >
                 <Input defaultValue={v.value} value={v.value} />
               </Form.Item>

src/components/menu/app.tsx

@@ -8,7 +8,7 @@ const appMenu = {
   label: "app管理",
   children: [
     {
-      key: "/app-list",
+      key: "/app/list",
       icon: <VideoCameraOutlined />,
       label: "app列表",
     },

src/index.less

@@ -10,7 +10,14 @@ body {
 #root{
   height: 100%;
 }
-
+.projectContent {
+  box-sizing: border-box;
+  margin: 10px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;

src/pages/activeType/index.tsx

@@ -17,15 +17,8 @@ const ActiveType = (props: Store) => {
   const [record, setRecord] = useState<any>(null);
   const [userId, setId] = useState<Number | null>(null);
   const columns: ColumnsType<UserDataType> = [
-    {
-      title: "类型名称",
-      dataIndex: "name",
-    },
-    {
-      title: "类型描述",
-      dataIndex: "desc",
-    },
-
+    { title: "类型名称", dataIndex: "name" },
+    { title: "类型描述", dataIndex: "desc" },
     {
       title: "操作",
       dataIndex: "id",
@@ -36,32 +29,41 @@ const ActiveType = (props: Store) => {
         <div>
           <Space direction="vertical">
             <Space wrap>
-              <Button
-                type="dashed"
-                size="small"
-                onClick={() => {
-                  edit(record);
-                }}
-              >
-                编辑
-              </Button>
-
-              <Button
-                type="dashed"
-                danger
-                size="small"
-                onClick={() => {
-                  activityTypeStore.deleteItem(record.id);
-                }}
-              >
-                删除
-              </Button>
+              <EditBtn />
+              <DeBtn />
             </Space>
           </Space>
         </div>
       ),
     },
   ];
+  const EditBtn = () => {
+    return (
+      <Button
+        type="dashed"
+        size="small"
+        onClick={() => {
+          edit(record);
+        }}
+      >
+        编辑
+      </Button>
+    );
+  };
+  const DeBtn = () => {
+    return (
+      <Button
+        type="dashed"
+        danger
+        size="small"
+        onClick={() => {
+          activityTypeStore.deleteItem(record.id);
+        }}
+      >
+        删除
+      </Button>
+    );
+  };
   const edit = (record) => {
     record = {
       ...record,
@@ -84,6 +86,7 @@ const ActiveType = (props: Store) => {
     }
     setIsModalOpen(false);
   };
+  
   useEffect(() => {
     activityTypeStore.getlist(UserConfig.LIST);
   }, [activityTypeStore]);

src/pages/app/app-config.tsx

@@ -0,0 +1,42 @@
+import { Space, Tabs, TabsProps } from "antd";
+import { inject, observer } from "mobx-react";
+import { useEffect } from "react";
+import { Store } from "antd/lib/form/interface";
+import PayConfig from "./config/pay-config";
+import PushConfig from "./config/push-config";
+import ImConfig from "./config/im-config";
+import React from "react";
+const AppManageConfig = (props: Store) => {
+  const { appStore } = props;
+
+  useEffect(() => {}, []);
+  const items: TabsProps["items"] = [
+    {
+      key: "1",
+      label: "支付配置",
+      children: <PayConfig />
+    },
+    {
+      key: "2",
+      label: "推送配置",
+      children: <PushConfig />
+    },
+    {
+      key: "3",
+      label: "im配置",
+      children: <ImConfig />
+    },
+  ];
+  const onChange = (key: string) => {
+    console.log(key);
+  };
+  return (
+    <div className="contentBox">
+      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
+        <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
+      </Space>
+    </div>
+  );
+};
+
+export default inject("appStore")(observer(AppManageConfig));

src/pages/app/app-list.tsx

@@ -0,0 +1,157 @@
+import { Space, Button, FormInstance } from "antd";
+import { inject, observer } from "mobx-react";
+import type { ColumnsType } from "antd/es/table";
+import BTable from "@/components/BTable";
+import { useEffect, useState } from "react";
+import UserConfig from "@/service/apiConfig/userConfig";
+import { UserDataType } from "@/model/userModel";
+import { Store } from "antd/lib/form/interface";
+import Modal from "antd/lib/modal/Modal";
+import SimpleForm from "@/components/form/simple_form";
+import React from "react";
+import { useNavigate } from "react-router";
+const AppManageList = (props: Store) => {
+  const { appStore } = props;
+  const navigate = useNavigate();
+  const [id, setId] = useState<any>(null);
+  const [projectConfig, setProjectConfig] = useState<any>([]);
+  const [record, setRecord] = useState<any>(null);
+  const formRef = React.useRef<FormInstance>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const columns: ColumnsType<UserDataType> = [
+    { title: "app名称", dataIndex: "appName" },
+    { title: "图标", dataIndex: "appIcon" },
+    { title: "预览图片", dataIndex: "activeIcon" },
+    {
+      title: "操作",
+      dataIndex: "id",
+      ellipsis: {
+        showTitle: false,
+      },
+      render: (any, record) => (
+        <div>
+          <Space direction="vertical">
+            <Space wrap>
+              <Button
+                type="dashed"
+                size="small"
+                onClick={() => {
+                  edit(record);
+                }}
+              >
+                编辑
+              </Button>
+              <Button
+                type="dashed"
+                danger
+                size="small"
+                onClick={() => {
+                  appStore.deleteItem(record.id);
+                }}
+              >
+                删除
+              </Button>
+              <Button type="dashed" size="small" onClick={() => {
+                 navigate("/app/config/" + record.id)
+              }}>
+                信息配置
+              </Button>
+            </Space>
+          </Space>
+        </div>
+      ),
+    },
+  ];
+  const edit = (record) => {
+    setProjectConfig(defaultConfig);
+    setIsModalOpen(true);
+    formRef.current?.setFieldsValue(record);
+    setRecord(record);
+    setId(record.id);
+  };
+  const defaultConfig = [
+    {
+      type: "input",
+      label: "app名称",
+      name: "appName",
+      value: "",
+      rules: [{ required: true, message: "请输入卡片名称!" }],
+    },
+    {
+      type: "upload",
+      label: "icon",
+      name: "appIcon",
+      value: [],
+    },
+    {
+      type: "upload",
+      label: "图片",
+      name: "photosIds",
+      value: [],
+    },
+  ];
+  useEffect(() => {
+    appStore.getlist(UserConfig.LIST);
+  }, [appStore]);
+  const onFinish = (values: any) => {
+    let ids = values.photosIds.map((item) => {
+      return item.id;
+    });
+    let appIcon = values.appIcon.map((item) => {
+      return item.id;
+    });
+    console.log(values);
+    values = {
+      ...values,
+      photosIds: ids.join(","),
+      appIcon: appIcon.join(","),
+    };
+    if (!id) {
+      appStore.add(values);
+    } else {
+      appStore.putItem(id, values);
+    }
+    setIsModalOpen(false);
+  };
+  const onFinishFailed = () => {};
+  return (
+    <div className="contentBox">
+      <Button
+        className="projectContentAdd"
+        onClick={() => {
+          setProjectConfig(defaultConfig);
+          setIsModalOpen(true);
+        }}
+      >
+        添加app
+      </Button>
+      <Modal
+        title="app信息"
+        width={800}
+        open={isModalOpen}
+        onCancel={() => setIsModalOpen(false)}
+        afterClose={() => formRef.current?.resetFields()}
+        onOk={() => formRef.current?.submit()}
+      >
+        <SimpleForm
+          formRef={formRef}
+          createCallback={() => {
+            formRef.current?.setFieldsValue(record);
+          }}
+          formName="card_basic"
+          colProps={4}
+          subBtnName="提交"
+          formDatas={projectConfig}
+          onFinish={onFinish}
+          initialValues={true}
+          onFinishFailed={onFinishFailed}
+        />
+      </Modal>
+      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
+        <BTable store={appStore} columns={columns} dataSource={appStore.list} />
+      </Space>
+    </div>
+  );
+};
+
+export default inject("appStore")(observer(AppManageList));

src/pages/app/config/im-config.tsx

@@ -0,0 +1,20 @@
+import { Space } from "antd";
+import { inject, observer } from "mobx-react";
+import { useEffect } from "react";
+import { Store } from "antd/lib/form/interface";
+const ImConfig = (props: Store) => {
+  const { appStore } = props;
+  useEffect(() => {
+    console.log("im");
+  }, []);
+ 
+  return (
+    <div className="contentBox">
+      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
+         im配置
+      </Space>
+    </div>
+  );
+};
+
+export default inject("appStore")(observer(ImConfig));

src/pages/app/config/pay-config.tsx

@@ -0,0 +1,110 @@
+import { Space } from "antd";
+import { inject, observer } from "mobx-react";
+import { useEffect } from "react";
+import { Store } from "antd/lib/form/interface";
+import SimpleForm from "@/components/form/simple_form";
+const PayConfig = (props: Store) => {
+  const { appStore } = props;
+  useEffect(() => {}, []);
+  const onFinishFailed = () => {};
+  const onFinish = (values: any) => {
+    let ids = values.photosIds.map((item) => {
+      return item.id;
+    });
+    let appIcon = values.appIcon.map((item) => {
+      return item.id;
+    });
+    console.log(values);
+    values = {
+      ...values,
+      photosIds: ids.join(","),
+      appIcon: appIcon.join(","),
+    };
+  };
+  return (
+    <div className="contentBox">
+      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
+        <div style={{ backgroundColor: "#fff", padding: "10px" }}>
+          <p>微信支付</p>
+          <SimpleForm
+            formName={""}
+            colProps={0}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            formDatas={[
+              {
+                type: "input",
+                label: "AppId",
+                name: "appId",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+              {
+                type: "input",
+                label: "AppSecret",
+                name: "appSecret",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+              {
+                type: "input",
+                label: "MchID",
+                name: "mchID",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+              {
+                type: "input",
+                label: "微信支付key",
+                name: "WeixinPayKey",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+              {
+                type: "input",
+                label: "微信支付回调地址",
+                name: "WeixinPayNotifyUrl",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+            ]}
+          />
+        </div>
+        <div style={{ backgroundColor: "#fff", padding: "10px" }}>
+          <p>支付宝支付</p>
+          <SimpleForm
+            formName={""}
+            colProps={0}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            formDatas={[
+              {
+                type: "input",
+                label: "AliAppId",
+                name: "aliAppId",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+              {
+                type: "input",
+                label: "AliKey",
+                name: "aliKey",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+              {
+                type: "input",
+                label: "AliPayNotifyUrl",
+                name: "aliPayNotifyUrl",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+            ]}
+          />
+        </div>
+      </Space>
+    </div>
+  );
+};
+
+export default inject("appStore")(observer(PayConfig));

src/pages/app/config/push-config.tsx

@@ -0,0 +1,222 @@
+import { Button, FormInstance, Space } from "antd";
+import { inject, observer } from "mobx-react";
+import { useEffect } from "react";
+import { Store } from "antd/lib/form/interface";
+import SimpleForm from "@/components/form/simple_form";
+import React from "react";
+import { useParams } from "react-router";
+const PushConfig = (props: Store) => {
+  const { appStore } = props;
+  const { id } = useParams();
+  const hwformRef = React.useRef<FormInstance>(null);
+  const iosformRef = React.useRef<FormInstance>(null);
+  const opformRef = React.useRef<FormInstance>(null);
+  const vivoformRef = React.useRef<FormInstance>(null);
+  const xmformRef = React.useRef<FormInstance>(null);
+
+  useEffect(() => {
+    appStore.getIosConfig(id)
+  }, [appStore, id]);
+
+  const onFinishFailed = () => {};
+
+  const iosOnFinish = (values: any) => {
+    console.log(values);
+    appStore.setIosConfig(id,values)
+  };
+  const xmOnFinish = (values: any) => {};
+  const hwOnFinish = (values: any) => {};
+  const oppoOnFinish = (values: any) => {};
+  const vivoOnFinish = (values: any) => {};
+  return (
+    <div className="contentBox">
+      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
+        <div style={{ backgroundColor: "#fff", padding: "10px" }}>
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
+            <p>苹果推送</p>
+            <Button type="primary" onClick={()=>{
+              iosformRef.current?.submit();
+            }}>保存</Button>
+          </div>
+          <SimpleForm
+            formRef={iosformRef}
+            formName={""}
+            colProps={0}
+            onFinish={iosOnFinish}
+            onFinishFailed={onFinishFailed}
+            formDatas={[
+              {
+                type: "input",
+                label: "AppId",
+                name: "appId",
+                value: "",
+                rules: [{ required: true, message: "请输入appId!" }],
+              },
+              {
+                type: "input",
+                label: "appleBundleId",
+                name: "appleBundleId",
+                value: "",
+                rules: [{ required: true, message: "请输入appleBundleId!" }],
+              },
+              {
+                type: "input",
+                label: "password",
+                name: "password",
+                value: "",
+                rules: [{ required: true, message: "请输入推送密码!" }],
+              },
+              {
+                type: "upload",
+                label: "推送证书",
+                name: "centerFile",
+                value: "",
+                rules: [{ required: true, message: "请上传推送证书!" }],
+              },
+            ]}
+          />
+        </div>
+        <div style={{ backgroundColor: "#fff", padding: "10px" }}>
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
+            <p>华为推送</p>
+            <Button type="primary">保存</Button>
+          </div>
+          <SimpleForm
+            formName={""}
+            formRef={hwformRef}
+            colProps={0}
+            onFinish={hwOnFinish}
+            onFinishFailed={onFinishFailed}
+            formDatas={[
+              {
+                type: "input",
+                label: "huaWeiClientID",
+                name: "huaWeiClientID",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+              {
+                type: "input",
+                label: "huaWeiClientSecret",
+                name: "huaWeiClientSecret",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+            ]}
+          />
+        </div>
+        <div style={{ backgroundColor: "#fff", padding: "10px" }}>
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
+            <p>oppo推送</p>
+            <Button type="primary">保存</Button>
+          </div>
+
+          <SimpleForm
+            formRef={opformRef}
+            formName={""}
+            colProps={0}
+            onFinish={oppoOnFinish}
+            onFinishFailed={onFinishFailed}
+            formDatas={[
+              {
+                type: "input",
+                label: "oppoAppKey",
+                name: "oppoAppKey",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+              {
+                type: "input",
+                label: "oppoMasterSecret",
+                name: "oppoMasterSecret",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+            ]}
+          />
+        </div>
+        <div style={{ backgroundColor: "#fff", padding: "10px" }}>
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
+            <p>vivo推送</p>
+            <Button type="primary">保存</Button>
+          </div>
+          <SimpleForm
+            formRef={vivoformRef}
+            formName={""}
+            colProps={0}
+            onFinish={vivoOnFinish}
+            onFinishFailed={onFinishFailed}
+            formDatas={[
+              {
+                type: "input",
+                label: "vivoappId",
+                name: "vivoappId",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+              {
+                type: "input",
+                label: "vivoAppKey",
+                name: "vivoAppKey",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+              {
+                type: "input",
+                label: "vivoAppSecret",
+                name: "vivoAppSecret",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+            ]}
+          />
+        </div>
+        <div style={{ backgroundColor: "#fff", padding: "10px" }}>
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
+            <p>小米推送</p>
+            <Button type="primary">保存</Button>
+          </div>
+          <SimpleForm
+            formRef={xmformRef}
+            formName={""}
+            colProps={0}
+            onFinish={xmOnFinish}
+            onFinishFailed={onFinishFailed}
+            formDatas={[
+              {
+                type: "input",
+                label: "xiaoMiappId",
+                name: "xiaoMiappId",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+              {
+                type: "input",
+                label: "xiaoMiAppKey",
+                name: "xiaoMiAppKey",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+              {
+                type: "input",
+                label: "xiaoMiAppSecret",
+                name: "xiaoMiAppSecret",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+              {
+                type: "input",
+                label: "xiaoMiAppChannelId",
+                name: "xiaoMiAppChannelId",
+                value: "",
+                rules: [{ required: true, message: "请输入卡片名称!" }],
+              },
+            ]}
+          />
+        </div>
+      </Space>
+    </div>
+  );
+};
+
+export default inject("appStore")(observer(PushConfig));

src/pages/app/index.tsx

@@ -1,170 +1,10 @@
-import { Tooltip, Space, Button, FormInstance } from "antd";
-import { inject, observer } from "mobx-react";
-import type { ColumnsType } from "antd/es/table";
-import BTable from "@/components/BTable";
-import { useEffect, useState } from "react";
-import UserConfig from "@/service/apiConfig/userConfig";
-import { UserDataType } from "@/model/userModel";
-import { Store } from "antd/lib/form/interface";
-import Modal from "antd/lib/modal/Modal";
-import SimpleForm from "@/components/form/simple_form";
-import React from "react";
-const AppManage = (props: Store) => {
-  const { appStore } = props;
-  const [id, setId] = useState<any>(null);
-  const [projectConfig, setProjectConfig] = useState<any>([]);
-  const [record, setRecord] = useState<any>(null);
-  const formRef = React.useRef<FormInstance>(null);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const columns: ColumnsType<UserDataType> = [
-    {
-      title: "app名称",
-      dataIndex: "appName",
-    },
-    {
-      title: "图标",
-      dataIndex: "appIcon",
-    },
-    {
-      title: "预览图片",
-      dataIndex: "activeIcon",
-      ellipsis: {
-        showTitle: false,
-      },
-      render: (address) => (
-        <Tooltip placement="topLeft" title={address}>
-          {address}
-        </Tooltip>
-      ),
-    },
-    {
-      title: "操作",
-      dataIndex: "id",
-      ellipsis: {
-        showTitle: false,
-      },
-      render: (any, record) => (
-        <div>
-          <Space direction="vertical">
-            <Space wrap>
-              <Button
-                type="dashed"
-                size="small"
-                onClick={() => {
-                  edit(record);
-                }}
-              >
-                编辑
-              </Button>
-              {/* <Button type="dashed" size="small" onClick={() => {
-                          navigate("/card/componsition/" + record.id)
-                      }}>用户作文</Button> */}
-              <Button
-                type="dashed"
-                danger
-                size="small"
-                onClick={() => {
-                  appStore.deleteItem(record.id);
-                }}
-              >
-                删除
-              </Button>
-            </Space>
-          </Space>
-        </div>
-      ),
-    },
-  ];
-  const edit = (record) => {
-    setProjectConfig(defaultConfig);
-    setIsModalOpen(true);
-    formRef.current?.setFieldsValue(record);
-    setRecord(record);
-    setId(record.id);
-  };
-  const defaultConfig = [
-    {
-      type: "input",
-      label: "app名称",
-      name: "appName",
-      value: "",
-      rules: [{ required: true, message: "请输入卡片名称!" }],
-    },
-    {
-      type: "upload",
-      label: "icon",
-      name: "appIcon",
-      value: [],
-    },
-    {
-      type: "upload",
-      label: "图片",
-      name: "photosIds",
-      value: [],
-    },
-  ];
-  useEffect(() => {
-    appStore.getlist(UserConfig.LIST);
-  }, [appStore]);
-  const onFinish = (values: any) => {
-    let ids = values.photosIds.map((item) => {
-      return item.id;
-    });
-    let appIcon = values.appIcon.map((item) => {
-      return item.id;
-    });
-    console.log(values);
-    values = {
-      ...values,
-      photosIds: ids.join(","),
-      appIcon: appIcon.join(","),
-    };
-    if (!id) {
-      appStore.add(values);
-    } else {
-      appStore.putItem(id, values);
-    }
-    setIsModalOpen(false);
-  };
-  const onFinishFailed = () => {};
+import { Outlet } from "react-router";
+const AppManage = () => {
   return (
     <div className="contentBox">
-      <Button
-        className="projectContentAdd"
-        onClick={() => {
-          setProjectConfig(defaultConfig);
-          setIsModalOpen(true);
-        }}
-      >
-        添加app
-      </Button>
-      <Modal
-        title="app信息"
-        width={800}
-        open={isModalOpen}
-        onCancel={() => setIsModalOpen(false)}
-        afterClose={() => formRef.current?.resetFields()}
-        onOk={() => formRef.current?.submit()}
-      >
-        <SimpleForm
-          formRef={formRef}
-          createCallback={() => {
-            formRef.current?.setFieldsValue(record);
-          }}
-          formName="card_basic"
-          colProps={4}
-          subBtnName="提交"
-          formDatas={projectConfig}
-          onFinish={onFinish}
-          initialValues={true}
-          onFinishFailed={onFinishFailed}
-        />
-      </Modal>
-      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
-        <BTable store={appStore} columns={columns} dataSource={appStore.list} />
-      </Space>
+      <Outlet></Outlet>
     </div>
   );
 };
 
-export default inject("appStore")(observer(AppManage));
+export default AppManage;

src/pages/dymiticState/index.tsx

@@ -17,7 +17,7 @@ const DymiticState = (props: Store) => {
     { title: "操作", dataIndex: "id", render: (id: any) => render(id) },
   ];
   const render = (id) => (
-    <div>
+    <div >
       <Space align="center">
         <Button
           type="dashed"
@@ -36,8 +36,9 @@ const DymiticState = (props: Store) => {
     dynamicStore.getlist();
   }, [dynamicStore]);
   return (
-    <div style={{ margin: 10 }}>
+    <div style={{ margin: 10 }} className="projectContent">
       <BTable
+        loading={dynamicStore.listStatus}
         columns={columns}
         store={dynamicStore}
         dataSource={dynamicStore.list}

src/router/routers/app.tsx

@@ -1,13 +1,28 @@
 import { Suspense, lazy } from "react";
-const AppManage = lazy(() => import("@/pages/app"));
+const AppManageList = lazy(() => import("@/pages/app/app-list"));
+const AppManageConfig = lazy(() => import("@/pages/app/app-config"));
 export const appRouter = [
   {
-    path: "/app-list",
-    index: true,
-    element: (
-      <Suspense>
-        <AppManage />
-      </Suspense>
-    ),
+    path: "/app",
+    children: [
+      {
+        path: "/app/list",
+        index: true,
+        element: (
+          <Suspense>
+            <AppManageList />
+          </Suspense>
+        ),
+      },
+      {
+        path: "/app/config/:id",
+        index: true,
+        element: (
+          <Suspense>
+            <AppManageConfig />
+          </Suspense>
+        ),
+      },
+    ],
   },
 ];

src/service/apiConfig/appConfig.ts

@@ -5,10 +5,10 @@ class AppConfig {
     static DELETE = "app"
     static EDIT = "app"
     static XIAOMIAPPPUSH = "app/push/xiaomi/" // 小米推送配置信息
-    static VIVOAPPPUSH = "app/push/vivo/" // 小米推送配置信息
-    static OPPOAPPPUSH = "app/push/oppo/" // 小米推送配置信息
-    static HUAWEIAPPPUSH = "app/push/huawei/" // 小米推送配置信息
-    static IOSAPPPUSH = "app/push/ios/" // 小米推送配置信息
-    static WechatConfig = "app/wechatConfig/" // 小米推送配置信息
+    static VIVOAPPPUSH = "app/push/vivo/" // vivo推送配置信息
+    static OPPOAPPPUSH = "app/push/oppo/" // oppo推送配置信息
+    static HUAWEIAPPPUSH = "app/push/huawei/" // huawei推送配置信息
+    static IOSAPPPUSH = "app/push/ios/" // ios推送配置信息
+    static WechatConfig = "app/wechatConfig/" // 微信配置信息
 }
 export default AppConfig; 

src/store/appStore/index.ts

@@ -1,17 +1,27 @@
 import { CardDataType } from "@/util/model/interface";
 import BaseStore from "../baseStore";
+import baseHttp from "@/service/base";
 import { action, makeObservable } from "mobx";
 import AppConfig from "@/service/apiConfig/appConfig";
 
-class AppStore extends BaseStore<CardDataType>{
+class AppStore extends BaseStore<CardDataType> {
     constructor() {
         super(AppConfig)
         makeObservable(this, {
             otherAction: action,
+            getIosConfig: action,
         })
     }
     otherAction() {
 
     }
+    // 获取banner
+    async setIosConfig(id: number, param) {
+        return await baseHttp.put(AppConfig.IOSAPPPUSH + "/" + id, param)
+    }
+    // 获取banner
+    async getIosConfig(id: number) {
+        return await baseHttp.get(AppConfig.IOSAPPPUSH + "/" + id, {})
+    }
 }
 export default new AppStore();

src/store/baseStore.ts

@@ -11,6 +11,7 @@ interface BaseStoreInterface<T> {
     total: number
     page: Pages
     setPages(pages: Pages): any
+    listStatus:boolean | null | undefined
 }
 
 class BaseStore<B> implements BaseStoreInterface<B> {
@@ -25,10 +26,12 @@ class BaseStore<B> implements BaseStoreInterface<B> {
             item: observable,
             total: observable,
             page: observable,
-            add: action
+            add: action,
+            listStatus:observable,
         })
         this.urlConfig = urlConfig;
     }
+    
     // 删除
     async deleteItem(id: number) {
         await baseHttp.delete(this.urlConfig.DELETE + "/" + id, {})
@@ -53,6 +56,7 @@ class BaseStore<B> implements BaseStoreInterface<B> {
 
     // 获取列表
     async getlist() {
+        this.listStatus = true;
         let res = await baseHttp.get(this.urlConfig.LIST, {
             pageNum: this.page?.PageNum | 1,
             pageSize: this.page?.PageSize | 20,
@@ -80,11 +84,13 @@ class BaseStore<B> implements BaseStoreInterface<B> {
             this.list = data;
             this.total = res.data.total | res.data.totals
         })
+        this.listStatus = false;
     }
     list!: Array<B>;
     item!: B | null | string
     total!: number;
     page!: Pages;
+    listStatus: boolean | null | undefined;
 }
 
 export default BaseStore

src/store/system/index.ts

@@ -10,7 +10,7 @@ class SystemStore extends BaseStore<any> {
             addBanner: action,
             addImage: action,
         })
-    }
+    } 
     // 获取banner
     async getBanner() {
         return await baseHttp.get( SystemConfig.BannerList, {})